Simplify SCSS syntax.

2 files changed, 116 insertions, 170 deletions

diff --git a/css/cayman.css b/css/cayman.css
index 634b08a..feaae0c 100644
--- a/css/cayman.css
+++ b/css/cayman.css
@@ -25,87 +25,88 @@ a {
   border-width: 1px;
   border-radius: 0.3rem;
   transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
+  .btn:hover {
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3); }
   .btn + .btn {
     margin-left: 1rem; }
-
-.btn:hover {
-  color: rgba(255, 255, 255, 0.8);
-  text-decoration: none;
-  background-color: rgba(255, 255, 255, 0.2);
-  border-color: rgba(255, 255, 255, 0.3); }
-
-@media screen and (min-width: 64em) {
-  .btn {
-    padding: 0.75rem 1rem; } }
-
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .btn {
-    padding: 0.6rem 0.9rem;
-    font-size: 0.9rem; } }
-
-@media screen and (max-width: 42em) {
-  .btn {
-    display: block;
-    width: 100%;
-    padding: 0.75rem;
-    font-size: 0.9rem; }
-    .btn + .btn {
-      margin-top: 1rem;
-      margin-left: 0; } }
+  @media screen and (min-width: 64em) {
+    .btn {
+      padding: 0.75rem 1rem; } }
+  @media screen and (min-width: 42em) and (max-width: 64em) {
+    .btn {
+      padding: 0.6rem 0.9rem;
+      font-size: 0.9rem; } }
+  @media screen and (max-width: 42em) {
+    .btn {
+      display: block;
+      width: 100%;
+      padding: 0.75rem;
+      font-size: 0.9rem; }
+      .btn + .btn {
+        margin-top: 1rem;
+        margin-left: 0; } }
 
 .page-header {
   color: #fff;
   text-align: center;
   background-color: #159957;
   background-image: linear-gradient(120deg, #155799, #159957); }
-
-@media screen and (min-width: 64em) {
-  .page-header {
-    padding: 5rem 6rem; } }
-
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .page-header {
-    padding: 3rem 4rem; } }
-
-@media screen and (max-width: 42em) {
-  .page-header {
-    padding: 2rem 1rem; } }
+  @media screen and (min-width: 64em) {
+    .page-header {
+      padding: 5rem 6rem; } }
+  @media screen and (min-width: 42em) and (max-width: 64em) {
+    .page-header {
+      padding: 3rem 4rem; } }
+  @media screen and (max-width: 42em) {
+    .page-header {
+      padding: 2rem 1rem; } }
 
 .project-name {
   margin-top: 0;
   margin-bottom: 0.1rem; }
-
-@media screen and (min-width: 64em) {
-  .project-name {
-    font-size: 3.25rem; } }
-
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .project-name {
-    font-size: 2.25rem; } }
-
-@media screen and (max-width: 42em) {
-  .project-name {
-    font-size: 1.75rem; } }
+  @media screen and (min-width: 64em) {
+    .project-name {
+      font-size: 3.25rem; } }
+  @media screen and (min-width: 42em) and (max-width: 64em) {
+    .project-name {
+      font-size: 2.25rem; } }
+  @media screen and (max-width: 42em) {
+    .project-name {
+      font-size: 1.75rem; } }
 
 .project-tagline {
   margin-bottom: 2rem;
   font-weight: normal;
   opacity: 0.7; }
+  @media screen and (min-width: 64em) {
+    .project-tagline {
+      font-size: 1.25rem; } }
+  @media screen and (min-width: 42em) and (max-width: 64em) {
+    .project-tagline {
+      font-size: 1.15rem; } }
+  @media screen and (max-width: 42em) {
+    .project-tagline {
+      font-size: 1rem; } }
 
