RubyGems - lions-jekyll-theme - Versions diffs - 0.1.2 → 0.2.1 - Mend

lions-jekyll-theme 0.1.2 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

checksums.yaml +4 -4
data/_includes/footer.html +11 -17
data/_includes/header.html +14 -1
data/_layouts/home.html +13 -1
data/_sass/lions-jekyll-theme/_base.scss +28 -14
data/_sass/lions-jekyll-theme/_layout.scss +115 -26
metadata +3 -2

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c60dddbe962c03fd18a91e72e76754abf4b8df73e5a6f2b4ff631310f06a65d9
-  data.tar.gz: 43042f45d6dbace2a2bd9470f51b3d61dd2f386d3a35764ddb01b706936a15f4
+  metadata.gz: b04e0a2daf1f99be9254da7847cec14d3ca6cc6368b59ed31c8239a7bafe9d3a
+  data.tar.gz: a5c150f5a191e13e30969b886723f6bc96eb76e02e86c495df82bf690c0111a0
 SHA512:
-  metadata.gz: 8fd753aa812010b9b1c3a4dfeb0f4460de8b9c88e673672871968c9fe2867a120dafc343ea99f74f2caa091905b3aeb67380b540463e2ba8fff8f8a156bd0580
-  data.tar.gz: 2517efd58dbefa73febe3214207ef9b22a1a3d8994b9660fb301a6c7005fbd0127f62075e36b41c24ef46cc7e017aebbdeaed1d17dd6331b22e70407d344e9aa
+  metadata.gz: 8086d938cc255f0c969db9ceb24dd9f252f819d0a1dc1fe8a984320c173297f98290331b5f2cc6fc45fe5f70968cd8033e78f8788ca2db8ecf9d96f3c237a8d6
+  data.tar.gz: 17c4f9a4a05b8a1665923ececfb35d8bd2496898f03df7aa11d0ad62688f18e3ae0aeb5a21f1bd02364302e75b9a7c7f5cc9e35f183b3695e0107040f9351191

data/_includes/footer.html CHANGED Viewed

@@ -3,23 +3,17 @@
     <div class="wrapper">
         <div class="footer-social-wrapper">
-            <table class="footer-social-table">
-                <tr>
-                    {%- for social in site.socials -%}
-                        <td>
-                            <a href="{{ social.link }}" target="#">
-                                {%- if social.platform == 'email' -%}
-                                    <svg class="footer-social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/></svg>
-                                {%- elsif social.platform == 'github' -%}
-                                    <svg class="footer-social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
-                                {%- elsif social.platform == 'linkedin' -%}
-                                    <svg class="footer-social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
-                                {%- endif -%}
-                            </a>
-                        </td>
-                    {%- endfor -%}
-                </tr>
-            </table>
+            {%- for social in site.socials -%}
+                <a href="{{ social.link }}" target="#">
+                    {%- if social.platform == 'email' -%}
+                        <svg class="footer-social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/></svg>
+                    {%- elsif social.platform == 'github' -%}
+                        <svg class="footer-social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+                    {%- elsif social.platform == 'linkedin' -%}
+                        <svg class="footer-social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
+                    {%- endif -%}
+                </a>
+            {%- endfor -%}
         </div>
     </div>
 </footer>

data/_includes/header.html CHANGED Viewed

@@ -17,7 +17,7 @@
                     </span>
                 </label>
-                <table class="header-table">
+                <table class="header-table show-on-bigger-screen">
                     <tr>
                         {%- for path in page_paths -%}
                             <td>
@@ -29,6 +29,19 @@
                         {%- endfor -%}
                     </tr>
                 </table>
+                <table class="trigger header-table show-on-smaller-screen ">
+                    {%- for path in page_paths -%}
+                        <tr>
+                            <td>
+                                {%- assign my_page = site.pages | where: "path", path | first -%}
+                                {%- if my_page.title -%}
+                                    <a class="page-link header-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
+                                {%- endif -%}
+                            </td>
+                        </tr>
+                    {%- endfor -%}
+                </table>
             </nav>
         {%- endif -%}
     </div>

data/_layouts/home.html CHANGED Viewed

@@ -4,7 +4,19 @@ layout: base
 <div class="home flex-container wrapper page-content">
     <div class="wrapper">
-        {%- include sidebar.html -%}
+        <div class="sidebar-parent">
+            <input type="checkbox" id="sidebar-toggle" class="sidebar-toggle" />
+            <label for="sidebar-toggle">
+                <div class="sidebar-toggle-box">
+                    <img class="sidebar-toggle-picture" src="{{ site.author.profile_picture }}" />
+                    <span class="sidebar-toggle-icon menu-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
+                    </span>
+                </div>
+            </label>
+            {%- include sidebar.html -%}
+        </div>
     </div>
     <div class="wrapper">
         {{ content }}

data/_sass/lions-jekyll-theme/_base.scss CHANGED Viewed

@@ -208,12 +208,6 @@ html {
     padding-right: $spacing-unit * .5;
     padding-left: $spacing-unit * .5;
     @extend %clearfix;
-    @media screen and (min-width: $on-large) {
-      max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
-      padding-right: $spacing-unit;
-      padding-left: $spacing-unit;
-    }
   }
@@ -263,16 +257,9 @@ table {
     width: 100%;
     height: 100%;
   }
-  tr {
-  }
-  th, td {
-    // padding: ($spacing-unit * .05) ($spacing-unit * .05);
-  }
   th {
     background-color: $table-header-bg-color;
   }
-  td {
-  }
   @include media-query($on-laptop) {
     display: block;
@@ -282,8 +269,35 @@ table {
   }
 }
