mobile: fix headers's style for mobiles (add clear both)

1 files changed, 53 insertions, 46 deletions

diff --git a/static/hugo-theme-console/css/console.css b/static/hugo-theme-console/css/console.css
index ab095ef..b2449ec 100644
--- a/static/hugo-theme-console/css/console.css
+++ b/static/hugo-theme-console/css/console.css
@@ -30,6 +30,27 @@
     text-rendering: optimizeLegibility;
 }
 
+:root {
+    --global-font-size: 16px;
+    --global-font-color: #444;
+    --mono-font-stack: Roboto Mono, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+    --font-stack: Roboto Mono, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+    --global-line-height: 1.6em;
+    --page-width: 70em;
+    --display-h1-decoration: 1;
+    --code-bg-color: #fff;
+}
+
+@media only screen and (max-width: 850px) {
+    :root {
+        --global-font-size: 14px;
+        --global-font-color: #444;
+        --global-line-height: 1.6em;
+        --page-width: 70em;
+    }
+} 
+
+
 .sidebar-heading {
     text-transform: none;
     letter-spacing: 0;
@@ -69,6 +90,7 @@ h6,
 .h5,
 .h6 {
     font-family: var(--font-stack);
+    clear: both;
 }
 
 h1 {
@@ -127,17 +149,6 @@ strong {
     font-weight: normal;
 }
 
-:root {
-    --global-font-size: 16px;
-    --global-font-color: #444;
-    --mono-font-stack: Roboto Mono, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
-    --font-stack: Roboto Mono, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
-    --global-line-height: 1.6em;
-    --page-width: 70em;
-    --display-h1-decoration: 1;
-    --code-bg-color: #fff;
-}
-
 .terminal-menu li {
     margin-right: 30px;
 }
@@ -165,17 +176,44 @@ figure {
     color: var(--global-font-color);
 }
 
+.image-grid {
+    display: grid;
+    grid-template-rows: auto;
+    display: grid;
+    grid-gap: 1em;
+    grid-template-rows: auto;
+    grid-template-columns: repeat(auto-fit,
+            minmax(calc(var(--page-width) / 4), 1fr));
+}
+
+.terminal-prompt::after {
+    -webkit-animation: cursor 1s infinite;
+    animation: cursor 1s infinite;
+    width: 10px;
+}
+
+.terminal-prompt::before {
+    content: none;
+}
+
+.gallery-image {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
 @media only screen and (max-width: 850px) {
     .site-name {
         width: 2ch;
         overflow: hidden;
         display: inline-block;
     }
+ 
     .terminal-nav {
         align-items: flex-start;
         flex-direction: column;
         display: flex;
     }
+ 
     .terminal-menu ul {
         align-items: flex-start;
         display: flex;
@@ -183,18 +221,15 @@ figure {
         justify-content: left;
         margin-top: 0;
     }
+ 
     .terminal-menu li {
         margin-right: 20px;
     }
+ 
     .logo {
         padding: calc(var(--global-space) * 1) 0 calc(var(--global-space) * 1);
     }
-    :root {
-        --global-font-size: 14px;
-        --global-font-color: #444;
-        --global-line-height: 1.6em;
-        --page-width: 70em;
-    }
+ 
     figure {
         margin-top: 5px;
         margin-bottom: 5px;
@@ -209,32 +244,4 @@ figure {
         margin-top: 50px;
         padding-top: 5px;;
     }
-}
-
-
-.image-grid {
-    display: grid;
-    grid-template-rows: auto;
-    display: grid;
-    grid-gap: 1em;
-    grid-template-rows: auto;
-    grid-template-columns: repeat(auto-fit,
-            minmax(calc(var(--page-width) / 4), 1fr));
-}
-
-.terminal-prompt::after {
-    -webkit-animation: cursor 1s infinite;
-    animation: cursor 1s infinite;
-    width: 10px;
-}
-
-.terminal-prompt::before {
-    content: none;
-}
-
-.gallery-image {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-
+}
\ No newline at end of file