instructional-blog 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 696de6e2031af4da247e092029b32721e240c2404cdfc316201d7529694f5bd1
-  data.tar.gz: 77222b45519ceaa0bce240ccee87fddf007373d83c4e786773440eee8343a064
+  metadata.gz: 9c2f5a578f1dcf72417712b207d9f5671c4b94a41d412df9728499b5dd2dd28f
+  data.tar.gz: 8d89bc360cd8dbeda59dd0ca52b24d66750e360477fa618240badeb43aa1a76c
 SHA512:
-  metadata.gz: 2f7b4c19257313ee19c01a76c7cd61368011090514798eae6e16bfcf1630aac42533d4407bf6ac78a9ecead9095c51daf0d7d389cfba332cdea960cf6e930b95
-  data.tar.gz: 963bfef48e507962b201d8cf5ba09bf990a9ce50524da060cd00e4042f2572b550bf4805cffdcf0ce96e8440d684e36694a2ff079a8815d7f8e26121ff1b0f91
+  metadata.gz: fd4a07af2272144dafd7aca50a3c6c5f1be08a776a3ac72c98dcb2928efbda97610697fca6d74ef76aef616463da996c016355cac00b96b6bf43a813eff61973
+  data.tar.gz: fa902ca1b82467022fb9ae070e88cfa618f3c50e65b386d5f6cc03b5a624958449fe5faeec70a06016da6c6cda2a7ef37eadb0100de09b2ff76570a811453bb5

data/_layouts/about.html

@@ -0,0 +1,4 @@
+---
+layout: footer
+---
+{{ content }}

data/_layouts/default.html

@@ -1 +1,3 @@
-{{ content }}
+<div class="default">
+    {{ content }}
+</div>

data/_layouts/footer.html

@@ -0,0 +1,17 @@
+---
+layout: toc
+---
+
+<div class="just-series-and-post">
+{{ content }}
+</div>
+<footer class="site-footer">
+    <div class="footer-inner">
+        <button onclick="topFunction()" class="site-button" id="myBtn" title="Go to top">
+            Return to Top
+        </button>
+    </div>
+
+</footer> 
+
+

data/_layouts/header_and_footer.html

@@ -0,0 +1,33 @@
+---
+layout: default
+---
+<link rel="stylesheet" href="/assets/css/styles.css">
+<header class="site-header">
+    <div class="header-buttons">
+            <div class="home-button-div">
+                <a id="home-button" class="home-link header-button" href="{{ site.url }}">
+                    <input type="button" value="home" />
+                </a> 
+            </div>
+
+            <div class="dropdown header-button">
+                <button class="dropdown-button header-button">
+                    <img src="/assets/images/Hamburger_icon.svg"  />
+                </button>
+            <div class="dropdown-content">
+                <a href="{{ site.baseurl }}/about">About</a>
+                <a href="{{ site.url }}">Home</a>
+            </div>
+            </div>
+            <!-- <a class="about-link header-button" href="{{ site.baseurl }}/about">
+                <input type="button" value="about" />
+            </a>
+            -->
+
+    </div>
+</header>
+<div class="body-content">
+    {{ content }}
+</div>
+
+

data/_layouts/home.html

@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: header_and_footer
 ---
 
 <div class="home">
