jekyll-theme-penumbra 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba2133e4906b74a176f5ed65c28fdcbead863bba17a4bc9c876b395ecf5e268f
-  data.tar.gz: b79695d804965ff1dd490b70b5b3c4f5e101980fc60bb91f50ea465c203510a6
+  metadata.gz: b12562c96f2c223d05738f4af8e4abee02550dbeb16cbbbfa4d8bca757bf45a1
+  data.tar.gz: 95b0f65bdf3a1e92a56cd3ab67c63e8de7e6864020caed13fa8a83f4949e78a0
 SHA512:
-  metadata.gz: b8715feb634c3d1d500498dd60f9432a3a9f5cb2a8982a798dd1362c7630922672fb5e8f0b8e691f63baa7cfaa715f0195c7600b097afe65a141634778efc1df
-  data.tar.gz: 3e5bb2e884a68ac18edca96f688a7afaa481aafb664a022a08f3b6cae1acc0e3bcaa31c9d0b882a68958512f27f8768bed8df045652a387dad03c2bdaecc5b9f
+  metadata.gz: 3b76364659a2d641816f9f33fd90947a076f6d30c2a72215d36a51e7eb175b0d513c3c8aaf1f69a8db2258367f6d8d8c7e465302cf097967e292edb14a588728
+  data.tar.gz: bdf7f3d527fdf6de31398c0f8afc0c74c8254e3bc43cc629136ebd06b9ec28350d374adacb2fe0baaa89a49dfd64d4de270b2b19bf8e5e73eb1996631c0d1e8f

data/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 Cvtx
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2022 Cvtx
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

data/README.md

@@ -1,26 +1,26 @@
-# Penumbra Jekyll Theme
-
-*Penumbra is a Jekyll theme for GitHub Pages. You can [preview the theme to see what it looks like](http://cvtx.github.io/penumbra), or even [use it today](#usage).*
-
-## Usage
-
-To use the Penumrba theme:
-
-1. Add the following to your site's `_config.yml`:
-
-    ```yml
-    remote_theme: Cvtx/penumbra
-    plugins:
-    - jekyll-remote-theme # add this line to the plugins list if you already have one
-    ```
-    
-2. Optionally, if you'd like to preview your site on your computer, add the following to your site's `Gemfile`:
-
-    ```ruby
-    gem "github-pages", group: :jekyll_plugins
-    ```
-
-## License
-
-The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
-
+# Penumbra Jekyll Theme
+
+*Penumbra is a Jekyll theme for GitHub Pages. You can [preview the theme to see what it looks like](http://cvtx.github.io/penumbra), or even [use it today](#usage).*
+
+## Usage
+
+To use the Penumrba theme:
+
+1. Add the following to your site's `_config.yml`:
+
+    ```yml
+    remote_theme: Cvtx/penumbra
+    plugins:
+    - jekyll-remote-theme # add this line to the plugins list if you already have one
+    ```
+    
+2. Optionally, if you'd like to preview your site on your computer, add the following to your site's `Gemfile`:
+
+    ```ruby
+    gem "github-pages", group: :jekyll_plugins
+    ```
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+

data/_config.yml

@@ -1,20 +1,20 @@
-title: Penumbra Theme
-description: Penumbra is a theme for GitHub Pages.
-logo: /assets/img/logo.png
-google_analytics:
-show_downloads: true
-color-scheme: auto
-theme: jekyll-theme-penumbra
-plugins:
-  - jekyll-sitemap
-  - jekyll-seo-tag  
-  
-sidebar:
-  - name: GitHub
-    icon: <i class="fa-brands fa-github"></i>
-    link: https://github.com/Cvtx/penumbra
-  - name: Blog
-    icon: <i class="fa-solid fa-pen"></i>
-    link: https://cvtx.github.io/blog/
-
-github: [metadata]
+title: Penumbra Theme
+description: Penumbra is a theme for GitHub Pages.
+logo: /assets/img/logo.png
+google_analytics:
+show_downloads: true
+color-scheme: auto
+remote_theme: cvtx/penumbra
+plugins:
+  - jekyll-sitemap
+  - jekyll-seo-tag  
+  
+sidebar:
+  - name: GitHub
+    icon: <i class="fa-brands fa-github"></i>
+    link: https://github.com/Cvtx/penumbra
+  - name: Blog
+    icon: <i class="fa-solid fa-pen"></i>
+    link: https://cvtx.github.io/blog/
+
+github: [metadata]

data/_includes/color-scheme.html

@@ -1,8 +1,8 @@
-{% case site.color-scheme %}
-  {% when "", nil, false, 0, empty %}
-    {% assign ColorScheme = "auto" %}
-  {% else %}
-    {% assign ColorScheme = site.color-scheme %}
-{% endcase %}
-
+{% case site.color-scheme %}
+  {% when "", nil, false, 0, empty %}
+    {% assign ColorScheme = "auto" %}
+  {% else %}
+    {% assign ColorScheme = site.color-scheme %}
+{% endcase %}
+
 <link rel="stylesheet" href="{{ "/assets/css/colors-ColorScheme.css?v=" | replace: "ColorScheme", ColorScheme | append: site.github.build_revision | relative_url }}">

data/_includes/head-custom-google-analytics.html

@@ -1,10 +1,10 @@
-{% if site.google_analytics %}
-  <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-    ga('create', '{{ site.google_analytics }}', 'auto');
-    ga('send', 'pageview');
-  </script>
-{% endif %}
+{% if site.google_analytics %}
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    ga('create', '{{ site.google_analytics }}', 'auto');
+    ga('send', 'pageview');
+  </script>
+{% endif %}

data/_includes/head-custom.html

@@ -1,12 +1,12 @@
-<!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
-
-<!-- Setup Google Analytics -->
-{% include head-custom-google-analytics.html %}
-
-<!-- You can set your favicon here -->
-{% if site.favicon %}
-  <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}">
-{% endif %}
-
-<!-- end custom head snippets -->
+<!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
+
+<!-- Setup Google Analytics -->
+{% include head-custom-google-analytics.html %}
+
+<!-- You can set your favicon here -->
+{% if site.favicon %}
+  <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}">
+{% endif %}
+
+<!-- end custom head snippets -->

