fix : some styling and update content

Zainal21 · Jun 10, 2021 · bbe801d · bbe801d
1 parent a306220
commit bbe801d
Show file tree

Hide file tree

Showing 23 changed files with 385 additions and 265 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/assets/css/base/Premier Sans.otf b/assets/css/base/Premier Sans.otf
diff --git a/assets/css/base/Premier-Sans.ttf b/assets/css/base/Premier-Sans.ttf
diff --git a/assets/css/base/_fonts.scss b/assets/css/base/_fonts.scss
@@ -1,73 +1,97 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;1,200;1,300;1,400;1,500;1,600&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
-
-$font-base-color:             $grey-2;
-$font-family-base:            'Poppins', Arial, sans-serif;
-$font-family-blog:            'Montserrat', sans-serif;
-$line-height-base:            1.5;
-$fs-base:                     1.6rem;
-$fs-base-responsive:          1.4rem;
-$fs-large:                    2.4rem;
-$fs-large-responsive:         2.6rem;
-$fs-small:                    $fs-base-responsive;
-$fs-small-responsive:         1rem;
-$fs-h1:                       $fs-large;
-$fs-h2:                       $fs-large;
-$fs-h3:                       2rem;
-$fs-h4:                       $fs-base;
-$fs-h5:                       $fs-base;
-$fs-h6:                       $fs-small;
+
+@font-face {
+  font-family: 'Premier Sans', Arial, Helvetica, sans-serif;
+  src: url('./Premier-Sans.ttf');
+}
+
+$font-base-color: $grey-2;
+$font-family-base: 'Premier Sans',
+Arial,
+Helvetica,
+sans-serif;
+$font-family-blog: 'Premier Sans',
+Arial,
+Helvetica,
+sans-serif;
+$line-height-base: 1.5;
+$fs-base: 1.6rem;
+$fs-base-responsive: 1.4rem;
+$fs-large: 2.4rem;
+$fs-large-responsive: 2.6rem;
+$fs-small: $fs-base-responsive;
+$fs-small-responsive: 1rem;
+$fs-h1: $fs-large;
+$fs-h2: $fs-large;
+$fs-h3: 2rem;
+$fs-h4: $fs-base;
+$fs-h5: $fs-base;
+$fs-h6: $fs-small;
 
 
 html {
-  font-size: 62.5%; /* Now 10px = 1rem! */
+  font-size: 62.5%;
+  /* Now 10px = 1rem! */
   -webkit-font-smoothing: antialiased;
-  font-family: 'Poppins', sans-serif;
+  font-family: $font-family-base;
 }
 
 body {
-  font-family: 'Poppins', sans-serif;
+  font-family: $font-family-base !important;
   font-size: $fs-base-responsive;
   color: $font-base-color;
   line-height: $line-height-base;
-  @media (min-width: $screen-sm){
+
+  @media (min-width: $screen-sm) {
     font-size: $fs-base;
   }
 }
 
-@mixin content-blocks{
-  & + p, & + ul, & + ol, & + blockquote, & + .content-block{
-   @content;
+@mixin content-blocks {
+
+  &+p,
+  &+ul,
+  &+ol,
+  &+blockquote,
+  &+.content-block {
+    @content;
   }
 }
 
-p,ul,ol,blockquote,.content-block{
+p,
+ul,
+ol,
+blockquote,
+.content-block {
   margin-top: 0;
   margin-bottom: 2.4rem;
-  @include content-blocks{
+
+  @include content-blocks {
     margin-top: 1em;
   }
 
 }
 
 .title {
+  font-family: $font-family-base;
+  ;
   margin: 7.2rem 0 4.8rem 0;
   text-align: center;
-	font-weight: 600;
-  @media (min-width: $screen-sm){
+  font-weight: 600;
+
+  @media (min-width: $screen-sm) {
     margin: 7rem 0 5rem 0;
   }
 }
 
-ul{
+ul {
   padding-left: 1.1em;
 }
 
-li{
+li {
   margin-bottom: 2em;
 
-  @media (min-width: $screen-sm){
+  @media (min-width: $screen-sm) {
     margin-bottom: 0;
   }
 }
@@ -83,66 +107,97 @@ blockquote {
   max-width: 600px
 }
 
-h1,.h1{
+h1,
+.h1 {
   font-size: $fs-large-responsive;
   margin-top: 0;
   font-weight: 500;
   margin-bottom: 1rem;
-  @media (min-width: $screen-sm){
+
+  @media (min-width: $screen-sm) {
     font-size: $fs-h1;
   }
 }
 
-h2,.h2{
+h2,
+.h2 {
   font-size: $fs-h2;
   color: $secondary;
   font-weight: 600;
   margin-top: 0;
   margin-bottom: 1rem;
   display: inline-block;
-  
-  @media (min-width: $screen-sm){
+
+  @media (min-width: $screen-sm) {
     padding-bottom: 48px;
   }
 }
 
-h3,.h3{
+h3,
+.h3 {
   font-size: $fs-h3;
   margin-top: 0;
   margin-bottom: 1rem;
   font-weight: regular;
 }
 
-h4,.h4{
+h4,
+.h4 {
   font-size: $fs-h4;
   margin-top: 0;
   margin-bottom: 1rem;
   font-weight: regular;
 }
 
-h5,.h5{
+h5,
+.h5 {
   font-size: $fs-h5;
   margin-top: 0;
   margin-bottom: 1rem;
   font-weight: regular;
 }
 
 //extend sizes
-.s1{font-size: $fs-h1;}
-.s2{font-size: $fs-h2;}
-.s3{font-size: $fs-h3;}
-.s4{font-size: $fs-h4;}
-.s5{font-size: $fs-h5;}
-.s5{font-size: $fs-h6;}
-.large{font-size: $fs-large;}
-.small{font-size: $fs-small;}
-
-hgroup{
-
-  h1,.s1{
+.s1 {
+  font-size: $fs-h1;
+}
+
+.s2 {
+  font-size: $fs-h2;
+}
+
+.s3 {
+  font-size: $fs-h3;
+}
+
+.s4 {
+  font-size: $fs-h4;
+}
+
+.s5 {
+  font-size: $fs-h5;
+}
+
+.s5 {
+  font-size: $fs-h6;
+}
+
+.large {
+  font-size: $fs-large;
+}
+
+.small {
+  font-size: $fs-small;
+}
+
+hgroup {
+
+  h1,
+  .s1 {
     margin-bottom: .2em;
-    + *{
+
+    +* {
       font-weight: normal;
     }
   }
-}
+}