rubiku-theme 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 38853f168059ffd45e5185f34f503207ba933374e6071585bc45b65bbf2f872b
-  data.tar.gz: 1ebf9001221b4cf35b5343431f9197ce67e7611e5151ab4560f67331bd112a6c
+  metadata.gz: 63293c073c48b2edf3d3bf6cc561719c2b303e2e38151ae96ca8833512805858
+  data.tar.gz: 43bb0474bfe89bb0a761090a5ae0e312377941bb950cff6e24e51cec95294157
 SHA512:
-  metadata.gz: 0106e3440f2408545809010536808e68f4bf433be31720b6697ae9264594e9196fc89341b703cba40c568fe7db3fa8fa0a8f722f5460ad38d210549bd57d502f
-  data.tar.gz: 03cea947795ea5f56bdcf6599759c7d730e3a55eb3cadf8e614bbbc3d4667f8d54c35472c76262f97b1b1263eab27c8cf02282478efc5cc5adc480af44d96a51
+  metadata.gz: 2904015814b4bff2cca8e375fa0d16a04daccf212ded6cc247ead03865ab05b0415d1dd42b50ddb3c1f17cf052c95cfd5d62fdd5dce49519efd58d4e50ed68fa
+  data.tar.gz: aa2c78c79252fa926d5696be7b88ef413070e18e1bc0c81dfeed19f1af1eb0f3cdbf4d1f3b6be1e02b54c1eed17578371ee0a7ac07c5fc1e71ba9a85ac7fa9fd

data/README.md

@@ -6,7 +6,8 @@ A blog website built using Jekyll, a Ruby bundle for static side generators. I c
 # Features
 - Devlog
 - Tutorial
-- Comment (on-going)
+- Comment
+- RSS (on-going)
 
 # Usage
 1. At the top of this page, select **Use this template** > **Create a new repository** to clone the template to your account.

data/_includes/head.html

@@ -8,7 +8,7 @@
     <meta name="author" content="Rubiriku">
     <meta property="og:tittle" content="Blog Jekyll">
     <meta property="og:description" content="blog website untuk devlog/tutorial buatan Rubikuriku">
-    <meta property="og:image" content="/assets/uploads/Screenshot 2025-08-17 154328.png">
+    <meta property="og:image" content="/assets/uploads/og_img.png">
     <meta property="og:url" content="https://rubiku-theme.netlify.app/">
     <meta property="og:type" content="website - https://rubiku-theme.netlify.app/">
     <meta name="twitter:card" content="summary_large_image" />

data/_layouts/author.html

@@ -6,19 +6,18 @@ layout: default
 <section class="text_left">
     <h2>{{ page.position }}</h2>
     
-    {{ content }}
+    <div class="text_basic" style="margin: auto 0;">
+        {{ content }}
+    </div>
     
     <h2>Posts</h2>
 </section>
-<ul class="parent_card-author">
+<ul class="parent_card-author" style="padding-left: 30px;">
     {% assign filtered_posts = site.posts | where: 'author', page.name %} {% for post in
     filtered_posts %}
     <div class="card">
         <a href="{{ site.baseurl }}{{ post.url }}">
             {{ post.title }} 
-            {% if post.wakatime %}
-                <img style="vertical-align: middle" src="{{ post.wakatime }}" alt="wakatime badge">
-            {% endif %}
         </a>
     </div>
     {% endfor %}

data/_layouts/post.html

@@ -1,27 +1,35 @@
 --- 
 layout: default 
 ---
+<div class="blog_main">
+    <div class="mainTitle_blog">
+        <h1 class="title_blog">{{ page.title }}</h1>
+        <p class="subTitle_blog">
+            {{ page.date | date_to_string }} {% assign author = site.authors | where: 'name', page.author |
+            first %} {% if author %} - <a class="text_link" href="{{ author.url }}">{{ author.display_name }}</a>
+            {% endif %}
+        </p>
+    </div>
+    
+    <div class="text_basic">
+        {{ content }}
+    </div>
 
-<h1 class="title_page">{{ page.title }}</h1>
-
-<p class="text_left">
-    {{ page.date | date_to_string }} {% assign author = site.authors | where: 'name', page.author |
-    first %} {% if author %} - <a class="text_link" href="{{ author.url }}">{{ author.display_name }}</a>
-    {% endif %}
-</p>
-
-<div class="text_left">
-    {% if page.github %}
-    <img class="vertical-align: baseline" src="https://unpkg.com/lucide-static/icons/link.svg" height="15px" width="15px"/>
-    <a href="{{ page.github }}">Reporisitory Github</a>
-    {% endif %}
-    <a href="{{ page.github | default:'#' }}">
-        {% if page.wakatime %}
-        <img style="vertical-align: middle" src="{{ page.wakatime }}" alt="wakatime badge">
-        {% endif %}
-    </a>
-</div>
-
-<div class="text_basic">
-    {{ content }}
+    <div class="comment">
+        <script src="https://giscus.app/client.js"
+            data-repo="kyubiner/rubiku-theme"
+            data-repo-id="R_kgDOOlWqnw"
+            data-category="General"
+            data-category-id="DIC_kwDOOlWqn84CxDZE"
+            data-mapping="pathname"
+            data-strict="0"
+            data-reactions-enabled="1"
+            data-emit-metadata="0"
+            data-input-position="bottom"
+            data-theme="gruvbox_light"
+            data-lang="en"
+            crossorigin="anonymous"
+            async>
+        </script>
+    </div>
 </div>

