Fix main flexbox layout

grml · Oct 3, 2024 · e716d95 · e716d95
1 parent 0631ecd
commit e716d95
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -25,26 +25,31 @@ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre
   ol {font-size:70%} */
   b,strong { font-weight: bold; }
   i,em { font-style: italic; }
-  main time { text-align: left; line-height: 0.85em; color: #999; margin: 10px 0 0 0; text-transform: lowercase; display: block; font-weight: bold; padding: 10px 12px 0 0; }
 
   header { font-size: 10pt; height: 5em; padding-top: 2.7em; padding-left: 1.1em; }
   header a { color: navy; text-decoration: none; }
   header h1 { color: navy; font-size: 240%; line-height: 100%; font-weight: bold; }
   header h2 { color: navy; font-size: 110%; line-height: 130%; font-weight: bold; }
   header #logo { float: left; }
 
-  .mainandnav { display: flex; width: 100%; margin: 0; }
-  .mainandnav main { width: 85%; }
-  .mainandnav nav { width: 15%; }
+  .mainandnav { display: flex; flex-flow: row wrap; column-gap: 1em; }
+  .mainandnav main { width: auto; flex: 1 100%; }
+  .mainandnav nav { padding-top: 2em; flex: 1 auto; }
+  @media all and (min-width: 800px) {
+    .mainandnav main { flex: 14 0; order: 1; }
+    .mainandnav nav { order: 2; }
+  }
 
-  main { padding: 10px; }
+  main { padding: 0 1em 0 1em; }
 
   main h1 {color:navy; font-size: 200%; font-weight:bold; padding-top: 1.5em; padding-bottom: 0.2em; }
   main h2, main h2 a {color:black; font-size: 120%; font-weight:bold; padding-top: 0.5em; padding-bottom: 0.2em; text-decoration: none; }
   main h3 {color:black; font-size:115%; font-weight:bold; padding-top: 0.5em; padding-bottom:0.3em; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CFB8B8;
 	margin-bottom:0em}
   main h4 {color:black; font-size:105%; font-weight:bold}
 
+  main time { text-align: left; line-height: 0.85em; color: #999; margin: 10px 0 0 0; text-transform: lowercase; display: block; font-weight: bold; padding: 0 1em 0 0; }
+
   main p {text-align:justify; color:black; line-height: 1.5em; padding-bottom: 0.4em;}
 
   main p a {color:#C70036; text-decoration: underline}
@@ -58,4 +63,6 @@ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre
 
   main ul.pagination { text-align: center; }
   main ul.pagination li { display: inline; }
+
+  nav h2 { font-weight: bold; color: #999; line-height:2em; }
 }