home page improvements

VJAI · Feb 27, 2022 · a69e383 · a69e383
1 parent a16417f
commit a69e383
Show file tree

Hide file tree

Showing 16 changed files with 126 additions and 27 deletions.
diff --git a/src/404.html b/src/404.html
@@ -22,7 +22,7 @@
 
       <!-- Logo Component -->
       <a class="cmp__blog-logo" href="index.html">
-        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo" style="width: 2rem;">
+        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo">
         <span class="cmp__blog-name">fibonacci</span>
       </a>
 

diff --git a/src/about-us.html b/src/about-us.html
@@ -49,7 +49,7 @@
 
       <!-- Logo Component -->
       <a class="cmp__blog-logo" href="index.html">
-        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo" style="width: 2rem;">
+        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo">
         <span class="cmp__blog-name">fibonacci</span>
       </a>
 

diff --git a/src/about.html b/src/about.html
@@ -49,7 +49,7 @@
 
 			<!-- Logo Component -->
 			<a class="cmp__blog-logo" href="index.html">
-				<img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo" style="width: 2rem;">
+				<img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo">
 				<span class="cmp__blog-name">fibonacci</span>
 			</a>
 

diff --git a/src/contact.html b/src/contact.html
@@ -49,7 +49,7 @@
 
 			<!-- Logo Component -->
 			<a class="cmp__blog-logo" href="index.html">
-				<img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo" style="width: 2rem;">
+				<img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo">
 				<span class="cmp__blog-name">fibonacci</span>
 			</a>
 

diff --git a/src/detail.html b/src/detail.html
@@ -50,7 +50,7 @@
 
       <!-- Logo Component -->
       <a class="cmp__blog-logo" href="index.html">
-        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo" style="width: 2rem;">
+        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo">
         <span class="cmp__blog-name">fibonacci</span>
       </a>
 

diff --git a/src/index.html b/src/index.html
@@ -49,7 +49,7 @@
 
       <!-- Logo Component -->
       <a class="cmp__blog-logo" href="index.html">
-        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo" style="width: 2rem;">
+        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo">
         <span class="cmp__blog-name">fibonacci</span>
       </a>
 
@@ -170,7 +170,7 @@ <h3>
 
                     <div class="cmp__author-mini">
                       <a href="about.html">
-                        <img src="blog_resources/triton_mini.png" alt="Author" style="width: 1rem" />
+                        <img src="blog_resources/triton_mini.png" alt="Author" />
                         <span>Triton Maxwell</span>
                       </a>
                     </div>
@@ -292,7 +292,13 @@ <h4>Code Tip</h4>
         </div>
 
         <div class="cmp__cartoon">
-          <h4>Cartoon For Fun</h4>
+          <div class="cmp__cartoon-title">
+            <h4>
+              <span class="cmp__cartoon-title-text">Cartoon For Fun</span>
+              <span class="cmp__nail"></span>
+              <span class="cmp__nail"></span>
+            </h4>
+          </div>
           <p>
             Purus euismod id, vehicula etiam, nunc auctor habitasse nullam arcu. Ultricies pellentesque consequat, cursus odio hac nam. Ante non lectus mattis, risus sollicitudin hac, tincidunt turpis sit elit class sodales ultrices faucibus.
           </p>
@@ -301,7 +307,12 @@ <h4>Cartoon For Fun</h4>
           </figure>
         </div>
 
-        <div class="cmp__todo">
+        <div class="cmp__admin-statement">
+          <div class="cmp__author">
+            <a href="about.html">
+              <img src="blog_resources/triton_mini.png" alt="Author" />
+            </a>
+          </div>
           <p>
             &ldquo;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
             totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt

diff --git a/src/no-results.html b/src/no-results.html
@@ -22,7 +22,7 @@
 
       <!-- Logo Component -->
       <a class="cmp__blog-logo" href="index.html">
-        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo" style="width: 2rem;">
+        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo">
         <span class="cmp__blog-name">fibonacci</span>
       </a>
 

