jekyll-theme-satellite 1.1.2 → 1.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a500e53a72b35809de612f591c923834f7316197a310d89a005b25b4195ad96e
-  data.tar.gz: 6c0fa7b0991fcdcd1a426eef7b2c9426d82b4b467872e74a1a44b39d11bdee1e
+  metadata.gz: ed3af2bd8fdbb4d034ce1a6197b31bb7fd849025bb9d67851817337484526e14
+  data.tar.gz: db045ddb62c8dcafb88def655fc99e0493e7f180f26bec2d1dc2e77e2d1ef382
 SHA512:
-  metadata.gz: 3078471481814c98235d2ecb7800ddae35837d5555ec49738d89c310e163807ae99dafd5a0de534e1c3b5e83d829da89c091893e1678a0732c0b9b01761710cb
-  data.tar.gz: 39a32049e2333b2d15d75cac2a8061f27bf7c81313a52bed1e4e325038b8318a925742ddf1babf1a1808d3a82634408ab07e10aae8c3c195cbfb918368623ae0
+  metadata.gz: f04d0d13a909e8d31a4b41d64706f0d517252b7d1ca6aa9e4a7ea44a9e54357d6681e767c0b64872211d6d6809f39c7e71871418f998513b446a9306997c6d08
+  data.tar.gz: 2eaf0439be549aa6518b901fc765a61a7c775dc9b52e1cbe00d9a95e11e755a6db1eff31c55436c33c89ce7d2f21ca3de8558ea6c05d8dfb43b34322fc7d2760

data/README.md

