dark-blog-theme 2.0.1 → 3.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +44 -14
- data/_includes/footer.html +0 -9
- data/_includes/head.html +22 -11
- data/_includes/header.html +23 -20
- data/_includes/navrail.html +34 -0
- data/_includes/theme_selector.html +35 -0
- data/_layouts/default.html +2 -0
- data/_layouts/home.html +2 -3
- data/_sass/minima/_base.scss +21 -13
- data/_sass/minima/_layout.scss +18 -34
- 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 +9 -3
- 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: 94edf36453d6046125d2733937955fd52c1ac473a25be4ebd0744c8101dcbb25
|
|
4
|
+
data.tar.gz: 702bd5cdc42a6ae5e584228396a3c4b12e8dff0f2bad156e3c316dcee6e77381
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1595631adc0c40c631984b0e2147ee892f52f141122d6872c8d1b070b9dc41fc3a24d5916b3e04292d63cbb620468a67ec27acf6355151a501b1fe53f2155768
|
|
7
|
+
data.tar.gz: 3c775e9629a3b86436db2df2dd2b86a358003f31c00066847154655ede9c0077600ceb5f45b9a8860bb8525930bfe4f9288389b8768761dff1334054d3982a27
|
data/README.md
CHANGED
|
@@ -1,12 +1,45 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Dark Theme for Jekyll Blogs
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Minimalistic dark theme for [Jekyll](https://jekyllrb.com/) blogs with 5 different color schemes.
|
|
4
|
+
| | |
|
|
5
|
+
| ----------------------- | ----------------------- |
|
|
6
|
+
|  |  |
|
|
4
7
|
|
|
5
|
-
|
|
8
|
+
## Installation
|
|
6
9
|
|
|
7
|
-
|
|
10
|
+
if you are using github pages, the recommended method is following:
|
|
8
11
|
|
|
9
|
-
|
|
12
|
+
- Add following lines to your `Gemfile`:
|
|
13
|
+
|
|
14
|
+
```ruby
|
|
15
|
+
source "https://rubygems.org"
|
|
16
|
+
|
|
17
|
+
gem "github-pages", "~> 231", group: :jekyll_plugins
|
|
18
|
+
gem "jekyll-include-cache", group: :jekyll_plugins
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
- Add jekyll-include-cache to the plugins array of your `_config.yml`
|
|
22
|
+
|
|
23
|
+
```yaml
|
|
24
|
+
plugins:
|
|
25
|
+
- jekyll-include-cache
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
- And then execute this command in shell:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
$ bundle
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
- Add this your `_config.yml` file.
|
|
35
|
+
|
|
36
|
+
```yml
|
|
37
|
+
remote_theme: "gulnoor/jekyll-blog-theme"
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
- Remove any other theme: or remote_theme: entry.
|
|
41
|
+
|
|
42
|
+
## Alternate Method
|
|
10
43
|
|
|
11
44
|
Add this line to your Jekyll site's `Gemfile`:
|
|
12
45
|
|
|
@@ -32,18 +65,15 @@ Or install it yourself as:
|
|
|
32
65
|
|
|
33
66
|
TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
|
|
34
67
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/darkBlog. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
|
|
68
|
+
### TODO
|
|
38
69
|
|
|
39
|
-
|
|
70
|
+
- [ ] Grid layout for posts on home page
|
|
71
|
+
- [ ] Add support for comments
|
|
72
|
+
- [ ] Search functionality
|
|
40
73
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
|
|
74
|
+
## Contributing
|
|
44
75
|
|
|
45
|
-
|
|
46
|
-
To add a custom directory to your theme-gem, please edit the regexp in `darkBlog.gemspec` accordingly.
|
|
76
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/gulnoor/darkBlog
|
|
47
77
|
|
|
48
78
|
## License
|
|
49
79
|
|
data/_includes/footer.html
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
<footer class="site-footer h-card">
|
|
2
2
|
<data class="u-url" href="{{ "/" | relative_url }}"></data>
|
|
3
|
-
|
|
4
3
|
<div class="wrapper">
|
|
5
|
-
|
|
6
4
|
<h2 class="footer-heading">{{ site.title | escape }}</h2>
|
|
7
|
-
|
|
8
5
|
<div class="footer-col-wrapper">
|
|
9
6
|
<div class="footer-col footer-col-1">
|
|
10
7
|
<ul class="contact-list">
|
|
@@ -18,21 +15,15 @@
|
|
|
18
15
|
{%- if site.email -%}
|
|
19
16
|
<li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
|
|
20
17
|
{%- endif -%}
|
|
21
|
-
|
|
22
18
|
</ul>
|
|
23
|
-
|
|
24
19
|
<!-- <p id="diplayselectedtheme"></p> -->
|
|
25
20
|
</div>
|
|
26
|
-
|
|
27
21
|
<div class="footer-col footer-col-2">
|
|
28
22
|
{%- include social.html -%}
|
|
29
23
|
</div>
|
|
30
|
-
|
|
31
24
|
<div class="footer-col footer-col-3">
|
|
32
25
|
<p>{{- site.description | escape -}}</p>
|
|
33
26
|
</div>
|
|
34
27
|
</div>
|
|
35
|
-
|
|
36
28
|
</div>
|
|
37
|
-
|
|
38
29
|
</footer>
|
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
|
+
{%- seo -%}
|
|
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
|
-
{
|
|
25
|
-
'production' and site.google_analytics -%}
|
|
26
|
-
|
|
34
|
+
{%- feed_meta -%}
|
|
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,27 +1,30 @@
|
|
|
1
1
|
<header class="site-header" role="banner">
|
|
2
|
+
{%- include theme_selector.html -%}
|
|
3
|
+
|
|
2
4
|
<div class="wrapper header-container">
|
|
3
5
|
{%- assign default_paths = site.pages | map: 'path' -%}
|
|
4
6
|
{%- assign page_paths = site.header_pages | default: default_paths -%}
|
|
5
|
-
<a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
|
|
6
|
-
<img class="logo" src="{{- "assets/theme-assets/theme-images/logo.svg" | relative_url -}}">
|
|
7
|
-
{%- if page_paths -%}
|
|
8
|
-
<nav class="site-nav">
|
|
9
|
-
<input type="checkbox" id="nav-trigger" class="nav-trigger">
|
|
10
|
-
<label for="nav-trigger">
|
|
11
|
-
<span class="menu-icon">
|
|
12
|
-
<img src="{{- "assets/theme-assets/theme-images/menu.svg" | relative_url -}}" alt="menu-icon">
|
|
13
|
-
</span>
|
|
14
|
-
</label>
|
|
15
7
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
{%- assign my_page = site.pages | where: 'path', path | first -%}
|
|
19
|
-
{%- if my_page.title -%}
|
|
20
|
-
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
|
|
21
|
-
{%- endif -%}
|
|
22
|
-
{%- endfor -%}
|
|
23
|
-
</div>
|
|
24
|
-
</nav>
|
|
25
|
-
{%- endif -%}
|
|
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 -}}"> -->
|
|
26
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 -%}
|
|
27
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
|
@@ -9,18 +9,17 @@ layout: default
|
|
|
9
9
|
{{ content }}
|
|
10
10
|
|
|
11
11
|
{%- if site.posts.size > 0 -%}
|
|
12
|
-
{%- include theme_picker.html -%}
|
|
13
12
|
<h2 class="post-list-heading">{{ page.list_title | default: 'Featured Posts' }}</h2>
|
|
14
13
|
<ul class="post-list">
|
|
15
14
|
{%- for post in site.posts -%}
|
|
16
|
-
<li class="post-card">
|
|
15
|
+
<li class="post-card custom-border">
|
|
17
16
|
{%- if post.image -%}
|
|
18
17
|
<img class="post-image" src="{{- post.image | relative_url -}}">
|
|
19
18
|
{%- endif -%}
|
|
20
19
|
<a class="post-link" href="{{ post.url | relative_url }}">
|
|
21
20
|
{%- assign date_format = site.minima.date_format | default: '%b %-d, %Y' -%}
|
|
22
21
|
<span class="post-meta">{{ post.date | date: date_format }}</span>
|
|
23
|
-
<h3>
|
|
22
|
+
<h3 class="card-title">
|
|
24
23
|
{{ post.title | escape }}
|
|
25
24
|
</h3>
|
|
26
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);
|
|
@@ -173,7 +176,6 @@ figure {
|
|
|
173
176
|
--md-sys-color-surface-container-high: rgb(37 43 42);
|
|
174
177
|
--md-sys-color-surface-container-highest: rgb(47 54 53);
|
|
175
178
|
}
|
|
176
|
-
|
|
177
179
|
.dark-green {
|
|
178
180
|
--md-sys-color-primary: rgb(177 209 138);
|
|
179
181
|
--md-sys-color-surface-tint: rgb(177 209 138);
|
|
@@ -198,7 +200,8 @@ figure {
|
|
|
198
200
|
--md-sys-color-on-surface: rgb(226 227 216);
|
|
199
201
|
--md-sys-color-surface-variant: rgb(68 72 61);
|
|
200
202
|
--md-sys-color-on-surface-variant: rgb(197 200 186);
|
|
201
|
-
--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%);
|
|
202
205
|
--md-sys-color-outline-variant: rgb(68 72 61);
|
|
203
206
|
--md-sys-color-shadow: rgb(0 0 0);
|
|
204
207
|
--md-sys-color-scrim: rgb(0 0 0);
|
|
@@ -225,7 +228,6 @@ figure {
|
|
|
225
228
|
--md-sys-color-surface-container-high: rgb(40 43 36);
|
|
226
229
|
--md-sys-color-surface-container-highest: rgb(51 54 46);
|
|
227
230
|
}
|
|
228
|
-
|
|
229
231
|
.dark-pink {
|
|
230
232
|
--md-sys-color-primary: rgb(240 179 231);
|
|
231
233
|
--md-sys-color-surface-tint: rgb(240 179 231);
|
|
@@ -250,7 +252,8 @@ figure {
|
|
|
250
252
|
--md-sys-color-on-surface: rgb(235 223 230);
|
|
251
253
|
--md-sys-color-surface-variant: rgb(78 68 75);
|
|
252
254
|
--md-sys-color-on-surface-variant: rgb(209 195 203);
|
|
253
|
-
--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%);
|
|
254
257
|
--md-sys-color-outline-variant: rgb(78 68 75);
|
|
255
258
|
--md-sys-color-shadow: rgb(0 0 0);
|
|
256
259
|
--md-sys-color-scrim: rgb(0 0 0);
|
|
@@ -277,14 +280,16 @@ figure {
|
|
|
277
280
|
--md-sys-color-surface-container-high: rgb(47 40 45);
|
|
278
281
|
--md-sys-color-surface-container-highest: rgb(58 51 56);
|
|
279
282
|
}
|
|
283
|
+
|
|
280
284
|
.logo {
|
|
281
|
-
height:
|
|
282
|
-
|
|
285
|
+
height: 120px;
|
|
286
|
+
@include media-query($on-palm) {
|
|
287
|
+
height: 90px;
|
|
288
|
+
}
|
|
283
289
|
}
|
|
284
290
|
.header-container {
|
|
285
291
|
display: flex;
|
|
286
292
|
justify-content: center;
|
|
287
|
-
align-items: center;
|
|
288
293
|
flex-direction: column;
|
|
289
294
|
}
|
|
290
295
|
@font-face {
|
|
@@ -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
|
@@ -6,18 +6,10 @@
|
|
|
6
6
|
border-top: 5px solid var(--md-sys-color-outline-dark);
|
|
7
7
|
// border-bottom: 1px solid var(--md-sys-color-outline);
|
|
8
8
|
min-height: $spacing-unit * 1.865;
|
|
9
|
-
|
|
10
9
|
// Positioning context for the mobile navigation icon
|
|
11
10
|
position: relative;
|
|
12
11
|
}
|
|
13
|
-
|
|
14
|
-
// border: 1px solid var(--md-sys-color-outline);
|
|
15
|
-
display: flex;
|
|
16
|
-
flex-direction: column;
|
|
17
|
-
border-radius: 14px;
|
|
18
|
-
padding: 12px;
|
|
19
|
-
background-color: var(--md-sys-color-surface-container);
|
|
20
|
-
}
|
|
12
|
+
|
|
21
13
|
.site-title {
|
|
22
14
|
@include relative-font-size(1.625);
|
|
23
15
|
font-family: Virgil;
|
|
@@ -25,14 +17,13 @@
|
|
|
25
17
|
text-align: center;
|
|
26
18
|
letter-spacing: -1px;
|
|
27
19
|
margin-bottom: 0;
|
|
28
|
-
margin-top: 12px;
|
|
20
|
+
// margin-top: 12px;
|
|
29
21
|
font-size: 56px;
|
|
30
22
|
padding-right: 0;
|
|
31
23
|
// float: left;
|
|
32
24
|
|
|
33
25
|
@include media-query($on-palm) {
|
|
34
26
|
font-size: 38px;
|
|
35
|
-
padding-right: 43px;
|
|
36
27
|
}
|
|
37
28
|
|
|
38
29
|
&,
|
|
@@ -40,21 +31,7 @@
|
|
|
40
31
|
// color: $grey-color-dark;
|
|
41
32
|
}
|
|
42
33
|
}
|
|
43
|
-
|
|
44
|
-
width: 26px;
|
|
45
|
-
height: 26px;
|
|
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
|
-
justify-content: center;
|
|
57
|
-
}
|
|
34
|
+
|
|
58
35
|
#pink-theme {
|
|
59
36
|
background-color: #f0b3e7;
|
|
60
37
|
}
|
|
@@ -71,7 +48,7 @@
|
|
|
71
48
|
background-color: #81d5cd;
|
|
72
49
|
}
|
|
73
50
|
.site-nav {
|
|
74
|
-
float: right;
|
|
51
|
+
// float: right;
|
|
75
52
|
line-height: $base-line-height * $base-font-size * 2.25;
|
|
76
53
|
|
|
77
54
|
.nav-trigger {
|
|
@@ -81,11 +58,20 @@
|
|
|
81
58
|
.menu-icon {
|
|
82
59
|
display: none;
|
|
83
60
|
}
|
|
61
|
+
.trigger {
|
|
62
|
+
display: flex;
|
|
63
|
+
justify-content: center;
|
|
84
64
|
|
|
65
|
+
border-radius: 999px;
|
|
66
|
+
}
|
|
85
67
|
.page-link {
|
|
86
|
-
color:
|
|
87
|
-
|
|
88
|
-
|
|
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;
|
|
89
75
|
// Gaps between nav items, but not on the last one
|
|
90
76
|
&:not(:last-child) {
|
|
91
77
|
margin-right: 20px;
|
|
@@ -94,8 +80,8 @@
|
|
|
94
80
|
|
|
95
81
|
@include media-query($on-palm) {
|
|
96
82
|
position: absolute;
|
|
97
|
-
top:
|
|
98
|
-
|
|
83
|
+
top: 12px;
|
|
84
|
+
left: 12px;
|
|
99
85
|
background-color: var(--md-sys-color-surface-container);
|
|
100
86
|
border-radius: 8px;
|
|
101
87
|
text-align: right;
|
|
@@ -105,7 +91,6 @@
|
|
|
105
91
|
|
|
106
92
|
label[for="nav-trigger"] {
|
|
107
93
|
display: block;
|
|
108
|
-
float: right;
|
|
109
94
|
width: 36px;
|
|
110
95
|
height: 36px;
|
|
111
96
|
z-index: 2;
|
|
@@ -230,7 +215,6 @@
|
|
|
230
215
|
|
|
231
216
|
.post-list-heading {
|
|
232
217
|
@include relative-font-size(1.75);
|
|
233
|
-
margin-top: 15px;
|
|
234
218
|
}
|
|
235
219
|
|
|
236
220
|
.post-list {
|
|
@@ -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,14 +1,14 @@
|
|
|
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.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Gul Noor
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-07-
|
|
11
|
+
date: 2024-07-27 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email:
|
|
@@ -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>
|