Rework layout

css/archive.css

@@ -2,7 +2,7 @@
   margin-bottom: var(--space-sm);
 }
 
-@media (--viewport-lg) {
+@media (--viewport-md) {
   .archive__list {
     margin-bottom: var(--space-md);
   }

css/article.css

@@ -2,9 +2,14 @@
   margin-bottom: var(--space-sm);
 }
 
-@media (--viewport-lg) {
+@media (--viewport-md) {
   .article {
     margin-bottom: var(--space-md);
+  }
+}
+
+@media (--viewport-lg) {
+  .article {
     border-bottom: 1px solid var(--color-light-grey);
   }
 }
@@ -14,7 +19,7 @@
   margin-bottom: var(--space-sm);
 }
 
-@media (--viewport-lg) {
+@media (--viewport-md) {
   .article__date {
     display: none;
   }

css/comment.css

@@ -2,7 +2,7 @@
   margin-bottom: var(--space-sm);
 }
 
-@media (--viewport-lg) {
+@media (--viewport-md) {
   .comment {
     margin-bottom: var(--space-md);
   }

css/comments.css

@@ -15,7 +15,7 @@
   margin-left: var(--space-sm);
 }
 
-@media (--viewport-lg) {
+@media (--viewport-md) {
   .comments__list--sub-list {
     margin-left: var(--space-md);
   }

css/content.css

@@ -28,7 +28,7 @@
   margin-bottom: var(--space-sm);
 }
 
-@media (--viewport-lg) {
+@media (--viewport-md) {
   .content p {
     margin-bottom: var(--space-md);
   }
@@ -99,7 +99,7 @@
   display: none;
 }
 
-@media (--viewport-lg) {
+@media (--viewport-md) {
   .content .twitter-tweet,
   .content .wp-caption {
     margin: 0 0 var(--space-md);
@@ -124,7 +124,7 @@
   width: auto !important;
 }
 
-@media (--viewport-lg) {
+@media (--viewport-md) {
   .content table {
     max-width: 100%;
   }

css/excerpt.css

@@ -2,7 +2,7 @@
   margin-bottom: var(--space-sm);
 }
 
-@media (--viewport-lg) {
+@media (--viewport-md) {
   .excerpt {
     margin-bottom: var(--space-md);
   }

css/index.css

@@ -32,6 +32,7 @@
   --color-facebook: #3e5a98;
   --color-twitter: #1da1f2;
   --color-rss: #ee802f;
+  --space-xxs: 5px;
   --space-xs: 10px;
   --space-sm: 20px;
   --space-md: 30px;
@@ -45,5 +46,8 @@
   --link-focus: 0 3px 0 0 var(--color-light-blue);
 }
 
+@custom-media --viewport-sm (min-width: 480px);
 @custom-media --viewport-md (min-width: 640px);
-@custom-media --viewport-lg (min-width: 960px);
+@custom-media --viewport-lg (min-width: 900px);
+@custom-media --viewport-xl (min-width: 1200px);
+@custom-media --viewport-wordpress-admin-bar (min-width: 783px);

css/menu.css

@@ -4,36 +4,42 @@
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
   cursor: pointer;
   display: block;
-  height: 64px;
+  height: 48px;
-  left: 5px;
+  left: 2px;
   position: fixed;
-  top: 5px;
+  top: 2px;
   transform: translateX(-100px);
   transition:
     filter var(--transition-md) ease-out,
     opacity var(--transition-md) ease-out,
     transform var(--transition-md) ease-out;
-  width: 64px;
+  width: 48px;
   will-change: opacity, transition;
   z-index: 5;
 }
 
 .logged-in .menu {
-  top: 37px;
+  top: 48px;
+}
+
+@media (--viewport-wordpress-admin-bar) {
+  .logged-in .menu {
+    top: 34px;
+  }
 }
 
 .menu__line {
   background-color: #fff;
   border-radius: 2px;
-  height: 4px;
+  height: 2px;
-  left: 15px;
+  left: 12px;
   position: absolute;
-  right: 15px;
+  right: 12px;
   transform: translateY(-50%);
 }
 
 .menu__line:nth-of-type(1) {
-  top: 33%;
+  top: 33.34%;
 }
 
 .menu__line:nth-of-type(2) {
@@ -41,7 +47,7 @@
 }
 
 .menu__line:nth-of-type(3) {
-  top: 66%;
+  top: 66.67%;
 }
 
 .menu__text {

css/metadata.css

@@ -1,7 +1,7 @@
 .metadata {
   display: flex;
   flex-flow: row wrap;
-  font-size: 14px;
+  font-size: 12px;
   margin-bottom: var(--space-sm);
   border-bottom: 1px solid var(--color-light-grey);
 }
@@ -13,11 +13,16 @@
   color: var(--color-dark-blue);
 }
 
+@media (--viewport-md) {
+  .metadata {
+    margin-bottom: var(--space-md);
+  }
+}
+
 @media (--viewport-lg) {
   .metadata {
     flex-flow: column wrap;
     border-bottom: none;
-    margin-bottom: var(--space-md);
   }
 
   .metadata__item {
@@ -31,7 +36,7 @@
   margin-bottom: var(--space-sm);
 }
 
-@media (--viewport-lg) {
+@media (--viewport-md) {
   .metadata__item--light {
     display: block;
   }
@@ -43,7 +48,7 @@
 }
 
 .metadata__text {
-  margin-left: 10px;
+  margin-left: var(--space-xs);
   text-transform: capitalize;
   transition: box-shadow var(--transition-md) ease-out;
   vertical-align: middle;

css/nav.css

@@ -34,14 +34,20 @@
   padding: var(--space-sm);
   position: fixed;
   top: 0;
-  transform: translateX(-100%);
+  transform: translateX(-110%);
   transition: transform var(--nav-transition-duration) ease-out;
   z-index: 10;
   overflow-y: auto;
 }
 
 .logged-in .nav__content {
-  top: 32px;
+  top: 46px;
+}
+
+@media (--viewport-wordpress-admin-bar) {
+  .logged-in .nav__content {
+    top: 32px;
+  }
 }
 
 .nav__body {

css/page.css

@@ -1,11 +1,10 @@
 .page {
   display: grid;
   grid-auto-flow: dense;
-  grid-gap: var(--space-sm);
+  grid-gap: var(--space-xs);
   grid-template-columns: 1fr;
   max-width: 1200px;
-  margin: var(--space-sm) var(--space-sm) 0;
+  margin: var(--space-xs) var(--space-xs) 0;
-  padding: 0;
 }
 
 .page__logo {
@@ -24,42 +23,67 @@
   justify-content: center;
 }
 
-@media (--viewport-lg) {
+@media (--viewport-sm) {
   .page {
-    grid-template-columns: 224px 1fr;
+    grid-template-columns: 112px 1fr;
-    grid-template-rows: 60px 134px 1fr;
+    grid-template-rows: 112px 1fr;
+    grid-gap: var(--space-sm);
     grid-auto-rows: auto;
-    grid-gap: var(--space-md);
+    margin: var(--space-sm) var(--space-sm) 0;
-    padding: 0 var(--space-md);
-  }
-
-  .page__logo {
-    grid-row: span 2;
   }
 
   .page__banner {
     display: block;
-    grid-column-start: 2;
+    grid-column: 2 / -1;
     grid-row-start: 1;
   }
 
   .page__content,
   .page__article,
-  .page__comments {
+  .page__comments,
-    grid-column-start: 2;
+  .page__metadata,
+  .page__pagination,
+  .page__footer {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (--viewport-md) {
+  .page {
+    grid-gap: var(--space-md);
+    margin: var(--space-md) var(--space-md) 0;
   }
 
   .page__content,
   .page__article.is-first {
     grid-row: span 2;
   }
+}
+
+@media (--viewport-lg) {
+  .page {
+    grid-template-columns: 168px 1fr;
+    grid-template-rows: 32px 106px 1fr;
+  }
+
+  .page__logo {
+    grid-row: span 2;
+  }
+
+  .page__content,
+  .page__article,
+  .page__comments {
+    grid-column: 2 / -1;
+  }
 
   .page__metadata {
-    grid-column-start: 1;
+    grid-column: 1;
-  }
+  }
-
+}
-  .page__pagination,
+
-  .page__footer {
+@media (--viewport-xl) {
-    grid-column: 1 / -1;
+  .page {
+    grid-template-columns: 224px 1fr 1fr;
+    grid-template-rows: 32px 162px 1fr;
   }
 }

css/social.css

@@ -1,7 +1,5 @@
 .social {
-  position: absolute;
+  text-align: right;
-  right: var(--space-sm);
-  top: var(--space-sm);
 }
 
 .social__link {

css/title.css

@@ -4,7 +4,7 @@
   margin-bottom: var(--space-sm);
 }
 
-@media (--viewport-lg) {
+@media (--viewport-md) {
   .title {
     margin-bottom: var(--space-md);
   }