jekyll-theme-doodle 4.5.0 → 5.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +46 -6
- data/_includes/head.html +28 -28
- data/_includes/navrail.html +14 -21
- data/_includes/theme_selector.html +41 -33
- data/_layouts/home.html +11 -3
- data/_sass/minima/_base.scss +9 -8
- data/_sass/minima/_footer.scss +1 -1
- data/_sass/minima/_header.scss +1 -0
- data/_sass/minima/_navigation-bar.scss +4 -0
- data/_sass/minima/_pinned-post.scss +1 -1
- data/_sass/minima/_posts.scss +10 -2
- data/_sass/minima/_theme-selector.scss +58 -8
- data/_sass/minima/_theme.scss +307 -7
- data/assets/theme-assets/js/theme.js +20 -2
- data/assets/theme-assets/theme-icons/aboutme-small.svg +13 -13
- data/assets/theme-assets/theme-icons/bookmark.svg +1 -1
- data/assets/theme-assets/theme-icons/categories2.svg +110 -5
- data/assets/theme-assets/theme-icons/home-rough.svg +1 -1
- data/assets/theme-assets/theme-icons/home2.svg +14 -5
- data/assets/theme-assets/theme-icons/moon.svg +3 -0
- data/assets/theme-assets/theme-icons/pin.svg +2 -2
- data/assets/theme-assets/theme-icons/sun.svg +18 -0
- data/assets/theme-assets/theme-images/menu.svg +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 27b09237629b1b40332548fc3d357cbf9fedd050fd4f0e6d80a28adeb9dfab24
|
|
4
|
+
data.tar.gz: 873ef4144e6f89cc1d2f3704b1a5b8170c66fe7298a8585d8f1b684c94902d2e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 5b7d98a564d066204c50596b6bd4b11ff6deeaf4e2d946af09db8a29e0d5d97bfd43b47e73556051ea41ba8645a78e7b88c795616bf227cfe061dbdd329b3d2f
|
|
7
|
+
data.tar.gz: 2558906289d9789bfdee5da1eb9a8998bef779c0b84ca169179a38fab497e887958482ebc92509f5e02cc04d871b98032146c831275329faad73d88f958082c2
|
data/README.md
CHANGED
|
@@ -1,6 +1,26 @@
|
|
|
1
|
-
# Jekyll
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
# Doodle: A [Jekyll](https://jekyllrb.com/) theme for playful and creative aesthetic
|
|
2
|
+
|
|
3
|
+
## Table of Contents
|
|
4
|
+
|
|
5
|
+
- [Features](#features)
|
|
6
|
+
- [Installation](#installation)
|
|
7
|
+
- [remote-themes](#remote-themes)
|
|
8
|
+
- [Alternate Method](#alternate-method)
|
|
9
|
+
- [Usage](#usage)
|
|
10
|
+
- [Pin a post](#pin-a-post)
|
|
11
|
+
- [Add tagline in header](#add-tagline-in-header)
|
|
12
|
+
- [Google analytics](#google-analytics)
|
|
13
|
+
- [Adding icons to naviagtion links](#adding-icons-to-naviagtion-links)
|
|
14
|
+
- [Contributing](#contributing)
|
|
15
|
+
- [License](#license)
|
|
16
|
+
|
|
17
|
+
## Features
|
|
18
|
+
|
|
19
|
+
- dark mode
|
|
20
|
+
- 5 color schemes
|
|
21
|
+
- pinned posts
|
|
22
|
+
- handwriting fonts
|
|
23
|
+
- google analytics support
|
|
4
24
|
|
|
5
25
|
You can preview the theme [here](https://gulnoor.github.io)
|
|
6
26
|
| | |
|
|
@@ -9,6 +29,8 @@ You can preview the theme [here](https://gulnoor.github.io)
|
|
|
9
29
|
|
|
10
30
|
## Installation
|
|
11
31
|
|
|
32
|
+
### remote-themes
|
|
33
|
+
|
|
12
34
|
if you are using github pages, the recommended method is following:
|
|
13
35
|
|
|
14
36
|
- Add following lines to your `Gemfile`:
|
|
@@ -41,7 +63,7 @@ remote_theme: "gulnoor/jekyll-theme-doodle"
|
|
|
41
63
|
|
|
42
64
|
- Remove any other theme: or remote_theme: entry.
|
|
43
65
|
|
|
44
|
-
|
|
66
|
+
### Alternate Method
|
|
45
67
|
|
|
46
68
|
Add this line to your Jekyll site's `Gemfile`:
|
|
47
69
|
|
|
@@ -92,9 +114,27 @@ tagline: "Your awesome tagline"
|
|
|
92
114
|
|
|
93
115
|
TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
|
|
94
116
|
|
|
95
|
-
###
|
|
117
|
+
### Google analytics
|
|
118
|
+
|
|
119
|
+
add your google analytics tracking id to \_config.yml
|
|
120
|
+
|
|
121
|
+
```yaml
|
|
122
|
+
google_analytics: UA-NNNNNNNN-N
|
|
123
|
+
```
|
|
124
|
+
### Adding icons to naviagtion links
|
|
125
|
+
add the icon path to the page front matter e.g
|
|
126
|
+
|
|
127
|
+
```yaml
|
|
128
|
+
---
|
|
129
|
+
layout: page
|
|
130
|
+
title: "About"
|
|
131
|
+
permalink: /about/
|
|
132
|
+
icon: "/assets/icons/about.svg"
|
|
133
|
+
---
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## TODO
|
|
96
137
|
|
|
97
|
-
- [ ] Analytics support
|
|
98
138
|
- [ ] Add support for comments
|
|
99
139
|
- [ ] Search functionality
|
|
100
140
|
|
data/_includes/head.html
CHANGED
|
@@ -1,51 +1,51 @@
|
|
|
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/Excalifont-Regular.woff2"
|
|
8
8
|
as="font"
|
|
9
9
|
type="font/ttf"
|
|
10
10
|
crossorigin
|
|
11
|
-
|
|
11
|
+
/>
|
|
12
12
|
<link
|
|
13
13
|
rel="preload"
|
|
14
14
|
href="/assets/theme-assets/theme-fonts/comic shanns.otf"
|
|
15
15
|
as="font"
|
|
16
16
|
type="font/otf"
|
|
17
17
|
crossorigin
|
|
18
|
-
|
|
19
|
-
{%- seo -%}
|
|
20
|
-
|
|
21
|
-
rel="stylesheet"
|
|
22
|
-
href="
|
|
23
|
-
{{ "/assets/main.css" | relative_url
|
|
24
|
-
}}
|
|
25
|
-
"
|
|
26
|
-
>
|
|
18
|
+
/>
|
|
19
|
+
{%- seo -%} <link rel="stylesheet" href=" {{ "/assets/main.css" | relative_url
|
|
20
|
+
}} " >
|
|
27
21
|
<script>
|
|
28
22
|
const colors = {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
23
|
+
"dark-pink": "#f0b3e7",
|
|
24
|
+
"dark-green": "#b1d18a",
|
|
25
|
+
"dark-yellow": "#dbc66e",
|
|
26
|
+
"dark-blue": "#aac7ff",
|
|
27
|
+
"dark-cyan": "#81d5cd",
|
|
28
|
+
"light-pink": "#f0b3e7",
|
|
29
|
+
"light-green": "#b1d18a",
|
|
30
|
+
"light-yellow": "#dbc66e",
|
|
31
|
+
"light-blue": "#aac7ff",
|
|
32
|
+
"light-cyan": "#81d5cd",
|
|
34
33
|
};
|
|
35
|
-
const root = document.querySelector(
|
|
36
|
-
const theme = window.localStorage.getItem(
|
|
34
|
+
const root = document.querySelector("html");
|
|
35
|
+
const theme = window.localStorage.getItem("theme");
|
|
36
|
+
|
|
37
37
|
if (theme === null) {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
root.
|
|
38
|
+
theme = "dark-pink";
|
|
39
|
+
window.localStorage.setItem("theme", theme);
|
|
40
|
+
root.className = theme;
|
|
41
|
+
root.style.setProperty("--current-color", colors[theme]);
|
|
41
42
|
} else {
|
|
42
43
|
root.className = theme;
|
|
43
|
-
root.style.setProperty(
|
|
44
|
+
root.style.setProperty("--current-color", colors[theme]);
|
|
44
45
|
}
|
|
46
|
+
|
|
45
47
|
</script>
|
|
46
48
|
<script src="/assets/theme-assets/js/theme.js" defer></script>
|
|
47
|
-
{%- feed_meta -%}
|
|
48
|
-
{%-
|
|
49
|
-
{%- include google-analytics.html -%}
|
|
50
|
-
{%- endif -%}
|
|
49
|
+
{%- feed_meta -%} {%- if jekyll.environment == 'production' and
|
|
50
|
+
site.google_analytics -%} {%- include google-analytics.html -%} {%- endif -%}
|
|
51
51
|
</head>
|
data/_includes/navrail.html
CHANGED
|
@@ -1,23 +1,16 @@
|
|
|
1
1
|
{%- if page_paths -%}
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
{%-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
{%- endif -%}
|
|
17
|
-
{{ my_page.title | escape }}
|
|
18
|
-
</a>
|
|
19
|
-
{%- endif -%}
|
|
20
|
-
{%- endfor -%}
|
|
21
|
-
|
|
22
|
-
</nav>
|
|
2
|
+
<nav class="navrail">
|
|
3
|
+
<a class="navrail-button" href="/">
|
|
4
|
+
<img class="navrail-icon" src="{{-
|
|
5
|
+
"/assets/theme-assets/theme-icons/home2.svg" | relative_url -}}" > Home</a
|
|
6
|
+
>
|
|
7
|
+
{%- for path in page_paths -%} {%- assign my_page = site.pages | where:
|
|
8
|
+
'path', path | first -%} {%- if my_page.title -%}
|
|
9
|
+
<a class="navrail-button" href="{{ my_page.url | relative_url }}">
|
|
10
|
+
{%- if my_page.title -%}
|
|
11
|
+
<img class="navrail-icon" src="{{- my_page.icon | relative_url -}}" />
|
|
12
|
+
{%- endif -%} {{ my_page.title | escape }}
|
|
13
|
+
</a>
|
|
14
|
+
{%- endif -%} {%- endfor -%}
|
|
15
|
+
</nav>
|
|
23
16
|
{%- endif -%}
|
|
@@ -1,35 +1,43 @@
|
|
|
1
|
-
<div class="theme-
|
|
2
|
-
<div class="theme-
|
|
3
|
-
<div
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
1
|
+
<div class="theme-wrapper">
|
|
2
|
+
<div class="theme-selector" id="themeSelector">
|
|
3
|
+
<div class="theme-options" id="themeOptions">
|
|
4
|
+
<div
|
|
5
|
+
id="pink-theme"
|
|
6
|
+
class="theme-option pink-theme"
|
|
7
|
+
data-theme-class="dark-pink"
|
|
8
|
+
data-color="#f0b3e7"
|
|
9
|
+
></div>
|
|
10
|
+
<div
|
|
11
|
+
id="green-theme"
|
|
12
|
+
class="theme-option"
|
|
13
|
+
data-theme-class="dark-green"
|
|
14
|
+
data-color="#b1d18a"
|
|
15
|
+
></div>
|
|
16
|
+
<div
|
|
17
|
+
id="yellow-theme"
|
|
18
|
+
class="theme-option"
|
|
19
|
+
data-theme-class="dark-yellow"
|
|
20
|
+
data-color="#dbc66e"
|
|
21
|
+
></div>
|
|
22
|
+
<div
|
|
23
|
+
data-theme-class="dark-blue"
|
|
24
|
+
id="blue-theme"
|
|
25
|
+
class="theme-option"
|
|
26
|
+
data-color="#aac7ff"
|
|
27
|
+
></div>
|
|
28
|
+
<div
|
|
29
|
+
data-theme-class="dark-cyan"
|
|
30
|
+
id="cyan-theme"
|
|
31
|
+
class="theme-option"
|
|
32
|
+
data-color="#81d5cd"
|
|
33
|
+
></div>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="current-theme" id="currentTheme"></div>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="toggle-container">
|
|
38
|
+
<label class="toggle-switch">
|
|
39
|
+
<input type="checkbox" id="darkModeToggle" />
|
|
40
|
+
<span class="slider"></span>
|
|
41
|
+
</label>
|
|
33
42
|
</div>
|
|
34
|
-
<div class="current-theme" id="currentTheme"></div>
|
|
35
43
|
</div>
|
data/_layouts/home.html
CHANGED
|
@@ -7,8 +7,16 @@ layout: default
|
|
|
7
7
|
{%- endif -%}
|
|
8
8
|
|
|
9
9
|
{{ content }}
|
|
10
|
+
{% assign has_pinned_post = false %}
|
|
10
11
|
|
|
11
|
-
{
|
|
12
|
+
{% for post in site.posts %}
|
|
13
|
+
{% if post.status == 'pinned' %}
|
|
14
|
+
{% assign has_pinned_post = true %}
|
|
15
|
+
{% break %}
|
|
16
|
+
{% endif %}
|
|
17
|
+
{% endfor %}
|
|
18
|
+
|
|
19
|
+
{% if has_pinned_post %}
|
|
12
20
|
<h1 class="post-title">{{ page.list_title | default: 'Pinned Posts' }}</h1>
|
|
13
21
|
<ul class="pinned-post-list">
|
|
14
22
|
{%- for post in site.posts -%}
|
|
@@ -32,7 +40,7 @@ layout: default
|
|
|
32
40
|
<path
|
|
33
41
|
fill="none"
|
|
34
42
|
class="pin-path"
|
|
35
|
-
d="M-0.92 0.05 C-0.85 -7.96, -1.61 -37.45, 0.46 -48.12 C2.52 -58.8, 8.31 -63.66, 11.46 -64.01 C14.61 -64.36, 17.92 -61.96, 19.34 -50.21 C20.76 -38.46, 20.48 -4.19, 20 6.49 C19.52 17.16, 20.01 12.99, 16.44 13.85 C12.87 14.71, 2.49 13.98, -1.43 11.64 C-5.36 9.29, -6.38 13.15, -7.1 -0.21 C-7.81 -13.57, -8.39 -54.05, -5.72 -68.55 C-3.06 -83.05,
|
|
43
|
+
d="M-0.92 0.05 C-0.85 -7.96, -1.61 -37.45, 0.46 -48.12 C2.52 -58.8, 8.31 -63.66, 11.46 -64.01 C14.61 -64.36, 17.92 -61.96, 19.34 -50.21 C20.76 -38.46, 20.48 -4.19, 20 6.49 C19.52 17.16, 20.01 12.99, 16.44 13.85 C12.87 14.71, 2.49 13.98, -1.43 11.64 C-5.36 9.29, -6.38 13.15, -7.1 -0.21 C-7.81 -13.57, -8.39 -54.05, -5.72 -68.55 C-3.06 -83.05,style -87.21, 8.89 -87.23 C13.93 -87.26, 21.52 -74.71, 24.52 -68.68 C27.52 -62.66, 26.27 -53.89, 26.87 -51.11 M0.8 -0.97 C0.75 -9.29, -1.95 -39.43, -0.23 -49.77 C1.5 -60.1, 7.79 -63.14, 11.17 -62.99 C14.54 -62.84, 18.74 -60.01, 20.02 -48.88 C21.29 -37.74, 19.22 -6.54, 18.81 3.8 C18.39 14.14, 21.3 11.55, 17.53 13.15 C13.75 14.76, -0.1 15.77, -3.84 13.45 C-7.59 11.12, -4.38 13.08, -4.95 -0.79 C-5.52 -14.66, -9.58 -55.22, -7.24 -69.77 C-4.91 -84.32, 3.68 -88.43, 9.08 -88.08 C14.47 -87.73, 22.38 -73.79, 25.11 -67.69 C27.84 -61.59, 25.42 -54.5, 25.45 -51.48"
|
|
36
44
|
></path>
|
|
37
45
|
</g>
|
|
38
46
|
</g>
|
|
@@ -56,7 +64,7 @@ layout: default
|
|
|
56
64
|
{%- endif -%}
|
|
57
65
|
<div class="all-post-wrapper">
|
|
58
66
|
{%- if site.posts.size > 0 -%}
|
|
59
|
-
<h1 class="post-title">{{ page.list_title | default: '
|
|
67
|
+
<h1 class="post-title">{{ page.list_title | default: 'Recent Posts' }}</h1>
|
|
60
68
|
<ul class="post-list">
|
|
61
69
|
{%- for post in site.posts -%}
|
|
62
70
|
<li class="post-card custom-border">
|
data/_sass/minima/_base.scss
CHANGED
|
@@ -29,7 +29,7 @@ body {
|
|
|
29
29
|
font: $base-font-weight #{$base-font-size}/#{$base-line-height}
|
|
30
30
|
$base-font-family;
|
|
31
31
|
color: $text-color;
|
|
32
|
-
background-color:
|
|
32
|
+
background-color: var(--md-sys-color-surface-container);
|
|
33
33
|
-webkit-text-size-adjust: 100%;
|
|
34
34
|
-webkit-font-feature-settings: "kern" 1;
|
|
35
35
|
-moz-font-feature-settings: "kern" 1;
|
|
@@ -150,7 +150,6 @@ blockquote {
|
|
|
150
150
|
margin-right: 12px;
|
|
151
151
|
@include relative-font-size(1.125);
|
|
152
152
|
letter-spacing: -1px;
|
|
153
|
-
font-style: italic;
|
|
154
153
|
|
|
155
154
|
> :last-child {
|
|
156
155
|
margin-bottom: 0;
|
|
@@ -187,8 +186,8 @@ pre {
|
|
|
187
186
|
* Wrapper
|
|
188
187
|
*/
|
|
189
188
|
.wrapper {
|
|
190
|
-
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
|
|
191
|
-
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
|
|
189
|
+
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2) + 48px);
|
|
190
|
+
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2) + 48px);
|
|
192
191
|
margin-right: auto;
|
|
193
192
|
margin-left: auto;
|
|
194
193
|
padding-right: $spacing-unit;
|
|
@@ -241,13 +240,14 @@ pre {
|
|
|
241
240
|
table {
|
|
242
241
|
display: block;
|
|
243
242
|
overflow-x: auto;
|
|
244
|
-
width:
|
|
243
|
+
width: fit-content;
|
|
244
|
+
max-width: 100%;
|
|
245
245
|
margin-bottom: $spacing-unit;
|
|
246
|
-
width: 100%;
|
|
247
246
|
text-align: $table-text-align;
|
|
248
247
|
color: var(--md-sys-color-on-surface);
|
|
249
248
|
border-collapse: collapse;
|
|
250
249
|
border: 1px solid var(--md-sys-color-outline);
|
|
250
|
+
border-radius: 8px;
|
|
251
251
|
tr {
|
|
252
252
|
&:nth-child(even) {
|
|
253
253
|
background-color: var(--md-sys-color-surface-container-high);
|
|
@@ -258,12 +258,13 @@ table {
|
|
|
258
258
|
padding: ($spacing-unit / 3) ($spacing-unit / 2);
|
|
259
259
|
}
|
|
260
260
|
th {
|
|
261
|
-
background-color: var(--md-sys-color-
|
|
261
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
262
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
262
263
|
// border: 1px solid darken($grey-color-light, 4%);
|
|
263
264
|
// border-bottom-color: darken($grey-color-light, 12%);
|
|
264
265
|
}
|
|
265
266
|
td {
|
|
266
|
-
border: 1px solid var(--md-sys-color-outline);
|
|
267
|
+
border-top: 1px solid var(--md-sys-color-outline);
|
|
267
268
|
}
|
|
268
269
|
}
|
|
269
270
|
|
data/_sass/minima/_footer.scss
CHANGED
data/_sass/minima/_header.scss
CHANGED
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
justify-content: space-around;
|
|
61
61
|
padding-top: 12px;
|
|
62
62
|
list-style: none;
|
|
63
|
-
background-color: var(--md-sys-color-surface-container);
|
|
63
|
+
background-color: var(--md-sys-color-surface-container-highest);
|
|
64
64
|
border-radius: 24px;
|
|
65
65
|
padding: $spacing-unit;
|
|
66
66
|
min-height: 390px;
|
data/_sass/minima/_posts.scss
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
}
|
|
22
22
|
.post-excerpt {
|
|
23
23
|
font-size: $small-font-size;
|
|
24
|
-
color:
|
|
24
|
+
color: var(--md-sys-color-on-surface);
|
|
25
25
|
}
|
|
26
26
|
.post-link {
|
|
27
27
|
display: block;
|
|
@@ -37,9 +37,17 @@
|
|
|
37
37
|
@include relative-font-size(2.25);
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
|
-
|
|
40
|
+
.post {
|
|
41
|
+
background: var(--md-sys-color-surface);
|
|
42
|
+
border-radius: 24px;
|
|
43
|
+
padding: 24px;
|
|
44
|
+
@include media-query($on-palm){
|
|
45
|
+
padding: 8px;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
41
48
|
.post-content {
|
|
42
49
|
margin-bottom: $spacing-unit;
|
|
50
|
+
|
|
43
51
|
// text-align: justify;
|
|
44
52
|
p {
|
|
45
53
|
text-align: justify;
|
|
@@ -1,29 +1,35 @@
|
|
|
1
1
|
.theme-selector {
|
|
2
|
-
position: relative;
|
|
3
2
|
display: flex;
|
|
3
|
+
}
|
|
4
|
+
.theme-wrapper {
|
|
5
|
+
display: flex;
|
|
6
|
+
position: absolute;
|
|
7
|
+
right: 0;
|
|
4
8
|
justify-content: flex-end;
|
|
9
|
+
align-items: flex-start;
|
|
5
10
|
margin-left: auto;
|
|
6
11
|
padding: 6px;
|
|
7
12
|
margin-top: 8px;
|
|
8
13
|
margin-right: 8px;
|
|
9
|
-
border-radius:
|
|
10
|
-
background-color: rgba(
|
|
14
|
+
border-radius: 16px;
|
|
15
|
+
background-color: rgba(159, 159, 159, 0.122);
|
|
11
16
|
backdrop-filter: blur(8px);
|
|
12
17
|
width: fit-content;
|
|
13
18
|
@media screen and (min-width: 601px) {
|
|
14
19
|
position: fixed;
|
|
15
20
|
z-index: 103;
|
|
16
21
|
bottom: 10px;
|
|
17
|
-
|
|
22
|
+
right: auto;
|
|
23
|
+
left: 9px;
|
|
18
24
|
}
|
|
19
25
|
}
|
|
20
26
|
|
|
21
27
|
.current-theme {
|
|
22
|
-
height:
|
|
23
|
-
width:
|
|
28
|
+
height: 24px;
|
|
29
|
+
width: 24px;
|
|
24
30
|
border-radius: 50%;
|
|
25
31
|
background-color: var(--current-color); /* Initial theme color */
|
|
26
|
-
margin-
|
|
32
|
+
margin-right: 10px;
|
|
27
33
|
cursor: pointer;
|
|
28
34
|
transition: transform 0.3s;
|
|
29
35
|
}
|
|
@@ -31,7 +37,7 @@
|
|
|
31
37
|
display: flex;
|
|
32
38
|
gap: 10px;
|
|
33
39
|
max-width: 0px;
|
|
34
|
-
transition: all 0.
|
|
40
|
+
transition: all 0.4s;
|
|
35
41
|
}
|
|
36
42
|
.theme-option {
|
|
37
43
|
width: 26px;
|
|
@@ -39,3 +45,47 @@
|
|
|
39
45
|
border-radius: 50%;
|
|
40
46
|
cursor: pointer;
|
|
41
47
|
}
|
|
48
|
+
.toggle-container {
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.toggle-switch {
|
|
54
|
+
position: relative;
|
|
55
|
+
display: inline-block;
|
|
56
|
+
width: 44px;
|
|
57
|
+
height: 24px;
|
|
58
|
+
}
|
|
59
|
+
.toggle-switch input {
|
|
60
|
+
opacity: 0;
|
|
61
|
+
width: 0;
|
|
62
|
+
height: 0;
|
|
63
|
+
}
|
|
64
|
+
.slider {
|
|
65
|
+
position: absolute;
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
top: 0;
|
|
68
|
+
left: 0;
|
|
69
|
+
right: 0;
|
|
70
|
+
bottom: 0;
|
|
71
|
+
background-color: #ccc;
|
|
72
|
+
transition: 0.4s;
|
|
73
|
+
border-radius: 34px;
|
|
74
|
+
background-color: var(--md-sys-color-primary);
|
|
75
|
+
}
|
|
76
|
+
.slider:before {
|
|
77
|
+
position: absolute;
|
|
78
|
+
content: url("/assets/theme-assets/theme-icons/sun.svg");
|
|
79
|
+
height: 20px;
|
|
80
|
+
width: 20px;
|
|
81
|
+
left: 2px;
|
|
82
|
+
bottom: 2px;
|
|
83
|
+
background-color: var(--md-sys-color-surface-container-highest);
|
|
84
|
+
transition: 0.4s;
|
|
85
|
+
border-radius: 50%;
|
|
86
|
+
}
|
|
87
|
+
input:checked + .slider:before {
|
|
88
|
+
transform: translateX(20px);
|
|
89
|
+
content: url("/assets/theme-assets/theme-icons/moon.svg");
|
|
90
|
+
|
|
91
|
+
}
|