jekyll-theme-fica 0.2.2 → 0.3.0

data/_posts/2023-04-24-Fica-Customization.md

@@ -0,0 +1,43 @@
+---
+layout: post
+site-title: Fica Customization
+author: Involts
+---
+
+The following shows how to customize the Theme.
+
+# Code infrastructure 
+
+## Customizing the Styles, Variables and Color Scheme:
+
+if you like to override the default styles of the theme, go to `_sass/Custom/Styles.scss`.
+
+if you like to override the default Variables of the theme, go to `_sass/Custom/Variable.scss`.
+
+if you like to change the colors of the Dark Theme in the site, go to `_sass/themes/dark theme/Dark_Theme.scss`.
+
+if you like to change the colors of the Light Theme in the site, go to `_sass/themes/dark theme/Light_Theme.scss`.
+
+Want to change [the themes?](#how-to-change-dark-mode-to-light-mode)
+## Customizing Google Analytics code
+
+Google has released several iterations to their Google Analytics code over the years since this theme was first created. If you would like to take advantage of the latest code, paste it into `_includes/Google-Analytics.html` in your Jekyll site.
+## Change dark mode to light mode
+
+# Layouts
+## Replace the logo on the header
+Replace logo.png at the top of your site.
+Make sure that the logo is 36x36 pixels to avoid overlapping the title.
+
+## Replace the picture at the homepage ?
+
+Replace `assets/img/homepage-pic.png`
+
+Replace:
+
+```diff
+- "themes/dark theme/theme-dark",
++ "themes/light theme/theme-light",
+```
+
+in `_sass/jekyll-theme-fica.scss`.

data/_sass/base.scss

@@ -32,6 +32,12 @@ figure {
   padding: 0;
 }
 
+* {
+  @include horizontal-scroll;
+  margin: 0;
+  padding: 0;
+}
+
 //  set `margin-bottom` to maintain vertical alignment
 h1,
 h2,
@@ -46,51 +52,23 @@ ul,
 ol,
 figure,
 %vertical-rhythm {
-  margin-bottom: $font-spacing - 15;
+  margin-bottom: 15px;
 }
 
-//
-// body
-//
 body {
-  font: $font-weight #{$font-size}/#{$line-height} $font-family;
+  @include body-medium;
+  // font: $font-weight #{$font-size}/#{$line-height} $font-family;
   color: $text-color;
   background-color: $primary_color;
   -webkit-text-size-adjust: 100%;
   font-kerning: normal;
-  display: flex;
   min-height: 100vh;
   flex-direction: column;
   overflow-wrap: break-word;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  &::-webkit-scrollbar {
-    height: 16px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: rgba(128, 134, 139, 0.2);
-    background-clip: padding-box;
-    border: 4px solid transparent;
-    border-radius: 10px;
-    box-sizing: border-box;
-
-    &:hover {
-      background: rgba(128, 134, 139, 0.4);
-      box-sizing: border-box;
-      background-clip: padding-box;
-    }
-  }
+  display: flex;
+  line-height: 40px;
 }
 
-//
-// line
-//
 hr {
   margin-top: $font-spacing;
   margin-bottom: $font-spacing;
@@ -99,6 +77,9 @@ hr {
   border-radius: 7px;
 }
 
+p {
+  line-height: 26px;
+}
 //
 // wrapper
 //
@@ -109,20 +90,18 @@ hr {
 }
 
 .footer-wrapper {
-    padding: 0 $font-spacing - 5 0 $font-spacing - 5;
-    margin: 0 auto 0 auto;
-    max-width: 1168px;
-  }
-
-
-.post-wrapper {
   padding: 0 $font-spacing - 5 0 $font-spacing - 5;
   margin: 0 auto 0 auto;
-  max-width: $content-width + 100;
+  max-width: 1168px;
+}
+
+.post-content {
+  padding: 30px $font-spacing - 5 0 $font-spacing - 5;
+  margin: 0 auto 0 auto;
 
   @media screen and (min-width: 1111px) {
-    display: flex;
-    justify-content: center;
+    display: grid;
+    grid-template-columns: 1fr 15em;
   }
 }
 
@@ -140,33 +119,22 @@ hr {
 // Headers
 //
 h1 {
-  font-size: $font-size + 31;
-  line-height: 1.5;
+  @include headline-large;
 }
-
 h2 {
-  font-size: $font-size + 26;
-  line-height: 1.5;
+  @include headline-medium;
 }
-
 h3 {
-  font-size: $font-size + 21;
-  line-height: 1.5;
+  @include headline-small;
 }
-
 h4 {
-  font-size: $font-size + 16;
-  line-height: 1.5;
+  @include title-large;
 }
-
 h5 {
-  font-size: $font-size + 11;
-  line-height: 1.5;
+  @include title-medium;
 }
-
 h6 {
-  font-size: $font-size + 6;
-  line-height: 1.5;
+  @include title-small;
 }
 
 //
@@ -213,6 +181,7 @@ img {
 strong {
   font-weight: 900;
   font-size: 18px;
+  letter-spacing: 3px;
 }
 
 //
@@ -223,7 +192,7 @@ figure > img {
 }
 
 figcaption {
-  font-size: $small-font-size;
+  @include body-small;
 }
 
 //
@@ -233,7 +202,6 @@ blockquote {
   color: $blockquote-text-color;
   border-left: 4px solid $code-background-color;
   padding-left: $font-spacing / 2;
-  @include relative-font-size(1.125);
   font-style: italic;
 
   > :last-child {
@@ -251,28 +219,24 @@ blockquote {
 //
 pre,
 code {
-  font-size: inherit;
   border: 1px solid $code-background-color;
   border-radius: 4px;
   font-weight: 700;
   background-color: $code-background-color;
   color: $code-text-color;
-
-  @include horizontal-scroll();
-}
-
-code {
+  line-height: 1.5rem;
   padding: 1px 5px;
 
+  @include horizontal-scroll();
   a {
     color: inherit !important;
     border-bottom: none !important;
     pointer-events: none;
   }
 }
-
 pre {
   overflow-x: auto;
+  border: 0;
 
   > code {
     border: 0;
@@ -307,7 +271,7 @@ pre {
   pre {
     margin-bottom: 0;
     font-size: $code-font-family;
-    line-height: 1.5rem;
+    // line-height: 1.5rem;
     word-wrap: normal;
     /* Fixed Safari overflow-x */
   }
@@ -415,58 +379,59 @@ dl {
 }
 
 //
-// Error page
+// 404 page
 //
-.container {
+.container-404 {
   margin: 10px auto;
   max-width: 400px;
   text-align: center;
   background-color: $error-div-bg-color;
   border-radius: 20px;
   align-content: center;
-
-  > svg {
-    height: 220px;
-    width: 220px;
-    margin-left: 3px;
-    margin-right: 5px;
-    margin-top: 50px;
-    fill: $error-btn-svg-color;
-  }
-}
-
-.error-pagh {
-  > p {
-    margin-bottom: 0px;
-    line-height: 2;
-
-    &:last-child {
-      margin-bottom: 15px;
+  .prompt-404 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .paragraph-404 {
+      > p {
+        margin-bottom: 0px;
+        line-height: 2;
+
+        &:last-child {
+          margin-bottom: 15px;
+        }
+      }
     }
-  }
-}
 
-.btn-error {
-  display: inline-block;
-  padding: 17px 16px 16px;
-  color: #e7e7e7;
-  background-color: #2e353e;
-  transition: all 0.2s ease-in-out;
-  width: 92%;
-  border-bottom-left-radius: 20px;
-  border-bottom-right-radius: 20px;
-  height: 24px;
-  line-height: 1.5;
-
-  &,
-  &:visited {
-    color: $text-color;
-  }
-
-  &:hover {
-    color: $btn-text-hover-color;
-    text-decoration: none;
-    background-color: $btn-color-hover;
-    border-color: $btn-color-hover;
+    .btn-404 {
+      display: inline-block;
+      padding: 17px 16px 16px;
+      color: #e7e7e7;
+      background-color: #2e353e;
+      transition: all 0.2s ease-in-out;
+      width: 92%;
+      border-bottom-left-radius: 20px;
+      border-bottom-right-radius: 20px;
+
+      &,
+      &:visited {
+        color: $text-color;
+      }
+
+      &:hover {
+        color: $btn-text-hover-color;
+        text-decoration: none;
+        background-color: $btn-color-hover;
+        border-color: $btn-color-hover;
+      }
+    }
+    > svg {
+      height: 220px;
+      width: 220px;
+      margin-left: 3px;
+      margin-right: 5px;
+      margin-top: 50px;
+      fill: $error-btn-svg-color;
+    }
   }
 }

data/_sass/jekyll-theme-fica.scss

@@ -1 +1 @@
-@import "layouts/variable", "colors/dark-theme/theme-dark", "layouts/Google-fonts", "base", "layouts/layout","layouts/component"
+@import "layouts/variable", "colors/dark-theme/theme-dark", "layouts/Google-fonts", "layouts/typography.scss", "base", "layouts/layout","layouts/component"

data/_sass/layouts/Google-fonts.scss

@@ -1,139 +1,104 @@
-@mixin material-icons {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    /* Preferred icon size */
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-    user-select: none;
-    -moz-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -o-user-select: none;
-
-    /* Support for all WebKit browsers. */
-    -webkit-font-smoothing: antialiased;
-    /* Support for Safari and Chrome. */
-    text-rendering: optimizeLegibility;
-
-    /* Support for Firefox. */
-    -moz-osx-font-smoothing: grayscale;
-
-    /* Support for IE. */
-    font-feature-settings: 'liga';
-}
-
-.material-icons {
-    @include material-icons();
-}
-
-/* Rules for sizing the icon. */
-.material-icons.md-18 {
-    font-size: 18px;
-}
-
-.material-icons.md-24 {
-    font-size: 24px;
-}
-
-.material-icons.md-36 {
-    font-size: 36px;
-}
-
-.material-icons.md-48 {
-    font-size: 48px;
-}
-
-/* Rules for using icons as black on a light background. */
-.material-icons.md-dark {
-    color: rgba(0, 0, 0, 0.54);
-}
-
-.material-icons.md-dark.md-inactive {
-    color: rgba(0, 0, 0, 0.26);
-}
-
-/* Rules for using icons as white on a dark background. */
-.material-icons.md-light {
-    color: rgba(255, 255, 255, 1);
-}
-
-.material-icons.md-light.md-inactive {
-    color: rgba(255, 255, 255, 0.3);
-}
-
-/* fallback */
-@font-face {
-    font-family: 'Material Icons';
-    font-style: normal;
-    font-weight: 400;
-    src: url(https://fonts.gstatic.com/s/materialicons/v128/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
-  }
-  /* fallback */
-  @font-face {
-    font-family: 'Material Icons Outlined';
-    font-style: normal;
-    font-weight: 400;
-    src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v103/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
-  }
-  /* fallback */
-  @font-face {
-    font-family: 'Material Icons Round';
-    font-style: normal;
-    font-weight: 400;
-    src: url(https://fonts.gstatic.com/s/materialiconsround/v102/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2) format('woff2');
-  }
-  
-  .material-icons {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-  }
-  
-  .material-icons-outlined {
-    font-family: 'Material Icons Outlined';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-  }
-  
-  .material-icons-round {
-    font-family: 'Material Icons Round';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
+/* Rules for sizing the icon. */
+.material-icons.md-18 {
+    font-size: 18px;
+}
+
+.material-icons.md-24 {
+    font-size: 24px;
+}
+
+.material-icons.md-36 {
+    font-size: 36px;
+}
+
+.material-icons.md-48 {
+    font-size: 48px;
+}
+
+/* Rules for using icons as black on a light background. */
+.material-icons.md-dark {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+.material-icons.md-dark.md-inactive {
+    color: rgba(0, 0, 0, 0.26);
+}
+
+/* Rules for using icons as white on a dark background. */
+.material-icons.md-light {
+    color: rgba(255, 255, 255, 1);
+}
+
+.material-icons.md-light.md-inactive {
+    color: rgba(255, 255, 255, 0.3);
+}
+
+/* fallback */
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v128/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+  }
+  /* fallback */
+  @font-face {
+    font-family: 'Material Icons Outlined';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v103/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
+  }
+  /* fallback */
+  @font-face {
+    font-family: 'Material Icons Round';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialiconsround/v102/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2) format('woff2');
+  }
+  
+  .material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+  
+  .material-icons-outlined {
+    font-family: 'Material Icons Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+  
+  .material-icons-round {
+    font-family: 'Material Icons Round';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
   }