@@ -15,12 +15,14 @@ layout: default
       {%- for post in site.posts -%}
       <li>
         {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
-        <span class="post-meta">{{ post.date | date: date_format }}</span>
+        
         <h3>
           <a class="post-link" href="{{ post.url | relative_url }}">
             {{ post.title | escape }}
           </a>
+          <span class="post-meta">{{ post.date | date: date_format }}</span>
         </h3>
+        
         {%- if site.show_excerpts -%}
           {{ post.excerpt }}
         {%- endif -%}

data/_layouts/post.html

@@ -1,5 +1,9 @@
 ---
-layout: toc
+layout: series
 ---
 
-{{ content }}
+<div class="article-post-container">
+    <div class="article-post">
+        {{ content }}
+    </div>
+</div>  

data/_layouts/series.html

@@ -1,10 +1,16 @@
 ---
-layout: default
+layout: footer
 ---
+
+<div class="non-series-container">
 {{ content }}
+</div>
+
+
 
     <!-- Series section goes at the end of the post -->
-    <div class="series-post-section">
+    <div class="series no_toc_section">
+    <div class="series-inner">
         <!-- Series links -->
         {% if page.is_series == true %}
         <div class="row spacer-y">
@@ -29,4 +35,5 @@ layout: default
         </div>
         {% endif %}
    </div>
+   </div>
  

data/_layouts/toc.html

@@ -1,26 +1,27 @@
 ---
-layout: series
+layout: header_and_footer
 ---
 <head>
     <link rel="stylesheet" href="/assets/css/styles.css">
 </head>
 {% assign post_cat = site.collection_cats | where:"title", page.Category | first %}
-<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
 
 
 
-    
-  <div class="table-of-contents-header">
+
+<div class="table-of-contents">
+   <div class="table-of-contents-header">
         Table of Contents:
    </div>
-      <!-- Article content -->
-   <div class="article-body{% if page.Category != " Technology" %} serif{% endif %}" itemprop="articleBody">
-       {{ content  | toc}}
+   <div class="toc">
+        {% toc %}
    </div>
 
+    </div>
 
+<div class="post-and-series-and-footer">
+        {{ content }}
+    </div>
 
 
 
-</article>
-

data/_sass/color_palette.scss

@@ -1,5 +1,75 @@
+@use 'sass:math';
 
+// for main colors of body
+$color: black;
+$background-color: lightgrey;
+$background-color-2: #B8C2CC;
 
+// for buttons and other specific items
+$color-1: darkblue;
+$color-trim-1: #66ff66;
+$color-border-1: blue;
+$color-off-1: #00b300;  // a lighter green
 
-$background-color-2: #B8C2CC;
+// for accents of toc, header, footer
+$color-2: darkgreen;
+//$color-background-2: 
+$color-trim-2: lightgreen;
 $border-color: #A9B1B2;
+
+
+
+
+
+// ------ COLORS ------
+
+// site:
+$site-background: $background-color; // has little effect
+$site-background-sides: lightpink;
+
+
+$site-button-color: $color-1;
+$site-button-background: green;
+$site-button-background-hover: $color-off-1;
+$site-button-border: $color-border-1;
+
+$site-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
+// header
+$header-background-extended: lightblue;
+$header-background: lightgreen;
+
+
+// toc
+$toc-background: mintcream;
+// article
+$article-background: $background-color;
+$article-quote-background: mintcream;
+// series
+$series-background: $background-color-2;
+// footer
+$footer-background: $color-trim-2;
+
+
+// ------ SIZES ------
+
+// site 
+$site-max-width: 1200px;
+
+// toc
+$toc-width: 200px;
+
+// header 
+$header-height: 32px;
+$header-button-height: 20px;
+$header-menu-width: 150px;
+$home-button-width: 100px;
+$home-button-margin: math.div($toc-width - $home-button-width, 2);
+
+
+// article 
+
+// series 
+
+// footer 
+$footer-height: 150px;

data/_sass/default.scss

@@ -0,0 +1,23 @@
+@import "color_palette";
+
+
+.default {
+    display: grid;
+    grid-template-rows: $header-height auto $footer-height;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: stretch;
+    position: fixed;
+    z-index: 10;
+};
+
+body {
+    height: 100%;
+    background: $background-color;
+    margin: 0;
+};
+
+
+

data/_sass/header_and_footer.scss

@@ -0,0 +1,166 @@
+@import "color_palette";
+
+.site-header {
+    height: $header-height;
+    background: $header-background-extended;
+    display: block;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+
+    .home-button-div {
+        display: grid;
+        width: $toc-width;
+        
+        #home-button {
+            padding: 0;
+            border: 0;
+        };
+
+        .home-link {
+            display: inline-block;
+            align: center;
+            text-align: center;
+            margin: 0;
+            width: $toc-width;
+            height: $header-height;
+        };
+    };
+    
+    .header-buttons {
+        display: flex;
+        justify-content: space-between;
+        margin: 0;
+        //max-width: $site-max-width;
+        background: $header-background;
+        height: $header-height;
+        color: $site-button-color;
+    
+        a {
+            text-decoration: none;
+        };
+
+        .header-button {
+            //border: 2px solid $site-button-border;
+            //border-radius: 3px;
+            //margin: 2px;
+            //padding: 2px;
+            background: $site-button-background;
+            
+            * {
+                border: 0;
+                background: none;
+                color: $site-button-color;
+            };    
+    
+        }
+
+        .header-button:hover {
+            background: $site-button-background-hover;
+        };
+
+
+        .dropdown {
+            width: $header-menu-width;
+            margin-left: 80px;
+            padding-left: 0;
+            float: right;
+            overflow: hidden;
+            text-align: center;
+        };
+    
+        .dropdown-button {
+            padding: 0;
+        };
+        
+        .dropdown .dropbtn {
+            font-size: 16px;
+            border: none;
+            outline: none;
+            padding: 14px 16px;
+            margin: 0; /* Important for vertical align on mobile phones */
+        };
+
+
+          
+          /* Dropdown content (hidden by default) */
+          .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: $site-button-background;
+            box-shadow: $site-box-shadow;
+            width: $header-menu-width;
+            z-index: 1;
+            margin: 0;
+            text-align: center;
+          };
+          
+          /* Links inside alt="Menu Options"the dropdown */
+          .dropdown-content a {
+            float: right;
+            color: $site-button-color;
+            text-decoration: none;
+            display: block;
+            text-align: center;
+          };
+          
+          /* Add a grey background color to dropdown links on hover */
+          .dropdown-content a:hover {
+            background-color: $site-button-background-hover;
+          };
+          
+          /* Show the dropdown menu on hover */
+          .dropdown:hover .dropdown-content {
+            display: grid;
+          };
+    };
+};
+
+
+.body-content {
+    display: flex;
+    //margin: $header-height 0;
+    top: $header-height;
+    bottom: $footer-height;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: $site-background;
+    //  margin: 0 0 0 $toc-width;
+    
+};
+
+
+.just-series-and-post {
+    display: grid;
+   
+};
+
+
+.site-footer {
+    height: $footer-height;
+    position: relative;
+    bottom: 0;
+    width: 100%;
+    background: $footer-background;
+    margin-left: 0px;
+    margin-right: 0;
+    margin-bottom: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+
+    .footer-inner {
+        //max-width: $site-max-width;
+        margin: 40px auto;
+        height: 75%;
+        width: 75%;
+    };
+
+    
+};
+
+
+
+