data/_includes/header.html

@@ -1,17 +1,17 @@
-{% if site.logo %}
-<img class="img-circle" src="{{site.logo | relative_url}}" alt="Logo">
-{% endif %}
-
-{% if site.blank_title %}
-<h1>{{ site.title | default: site.github.repository_name }}</h1>
-{% else %}
-<h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repository_name }}</a></h1>
-{% endif %}
-
-{% if site.email %}
-<p class="addr"><i class="fa-regular fa-envelope"></i>&nbsp;{{ site.email }}</p>
-{% endif %}
-
-<p>{{ site.description | default: site.github.project_tagline }}</p>
-
+{% if site.logo %}
+<img class="img-circle" src="{{site.logo | relative_url}}" alt="Logo">
+{% endif %}
+
+{% if site.blank_title %}
+<h1>{{ site.title | default: site.github.repository_name }}</h1>
+{% else %}
+<h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repository_name }}</a></h1>
+{% endif %}
+
+{% if site.email %}
+<p class="addr"><i class="fa-regular fa-envelope"></i>&nbsp;{{ site.email }}</p>
+{% endif %}
+
+<p>{{ site.description | default: site.github.project_tagline }}</p>
+
 {% include sidebar.html %}

data/_includes/ie-support.html

@@ -1,3 +1,3 @@
-<!--[if lt IE 9]>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+<!--[if lt IE 9]>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
 <![endif]-->

data/_includes/links-mobile.html

