dark-blog-theme 2.1.0 → 3.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/_includes/head.html +22 -11
- data/_includes/header.html +21 -21
- data/_includes/navrail.html +34 -0
- data/_includes/theme_selector.html +35 -0
- data/_layouts/default.html +2 -0
- data/_layouts/home.html +2 -2
- data/_sass/minima/_base.scss +17 -9
- data/_sass/minima/_layout.scss +18 -35
- data/_sass/minima/_mysass.scss +126 -0
- data/_sass/minima.scss +2 -1
- data/assets/theme-assets/js/theme.js +19 -7
- data/assets/theme-assets/theme-icons/categories.svg +1 -0
- data/assets/theme-assets/theme-icons/home.svg +6 -0
- data/assets/theme-assets/theme-icons/info.svg +1 -0
- data/assets/theme-assets/theme-images/border-thick.svg +16 -0
- metadata +8 -2
- data/_includes/theme_picker.html +0 -78
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ccf16e5b8629ab4efd7fda1447c30a26aac7a50ea476f89932ef52ce89257206
|
|
4
|
+
data.tar.gz: 1c0c5e41ac8fa192d19ac81ab2f72e10f4fbc0c5ab768064a7009ef98b7f09ac
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 22da24400c4c1c4758a9962ca05e2b35dd73040674067590f8ae9eb6373a778dcc11911b7edbc2b78aeb1b2207e8529a25a2cd6606efebe4ccadb0f47073bd20
|
|
7
|
+
data.tar.gz: 1e50efe1bd57cf20b53db5bb3240210826689b790e45d5a9fdabcddf6f61c4eecfe4bca245d15886e14c4a19da93773a3d78d11acfe9c41b4e5b1530059710c5
|
data/README.md
CHANGED
data/_includes/head.html
CHANGED
|
@@ -1,27 +1,38 @@
|
|
|
1
1
|
<head>
|
|
2
|
-
<meta charset="utf-8"
|
|
3
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge"
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1"
|
|
2
|
+
<meta charset="utf-8">
|
|
3
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
5
5
|
<link
|
|
6
6
|
rel="preload"
|
|
7
7
|
href="/assets/theme-assets/theme-fonts/Virgil.woff2"
|
|
8
8
|
as="font"
|
|
9
9
|
type="font/woff2"
|
|
10
10
|
crossorigin
|
|
11
|
-
|
|
11
|
+
>
|
|
12
|
+
{% comment %} {%- seo -%} {% endcomment %}
|
|
12
13
|
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
|
|
13
14
|
<script>
|
|
14
|
-
const
|
|
15
|
-
|
|
15
|
+
const colors = {
|
|
16
|
+
'dark-pink': '#f0b3e7',
|
|
17
|
+
'dark-green': '#b1d18a',
|
|
18
|
+
'dark-yellow': '#dbc66e',
|
|
19
|
+
'dark-blue': '#aac7ff',
|
|
20
|
+
'dark-cyan': '#81d5cd',
|
|
21
|
+
};
|
|
22
|
+
const root = document.querySelector('html');
|
|
23
|
+
const theme = window.localStorage.getItem('theme');
|
|
16
24
|
if (theme === null) {
|
|
17
|
-
window.localStorage.setItem(
|
|
18
|
-
root.className =
|
|
25
|
+
window.localStorage.setItem('theme', 'dark-pink');
|
|
26
|
+
root.className = 'dark-pink';
|
|
27
|
+
root.style.setProperty('--current-color', colors['dark-pink']);
|
|
19
28
|
} else {
|
|
20
29
|
root.className = theme;
|
|
30
|
+
root.style.setProperty('--current-color', colors[theme]);
|
|
21
31
|
}
|
|
22
32
|
</script>
|
|
23
33
|
<script src="/assets/theme-assets/js/theme.js" defer></script>
|
|
24
|
-
{% comment %} {%- feed_meta -%} {% endcomment %}
|
|
25
|
-
'production' and site.google_analytics -%}
|
|
26
|
-
|
|
34
|
+
{% comment %} {%- feed_meta -%} {% endcomment %}
|
|
35
|
+
{%- if jekyll.environment == 'production' and site.google_analytics -%}
|
|
36
|
+
{%- include google-analytics.html -%}
|
|
37
|
+
{%- endif -%}
|
|
27
38
|
</head>
|
data/_includes/header.html
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
<header class="site-header" role="banner">
|
|
2
|
-
{%- include
|
|
2
|
+
{%- include theme_selector.html -%}
|
|
3
3
|
|
|
4
4
|
<div class="wrapper header-container">
|
|
5
5
|
{%- assign default_paths = site.pages | map: 'path' -%}
|
|
6
6
|
{%- assign page_paths = site.header_pages | default: default_paths -%}
|
|
7
7
|
|
|
8
8
|
<a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
|
|
9
|
-
<img class="logo" src="{{- "assets/theme-assets/theme-images/logo.svg" | relative_url -}}">
|
|
10
|
-
{%- if page_paths -%}
|
|
11
|
-
<nav class="site-nav">
|
|
12
|
-
<input type="checkbox" id="nav-trigger" class="nav-trigger">
|
|
13
|
-
<label for="nav-trigger">
|
|
14
|
-
<span class="menu-icon">
|
|
15
|
-
<img src="{{- "assets/theme-assets/theme-images/menu.svg" | relative_url -}}" alt="menu-icon">
|
|
16
|
-
</span>
|
|
17
|
-
</label>
|
|
18
|
-
|
|
19
|
-
<div class="trigger">
|
|
20
|
-
{%- for path in page_paths -%}
|
|
21
|
-
{%- assign my_page = site.pages | where: 'path', path | first -%}
|
|
22
|
-
{%- if my_page.title -%}
|
|
23
|
-
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
|
|
24
|
-
{%- endif -%}
|
|
25
|
-
{%- endfor -%}
|
|
26
|
-
</div>
|
|
27
|
-
</nav>
|
|
28
|
-
{%- endif -%}
|
|
9
|
+
<!-- <img class="logo" src="{{- "assets/theme-assets/theme-images/logo.svg" | relative_url -}}"> -->
|
|
29
10
|
</div>
|
|
11
|
+
{%- if page_paths -%}
|
|
12
|
+
<nav class="wrapper site-nav">
|
|
13
|
+
<input type="checkbox" id="nav-trigger" class="nav-trigger">
|
|
14
|
+
<label for="nav-trigger">
|
|
15
|
+
<span class="menu-icon">
|
|
16
|
+
<img src="{{- "assets/theme-assets/theme-images/menu.svg" | relative_url -}}" alt="menu-icon">
|
|
17
|
+
</span>
|
|
18
|
+
</label>
|
|
19
|
+
|
|
20
|
+
<div class=" trigger">
|
|
21
|
+
{%- for path in page_paths -%}
|
|
22
|
+
{%- assign my_page = site.pages | where: 'path', path | first -%}
|
|
23
|
+
{%- if my_page.title -%}
|
|
24
|
+
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
|
|
25
|
+
{%- endif -%}
|
|
26
|
+
{%- endfor -%}
|
|
27
|
+
</div>
|
|
28
|
+
</nav>
|
|
29
|
+
{%- endif -%}
|
|
30
30
|
</header>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{%- if page_paths -%}
|
|
2
|
+
<nav class="navrail">
|
|
3
|
+
{% comment %}
|
|
4
|
+
<input type="checkbox" id="nav-trigger" class="nav-trigger">
|
|
5
|
+
<label for="nav-trigger">
|
|
6
|
+
<span class="menu-icon">
|
|
7
|
+
<img
|
|
8
|
+
src="
|
|
9
|
+
{{- "assets/theme-assets/theme-images/menu.svg" | relative_url
|
|
10
|
+
-}}
|
|
11
|
+
"
|
|
12
|
+
alt="menu-icon"
|
|
13
|
+
>
|
|
14
|
+
</span>
|
|
15
|
+
</label>
|
|
16
|
+
{% endcomment %}
|
|
17
|
+
<a class="navrail-button" href="/">
|
|
18
|
+
<img class="navrail-icon" src="/assets/theme-assets/theme-icons/home.svg">
|
|
19
|
+
Home</a
|
|
20
|
+
>
|
|
21
|
+
|
|
22
|
+
{%- for path in page_paths -%}
|
|
23
|
+
{%- assign my_page = site.pages | where: 'path', path | first -%}
|
|
24
|
+
{%- if my_page.title -%}
|
|
25
|
+
<a class="navrail-button" href="{{ my_page.url | relative_url }}">
|
|
26
|
+
{%- if my_page.title -%}
|
|
27
|
+
<img class="navrail-icon" src="{{- my_page.icon | relative_url -}}">
|
|
28
|
+
{%- endif -%}
|
|
29
|
+
{{ my_page.title | escape }}
|
|
30
|
+
</a>
|
|
31
|
+
{%- endif -%}
|
|
32
|
+
{%- endfor -%}
|
|
33
|
+
</nav>
|
|
34
|
+
{%- endif -%}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<div class="theme-selector" id="themeSelector">
|
|
2
|
+
<div class="theme-options" id="themeOptions">
|
|
3
|
+
<div
|
|
4
|
+
id="pink-theme"
|
|
5
|
+
class="theme-option pink-theme"
|
|
6
|
+
data-theme-class="dark-pink"
|
|
7
|
+
data-color="#f0b3e7"
|
|
8
|
+
></div>
|
|
9
|
+
<div
|
|
10
|
+
id="green-theme"
|
|
11
|
+
class="theme-option"
|
|
12
|
+
data-theme-class="dark-green"
|
|
13
|
+
data-color="#b1d18a"
|
|
14
|
+
></div>
|
|
15
|
+
<div
|
|
16
|
+
id="yellow-theme"
|
|
17
|
+
class="theme-option"
|
|
18
|
+
data-theme-class="dark-yellow"
|
|
19
|
+
data-color="#dbc66e"
|
|
20
|
+
></div>
|
|
21
|
+
<div
|
|
22
|
+
data-theme-class="dark-blue"
|
|
23
|
+
id="blue-theme"
|
|
24
|
+
class="theme-option"
|
|
25
|
+
data-color="#aac7ff"
|
|
26
|
+
></div>
|
|
27
|
+
<div
|
|
28
|
+
data-theme-class="dark-cyan"
|
|
29
|
+
id="cyan-theme"
|
|
30
|
+
class="theme-option"
|
|
31
|
+
data-color="#81d5cd"
|
|
32
|
+
></div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="current-theme" id="currentTheme"></div>
|
|
35
|
+
</div>
|
data/_layouts/default.html
CHANGED
data/_layouts/home.html
CHANGED
|
@@ -12,14 +12,14 @@ layout: default
|
|
|
12
12
|
<h2 class="post-list-heading">{{ page.list_title | default: 'Featured Posts' }}</h2>
|
|
13
13
|
<ul class="post-list">
|
|
14
14
|
{%- for post in site.posts -%}
|
|
15
|
-
<li class="post-card">
|
|
15
|
+
<li class="post-card custom-border">
|
|
16
16
|
{%- if post.image -%}
|
|
17
17
|
<img class="post-image" src="{{- post.image | relative_url -}}">
|
|
18
18
|
{%- endif -%}
|
|
19
19
|
<a class="post-link" href="{{ post.url | relative_url }}">
|
|
20
20
|
{%- assign date_format = site.minima.date_format | default: '%b %-d, %Y' -%}
|
|
21
21
|
<span class="post-meta">{{ post.date | date: date_format }}</span>
|
|
22
|
-
<h3>
|
|
22
|
+
<h3 class="card-title">
|
|
23
23
|
{{ post.title | escape }}
|
|
24
24
|
</h3>
|
|
25
25
|
<span class="post-excerpt">{{ post.excerpt }}</span>
|
data/_sass/minima/_base.scss
CHANGED
|
@@ -44,7 +44,8 @@ figure {
|
|
|
44
44
|
--md-sys-color-on-surface: rgb(232 226 212);
|
|
45
45
|
--md-sys-color-surface-variant: rgb(75 71 57);
|
|
46
46
|
--md-sys-color-on-surface-variant: rgb(205 198 180);
|
|
47
|
-
--md-sys-color-outline:
|
|
47
|
+
--md-sys-color-outline: #969080;
|
|
48
|
+
--outline-filter: brightness(0) saturate(100%) invert(64%) sepia(15%) saturate(306%) hue-rotate(6deg) brightness(87%) contrast(85%);
|
|
48
49
|
--md-sys-color-outline-variant: rgb(75 71 57);
|
|
49
50
|
--md-sys-color-shadow: rgb(0 0 0);
|
|
50
51
|
--md-sys-color-scrim: rgb(0 0 0);
|
|
@@ -95,8 +96,9 @@ figure {
|
|
|
95
96
|
--md-sys-color-on-surface: rgb(226 226 233);
|
|
96
97
|
--md-sys-color-surface-variant: rgb(68 71 78);
|
|
97
98
|
--md-sys-color-on-surface-variant: rgb(196 198 208);
|
|
98
|
-
--md-sys-color-outline:
|
|
99
|
-
--
|
|
99
|
+
--md-sys-color-outline: #8e9099;
|
|
100
|
+
--outline-filter: brightness(0) saturate(100%) invert(61%) sepia(5%) saturate(424%) hue-rotate(192deg) brightness(92%) contrast(92%);
|
|
101
|
+
--md-sys-color-outline-variant: #44474e;
|
|
100
102
|
--md-sys-color-shadow: rgb(0 0 0);
|
|
101
103
|
--md-sys-color-scrim: rgb(0 0 0);
|
|
102
104
|
--md-sys-color-inverse-surface: rgb(226 226 233);
|
|
@@ -146,7 +148,8 @@ figure {
|
|
|
146
148
|
--md-sys-color-on-surface: rgb(221 228 226);
|
|
147
149
|
--md-sys-color-surface-variant: rgb(63 73 71);
|
|
148
150
|
--md-sys-color-on-surface-variant: rgb(190 201 198);
|
|
149
|
-
--md-sys-color-outline:
|
|
151
|
+
--md-sys-color-outline: #899391;
|
|
152
|
+
--outline-filter: brightness(0) saturate(100%) invert(66%) sepia(8%) saturate(263%) hue-rotate(118deg) brightness(85%) contrast(87%);
|
|
150
153
|
--md-sys-color-outline-variant: rgb(63 73 71);
|
|
151
154
|
--md-sys-color-shadow: rgb(0 0 0);
|
|
152
155
|
--md-sys-color-scrim: rgb(0 0 0);
|
|
@@ -197,7 +200,8 @@ figure {
|
|
|
197
200
|
--md-sys-color-on-surface: rgb(226 227 216);
|
|
198
201
|
--md-sys-color-surface-variant: rgb(68 72 61);
|
|
199
202
|
--md-sys-color-on-surface-variant: rgb(197 200 186);
|
|
200
|
-
--md-sys-color-outline:
|
|
203
|
+
--md-sys-color-outline: #8f9285;
|
|
204
|
+
--outline-filter: brightness(0) saturate(100%) invert(61%) sepia(6%) saturate(487%) hue-rotate(33deg) brightness(92%) contrast(91%);
|
|
201
205
|
--md-sys-color-outline-variant: rgb(68 72 61);
|
|
202
206
|
--md-sys-color-shadow: rgb(0 0 0);
|
|
203
207
|
--md-sys-color-scrim: rgb(0 0 0);
|
|
@@ -248,7 +252,8 @@ figure {
|
|
|
248
252
|
--md-sys-color-on-surface: rgb(235 223 230);
|
|
249
253
|
--md-sys-color-surface-variant: rgb(78 68 75);
|
|
250
254
|
--md-sys-color-on-surface-variant: rgb(209 195 203);
|
|
251
|
-
--md-sys-color-outline:
|
|
255
|
+
--md-sys-color-outline: #9a8d95;
|
|
256
|
+
--outline-filter: brightness(0) saturate(100%) invert(61%) sepia(13%) saturate(228%) hue-rotate(270deg) brightness(93%) contrast(82%);
|
|
252
257
|
--md-sys-color-outline-variant: rgb(78 68 75);
|
|
253
258
|
--md-sys-color-shadow: rgb(0 0 0);
|
|
254
259
|
--md-sys-color-scrim: rgb(0 0 0);
|
|
@@ -278,7 +283,7 @@ figure {
|
|
|
278
283
|
|
|
279
284
|
.logo {
|
|
280
285
|
height: 120px;
|
|
281
|
-
@include media-query($on-palm){
|
|
286
|
+
@include media-query($on-palm) {
|
|
282
287
|
height: 90px;
|
|
283
288
|
}
|
|
284
289
|
}
|
|
@@ -459,14 +464,17 @@ pre {
|
|
|
459
464
|
margin-right: auto;
|
|
460
465
|
margin-left: auto;
|
|
461
466
|
padding-right: $spacing-unit;
|
|
462
|
-
padding-left: $spacing-unit;
|
|
467
|
+
padding-left: $spacing-unit + 100;
|
|
463
468
|
@extend %clearfix;
|
|
464
469
|
|
|
465
470
|
@include media-query($on-laptop) {
|
|
466
471
|
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
|
|
467
472
|
max-width: calc(#{$content-width} - (#{$spacing-unit}));
|
|
468
473
|
padding-right: $spacing-unit / 2;
|
|
469
|
-
padding-left: $spacing-unit / 2;
|
|
474
|
+
padding-left: ($spacing-unit / 2)+100;
|
|
475
|
+
}
|
|
476
|
+
@include media-query($on-palm){
|
|
477
|
+
padding-left: $spacing-unit/2;
|
|
470
478
|
}
|
|
471
479
|
}
|
|
472
480
|
|
data/_sass/minima/_layout.scss
CHANGED
|
@@ -9,14 +9,7 @@
|
|
|
9
9
|
// Positioning context for the mobile navigation icon
|
|
10
10
|
position: relative;
|
|
11
11
|
}
|
|
12
|
-
|
|
13
|
-
// border: 1px solid var(--md-sys-color-outline);
|
|
14
|
-
display: flex;
|
|
15
|
-
flex-direction: column;
|
|
16
|
-
border-radius: 14px;
|
|
17
|
-
padding: 12px;
|
|
18
|
-
background-color: var(--md-sys-color-surface-container);
|
|
19
|
-
}
|
|
12
|
+
|
|
20
13
|
.site-title {
|
|
21
14
|
@include relative-font-size(1.625);
|
|
22
15
|
font-family: Virgil;
|
|
@@ -24,7 +17,7 @@
|
|
|
24
17
|
text-align: center;
|
|
25
18
|
letter-spacing: -1px;
|
|
26
19
|
margin-bottom: 0;
|
|
27
|
-
margin-top: 12px;
|
|
20
|
+
// margin-top: 12px;
|
|
28
21
|
font-size: 56px;
|
|
29
22
|
padding-right: 0;
|
|
30
23
|
// float: left;
|
|
@@ -38,26 +31,7 @@
|
|
|
38
31
|
// color: $grey-color-dark;
|
|
39
32
|
}
|
|
40
33
|
}
|
|
41
|
-
|
|
42
|
-
width: 26px;
|
|
43
|
-
height: 26px;
|
|
44
|
-
cursor: pointer;
|
|
45
|
-
margin-left: 0.72vw;
|
|
46
|
-
border-radius: 999px;
|
|
47
|
-
}
|
|
48
|
-
.theme-input {
|
|
49
|
-
visibility: hidden;
|
|
50
|
-
// transform: translate(9999px,9999px);
|
|
51
|
-
height: 0px;
|
|
52
|
-
width: 0px;
|
|
53
|
-
}
|
|
54
|
-
.theme-picker {
|
|
55
|
-
display: flex;
|
|
56
|
-
// width: 100%;
|
|
57
|
-
padding-top: 22px;
|
|
58
|
-
padding-right: 15px;
|
|
59
|
-
justify-content: flex-end;
|
|
60
|
-
}
|
|
34
|
+
|
|
61
35
|
#pink-theme {
|
|
62
36
|
background-color: #f0b3e7;
|
|
63
37
|
}
|
|
@@ -74,7 +48,7 @@
|
|
|
74
48
|
background-color: #81d5cd;
|
|
75
49
|
}
|
|
76
50
|
.site-nav {
|
|
77
|
-
float: right;
|
|
51
|
+
// float: right;
|
|
78
52
|
line-height: $base-line-height * $base-font-size * 2.25;
|
|
79
53
|
|
|
80
54
|
.nav-trigger {
|
|
@@ -84,11 +58,20 @@
|
|
|
84
58
|
.menu-icon {
|
|
85
59
|
display: none;
|
|
86
60
|
}
|
|
61
|
+
.trigger {
|
|
62
|
+
display: flex;
|
|
63
|
+
justify-content: center;
|
|
87
64
|
|
|
65
|
+
border-radius: 999px;
|
|
66
|
+
}
|
|
88
67
|
.page-link {
|
|
89
|
-
color:
|
|
90
|
-
|
|
91
|
-
|
|
68
|
+
color: var(--md-sys-color-on-surface);
|
|
69
|
+
min-width: 60px;
|
|
70
|
+
text-align: center;
|
|
71
|
+
// border: 2px solid var(--md-sys-color-outline);
|
|
72
|
+
border-radius: 999px;
|
|
73
|
+
padding: 0 20px 0 20px;
|
|
74
|
+
// line-height: $base-line-height;
|
|
92
75
|
// Gaps between nav items, but not on the last one
|
|
93
76
|
&:not(:last-child) {
|
|
94
77
|
margin-right: 20px;
|
|
@@ -97,8 +80,8 @@
|
|
|
97
80
|
|
|
98
81
|
@include media-query($on-palm) {
|
|
99
82
|
position: absolute;
|
|
100
|
-
top:
|
|
101
|
-
|
|
83
|
+
top: 12px;
|
|
84
|
+
left: 12px;
|
|
102
85
|
background-color: var(--md-sys-color-surface-container);
|
|
103
86
|
border-radius: 8px;
|
|
104
87
|
text-align: right;
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
.theme-picker {
|
|
2
|
+
display: flex;
|
|
3
|
+
// width: 100%;
|
|
4
|
+
padding-top: 12px;
|
|
5
|
+
padding-bottom: 12px;
|
|
6
|
+
padding-right: 15px;
|
|
7
|
+
margin-top: 4px;
|
|
8
|
+
justify-content: flex-end;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.post-card {
|
|
12
|
+
// border: 1px solid var(--md-sys-color-outline);
|
|
13
|
+
// overflow: visible;
|
|
14
|
+
position: relative;
|
|
15
|
+
// padding: 20px;
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
border-radius: 14px;
|
|
20
|
+
padding: 12px;
|
|
21
|
+
background-color: var(--md-sys-color-surface-container);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.post-card::before {
|
|
25
|
+
content: "";
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: -10px;
|
|
28
|
+
left: -12px;
|
|
29
|
+
right: -10px;
|
|
30
|
+
bottom: -10px;
|
|
31
|
+
// width: calc(100% + 12px);
|
|
32
|
+
// height: calc(100% + 12px);
|
|
33
|
+
z-index: 10;
|
|
34
|
+
background-image: url("/assets/theme-assets/theme-images/border-thick.svg");
|
|
35
|
+
background-size: 100% 100%;
|
|
36
|
+
filter: var(--outline-filter);
|
|
37
|
+
pointer-events: none; /* Allows interaction with content inside the border */
|
|
38
|
+
}
|
|
39
|
+
.navrail {
|
|
40
|
+
position: fixed;
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
height: 100vh;
|
|
44
|
+
background: var(--md-sys-color-surface-container);
|
|
45
|
+
justify-content: center;
|
|
46
|
+
align-items: center;
|
|
47
|
+
z-index: 99;
|
|
48
|
+
width: 100px;
|
|
49
|
+
|
|
50
|
+
@include media-query($on-palm) {
|
|
51
|
+
display: none;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
.navrail-button {
|
|
55
|
+
padding: 12px 0 12px 0;
|
|
56
|
+
position: relative;
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-direction: column;
|
|
59
|
+
width: 100%;
|
|
60
|
+
justify-content: center;
|
|
61
|
+
align-items: center;
|
|
62
|
+
color: var(--md-sys-color-on-surface);
|
|
63
|
+
}
|
|
64
|
+
// .navrail-button::before {
|
|
65
|
+
// content: "";
|
|
66
|
+
// position: absolute;
|
|
67
|
+
// height: 20px;
|
|
68
|
+
// width: 20px;
|
|
69
|
+
// background-color: aqua;
|
|
70
|
+
// top: -20px;
|
|
71
|
+
// z-index: 99;
|
|
72
|
+
// right: 0px;
|
|
73
|
+
// }
|
|
74
|
+
|
|
75
|
+
// .navrail-button::after {
|
|
76
|
+
// content: "";
|
|
77
|
+
// position: absolute;
|
|
78
|
+
// height: 20px;
|
|
79
|
+
// width: 20px;
|
|
80
|
+
// background-color: aqua;
|
|
81
|
+
// bottom: -20px;
|
|
82
|
+
// z-index: 999;
|
|
83
|
+
// right: 0px;
|
|
84
|
+
// }
|
|
85
|
+
.navrail-icon {
|
|
86
|
+
filter: var(--outline-filter);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.theme-selector {
|
|
90
|
+
position: relative;
|
|
91
|
+
display: flex;
|
|
92
|
+
// width: 100%;
|
|
93
|
+
justify-content: flex-end;
|
|
94
|
+
padding: 12px;
|
|
95
|
+
padding-top: 18px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.current-theme {
|
|
99
|
+
height: 26px;
|
|
100
|
+
width: 26px;
|
|
101
|
+
border-radius: 50%;
|
|
102
|
+
background-color:var(--current-color); /* Initial theme color */
|
|
103
|
+
margin-left: 12px;
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
transition: transform 0.3s;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.theme-options {
|
|
109
|
+
// position: absolute;
|
|
110
|
+
display: flex;
|
|
111
|
+
// top: 50%;
|
|
112
|
+
// right: 20px;
|
|
113
|
+
// transform: translate(-50%, -50%);
|
|
114
|
+
// display: none;
|
|
115
|
+
// flex-wrap: wrap;
|
|
116
|
+
gap: 10px;
|
|
117
|
+
max-width: 0px;
|
|
118
|
+
transition: all 0.3s ;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.theme-option {
|
|
122
|
+
width: 26px;
|
|
123
|
+
height: 26px;
|
|
124
|
+
border-radius: 50%;
|
|
125
|
+
cursor: pointer;
|
|
126
|
+
}
|
data/_sass/minima.scss
CHANGED
|
@@ -1,15 +1,27 @@
|
|
|
1
1
|
(function () {
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
picker.addEventListener("click", clickHandler(picker.dataset.themeClass));
|
|
6
|
-
});
|
|
2
|
+
const themeSelector = document.getElementById("themeSelector");
|
|
3
|
+
const currentTheme = document.getElementById("currentTheme");
|
|
4
|
+
const themeOptions = document.getElementById("themeOptions");
|
|
7
5
|
const root = document.querySelector("html");
|
|
8
|
-
|
|
6
|
+
|
|
9
7
|
function clickHandler(color) {
|
|
10
|
-
return () => {
|
|
8
|
+
return (event) => {
|
|
11
9
|
window.localStorage.setItem("theme", color);
|
|
12
10
|
root.className = color;
|
|
11
|
+
const selectedColor = event.target.getAttribute("data-color");
|
|
12
|
+
currentTheme.style.backgroundColor = selectedColor;
|
|
13
13
|
};
|
|
14
14
|
}
|
|
15
|
+
|
|
16
|
+
themeSelector.addEventListener("click", () => {
|
|
17
|
+
themeOptions.style.maxWidth = !themeOptions.style.maxWidth
|
|
18
|
+
? "800px"
|
|
19
|
+
: themeOptions.style.maxWidth === "0px"
|
|
20
|
+
? "800px"
|
|
21
|
+
: "0px";
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
document.querySelectorAll(".theme-option").forEach((option) => {
|
|
25
|
+
option.addEventListener("click", clickHandler(option.dataset.themeClass));
|
|
26
|
+
});
|
|
15
27
|
})();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-grid"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
2
|
+
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house">
|
|
3
|
+
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
|
|
4
|
+
<path
|
|
5
|
+
d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 534.3999633789062 368.8000183105469"
|
|
2
|
+
width="1603.1998901367188" height="1106.4000549316406" preserveAspectRatio="none">
|
|
3
|
+
<!-- svg-source:excalidraw -->
|
|
4
|
+
|
|
5
|
+
<defs>
|
|
6
|
+
<style class="style-fonts">
|
|
7
|
+
|
|
8
|
+
</style>
|
|
9
|
+
|
|
10
|
+
</defs>
|
|
11
|
+
<g stroke-linecap="round" transform="translate(10 10) rotate(0 257.1999816894531 174.40000915527344)">
|
|
12
|
+
<path
|
|
13
|
+
d="M32 0 C145.44 -4.83, 255.69 -1.54, 482.4 0 M32 0 C192.73 -2.81, 351.25 -2.46, 482.4 0 M482.4 0 C501.81 -3.76, 511.49 7.87, 514.4 32 M482.4 0 C506.25 -4.37, 511.77 12.37, 514.4 32 M514.4 32 C515.93 102.43, 516.85 172.52, 514.4 316.8 M514.4 32 C513.73 123.85, 513.29 214.86, 514.4 316.8 M514.4 316.8 C518.35 338.31, 500.55 350.28, 482.4 348.8 M514.4 316.8 C512.61 339.59, 502.19 351.52, 482.4 348.8 M482.4 348.8 C321.78 353.3, 165.35 353.43, 32 348.8 M482.4 348.8 C319.01 350.74, 158.28 350.8, 32 348.8 M32 348.8 C12.02 347.61, -1.08 339.53, 0 316.8 M32 348.8 C10.96 345.65, -1.97 333.79, 0 316.8 M0 316.8 C-3.22 248.83, -2.37 182.54, 0 32 M0 316.8 C1.48 258.69, 1.52 202.64, 0 32 M0 32 C-0.35 8.95, 12.4 1.7, 32 0 M0 32 C-3.7 10.32, 8.88 1.63, 32 0"
|
|
14
|
+
stroke="#000000" stroke-width="1.4" fill="none"></path>
|
|
15
|
+
</g>
|
|
16
|
+
</svg>
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: dark-blog-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version:
|
|
4
|
+
version: 3.0.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Gul Noor
|
|
@@ -30,8 +30,9 @@ files:
|
|
|
30
30
|
- _includes/icon-github.svg
|
|
31
31
|
- _includes/icon-twitter.html
|
|
32
32
|
- _includes/icon-twitter.svg
|
|
33
|
+
- _includes/navrail.html
|
|
33
34
|
- _includes/social.html
|
|
34
|
-
- _includes/
|
|
35
|
+
- _includes/theme_selector.html
|
|
35
36
|
- _layouts/default.html
|
|
36
37
|
- _layouts/home.html
|
|
37
38
|
- _layouts/page.html
|
|
@@ -39,6 +40,7 @@ files:
|
|
|
39
40
|
- _sass/minima.scss
|
|
40
41
|
- _sass/minima/_base.scss
|
|
41
42
|
- _sass/minima/_layout.scss
|
|
43
|
+
- _sass/minima/_mysass.scss
|
|
42
44
|
- _sass/minima/_syntax-highlighting.scss
|
|
43
45
|
- assets/main.scss
|
|
44
46
|
- assets/minima-social-icons.svg
|
|
@@ -50,6 +52,10 @@ files:
|
|
|
50
52
|
- assets/theme-assets/material-theme/tokens.css
|
|
51
53
|
- assets/theme-assets/material-theme/typography.module.css
|
|
52
54
|
- assets/theme-assets/theme-fonts/Virgil.woff2
|
|
55
|
+
- assets/theme-assets/theme-icons/categories.svg
|
|
56
|
+
- assets/theme-assets/theme-icons/home.svg
|
|
57
|
+
- assets/theme-assets/theme-icons/info.svg
|
|
58
|
+
- assets/theme-assets/theme-images/border-thick.svg
|
|
53
59
|
- assets/theme-assets/theme-images/comp.png
|
|
54
60
|
- assets/theme-assets/theme-images/comp.svg
|
|
55
61
|
- assets/theme-assets/theme-images/logo.png
|
data/_includes/theme_picker.html
DELETED
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
<div class="theme-picker">
|
|
2
|
-
<input
|
|
3
|
-
class="theme-input"
|
|
4
|
-
type="radio"
|
|
5
|
-
id="theme-1"
|
|
6
|
-
name="theme"
|
|
7
|
-
value="pink"
|
|
8
|
-
checked
|
|
9
|
-
/>
|
|
10
|
-
<label
|
|
11
|
-
data-theme-class="dark-pink"
|
|
12
|
-
id="picker"
|
|
13
|
-
for="theme-1"
|
|
14
|
-
class="pink-theme"
|
|
15
|
-
>
|
|
16
|
-
<div class="select-theme" id="pink-theme"></div>
|
|
17
|
-
</label>
|
|
18
|
-
<input
|
|
19
|
-
class="theme-input"
|
|
20
|
-
type="radio"
|
|
21
|
-
id="theme-2"
|
|
22
|
-
name="theme"
|
|
23
|
-
value="green"
|
|
24
|
-
/>
|
|
25
|
-
<label
|
|
26
|
-
data-theme-class="dark-green"
|
|
27
|
-
id="picker"
|
|
28
|
-
for="theme-2"
|
|
29
|
-
class="green-theme"
|
|
30
|
-
>
|
|
31
|
-
<div class="select-theme" id="green-theme"></div>
|
|
32
|
-
</label>
|
|
33
|
-
<input
|
|
34
|
-
class="theme-input"
|
|
35
|
-
type="radio"
|
|
36
|
-
id="theme-3"
|
|
37
|
-
name="theme"
|
|
38
|
-
value="yellow"
|
|
39
|
-
/>
|
|
40
|
-
<label
|
|
41
|
-
data-theme-class="dark-yellow"
|
|
42
|
-
id="picker"
|
|
43
|
-
for="theme-3"
|
|
44
|
-
class="yellow-theme"
|
|
45
|
-
>
|
|
46
|
-
<div class="select-theme" id="yellow-theme"></div>
|
|
47
|
-
</label>
|
|
48
|
-
<input
|
|
49
|
-
class="theme-input"
|
|
50
|
-
type="radio"
|
|
51
|
-
id="theme-4"
|
|
52
|
-
name="theme"
|
|
53
|
-
value="blue"
|
|
54
|
-
/>
|
|
55
|
-
<label
|
|
56
|
-
data-theme-class="dark-blue"
|
|
57
|
-
id="picker"
|
|
58
|
-
for="theme-4"
|
|
59
|
-
class="blue-theme"
|
|
60
|
-
>
|
|
61
|
-
<div class="select-theme" id="blue-theme"></div>
|
|
62
|
-
</label>
|
|
63
|
-
<input
|
|
64
|
-
class="theme-input"
|
|
65
|
-
type="radio"
|
|
66
|
-
id="theme-5"
|
|
67
|
-
name="theme"
|
|
68
|
-
value="cyan"
|
|
69
|
-
/>
|
|
70
|
-
<label
|
|
71
|
-
data-theme-class="dark-cyan"
|
|
72
|
-
id="picker"
|
|
73
|
-
for="theme-5"
|
|
74
|
-
class="cyan-theme"
|
|
75
|
-
>
|
|
76
|
-
<div class="select-theme" id="cyan-theme"></div>
|
|
77
|
-
</label>
|
|
78
|
-
</div>
|