+.main-content :first-child {
+  margin-top: 0; }
 @media screen and (min-width: 64em) {
-  .project-tagline {
-    font-size: 1.25rem; } }
-
+  .main-content {
+    max-width: 64rem;
+    padding: 2rem 6rem;
+    margin: 0 auto;
+    font-size: 1.1rem; } }
 @media screen and (min-width: 42em) and (max-width: 64em) {
-  .project-tagline {
-    font-size: 1.15rem; } }
-
+  .main-content {
+    padding: 2rem 4rem;
+    font-size: 1.1rem; } }
 @media screen and (max-width: 42em) {
-  .project-tagline {
+  .main-content {
+    padding: 2rem 1rem;
     font-size: 1rem; } }
-
-.main-content :first-child {
-  margin-top: 0; }
 .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -201,27 +202,19 @@ a {
   background-color: #eff0f1;
   border: 0; }
 
-@media screen and (min-width: 64em) {
-  .main-content {
-    max-width: 64rem;
-    padding: 2rem 6rem;
-    margin: 0 auto;
-    font-size: 1.1rem; } }
-
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .main-content {
-    padding: 2rem 4rem;
-    font-size: 1.1rem; } }
-
-@media screen and (max-width: 42em) {
-  .main-content {
-    padding: 2rem 1rem;
-    font-size: 1rem; } }
-
 .site-footer {
   padding-top: 2rem;
   margin-top: 2rem;
   border-top: solid 1px #eff0f1; }
+  @media screen and (min-width: 64em) {
+    .site-footer {
+      font-size: 1rem; } }
+  @media screen and (min-width: 42em) and (max-width: 64em) {
+    .site-footer {
+      font-size: 1rem; } }
+  @media screen and (max-width: 42em) {
+    .site-footer {
+      font-size: 0.9rem; } }
 
 .site-footer-owner {
   display: block;
@@ -229,15 +222,3 @@ a {
 
 .site-footer-credits {
   color: #819198; }
-
-@media screen and (min-width: 64em) {
-  .site-footer {
-    font-size: 1rem; } }
-
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .site-footer {
-    font-size: 1rem; } }
-
-@media screen and (max-width: 42em) {
-  .site-footer {
-    font-size: 0.9rem; } }
diff --git a/scss/cayman.scss b/scss/cayman.scss
index 200844c..c8dfc1a 100644
--- a/scss/cayman.scss
+++ b/scss/cayman.scss
@@ -31,33 +31,27 @@ a {
   border-radius: 0.3rem;
   transition: color 0.2s, background-color 0.2s, border-color 0.2s;
 
+  &:hover {
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+
   + .btn {
     margin-left: 1rem;
   }
-}
 
-.btn:hover {
-  color: rgba(255, 255, 255, 0.8);
-  text-decoration: none;
-  background-color: rgba(255, 255, 255, 0.2);
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-@media screen and (min-width: 64em) {
-  .btn {
+  @media screen and (min-width: 64em) {
     padding: 0.75rem 1rem;
   }
-}
 
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .btn {
+  @media screen and (min-width: 42em) and (max-width: 64em) {
     padding: 0.6rem 0.9rem;
     font-size: 0.9rem;
   }
-}
 
-@media screen and (max-width: 42em) {
-  .btn {
+  @media screen and (max-width: 42em) {
     display: block;
     width: 100%;
     padding: 0.75rem;
@@ -75,22 +69,16 @@ a {
   text-align: center;
   background-color: #159957;
   background-image: linear-gradient(120deg, #155799, #159957);
-}
 
-@media screen and (min-width: 64em) {
-  .page-header {
+  @media screen and (min-width: 64em) {
     padding: 5rem 6rem;
   }
-}
 
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .page-header {
+  @media screen and (min-width: 42em) and (max-width: 64em) {
     padding: 3rem 4rem;
   }
-}
 
-@media screen and (max-width: 42em) {
-  .page-header {
+  @media screen and (max-width: 42em) {
     padding: 2rem 1rem;
   }
 }
@@ -98,22 +86,16 @@ a {
 .project-name {
   margin-top: 0;
   margin-bottom: 0.1rem;
-}
 
-@media screen and (min-width: 64em) {
-  .project-name {
+  @media screen and (min-width: 64em) {
     font-size: 3.25rem;
   }
-}
 
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .project-name {
+  @media screen and (min-width: 42em) and (max-width: 64em) {
     font-size: 2.25rem;
   }
-}
 
-@media screen and (max-width: 42em) {
-  .project-name {
+  @media screen and (max-width: 42em) {
     font-size: 1.75rem;
   }
 }
@@ -122,31 +104,43 @@ a {
   margin-bottom: 2rem;
   font-weight: normal;
   opacity: 0.7;
-}
 
-@media screen and (min-width: 64em) {
-  .project-tagline {
+  @media screen and (min-width: 64em) {
     font-size: 1.25rem;
   }
-}
 
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .project-tagline {
+  @media screen and (min-width: 42em) and (max-width: 64em) {
     font-size: 1.15rem;
   }
-}
 
-@media screen and (max-width: 42em) {
-  .project-tagline {
+  @media screen and (max-width: 42em) {
     font-size: 1rem;
   }
 }
 
 .main-content {
+
   :first-child {
     margin-top: 0;
   }
 
+  @media screen and (min-width: 64em) {
+    max-width: 64rem;
+    padding: 2rem 6rem;
+    margin: 0 auto;
+    font-size: 1.1rem;
+  }
+
+  @media screen and (min-width: 42em) and (max-width: 64em) {
+    padding: 2rem 4rem;
+    font-size: 1.1rem;
+  }
+
+  @media screen and (max-width: 42em) {
+    padding: 2rem 1rem;
+    font-size: 1rem;
+  }
+
   h1,
   h2,
   h3,
@@ -294,33 +288,22 @@ a {
   }
 }
 
-@media screen and (min-width: 64em) {
-  .main-content {
-    max-width: 64rem;
-    padding: 2rem 6rem;
-    margin: 0 auto;
-    font-size: 1.1rem;
-  }
-}
+.site-footer {
+  padding-top: 2rem;
+  margin-top: 2rem;
+  border-top: solid 1px #eff0f1;
 
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .main-content {
-    padding: 2rem 4rem;
-    font-size: 1.1rem;
+  @media screen and (min-width: 64em) {
+    font-size: 1rem;
   }
-}
 
-@media screen and (max-width: 42em) {
-  .main-content {
-    padding: 2rem 1rem;
+  @media screen and (min-width: 42em) and (max-width: 64em) {
     font-size: 1rem;
   }
-}
 
-.site-footer {
-  padding-top: 2rem;
-  margin-top: 2rem;
-  border-top: solid 1px #eff0f1;
+  @media screen and (max-width: 42em) {
+    font-size: 0.9rem;
+  }
 }
 
 .site-footer-owner {
@@ -331,21 +314,3 @@ a {
 .site-footer-credits {
   color: #819198;
 }
-
-@media screen and (min-width: 64em) {
-  .site-footer {
-    font-size: 1rem;
-  }
-}
-
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .site-footer {
-    font-size: 1rem;
-  }
-}
-
-@media screen and (max-width: 42em) {
-  .site-footer {
-    font-size: 0.9rem;
-  }
-}