add in css fx

source/01.blade.php

@@ -12,6 +12,7 @@
 
         <p>Gain access to our full library of tutorials along with expert code reviews. 
         Perfect for any developers who are serious about honing their skills.</p>
+
       </div>
     </div>
     <div class="row">
@@ -47,4 +48,5 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">
+<link rel="icon" type="image/png" href="{{ $page->baseUrl }}/resources/01/favicon-32x32.png">
 @endsection

source/_assets/sass/_colors.scss

@@ -1,6 +1,10 @@
-.theme-primary {
-  background-color: $theme-primary;
-}
-.theme-secondary {
-  background-color: $theme-secondary;
+$themeColours: (
+  "primary": $theme-primary,
+  "secondary": $theme-secondary,
+);
+
+@each $themeColour, $i in $themeColours {
+  .theme-#{$themeColour} {
+    background-color: $i;
+  }
 }

source/_assets/sass/_structure.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 body {
   background: #E0EAFC;  /* fallback for old browsers */
   background: -webkit-linear-gradient(to right, #CFDEF3, #E0EAFC);  /* Chrome 10-25, Safari 5.1-6 */
@@ -29,12 +31,16 @@ body {
   max-width: $screen-xl;
   margin: 0 auto;
 }
-.col-8, .col-16 {
-  width: 100%;
+div[class^="col-"] {
   padding: $gutter * 2;
-} 
-.col-8 {
-  @media (min-width: $screen-md) {
-    width: 50%;
-  }
+}
+
+// https://www.gavsblog.com/blog/for-each-while-loops-sass-scss
+$columns: 16;
+
+// https://sass-lang.com/d/slash-div
+@for $i from 1 through $columns {
+    .col-#{$i} {
+        width: math.div(100, $columns) * $i * 1%;
+    }
 }

source/_assets/sass/_typography.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 body {
   font-family: $theme-font-family;
 }
@@ -6,4 +7,16 @@ h1 {
 }
 .lead {
   color: $theme-secondary;
+}
+
+$count: 0;
+@while $count <= 6 {
+    h#{$count} {
+        font-size: (math.div($theme-font-size-base, math.div($count, 5)));
+        line-height: 1.3;
+        margin-bottom: $gutter;
+        margin-top: 0;
+    }
+
+    $count: $count + 1;
 }

source/assets/build/css/main.css

@@ -1,3 +1,176 @@
-.theme-primary{background-color:#2ab2af}.theme-secondary{background-color:#c0df34}body{font-family:Karla,sans-serif}h1{color:#2ab2af}.lead{color:#c0df34}body{align-items:center;background:#e0eafc;background:linear-gradient(90deg,#cfdef3,#e0eafc);display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:16px}*{box-sizing:border-box}.row{clear:both;display:flex;flex-direction:column;width:100%}@media (min-width:768px){.row{flex-direction:row}}.container{margin:0 auto;max-width:1200px;width:100%}.col-8,.col-16{padding:32px;width:100%}@media (min-width:768px){.col-8{width:50%}}.card-conatiner{background:#fff}
+.theme-primary {
+  background-color: #2ab2af;
+}
 
-/*# sourceMappingURL=main.css.map*/
+.theme-secondary {
+  background-color: #c0df34;
+}
+
+body {
+  font-family: "Karla", sans-serif;
+}
+
+h1 {
+  color: #2ab2af;
+}
+
+.lead {
+  color: #c0df34;
+}
+
+h0 {
+  font-size: Infinitypx;
+  line-height: 1.3;
+  margin-bottom: 16px;
+  margin-top: 0;
+}
+
+h1 {
+  font-size: 80px;
+  line-height: 1.3;
+  margin-bottom: 16px;
+  margin-top: 0;
+}
+
+h2 {
+  font-size: 40px;
+  line-height: 1.3;
+  margin-bottom: 16px;
+  margin-top: 0;
+}
+
+h3 {
+  font-size: 26.6666666667px;
+  line-height: 1.3;
+  margin-bottom: 16px;
+  margin-top: 0;
+}
+
+h4 {
+  font-size: 20px;
+  line-height: 1.3;
+  margin-bottom: 16px;
+  margin-top: 0;
+}
+
+h5 {
+  font-size: 16px;
+  line-height: 1.3;
+  margin-bottom: 16px;
+  margin-top: 0;
+}
+
+h6 {
+  font-size: 13.3333333333px;
+  line-height: 1.3;
+  margin-bottom: 16px;
+  margin-top: 0;
+}
+
+body {
+  background: #E0EAFC;
+  /* fallback for old browsers */
+  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, #CFDEF3, #E0EAFC);
+  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  min-height: 100vh;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.row {
+  clear: both;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+@media (min-width: 768px) {
+  .row {
+    flex-direction: row;
+  }
+}
+
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+div[class^=col-] {
+  padding: 32px;
+}
+
+.col-1 {
+  width: 6.25%;
+}
+
+.col-2 {
+  width: 12.5%;
+}
+
+.col-3 {
+  width: 18.75%;
+}
+
+.col-4 {
+  width: 25%;
+}
+
+.col-5 {
+  width: 31.25%;
+}
+
+.col-6 {
+  width: 37.5%;
+}
+
+.col-7 {
+  width: 43.75%;
+}
+
+.col-8 {
+  width: 50%;
+}
+
+.col-9 {
+  width: 56.25%;
+}
+
+.col-10 {
+  width: 62.5%;
+}
+
+.col-11 {
+  width: 68.75%;
+}
+
+.col-12 {
+  width: 75%;
+}
+
+.col-13 {
+  width: 81.25%;
+}
+
+.col-14 {
+  width: 87.5%;
+}
+
+.col-15 {
+  width: 93.75%;
+}
+
+.col-16 {
+  width: 100%;
+}
+
+.card-conatiner {
+  background: #fff;
+}