Refactoring graphic appearence of h1

alice-sebego · Jul 15, 2021 · 866f2cf · 866f2cf
1 parent 55b5210
commit 866f2cf
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 15 deletions.
diff --git a/.sass-cache/6e84fde039dd37a4931e8754f45510801c4a7b30/_base.scssc b/.sass-cache/6e84fde039dd37a4931e8754f45510801c4a7b30/_base.scssc
diff --git a/.sass-cache/6e84fde039dd37a4931e8754f45510801c4a7b30/_mixins.scssc b/.sass-cache/6e84fde039dd37a4931e8754f45510801c4a7b30/_mixins.scssc
diff --git a/.sass-cache/6e84fde039dd37a4931e8754f45510801c4a7b30/style.scssc b/.sass-cache/6e84fde039dd37a4931e8754f45510801c4a7b30/style.scssc
diff --git a/dist/css/style.css b/dist/css/style.css
diff --git a/dist/css/style.css.map b/dist/css/style.css.map
diff --git a/index.html b/index.html
@@ -27,7 +27,7 @@
 </head>
 <body>
     <header>
-        <h1>Une vision VS une vision</h1>
+        <h1><span class="black">Une vision V</span><span class="white">S une vision</span></h1>
     </header>
     <section>
        <!-- Alls posts imported from JS -->

diff --git a/src/sass/_base.scss b/src/sass/_base.scss
@@ -1,8 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Source+Sans+Pro&display=swap');
+@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
 
 // FONTS
 $font-stack:'Source Sans Pro', sans-serif;
 $font-title: 'Crete Round', serif;
+$font-awesome-free: 'Font Awesome 5 Free';
 
 // COLORS
 $dark-color: rgb(15, 15, 15);

diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss
@@ -0,0 +1,11 @@
+@mixin handleCharacters($font-family, $color, $font-weight){
+    font-family: $font-title;
+    background-color: $color;
+    font-weight: $font-weight;
+}
+
+@mixin setFontAwesome($font-family, $content, $padding){
+    font-family: $font-family;
+    content:$content;
+    padding: $padding;
+}
diff --git a/src/sass/style.scss b/src/sass/style.scss
@@ -1,4 +1,5 @@
 @import './base';
+@import './mixins';
 
 *, ::before, ::after{
     box-sizing: border-box;
@@ -184,7 +185,7 @@ background: var(--bkg-color);
     }
 }
 
-h1, h2, p, footer, footer a{
+h2, p, footer, footer a{
     color: var(--text-color);
 }
 
@@ -196,12 +197,26 @@ header{
 
     h1{
         text-transform: uppercase;
-        letter-spacing: .02em;
-    }
-}
+        letter-spacing: .08em;
+
+        &::before{
+            @include setFontAwesome($font-awesome-free,'\f185', .3em);
+        }
+
+        &::after{
+            @include setFontAwesome($font-awesome-free,'\f185', .3em);
+        }
 
-h1, h2{
-    font-family: $font-title;
+    }
+
+    .black{ 
+        @include handleCharacters($font-title, $dark-color, 500);
+    }
+
+    .white{
+        @include handleCharacters($font-title, $light-color, 700);
+        color: $dark-color;
+    }
 }
 
 section{
@@ -218,6 +233,7 @@ section{
         font-size: 4vw;
         font-weight: 400;
         letter-spacing: .03em;
+        font-family: $font-title;
     }
 
     p{