Remove unnecesary mixin in blog and blog-post

CosmeValera · Oct 25, 2024 · 073e3c2 · 073e3c2
1 parent 650c530
commit 073e3c2
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 48 deletions.
diff --git a/sass/_mixins.scss b/sass/_mixins.scss
@@ -51,12 +51,6 @@
     }
 }
 
-@mixin blog-cards-and-blog-post-styles() {
-    max-width: 700px;
-    padding-top: 1.5rem;
-    margin: 0 auto;
-}
-
 @mixin card-a-colors-dark {
     background-color: $color-bg-secondary;
     border: 4px solid $color-fg-secondary;

diff --git a/sass/blog-post.scss b/sass/blog-post.scss
@@ -1,9 +1,10 @@
 @import 'main';
 
 .blog-post {
-    @include blog-cards-and-blog-post-styles();
+    max-width: 700px;
+    margin: 0 auto;
 
-    .title-text {
+    .blog-post-title {
         text-align: center;
         margin-bottom: 2rem;
         margin-top: 0;

diff --git a/sass/blog.scss b/sass/blog.scss
@@ -1,49 +1,49 @@
 @import 'main';
 
-.column.right {
-    .blog-cards {
-        @include blog-cards-and-blog-post-styles();
+.blog-cards {
+    max-width: 700px;
+    padding-top: 1.5rem;
+    margin: 0 auto;
 
-        a.blog-card {
-            display: block;
-            background-color: $color-bg-secondary;
-            padding: 1rem;
-            border-radius: 8px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s, box-shadow 0.3s;
-            margin-bottom: 2rem;
+    a.blog-card {
+        display: block;
+        background-color: $color-bg-secondary;
+        padding: 1rem;
+        border-radius: 8px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s, box-shadow 0.3s;
+        margin-bottom: 2rem;
 
-            &:hover {
-                transform: translateY(20px);
-                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-            }
+        &:hover {
+            transform: translateY(20px);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+        }
 
-            .blog-title {
-                color: $color-fg-secondary;
-                font-family: Andika;
-                font-size: clamp(1.2rem, 3.8vw, 1.7rem);
-                margin-bottom: 1rem;
+        .blog-title {
+            color: $color-fg-secondary;
+            font-family: Andika;
+            font-size: clamp(1.2rem, 3.8vw, 1.7rem);
+            margin-bottom: 1rem;
+        }
+
+        .blog-card-details {
+            display: flex;
+            justify-content: space-between;
+            gap: clamp(1rem, 4.4vw, 2rem);
+
+            .card-description {
+                color: $color-fg;
+                opacity: 0.9;
+                font-weight: light;
+                font-size: clamp(0.7rem, 2.2vw, 1rem);
             }
 
-            .blog-card-details {
-                display: flex;
-                justify-content: space-between;
-                gap: clamp(1rem, 4.4vw, 2rem);
-
-                .card-description {
-                    color: $color-fg;
-                    opacity: 0.9;
-                    font-weight: light;
-                    font-size: clamp(0.7rem, 2.2vw, 1rem);
-                }
-
-                .card-date {
-                    color: $color-fg-secondary;
-                    min-width: fit-content;
-                    font-family: Andika;
-                    font-size: clamp(0.6rem, 2vw, 0.9rem);;
-                }
+            .card-date {
+                color: $color-fg-secondary;
+                min-width: fit-content;
+                font-family: Andika;
+                font-size: clamp(0.6rem, 2vw, 0.9rem);;
             }
         }
     }
-}
+}
diff --git a/templates/base.html b/templates/base.html
@@ -60,5 +60,6 @@
     <!-- SCRIPTS -->
     <script src="{{ get_url(path="js/lateralMenu.js") | safe }}"></script>
     {% block scripts%} {% endblock %}
+    <!-- END: SCRIPTS -->
   </body>
 </html>
diff --git a/templates/blog-post.html b/templates/blog-post.html
@@ -11,7 +11,7 @@
 {% block content %}
 <div class="column right">
   <div class="blog-post">
-      <h2 class="title-text">{{ page.title }}</h2>
+      <h2 class="blog-post-title">{{ page.title }}</h2>
       <h3 class="presentation-text">{{ page.description }}</h3>
       <div class="post-content">
           {{ page.content | safe }}