Refactor: Redesign of the blog website to align with the new design s…

…tandards. (#106) * New-design * fix: correct and use predefined variables * fix: correct for tag slug when space at the start + show tag/author on the specific page --------- Co-authored-by: Geoffroy Bouet <[email protected]> Co-authored-by: Lucas <[email protected]>
lunatech-labs · Oct 2, 2024 · c68bbf7 · c68bbf7
1 parent 62a7912
commit c68bbf7
Show file tree

Hide file tree

Showing 33 changed files with 85 additions and 187 deletions.
diff --git a/app/assets/stylesheets/utils/abstracts/_variables.scss b/app/assets/stylesheets/utils/abstracts/_variables.scss
@@ -1,15 +1,29 @@
 // Colors
-$dark-red: #9b0f17;
-$red: #ae151e;
-$bright-red: #ea212e;
-$grey: #252322;
-$dark-sand: #b0a29c;
-$sand: #f8efdd;
-$light-sand: #fffaee;
-$white: #ffffff;
-
-// Font-size
+$lightBlue: #78B4D7;
+$blue: #0E2B71;
+$mediumBlue: #0A1E50;
+$darkBlue: #061332;
+$bgMediumBlue: #081840;
+$bgDarkBlue: #091B49;
+$pink: #DB2777;
+$darkPink: #bb2267;
+$red: #E62832;
+$mediumRed: #AE1920;
+$darkRed: #9B1919;
+$white: #FFFFFF;
+$lightGray: #c5c5c5;
+$darkGray: #4A4A4A;
+$border: #E7E7E7;
 
+// Fonts
+$font-size-small: 0.75rem;     /* 12px */
+$font-size-base: 1rem;         /* 16px, base */
+$font-size-medium: 1.0625rem;  /* 17px */
+$font-size-large: 1.25rem;     /* 20px */
+$font-size-xlarge: 1.375rem;   /* 22px */
+$font-size-xxlarge: 1.5rem;    /* 24px */
+$font-size-heading: 2.5rem;    /* 40px */
+$font-size-hero: 4rem;         /* 64px */
 
 // Border
 $border-radius: 8px;

diff --git a/app/assets/stylesheets/utils/base/_fonts.scss b/app/assets/stylesheets/utils/base/_fonts.scss
@@ -1,25 +1,20 @@
 @font-face {
-    font-family: "Open Sans";
-    src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
+    font-family: "Poppins";
+    src: url("../fonts/Poppins-Regular.ttf") format("truetype");
     font-weight: 400;
 }
 @font-face {
-    font-family: "Open Sans";
-    src: url("../fonts/OpenSans-Medium.ttf") format("truetype");
+    font-family: "Poppins";
+    src: url("../fonts/Poppins-Medium.ttf") format("truetype");
     font-weight: 500;
 }
 @font-face {
-    font-family: "Open Sans";
-    src: url("../fonts/OpenSans-SemiBold.ttf") format("truetype");
+    font-family: "Poppins";
+    src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
     font-weight: 600;
 }
 @font-face {
-    font-family: "Open Sans";
-    src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
+    font-family: "Poppins";
+    src: url("../fonts/Poppins-Bold.ttf") format("truetype");
     font-weight: 700;
-}
-@font-face {
-    font-family: "Open Sans";
-    src: url("../fonts/OpenSans-ExtraBold.ttf") format("truetype");
-    font-weight: 800;
-}
+}
diff --git a/app/assets/stylesheets/utils/base/_general.scss b/app/assets/stylesheets/utils/base/_general.scss
@@ -5,14 +5,14 @@ main {
     }
 }
 body {
-    font-family: 'Open Sans', sans-serif;
-    font-size: 16px;
+    font-family: 'Poppins', sans-serif;
+    font-size: $font-size-base;
     font-weight: 400;
     color: #292929;
 }
 h2 {
     font-size: 32px;
-    font-weight: 700;
+    font-weight: 600;
 }
 .subtitle {
     font-size: 16px;

diff --git a/app/assets/stylesheets/utils/components/__components-dir.scss b/app/assets/stylesheets/utils/components/__components-dir.scss
@@ -16,7 +16,6 @@ Files inside this folder should contain all styles relating to a reusable compon
 @import "post";
 @import "progress";
 @import "searchbar";
-@import "slider";
 @import "social";
 @import "stats";
 @import "tag";
diff --git a/app/assets/stylesheets/utils/components/_article.scss b/app/assets/stylesheets/utils/components/_article.scss
@@ -120,9 +120,9 @@ article {
         margin: 2px 0;
     }
     a {
-        color: #EA212E;
+        color: $pink;
         &:hover {
-            color: #C21823;
+            color: $darkPink;
         }
     }
     @include phone {

diff --git a/app/assets/stylesheets/utils/components/_buttons.scss b/app/assets/stylesheets/utils/components/_buttons.scss
@@ -8,14 +8,15 @@
     cursor: pointer;
     border: none;
     text-decoration: none;
+    transition: 0.3s;
 }
-.btn__red {
-    color: white;
-    background: #EA212E;
+.btn__primary {
+    color: $white;
+    background: $pink;
     &:hover {
         color: $white;
         text-decoration: none;
-        background: #C21823;
+        background: $darkPink;
     }
 }
 .btn__secondary {

diff --git a/app/assets/stylesheets/utils/components/_circle.scss b/app/assets/stylesheets/utils/components/_circle.scss
@@ -21,7 +21,7 @@
             content: '';
             height: 100%; 
             width: 100%; 
-            border: 1px dashed #EA212E;
+            border: 1px dashed $pink;
             border-radius: inherit;
             animation: spin 30s linear infinite;
         }

diff --git a/app/assets/stylesheets/utils/components/_cover.scss b/app/assets/stylesheets/utils/components/_cover.scss
@@ -1,11 +1,10 @@
 .cover {
     @include flexbox;
     justify-content: space-between;
-    padding: 0 128px;
-    height: 784px;
+    padding: 160px 128px;
     overflow: hidden;
     position: relative;
-    background: linear-gradient(-45deg, #000000, #272727, #000000, #292929);
+    background: linear-gradient(-90deg, $darkBlue, $mediumBlue, $mediumBlue, $darkBlue);
     background-size: 400% 400%;
 	animation: gradient 15s ease infinite;
     @include tablet-landscape {
@@ -19,9 +18,16 @@
         z-index: 1
     }
     &__subtitle {
-        font-size: 32px;
-        color: white;
-        opacity: .5;
+        font-size: $size-s;
+        color: $lightGray;
+        text-transform: uppercase;
+        letter-spacing: 4px;
+        font-weight: 600;
+        span {
+            color: $pink;
+            margin-right: 8px;
+
+        }
         @include tablet-landscape {
             font-size: 28px;
         }
@@ -33,10 +39,11 @@
         }
     }
     &__title {
-        font-size: 96px;
-        font-weight: 500;
-        line-height: 112px;
         color: white;
+        font-size: 4rem;
+        line-height: 5rem;
+        font-weight: 700;
+        margin-bottom: 32px;
         @include tablet-landscape {
             font-size: 64px;
             line-height: 80px;

diff --git a/app/assets/stylesheets/utils/components/_progress.scss b/app/assets/stylesheets/utils/components/_progress.scss
@@ -21,7 +21,7 @@
     padding: 0;
 }
 #progress-over {
-    background-color: #EA212E;
+    background-color: $pink;
     width: 0%;
 }
 #progress-impend {

diff --git a/app/assets/stylesheets/utils/components/_searchbar.scss b/app/assets/stylesheets/utils/components/_searchbar.scss
@@ -13,7 +13,7 @@
         outline: none;
         color: white;
         &:focus {
-            border: 1px solid #EA212E;
+            border: 1px solid $pink;
             transition: 0.35s ease;
             color: white;
             &::-webkit-input-placeholder {

diff --git a/app/assets/stylesheets/utils/components/_slider.scss b/app/assets/stylesheets/utils/components/_slider.scss
diff --git a/app/assets/stylesheets/utils/layouts/_footer.scss b/app/assets/stylesheets/utils/layouts/_footer.scss
@@ -1,5 +1,5 @@
 .footer {
-    background: black;
+    background: $darkBlue;
     color: white;
     padding: 54px 128px;
     @include tablet-landscape {

diff --git a/app/assets/stylesheets/utils/layouts/_header.scss b/app/assets/stylesheets/utils/layouts/_header.scss
@@ -3,7 +3,7 @@
     justify-content: space-between;
     padding: 0 128px;
     height: 80px;
-    background: black;
+    background: $mediumBlue;
     border-bottom: 1px solid #2b2b2b;
     position: fixed;
     min-width: 100%;

diff --git a/app/assets/stylesheets/utils/pages/_not-found.scss b/app/assets/stylesheets/utils/pages/_not-found.scss
@@ -1,17 +1,17 @@
 #not-found {
     header {
-        background: $light-sand;
+        background: $white;
         padding: 16px 32px;
 
         svg .lb_path {
-            fill: $grey;
+            fill: $darkGray;
         }
 
         .lb_menu {
             ul {
                 li {
                     a {
-                        color: $grey;
+                        color: $darkGray;
                     }
                 }
             }
@@ -46,7 +46,7 @@
             }
 
             h1 {
-                color: #252322;
+                color: $darkGray;
                 margin-bottom: 0;
                 text-align: left;
             }
@@ -71,15 +71,15 @@
             left: 40px;
             height: 170px;
             width: 170px;
-            background-color: $bright-red;
+            background-color: $pink;
             border-radius: 50%;
             display: inline-block;
         }
 
         #circle {
             height: 450px;
             width: 450px;
-            border: 1px solid $bright-red;
+            border: 1px solid $pink;
             border-radius: 50%;
             display: inline-block;
         }

diff --git a/app/assets/stylesheets/utils/pages/_posts-list.scss b/app/assets/stylesheets/utils/pages/_posts-list.scss
@@ -68,12 +68,12 @@
         margin-bottom: $space-md;
         line-height: 32px;
         text-decoration: none;
-        color: $bright-red;
+        color: $pink;
         display: flex;
         height: 64px;
         overflow: hidden;
         &:hover {
-            color: $dark-red;
+            color: $darkPink;
         }
     }
     .lb_post-thumb {
@@ -83,7 +83,7 @@
             width: $size-md;
             height: $size-md;
             border-radius: 50%;
-            background: $dark-sand;
+            background: $darkGray;
         }
         img {
             &:first-child {
@@ -106,9 +106,9 @@
     .lb_post-author {
         text-decoration: none;
         text-transform: capitalize;
-        color: $grey;
+        color: $darkGray;
         &:hover {
-            border-bottom: 1px solid $grey;
+            border-bottom: 1px solid $darkGray;
         }
     }
     .lb_post-date {