diff --git a/src/posts.html b/src/posts.html
@@ -49,7 +49,7 @@
 
       <!-- Logo Component -->
       <a class="cmp__blog-logo" href="index.html">
-        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo" style="width: 2rem;">
+        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo">
         <span class="cmp__blog-name">fibonacci</span>
       </a>
 

diff --git a/src/scss/base/_card.scss b/src/scss/base/_card.scss
@@ -48,7 +48,7 @@
       h5 {
         margin: 0;
         height: 100%;
-        @include fibMixins.flex_init($center: true);
+        @include fibMixins.flex_init($ver: true);
         font: {
           family: fibVars.$card-title-font-family;
           size: fibVars.$card-title-font-size;

diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss
@@ -526,6 +526,7 @@
   }
 }
 
+// Creates film strip like corners.
 @mixin film_strip($bg-color) {
   position: relative;
   padding: {
@@ -555,4 +556,23 @@
     -webkit-linear-gradient(left, $bg-color 10px, rgba(0, 0, 0, 0) 10px) repeat-x;
     background-size: 20px 100%;
   }
+}
+
+// Creates folded corner.
+// https://nicolasgallagher.com/pure-css-folded-corner-effect/demo/.
+@mixin folded_corner($bg-color, $size) {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-width: 0 $size $size 0;
+    border-style: solid;
+    border-color: #fff #fff $bg-color $bg-color;
+    background: $bg-color;
+    display: block;
+    width: 0;
+  }
 }
diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss
@@ -21,7 +21,6 @@ $black:                             rgb(0, 0, 0) !default;
 $brand-color:                       rgb(240, 72, 117) !default;
 $brand-bg:                          rgb(75, 85, 94) !default;
 $brand-gray:                        rgb(201, 195, 198) !default;
-$brand-cool:                        rgba(212, 55, 98) !default;
 
 $brand-light:                       color.adjust($brand-color, $lightness: 15%) !default;
 $brand-dark:                        color.adjust($brand-color, $lightness: -15%) !default;
@@ -223,7 +222,7 @@ $card-header-bg:                    $dark-gray !default;
 $card-title-font-family:            $small-text-font-family !default;
 $card-title-font-size:              $xs-size !default;
 $card-title-color:                  $dim-gray !default;
-$card-title-bg-color:               $brand-cool !default;
+$card-title-bg-color:               $medium-gray !default;
 $card-footer-font-family:           $small-text-font-family !default;
 $card-footer-font-size:             $sm-size !default;
 $card-footer-color:                 $gray !default;

diff --git a/src/scss/site/_common.scss b/src/scss/site/_common.scss
@@ -30,7 +30,7 @@
     border-bottom: none;
 
     // Author Photo.
-    .cmp__article-author-pic {
+    img {
       border-radius: 50%;
       opacity: fibSiteVars.$article-author-pic-opacity;
       width: fibSiteVars.$author-pic-large-screen-width;
@@ -73,6 +73,7 @@
     img {
       border-radius: 50%;
       margin-right: fibFuncs.size(-14);
+      width: fibSiteVars.$author-pic-default-width;
     }
   }
 }

diff --git a/src/scss/site/_header.scss b/src/scss/site/_header.scss
@@ -39,6 +39,11 @@ a.cmp__blog-logo {
     }
   }
 
+  // Logo Image.
+  .cmp__blog-logo-pic {
+    width: fibFuncs.size(7);
+  }
+
   // Logo Name.
   .cmp__blog-name {
     position: relative;

diff --git a/src/scss/site/_variables.scss b/src/scss/site/_variables.scss
@@ -48,9 +48,9 @@ $article-author-role-font-color:    fibVars.$dim-gray !default;
 $article-author-left-offset:        fibFuncs.size(21, true) !default;
 $article-author-admin-badge-color:  fibVars.$yellow-green !default;
 $article-author-guest-badge-color:  fibVars.$gray !default;
-$author-pic-default-width:          30px !default;
+$author-pic-default-width:          30px !default; // TODO: Replace to rem.
 $author-pic-large-screen-width:     fibFuncs.size(15) !default;
-$comment-textarea-minheight:        75px !default;
+$comment-textarea-minheight:        75px !default; // TODO: Replace to rem.
 
 // Table Of Contents.
 $toc-bg-color:                      fibVars.$widget-bg-color !default;

diff --git a/src/scss/site/pages/_home.scss b/src/scss/site/pages/_home.scss
@@ -143,31 +143,75 @@
     }
   }
 
