assets/css/app.css

@@ -23,59 +23,67 @@
    * ============= SITE LAYOUT =============
    */
 
+  /* === SITE HEADER === */
+
   #site-header {
     @apply block px-3 py-6 bg-gradient-to-r from-slate-900 to-slate-950 text-white print:hidden;
+  }
 
-    & nav ul {
+  #site-header nav ul {
     @apply flex;
+  }
 
-      & a { 
+  #site-header a {
     @apply p-3 rounded hover:bg-primary-700 transition; 
   }
-    }
+
-  }
+  /* === PRIMARY SIDEBAR === */
 
   #primary-sidebar {
     @apply col-span-1;
+  }
 
-    & nav {
+  #primary-sidebar nav {
     @apply flex md:flex-row lg:flex-col mb-6 lg:mb-0;
   }
 
-    .menu {
+  #primary-sidebar .menu {
     @apply flex-1;
   }
-  }
+
+  /* === SITE CONTENT === */
 
   #site-content {
     @apply grid grid-cols-1 lg:grid-cols-5 gap-0 lg:gap-12;
     @apply px-3 sm:px-0;
-
-    > #secondary-sidebar {
-      @apply col-span-1;
   }
 
-    > #content-wrapper {
+  #content-wrapper {
     @apply col-span-4;
   }
+
+  #secondary-sidebar {
+    @apply col-span-1;
   }
 
   /*
    * ============= PAGE LAYOUT =============
    */
 
+  /* === PAGE HEADER === */
+
   header.page-header { 
     @apply border-b border-slate-300;
+  }
 
-    > h1 {
+  header.page-header h1 {
     @apply text-3xl leading-loose font-bold text-slate-900;
   }
 
-    > p {
+  header.page-header p {
     @apply mb-3;
   }
 }
-}
 
 /* 
   The components layer is for class-based styles that you want to be able to override with utilities.