jekyll-theme-fica 0.2.2 → 0.3.1

data/_posts/2022-04-6-Creating-a-new-post.md

@@ -1,136 +1,144 @@
----
-layout: post
-site-title: Creating a new post
-author: Involts
----
-
-This post shows how to create a new post on the `Fica` Theme. Even if you have previous experience with Jekyll, this article is worth reading, because many features require specific variables to be set.
-
-# Creating a File and Naming a post
-
-Create a new file named `YYY-MM-DD-TITLE.EXTENSION` (.EXTENSION may be `.md` or `.markdown`) and put it on the `_posts` folder.
-
-# Font Matter
-
-Basic Font Matter
-
-|             Font Matter               |  Description
-| --------------------------------------|------------------
-| `layouts`                             |  This specifies the layout file to use. It may be `home` layout for the homepage, `post` layout for post, `default` or `page` layout/s the original look of the site, and `post-home` layout for homepage of the post/s. 
-| `site-title`                          | This displays the website title. **EXCEPT THE HOMEPAGE**
-| `author`                              |  This is optional for the post because the authour is set on the `_config.yml` file.
-| `home`                                | **This is only for the homepage** It displays the website title so that you will not write the website title.
-| `pin`                              | This pins the post to the top of the post-home layout.
-
-Examples:
-
-- Homepage:
-
-```yml
----
-layout: home
-home: true
----
-
-```
-
-- About
-
-```yml
----
-layout: default
-site-title: About
-permalink: /About/
----
-
-```
-
-- Post Home
-
-```yml
----
-layout: post_home
-site-title: post
----
-```
-
-- Post
-
-```yml
----
-layout: post
-site-title: Creating a new post
-author: Involts
----
-```
-
-if it is pinned:
-```yml
----
-layout: post
-site-title: Creating a new post
-author: Involts
-pin: true
----
-```
-
-
-# Syntax
-
-- Inline Code
-
-```
-`inline code part`
-```
-
-- Code Block
-
-Markdown symbol ``` can easily create a code block as follows:
-
-```
-Plaintext Code Snippet.
-```
-### Specifying Language in Code Block
-
-  Markdown symbol ```{language} can easily create a code block as follows:
-
-````yml
-```yml
-    title: Fica Theme
-```
-````
-
-### Line Number
-
- All languages except `plaintext`, `console`, and `terminal` will display line numbers. When you want to hide the line number of a code block, add the class `nolineno` to it:
-
-````markdown
-```bash
-echo 'No more line numbers'
-```
-{: .nolineno }
-````
-
-#### Liquid Codes
-
-If you want to display the `Liquid` snippet, surround the liquid code with `{% raw %}` and `{% endraw %}`:
-
-````markdown
-{% raw %}
-```liquid
-{% if product.title contains 'Pack' %}
-  This product's title contains the word Pack.
-{% endif %}
-```
-{% endraw %}
-````
-
-Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
-
-## Learn More
-
-For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
-
-
-
-
+---
+layout: post
+site-title: Creating a new post
+author: Aziel Lance
+---
+
+This post shows how to create a new post on the `Fica` Theme. Even if you have previous experience with Jekyll, this article is worth reading, because many features require specific variables to be set.
+
+# Creating a File and Naming a post
+
+Create a new file named `YYY-MM-DD-TITLE.EXTENSION` (.EXTENSION may be `.md` or `.markdown`) and put it on the `_posts` folder.
+
+# Font Matter
+
+Basic Font Matter
+
+|             Font Matter               |  Description
+| --------------------------------------|------------------
+| `layouts`                             |  This specifies the layout file to use. It may be `home` layout for the homepage, `post` layout for post, `default` or `page` layout/s the original look of the site, and `post-home` layout for homepage of the post/s. 
+| `site-title`                          | This displays the website title. **EXCEPT THE HOMEPAGE**
+| `author`                              |  This is optional for the post because the authour is set on the `_config.yml` file.
+| `home`                                | **This is only for the homepage** It displays the website title so that you will not write the website title.
+| `pin`                              | This pins the post to the top of the post-home layout.
+| `post_toc: false`                           | This hides the TOC(Table of Contents) in post
+
+Examples:
+
+- Homepage:
+
+```yml
+---
+layout: home
+home: true
+---
+
+```
+
+- About
+
+```yml
+---
+layout: default
+site-title: About
+permalink: /About/
+---
+
+```
+
+- Post List
+
+```yml
+---
+layout: post_list
+site-title: post
+---
+```
+
+- Post
+
+```yml
+---
+layout: post
+site-title: Creating a new post
+author: aeziyehl
+---
+```
+
+if you want to pin the post:
+```yml
+---
+layout: post
+site-title: Creating a new post
+author: aeziyehl
+pin: true
+---
+```
+
+if you want to remove TOC in post
+```yml
+layout: post
+site-title: Creating a new post
+author: aeziyehl
+post_toc: false
+```
+
+# Syntax
+
+- Inline Code
+
+```
+`inline code part`
+```
+
+- Code Block
+
+Markdown symbol ``` can easily create a code block as follows:
+
+```
+Plaintext Code Snippet.
+```
+### Specifying Language in Code Block
+
+  Markdown symbol ```{language} can easily create a code block as follows:
+
+````yml
+```yml
+    title: Fica Theme
+```
+````
+
+### Line Number
+
+ All languages except `plaintext`, `console`, and `terminal` will display line numbers. When you want to hide the line number of a code block, add the class `nolineno` to it:
+
+````markdown
+```bash
+echo 'No more line numbers'
+```
+{: .nolineno }
+````
+
+#### Liquid Codes
+
+If you want to display the `Liquid` snippet, surround the liquid code with `{% raw %}` and `{% endraw %}`:
+
+````markdown
+{% raw %}
+```liquid
+{% if product.title contains 'Pack' %}
+  This product's title contains the word Pack.
+{% endif %}
+```
+{% endraw %}
+````
+
+Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
+
+## Learn More
+
+For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
+
+
+
+

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

@@ -0,0 +1,43 @@
+---
+layout: post
+site-title: Fica Customization
+author: Aziel Lance
+---
+
+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"