Use better namespacing

sylhare · Nov 25, 2024 · bdee637 · bdee637
1 parent 3b05c88
commit bdee637
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 88 deletions.
diff --git a/_includes/blog/post_nav.liquid b/_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>

diff --git a/_sass/base/_global.scss b/_sass/base/_global.scss
@@ -283,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;
+}
diff --git a/_sass/base/_utility.scss b/_sass/base/_utility.scss
@@ -43,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;
-}
+}
diff --git a/_sass/includes/_blog_nav.scss b/_sass/includes/_blog_nav.scss
@@ -1,4 +1,4 @@
-@use '../base/variables' as *;
+@use '../base/variables';
 @use '../base/utility' as *;
 
 /* --- Pagination --- */
@@ -21,7 +21,7 @@
     display: inline-block;
     vertical-align: sub;
 
-    @media (max-width: $x-sm-break) {
+    @media (max-width: variables.$x-sm-break) {
       display: none;
     }
   }

diff --git a/_sass/includes/_navbar.scss b/_sass/includes/_navbar.scss
@@ -1,4 +1,4 @@
-@use '../base/variables' as *;
+@use '../base/variables';
 
 // To clear things when we float the element inside nav and ul
 .clear {
@@ -49,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;
   }
 }
@@ -92,7 +92,7 @@ nav {
 
 /* ---- Responsive ---- */
 
-@media (min-width: $break) {
+@media (min-width: variables.$break) {
   a#pull {
     display: none;
   }
@@ -102,7 +102,7 @@ nav {
   }
 }
 
-@media screen and (max-width: $break) {
+@media screen and (max-width: variables.$break) {
   .site-header {
     img.avatar {
       margin-top: -7px

diff --git a/_sass/includes/_portfolio.scss b/_sass/includes/_portfolio.scss
@@ -1,4 +1,4 @@
-@use '../base/variables' as *;
+@use '../base/variables';
 
 .portfolio-link {
   display: block;
@@ -35,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;
       }
     }

diff --git a/_sass/includes/_post_nav.scss b/_sass/includes/_post_nav.scss
@@ -1,4 +1,4 @@
-@use '../base/variables' as *;
+@use '../base/variables';
 @use '../base/utility' as *;
 
 #post-nav {
@@ -23,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;
     }

diff --git a/_sass/layouts/_blog.scss b/_sass/layouts/_blog.scss
@@ -1,4 +1,4 @@
-@use '../base/variables' as *;
+@use '../base/variables';
 @use '../base/utility' as *;
 
 /* --- Header text feature --- */
@@ -15,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;
   }
 
@@ -56,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;
       }
 

diff --git a/_sass/layouts/_categories.scss b/_sass/layouts/_categories.scss
@@ -1,4 +1,4 @@
-@use '../base/variables' as *;
+@use '../base/variables';
 
 #archive,
 #categories {
@@ -50,7 +50,7 @@
     }
 
     .items {
-      padding-left: $padding-medium;
+      padding-left: variables.$padding-medium;
 
       .item {
         position: relative;

diff --git a/_sass/layouts/_page.scss b/_sass/layouts/_page.scss
@@ -1,12 +1,12 @@
-@use '../base/variables' as *;
+@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;
 }
 

diff --git a/_sass/layouts/_posts.scss b/_sass/layouts/_posts.scss
@@ -1,4 +1,4 @@
-@use '../base/variables' as *;
+@use '../base/variables';
 @use '../base/utility' as *;
 
 .comments {
@@ -17,7 +17,7 @@ article {
   }
 
   a:hover {
-    @extend .body-link;
+    @extend %body-link;
   }
 
   .footnotes {
@@ -96,13 +96,13 @@ header {
   }
 
   h1.title, .post-info {
-    @extend .txt-shadow;
+    @extend %txt-shadow;
   }
 
   header {
     color: var(--header-text);
     margin-bottom: 0;
-    padding: 3.6% $padding-large;
+    padding: 3.6% variables.$padding-large;
 
     .meta {
       color: var(--header-text);
@@ -121,25 +121,25 @@ header {
   }
 
   .feature-image-padding {
-    padding: $feature-image-padding;
+    padding: variables.$feature-image-padding;
   }
 }
 
 /*-- feature-image Responsive scrolling --*/
 .feature-image header {
-  @media screen and (max-width: $break) {
-    padding: $padding-large*1.5 $padding-small;
+  @media screen and (max-width: variables.$break) {
+    padding: variables.$padding-large*1.5 variables.$padding-small;
   }
 
-  @media screen and (min-width: $break) {
+  @media screen and (min-width: variables.$break) {
     background-size: 120% auto;
   }
 
-  @media screen and (max-width: $break) {
+  @media screen and (max-width: variables.$break) {
     background-size: 200% auto;
   }
 
-  @media screen and (max-width: $sm-break) {
+  @media screen and (max-width: variables.$sm-break) {
     background-size: 400% auto;
   }
 }

diff --git a/_sass/layouts/_tags.scss b/_sass/layouts/_tags.scss
@@ -1,8 +1,8 @@
-@use '../base/variables' as *;
+@use '../base/variables';
 
 .tag-list {
   width: 100%;
-  padding-bottom: $padding-x-small;
+  padding-bottom: variables.$padding-x-small;
 
   a.button {
     margin: 0.1em;
@@ -30,7 +30,7 @@
 }
 
 .tag-anchor {
-  margin-top: $padding-x-small;
+  margin-top: variables.$padding-x-small;
 
   a {
     color: var(--link);
@@ -50,7 +50,7 @@
     margin-bottom: 0;
 
     a {
-      margin-left: $padding-x-small;
+      margin-left: variables.$padding-x-small;
     }
 
     .post-info {
@@ -65,7 +65,7 @@
     line-height: normal;
   }
 
-  @media screen and (max-width: $sm-break) {
+  @media screen and (max-width: variables.$sm-break) {
     .meta {
       display: none;
     }