Revamp pages

Saabbir · May 29, 2024 · 74d9f87 · 74d9f87
1 parent 60698e7
commit 74d9f87
Show file tree

Hide file tree

Showing 52 changed files with 1,218 additions and 1,735 deletions.
diff --git a/assets/scss/01-config/_variables.scss b/assets/scss/01-config/_variables.scss
@@ -13,14 +13,16 @@ $text-color-gray: #abacbf;
 $vue-green: #42b883;
 $vue-black: #35495e;
 
-$border-color: #eee;
+$border-color: #ddd;
 $table-row-even-color: #fafafa;
 
 /*============================================
 | Background
 ============================================*/
 
 $body-bg-alt: #f6f5f7;
+$section-bg-gray-light: #fafafa;
+$section-bg-gray-dark: #f6f5f7;
 
 /*============================================
 | Typography
@@ -34,12 +36,12 @@ $font-family-sans-serif:
   // Basic web fallback "Helvetica Neue",
   Arial,
   // Linux
-    "Noto Sans",
+  "Noto Sans",
   "Liberation Sans",
   // Sans serif fallback
-    sans-serif,
+  sans-serif,
   // Emoji fonts
-    "Apple Color Emoji",
+  "Apple Color Emoji",
   "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
 $proxima-nova: "Proxima Nova", $font-family-sans-serif;

diff --git a/assets/scss/02-base/_global.scss b/assets/scss/02-base/_global.scss
@@ -5,12 +5,12 @@
 }
 
 html {
-  // word-spacing: 1px;
-  word-break: break-word;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  // word-spacing: 1px;
+  word-break: break-word;
 
   // @media (min-width: 1024px) {
   //   width: 100vw;
@@ -19,8 +19,8 @@ html {
 }
 
 body {
-  color: $text-color;
   background-color: #fff;
+  color: $text-color;
   // background: #fafafa url(~assets/images/tile.jpg) left top repeat fixed;
 
   @include scrollbar-styles;
@@ -59,8 +59,8 @@ ol {
 
 img {
   display: block;
-  max-width: 100%;
   height: auto;
+  max-width: 100%;
 }
 
 h1,
@@ -76,14 +76,10 @@ figure {
 }
 
 hr {
-  margin: 0;
+  background-color: $border-color;
   border: 0;
   height: rem(1px);
-  background-color: $border-color;
-}
-
-strong {
-  color: $text-color-dark;
+  margin: 0;
 }
 
 h1,

diff --git a/assets/scss/02-base/_layouts.scss b/assets/scss/02-base/_layouts.scss
@@ -1,61 +1,70 @@
+.l-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
+  min-height: calc(var(--vh, 1vh) * 100);
+
+  @media (min-width: 1280px) {
+    min-height: 100vh;
+  }
+}
+
 .l-wrap {
-  padding: 0 rem(16px);
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 960px;
   width: 100%;
-  margin: 0 auto;
 
-  @media (min-width: 1024px) {
-    padding: 0 rem(32px);
-    width: rem(960px);
+  &--fluid {
+    max-width: 100%;
+    width: 100%;
   }
 
-  &--sm {
-    @media (min-width: 768px) {
-      width: 736px;
-    }
+  &--300 {
+    max-width: 300px;
   }
 
-  &--lg {
-    @media (min-width: 1280px) {
-      width: rem(1200px);
-    }
+  &--320 {
+    max-width: 320px;
   }
 
-  &--700 {
-    @media (min-width: 732px) {
-      width: rem(700px);
-    }
+  &--400 {
+    max-width: 400px;
   }
 
-  &--1200 {
-    @media (min-width: 1232px) {
-      width: rem(1200px);
-    }
+  &--480 {
+    max-width: 480px;
   }
 
-  &--1600 {
-    @media (min-width: 1632px) {
-      width: rem(1600px);
-    }
+  &--500 {
+    max-width: 500px;
   }
 
-  &--fluid {
-    width: 100%;
+  &--600 {
+    max-width: 600px;
   }
-}
 
-.l-wrapper {
-  min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
-  min-height: calc(var(--vh, 1vh) * 100);
-  display: flex;
-  flex-direction: column;
+  &--700 {
+    max-width: 700px;
+  }
 
-  @media (min-width: 1280px) {
-    min-height: 100vh;
+  &--768 {
+    max-width: 768px;
   }
-}
 
-.l-copy {
-  max-width: 700px;
-  // margin-left: auto;
-  // margin-right: auto;
+  &--992 {
+    max-width: 992px;
+  }
+
+  &--1024 {
+    max-width: 1024px;
+  }
+
+  &--1200 {
+    max-width: 1200px;
+  }
+
+  &--1600 {
+    max-width: 1600px;
+  }
 }
diff --git a/assets/scss/02-base/_typography.scss b/assets/scss/02-base/_typography.scss
@@ -9,13 +9,17 @@ html {
     font-size: 87.5%; // 14px
   }
 
-  @media (min-width: 1440px) {
+  @media (min-width: 1280px) {
     font-size: 100%; // 16px
   }
 }
 
 body {
-  font-size: rem(18px);
+  font-size: rem(16px);
+
+  @media (min-width: 768px) {
+    font-size: rem(18px);
+  }
 }
 
 h1,
@@ -24,36 +28,40 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: bold;
   font-family: $nunito;
+  font-weight: bold;
   line-height: 1.3;
 }
 
 h1 {
-  font-size: rem(36px);
+  font-size: rem(32px);
+
+  @media (min-width: 768px) {
+    font-size: rem(36px);
+  }
 }
 
 h2 {
-  font-size: rem(24px);
+  font-size: rem(28px);
 
   @media (min-width: 768px) {
-    font-size: rem(30px);
+    font-size: rem(32px);
   }
 }
 
 h3 {
-  font-size: rem(22px);
+  font-size: rem(24px);
 
   @media (min-width: 768px) {
-    font-size: rem(26px);
+    font-size: rem(28px);
   }
 }
 
 h4 {
   font-size: rem(20px);
 
   @media (min-width: 768px) {
-    font-size: rem(22px);
+    font-size: rem(24px);
   }
 }
 
@@ -69,10 +77,30 @@ small {
   font-size: 0.8em;
 }
 
+.t-10 {
+  font-size: rem(10px);
+}
+
+.t-12 {
+  font-size: rem(12px);
+}
+
+.t-14 {
+  font-size: rem(14px);
+}
+
+.t-16 {
+  font-size: rem(16px);
+}
+
 .t-18 {
   font-size: rem(18px);
 }
 
+.t-20 {
+  font-size: rem(20px);
+}
+
 .t-display-1,
 .t-display-2,
 .t-display-3 {

diff --git a/assets/scss/03-components/_c-article.scss b/assets/scss/03-components/_c-article.scss
@@ -9,10 +9,10 @@
 }
 
 .c-article-container {
-  margin: rem(32px) 0;
+  padding: rem(32px) rem(16px);
 
-  @media (min-width: 1280px) {
-    margin: rem(64px) 0;
+  @media (min-width: 768px) {
+    padding: rem(64px) rem(32px);
   }
 }
 
@@ -22,22 +22,22 @@
   &--with-aside {
     @media (min-width: 768px) {
       display: grid;
-      grid-template-columns: $article-nav-width 1fr;
       grid-gap: rem(32px);
+      grid-template-columns: $article-nav-width 1fr;
     }
   }
 }
 
 .l-article__aside {
-  border: rem(1px) solid $border-color;
   background-color: #fff;
+  border: rem(1px) solid $border-color;
   margin-bottom: rem(32px);
 
   @media (min-width: 768px) {
+    align-self: flex-start;
     position: sticky;
     top: var(--navbarHeight, 98px);
     z-index: 1;
-    align-self: flex-start;
   }
 
   @media (min-width: 1440px) {
@@ -46,8 +46,8 @@
 }
 
 .c-article {
-  width: 100%;
   overflow: auto;
+  width: 100%;
 
   &__title {
     font-size: rem(48px);

diff --git a/assets/scss/03-components/_c-articles-list.scss b/assets/scss/03-components/_c-articles-list.scss
@@ -1,9 +1,13 @@
 .c-articles-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
   display: grid;
   gap: rem(16px);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
 
   &--two-column {
     @media (min-width: 600px) {

diff --git a/assets/scss/03-components/_c-banner.scss b/assets/scss/03-components/_c-banner.scss
@@ -1,19 +1,19 @@
 .c-banner {
-  padding: rem(60px) 0;
   background-image: radial-gradient(
     circle,
     rgba($accent-color-1, 0.9),
     rgba($accent-color-2, 0.9)
   );
+  padding: rem(60px) rem(16px);
 
   @media (min-width: 500px) {
-    padding: rem(60px) rem(30px);
+    padding: rem(64px) rem(32px);
   }
 
   &__title {
-    margin: 0;
     color: #fff;
     font-size: rem(32px);
+    margin: 0;
     text-align: center;
 
     @media (min-width: 500px) {