Merge pull request #471 from sylhare/sass-update

Update sass to make it 3.0.0 compatible

_includes/blog/post_nav.liquid

@@ -2,7 +2,7 @@
     {% if page.next.url %}
     <div id="previous-post">
         <a alt="{{ page.next.title }}" href="{{ page.next.url | relative_url | default: 'none' }}">
-            <p>{{ site.data.language.str_previous_post | default: "Previous post" }}</p>
+            <p class="meta">{{ site.data.language.str_previous_post | default: "Previous post" }}</p>
             {{ page.next.title }}
         </a>
     </div>
@@ -11,7 +11,7 @@
     {% if page.previous.url %}
     <div id="next-post">
         <a alt="{{ page.previous.title }}" href="{{ page.previous.url | relative_url | default: 'none' }}">
-            <p>{{ site.data.language.str_next_post | default: "Next post"}}</p>
+            <p class="meta">{{ site.data.language.str_next_post | default: "Next post"}}</p>
             {{ page.previous.title }}
         </a>
     </div>

_sass/base/_global.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 * {
   margin: 0;
   padding: 0;
@@ -281,4 +283,50 @@ details {
     padding-top: 2em;
     max-width: 100%;
   }
-}
+}
+
+// Buttons
+.button {
+  border-radius: 0.3em;
+  border: 1px solid;
+  display: inline-block;
+  margin: 1em 0;
+  padding: 0.5em 0.75em;
+}
+
+a.button {
+  @extend .button-link;
+}
+
+.button-link {
+  &:hover {
+    background: var(--link);
+    border: 1px solid var(--link);
+    color: var(--background);
+    text-decoration: none;
+    filter: none;
+  }
+}
+
+
+
+.post-link {
+  &:hover {
+    text-decoration: none;
+    color: var(--link);
+  }
+}
+
+// States
+.disabled {
+  opacity: 0.7;
+}
+
+// Custom
+.text-center {
+  text-align: center;
+}
+
+.right {
+  float: right;
+}

_sass/base/_highlight.scss

@@ -1,6 +1,7 @@
 // ==========================================================================
 //   Syntax highlighting
 // ==========================================================================
+@use 'variables' as *;
 
 div.highlighter-rouge,
 figure.highlight,

_sass/base/_utility.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Mix-ins
 %padding-nav {
   padding: $padding-small $padding-x-large;
@@ -41,61 +43,18 @@
   }
 }
 
