Refactor CSS State classes

css/logo.css

@@ -8,7 +8,7 @@
 
 .Logo-image {
   filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
-  max-width: 360px;
+  max-width: 320px;
   transition: filter var(--transitionMd) ease-in;
 }
 

css/menu.css

@@ -48,11 +48,11 @@
   top: -10000px;
 }
 
-.Menu--visible {
+.Menu.is-visible {
   transform: translateX(0);
 }
 
-.Menu--minimized {
+.Menu.is-minimized {
   opacity: 0.5;
   transform: translateX(-20px) translateY(-20px);
 }

css/metadata.css

@@ -10,6 +10,10 @@
   .Metadata {
     border-bottom: none;
   }
+
+  .Metadata.is-locked {
+    position: fixed;
+  }
 }
 
 .Metadata-date {

css/nav.css

@@ -87,7 +87,7 @@
   margin-top: 0;
 }
 
-.Nav--open::after {
+.Nav.is-open::after {
   visibility: visible;
   opacity: 1;
 }
@@ -130,15 +130,15 @@
   filter: drop-shadow(0 0 2px #fff);
 }
 
-.Nav--open .Nav-content {
+.Nav.is-open .Nav-content {
   transform: translateX(0);
 }
 
-.Nav--open .Nav-closeBar:nth-of-type(1) {
+.Nav.is-open .Nav-closeBar:nth-of-type(1) {
   transform: rotate(45deg);
 }
 
-.Nav--open .Nav-closeBar:nth-of-type(2) {
+.Nav.is-open .Nav-closeBar:nth-of-type(2) {
   transform: rotate(-45deg);
 }
 

theme/partials/logo.php

@@ -1,6 +1,6 @@
 <section class="Logo">
   <a class="Logo-link" href="<?php echo home_url(); ?>">
-	  <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="Logo-image">
+    <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="Logo-image">
-	</a>
+  </a>
 </section>