+  // TODO: Need to investigate why x-scrollbar not appears like in other pages.
+  .cmp__tip {
+    pre {
+      code {
+        white-space: pre-wrap;
+      }
+    }
+  }
+
   .cmp__cartoon {
     @include fibMixins.film_strip(rgba(230, 230, 230));
     margin-top: calc(#{fibVars.$xl-size} + 20px);
 
-    h4 {
+    .cmp__cartoon-title {
       text-align: center;
       margin-bottom: fibVars.$xl-size;
+      position: relative;
+
+      h4 {
+        @include fibMixins.create_double_side_arrowed_ribbon(fibVars.$xxl-size, fibVars.$white);
+        display: inline-flex;
+        padding: {
+          left: fibVars.$md-size;
+          right: fibVars.$md-size;
+        };
+
+        .cmp__nail {
+          position: absolute;
+          width: 5px;
+          height: 5px;
+          background-color: fibVars.$gray;
+          border-radius: 50%;
+          box-shadow: fibVars.$box-shadow;
+          z-index: 1;
+          left: -5px;
+        }
+
+        .cmp__nail:nth-child(2) {
+          left: auto;
+          right: -5px;
+        }
+      }
     }
 
     p {
-      max-width: fibVars.$container-width;
-      margin-left: auto;
-      margin-right: auto;
+      margin-left: fibVars.$lg-size;
+      margin-right: fibVars.$lg-size;
       color: fibVars.$gray;
     }
   }
 
-  .cmp__todo {
+  .cmp__admin-statement {
+    position: relative;
     margin-top: fibFuncs.size(18);
-    margin-left: auto;
-    margin-right: auto;
-    width: 75%;
     padding: fibVars.$xl-size;
     color: fibVars.$medium-gray;
-    @include fibMixins.noisy_bg(fibVars.$success);
+    background: url('#{fibVars.$assets-path}/background.png'), linear-gradient(45deg, fibVars.$success, darken(rgb(241, 247, 234, 0.7), 5%));
+
+    .cmp__author {
+      position: absolute;
+      top: calc(-1 * #{fibVars.$lg-size});
+      left: fibVars.$md-size;
+      border-radius: 50%;
+      border: solid 4px fibVars.$white;
+
+      img {
+        width: fibFuncs.size(10);
+      }
+    }
 
     p {
       font: {
@@ -196,6 +240,25 @@
         display: block;
       }
     }
+
+    .cmp__admin-statement {
+      margin-left: auto;
+      margin-right: auto;
+      width: 75%;    border-radius: fibVars.$border-radius;
+      @include fibMixins.folded_corner(rgb(177, 191, 159), fibVars.$xl-size);
+    }
+  }
+}
+
+@media only screen and (min-width: fibVars.$breakpoint1) {
+
+  #cmp__blog-home {
+    .cmp__cartoon {
+      p {
+        max-width: fibVars.$container-width;
+        @include fibMixins.horizontal-center;
+      }
+    }
   }
 }
 

diff --git a/src/search-results.html b/src/search-results.html
@@ -22,7 +22,7 @@
 
       <!-- Logo Component -->
       <a class="cmp__blog-logo" href="index.html">
-        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo" style="width: 2rem;">
+        <img class="cmp__blog-logo-pic" src="assets/logo.svg" alt="logo">
         <span class="cmp__blog-name">fibonacci</span>
       </a>