-.txt-shadow {
+
+%txt-shadow {
   text-shadow: 0.07em 0.10em 0.15em var(--text-shadow);
 }
 
-.subtle-txt-shadow {
+%subtle-txt-shadow {
   text-shadow: 1px 1px 2px var(--text-shadow);
 }
 
-// Buttons
-.button {
-  border-radius: 0.3em;
-  border: 1px solid;
-  display: inline-block;
-  margin: 1em 0;
-  padding: 0.5em 0.75em;
-}
-
-a.button {
-  @extend .button-link;
-}
-
-.button-link {
-  &:hover {
-    background: var(--link);
-    border: 1px solid var(--link);
-    color: var(--background);
-    text-decoration: none;
-    filter: none;
-  }
-}
-
-.body-link {
+%body-link {
   &:hover {
     text-decoration: underline;
     filter: brightness(0.85);
   }
-}
-
-.post-link {
-  &:hover {
-    text-decoration: none;
-    color: var(--link);
-  }
-}
-
-// States
-.disabled {
-  opacity: 0.7;
-}
-
-// Custom
-.text-center {
-  text-align: center;
-}
-
-.right {
-  float: right;
-}
+}

_sass/external/_katex.scss

@@ -4,9 +4,10 @@
  */
 
 @use "katex/katex";
+@use '../base/variables';
 
 .katex-display {
-  @media screen and (max-width: $sm-break) {
+  @media screen and (max-width: variables.$sm-break) {
     overflow-x: auto;
   }
   & {

_sass/external/katex/katex.scss

@@ -133,6 +133,7 @@ $border-color_1: currentColor;
   font-weight: 400;
   src: url("#{$katex-font-path}/KaTeX_Typewriter-Regular.woff2") format("woff2"),url("#{$katex-font-path}/KaTeX_Typewriter-Regular.woff") format("woff"),url("#{$katex-font-path}/KaTeX_Typewriter-Regular.ttf") format("truetype");
 }
+
 .katex {
   font: normal 1.21em KaTeX_Main, Times New Roman, serif;
   line-height: 1.2;

_sass/includes/_blog_nav.scss

@@ -1,3 +1,6 @@
+@use '../base/variables';
+@use '../base/utility' as *;
+
 /* --- Pagination --- */
 .pagination {
   @extend %padding-nav;
@@ -18,7 +21,7 @@
     display: inline-block;
     vertical-align: sub;
 
-    @media (max-width: $x-sm-break) {
+    @media (max-width: variables.$x-sm-break) {
       display: none;
     }
   }

_sass/includes/_footer.scss

@@ -1,3 +1,5 @@
+@use '../base/utility' as *;
+
 .site-footer {
   @extend %padding-post;
   z-index: -1;

_sass/includes/_navbar.scss

@@ -1,3 +1,5 @@
+@use '../base/variables';
+
 // To clear things when we float the element inside nav and ul
 .clear {
   *zoom: 1;
@@ -47,7 +49,7 @@
   .site-title {
     float: left;
     font-weight: bold;
-    font-family: $font-family-logo;
+    font-family: variables.$font-family-logo;
     font-size: 1.3em;
   }
 }
@@ -90,7 +92,7 @@ nav {
 
 /* ---- Responsive ---- */
 
-@media (min-width: $break) {
+@media (min-width: variables.$break) {
   a#pull {
     display: none;
   }
@@ -100,7 +102,7 @@ nav {
   }
 }
 
-@media screen and (max-width: $break) {
+@media screen and (max-width: variables.$break) {
   .site-header {
     img.avatar {
       margin-top: -7px

_sass/includes/_portfolio.scss

@@ -1,3 +1,5 @@
+@use '../base/variables';
+
 .portfolio-link {
   display: block;
   position: relative;
@@ -33,7 +35,7 @@
       display: inline-block;
       vertical-align: middle;
 
-      @media screen and (max-width: $sm-break) {
+      @media screen and (max-width: variables.$sm-break) {
         font-size: 7px;
       }
     }

_sass/includes/_post_nav.scss

@@ -1,3 +1,6 @@
+@use '../base/variables';
+@use '../base/utility' as *;
+
 #post-nav {
   width: 100%;
   display: inline-block;
@@ -9,10 +12,6 @@
     margin: 0;
   }
 
-  p {
-    @extend .meta;
-  }
-
   #previous-post {
     float: left;
     width: 50%;
@@ -24,7 +23,7 @@
     width: 50%;
   }
 
-  @media screen and (max-width: $sm-break) {
+  @media screen and (max-width: variables.$sm-break) {
     a, p {
       font-size: 0.8em;
     }

_sass/layouts/_blog.scss

@@ -1,3 +1,6 @@
+@use '../base/variables';
+@use '../base/utility' as *;
+
 /* --- Header text feature --- */
 .call-out {
   @extend %padding-header;
@@ -12,12 +15,12 @@
   background-size: cover;
 
   h1 {
-    font-family: $font-family-logo;
-    @extend .subtle-txt-shadow;
+    font-family: variables.$font-family-logo;
+    @extend %subtle-txt-shadow;
   }
 
   /* --- Responsive --- */
-  @media screen and (max-width: $m-break) {
+  @media screen and (max-width: variables.$m-break) {
     background-size: 170% auto;
   }
 
@@ -53,20 +56,20 @@
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
     p a {
-      @extend .body-link;
+      @extend %body-link;
     }
 
     .post-img {
       vertical-align: middle;
       border-radius: 10px;
       overflow: hidden;
 
-      @media (min-width: $break) {
+      @media (min-width: variables.$break) {
         height: 250px;
       }
 
       //Smaller screen
-      @media screen and (max-width: $break) {
+      @media screen and (max-width: variables.$break) {
         height: 150px;
       }
 

_sass/layouts/_categories.scss

@@ -1,3 +1,5 @@
+@use '../base/variables';
+
 #archive,
 #categories {
   .archive-clouds,
@@ -48,7 +50,7 @@
     }
 
     .items {
-      padding-left: $padding-medium;
+      padding-left: variables.$padding-medium;
 
       .item {
         position: relative;

_sass/layouts/_page.scss

@@ -1,9 +1,12 @@
+@use '../base/variables';
+@use '../base/utility' as *;
+
 .title-padder {
-  padding: $title-padding;
+  padding: variables.$title-padding;
 }
 
 h1.title {
-  @extend .subtle-txt-shadow;
+  @extend %subtle-txt-shadow;
   padding: 0.5em 0;
 }