Fix several responsive issue

article-img.twig

-<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}}">

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">

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;
-}