Skip to content
Snippets Groups Projects
Verified Commit 1e00adfe authored by David Beniamine's avatar David Beniamine
Browse files

Fix several responsive issue

parent a31fc736
Branches
No related tags found
No related merge requests found
<img style="max-width:300px;max-height:200px;" src="{{assets_url}}/img/blog/{{img}}"> <img style="max-width:min(100%, 300px);max-height:200px;" src="{{assets_url}}/img/blog/{{img}}">
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<header id="top" role="banner"> <header id="top" role="banner">
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end sticky d-flex flex-row flex-wrap"> <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end sticky d-flex flex-row flex-wrap">
<a id="logo" class="navbar-brand flex-grow-1" href="{{ "index"|link }}"> <a id="logo" class="navbar-brand flex-grow-1" href="{{ "index"|link }}">
<img style="height:100px;min-width:130px;" src="{{ pages["_meta"].meta.logo|url }}" alt="{{ site_title }}"> <img src="{{ pages["_meta"].meta.logo|url }}" alt="{{ site_title }}">
<span>{{ pages["_meta"].meta.tagline|markdown }}</span> <span>{{ pages["_meta"].meta.tagline|markdown }}</span>
</a> </a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
......
...@@ -48,6 +48,7 @@ body { display: flex; flex-direction: column; } ...@@ -48,6 +48,7 @@ body { display: flex; flex-direction: column; }
#header, #footer { flex: 0 0 auto; } #header, #footer { flex: 0 0 auto; }
#main { #main {
margin-top: 10vh;
padding: 5em 0 4em; padding: 5em 0 4em;
} }
...@@ -70,7 +71,15 @@ body { display: flex; flex-direction: column; } ...@@ -70,7 +71,15 @@ body { display: flex; flex-direction: column; }
#title * { margin: 0; color: #41B171; } #title * { margin: 0; color: #41B171; }
#title p { font-style: italic; } #title p { font-style: italic; }
#logo img { float:left; clear:both; } #logo img {
float:left;
clear:both;
min-width: 100px;
max-height: 100px;
max-width: 50vw;
padding: 0;
margin: 0;
}
#logo + #title.tagline h1 { margin: 0; } #logo + #title.tagline h1 { margin: 0; }
...@@ -123,47 +132,6 @@ a#logo:hover, #top .active a, #top a:hover, #nav-toggle:hover { color: #1e924d; ...@@ -123,47 +132,6 @@ a#logo:hover, #top .active a, #top a:hover, #nav-toggle:hover { color: #1e924d;
text-align: right; text-align: right;
} }
/*** BASIC LAYOUT: EXTRA SMALL DEVICES ***/
@media (max-width: 767px) {
#main { padding: 2em 0 1em; }
#title, #logo { padding: 2em 1.5em 2em 0; }
#logo { height: 8.8em; }
#top {
clear: both;
padding: 0;
}
#top ul {
padding-bottom: 1em;
}
#top ul li {
display: block;
margin-left: 0;
text-align: center;
}
#top ul li a {
display: block;
padding: 0.5em 0;
}
.js #nav-toggle {
display: block;
float: right;
width: 2em;
margin: 0.6667em 0;
font-size: 1.5rem;
line-height: 2em;
text-align: center;
cursor: pointer;
}
.js #nav-toggle > * { vertical-align: middle; }
#footer p { padding: 1em 0; }
#footer .social { padding: 0.5em 0 0.5em 1em; }
}
/*** TYPOGRAPHY ***/ /*** TYPOGRAPHY ***/
@font-face{ @font-face{
...@@ -231,7 +199,6 @@ h4 { font-size: 1.1rem; } ...@@ -231,7 +199,6 @@ h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; } h5 { font-size: 1rem; }
h6 { font-size: 1rem; font-weight: normal; font-style: italic; } h6 { font-size: 1rem; font-weight: normal; font-style: italic; }
img { max-width: 100%; }
hr { hr {
border: 0.15em solid #f5f5f5; border: 0.15em solid #f5f5f5;
...@@ -486,10 +453,14 @@ img.picture { ...@@ -486,10 +453,14 @@ img.picture {
text-decoration: none; text-decoration: none;
} }
.content ul, .content ol, .items li ul { .content ul, .content ol, {
padding: 20px 30px; padding: 20px 30px;
} }
ul.items {
padding-left: 0;
}
.wrap { .wrap {
min-width: 280px; min-width: 280px;
max-width: 1024px; max-width: 1024px;
...@@ -509,7 +480,3 @@ img.picture { ...@@ -509,7 +480,3 @@ img.picture {
width: 100%; width: 100%;
z-index: 1000; z-index: 1000;
} }
#main {
margin-top: 60px;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment