Optimize SCSS

1 files changed, 102 insertions, 165 deletions

diff --git a/assets/sass/_customize.scss b/assets/sass/_customize.scss
index 6d55b8e..27d05f1 100644
--- a/assets/sass/_customize.scss
+++ b/assets/sass/_customize.scss
@@ -26,6 +26,15 @@
   }
 }
 
+.introduction {
+  h1.accent {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+}
+
 #page-contact .container,
 #page-thanks .container,
 .introduction .container {
@@ -34,13 +43,6 @@
   text-align: center;
 }
 
-.introduction h1.accent {
-  margin: 30px 0;
-  font-size: 4em;
-  line-height: 1;
-  letter-spacing: -1px;
-}
-
 .post {
   margin-top: 40px;
 
@@ -97,44 +99,46 @@ ul.pager {
   margin: 0;
   padding: 0;
   list-style: none;
-}
 
-ul.pager li {
-  display: inline;
-  padding: 10px;
-  margin: 5px;
+  li {
+    display: inline;
+    padding: 10px;
+    margin: 5px;
+  }
 }
 
 .divider {
   position: relative;
   margin: 2.5rem 0;
-}
 
-.divider::after {
-  content: "";
-  display: table;
-  clear: both;
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
 }
 
 .d-flex {
   display: flex;
 }
 
-.footnotes hr {
-  margin: 0;
-  border: 0;
-}
+.footnotes  {
+  hr {
+    margin: 0;
+    border: 0;
+  }
 
-.footnotes blockquote + a.footnote-backref {
-  margin-bottom: 1rem;
-  display: inline-block;
+  blockquote + a.footnote-backref {
+    margin-bottom: 1rem;
+    display: inline-block;
+  }
 }
 
 .tags-wrapper {
   position: relative;
 }
 
-ul.post-tags {
+.post-tags {
   margin: 0;
   padding: 0;
   position: absolute;
@@ -142,76 +146,74 @@ ul.post-tags {
   bottom: -12px;
   list-style: none;
   text-indent: unset;
-}
 
-.post-tags li,
-.post-tags a {
-  font-family: $heading-font;
-  float: left;
-  height: 24px;
-  line-height: 24px;
-  position: relative;
-  font-size: .75em;
-}
-
-.post-tags a {
-  margin-left: 20px;
-  padding: 0 10px 0 12px;
-  background: $link-color;
-  color: #fff;
-  text-decoration: none;
-  -webkit-border-bottom-right-radius:4px;
-      -moz-border-radius-bottomright:4px;
-          border-bottom-right-radius:4px;
-  -webkit-border-top-right-radius:4px;
-       -moz-border-radius-topright:4px; // editorconfig-checker-disable-line
-           border-top-right-radius:4px; // editorconfig-checker-disable-line
-}
-
-.post-tags a:before {
-  content: "";
-  float: left;
-  position: absolute;
-  top: 0;
-  left: -12px;
-  width: 0;
-  height: 0;
-  border-color: transparent $link-color transparent transparent;
-  border-style: solid;
-  border-width: 12px 12px 12px 0;
-}
-
-.post-tags a:after {
-  content: "";
-  position: absolute;
-  top: 10px;
-  left: 0;
-  float: left;
-  width: 4px;
-  height: 4px;
-  background: #fff;
-  @include border-radius (2px);
-  @include box-shadow (-1px -1px 2px $text-color);
-}
-
-.post-tags a:hover {
-  background: $text-light-color;
-}
+  li, a {
+    font-family: $heading-font;
+    float: left;
+    height: 24px;
+    line-height: 24px;
+    position: relative;
+    font-size: .75em;
+  }
 
-.post-tags a:hover:before {
-  border-color: transparent $text-light-color transparent transparent;
+  a {
+    margin-left: 20px;
+    padding: 0 10px 0 12px;
+    background: $link-color;
+    color: #fff;
+    text-decoration: none;
+
+    @include border-radius (0 4px 4px 0);
+
+    &:before {
+      content: "";
+      float: left;
+      position: absolute;
+      top: 0;
+      left: -12px;
+      width: 0;
+      height: 0;
+      border-color: transparent $link-color transparent transparent;
+      border-style: solid;
+      border-width: 12px 12px 12px 0;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 10px;
+      left: 0;
+      float: left;
+      width: 4px;
+      height: 4px;
+      background: #fff;
+
+      @include border-radius (2px);
+      @include box-shadow (-1px -1px 2px $text-color);
+    }
+
+    &:hover {
+      background: $text-light-color;
+    }
+
+    &:hover:before {
+      border-color: transparent $text-light-color transparent transparent;
+    }
+  }
 }
 
-a.external:after {
-  background-color: #ac4142;
-  content: "";
-  display: inline-flex;
-  height: 10px;
-  margin-left: 4px;
-  width: 10px;
+a.external {
+  &:after {
+    background-color: #ac4142;
+    content: "";
+    display: inline-flex;
+    height: 10px;
+    margin-left: 4px;
+    width: 10px;
 
-  @include mask-size (cover);
-  @include mask-image (url("/img/external-link.svg"));
+    @include mask-size (cover);
+    @include mask-image (url("/img/external-link.svg"));
+  }
 }
 
 ul.tags-cloud {
@@ -224,81 +226,16 @@ ul.tags-cloud {
   list-style: none;
   border: 2px solid white;
   border-radius: 5px;
-}
 
-ul.tags-cloud .tag {
-  display: flex;
-  align-items: center;
-  margin: 0.25rem 1rem;
-}
-
-ul.tags-cloud .tag-link {
-  padding: 5px 5px 0;
-  transition: 0.3s;
-  text-decoration: none;
-}
-
-/* Themes */
-
-/* Red */
-.theme-base-red .post-tags a {
-  background: #ac4142;
-}
-
-.theme-base-red .post-tags a:before {
-  border-color: transparent #ac4142 transparent transparent;
-}
-
-/* Orange */
-.theme-base-orange .post-tags a {
-  background: #d28445;
-}
-
-.theme-base-orange .post-tags a:before {
-  border-color: transparent #d28445 transparent transparent;
-}
-
-/* Green */
-.theme-base-green .post-tags a {
-  background: #90a959;
-}
-
-.theme-base-green .post-tags a:before {
-  border-color: transparent #90a959 transparent transparent;
-}
-
-/* Cyan */
-.theme-base-cyan .post-tags a {
-  background: #75b5aa;
-}
-
-.theme-base-cyan .post-tags a:before {
-  border-color: transparent #75b5aa transparent transparent;
-}
-
-/* Blue */
-.theme-base-blue .post-tags a {
-  background: #6a9fb5;
-}
-
-.theme-base-blue .post-tags a:before {
-  border-color: transparent #6a9fb5 transparent transparent;
-}
-
-/* Magenta */
-.theme-base-magenta .post-tags a {
-  background: #aa759f;
-}
-
-.theme-base-magenta .post-tags a:before {
-  border-color: transparent #aa759f transparent transparent;
-}
-
-/* Brown */
-.theme-base-brown .post-tags a {
-  background: #8f5536;
-}
+  .tag {
+    display: flex;
+    align-items: center;
+    margin: 0.25rem 1rem;
+  }
 
-.theme-base-brown .post-tags a:before {
-  border-color: transparent #8f5536 transparent transparent;
+  .tag-link {
+    padding: 5px 5px 0;
+    transition: 0.3s;
+    text-decoration: none;
+  }
 }