oinam-jekyll 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 46ed83571f378b819db4e504f52439bbc37fe49bbacfb72a53b6847b2b170bf6
-  data.tar.gz: 0b8618826fc03442ca199d8089a1cada345baa41e63722c1115df2dd7faf9a2e
+  metadata.gz: cf0d16c26c91d5d025b23ff99782d043af4b38527e3e3c38d48acb550c407d6b
+  data.tar.gz: de3f7738c060c62ddea0f1cddaafac868ab9eae65456442d95d4181bc3c983db
 SHA512:
-  metadata.gz: e4e852217e60abcf8de0f9788ddaa8f7b58e384525ffdab81f240f8d2e1acf0792e9c6c53cae73467b63adf570c2baf09360447b39c6930cc63761fc287cbcfa
-  data.tar.gz: ea680d068b586fd7ca347b6163938f6d35034bb41e410f519069c5e336b61e575dfdfce39c7f1362a42df2136f406cdcd55f6dcce3cf52f8f01868e3b7202386
+  metadata.gz: 8f5aa026abbea2d10e2786e5af78fccc789e2e5db5dca6f37a53911a1d338b221802a9d12cf5bb5c6575b2756b43c8c7c71b027760ca9946c96824585243efe8
+  data.tar.gz: 41a812abfadcc17d9147f95babd649fdcd9f8e2d0171af0fdae823d60c9837dae1a6eff28166f0d636f20be438af750110757c7ad7323177c1c8dc9627460a84

data/README.md

@@ -1,27 +1,13 @@
 # Oinam Jekyll
 
-A simple, clean, and minimal Jekyll Theme.
+> A simple, clean, and minimal Jekyll Theme.
 
