Merge pull request #1 from Kernel360/fix/base-design

fix: Modify title & banner image

_config.yml

@@ -24,7 +24,7 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 
-title: Kernel360 Tech Blog
+title: Kernel360 Crew Tech Blog
 #email: [email protected]
 author: Kernel360
 
@@ -40,7 +40,7 @@ author: Kernel360
 #   "Copyright (c) 2017-{currentYear} <a href="https://example.com">{author}</a>"
 #   "Copyright © 2017-2021 Foobar"
 #
-copyright: "Unpublished Work (cleft) 2017-{currentYear} {author}"
+copyright: "Unpublished Work (cleft) 2023-{currentYear} {author}"
 
 description: >- # this means to ignore newlines until "baseurl:"
   Write an awesome description for your new site here. You can edit this

_includes/views/site-brand.html

@@ -1,4 +1,28 @@
 <a class="site-brand-inner" rel="author" href="{{ "/" | relative_url }}">
-  <img class="site-favicon" title="{{ site.title | escape }}" src="{{ site.favicon }}" onerror="this.style.display='none'">
-  {{ site.title | escape }}
+  <div class="logo-container">
+    <img class="site-favicon" title="{{ site.title | escape }}" src="{{ site.favicon }}" onerror="this.style.display='none'">
+    <img style="position: relative; width: 250px;"  src='/assets/images/banners/kernel360-white.png' alt='Kernel360 Crew Tech Blog' />
+  </div>
 </a>
+
+<style>
+  .logo-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  }
+
+  .site-brand-inner {
+    text-decoration: none;
+    color: #333;
+  }
+
+  .site-favicon {
+    width: 50px;
+    margin-right: 10px;
+  }
+</style>

_sass/misc/theme-toggle.scss

@@ -4,15 +4,16 @@
   margin-top: 10px;
   margin-right: 60px;
   margin-left: auto;
-  transition: .3s cubic-bezier(.4,.03,0,1);
+  transition: 0.3s cubic-bezier(0.4, 0.03, 0, 1);
 
-  label, .toggle {
+  label,
+  .toggle {
     border-radius: 100px;
   }
 
   label {
     display: block;
-    background-color: rgba(120,120,120,.15);
+    background-color: rgba(120, 120, 120, 0.15);
     cursor: pointer;
   }
 
@@ -21,8 +22,8 @@
     width: 50%;
     height: 100%;
     background-color: #fff;
-    box-shadow: 0 2px 15px rgba(0,0,0,.15);
-    transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
+    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 
   .names {
@@ -39,7 +40,7 @@
   .names p {
     margin-bottom: 0;
     line-height: 24px;
-    opacity: .5;
+    opacity: 0.5;
   }
 
   label .light {
@@ -58,7 +59,7 @@
   /* Toggle */
   [type="checkbox"]:checked ~ label .toggle {
     transform: translateX(100%);
-    background-color: #34323D;
+    background-color: #34323d;
   }
 
   [type="checkbox"]:checked ~ label .dark {
@@ -78,7 +79,7 @@
     margin-right: 20px;
 
     .names {
-      font-size: .85em;
+      font-size: 0.85em;
     }
   }
 }

_sass/yat.scss

@@ -1,22 +1,29 @@
 @charset "utf-8";
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css");
 
 // Define defaults for each variable.
 
-$base-font-family: Helvetica Neue, Helvetica, Arial, sans-serif, !default;
+// $base-font-family: Helvetica Neue, Helvetica, Arial, sans-serif !default;
+$base-font-family: "pretendard";
 $base-font-size: 14px !default;
+$base-font-light-weight: 100 !default;
+$base-font-semi-light-weight: 200 !default;
 $base-font-weight: 400 !default;
-$small-font-size:  $base-font-size * 0.875 !default;
+$base-font-semi-bold-weight: 600 !default;
+$base-font-bold-weight: 700 !default;
+$base-font-max-bold-weight: 900 !default;
+$small-font-size: $base-font-size * 0.875 !default;
 $base-line-height: 1.6 !default;
 $base-transition-duration: 0.3s !default;
 
-$spacing-unit:     30px !default;
+$spacing-unit: 30px !default;
 
-$text-color:       #1d1d1f !default;
+$text-color: #1d1d1f !default;
 $background-color: #fff !default;
 
-$grey-color:       #777 !default;
+$grey-color: #777 !default;
 $grey-color-light: lighten($grey-color, 40%) !default;
-$grey-color-dark:  darken($grey-color, 25%) !default;
+$grey-color-dark: darken($grey-color, 25%) !default;
 
 $white-color: #fdfdfd !default;
 
@@ -32,13 +39,13 @@ $footer-background-color: darken($theme-color, 5%) !default;
 
 $banner-height: 640px !default;
 $banner-text-color: lighten($white-color, 0%) !default;
-$banner-background: rgba(0,0,0,0.8) !default;
+$banner-background: rgba(0, 0, 0, 0.8) !default;
 
 // Width of the content area
 // $content-width:    920px !default;
 
-$on-palm:          600px !default;
-$on-laptop:        800px !default;
+$on-palm: 600px !default;
+$on-laptop: 800px !default;
 
 // Use media queries like this:
 // @include media-query($on-palm) {
@@ -58,14 +65,6 @@ $on-laptop:        800px !default;
 }
 
 // Import partials.
-@import
-  "yat/base",
-  "yat/layout",
-  "yat/dark",
-  "misc/theme-toggle",
-  "misc/article-menu",
-  "misc/common-list",
-  "misc/google-translate",
-  "misc/gitment",
-  "misc/click-to-top"
-;
+@import "yat/base", "yat/layout", "yat/dark", "misc/theme-toggle",
+  "misc/article-menu", "misc/common-list", "misc/google-translate",
+  "misc/gitment", "misc/click-to-top";