data/_sass/author.scss

@@ -16,7 +16,7 @@
         
         a {
             text-decoration: none;
-            color: #8D0B41;
+            color: var(--accent);
             display: flex; 
             align-items: center;
             justify-content: space-between;

data/_sass/base.scss

@@ -1,41 +1,78 @@
-@font-face {
-    font-family: pixelFont;
-    src: url("/assets/font/HomeVideo-BLG6G.ttf");
+:root {
+    --content-size: 720px;
+    --bg: #FAF3DD;
+    --bg-secondary: #F5E9D0;
+    --text: #2B1E1E;
+    --heading: #800000;
+    --accent: #A63C3C;
+    --border: #CBB69D;
 }
-
-@keyframes fadeOut {
-    0% {opacity: 1;}
-    100% {opacity: 0;}
+[data-theme="dark"] {
+    --bg: #1E0E0E;
+    --bg-secondary: #2C1A1A;
+    --text: #F5E8C7;
+    --heading: #E09C9C;
+    --accent: #D46A6A;
+    --border: #5C4040;
 }
 
-@keyframes fadeIn {
-    0% {opacity: 0;}
-    100% {opacity: 1;}
-}
+// vanilla Section
 
 body {
-    background-color: #FFF8E6;
+    background-color: var(--bg);
     font-family: pixelFont;
     margin: 0;
-    color: #8D0B41;
+    padding: 0;
+    color: var(--text);
 
-    font-family:'Franklin Gothic Medium',
-    'Arial Narrow',
+    font-family: "Franklin Gothic Medium",
+    "Arial Narrow",
     Arial,
     sans-serif main {
         margin-left: 1.5vw;
     }
 
+    img {
+        max-width: 90%;
+        height: auto;
+        display: block;
+        margin: auto auto;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+}
+
+    p {
+        font-size: 1rem;
+        line-height: 1.55;
+        margin: 1px 0;
+        color: var(--text);
+    }
+
+    h4 {
+        margin: 7px 0;
+        color: var(--heading);
+    }
+    
+    h2{
+        color: var(--heading);
+    }
+
+    table,
+    th,
+    td {
+        border: solid;
+    }
 
+    // class Section
 
     .text_link {
         text-decoration: none;
-        color: #8D0B41;
+        color: var(--accent);
         transition: 300ms;
         border-bottom: none;
 
         &:hover {
-            border-bottom: solid #8D0B41;
+            border-bottom: solid #a74a4a;
             transition: 300ms;
         }
     }
@@ -43,11 +80,12 @@ body {
     .title_page {
         position: relative;
         margin: 1em auto 1.5em 1em;
+        color: var(--heading);
 
         &::before {
             content: "> ";
         }
-        
+
         &::before,
         &::after {
             transition: opacity 0.3s ease;
@@ -57,19 +95,19 @@ body {
             content: "> ";
             animation: fadeOut 1s infinite alternate;
             -webkit-animation: fadeOut 1s infinite alternate;
-}
+        }
 
         &:hover::after {
             content: " ";
             animation: fadeIn 1s infinite alternate;
             -webkit-animation: fadeIn 1s infinite alternate;
-}
+        }
     }
 
-
     .text_basic {
         margin: 0 3rem;
         font-size: 16px;
+        font-family: pixelFontBasic;
     }
 
     .text_left {
@@ -78,6 +116,12 @@ body {
     }
 }
 
+.padding_card {
+    padding: 0 1rem;
+}
+
+// @ Section
+
 @mixin card_base {
     margin: 0;
     padding: 0.5rem;
@@ -85,46 +129,30 @@ body {
     border: solid;
     max-width: 60vw;
     margin-bottom: 1rem;
-    background-color: #D39D55;
-    color: #8D0B41;
+    background-color: var(--bg);
+    color: var(--border);
     box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 1);
     scale: 100%;
     transition: 300ms;
     border-radius: 5px;
-    
+
     &:hover {
         scale: 101%;
         transition: 300ms;
     }
 }
 
-.padding_card {
-    padding-left: 1.5rem;
-}
-
-p {
-    font-size: 1rem;
-    line-height: 1.6;
-    margin-bottom: 1em;
-}
-
-table,
-th,
-td {
-    border: solid;
-}
-
 @media (max-width: 768px) {
     body {
         margin-bottom: 8.5rem;
 
         main {
-            margin-left: 2vw;
+            justify-content: center;
         }
 
         .title_page {
             text-align: center;
-            margin: 1.5rem;
+            margin-left: 0;
 
             &:hover::before,
             &:hover::after {
@@ -145,4 +173,34 @@ td {
             margin-left: 2rem;
         }
     }
+}
+
+@font-face {
+    font-family: pixelFont;
+    src: url("/assets/font/HomeVideo-BLG6G.ttf");
+}
+
+@font-face {
+    font-family: pixelFontBasic;
+    src: url("/assets/font/VCR_OSD_MONO.ttf");
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
 }

data/_sass/blog.scss

@@ -0,0 +1,67 @@
+@use "base.scss" as base;
+
+.parent_card-blog {
+    padding-left: 0;
+    display: grid;
+    grid-template-columns: 27vw 27vw 27vw;
+    gap: 4vw;
+    justify-content: center;
+
+    .card_blog {
+        color: var(--text);
+        @include base.card_base;
+        text-decoration: none;
+        a {
+            text-decoration: none;
+            color: var(--accent);
+            }
+        h3 {
+            text-align: center;
+        }
+    }
+}
+
+.blog_main {
+    max-width: var(--content-size);
+    margin: 0 auto;
+}
+
+.mainTitle_blog {
+    margin: 3em 0 1em 0;
+}
+
+.title_blog {
+    margin: 1em auto 2px 1em;
+}
+
+.subTitle_blog {
+    margin-left: 32px;
+}
+
+.comment {
+    font-family: pixelFontBasic;
+    max-width: 90%;
+    margin: 2rem auto;
+}
+
+@media (max-width: 768px) {
+    .parent_card-blog {
+        justify-content: center;
+        display: grid;
+        grid-template-columns: auto;
+        place-content: center;
+        padding: 0 5%;
+        max-width: 100%;
+        
+        .card_blog {
+            max-width: 100%;
+            h2 {
+                text-align: center;
+            }
+        }
+    
+        .card_blog:hover {
+            scale: 105%;
+        }
+    }
+}

data/_sass/navigation.scss

@@ -1,5 +1,5 @@
 nav {
-    background-color: #D39D55;
+    background-color: var(--border);
     display: flex;
     justify-content: space-around;
     width: 100wh;
@@ -17,7 +17,7 @@ nav {
             align-content: center;
             align-items: center;
             text-decoration: none;
-            color: #8D0B41;
+            color: var(--accent);
             transition: 300ms;
         }
         a:hover {

data/_sass/staff.scss

@@ -3,20 +3,21 @@
 .parent_card-staff {
     padding-left: 0;
     display: grid;
-    grid-template-columns: 30vw 30vw 30vw;
-    gap: 2vw;
+    justify-content: center;
+    grid-template-columns: 20vw 20vw;
+    gap: 15vw;
     place-content: left;
-    margin-left: 3rem;
-
+    
     .card_staff {
-        color: #8D0B41;
+        color: var(--text);
         @include base.card_base;
         text-decoration: none;
+
         a {
             text-decoration: none;
-            color: #8D0B41;
+            color: var(--accent);
             }
-        h2 {
+        h3 {
             text-align: center;
         }
     }
@@ -25,8 +26,9 @@
 
 @media (max-width: 768px) {
     .parent_card-staff {
+        gap: 10vw;
         display: grid;
-        grid-template-columns: 70vw;
+        grid-template-columns: auto;
         place-content: center;
         padding: auto;
         margin-left: 0;

data/assets/Rubiku-theme.scss

@@ -4,4 +4,5 @@
 @import "base.scss";
 @import "navigation.scss";
 @import "staff.scss";
-@import "author.scss";
+@import "author.scss";
+@import "blog.scss";

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: rubiku-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Rubikuriku
 bindir: bin
 cert_chain: []
-date: 2025-10-25 00:00:00.000000000 Z
+date: 2025-10-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -52,11 +52,15 @@ files:
 - _layouts/post.html
 - _sass/author.scss
 - _sass/base.scss
+- _sass/blog.scss
 - _sass/navigation.scss
 - _sass/staff.scss
 - assets/Rubiku-theme.scss
 - assets/font/HomeVideo-BLG6G.ttf
-- assets/uploads/Screenshot 2025-08-17 154328.png
+- assets/font/VCR_OSD_MONO.ttf
+- assets/uploads/lacie.jpg
+- assets/uploads/og_img.png
+- assets/uploads/rubiku.png
 - assets/uploads/schematic.png
 - assets/uploads/screenshot_20250802-112920_1~2.jpg
 - assets/uploads/wireframe.png