+/**
+ * Conditional
+ */
+@media all and (width >= $on-medium) {
+  .show-on-bigger-screen {
+    display: block;
+  }
+  .show-on-smaller-screen {
+    display: none;
+  }
+}
+@media all and (width < $on-medium) {
+  nav .show-on-bigger-screen {
+    display: none;
+  }
+  .show-on-smaller-screen {
+    display: block;
+  }
+}
 /*
- * fonts
+ * Fonts
  */
 @font-face {
   font-family: JetBrains;

data/_sass/lions-jekyll-theme/_layout.scss CHANGED Viewed

@@ -19,27 +19,26 @@
   // margin-bottom: 0;
   padding-left: 1rem;
   padding-right: 1rem;
+  padding-top: 5px;
+  padding-bottom: 5px;
   float: left;
   transition: 0.5s ease;
   height: 100%;
-  @include media-query($on-palm) {
-    padding-right: 45px;
-  }
-  &:visited {
-    // color: $site-title-color;
-  }
+  // @include media-query($on-palm) {
+  //   padding-right: 45px;
+  // }
 }
 .site-nav {
   position: absolute;
+  z-index: 2;
   top: 9px;
-  height: 100%;
   right: $spacing-unit * .5;
   background-color: $background-color;
   border: 1px solid $border-color-01;
   border-radius: 5px;
+  margin-top: 5px;
   text-align: right;
   .nav-trigger {
@@ -75,14 +74,15 @@
   input:checked ~ .trigger {
     display: block;
-    // padding-bottom: 5px;
+    padding-bottom: 5px;
   }
   .page-link {
     color: $text-color;
+    text-align: right;
     // line-height: $base-line-height;
     display: block;
-    // padding: 5px 10px;
+    padding: 5px 10px;
     // Gaps between nav items, but not on the last one
     &:not(:last-child) {
@@ -91,7 +91,7 @@
     margin-left: 20px;
   }
-  @media screen and (min-width: $on-medium) {
+  @media all and (width >= $on-medium) {
     position: static;
     float: right;
     border: none;
@@ -105,9 +105,9 @@
       display: none;
     }
-    input ~ .trigger {
-      display: block;
-    }
+    // input ~ .trigger {
+      // display: block;
+    // }
     .page-link {
       display: block;
@@ -142,7 +142,87 @@
   }
 }
+/**
+ * Sidebar
+ */
+.sidebar-parent {
+  .sidebar-toggle {
+    display: none;
+  }
+  .sidebar-toggle-box {
+    position: absolute;
+    top: 85px;
+    left: 10px;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    padding: 0.25rem;
+    border: solid 1px $border-color-01;
+    border-radius: 1rem;
+    cursor: pointer;
+    transition: ease-in-out 0.3s;
+    &:hover {
+      transform: translateX(0.5rem);
+    }
+  }
+  .sidebar-toggle-picture {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+  }
+  .sidebar-toggle-icon {
+    fill: $border-color-03;
+    transform: scale(1.5, 1.5);
+    margin-left: 0.2rem;
+  }
+  input {
+    ~ .sidebar {
+      left: -300px;
+    }
+    &:checked {
+      ~ .sidebar {
+        left: 0px;
+      }
+      + label > .sidebar-toggle-box {
+        width: 20rem;
+        justify-content: end;
+        &:hover {
+          transform: translateX(-0.5rem);
+        }
+        > .sidebar-toggle-picture {
+          transform: translateX(0.9rem);
+        }
+        > .sidebar-toggle-icon {
+          transform: rotate(0.5turn) translatex(2.7rem) scale(1.5, 1.5);
+        }
+      }
+    }
+  }
+  @media all and (width >= $on-medium) {
+    label[for="sidebar-toggle"] {
+      display: none;
+    }
+    input ~ .sidebar {
+      display: block;
+    }
+  }
+}
 /**
   * Site footer
@@ -156,18 +236,12 @@
   height: 3rem;
   width: 30vw;
   min-width: 200px;
-  display: block;
+  display: flex;
+  justify-content: space-evenly;
   margin-left: auto;
   margin-right: auto;
 }
-.footer-social-table {
-  vertical-align: middle;
-  border: none;
-  width: 100%;
-  height: 100%;
-}
 .footer-social-icon {
   height: 12vw;
   max-height: 30px;
@@ -189,8 +263,8 @@
   * Page content
   */
 .page-content {
-  padding: $spacing-unit 0;
-  // flex: 1 0 auto;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 }
 .page-heading {
@@ -338,11 +412,25 @@
 }
 .sidebar {
-  max-width: 14rem;
+  max-width: 15rem;
   width: auto;
   font-family: JetBrains;
   white-space: nowrap;
   margin-right: 2rem;
+  transition: 0.3s linear;
+  @media all and (width < $on-medium) {
+    position: absolute;
+    top: 85px;
+    left: 0px;
+    z-index: 1;
+    padding: 1rem;
+    border: solid $border-color-01;
+    border-left: none;
+    border-top-right-radius: 3rem;
+    border-bottom-right-radius: 3rem;
+    background: black;
+  }
 }
 .profile-picture {
@@ -376,3 +464,4 @@
   font-weight: lighter;
   margin-left: 0.33rem;
 }

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lions-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.1
 platform: ruby
 authors:
 - Anders Gilliland
@@ -75,5 +75,6 @@ requirements: []
 rubygems_version: 3.3.5
 signing_key:
 specification_version: 4
-summary: A custom theme built specfically for my website https://ablion.dev
+summary: A custom theme built specfically for my website https://ablion.dev, now with
+  support for mobile devices.
 test_files: []