@@ -1,6 +1,6 @@
-<div class="link-wrapper-mobile" id="link-wrapper-mobile">
-    {%- for platform in site.sidebar %}
-    <nobr><a href="{{ platform.link }}" rel="me">{{ platform.icon }}&nbsp;{{ platform.name }}</a>
-    {%- unless forloop.last %}<span style="margin-left: 6px;"></span>{% endunless %}</nobr>
-    {%- endfor %}
-</div>
+<div class="link-wrapper-mobile" id="link-wrapper-mobile">
+    {%- for platform in site.sidebar %}
+    <nobr><a href="{{ platform.link }}" rel="me">{{ platform.icon }}&nbsp;{{ platform.name }}</a>
+    {%- unless forloop.last %}<span style="margin-left: 6px;"></span>{% endunless %}</nobr>
+    {%- endfor %}
+</div>

data/_includes/sidebar.html

@@ -1,8 +1,8 @@
-<div class="link-wrapper">
-  <ul class="link">
-    {%- for platform in site.sidebar %}
-    <!-- <li><a href="{{ platform.link }}"><i class="{{ platform.icon }}"></i> {{ platform.name }}</a></li> -->
-     <li><a href="{{ platform.link }}">{{ platform.icon }}&nbsp;{{ platform.name }}</a></li>
-    {%- endfor %}
-  </ul>
-</div>
+<div class="link-wrapper">
+  <ul class="link">
+    {%- for platform in site.sidebar %}
+    <!-- <li><a href="{{ platform.link }}"><i class="{{ platform.icon }}"></i> {{ platform.name }}</a></li> -->
+     <li><a href="{{ platform.link }}">{{ platform.icon }}&nbsp;{{ platform.name }}</a></li>
+    {%- endfor %}
+  </ul>
+</div>

data/_layouts/default.html

@@ -1,35 +1,35 @@
-<!DOCTYPE html>
-<html lang="{{ site.lang | default: "en-US" }}">
-  <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    {% seo %}
-    {% include color-scheme.html %}    
-    <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
-    <link rel="preload" href="{{site.logo | relative_url}}" as="image">        
-    {% include ie-support.html %}
-    {% include head-custom.html %}    
-  </head>
-  <body>
-    <div class="wrapper">      
-      <div class="sidebar">
-        <header>
-          {% include header.html %}          
-        </header>        
-        {% include links-mobile.html %}
-        <div class="sidebar-footer">
-          {% include footer.html %}
-        </div>
-      </div>
-      <section>
-        {{ content }}
-      </section>
-      <footer>
-        {% include footer.html %}
-      </footer>    
-    </div>
-    <script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
-    <script src="{{ "/assets/js/footer.fix.js" | relative_url }}"></script>    
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {% seo %}
+    {% include color-scheme.html %}    
+    <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
+    <link rel="preload" href="{{site.logo | relative_url}}" as="image">        
+    {% include ie-support.html %}
+    {% include head-custom.html %}    
+  </head>
+  <body>
+    <div class="wrapper">      
+      <div class="sidebar">
+        <header>
+          {% include header.html %}          
+        </header>        
+        {% include links-mobile.html %}
+        <div class="sidebar-footer">
+          {% include footer.html %}
+        </div>
+      </div>
+      <section>
+        {{ content }}
+      </section>
+      <footer>
+        {% include footer.html %}
+      </footer>    
+    </div>
+    <script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
+    <script src="{{ "/assets/js/footer.fix.js" | relative_url }}"></script>    
+  </body>
+</html>

data/_layouts/post.html

@@ -1,14 +1,14 @@
----
-layout: default
----
-
-<small>{{ page.date | date: "%-d %B %Y" }}</small>
-<h1>{{ page.title }}</h1>
-
-<p class="view">by {{ page.author | default: site.author }}</p>
-
-{{content}}
-
-{% if page.tags %}
-  <small>tags: <em>{{ page.tags | join: "</em> - <em>" }}</em></small>
-{% endif %}
+---
+layout: default
+---
+
+<small>{{ page.date | date: "%-d %B %Y" }}</small>
+<h1>{{ page.title }}</h1>
+
+<p class="view">by {{ page.author | default: site.author }}</p>
+
+{{content}}
+
+{% if page.tags %}
+  <small>tags: <em>{{ page.tags | join: "</em> - <em>" }}</em></small>
+{% endif %}

