Optimize SCSS

5 files changed, 264 insertions, 270 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;
+  }
 }
diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss
index 4c3168d..ae030d4 100644
--- a/assets/sass/_mixins.scss
+++ b/assets/sass/_mixins.scss
@@ -141,7 +141,6 @@ $break-desktop: 1600px;
           box-shadow: $args;
 }
 
-
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Border Radius
 //
 // Usage: @include border-radius (10% 30% 50% 70%);
diff --git a/assets/sass/style.scss b/assets/sass/style.scss
index 02334ef..42a7fb9 100644
--- a/assets/sass/style.scss
+++ b/assets/sass/style.scss
@@ -25,3 +25,4 @@ $link-color: #841212;
 @import "syntax";
 @import "form-elements";
 @import "customize";
+@import "themes";
diff --git a/assets/sass/themes.scss b/assets/sass/themes.scss
new file mode 100644
index 0000000..c7edf60
--- /dev/null
+++ b/assets/sass/themes.scss
@@ -0,0 +1,78 @@
+/* Themes */
+
+/* Red */
+.theme-base-red {
+  .post-tags a {
+    background: #ac4142;
+
+    &:before {
+      border-color: transparent #ac4142 transparent transparent;
+    }
+  }
+}
+
+/* Orange */
+.theme-base-orange {
+  .post-tags a {
+    background: #d28445;
+
+    &:before {
+      border-color: transparent #d28445 transparent transparent;
+    }
+  }
+}
+
+/* Green */
+.theme-base-green {
+  .post-tags a {
+    background: #90a959;
+
+    &:before {
+      border-color: transparent #90a959 transparent transparent;
+    }
+  }
+}
+
+/* Cyan */
+.theme-base-cyan {
+  .post-tags a {
+    background: #75b5aa;
+
+    &:before {
+      border-color: transparent #75b5aa transparent transparent;
+    }
+  }
+}
+
+/* Blue */
+.theme-base-blue {
+  .post-tags a {
+    background: #6a9fb5;
+
+    &:before {
+      border-color: transparent #6a9fb5 transparent transparent;
+    }
+  }
+}
+
+/* Magenta */
+.theme-base-magenta {
+  .post-tags a {
+    background: #aa759f;
+
+    &:before {
+      border-color: transparent #aa759f transparent transparent;
+    }
+  }
+}
+
+/* Brown */
+.theme-base-brown {
+  .post-tags a {
+    background: #8f5536;
+
+    &:before {
+      border-color: transparent #8f5536 transparent transparent;
+    }
+  }
+}
diff --git a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index b83aaab..4f7bdbb 100644
--- a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -901,6 +901,12 @@ form input:-moz-ui-invalid {
     .introduction {
       min-height: 100px;
       margin-bottom: 100px; } }
+.introduction h1.accent {
+  margin: 30px 0;
+  font-size: 4em;
+  line-height: 1;
+  letter-spacing: -1px; }
+
 #page-contact .container,
 #page-thanks .container,
 .introduction .container {
@@ -908,12 +914,6 @@ form input:-moz-ui-invalid {
   max-width: 600px;
   text-align: center; }
 
-.introduction h1.accent {
-  margin: 30px 0;
-  font-size: 4em;
-  line-height: 1;
-  letter-spacing: -1px; }
-
 .post {
   margin-top: 40px; }
   @media only screen and (min-width: 768px) {
@@ -959,20 +959,18 @@ ul.pager {
   margin: 0;
   padding: 0;
   list-style: none; }
-
-ul.pager li {
-  display: inline;
-  padding: 10px;
-  margin: 5px; }
+  ul.pager li {
+    display: inline;
+    padding: 10px;
+    margin: 5px; }
 
 .divider {
   position: relative;
   margin: 2.5rem 0; }
-
-.divider::after {
-  content: "";
-  display: table;
-  clear: both; }
+  .divider:after {
+    content: "";
+    display: table;
+    clear: both; }
 
 .d-flex {
   display: flex; }
@@ -988,7 +986,7 @@ ul.pager li {
 .tags-wrapper {
   position: relative; }
 
-ul.post-tags {
+.post-tags {
   margin: 0;
   padding: 0;
   position: absolute;
@@ -996,62 +994,52 @@ ul.post-tags {
   bottom: -12px;
   list-style: none;
   text-indent: unset; }
-
-.post-tags li,
-.post-tags a {
-  font-family: sans-serif;
-  float: left;
-  height: 24px;
-  line-height: 24px;
-  position: relative;
-  font-size: .75em; }
-
-.post-tags a {
-  margin-left: 20px;
-  padding: 0 10px 0 12px;
-  background: #841212;
-  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;
-  border-top-right-radius: 4px; }
-
-.post-tags a:before {
-  content: "";
-  float: left;
-  position: absolute;
-  top: 0;
-  left: -12px;
-  width: 0;
-  height: 0;
-  border-color: transparent #841212 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;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  -webkit-box-shadow: -1px -1px 2px #454545;
-  -moz-box-shadow: -1px -1px 2px #454545;
-  box-shadow: -1px -1px 2px #454545; }
-
-.post-tags a:hover {
-  background: #676767; }
-
-.post-tags a:hover:before {
-  border-color: transparent #676767 transparent transparent; }
+  .post-tags li, .post-tags a {
+    font-family: sans-serif;
+    float: left;
+    height: 24px;
+    line-height: 24px;
+    position: relative;
+    font-size: .75em; }
+  .post-tags a {
+    margin-left: 20px;
+    padding: 0 10px 0 12px;
+    background: #841212;
+    color: #fff;
+    text-decoration: none;
+    -webkit-border-radius: 0 4px 4px 0;
+    -moz-border-radius: 0 4px 4px 0;
+    border-radius: 0 4px 4px 0; }
+    .post-tags a:before {
+      content: "";
+      float: left;
+      position: absolute;
+      top: 0;
+      left: -12px;
+      width: 0;
+      height: 0;
+      border-color: transparent #841212 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;
+      -webkit-border-radius: 2px;
+      -moz-border-radius: 2px;
+      border-radius: 2px;
+      -webkit-box-shadow: -1px -1px 2px #454545;
+      -moz-box-shadow: -1px -1px 2px #454545;
+      box-shadow: -1px -1px 2px #454545; }
+    .post-tags a:hover {
+      background: #676767; }
+    .post-tags a:hover:before {
+      border-color: transparent #676767 transparent transparent; }
 
 a.external:after {
   background-color: #ac4142;
@@ -1075,63 +1063,54 @@ 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; }
+  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; }
+  .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; }
+  .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; }
+  .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; }
+  .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; }
+  .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; }
+  .theme-base-magenta .post-tags a:before {
+    border-color: transparent #aa759f transparent transparent; }
 
 /* Brown */
 .theme-base-brown .post-tags a {
   background: #8f5536; }
-
-.theme-base-brown .post-tags a:before {
-  border-color: transparent #8f5536 transparent transparent; }
+  .theme-base-brown .post-tags a:before {
+    border-color: transparent #8f5536 transparent transparent; }