From 1e00adfea09ab5313c94e597bd8f686671e6cbf0 Mon Sep 17 00:00:00 2001
From: David Beniamine <david.beniamine@tetras-libre.fr>
Date: Fri, 18 Feb 2022 11:14:26 +0100
Subject: [PATCH] Fix several responsive issue
---
article-img.twig | 2 +-
base.twig | 2 +-
css/style.css | 63 ++++++++++++------------------------------------
3 files changed, 17 insertions(+), 50 deletions(-)
diff --git a/article-img.twig b/article-img.twig
index 0bc5876..ac2ee5b 100644
--- a/article-img.twig
+++ b/article-img.twig
@@ -1 +1 @@
-<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}}">
diff --git a/base.twig b/base.twig
index 84f0aed..0798590 100644
--- a/base.twig
+++ b/base.twig
@@ -29,7 +29,7 @@
<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">
<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>
</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">
diff --git a/css/style.css b/css/style.css
index f68377b..722d8f9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -48,6 +48,7 @@ body { display: flex; flex-direction: column; }
#header, #footer { flex: 0 0 auto; }
#main {
+ margin-top: 10vh;
padding: 5em 0 4em;
}
@@ -70,7 +71,15 @@ body { display: flex; flex-direction: column; }
#title * { margin: 0; color: #41B171; }
#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; }
@@ -123,47 +132,6 @@ a#logo:hover, #top .active a, #top a:hover, #nav-toggle:hover { color: #1e924d;
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 ***/
@font-face{
@@ -231,7 +199,6 @@ h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem; font-weight: normal; font-style: italic; }
-img { max-width: 100%; }
hr {
border: 0.15em solid #f5f5f5;
@@ -486,10 +453,14 @@ img.picture {
text-decoration: none;
}
-.content ul, .content ol, .items li ul {
+.content ul, .content ol, {
padding: 20px 30px;
}
+ul.items {
+ padding-left: 0;
+}
+
.wrap {
min-width: 280px;
max-width: 1024px;
@@ -509,7 +480,3 @@ img.picture {
width: 100%;
z-index: 1000;
}
-
-#main {
- margin-top: 60px;
-}
--
GitLab