minor imp

TODOs.md

@@ -0,0 +1,2 @@
+1. Handling Small Images
+2. Image centering and other utility classes

src/index.html

@@ -141,8 +141,13 @@
       <header class="cmp__article-header cmp__auto-layout">
         <div class="cmp__page-title cmp__home-heading">
           <div class="cmp__home-heading-container">
-            <span>Fibonacci</span>
-            <span>being pragmatic...</span>
+            <div class="cmp__home-logo">
+              <img class="cmp__blog-logo-pic" src="assets/logo-white.svg" alt="logo" style="width: 2.5rem;">
+            </div>
+            <div class="cmp__home-site-name">
+              <span>Fibonacci</span>
+              <span>being pragmatic...</span>
+            </div>
           </div>
           <div class="cmp__tear-paper">
             <img  src="assets/torn-paper1.png" style="width: 500px;" />
@@ -527,7 +532,7 @@ <h4>
         </div>
 
         <div class="cmp__newsletter-subscribe">
-          <div class="cmp__rounded-icon">
+          <div class="cmp__icon-container">
             <cmp-icon name="envelope-fill" size="32"></cmp-icon>
           </div>
           <p>

src/scss/base/_carousel.scss

@@ -3,6 +3,8 @@
 @use 'funcs' as fibFuncs;
 
 .cmp__carousel {
+  --cmp-connector-size: 8px;
+
   @include fibMixins.flex_init($hor: true, $column: true);
   @include fibMixins.noisy_bg(fibVars.$carousel-bg);
   position: relative;
@@ -51,6 +53,7 @@
       background-color: fibVars.$carousel-tab-bg;
       color: fibVars.$carousel-tab-color;
       border-bottom: none;
+      overflow: visible;
 
       &.cmp__carousel-tab-selected {
         background-color: fibVars.$carousel-tab-bg-active;
@@ -64,6 +67,18 @@
       &:focus-visible {
         outline-offset: -5px;
       }
+
+      &:not(:last-child)::after {
+        position: absolute;
+        right: -5px;
+        content: '';
+        width: var(--cmp-connector-size);
+        height: var(--cmp-connector-size);
+        border-radius: 50%;
+        background-color: fibVars.$gray;
+        border: solid 2px fibVars.$white;
+        z-index: 1;
+      }
     }
   }
 

src/scss/base/_icon.scss

@@ -55,9 +55,10 @@ cmp-icon {
   top: calc(-1 * #{fibFuncs.size(2)} / 2 - #{fibFuncs.size(-6)});
   padding: fibFuncs.size(-6);
   @include fibMixins.config_container(var(--cmp-bg-color-dark));
-  box-shadow: fibVars.$box-shadow;
   border-radius: 50%;
   color: lighten(fibVars.$medium-gray, 10%);
+  border: solid 4px fibVars.$white;
+  box-shadow: none;
 
   cmp-icon {
     width: fibFuncs.size(2);

src/scss/base/_media.scss

@@ -71,6 +71,10 @@
       }
     }
   }
+
+  .cmp__carousel {
+    --cmp-connector-size: 10px;
+  }
 }
 
 @media only screen and (min-width: fibVars.$desktop) {

src/scss/site/_newsletter.scss

@@ -14,14 +14,8 @@
   color: fibVars.$white;
   background: url('#{fibVars.$assets-path}/background.png'), radial-gradient($bg-color-1, $bg-color-2);
 
-  .cmp__rounded-icon {
-    position: absolute;
-    top: calc(-1 * #{fibVars.$lg-size});
-    left: fibVars.$md-size;
-    padding: fibFuncs.size(-6);
-    border-radius: 50%;
-    border: solid 4px fibVars.$white;
-    @include fibMixins.noisy_bg(fibSiteVars.$news-letter-bg);
+  .cmp__icon-container {
+    --cmp-bg-color-dark: #{fibSiteVars.$news-letter-bg};
 
     cmp-icon {
       color: fibVars.$white;

src/scss/site/pages/_home.scss

@@ -10,8 +10,8 @@
     @include fibMixins.flex_init($column: true, $center: true);
 
     .cmp__home-heading-container {
-      @include fibMixins.flex_init($inline: true, $center: true, $column: true);
-      padding: fibVars.$sm-size fibVars.$xxl-size;
+      @include fibMixins.flex_init($center: true);
+      padding: fibVars.$md-size fibVars.$lg-size;
 
       color: fibVars.$white;
       background: url('#{fibVars.$assets-path}/background.png'), radial-gradient(fibVars.$brand-color, darken(fibVars.$brand-color, 5%));
@@ -100,19 +100,27 @@
                       1.1% 5.5%
       );
 
-      span:first-child {
-        font: {
-          family: fibVars.$logo-font-family;
-          size: fibFuncs.size(8);
-        }
-        text-transform: uppercase;
-        letter-spacing: fibVars.$large-letter-spacing;
-        line-height: fibVars.$xs-line-height;
+      .cmp__home-logo {
+        margin-right: fibFuncs.size(-14);
       }
 
-      span:last-child {
-        font-size: fibVars.$xs-size;
-        margin: fibFuncs.size(-14) 0;
+      .cmp__home-site-name {
+        @include fibMixins.flex_init($inline: true, $center: true, $column: true);
+
+        span:first-child {
+          font: {
+            family: fibVars.$logo-font-family;
+            size: fibFuncs.size(8);
+          }
+          text-transform: uppercase;
+          letter-spacing: fibVars.$large-letter-spacing;
+          line-height: fibVars.$xs-line-height;
+        }
+
+        span:last-child {
+          font-size: fibVars.$xs-size;
+          margin: fibFuncs.size(-14) 0;
+        }
       }
     }