@@ -4,7 +4,9 @@
 [![Jekyll](https://img.shields.io/badge/gem%20version-3.2.33-blue.svg)](gem)
 
 # Satellite🛰️ - Jekyll blog theme
-An emotional and adorable blog theme powered by ***Jekyll***. Live demo is available here: [https://byanko55.github.io](https://byanko55.github.io)
+An emotional and adorable blog theme powered by ***Jekyll***. 
+
+Live demo is available [here](https://byanko55.github.io)
 
 ![Demo Page](https://i.ibb.co/h1QF06V/demo.webp)
 
@@ -20,6 +22,8 @@ An emotional and adorable blog theme powered by ***Jekyll***. Live demo is avail
 <img src="https://i.ibb.co/WvyBzkL/Animation.gif" height="400px" align="center"/>
 </p>
 
+<br></br>
+
 ## Features
 
 * Comment System using *giscus*
@@ -35,15 +39,18 @@ An emotional and adorable blog theme powered by ***Jekyll***. Live demo is avail
 * Table of Contents
 * Visitor Counter (*goatcounter*)
 
+<br></br>
+
 ## Installation
 
 There are two ways to setup this theme:
+<br></br>
 
 ### Method 1: Build from source (Recommended)
-Fork this repository or download the [source](https://github.com/byanko55/jekyll-theme-satellite/releases) as a zip. 
+Fork [this repository](https://github.com/byanko55/jekyll-theme-satellite) or download the [source](https://github.com/byanko55/jekyll-theme-satellite/releases) as a zip. 
 
 If you use as destination a repository named USERNAME.github.io, then your url will be https://USERNAME.github.io/.
-
+<br></br>
 
 ### Method 2: Utilize Gem package
 Create a clean site directory (Follow the **Instruction 1~4** described [here](https://jekyllrb.com/docs/)).
@@ -52,6 +59,7 @@ The following materials are redundant, so remove them.
 * index.markdown
 * about.markdown
 * 404.html
+<br></br>
 
 Then, add this line to your Jekyll site's `Gemfile`:
 
@@ -60,6 +68,7 @@ gem "jekyll-theme-satellite"
 ```
 
 You need to replace the initial `_config.yml` file with the [prepared one](https://github.com/byanko55/jekyll-theme-satellite/blob/master/docs/_config.yml).
+<br></br>
 
 ### Modify your site setting
 
@@ -79,6 +88,7 @@ instagram_username: instagram
 linkedin_username: linkedin
 facebook_username: facebook
 ```
+<br></br>
 
 ### Run site locally
 
@@ -87,6 +97,7 @@ From the site root directory, install the dependencies:
 ```
 bundle install
 ```
+<br></br>
 
 Start a Jekyll service.
 
@@ -95,6 +106,7 @@ bundle exec jekyll serve
 ```
 
 Now open [http://localhost:4000](http://localhost:4000) in your browser.
+<br></br>
 
 ## Customizing
 
@@ -108,6 +120,7 @@ You can find useful manuals for customizing your site from the below table:
 
 ## Contribution
 If you would like to report a bug or request a new feature, please open [an issue](https://github.com/byanko55/jekyll-theme-satellite/issues) We are open to any kind of feedback or collaboration.
+<br></br>
 
 ## License
 © 2024 *Yankos*. This theme is available as open source under the terms of the [MIT License](https://opensource.org/license/mit/).

data/_includes/footer.html

@@ -1,6 +1,5 @@
-<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-<script src="{{ '/assets/js/background.js' }}"></script>
-<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+<script defer src="{{ '/assets/js/background.js' }}"></script>
+<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
 <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){ dataLayer.push(arguments); }

data/_includes/head.html

@@ -1,11 +1,46 @@
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<title>
+    {% if page.url == "/index.html" %}
+        Home
+    {% elsif page_type == "category" %}
+        {{ category_title }}
+    {% else %}
+        {{ page.title }}
+    {% endif %}
+</title>
 {% seo %}
 
 <link rel="shortcut icon" type="image/png" href="{{ site.logo_img }}">
-<link rel="preload" href="{{ '/assets/css/fonts.css' }}" as="style" onload="this.onload=null; this.rel='stylesheet'">
-<link rel="stylesheet" href="{{ '/assets/css/fonts.css' }}">
+<style>
+@font-face {
+    font-family: 'Nunito Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-display: optional;
+    src: local('Nunito Sans'),
+         url(/assets/fonts/NunitoSans-Regular.woff2) format("woff2");
+}
+
+@font-face {
+    font-family: 'Righteous';
+    font-style: normal;
+    font-weight: 600;
+    font-display: optional;
+    src: local('Righteous'),
+         url(/assets/fonts/Righteous-Regular.woff2) format("woff2");
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    font-display: optional;
+    src: local('Lato'),
+         url(/assets/fonts/Lato-Regular.woff2) format("woff2");
+}
+</style>
 
 <script src="{{ '/assets/js/fontfaceobserver.js' }}" type="text/javascript"></script>
 <script type="text/javascript">
@@ -22,12 +57,6 @@
     });
 </script>
 
-<title>
-    {% if page.title %}{{ page.title }}
-    {% else %}{{ site.title }}
-    {% endif %}
-</title>
-
 <meta
 name="description"
 content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">

data/_includes/pagination.html

@@ -5,7 +5,7 @@
     {% if page_level == 1 %}
         All Posts
     {% else %}
-        {{ page.path | remove: 'index.md' | split: "/" | last }}
+        {{ category_title }}
     {% endif %}
 </h1>
 <div id="category-list">

data/_includes/post.html

@@ -33,7 +33,7 @@
                         <span id="page-hits" usercode="{{ site.goatcounter_code }}">-</span>
                     </span>
                 {% endif %}
-                <a class="info-box" href="#giscus" data-scroll>
+                <a class="info-box" id="comments-counter">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4l0 0 0 0 0 0 0 0 .3-.3c.3-.3 .7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208z"/></svg>
                     <span id="num-comments">-</span>
                 </a>
@@ -61,5 +61,5 @@
     </div>
 </main>
 <div class="top-arrow">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" href="#" data-scroll><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
 </div>

data/_includes/search_event.html

@@ -1,8 +1,7 @@
 {%- assign page_list = site.pages 
     | where_exp: "item", "item.title != nil"
 -%}
-<script src="{{ '/assets/js/search.js' }}" type="text/javascript"></script>
-<script>
+<script defer>
     var posts = [];
 
     {% for page in page_list %}

data/_includes/sidebar.html

@@ -1,7 +1,10 @@
 <div class="sidebar sidebar-left">
     <div class="side-banner">
-        <h1 class="site-name">
-            <a href="/"><mark class="highlight">example.com</mark></a>
+        <h1 class="site-tab">
+            <a href="/" class="site-name">
+                <img src="{{ '/assets/img/icon/house.webp' }}" alt="">
+                <mark>example.com</mark>
+            </a>
             <button id="btn-brightness" aria-label="brightness-button">
                 <svg class='ico-dark' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>
                 <svg class='ico-light' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>
@@ -14,7 +17,7 @@
             </button>
         </h1>
         <a href="/" class="site-avatar" aria-label="site-avatar">
-            <img src="{{ '/assets/img/profile.jpg' }}" loading="lazy" alt="homepage" aria-label="homepage-button">
+            <img src="{{ site.profile_img }}" loading="lazy" alt="homepage" aria-label="homepage-button">
         </a>
     </div>
     <div class="side-info">

data/_layouts/page.html

@@ -4,6 +4,7 @@
     {%- assign page_level = page_tree.size -%}
     {% if page_tree.last == "index.md" %}
         {%- assign page_type = "category" -%}
+        {%- assign category_title = page.path | remove: 'index.md' | split: "/" | last -%}
     {% else %}
         {%- assign page_type = "post" -%}
     {% endif %}
@@ -74,13 +75,11 @@
     {% if page_type == "category" %}
         <script src="{{ '/assets/js/subject.js' }}"></script>
     {% else %}
-        <script src="{{ '/assets/js/tocbot.min.js' }}"></script>
-        <script src="{{ '/assets/js/sweet-scroll.min.js' }}"></script>
-        <script src="{{ '/assets/js/highlight.min.js' }}"></script>
-        <link id="highlight-default" rel="stylesheet" href="{{ '/assets/css/highlight-default.min.css' }}">
-        <link id="highlight-dark" rel="stylesheet" href="{{ '/assets/css/highlight-dark.min.css' }}">
         <script src="{{ '/assets/js/post.js' }}"></script>
+        <link rel="preload" href="{{ '/assets/css/highlight.min.css' }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
+        <noscript><link rel="stylesheet" href="{{ '/assets/css/highlight.min.css' }}"></noscript>
+        <script defer src="{{ '/assets/js/highlight.min.js' }}"></script>
     {% endif %}
-    {% include search_event.html %}
     <script src="{{ '/assets/js/common.js' }}"></script>
+    {% include search_event.html %}
 </html>

data/_sass/darkmode.scss

@@ -1,211 +1,204 @@
 body.dark-theme {
 
-background: #1E1E1F;
+background:#1E1E1F;
 
-a, span, p, h1, h2, h3, i, mark { color: #aaa; }
+a, span, p, h1, h2, h3, i, mark { color:#aaa; }
 
-svg { fill: #aaa; }
+svg { fill:#aaa; }
 
-#stars, #loading { background: #1E1E1F; }
+#stars, #loading { background:#1E1E1F; }
 
-#loading p { color: cadetblue; }
+#loading p { color:cadetblue; }
 
-.sidebar-left { background-color: #313132; }
+.sidebar-left { background-color:#313132; }
 
-.nav-item span { color: #ccc; }
+.nav-item span { color:#ccc; }
 
-.nav-lh svg { fill: goldenrod; }
+.nav-lh svg { fill:goldenrod; }
 
 .nav-list-expander {
-    &:hover { 
-        svg { fill: goldenrod; } 
-    }
+  &:hover { 
+    svg { fill:goldenrod; } 
+  }
 }
 
-.nav-list li > .nav-list { background: #464647; }
+.nav-list li > .nav-list { background:#464647; }
 
 .side-banner {
-    box-shadow: 0px 4px 8px 0 black;
+  box-shadow:0px 4px 8px 0 black;
 
-    button {
-        background-color: #313132;
+  button {
+    background-color:#313132;
 
-        &:hover { background-color: #1E1E1F; }
-    }
+    &:hover { background-color:#1E1E1F; }
+  }
 
-    svg { fill: $color-aqua; }
+  svg { fill:$color-aqua; }
 }
 
 #contact{
-    ul>li>a {
-        &:hover{
-            svg { fill: indianred; }
-        }
+  ul>li>a {
+    &:hover{
+      svg { fill:indianred; }
     }
+  }
 
-    a { color: mediumseagreen; }
+  a { color:mediumseagreen; }
 }
 
 #post {
-    .inner-header { background: #464647; }
-
-    .inner-content { background: #313132; }
+  .inner-header { background:#464647; }
+  .inner-content { background:#313132; }
 }
 
-.transbox { background-color: rgba(64, 64, 64, 0.6); }
+.transbox { background-color:rgba(64, 64, 64, 0.6); }
 
 .post-title,
 .info-box * {
-    color: #eee;
-    fill : #eee;
-    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
+  color:#eee;
+  fill :#eee;
+  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6));
 }
 
 main {
-    h1, h2, h3, p { color: #aaa; }
-
-    strong { color: lightgrey; }
-
-    a { 
-        color: dodgerblue; 
-
-        &::before {
-            color: mediumseagreen;
-            text-decoration-color: mediumseagreen;
-        }
-    }
-
-    code,
-    .highlighter-rouge .highlight {
-        border: 1px solid dimgrey;
-        background-color: #363a41;
-        color: goldenrod;
-    }
-
-    blockquote {
-        background: #1E1E1F;
-        border-left: 4px solid #464647;
-    }
-
-    table { background-color: #464647; }
+  h1, h2, h3, p { color:#aaa; }
 
-    table, head { box-shadow: 0 0 32px 0 rgba(128,128,128,.15); }
+  strong { color:lightgrey; }
 
-    th, td { border: 2px solid #3c3c3d; }
+  a { 
+    color:dodgerblue; 
 
-    thead th, 
-    tbody td {
-        color: #aaa;
-    }
-
-    hr { background: cadetblue; }
-
-    img + em,
-    li {
-        color: #aaa;
+    &::before {
+      color:mediumseagreen;
+      text-decoration-color:mediumseagreen;
     }
+  }
+
+  code,
+  .highlighter-rouge .highlight {
+    border:1px solid dimgrey;
+    background-color:#363a41;
+    color:goldenrod;
+  }
+
+  blockquote {
+    background:#1E1E1F;
+    border-left:4px solid #464647;
+  }
+
+  table { background-color:#464647; }
+  table, head { box-shadow:0 0 32px 0 rgba(128,128,128,.15); }
+
+  th, td { border:2px solid #3c3c3d; }
+  thead th, 
+  tbody td {
+    color:#aaa;
+  }
+
+  hr { background:cadetblue; }
+
+  img + em,
+  li {
+    color:#aaa;
+  }
 }
 
-#related-box span { color: darkgoldenrod; }
-
-#related-posts .title { color: #ccc; }
+#related-box span { color:darkgoldenrod; }
+#related-posts .title { color:#ccc; }
+#related-posts li:hover { box-shadow:8px 8px 16px -4px rgba(255, 255, 255, .2); }
 
-#related-posts li:hover { box-shadow: 8px 8px 16px -4px rgba(255, 255, 255, .2); }
-
-.category-tree a { color: goldenrod; }
+.category-tree a { color:goldenrod; }
 
 .category-header {
-    color: cadetblue;
-    text-decoration: underline slategrey;
+  color:cadetblue;
+  text-decoration:underline slategrey;
 }
 
 #article_content {
-    border-bottom: 2px solid #464647;
-
-    .box_contents { background-image: none; }
-
-    .txt_post { color: #aaa; }
-
-    .title_post { color: darkgoldenrod; }
+  border-bottom:2px solid #464647;
 
-    .date { color: #ccc; }
+  .box_contents { background-image:none; }
 
-    .category { color: mediumseagreen; }
+  .txt_post { color:#aaa; }
+  .title_post { color:darkgoldenrod; }
+  .date { color:#ccc; }
+  .category { color:mediumseagreen; }
 }
 
 .pagination-number,
 .pagination-button {
-    color: #ccc;
+  color:#ccc;
 }
-
 .pagination-number:hover,
 .pagination-button:not(.disabled):hover {
-    background: grey;
+  background:grey;
 }
 
 #search {
-    background: rgba(64, 64, 64, 0.875);
+  background:rgba(64, 64, 64, 0.875);
 
-    ul {
-        border-bottom: 2px solid #464647;
-        box-shadow: 0px 4px 8px 0 #1E1E1F;
+  ul {
+    border-bottom:2px solid #464647;
+    box-shadow:0px 4px 8px 0 #1E1E1F;
 
-        svg { background-color: #ccc;  }
+    svg { background-color:#ccc; }
 
-        th { color: #ccc; }
+    th { color:#ccc; }
 
-        &::-webkit-scrollbar {
-            width: 8px;
-            background-color: grey;
-        }
+    &::-webkit-scrollbar {
+      width:8px;
+      background-color:grey;
     }
+  }
 
-    input, input::placeholder { color: #ccc; }
+  input, input::placeholder { color:#ccc; }
 }
 
-.search-box h1 { color: #fff; }
+.search-box h1 { color:#fff; }
 
 .input-box {
-    &:before { background: #5a5a5b; }
-
-    &:after { opacity: 0.5; }
+  &:before { background:#5a5a5b; }
+  &:after { opacity:0.5; }
 }
 
 .result-item{
-    border: 1px solid #464647;
-    background: #313132;
+  border:1px solid #464647;
+  background:#313132;
 
-    &:hover { background: $color-wenge; }
+  &:hover { background:$color-wenge; }
 }
 
-.toc-header { color: darkgoldenrod; }
+.toc-header { color:darkgoldenrod; }
 
 @include mq(tablet){
-    #article_content .box_contents { background-color: rgba(70, 70, 70, 0.95); }
 
-    .post-title { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
+#article_content .box_contents { background-color:rgba(70, 70, 70, 0.95); }
+
+.post-title { text-shadow:0 1px 2px rgba(0,0,0,0.6); }
+
 }
 
 @include mq(desktop) {
-    .sidebar-left { background: none; }
 
-    .site-name { box-shadow: none; }
+.sidebar-left { background:none; }
 
-    .nav-lh {
-        &:before { background: rgba(#464647, 1); }
+.site-tab { box-shadow:none; }
 
-        &:hover:before { background: rgba(#464647, .75); }
-    }
+.nav-lh {
+  &:before { background:rgba(#464647, 1); }
+  &:hover:before { background:rgba(#464647, .75); }
+}
 
-    .nav-list li > .nav-list { background: none; }
+.nav-list li > .nav-list { background:none; }
 
-    #contact{
-        hr { border-top: 1px solid dimgrey; }
-    
-        h3 { background-color: #1E1E1F; }
-    }
+#contact{
+  hr { border-top:1px solid dimgrey; }
+
+  h3 { background-color:#1E1E1F; }
+}
+
+#post .inner-content { box-shadow:none; }
 
-    #post .inner-content { box-shadow: none; }
 }
 
 }