-## Installation
+- [Demo & Documentation](https://oinam.github.io/oinam-jekyll/)
+- [Source](https://github.com/oinam/oinam-jekyll)
+- [Download](https://github.com/oinam/oinam-jekyll/archive/refs/heads/main.zip)
 
-Add this line to your Jekyll site's Gemfile:
+## Gem
 
-```ruby
-gem "oinam-jekyll"
-```
+[Oinam Jekyll](https://rubygems.org/gems/oinam-jekyll)
 
-Run
-
-`bundle`
-
-## Usage
-
-Have the following line in your config file:
-
-```yaml
-theme: oinam-jekyll
-```
-
-## License
-
-The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+$ gem push oinam-jekyll-x.x.x.gem

data/_data/nav.yml

@@ -0,0 +1,8 @@
+- title: About
+  url: /about/
+
+- title: Blog
+  url: /blog/
+
+- title: Styleguide
+  url: /styleguide/

data/_includes/appearance.html

@@ -0,0 +1,22 @@
+{% comment %}<!-- https://zyno2.csb.app -->{% endcomment %}
+<div class="theme-switch-wrapper">
+  <label class="theme-switch" for="checkbox">
+    <input type="checkbox" id="checkbox">
+    <div class="slider">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun">
+        <circle cx="12" cy="12" r="5"></circle>
+        <line x1="12" y1="1" x2="12" y2="3"></line>
+        <line x1="12" y1="21" x2="12" y2="23"></line>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+        <line x1="1" y1="12" x2="3" y2="12"></line>
+        <line x1="21" y1="12" x2="23" y2="12"></line>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      </svg>
+    </div>
+  </label>
+</div>

data/_includes/css/color-theme-default.css

@@ -0,0 +1,39 @@
+/*
+  color-theme: default
+  reference: https://tailwindcss.com/docs/customizing-colors
+
+  Minimal color options and variations.
+  Almost all color variations can be played based off the few.
+*/
+:root {
+  --color-primary: #3b82f6; /* blue-400 */
+  --color-secondary: #2563eb; /* blue-600 */
+  --color-accent: #fb923c; /* orange-400 */
+
+  --background-color: #fafafa; /* gray-50 */
+  --background-color-alt: #f4f4f5; /* gray-100 */
+  --background-color-highlight: #e4e4e7; /* gray-200 */
+  
+  --text-color: #3f3f46; /* gray-700 */
+  --text-color-alt: #52525b; /* gray-600 */
+}
+
+[data-theme="dark"] {
+  --color-primary: #fb923c; /* orange-400 */
+  --color-secondary: #f59e0b; /* orange-500 */
+  --color-accent: #3b82f6; /* blue-400 */
+
+  --background-color: #52525b; /* gray-600 */
+  --background-color-alt: #3f3f46; /* gray-700 */
+  --background-color-highlight: #27272a; /* gray-800 */
+  
+  --text-color: #e4e4e7; /* gray-200 */
+  --text-color-alt: #f4f4f5; /* gray-100 */
+}
+
+/* tbd: let's combined system preference with the mode */
+/*@media (prefers-color-scheme: dark) {
+  :root {
+    
+  }
+}*/

data/_includes/css/color-theme-nord.css

@@ -0,0 +1,57 @@
+/*
+  color-theme: nord
+  https://www.nordtheme.com
+*/
+:root {
+  /* polar night */
+  --color-nord0: #2e3440;
+  --color-nord1: #3b4252;
+  --color-nord2: #434c5e;
+  --color-nord3: #434c5e;
+
+  /* snow storm */
+  --color-nord4: #d8dee9;
+  --color-nord5: #e5e9f0;
+  --color-nord6: #eceff4;
+
+  /* frost */
+  --color-nord7: #8fbcbb;
+  --color-nord8: #88c0d0;
+  --color-nord9: #81a1c1;
+  --color-nord10: #5e81ac;
+
+  /* aurora */
+  --color-nord11: #bf616a;
+  --color-nord12: #d08770;
+  --color-nord13: #ebcb8b;
+  --color-nord14: #a3be8c;
+  --color-nord15: #b48ead;
+}
+
+:root {
+  --color-primary: var(--color-nord10);
+  --color-secondary: var(--color-nord9);
+  --color-accent: var(--color-nord11);
+
+  --background-color: var(--color-nord6);
+  --background-color-alt: var(--color-nord5);
+  --background-color-accent: var(--color-nord13);
+  --background-color-highlight: var(--color-nord4);
+  
+  --text-color: var(--color-nord0);
+  --text-color-alt: var(--color-nord2);
+}
+
+[data-theme="dark"] {
+  --color-primary: var(--color-nord11);
+  --color-secondary: var(--color-nord12);
+  --color-accent: var(--color-nord10);
+
+  --background-color: var(--color-nord2);
+  --background-color-alt: var(--color-nord1);
+  --background-color-accent: var(--color-nord10);
+  --background-color-highlight: var(--color-nord0);
+
+  --text-color: var(--color-nord5);
+  --text-color-alt: var(--color-nord4);
+}

data/_includes/css/color-theme-vintage.css

@@ -0,0 +1,25 @@
+:root {
+  --color-primary: #6d28d9;
+  --color-secondary: #6b21a8;
+  --color-accent: #10b981;
+
+  --background-color: #fff7ed;
+  --background-color-alt: #ffedd5;
+  --background-color-highlight: #fed7aa;
+  
+  --text-color: #292524;
+  --text-color-alt: #57534e;
+}
+
+[data-theme="dark"] {
+  --color-primary: #22c55e;
+  --color-secondary: #22c55e;
+  --color-accent: #d97706;
+
+  --background-color: #44403c;
+  --background-color-alt: #57534e;
+  --background-color-highlight: #a8a29e;
+  
+  --text-color: #f5f5f4;
+  --text-color-alt: #d6d3d1;
+}

data/_includes/css/debug.css

@@ -0,0 +1,8 @@
+/* debug: attach a "?" class to debug with a blinking box */
+.\? {
+  animation: \?wobble 0.5s ease-in-out alternate infinite;
+}
+@keyframes \?wobble {
+  0% { box-shadow: inset 1px 1px gold, inset -1px -1px gold; }
+  100% { box-shadow: inset 5px 5px red, inset -5px -5px red; }
+}

data/_includes/css/forms.css

@@ -0,0 +1,105 @@
+label {
+  margin: 0;
+  padding: 0 1px;
+}
+
+a button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  cursor: pointer;
+  border: 0 none;
+  border-radius: var(--border-radius);
+  background: var(--form-button-background-color);
+  color: var(--form-button-text-color);
+  padding: var(--space-half) var(--space-base);
+  margin: var(--space-half) 0;
+  transition: var(--transition-duration);
+
+  font-family: var(--font-family-sans);
+  font-size: inherit;
+  font-weight: 500;
+}
+
+a button[disabled],
+button[disabled],
+input[type="submit"][disabled],
+input[type="reset"][disabled],
+input[type="button"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][disabled],
+select[disabled] {
+  cursor: not-allowed;
+  opacity: var(--opacity-lowest);
+}
+
+input:disabled,
+textarea:disabled,
+select:disabled {
+  cursor: not-allowed;
+}
+
+input[type="range"] {
+  padding: 0;
+}
+
+input:required {}
+
+input:focus {
+  outline: none;
+  border-color: var(--border-color-highlight);
+}
+
+button:focus,
+button:enabled:hover,
+input[type="submit"]:focus,
+input[type="submit"]:enabled:hover,
+input[type="reset"]:focus,
+input[type="reset"]:enabled:hover,
+input[type="button"]:focus,
+input[type="button"]:enabled:hover,
+input[type="checkbox"]:focus,
+input[type="checkbox"]:enabled:hover,
+input[type="radio"]:focus,
+input[type="radio"]:enabled:hover{
+  opacity: var(--opacity-lower);
+}
+
+textarea,
+select,
+input {
+  padding: var(--space-half);
+  margin-bottom: var(--space-half);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  
+  box-shadow: none;
+  box-sizing: border-box;
+  appearance: none;
+
+  background: var(--background-color-alt);
+  color: var(--text-color);
+}
+
+select {}
+
+textarea,
+select,
+input {
+  width: 100%;
+}
+
+input[type="checkbox"], input[type="radio"]{
+  width: auto;
+}
+
+input[type="file"] {
+  border: 0;
+}
+
+fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}

data/_includes/css/settings.css

@@ -1,66 +1,8 @@
-/*
-  default color-theme
-  change and play with the colors
-*/
-:root {
-  color-scheme: light dark;
-
-  --background-color: #fafafa; /* gray-50 */
-  --background-color-alt: #f4f4f5; /* gray-100 */
-  --background-color-accent: #fde68a; /* amber-200 */
-  --background-color-highlight: #e4e4e4; /* gray-200 */
-  
-  --text-color: #3f3f46; /* gray-700 */
-  --text-color-alt: #71717a; /* gray-500 */
-  
-  --border-color: #e4e4e7; /* gray-200 */
-  --border-color-highlight: #bfdbfe; /* blue-200 */
-
-  --text-color-link: #1d4ed8;
-  --text-color-link-visited: var(--text-color-link);
-  --text-color-link-hover: #1e3a8a;
-  --text-color-link-active: var(--text-color-link-hover);
-
-  --form-button-text-color: var(--text-color);
-  --form-button-text-color-active: var(--text-color);
-  --form-button-background-color: #3b82f6;
-  --form-button-background-color-disabled: #e4e4e7;
-  --form-button-background-color-active: var(--form-button-background-color);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background-color: #3f3f46; /* gray-700 */
-    --background-color-alt: #52525b; /* gray-600 */
-    --background-color-accent: #bfdbfe; /* blue-200 */
-    --background-color-highlight: #27272a; /* gray-800 */
-
-    --text-color: #f4f4f5; /* gray-100 */
-    --text-color-alt: #71717a; /* gray-500 */
-
-    --border-color: #52525b; /* gray-600 */
-    --border-color-highlight: #fde68a; /* amber-200 */
-
-    --text-color-link: #bfdbfe;
-    --text-color-link-visited: var(--text-color-link);
-    --text-color-link-hover: #60a5fa;
-    --text-color-link-active: var(--text-color-link-hover);
-
-    --form-button-text-color: var(--text-color);
-    --form-button-text-color-active: var(--text-color);
-    --form-button-background-color: #3b82f6;
-    --form-button-background-color-disabled: #e4e4e7;
-    --form-button-background-color-active: var(--form-button-background-color);
-  }
-}
-
-
-/* --------------------------------------- */
 :root {
   --font-family-sans:       system-ui, -apple-system, 'Segoe UI', 'Roboto', Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-family-serif:      Georgia, 'Times New Roman', serif;
   --font-family-monospace:  SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-  --font-cursive:           cursive;
+  --font-family-cursive:    cursive;
 
   /* an ideal reading width - 48rem - 768px based off 16px:1rem */
   /* 42 is an interesting number. ;-) */
@@ -102,13 +44,15 @@
 
 
   /* typography */
-  --font-family: var(--font-family-serif);
-  --font-family-headings: var(--font-family-serif);
+  --font-family: var(--font-family-sans);
+  --font-family-headings: var(--font-family-sans);
   
   --font-size: 16px;
   --font-size-small: 85%;
-  --font-size-smaller: 75%;
+  --font-size-smaller: 70%;
   --font-size-smallest: 65%;
+  --font-size-large: 115%;
+  --font-size-larger: 130%;
   
   --line-height: 1.618;
   --line-height-heading: 1.25;
@@ -120,22 +64,60 @@
   --border-radius-high: 0.7rem;
   --border-radius-round: 100%;
 
-  
+
   --image-width-max: 1200px; /*there is a limit to how wide an image can be*/
 
   
   /* color - standard */
   --color-black: #000000;
   --color-white: #ffffff;
+  
+  /* derived from the color theme */
+  --background-color-accent: var(--color-accent);
+
+  --border-color: var(--background-color-highlight);
+  --border-color-highlight: var(--color-primary);
+
+  --text-color-link: var(--color-primary);
+  --text-color-link-visited: var(--text-color-link);
+  --text-color-link-hover: var(--color-secondary);
+  --text-color-link-active: var(--text-color-link-hover);
+
+  --form-button-text-color: var(--background-color-alt);
+  --form-button-background-color: var(--color-primary);
+  
 
   --opacity-no: 1;
   --opacity-low: 0.9;
   --opacity-lower: 0.75;
   --opacity-lowest: 0.6;
+
+  --transition-duration: 0.4s;
 }
 
 @media (prefers-color-scheme: dark) {
   img, video {
     opacity: var(--opacity-low);
   }
-}
+}
+
+/* remove _all_ animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  body {
+    scroll-behavior: auto;
+  }
+
+  * {
+    -webkit-animation: none !important;
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* when serif font-family for main content */
+{% if site.styles.font_family == 'serif' %}
+:root {
+  --font-family: var(--font-family-serif);
+  --font-family-headings: var(--font-family-serif);
+}
+{% endif %}