dark-blog-theme 2.1.0 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c0c7c1154bebe192e2966b603874b0399840044a8d3755110b6cc74f9b8198a6
4
- data.tar.gz: c466a6a1512f11fbde6f220b258b48c2f74c2120d3d4024644d3c580179ce990
3
+ metadata.gz: 94edf36453d6046125d2733937955fd52c1ac473a25be4ebd0744c8101dcbb25
4
+ data.tar.gz: 702bd5cdc42a6ae5e584228396a3c4b12e8dff0f2bad156e3c316dcee6e77381
5
5
  SHA512:
6
- metadata.gz: 83a873160325c72c1e0197df3b944bc864dda15246ed77343f48be087d20f0ee80aff6578690fa14c6cd328b1c67fd7b9ac984c5d81e7ad2bb981d1933024d6f
7
- data.tar.gz: f22cf63935f0e052136f5140b76bd8da4ad0ed4c87b2f6b6ca59e6e8f1f41544be3966744aa9d0a4a33304747234d9ace816daccc0b8b0bb0901c747cf355c95
6
+ metadata.gz: 1595631adc0c40c631984b0e2147ee892f52f141122d6872c8d1b070b9dc41fc3a24d5916b3e04292d63cbb620468a67ec27acf6355151a501b1fe53f2155768
7
+ data.tar.gz: 3c775e9629a3b86436db2df2dd2b86a358003f31c00066847154655ede9c0077600ceb5f45b9a8860bb8525930bfe4f9288389b8768761dff1334054d3982a27
data/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # Jekyll Dark Theme for Blogs
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
4
  | | |
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 root = document.querySelector("html");
15
- const theme = window.localStorage.getItem("theme");
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("theme", "dark-pink");
18
- root.className = "dark-pink";
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 %} {%- if jekyll.environment ==
25
- 'production' and site.google_analytics -%} {%- include google-analytics.html
26
- -%} {%- endif -%}
34
+ {%- feed_meta -%}
35
+ {%- if jekyll.environment == 'production' and site.google_analytics -%}
36
+ {%- include google-analytics.html -%}
37
+ {%- endif -%}
27
38
  </head>
@@ -1,30 +1,30 @@
1
1
  <header class="site-header" role="banner">
2
- {%- include theme_picker.html -%}
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>
@@ -6,6 +6,8 @@
6
6
  <body >
7
7
 
8
8
  {%- include header.html -%}
9
+ {%- include navrail.html -%}
10
+
9
11
 
10
12
  <main class="page-content" aria-label="Content">
11
13
  <div class="wrapper">
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>
@@ -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: rgb(150 144 128);
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: rgb(142 144 153);
99
- --md-sys-color-outline-variant: rgb(68 71 78);
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: rgb(137 147 145);
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: rgb(143 146 133);
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: rgb(154 141 149);
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
 
@@ -9,14 +9,7 @@
9
9
  // Positioning context for the mobile navigation icon
10
10
  position: relative;
11
11
  }
12
- .post-card {
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
- .select-theme {
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: $text-color;
90
- line-height: $base-line-height;
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: 15px;
101
- // right: $spacing-unit / 2;
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
@@ -47,5 +47,6 @@ $on-laptop: 800px !default;
47
47
  @import
48
48
  "minima/base",
49
49
  "minima/layout",
50
- "minima/syntax-highlighting"
50
+ "minima/syntax-highlighting",
51
+ "minima/mysass"
51
52
  ;
@@ -1,15 +1,27 @@
1
1
  (function () {
2
- const theme = window.localStorage.getItem("theme");
3
- const pickers = document.querySelectorAll("#picker");
4
- pickers.forEach((picker) => {
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
- ("#diplayselectedtheme");
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: 2.1.0
4
+ version: 3.0.0
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/theme_picker.html
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
@@ -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>