data/_sass/home.scss

@@ -0,0 +1,7 @@
+@import "color_palette";
+
+
+
+.home {
+    margin: $header-height 0;
+};

data/_sass/post.scss

@@ -0,0 +1,33 @@
+.article-post-container {
+    display: flex;
+    width: 100%;
+    float: right;
+};
+
+.article-post {
+    background: $article-background;   
+
+    blockquote {
+        border: 1px solid;
+        border-radius: 4px;
+        padding: 3px 10px;
+        margin: 12px 3px;
+        background-color: $article-quote-background;
+        p {
+            background: $article-quote-background;
+        };
+        
+    };
+};
+
+.post-and-series-and-footer {
+    display: grid;
+    grid-template-rows: auto  $footer-height;
+    align-content: space-between;
+    align-items: start;
+    margin: 0 0 $footer-height $toc-width;
+    height: 100%;
+    width: 100%;
+    overflow: scroll;
+    position: relative;
+};

data/_sass/return_to_top.scss

@@ -0,0 +1,17 @@
+#myBtn {
+  outline: none; /* Remove outline */
+  
+  padding: 15px; /* Some padding */
+  border-radius: 10px; /* Rounded corners */
+  font-size: 18px; /* Increase font size */
+}
+
+#myBtn:hover {
+  background-color: #555; /* Add a dark-grey background on hover */
+}
+
+.footer {
+    height: 100px;
+    background: green;
+    margin: 2em;
+};

data/_sass/series.scss

@@ -0,0 +1,44 @@
+
+.non-series-container {
+    //align-self: stretch;
+    display: flex;
+    height: 100%;
+    margin-left: 20px;
+};
+
+
+.series {
+        display: inline-block;
+    //width: 100%
+    width: 80%;
+    margin: 20px;
+//    padding: 20px;
+};
+
+.series-inner {
+    display: block;
+    margin: auto;
+    max-width: $site-max-width;
+    background-color: $series-background;
+    border-color: $border-color;
+    border-width: 3px 4px 6px 4px;
+    border-style: solid;
+
+};
+
+
+
+.series-post-section {
+    display: block;
+    width: 100%;
+    align: center;
+};
+
+.series-post-bullet {
+    font: bold;
+};
+
+.series-header {
+    color: #3D3E3D;
+    
+};

