Switch px units to rems

css/article.css

@@ -16,7 +16,6 @@
 }
 
 .article__date-text {
-  line-height: 2;
+  margin-left: var(--space-xs);
-  margin-left: 10px;
   vertical-align: top;
 }

css/comment-respond.css

@@ -54,6 +54,7 @@
   color: #fff;
   cursor: pointer;
   font-family: var(--heading-font-family);
+  font-size: var(--size-body);
   padding: var(--space-xs);
 }
 

css/comment.css

@@ -13,8 +13,8 @@
   background-repeat: no-repeat;
   background-size: 100%;
   margin-right: var(--space-sm);
-  height: 64px;
+  height: var(--icon-size-xl);
-  width: 64px;
+  width: var(--icon-size-xl);
 }
 
 .comment__metadata {

css/excerpt.css

@@ -39,11 +39,7 @@
 
 .excerpt__icon,
 .excerpt__text {
-  vertical-align: middle;
+  vertical-align: top;
-}
-
-.excerpt__icon {
-  height: 16px;
 }
 
 .excerpt__text {
@@ -52,10 +48,12 @@
 
 .excerpt__audio {
   margin-bottom: var(--space-sm);
+  width: 18rem;
+  height: 3rem;
 }
 
 .excerpt__image {
-  height: 200px;
+  height: 12rem;
   margin-bottom: var(--space-sm);
 }
 
@@ -79,7 +77,7 @@
   position: absolute;
   top: 2px;
   bottom: 2px;
-  right: 1px;
+  right: 0;
-  width: 2px;
+  width: 0.1rem;
   background-color: var(--color-light-blue);
 }

css/icon.css

@@ -1,27 +1,27 @@
 .icon {
   display: inline-block;
-  height: 32px;
+  height: var(--icon-size-md);
-  width: 32px;
+  width: var(--icon-size-md);
 }
 
 .icon--extra-small {
-  height: 16px;
+  height: var(--icon-size-xs);
-  width: 16px;
+  width: var(--icon-size-xs);
 }
 
 .icon--small {
-  height: 24px;
+  height: var(--icon-size-sm);
-  width: 24px;
+  width: var(--icon-size-sm);
 }
 
 .icon--large {
-  height: 48px;
+  height: var(--icon-size-lg);
-  width: 48px;
+  width: var(--icon-size-lg);
 }
 
 .icon--extra-large {
-  height: 72px;
+  height: var(--icon-size-xl);
-  width: 72px;
+  width: var(--icon-size-xl);
 }
 
 .icon--facebook {

css/index.css

@@ -52,6 +52,13 @@
   --logo-size-md: 9rem;
   --logo-size-lg: 10rem;
   --logo-size-xl: 12rem;
+  --icon-size-xs: 1rem;
+  --icon-size-sm: 1.5rem;
+  --icon-size-md: 2rem;
+  --icon-size-lg: 2.5rem;
+  --icon-size-xl: 4rem;
+  --menu-size: 3rem;
+  --menu-size-xl: 4rem;
   --transition-fs: 0.15s;
   --transition-md: 0.3s;
   --transition-sl: 0.6s;

css/menu.css

@@ -4,37 +4,46 @@
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
   cursor: pointer;
   display: block;
-  height: 48px;
+  height: var(--menu-size);
-  left: 2px;
+  left: var(--space-xxs);
   position: fixed;
-  top: 2px;
+  top: var(--space-xxs);
-  transform: translateX(-100px);
+  opacity: 0;
   transition:
     filter var(--transition-md) ease-out,
     opacity var(--transition-md) ease-out,
     transform var(--transition-md) ease-out;
-  width: 48px;
+  width: var(--menu-size);
   will-change: opacity, transition;
   z-index: 5;
 }
 
+@media (--viewport-xl) {
+  .menu {
+    height: var(--menu-size-xl);
+    width: var(--menu-size-xl);
+    left: 1vw;
+    top: 1vw;
+  }
+}
+
 .logged-in .menu {
-  top: 48px;
+  top: calc(var(--space-xxs) + 48px);
 }
 
 @media (--viewport-wordpress-admin-bar) {
   .logged-in .menu {
-    top: 34px;
+    top: calc(var(--space-xxs) + 34px);
   }
 }
 
 .menu__line {
   background-color: #fff;
-  border-radius: 2px;
+  border-radius: 4%;
-  height: 2px;
+  height: 4%;
-  left: 12px;
+  left: 25%;
   position: absolute;
-  right: 12px;
+  right: 25%;
   transform: translateY(-50%);
 }
 
@@ -57,12 +66,12 @@
 }
 
 .menu.is-visible {
-  transform: translateX(0);
+  opacity: 1;
 }
 
 .menu.is-minimized {
   opacity: 0.5;
-  transform: translateX(-12px) translateY(-12px);
+  transform: translate(calc(var(--space-sm) * -1), calc(var(--space-sm) * -1));
 }
 
 /**

css/page.css

@@ -3,7 +3,7 @@
   grid-auto-flow: dense;
   grid-gap: var(--space-sm);
   grid-template-columns: 1fr;
-  max-width: 75rem;
+  max-width: 60rem;
   margin: var(--space-xs) var(--space-xs) 0;
 }
 
@@ -72,7 +72,7 @@
 @media (--viewport-lg) {
   .page {
     grid-template-columns: var(--logo-size-lg) 1fr;
-    grid-template-rows: 32px calc(var(--logo-size-lg) - var(--space-md) - 32px) 1fr;
+    grid-template-rows: var(--icon-size-md) calc(var(--logo-size-lg) - var(--space-md) - 32px) 1fr;
   }
 
   .page__logo {
@@ -93,7 +93,8 @@
 @media (--viewport-xl) {
   .page {
     grid-template-columns: var(--logo-size-xl) 1fr;
-    grid-template-rows: 32px calc(var(--logo-size-xl) - var(--space-md) - 32px) 1fr;
+    grid-template-rows: var(--icon-size-md) calc(var(--logo-size-xl) - var(--space-md) - var(--icon-size-md)) 1fr;
+    margin: var(--space-md) auto 0;
   }
 
   .page__columns {

theme/partials/metadata.php

@@ -2,7 +2,7 @@
   <ul class="metadata__list">
     <li class="metadata__list-item metadata__list-item--light">
       <span class="metadata__icon">
-        <svg class="icon" aria-hidden="true">
+        <svg class="icon icon--small" aria-hidden="true">
           <use xlink:href="#icon-calendar"></use>
         </svg>
       </span>
@@ -14,7 +14,7 @@
     <li class="metadata__list-item">
       <a class="metadata__link" href="<?php echo get_edit_post_link() ?>">
         <span class="metadata__icon">
-          <svg class="icon" aria-hidden="true">
+          <svg class="icon icon--small" aria-hidden="true">
             <use xlink:href="#icon-edit"></use>
           </svg>
         </span>
@@ -27,7 +27,7 @@
     <li class="metadata__list-item">
       <a class="metadata__link" href="<?php the_permalink() ?>#comments">
         <span class="metadata__icon">
-          <svg class="icon" aria-hidden="true">
+          <svg class="icon icon--small" aria-hidden="true">
             <use xlink:href="#icon-comments"></use>
           </svg>
         </span>
@@ -38,7 +38,7 @@
     </li>
     <li class="metadata__list-item">
       <span class="metadata__icon">
-        <svg class="icon" aria-hidden="true">
+        <svg class="icon icon--small" aria-hidden="true">
           <use xlink:href="#icon-tag"></use>
         </svg>
       </span>

theme/single.php

@@ -7,7 +7,7 @@
   <section class="page__article is-first">
     <article class="article">
       <div class="article__date">
-        <svg class="icon">
+        <svg class="icon icon--small">
           <use xlink:href="#icon-calendar"></use>
         </svg>
         <span class="article__date-text">