jekyll-theme-penumbra 0.1.0 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/LICENSE +20 -20
- data/README.md +26 -26
- data/_config.yml +20 -20
- data/_includes/color-scheme.html +7 -7
- data/_includes/head-custom-google-analytics.html +10 -10
- data/_includes/head-custom.html +12 -12
- data/_includes/header.html +16 -16
- data/_includes/ie-support.html +2 -2
- data/_includes/links-mobile.html +6 -6
- data/_includes/sidebar.html +8 -8
- data/_layouts/default.html +35 -35
- data/_layouts/post.html +14 -14
- data/_sass/colors.scss +126 -126
- data/_sass/fonts.scss +55 -55
- data/_sass/jekyll-theme-penumbra.scss +360 -360
- data/_sass/penumbra.scss +4 -4
- data/_sass/rouge-github.scss +219 -219
- data/assets/css/colors-auto-default-dark.scss +16 -16
- data/assets/css/colors-auto.scss +14 -14
- data/assets/css/colors-dark.scss +14 -14
- data/assets/css/colors-light.scss +8 -8
- data/assets/css/style.scss +75 -75
- data/assets/fonts/Noto-Sans-700/Noto-Sans-700.svg +336 -336
- data/assets/fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg +334 -334
- data/assets/fonts/Noto-Sans-italic/Noto-Sans-italic.svg +337 -337
- data/assets/fonts/Noto-Sans-regular/Noto-Sans-regular.svg +335 -335
- data/assets/js/footer.fix.js +15 -15
- data/assets/js/scale.fix.js +27 -27
- metadata +8 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b12562c96f2c223d05738f4af8e4abee02550dbeb16cbbbfa4d8bca757bf45a1
|
4
|
+
data.tar.gz: 95b0f65bdf3a1e92a56cd3ab67c63e8de7e6864020caed13fa8a83f4949e78a0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3b76364659a2d641816f9f33fd90947a076f6d30c2a72215d36a51e7eb175b0d513c3c8aaf1f69a8db2258367f6d8d8c7e465302cf097967e292edb14a588728
|
7
|
+
data.tar.gz: bdf7f3d527fdf6de31398c0f8afc0c74c8254e3bc43cc629136ebd06b9ec28350d374adacb2fe0baaa89a49dfd64d4de270b2b19bf8e5e73eb1996631c0d1e8f
|
data/LICENSE
CHANGED
@@ -1,21 +1,21 @@
|
|
1
|
-
MIT License
|
2
|
-
|
3
|
-
Copyright (c) 2022 Cvtx
|
4
|
-
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
7
|
-
in the Software without restriction, including without limitation the rights
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
10
|
-
furnished to do so, subject to the following conditions:
|
11
|
-
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
13
|
-
copies or substantial portions of the Software.
|
14
|
-
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2022 Cvtx
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
21
|
SOFTWARE.
|
data/README.md
CHANGED
@@ -1,26 +1,26 @@
|
|
1
|
-
# Penumbra Jekyll Theme
|
2
|
-
|
3
|
-
*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).*
|
4
|
-
|
5
|
-
## Usage
|
6
|
-
|
7
|
-
To use the Penumrba theme:
|
8
|
-
|
9
|
-
1. Add the following to your site's `_config.yml`:
|
10
|
-
|
11
|
-
```yml
|
12
|
-
remote_theme: Cvtx/penumbra
|
13
|
-
plugins:
|
14
|
-
- jekyll-remote-theme # add this line to the plugins list if you already have one
|
15
|
-
```
|
16
|
-
|
17
|
-
2. Optionally, if you'd like to preview your site on your computer, add the following to your site's `Gemfile`:
|
18
|
-
|
19
|
-
```ruby
|
20
|
-
gem "github-pages", group: :jekyll_plugins
|
21
|
-
```
|
22
|
-
|
23
|
-
## License
|
24
|
-
|
25
|
-
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
26
|
-
|
1
|
+
# Penumbra Jekyll Theme
|
2
|
+
|
3
|
+
*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).*
|
4
|
+
|
5
|
+
## Usage
|
6
|
+
|
7
|
+
To use the Penumrba theme:
|
8
|
+
|
9
|
+
1. Add the following to your site's `_config.yml`:
|
10
|
+
|
11
|
+
```yml
|
12
|
+
remote_theme: Cvtx/penumbra
|
13
|
+
plugins:
|
14
|
+
- jekyll-remote-theme # add this line to the plugins list if you already have one
|
15
|
+
```
|
16
|
+
|
17
|
+
2. Optionally, if you'd like to preview your site on your computer, add the following to your site's `Gemfile`:
|
18
|
+
|
19
|
+
```ruby
|
20
|
+
gem "github-pages", group: :jekyll_plugins
|
21
|
+
```
|
22
|
+
|
23
|
+
## License
|
24
|
+
|
25
|
+
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
26
|
+
|
data/_config.yml
CHANGED
@@ -1,20 +1,20 @@
|
|
1
|
-
title: Penumbra Theme
|
2
|
-
description: Penumbra is a theme for GitHub Pages.
|
3
|
-
logo: /assets/img/logo.png
|
4
|
-
google_analytics:
|
5
|
-
show_downloads: true
|
6
|
-
color-scheme: auto
|
7
|
-
|
8
|
-
plugins:
|
9
|
-
- jekyll-sitemap
|
10
|
-
- jekyll-seo-tag
|
11
|
-
|
12
|
-
sidebar:
|
13
|
-
- name: GitHub
|
14
|
-
icon: <i class="fa-brands fa-github"></i>
|
15
|
-
link: https://github.com/Cvtx/penumbra
|
16
|
-
- name: Blog
|
17
|
-
icon: <i class="fa-solid fa-pen"></i>
|
18
|
-
link: https://cvtx.github.io/blog/
|
19
|
-
|
20
|
-
github: [metadata]
|
1
|
+
title: Penumbra Theme
|
2
|
+
description: Penumbra is a theme for GitHub Pages.
|
3
|
+
logo: /assets/img/logo.png
|
4
|
+
google_analytics:
|
5
|
+
show_downloads: true
|
6
|
+
color-scheme: auto
|
7
|
+
remote_theme: cvtx/penumbra
|
8
|
+
plugins:
|
9
|
+
- jekyll-sitemap
|
10
|
+
- jekyll-seo-tag
|
11
|
+
|
12
|
+
sidebar:
|
13
|
+
- name: GitHub
|
14
|
+
icon: <i class="fa-brands fa-github"></i>
|
15
|
+
link: https://github.com/Cvtx/penumbra
|
16
|
+
- name: Blog
|
17
|
+
icon: <i class="fa-solid fa-pen"></i>
|
18
|
+
link: https://cvtx.github.io/blog/
|
19
|
+
|
20
|
+
github: [metadata]
|
data/_includes/color-scheme.html
CHANGED
@@ -1,8 +1,8 @@
|
|
1
|
-
{% case site.color-scheme %}
|
2
|
-
{% when "", nil, false, 0, empty %}
|
3
|
-
{% assign ColorScheme = "auto" %}
|
4
|
-
{% else %}
|
5
|
-
{% assign ColorScheme = site.color-scheme %}
|
6
|
-
{% endcase %}
|
7
|
-
|
1
|
+
{% case site.color-scheme %}
|
2
|
+
{% when "", nil, false, 0, empty %}
|
3
|
+
{% assign ColorScheme = "auto" %}
|
4
|
+
{% else %}
|
5
|
+
{% assign ColorScheme = site.color-scheme %}
|
6
|
+
{% endcase %}
|
7
|
+
|
8
8
|
<link rel="stylesheet" href="{{ "/assets/css/colors-ColorScheme.css?v=" | replace: "ColorScheme", ColorScheme | append: site.github.build_revision | relative_url }}">
|
@@ -1,10 +1,10 @@
|
|
1
|
-
{% if site.google_analytics %}
|
2
|
-
<script>
|
3
|
-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
4
|
-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
5
|
-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
6
|
-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
7
|
-
ga('create', '{{ site.google_analytics }}', 'auto');
|
8
|
-
ga('send', 'pageview');
|
9
|
-
</script>
|
10
|
-
{% endif %}
|
1
|
+
{% if site.google_analytics %}
|
2
|
+
<script>
|
3
|
+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
4
|
+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
5
|
+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
6
|
+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
7
|
+
ga('create', '{{ site.google_analytics }}', 'auto');
|
8
|
+
ga('send', 'pageview');
|
9
|
+
</script>
|
10
|
+
{% endif %}
|
data/_includes/head-custom.html
CHANGED
@@ -1,12 +1,12 @@
|
|
1
|
-
<!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
|
2
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
|
3
|
-
|
4
|
-
<!-- Setup Google Analytics -->
|
5
|
-
{% include head-custom-google-analytics.html %}
|
6
|
-
|
7
|
-
<!-- You can set your favicon here -->
|
8
|
-
{% if site.favicon %}
|
9
|
-
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}">
|
10
|
-
{% endif %}
|
11
|
-
|
12
|
-
<!-- end custom head snippets -->
|
1
|
+
<!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
|
2
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
|
3
|
+
|
4
|
+
<!-- Setup Google Analytics -->
|
5
|
+
{% include head-custom-google-analytics.html %}
|
6
|
+
|
7
|
+
<!-- You can set your favicon here -->
|
8
|
+
{% if site.favicon %}
|
9
|
+
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}">
|
10
|
+
{% endif %}
|
11
|
+
|
12
|
+
<!-- end custom head snippets -->
|
data/_includes/header.html
CHANGED
@@ -1,17 +1,17 @@
|
|
1
|
-
{% if site.logo %}
|
2
|
-
<img class="img-circle" src="{{site.logo | relative_url}}" alt="Logo">
|
3
|
-
{% endif %}
|
4
|
-
|
5
|
-
{% if site.blank_title %}
|
6
|
-
<h1>{{ site.title | default: site.github.repository_name }}</h1>
|
7
|
-
{% else %}
|
8
|
-
<h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repository_name }}</a></h1>
|
9
|
-
{% endif %}
|
10
|
-
|
11
|
-
{% if site.email %}
|
12
|
-
<p class="addr"><i class="fa-regular fa-envelope"></i> {{ site.email }}</p>
|
13
|
-
{% endif %}
|
14
|
-
|
15
|
-
<p>{{ site.description | default: site.github.project_tagline }}</p>
|
16
|
-
|
1
|
+
{% if site.logo %}
|
2
|
+
<img class="img-circle" src="{{site.logo | relative_url}}" alt="Logo">
|
3
|
+
{% endif %}
|
4
|
+
|
5
|
+
{% if site.blank_title %}
|
6
|
+
<h1>{{ site.title | default: site.github.repository_name }}</h1>
|
7
|
+
{% else %}
|
8
|
+
<h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repository_name }}</a></h1>
|
9
|
+
{% endif %}
|
10
|
+
|
11
|
+
{% if site.email %}
|
12
|
+
<p class="addr"><i class="fa-regular fa-envelope"></i> {{ site.email }}</p>
|
13
|
+
{% endif %}
|
14
|
+
|
15
|
+
<p>{{ site.description | default: site.github.project_tagline }}</p>
|
16
|
+
|
17
17
|
{% include sidebar.html %}
|
data/_includes/ie-support.html
CHANGED
@@ -1,3 +1,3 @@
|
|
1
|
-
<!--[if lt IE 9]>
|
2
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
|
1
|
+
<!--[if lt IE 9]>
|
2
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
|
3
3
|
<![endif]-->
|
data/_includes/links-mobile.html
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
<div class="link-wrapper-mobile" id="link-wrapper-mobile">
|
2
|
-
{%- for platform in site.sidebar %}
|
3
|
-
<nobr><a href="{{ platform.link }}" rel="me">{{ platform.icon }} {{ platform.name }}</a>
|
4
|
-
{%- unless forloop.last %}<span style="margin-left: 6px;"></span>{% endunless %}</nobr>
|
5
|
-
{%- endfor %}
|
6
|
-
</div>
|
1
|
+
<div class="link-wrapper-mobile" id="link-wrapper-mobile">
|
2
|
+
{%- for platform in site.sidebar %}
|
3
|
+
<nobr><a href="{{ platform.link }}" rel="me">{{ platform.icon }} {{ platform.name }}</a>
|
4
|
+
{%- unless forloop.last %}<span style="margin-left: 6px;"></span>{% endunless %}</nobr>
|
5
|
+
{%- endfor %}
|
6
|
+
</div>
|
data/_includes/sidebar.html
CHANGED
@@ -1,8 +1,8 @@
|
|
1
|
-
<div class="link-wrapper">
|
2
|
-
<ul class="link">
|
3
|
-
{%- for platform in site.sidebar %}
|
4
|
-
<!-- <li><a href="{{ platform.link }}"><i class="{{ platform.icon }}"></i> {{ platform.name }}</a></li> -->
|
5
|
-
<li><a href="{{ platform.link }}">{{ platform.icon }} {{ platform.name }}</a></li>
|
6
|
-
{%- endfor %}
|
7
|
-
</ul>
|
8
|
-
</div>
|
1
|
+
<div class="link-wrapper">
|
2
|
+
<ul class="link">
|
3
|
+
{%- for platform in site.sidebar %}
|
4
|
+
<!-- <li><a href="{{ platform.link }}"><i class="{{ platform.icon }}"></i> {{ platform.name }}</a></li> -->
|
5
|
+
<li><a href="{{ platform.link }}">{{ platform.icon }} {{ platform.name }}</a></li>
|
6
|
+
{%- endfor %}
|
7
|
+
</ul>
|
8
|
+
</div>
|
data/_layouts/default.html
CHANGED
@@ -1,35 +1,35 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="{{ site.lang | default: "en-US" }}">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
7
|
-
{% seo %}
|
8
|
-
{% include color-scheme.html %}
|
9
|
-
<link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
|
10
|
-
<link rel="preload" href="{{site.logo | relative_url}}" as="image">
|
11
|
-
{% include ie-support.html %}
|
12
|
-
{% include head-custom.html %}
|
13
|
-
</head>
|
14
|
-
<body>
|
15
|
-
<div class="wrapper">
|
16
|
-
<div class="sidebar">
|
17
|
-
<header>
|
18
|
-
{% include header.html %}
|
19
|
-
</header>
|
20
|
-
{% include links-mobile.html %}
|
21
|
-
<div class="sidebar-footer">
|
22
|
-
{% include footer.html %}
|
23
|
-
</div>
|
24
|
-
</div>
|
25
|
-
<section>
|
26
|
-
{{ content }}
|
27
|
-
</section>
|
28
|
-
<footer>
|
29
|
-
{% include footer.html %}
|
30
|
-
</footer>
|
31
|
-
</div>
|
32
|
-
<script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
|
33
|
-
<script src="{{ "/assets/js/footer.fix.js" | relative_url }}"></script>
|
34
|
-
</body>
|
35
|
-
</html>
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="{{ site.lang | default: "en-US" }}">
|
3
|
+
<head>
|
4
|
+
<meta charset="UTF-8">
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
7
|
+
{% seo %}
|
8
|
+
{% include color-scheme.html %}
|
9
|
+
<link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
|
10
|
+
<link rel="preload" href="{{site.logo | relative_url}}" as="image">
|
11
|
+
{% include ie-support.html %}
|
12
|
+
{% include head-custom.html %}
|
13
|
+
</head>
|
14
|
+
<body>
|
15
|
+
<div class="wrapper">
|
16
|
+
<div class="sidebar">
|
17
|
+
<header>
|
18
|
+
{% include header.html %}
|
19
|
+
</header>
|
20
|
+
{% include links-mobile.html %}
|
21
|
+
<div class="sidebar-footer">
|
22
|
+
{% include footer.html %}
|
23
|
+
</div>
|
24
|
+
</div>
|
25
|
+
<section>
|
26
|
+
{{ content }}
|
27
|
+
</section>
|
28
|
+
<footer>
|
29
|
+
{% include footer.html %}
|
30
|
+
</footer>
|
31
|
+
</div>
|
32
|
+
<script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
|
33
|
+
<script src="{{ "/assets/js/footer.fix.js" | relative_url }}"></script>
|
34
|
+
</body>
|
35
|
+
</html>
|
data/_layouts/post.html
CHANGED
@@ -1,14 +1,14 @@
|
|
1
|
-
---
|
2
|
-
layout: default
|
3
|
-
---
|
4
|
-
|
5
|
-
<small>{{ page.date | date: "%-d %B %Y" }}</small>
|
6
|
-
<h1>{{ page.title }}</h1>
|
7
|
-
|
8
|
-
<p class="view">by {{ page.author | default: site.author }}</p>
|
9
|
-
|
10
|
-
{{content}}
|
11
|
-
|
12
|
-
{% if page.tags %}
|
13
|
-
<small>tags: <em>{{ page.tags | join: "</em> - <em>" }}</em></small>
|
14
|
-
{% endif %}
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
|
5
|
+
<small>{{ page.date | date: "%-d %B %Y" }}</small>
|
6
|
+
<h1>{{ page.title }}</h1>
|
7
|
+
|
8
|
+
<p class="view">by {{ page.author | default: site.author }}</p>
|
9
|
+
|
10
|
+
{{content}}
|
11
|
+
|
12
|
+
{% if page.tags %}
|
13
|
+
<small>tags: <em>{{ page.tags | join: "</em> - <em>" }}</em></small>
|
14
|
+
{% endif %}
|
data/_sass/colors.scss
CHANGED
@@ -1,126 +1,126 @@
|
|
1
|
-
/*
|
2
|
-
H -> hue
|
3
|
-
L -> luminosity
|
4
|
-
S -> saturation
|
5
|
-
clr -> color
|
6
|
-
bg -> background
|
7
|
-
hvr -> hover
|
8
|
-
*/
|
9
|
-
|
10
|
-
// colors
|
11
|
-
:root {
|
12
|
-
// red
|
13
|
-
--code-d14: #d14;
|
14
|
-
--code-aa0000: #aa0000;
|
15
|
-
--code-990000: #990000;
|
16
|
-
// cyan
|
17
|
-
--code-009999: #009999;
|
18
|
-
--code-008080: #008080;
|
19
|
-
--code-3c5d5d: #3c5d5d;
|
20
|
-
// green
|
21
|
-
--code-009926: #009926;
|
22
|
-
// pink
|
23
|
-
--code-990073: #990073;
|
24
|
-
--code-800080: #800080;
|
25
|
-
// purple
|
26
|
-
--code-445588: #445588;
|
27
|
-
// blue
|
28
|
-
--code-000080: #000080;
|
29
|
-
// grey
|
30
|
-
--code-aaaaaa: #aaaaaa;
|
31
|
-
--code-999999: #999999;
|
32
|
-
--code-888888: #888888;
|
33
|
-
--code-555555: #555555;
|
34
|
-
}
|
35
|
-
|
36
|
-
@mixin colors {
|
37
|
-
// buttons
|
38
|
-
--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
|
39
|
-
--clr-a-text: hsl(200, 100%, var(--L-a-text));
|
40
|
-
--clr-a-text-hvr: hsl(200, 100%, calc(var(--L-a-text) * var(--L-a-text-hover-change)));
|
41
|
-
--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"
|
42
|
-
--clr-buttons-main-border: hsl(0, 0%, var(--L-buttons-main-border));
|
43
|
-
--clr-buttons-main-text: hsl(0, 0%, var(--L-buttons-main-text));
|
44
|
-
--clr-buttons-main-text-hover: hsl(0, 6%, var(--L-buttons-main-text-hover));
|
45
|
-
// headers + text
|
46
|
-
--clr-h1-and-bold: hsl(0, 0%, var(--L-h1-and-bold));
|
47
|
-
--clr-h2: hsl(0, 0%, var(--L-h2));
|
48
|
-
--clr-h-3-6: hsl(0, 0%, var(--L-h-3-6));
|
49
|
-
--clr-text: hsl(0, 0%, var(--L-text));
|
50
|
-
// code blocks
|
51
|
-
--clr-code-text: hsl(0, 0%, var(--L-code-text));
|
52
|
-
--clr-code-bg: hsl(0, 0%, var(--L-code-bg));
|
53
|
-
--clr-code-border: hsl(0, 0%, var(--L-code-border));
|
54
|
-
--clr-code-bold-text: hsl(0, 0%, var(--L-code-bold-text));
|
55
|
-
// kbd these are keyboard shortcuts eg <kbd>CMD+R</kbd>
|
56
|
-
--clr-kbd-bg: hsl(210, 25%, var(--L-kbd-bg));
|
57
|
-
--clr-kbd-border: hsl(212.7, 10.7%, var(--L-kbd-border));
|
58
|
-
--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
|
59
|
-
--clr-kbd-text: hsl(210, 11.7%, var(--L-kbd-text));
|
60
|
-
// miscellaneous
|
61
|
-
--clr-bg: hsl(0, 0%, var(--L-bg));//the bg of the page
|
62
|
-
--clr-content-bg: hsl(0, 0%, var(--L-content-bg));//the bg of the content
|
63
|
-
--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
|
64
|
-
--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
|
65
|
-
--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
|
66
|
-
}
|
67
|
-
|
68
|
-
@mixin light-colors {
|
69
|
-
// buttons
|
70
|
-
--L-a-text: 35%;
|
71
|
-
--L-buttons-main-bg: 96%;
|
72
|
-
--L-buttons-main-border: 88%;
|
73
|
-
--L-buttons-main-text: 40%;
|
74
|
-
--L-buttons-main-text-hover: 38%;
|
75
|
-
// headers + text
|
76
|
-
--L-h1-and-bold: 13%;
|
77
|
-
--L-h2: 22%;
|
78
|
-
--L-h-3-6: 29%;
|
79
|
-
--L-text-bold: 36%;
|
80
|
-
--L-text: 45%;
|
81
|
-
// code blocks
|
82
|
-
--L-code-text: 20%;
|
83
|
-
--L-code-bg: 97%;
|
84
|
-
--L-code-border: 90%;
|
85
|
-
--L-code-bold-text: 0%;
|
86
|
-
// kbds are keyboard shortcuts eg <kbd>CMD+R</kbd>
|
87
|
-
--L-kbd-bg: 98%;
|
88
|
-
--L-kbd-border: 80%;
|
89
|
-
--L-kbd-border-bottom-and-shadow: 62%;
|
90
|
-
--L-kbd-text: 30%;
|
91
|
-
// miscellaneous
|
92
|
-
--L-bg: 97%;
|
93
|
-
--L-content-bg: 100%;
|
94
|
-
--L-splitter-blockquote-and-section: 90%;//for elements like hr + blockquote
|
95
|
-
--L-small-in-a: 47%;
|
96
|
-
--L-table-header-and-dt: 27%; //more on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
|
97
|
-
}
|
98
|
-
|
99
|
-
@mixin dark-colors {
|
100
|
-
// buttons
|
101
|
-
--L-a-text: 60%;
|
102
|
-
--L-buttons-main-bg: 17%;
|
103
|
-
--L-buttons-main-border: 26%;
|
104
|
-
--L-buttons-main-text: 76%;
|
105
|
-
--L-buttons-main-text-hover: 80%;
|
106
|
-
// headers + text
|
107
|
-
--L-h1-and-bold: 90%;
|
108
|
-
--L-h2: 83%;
|
109
|
-
--L-h-3-6: 76%;
|
110
|
-
--L-text: 70%;
|
111
|
-
// code blocks
|
112
|
-
--L-code-text: 80%;
|
113
|
-
--L-code-bg: 3%;
|
114
|
-
--L-code-border: 5%;
|
115
|
-
--L-code-bold-text: 100%;
|
116
|
-
// kbds are keyboard shortcuts eg <kbd>CMD+R</kbd>
|
117
|
-
--L-kbd-bg: 30%;
|
118
|
-
--L-kbd-border: 45%;
|
119
|
-
--L-kbd-border-bottom-and-shadow: 55%;
|
120
|
-
--L-kbd-text: 100%;
|
121
|
-
// miscellaneous
|
122
|
-
--L-splitter-blockquote-and-section: 15%;// for elements like hr and blockquote
|
123
|
-
--L-bg: 5%;
|
124
|
-
--L-content-bg: 8%;
|
125
|
-
--L-table-header-and-dt: 90%; //more on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
|
126
|
-
}
|
1
|
+
/*
|
2
|
+
H -> hue
|
3
|
+
L -> luminosity
|
4
|
+
S -> saturation
|
5
|
+
clr -> color
|
6
|
+
bg -> background
|
7
|
+
hvr -> hover
|
8
|
+
*/
|
9
|
+
|
10
|
+
// colors
|
11
|
+
:root {
|
12
|
+
// red
|
13
|
+
--code-d14: #d14;
|
14
|
+
--code-aa0000: #aa0000;
|
15
|
+
--code-990000: #990000;
|
16
|
+
// cyan
|
17
|
+
--code-009999: #009999;
|
18
|
+
--code-008080: #008080;
|
19
|
+
--code-3c5d5d: #3c5d5d;
|
20
|
+
// green
|
21
|
+
--code-009926: #009926;
|
22
|
+
// pink
|
23
|
+
--code-990073: #990073;
|
24
|
+
--code-800080: #800080;
|
25
|
+
// purple
|
26
|
+
--code-445588: #445588;
|
27
|
+
// blue
|
28
|
+
--code-000080: #000080;
|
29
|
+
// grey
|
30
|
+
--code-aaaaaa: #aaaaaa;
|
31
|
+
--code-999999: #999999;
|
32
|
+
--code-888888: #888888;
|
33
|
+
--code-555555: #555555;
|
34
|
+
}
|
35
|
+
|
36
|
+
@mixin colors {
|
37
|
+
// buttons
|
38
|
+
--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
|
39
|
+
--clr-a-text: hsl(200, 100%, var(--L-a-text));
|
40
|
+
--clr-a-text-hvr: hsl(200, 100%, calc(var(--L-a-text) * var(--L-a-text-hover-change)));
|
41
|
+
--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"
|
42
|
+
--clr-buttons-main-border: hsl(0, 0%, var(--L-buttons-main-border));
|
43
|
+
--clr-buttons-main-text: hsl(0, 0%, var(--L-buttons-main-text));
|
44
|
+
--clr-buttons-main-text-hover: hsl(0, 6%, var(--L-buttons-main-text-hover));
|
45
|
+
// headers + text
|
46
|
+
--clr-h1-and-bold: hsl(0, 0%, var(--L-h1-and-bold));
|
47
|
+
--clr-h2: hsl(0, 0%, var(--L-h2));
|
48
|
+
--clr-h-3-6: hsl(0, 0%, var(--L-h-3-6));
|
49
|
+
--clr-text: hsl(0, 0%, var(--L-text));
|
50
|
+
// code blocks
|
51
|
+
--clr-code-text: hsl(0, 0%, var(--L-code-text));
|
52
|
+
--clr-code-bg: hsl(0, 0%, var(--L-code-bg));
|
53
|
+
--clr-code-border: hsl(0, 0%, var(--L-code-border));
|
54
|
+
--clr-code-bold-text: hsl(0, 0%, var(--L-code-bold-text));
|
55
|
+
// kbd these are keyboard shortcuts eg <kbd>CMD+R</kbd>
|
56
|
+
--clr-kbd-bg: hsl(210, 25%, var(--L-kbd-bg));
|
57
|
+
--clr-kbd-border: hsl(212.7, 10.7%, var(--L-kbd-border));
|
58
|
+
--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
|
59
|
+
--clr-kbd-text: hsl(210, 11.7%, var(--L-kbd-text));
|
60
|
+
// miscellaneous
|
61
|
+
--clr-bg: hsl(0, 0%, var(--L-bg));//the bg of the page
|
62
|
+
--clr-content-bg: hsl(0, 0%, var(--L-content-bg));//the bg of the content
|
63
|
+
--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
|
64
|
+
--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
|
65
|
+
--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
|
66
|
+
}
|
67
|
+
|
68
|
+
@mixin light-colors {
|
69
|
+
// buttons
|
70
|
+
--L-a-text: 35%;
|
71
|
+
--L-buttons-main-bg: 96%;
|
72
|
+
--L-buttons-main-border: 88%;
|
73
|
+
--L-buttons-main-text: 40%;
|
74
|
+
--L-buttons-main-text-hover: 38%;
|
75
|
+
// headers + text
|
76
|
+
--L-h1-and-bold: 13%;
|
77
|
+
--L-h2: 22%;
|
78
|
+
--L-h-3-6: 29%;
|
79
|
+
--L-text-bold: 36%;
|
80
|
+
--L-text: 45%;
|
81
|
+
// code blocks
|
82
|
+
--L-code-text: 20%;
|
83
|
+
--L-code-bg: 97%;
|
84
|
+
--L-code-border: 90%;
|
85
|
+
--L-code-bold-text: 0%;
|
86
|
+
// kbds are keyboard shortcuts eg <kbd>CMD+R</kbd>
|
87
|
+
--L-kbd-bg: 98%;
|
88
|
+
--L-kbd-border: 80%;
|
89
|
+
--L-kbd-border-bottom-and-shadow: 62%;
|
90
|
+
--L-kbd-text: 30%;
|
91
|
+
// miscellaneous
|
92
|
+
--L-bg: 97%;
|
93
|
+
--L-content-bg: 100%;
|
94
|
+
--L-splitter-blockquote-and-section: 90%;//for elements like hr + blockquote
|
95
|
+
--L-small-in-a: 47%;
|
96
|
+
--L-table-header-and-dt: 27%; //more on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
|
97
|
+
}
|
98
|
+
|
99
|
+
@mixin dark-colors {
|
100
|
+
// buttons
|
101
|
+
--L-a-text: 60%;
|
102
|
+
--L-buttons-main-bg: 17%;
|
103
|
+
--L-buttons-main-border: 26%;
|
104
|
+
--L-buttons-main-text: 76%;
|
105
|
+
--L-buttons-main-text-hover: 80%;
|
106
|
+
// headers + text
|
107
|
+
--L-h1-and-bold: 90%;
|
108
|
+
--L-h2: 83%;
|
109
|
+
--L-h-3-6: 76%;
|
110
|
+
--L-text: 70%;
|
111
|
+
// code blocks
|
112
|
+
--L-code-text: 80%;
|
113
|
+
--L-code-bg: 3%;
|
114
|
+
--L-code-border: 5%;
|
115
|
+
--L-code-bold-text: 100%;
|
116
|
+
// kbds are keyboard shortcuts eg <kbd>CMD+R</kbd>
|
117
|
+
--L-kbd-bg: 30%;
|
118
|
+
--L-kbd-border: 45%;
|
119
|
+
--L-kbd-border-bottom-and-shadow: 55%;
|
120
|
+
--L-kbd-text: 100%;
|
121
|
+
// miscellaneous
|
122
|
+
--L-splitter-blockquote-and-section: 15%;// for elements like hr and blockquote
|
123
|
+
--L-bg: 5%;
|
124
|
+
--L-content-bg: 8%;
|
125
|
+
--L-table-header-and-dt: 90%; //more on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
|
126
|
+
}
|