1 files changed, 50 insertions, 21 deletions

diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css
index 2677f19..f3a39c1 100644
--- a/theme/admin/rsrc/css/main.css
+++ b/theme/admin/rsrc/css/main.css
@@ -22,7 +22,7 @@ a:focus {
 # Headings
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 h1, h2, h3, h4, h5, h6 {
-  margin: 0;
+  margin-bottom: 0;
   text-transform: uppercase;
 }
 h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
@@ -33,6 +33,7 @@ h1 .fa, h2 .fa, h3 .fa, h4 .fa, h5 .fa, h6 .fa {
 }
 
 h1 {
+  margin-top: 0;
   font-size: 0.8rem;
 }
 
@@ -81,10 +82,6 @@ body {
   flex-direction: column;
 }
 
-main {
-  padding: 0.75rem;
-}
-
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Main content
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@@ -93,9 +90,10 @@ main {
   width: 100%;
   background: #FFF;
   box-sizing: border-box;
-  border: 0.05rem solid #AAA;
-  border-top: none;
-  border-bottom: none;
+  padding: 0.75rem;
+}
+#main-content.wide {
+  max-width: 90rem;
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -230,6 +228,7 @@ main {
   display: flex;
   box-sizing: border-box;
   justify-content: space-between;
+  margin-top: 0.75rem;
 }
 #site-navi > div {
   display: flex;
@@ -387,9 +386,9 @@ table, td {
 # Item Element
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 .item {
-  display: block;
+  display: flex;
+  flex-direction: column;
   border: 0.05rem solid #AAA;
-  margin-bottom: 1rem;
   clear: both;
 }
 .item header {
@@ -398,6 +397,9 @@ table, td {
   position: sticky;
   top: 0;
 }
+.item header h2 {
+  margin-top: 0;
+}
 .item footer {
   border-top: 0.05rem solid #AAA;
 }
@@ -430,6 +432,7 @@ table, td {
   padding: 0.75rem;
   overflow: hidden;
   font-family: inherit;
+  flex-grow: 1;
 }
 .item blockquote p {
   margin-bottom: 0;
@@ -448,6 +451,15 @@ table, td {
   background: #EEE;
   border: 0.05rem solid #AAA;
 }
+.item-container.grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-column-gap: 1rem;
+  grid-row-gap: 1rem;
+  column-gap: 1rem;
+  row-gap: 1rem;
+}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Argument list
@@ -665,20 +677,34 @@ label:after {
   margin-bottom: 1rem;
 }
 
-/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Responsive Level #1
-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@media only screen and (max-width: 90em) {
+  .item-container.grid {
+    grid-template-columns: auto auto;
+  }
+}
+@media only screen and (min-width: 62.5em) {
+  #main-content {
+    border: 0.05rem solid #AAA;
+    border-top: none;
+    border-bottom: none;
+  }
+}
+@media only screen and (max-width: 62.5em) {
+  .item-container.grid {
+    grid-template-columns: auto;
+  }
+}
 @media only screen and (max-width: 50em) {
   html {
     font-size: 1.125rem;
     /*18px*/
-    background-image: none !important;
   }
 }
-/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Responsive Level #2
-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 @media only screen and (max-width: 37.5em) {
+  #main-content {
+    padding: 0.5rem;
+  }
+
   #main-navi {
     font-size: 1rem;
   }
@@ -696,6 +722,13 @@ label:after {
     display: none;
   }
 
+  .item-container.grid {
+    grid-column-gap: 0.75rem;
+    grid-row-gap: 0.75rem;
+    column-gap: 0.75rem;
+    row-gap: 0.75rem;
+  }
+
   .form-grid {
     grid-template-columns: auto auto;
   }
@@ -724,10 +757,6 @@ label:after {
     font-size: 0.5rem;
     line-height: 0.75rem;
   }
-
-  main {
-    padding: 0.5rem;
-  }
 }
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # FontAwesome Main