public/css/index.css

@@ -20,21 +20,23 @@
 	box-sizing: border-box;
 }
 
-html,
+html {
-body {
 	padding: 0;
 	margin: 0 auto;
 	min-height:100%;
 	font-family: var(--font-family);
 	color: var(--text-color);
-	max-width:1600px;
-}
-html {
 	overflow-y: scroll;
 	background: center bottom fixed repeat-x url("/img/dark-b10.png"), center top fixed url("/img/erratu18.png");
 	background-color:#120f2b;
 }
 
+body {
+	max-width:1600px;
+  padding:8px;
+  margin: auto;
+}
+
 /* https://www.a11yproject.com/posts/how-to-hide-content/ */
 .visually-hidden {
 	clip: rect(0 0 0 0);
@@ -84,7 +86,11 @@ a[href].header-anchor:focus,
 }
 
 .wrapper {
-  display:flex;
+  display:grid;
+  grid-template-columns: 320px 1fr 240px;
+  column-gap: 8px;
+  margin-bottom: 8px;
+  max-width: 100%;
 }
 
 header h1 a {
@@ -102,7 +108,7 @@ h1 img {
 }
 
 header nav {
-  margin: 3px 12px;
+  margin-bottom: 8px;
 }
 
 header nav {
@@ -158,7 +164,11 @@ main,
   box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.8);
   border-radius:6px;
   padding:8px;
-  margin:8px;
+}
+
+.card,
+ul > li.item {
+  margin-bottom: 8px;
 }
 
 main {
@@ -261,16 +271,6 @@ ul.flex li,
   box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
 }
 
-#more-info {
-  min-width:240px;
-  width:240px;
-}
-
-#sidebar {
-  min-width:320px;
-  width:320px;
-}
-
 footer {
   text-align:right;
   margin:12px;
@@ -281,9 +281,13 @@ table {
   border-collapse: collapse;
 }
 
+.table-responsive {
+  overflow-x: auto;
+}
+
 th, td {
   border: 1px solid rgba(255,255,255,0.15);
-  padding: 3px;
+  padding: 3px 9px;
 }
 
 th {
@@ -308,14 +312,25 @@ p > img:only-child {
   display: none;
 }
 
+@media screen and (max-width: 1300px) and (min-width: 1000px) {
+
+  .wrapper {
+    grid-template-columns: 220px 1fr 220px;
+  }
+
+  #sidebar ul li li {
+    width:100%;
+  }
+
+}
+
 @media screen and (max-width: 1000px) { 
   html {
     width: 100%;
   }
 
-  #more-info,
+  .wrapper {
-  #sidebar {
+    display: block;
-    width: 100%;
   }
 
 
@@ -340,8 +355,9 @@ p > img:only-child {
     justify-content: space-around;
     position: fixed;
     bottom:0;
+    left:0;
     height:48px;
-    width:100%;
+    width:100vw;
     background-color: white;
     box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.4);
   }