data/_sass/site_wide_defaults.scss

@@ -0,0 +1,29 @@
+@import "color_palette";
+
+html {
+    height: 100%;
+    font-family: sans-serif;
+
+};
+
+
+//a {
+//    height: 100%;
+//    width: 100%;
+//    background: yellow;
+//}
+
+
+//body {
+//    height: 100%;
+//    margin: 0;
+//    padding: 0;
+//};
+
+
+.site-button {
+    color: $site-button-color;
+    background: $site-button-background;
+    //border: 1px solid $site-button-border;
+    cursor: pointer; /* Add a mouse pointer on hover */
+};

data/_sass/toc.scss

@@ -1,19 +1,77 @@
 @import 'color_palette';
 
-.series-post-section {
-    background-color: $background-color-2;
-    border-color: $border-color;
-    border-width: 1px 2px 4px 2px;
-    border-style: solid;
-}
 
+.table-of-contents {
+    display: inline-block;
+    margin: auto;
+    //padding: 10px;
+    height: 100vh;
+    min-height: 100%;
+    max-width: $toc-width;
+    width: stretch;
+    border-right: solid 1px;
+    height: 100%;
+    margin: 0 $footer-height 0 0;
+    background: $toc-background;
+    //border-radius: 5px;
+    overflow: scroll;
+    position: fixed;
+    top: $header-height;
+    scrollbar-width: none;
+};
 
-.series-post-bullet {
-    font: bold;
-}
+.table-of-contents-header {
+    text-align: center;
+    margin: 6%;
+    font-weight: 500;
+    font-size: large;
+      
+};
 
-.series-header {
-    color: #3D3E3D;
+
+.article-body {
+    display: block;
+    max-width: $site-max-width;
+    height: 100%;
+};
+
+
+#toc {
+    display: inline-block;
+    width: $toc-width;
+    padding: 0;
+    float: left;
+    min-height: 100%;
+    text-decoration: none;
+    margin: 5%;   
     
-}
+    li {
+        margin: 10px 0;
+        list-style-type: none;
+
+        a {
+            text-decoration: none;
+        };
+    };
+};
+
+
+// These only work for webkit and blink based browsers (i.e. safari and chrome)
+//::-webkit-scrollbar {
+//    width: 30px;
+//    //display: none;
+//};
+//
+//::-webkit-scrollbar-track {
+//    -webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.3); 
+//    border-radius: 10px;
+//}
+//
+//::-webkit-scrollbar-thumb {
+//    border-radius: 10px;
+//    -webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.5); 
+//}
 
+.post-and-series {
+    display: grid;
+};  

data/assets/css/styles.scss

@@ -1,3 +1,12 @@
 ---
 ---
+@import "site_wide_defaults";
 @import "toc";
+@import "return_to_top";
+@import "header_and_footer";
+@import "series";
+@import "post";
+@import "default";
+@import "home";
+
+

data/assets/images/Hamburger_icon.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

data/assets/js/return_to_top.js

@@ -0,0 +1,13 @@
+// Get the button:
+document.addEventListener('DOMContentLoaded', function() {
+  let mybutton = document.getElementById("myBtn");
+//});
+
+
+
+// When the user clicks on the button, scroll to the top of the document
+});
+function topFunction() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+} 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: instructional-blog
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - scshafe
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2025-04-13 00:00:00.000000000 Z
+date: 2025-04-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -36,17 +36,25 @@ files:
 - _config.yml
 - _layouts/about.html
 - _layouts/default.html
+- _layouts/footer.html
+- _layouts/header_and_footer.html
 - _layouts/hidden.html
 - _layouts/home.html
 - _layouts/post.html
 - _layouts/series.html
 - _layouts/toc.html
-- _sass/.color_palette.scss.swp
-- _sass/.toc.scss.swp
 - _sass/color_palette.scss
-- _sass/footer.scss
+- _sass/default.scss
+- _sass/header_and_footer.scss
+- _sass/home.scss
+- _sass/post.scss
+- _sass/return_to_top.scss
+- _sass/series.scss
+- _sass/site_wide_defaults.scss
 - _sass/toc.scss
 - assets/css/styles.scss
+- assets/images/Hamburger_icon.svg
+- assets/js/return_to_top.js
 homepage: https://github.com/scshafe/instructional-blog
 licenses:
 - MIT