data/_sass/colors.scss

@@ -1,126 +1,126 @@
-/*
-H -> hue
-L -> luminosity
-S -> saturation
-clr -> color
-bg -> background
-hvr -> hover
-*/
-
-// colors
-:root {
-  // red
-  --code-d14:    #d14;
-  --code-aa0000: #aa0000;
-  --code-990000: #990000;
-  // cyan
-  --code-009999: #009999;
-  --code-008080: #008080;
-  --code-3c5d5d: #3c5d5d;
-  // green
-  --code-009926: #009926;
-  // pink
-  --code-990073: #990073;
-  --code-800080: #800080;
-  // purple
-  --code-445588: #445588;
-  // blue
-  --code-000080: #000080;
-  // grey
-  --code-aaaaaa: #aaaaaa;
-  --code-999999: #999999;
-  --code-888888: #888888;
-  --code-555555: #555555;
-}
-
-@mixin colors {  
-  // buttons
-  --L-a-text-hover-change: 0.8;//the number that --L-a-text gets changed by when it is hovered eg a button has 30% luminosity when left it luminosity is then timesed by 0.8 when the button is hovered
-  --clr-a-text: hsl(200, 100%, var(--L-a-text));
-  --clr-a-text-hvr: hsl(200, 100%, calc(var(--L-a-text) * var(--L-a-text-hover-change)));
-  --clr-buttons-main-bg: hsl(0, 0%, var(--L-buttons-main-bg));//the buttons in the main section at the top titled "download zip" "download tarbell" "veiw on github"
-  --clr-buttons-main-border: hsl(0, 0%, var(--L-buttons-main-border));
-  --clr-buttons-main-text: hsl(0, 0%, var(--L-buttons-main-text));
-  --clr-buttons-main-text-hover: hsl(0, 6%, var(--L-buttons-main-text-hover));
-  // headers + text
-  --clr-h1-and-bold: hsl(0, 0%, var(--L-h1-and-bold));
-  --clr-h2: hsl(0, 0%, var(--L-h2));
-  --clr-h-3-6: hsl(0, 0%, var(--L-h-3-6));
-  --clr-text: hsl(0, 0%, var(--L-text));
-  // code blocks
-  --clr-code-text: hsl(0, 0%, var(--L-code-text));
-  --clr-code-bg: hsl(0, 0%, var(--L-code-bg));
-  --clr-code-border: hsl(0, 0%, var(--L-code-border));
-  --clr-code-bold-text: hsl(0, 0%, var(--L-code-bold-text));
-  // kbd these are keyboard shortcuts eg <kbd>CMD+R</kbd>
-  --clr-kbd-bg: hsl(210, 25%, var(--L-kbd-bg));
-  --clr-kbd-border: hsl(212.7, 10.7%, var(--L-kbd-border));
-  --clr-kbd-border-bottom-and-shadow: hsl(210, 8.2%, var(--L-kbd-border-bottom-and-shadow));// akbd elemnts border bottom and its shadow color
-  --clr-kbd-text: hsl(210, 11.7%, var(--L-kbd-text));
-  // miscellaneous
-  --clr-bg: hsl(0, 0%, var(--L-bg));//the bg of the page
-  --clr-content-bg: hsl(0, 0%, var(--L-content-bg));//the bg of the content
-  --clr-splitter-blockquote-and-section: hsl(0, 0%, var(--L-splitter-blockquote-and-section));//a color for the lines that split tables, appear on the left pf blockquotes and mark new sections
-  --clr-small-in-a: hsl(0, 0%, var(--L-small-in-a));//the color for small elements in a's this color is used on the veiw on github button above the download buttons
-  --clr-table-header-and-dt: hsl(0, 0%, var(--L-table-header-and-dt)); //more info on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
-}
-
-@mixin light-colors {
-  // buttons
-  --L-a-text: 35%;
-  --L-buttons-main-bg: 96%;
-  --L-buttons-main-border: 88%;
-  --L-buttons-main-text: 40%;
-  --L-buttons-main-text-hover: 38%;
-  // headers + text
-  --L-h1-and-bold: 13%;
-  --L-h2: 22%;
-  --L-h-3-6: 29%;
-  --L-text-bold: 36%;
-  --L-text: 45%;
-  // code blocks
-  --L-code-text: 20%;
-  --L-code-bg: 97%;
-  --L-code-border: 90%;
-  --L-code-bold-text: 0%;
-  // kbds are keyboard shortcuts eg <kbd>CMD+R</kbd>
-  --L-kbd-bg: 98%;
-  --L-kbd-border: 80%;
-  --L-kbd-border-bottom-and-shadow: 62%;
-  --L-kbd-text: 30%;
-  // miscellaneous
-  --L-bg: 97%;
-  --L-content-bg: 100%;  
-  --L-splitter-blockquote-and-section: 90%;//for elements like hr + blockquote
-  --L-small-in-a: 47%;
-  --L-table-header-and-dt: 27%; //more on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
-}
-
-@mixin dark-colors {
-// buttons
---L-a-text: 60%;
---L-buttons-main-bg: 17%;
---L-buttons-main-border: 26%;
---L-buttons-main-text: 76%;
---L-buttons-main-text-hover: 80%;
-// headers + text
---L-h1-and-bold: 90%;
---L-h2: 83%;
---L-h-3-6: 76%;
---L-text: 70%;
-// code blocks  
---L-code-text: 80%;
---L-code-bg: 3%;
---L-code-border: 5%;
---L-code-bold-text: 100%;
-// kbds are keyboard shortcuts eg <kbd>CMD+R</kbd>
---L-kbd-bg: 30%;
---L-kbd-border: 45%;
---L-kbd-border-bottom-and-shadow: 55%;
---L-kbd-text: 100%;
-// miscellaneous
---L-splitter-blockquote-and-section: 15%;// for elements like hr and blockquote
---L-bg: 5%;
---L-content-bg: 8%;
---L-table-header-and-dt: 90%; //more on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
-}
+/*
+H -> hue
+L -> luminosity
+S -> saturation
+clr -> color
+bg -> background
+hvr -> hover
+*/
+
+// colors
+:root {
+  // red
+  --code-d14:    #d14;
+  --code-aa0000: #aa0000;
+  --code-990000: #990000;
+  // cyan
+  --code-009999: #009999;
+  --code-008080: #008080;
+  --code-3c5d5d: #3c5d5d;
+  // green
+  --code-009926: #009926;
+  // pink
+  --code-990073: #990073;
+  --code-800080: #800080;
+  // purple
+  --code-445588: #445588;
+  // blue
+  --code-000080: #000080;
+  // grey
+  --code-aaaaaa: #aaaaaa;
+  --code-999999: #999999;
+  --code-888888: #888888;
+  --code-555555: #555555;
+}
+
+@mixin colors {  
+  // buttons
+  --L-a-text-hover-change: 0.8;//the number that --L-a-text gets changed by when it is hovered eg a button has 30% luminosity when left it luminosity is then timesed by 0.8 when the button is hovered
+  --clr-a-text: hsl(200, 100%, var(--L-a-text));
+  --clr-a-text-hvr: hsl(200, 100%, calc(var(--L-a-text) * var(--L-a-text-hover-change)));
+  --clr-buttons-main-bg: hsl(0, 0%, var(--L-buttons-main-bg));//the buttons in the main section at the top titled "download zip" "download tarbell" "veiw on github"
+  --clr-buttons-main-border: hsl(0, 0%, var(--L-buttons-main-border));
+  --clr-buttons-main-text: hsl(0, 0%, var(--L-buttons-main-text));
+  --clr-buttons-main-text-hover: hsl(0, 6%, var(--L-buttons-main-text-hover));
+  // headers + text
+  --clr-h1-and-bold: hsl(0, 0%, var(--L-h1-and-bold));
+  --clr-h2: hsl(0, 0%, var(--L-h2));
+  --clr-h-3-6: hsl(0, 0%, var(--L-h-3-6));
+  --clr-text: hsl(0, 0%, var(--L-text));
+  // code blocks
+  --clr-code-text: hsl(0, 0%, var(--L-code-text));
+  --clr-code-bg: hsl(0, 0%, var(--L-code-bg));
+  --clr-code-border: hsl(0, 0%, var(--L-code-border));
+  --clr-code-bold-text: hsl(0, 0%, var(--L-code-bold-text));
+  // kbd these are keyboard shortcuts eg <kbd>CMD+R</kbd>
+  --clr-kbd-bg: hsl(210, 25%, var(--L-kbd-bg));
+  --clr-kbd-border: hsl(212.7, 10.7%, var(--L-kbd-border));
+  --clr-kbd-border-bottom-and-shadow: hsl(210, 8.2%, var(--L-kbd-border-bottom-and-shadow));// akbd elemnts border bottom and its shadow color
+  --clr-kbd-text: hsl(210, 11.7%, var(--L-kbd-text));
+  // miscellaneous
+  --clr-bg: hsl(0, 0%, var(--L-bg));//the bg of the page
+  --clr-content-bg: hsl(0, 0%, var(--L-content-bg));//the bg of the content
+  --clr-splitter-blockquote-and-section: hsl(0, 0%, var(--L-splitter-blockquote-and-section));//a color for the lines that split tables, appear on the left pf blockquotes and mark new sections
+  --clr-small-in-a: hsl(0, 0%, var(--L-small-in-a));//the color for small elements in a's this color is used on the veiw on github button above the download buttons
+  --clr-table-header-and-dt: hsl(0, 0%, var(--L-table-header-and-dt)); //more info on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
+}
+
+@mixin light-colors {
+  // buttons
+  --L-a-text: 35%;
+  --L-buttons-main-bg: 96%;
+  --L-buttons-main-border: 88%;
+  --L-buttons-main-text: 40%;
+  --L-buttons-main-text-hover: 38%;
+  // headers + text
+  --L-h1-and-bold: 13%;
+  --L-h2: 22%;
+  --L-h-3-6: 29%;
+  --L-text-bold: 36%;
+  --L-text: 45%;
+  // code blocks
+  --L-code-text: 20%;
+  --L-code-bg: 97%;
+  --L-code-border: 90%;
+  --L-code-bold-text: 0%;
+  // kbds are keyboard shortcuts eg <kbd>CMD+R</kbd>
+  --L-kbd-bg: 98%;
+  --L-kbd-border: 80%;
+  --L-kbd-border-bottom-and-shadow: 62%;
+  --L-kbd-text: 30%;
+  // miscellaneous
+  --L-bg: 97%;
+  --L-content-bg: 100%;  
+  --L-splitter-blockquote-and-section: 90%;//for elements like hr + blockquote
+  --L-small-in-a: 47%;
+  --L-table-header-and-dt: 27%; //more on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
+}
+
+@mixin dark-colors {
+// buttons
+--L-a-text: 60%;
+--L-buttons-main-bg: 17%;
+--L-buttons-main-border: 26%;
+--L-buttons-main-text: 76%;
+--L-buttons-main-text-hover: 80%;
+// headers + text
+--L-h1-and-bold: 90%;
+--L-h2: 83%;
+--L-h-3-6: 76%;
+--L-text: 70%;
+// code blocks  
+--L-code-text: 80%;
+--L-code-bg: 3%;
+--L-code-border: 5%;
+--L-code-bold-text: 100%;
+// kbds are keyboard shortcuts eg <kbd>CMD+R</kbd>
+--L-kbd-bg: 30%;
+--L-kbd-border: 45%;
+--L-kbd-border-bottom-and-shadow: 55%;
+--L-kbd-text: 100%;
+// miscellaneous
+--L-splitter-blockquote-and-section: 15%;// for elements like hr and blockquote
+--L-bg: 5%;
+--L-content-bg: 8%;
+--L-table-header-and-dt: 90%; //more on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
+}