jekyll-theme-dusk 0.1.1 → 0.2.3
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 +1 -1
- data/_data/navigation.yml +6 -0
- data/_includes/footer.html +20 -0
- data/_includes/header-default.html +4 -1
- data/_includes/header-home.html +3 -32
- data/_includes/header-post.html +18 -0
- data/_includes/navigation.html +34 -7
- data/_layouts/blog.html +25 -0
- data/_layouts/default.html +1 -0
- data/_layouts/home.html +1 -1
- data/_layouts/post.html +17 -7
- data/_sass/base.scss +23 -145
- data/_sass/css-reset.scss +38 -0
- data/_sass/fonts.scss +18 -0
- data/_sass/include.scss +173 -0
- data/assets/images/about-icon.png +0 -0
- data/assets/images/blog-icon.png +0 -0
- data/assets/images/cross.png +0 -0
- data/assets/images/dusk-gray.jpg +0 -0
- data/assets/images/dusk.jpg +0 -0
- data/assets/images/github-logo.png +0 -0
- data/assets/images/noise.png +0 -0
- metadata +15 -3
- data/_layouts/page.html +0 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 78642afdc7325d840ce411425624f75c0f0fab2c01ebe9a5029d7081455aa31d
|
|
4
|
+
data.tar.gz: 92e26fa4bf184725d992c930bb8295086c3be450d1f26775fe595bd48dbace0f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 562d2479705bb9235236efecf26ecbf8a69a8e2d9540b1bee9091ee2463595b83db8b28952d12e2b6d1e7283796e1eda640c46d7118009a38ccc1165c0d1a9dd
|
|
7
|
+
data.tar.gz: 5247a38e48013cedeebabf7f963a9a4a426fc96111b9f8e8986a2b735e59ae0ea6976e01c9ed8dbd896063b618eca63ab57c7cff22fee50c6855c148bceae55c
|
data/README.md
CHANGED
|
@@ -34,7 +34,7 @@ TODO: Write usage instructions here. Describe your available layouts, includes,
|
|
|
34
34
|
|
|
35
35
|
## Contributing
|
|
36
36
|
|
|
37
|
-
Bug reports and pull requests are welcome on GitHub at https://github.com/
|
|
37
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/Parmjot-Singh/jekyll-theme-dusk. 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.
|
|
38
38
|
|
|
39
39
|
## Development
|
|
40
40
|
|
data/_data/navigation.yml
CHANGED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<footer>
|
|
2
|
+
{%- if site.data.navigation -%}
|
|
3
|
+
<div id="footer-links">
|
|
4
|
+
{%- for item in site.data.navigation -%}
|
|
5
|
+
<a href="{{ item.link }}">
|
|
6
|
+
<div>
|
|
7
|
+
{%- if item.name -%}
|
|
8
|
+
{{ item.name }}
|
|
9
|
+
{%- else %}
|
|
10
|
+
{{ item.link }}
|
|
11
|
+
{%- endif -%}
|
|
12
|
+
</div>
|
|
13
|
+
</a>
|
|
14
|
+
{%- endfor -%}
|
|
15
|
+
</div>
|
|
16
|
+
<div id="blatant-advertising">
|
|
17
|
+
This website is using Dusk, a theme built with ❤️ for GitHub pages, by Parmjot Singh.
|
|
18
|
+
</div>
|
|
19
|
+
{%- endif -%}
|
|
20
|
+
</footer>
|
data/_includes/header-home.html
CHANGED
|
@@ -1,39 +1,10 @@
|
|
|
1
1
|
<div class="home"> <!-- this is so that the formatting can differentiate between header layouts. There has to be a better solution -->
|
|
2
|
+
{%- include navigation.html -%}
|
|
2
3
|
<header>
|
|
3
4
|
<div id="header-content"> <!-- center div in middle, and allow text to remain above quick links 60% height of viewport -->
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
<h2 class="page-summary">{{ page.summary }}</h2>
|
|
7
|
-
</div>
|
|
8
|
-
<div id="quick-links"> <!-- quick links -->
|
|
5
|
+
<h1 class="page-title">{{ page.title }}</h1>
|
|
6
|
+
<h2 class="page-summary">{{ page.summary }}</h2>
|
|
9
7
|
|
|
10
|
-
<a class="ql-container" href="{{ page.ql-1-link | default: '/about.html' }}">
|
|
11
|
-
<div class="ql-icon-container">
|
|
12
|
-
<img src="{{ page.ql-1-image | default: '/assets/images/about-icon.png' }}">
|
|
13
|
-
</div> <!-- end ql-icon-container -->
|
|
14
|
-
<div class="ql-text">
|
|
15
|
-
{{ page.ql-1-display | default: "About" }}
|
|
16
|
-
</div>
|
|
17
|
-
|
|
18
|
-
</a>
|
|
19
|
-
|
|
20
|
-
<a class="ql-container" href="{{ page.ql-2-link | default: '/posts.html' }}">
|
|
21
|
-
<div class="ql-icon-container">
|
|
22
|
-
<img src="{{ page.ql-2-image | default: '/assets/images/posts-icon.png' }}">
|
|
23
|
-
</div> <!-- end ql-icon-container -->
|
|
24
|
-
<div class="ql-text">
|
|
25
|
-
{{ page.ql-2-display | default: "Posts" }}
|
|
26
|
-
</div> <!-- end ql-text -->
|
|
27
|
-
</a>
|
|
28
|
-
<a class="ql-container" href="{{ page.ql-3-link | default: '' }}">
|
|
29
|
-
<div class="ql-icon-container">
|
|
30
|
-
<img src="{{ page.ql-3-image | default: '/assets/images/github-logo.png' }}">
|
|
31
|
-
</div> <!-- end ql-icon-container -->
|
|
32
|
-
<div class="ql-text">
|
|
33
|
-
{{ page.ql-3-display | default: "GitHub" }}
|
|
34
|
-
</div> <!-- end ql-text -->
|
|
35
|
-
</a>
|
|
36
|
-
</div>
|
|
37
8
|
</div>
|
|
38
9
|
</header>
|
|
39
10
|
</div>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
|
|
2
|
+
<header>
|
|
3
|
+
<div id="header-content">
|
|
4
|
+
<h1 class="page-title">Blog</h1>
|
|
5
|
+
<div id="why"><!-- if anyone can fix this, they get their name in the footer of every website who uses this theme -->
|
|
6
|
+
<a class="b2b-container" href="/blog.html">
|
|
7
|
+
<div class="b2b-icon-container">
|
|
8
|
+
<img src="/assets/images/blog-icon.png">
|
|
9
|
+
</div>
|
|
10
|
+
<div class="b2-blog">
|
|
11
|
+
<small>
|
|
12
|
+
Back to Blog
|
|
13
|
+
</small>
|
|
14
|
+
</div>
|
|
15
|
+
</a>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</header>
|
data/_includes/navigation.html
CHANGED
|
@@ -1,9 +1,36 @@
|
|
|
1
|
-
|
|
1
|
+
<script>
|
|
2
|
+
/* Set the width of the side navigation to 250px */
|
|
3
|
+
function openNav() {
|
|
4
|
+
document.getElementById("sideNav").style.width = "200px";
|
|
5
|
+
document.getElementById("open-nav").style.right = "-100px";
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* Set the width of the side navigation to 0 */
|
|
9
|
+
function closeNav() {
|
|
10
|
+
document.getElementById("sideNav").style.width = "0";
|
|
11
|
+
document.getElementById("open-nav").style.right = "7px";
|
|
12
|
+
}
|
|
13
|
+
</script>
|
|
2
14
|
<nav>
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
15
|
+
<div id="sideNav" class="sidenav">
|
|
16
|
+
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><img src="/assets/images/cross.png"></a>
|
|
17
|
+
{%- if site.data.navigation -%}
|
|
18
|
+
{%- for item in site.data.navigation -%}
|
|
19
|
+
<a href="{{ item.link }}">
|
|
20
|
+
<div style="width: 24px;"> <!-- even spacing -->
|
|
21
|
+
{%- if item.icon -%}
|
|
22
|
+
<img src="{{ item.icon }}" class="nav-links-icon">
|
|
23
|
+
{%- endif -%}
|
|
24
|
+
</div>
|
|
25
|
+
{%- if item.name -%}
|
|
26
|
+
{{ item.name }}
|
|
27
|
+
{%- else %}
|
|
28
|
+
{{ item.link }}
|
|
29
|
+
{%- endif -%}
|
|
30
|
+
<div style="width: 24px;"> <!-- even spacing --> </div>
|
|
31
|
+
</a>
|
|
32
|
+
{%- endfor -%}
|
|
33
|
+
{%- endif -%}
|
|
34
|
+
</div>
|
|
35
|
+
<span onclick="openNav()" id="open-nav">Navigation</span>
|
|
8
36
|
</nav>
|
|
9
|
-
-->
|
data/_layouts/blog.html
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="{{ site.lang | default: 'en-US' }}">
|
|
3
|
+
{%- include head.html -%}
|
|
4
|
+
<body>
|
|
5
|
+
{%- include navigation.html -%}
|
|
6
|
+
{%- include header-default.html -%}
|
|
7
|
+
<div class="blog">
|
|
8
|
+
<main>
|
|
9
|
+
{{ content }}
|
|
10
|
+
<hr>
|
|
11
|
+
<h2>Latest Posts</h2>
|
|
12
|
+
<ul>
|
|
13
|
+
{%- for post in site.posts -%}
|
|
14
|
+
<li>
|
|
15
|
+
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
|
|
16
|
+
{%- if post.author -%} - {{ post.author }}{%- endif -%}
|
|
17
|
+
{{ post.excerpt }}
|
|
18
|
+
</li>
|
|
19
|
+
{%- endfor -%}
|
|
20
|
+
</ul>
|
|
21
|
+
</main>
|
|
22
|
+
</div>
|
|
23
|
+
{%- include footer.html -%}
|
|
24
|
+
</body>
|
|
25
|
+
</html>
|
data/_layouts/default.html
CHANGED
data/_layouts/home.html
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
<html lang="{{ site.lang | default: 'en-US' }}">
|
|
3
3
|
{%- include head.html -%}
|
|
4
4
|
<body>
|
|
5
|
-
{%- include navigation.html -%}
|
|
6
5
|
{%- include header-home.html -%}
|
|
7
6
|
<main>
|
|
8
7
|
<div class="home">
|
|
9
8
|
{{ content }}
|
|
10
9
|
</div>
|
|
11
10
|
</main>
|
|
11
|
+
{%- include footer.html -%}
|
|
12
12
|
</body>
|
|
13
13
|
</html>
|
data/_layouts/post.html
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="{{ site.lang | default: 'en-US' }}">
|
|
3
|
+
{%- include head.html -%}
|
|
4
|
+
<body>
|
|
5
|
+
{%- include navigation.html -%}
|
|
6
|
+
{%- include header-post.html -%}
|
|
7
|
+
<main>
|
|
8
|
+
<h2>{{ page.title }}</h2>
|
|
9
|
+
<h5>{{ page.author }}</h5>
|
|
10
|
+
<p>{{ page.date | date_to_string }}</p>
|
|
11
|
+
<article>
|
|
12
|
+
{{ content }}
|
|
13
|
+
</article>
|
|
14
|
+
</main>
|
|
15
|
+
{%- include footer.html -%}
|
|
16
|
+
</body>
|
|
17
|
+
</html>
|
data/_sass/base.scss
CHANGED
|
@@ -1,43 +1,7 @@
|
|
|
1
1
|
@use "sass:math";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
*, *::before, *::after {
|
|
6
|
-
box-sizing: border-box;
|
|
7
|
-
}
|
|
8
|
-
/* 2. Remove default margin */
|
|
9
|
-
* {
|
|
10
|
-
margin: 0;
|
|
11
|
-
}
|
|
12
|
-
/* 3. Allow percentage-based heights in the application */
|
|
13
|
-
html, body {
|
|
14
|
-
height: 100%;
|
|
15
|
-
}
|
|
16
|
-
/* Typographic tweaks!
|
|
17
|
-
4. Add accessible line-height
|
|
18
|
-
5. Improve text rendering
|
|
19
|
-
*/
|
|
20
|
-
body {
|
|
21
|
-
line-height: 1.5;
|
|
22
|
-
-webkit-font-smoothing: antialiased;
|
|
23
|
-
}
|
|
24
|
-
/* 6. Improve media defaults */
|
|
25
|
-
img, picture, video, canvas, svg {
|
|
26
|
-
display: block;
|
|
27
|
-
max-width: 100%;
|
|
28
|
-
}
|
|
29
|
-
/* 7. Remove built-in form typography styles */
|
|
30
|
-
input, button, textarea, select {
|
|
31
|
-
font: inherit;
|
|
32
|
-
}
|
|
33
|
-
/* 8. Avoid text overflows */
|
|
34
|
-
p, h1, h2, h3, h4, h5, h6 {
|
|
35
|
-
overflow-wrap: break-word;
|
|
36
|
-
}
|
|
37
|
-
/* 9. Create a root stacking context */
|
|
38
|
-
#root, #__next {
|
|
39
|
-
isolation: isolate;
|
|
40
|
-
}
|
|
2
|
+
@import "css-reset";
|
|
3
|
+
@import "fonts";
|
|
4
|
+
@import "include";
|
|
41
5
|
|
|
42
6
|
/* Colours */
|
|
43
7
|
$primary-colour: #c7bc87; // Light Gold
|
|
@@ -54,16 +18,6 @@ $background-colour: #171717; // Dark Gray
|
|
|
54
18
|
color: white;
|
|
55
19
|
}
|
|
56
20
|
|
|
57
|
-
/* Fonts */
|
|
58
|
-
/* Display */
|
|
59
|
-
@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap');
|
|
60
|
-
|
|
61
|
-
/* Content */
|
|
62
|
-
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap');
|
|
63
|
-
|
|
64
|
-
/* Symbols */
|
|
65
|
-
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
|
|
66
|
-
|
|
67
21
|
p {
|
|
68
22
|
@include content;
|
|
69
23
|
font-size: 0.8rem;
|
|
@@ -85,15 +39,20 @@ h3 {
|
|
|
85
39
|
}
|
|
86
40
|
|
|
87
41
|
h4 {
|
|
88
|
-
font-size:
|
|
42
|
+
font-size: 1.1rem;
|
|
43
|
+
font-weight: 200;
|
|
89
44
|
}
|
|
90
45
|
|
|
91
46
|
h5 {
|
|
92
|
-
font-size:
|
|
47
|
+
font-size: 1rem;
|
|
48
|
+
font-weight: 200;
|
|
49
|
+
font-style: italic;
|
|
93
50
|
}
|
|
94
51
|
|
|
95
52
|
h6 {
|
|
96
|
-
font-size:
|
|
53
|
+
font-size: 0.9rem;
|
|
54
|
+
font-weight: 200;
|
|
55
|
+
font-style: italic;
|
|
97
56
|
}
|
|
98
57
|
|
|
99
58
|
h1, h2, h3, h4, h5, h6 {
|
|
@@ -105,101 +64,20 @@ a, a:hover, a:active, a:visited {
|
|
|
105
64
|
text-decoration: none;
|
|
106
65
|
}
|
|
107
66
|
|
|
108
|
-
/* _include file formatting */
|
|
109
|
-
/* header-home.html */
|
|
110
|
-
.home {
|
|
111
|
-
header {
|
|
112
|
-
display: block;
|
|
113
|
-
height: 70vh;
|
|
114
|
-
width: 100%;
|
|
115
|
-
text-align: center;
|
|
116
|
-
/* parallax effect in background */
|
|
117
|
-
background-image: url("/assets/images/dusk-gray.jpg");
|
|
118
|
-
background-repeat: no-repeat;
|
|
119
|
-
background-attachment: fixed;
|
|
120
|
-
background-position: center;
|
|
121
|
-
background-size: cover;
|
|
122
|
-
|
|
123
|
-
/* center content in header */
|
|
124
|
-
position: relative;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
#header-content {
|
|
128
|
-
display: inline-flex;
|
|
129
|
-
flex-direction: column;
|
|
130
|
-
width: 50%;
|
|
131
|
-
|
|
132
|
-
backdrop-filter: blur(10px);
|
|
133
|
-
background-color: rgba(0, 0, 0, 0.2);
|
|
134
|
-
box-shadow: 0px 0px 15px 15px rgba(0, 0, 0, 0.2);
|
|
135
|
-
|
|
136
|
-
/* center content in header */
|
|
137
|
-
margin: 0;
|
|
138
|
-
position: absolute;
|
|
139
|
-
top: 50%;
|
|
140
|
-
left: 50%;
|
|
141
|
-
transform: translate(-50%, -50%);
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
#quick-links {
|
|
145
|
-
display: flex;
|
|
146
|
-
flex-direction: row;
|
|
147
|
-
justify-content: space-evenly;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.ql-container {
|
|
151
|
-
display: inline-flex;
|
|
152
|
-
justify-content: center;
|
|
153
|
-
margin: 0;
|
|
154
|
-
padding: 0;
|
|
155
|
-
width: calc(100% / 3);
|
|
156
|
-
|
|
157
|
-
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
158
|
-
margin: 1%;
|
|
159
|
-
border-radius: 4px;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.ql-container:hover {
|
|
163
|
-
background-color: rgba(199, 188, 135, 0.2)
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.ql-icon-container {
|
|
167
|
-
position: relative;
|
|
168
|
-
height: 100%;
|
|
169
|
-
aspect-ratio: 1/1;
|
|
170
|
-
|
|
171
|
-
img {
|
|
172
|
-
padding: 15%;
|
|
173
|
-
position: absolute;
|
|
174
|
-
top: 0;
|
|
175
|
-
left: 0;
|
|
176
|
-
bottom: 0;
|
|
177
|
-
right: 0;
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.ql-icon-container:before {
|
|
182
|
-
content: "";
|
|
183
|
-
display: block;
|
|
184
|
-
padding-left: 100%;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.ql-text {
|
|
188
|
-
display: inline-block;
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
/* symbols font config. This is here because I'm assuming that I will only use this here. :clueless: */
|
|
193
|
-
.material-symbols-outlined {
|
|
194
|
-
font-variation-settings:
|
|
195
|
-
'FILL' 1,
|
|
196
|
-
'wght' 400,
|
|
197
|
-
'GRAD' 0,
|
|
198
|
-
'opsz' 48;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
67
|
/* Base Formatting */
|
|
202
68
|
html {
|
|
203
69
|
@include content;
|
|
204
70
|
background-color: $background-colour;
|
|
205
71
|
}
|
|
72
|
+
|
|
73
|
+
main {
|
|
74
|
+
width: 80vw;
|
|
75
|
+
margin: 30px auto 0 auto;
|
|
76
|
+
}
|
|
77
|
+
hr {
|
|
78
|
+
margin: 20px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
article {
|
|
82
|
+
margin: 20px 0;
|
|
83
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/* CSS Reset - https://www.joshwcomeau.com/css/custom-css-reset/ */
|
|
2
|
+
/* 1. Use a more-intuitive box-sizing model. */
|
|
3
|
+
*, *::before, *::after {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
/* 2. Remove default margin */
|
|
7
|
+
* {
|
|
8
|
+
margin: 0;
|
|
9
|
+
}
|
|
10
|
+
/* 3. Allow percentage-based heights in the application */
|
|
11
|
+
html, body {
|
|
12
|
+
height: 100%;
|
|
13
|
+
}
|
|
14
|
+
/* Typographic tweaks!
|
|
15
|
+
4. Add accessible line-height
|
|
16
|
+
5. Improve text rendering
|
|
17
|
+
*/
|
|
18
|
+
body {
|
|
19
|
+
line-height: 1.5;
|
|
20
|
+
-webkit-font-smoothing: antialiased;
|
|
21
|
+
}
|
|
22
|
+
/* 6. Improve media defaults */
|
|
23
|
+
img, picture, video, canvas, svg {
|
|
24
|
+
display: block;
|
|
25
|
+
max-width: 100%;
|
|
26
|
+
}
|
|
27
|
+
/* 7. Remove built-in form typography styles */
|
|
28
|
+
input, button, textarea, select {
|
|
29
|
+
font: inherit;
|
|
30
|
+
}
|
|
31
|
+
/* 8. Avoid text overflows */
|
|
32
|
+
p, h1, h2, h3, h4, h5, h6 {
|
|
33
|
+
overflow-wrap: break-word;
|
|
34
|
+
}
|
|
35
|
+
/* 9. Create a root stacking context */
|
|
36
|
+
#root, #__next {
|
|
37
|
+
isolation: isolate;
|
|
38
|
+
}
|
data/_sass/fonts.scss
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/* Fonts */
|
|
2
|
+
/* Display */
|
|
3
|
+
@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap');
|
|
4
|
+
|
|
5
|
+
/* Content */
|
|
6
|
+
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap');
|
|
7
|
+
|
|
8
|
+
/* Symbols */
|
|
9
|
+
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
|
|
10
|
+
|
|
11
|
+
/* symbols font config */
|
|
12
|
+
.material-symbols-outlined {
|
|
13
|
+
font-variation-settings:
|
|
14
|
+
'FILL' 1,
|
|
15
|
+
'wght' 400,
|
|
16
|
+
'GRAD' 0,
|
|
17
|
+
'opsz' 48;
|
|
18
|
+
}
|
data/_sass/include.scss
ADDED
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
/* _include file formatting */
|
|
2
|
+
/* header-home.html */
|
|
3
|
+
.home { /* this is to make sure that this code only affects the header-home.html file, and none of the other headers. */
|
|
4
|
+
header {
|
|
5
|
+
display: block;
|
|
6
|
+
height: 70vh;
|
|
7
|
+
width: 100%;
|
|
8
|
+
text-align: center;
|
|
9
|
+
/* parallax effect in background */
|
|
10
|
+
background-image: url("/assets/images/dusk-gray.jpg");
|
|
11
|
+
background-repeat: no-repeat;
|
|
12
|
+
background-attachment: fixed;
|
|
13
|
+
background-position: center;
|
|
14
|
+
background-size: cover;
|
|
15
|
+
|
|
16
|
+
/* center content in header */
|
|
17
|
+
position: relative;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
#header-content {
|
|
21
|
+
display: inline-flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
width: 50%;
|
|
24
|
+
/* center content in header */
|
|
25
|
+
margin: 0;
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 50%;
|
|
28
|
+
left: 50%;
|
|
29
|
+
transform: translate(-50%, -50%);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
#why {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: row;
|
|
35
|
+
justify-content: flex-start;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.b2b-container {
|
|
39
|
+
display: inline-flex;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
width: 120px;
|
|
42
|
+
margin: 0;
|
|
43
|
+
padding: 0;
|
|
44
|
+
|
|
45
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
46
|
+
border-radius: 4px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.b2b-container:hover {
|
|
50
|
+
background: rgba(199, 188, 135, 0.2) url(/assets/images/noise.png);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.b2b-icon-container {
|
|
54
|
+
position: relative;
|
|
55
|
+
height: 100%;
|
|
56
|
+
aspect-ratio: 1/1;
|
|
57
|
+
|
|
58
|
+
img {
|
|
59
|
+
padding: 15%;
|
|
60
|
+
position: absolute;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* header-default.html */
|
|
65
|
+
header {
|
|
66
|
+
display: block;
|
|
67
|
+
height: 50vh;
|
|
68
|
+
width: 100%;
|
|
69
|
+
|
|
70
|
+
/* parallax effect in background */
|
|
71
|
+
background-image: url("/assets/images/dusk-gray.jpg");
|
|
72
|
+
background-repeat: no-repeat;
|
|
73
|
+
background-attachment: fixed;
|
|
74
|
+
background-position: center;
|
|
75
|
+
background-size: cover;
|
|
76
|
+
|
|
77
|
+
/* center content in header */
|
|
78
|
+
position: relative;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
#header-content {
|
|
82
|
+
display: block;
|
|
83
|
+
width: 80vw;
|
|
84
|
+
/* center content in header */
|
|
85
|
+
margin: 0;
|
|
86
|
+
position: absolute;
|
|
87
|
+
top: 50%;
|
|
88
|
+
left: 50%;
|
|
89
|
+
transform: translate(-50%, -50%);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* navigation.html */
|
|
93
|
+
.sidenav {
|
|
94
|
+
height: 100%;
|
|
95
|
+
width: 0; /* changed with JavaScript */
|
|
96
|
+
position: fixed;
|
|
97
|
+
z-index: 2;
|
|
98
|
+
top: 0;
|
|
99
|
+
right: 0;
|
|
100
|
+
overflow-x: hidden;
|
|
101
|
+
transition: 0.5s;
|
|
102
|
+
|
|
103
|
+
text-align: center;
|
|
104
|
+
/* debug */
|
|
105
|
+
background-color: rgba(0, 0, 0, 0.6);
|
|
106
|
+
|
|
107
|
+
a {
|
|
108
|
+
display: flex;
|
|
109
|
+
justify-content: space-between;
|
|
110
|
+
|
|
111
|
+
padding: 11px;
|
|
112
|
+
transition: 0.5s;
|
|
113
|
+
height: 45px;
|
|
114
|
+
width: 100%;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.closebtn {
|
|
118
|
+
position: absolute;
|
|
119
|
+
top: 0;
|
|
120
|
+
left: 0;
|
|
121
|
+
width: 45px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
a:hover, .closebtn:hover {
|
|
125
|
+
background: rgba(199, 188, 135, 0.2) url(/assets/images/noise.png);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
#open-nav {
|
|
130
|
+
position: fixed;
|
|
131
|
+
top: 7px;
|
|
132
|
+
right: 7px;
|
|
133
|
+
z-index: 1;
|
|
134
|
+
display: block;
|
|
135
|
+
|
|
136
|
+
transition: 0.5s;
|
|
137
|
+
cursor: pointer;
|
|
138
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
139
|
+
border-radius: 4px;
|
|
140
|
+
padding: 3px 10px;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
#open-nav:hover {
|
|
144
|
+
background: rgba(199, 188, 135, 0.2) url(/assets/images/noise.png);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.nav-links-icon {
|
|
148
|
+
width: 24px;
|
|
149
|
+
display: inline-block;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* footer.html */
|
|
153
|
+
footer {
|
|
154
|
+
display: flex;
|
|
155
|
+
justify-content: space-between;
|
|
156
|
+
background: linear-gradient(100deg, #202020, #323232);
|
|
157
|
+
padding: 3% 10%;
|
|
158
|
+
margin-top: 60px;
|
|
159
|
+
width: 100%;}
|
|
160
|
+
|
|
161
|
+
#footer-links {
|
|
162
|
+
display: inline-flex;
|
|
163
|
+
flex-direction: column;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
#blatant-advertising {
|
|
167
|
+
display: flex;
|
|
168
|
+
flex-direction: column;
|
|
169
|
+
justify-content: flex-end;
|
|
170
|
+
text-align: right;
|
|
171
|
+
font-size: 85%;
|
|
172
|
+
width: 50%;
|
|
173
|
+
opacity: 50%;}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-theme-dusk
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.2.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Parmjot Singh
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-04-
|
|
11
|
+
date: 2023-04-25 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: github-pages
|
|
@@ -49,16 +49,28 @@ files:
|
|
|
49
49
|
- README.md
|
|
50
50
|
- _config.yml
|
|
51
51
|
- _data/navigation.yml
|
|
52
|
+
- _includes/footer.html
|
|
52
53
|
- _includes/head.html
|
|
53
54
|
- _includes/header-default.html
|
|
54
55
|
- _includes/header-home.html
|
|
56
|
+
- _includes/header-post.html
|
|
55
57
|
- _includes/navigation.html
|
|
58
|
+
- _layouts/blog.html
|
|
56
59
|
- _layouts/default.html
|
|
57
60
|
- _layouts/home.html
|
|
58
|
-
- _layouts/page.html
|
|
59
61
|
- _layouts/post.html
|
|
60
62
|
- _sass/base.scss
|
|
63
|
+
- _sass/css-reset.scss
|
|
64
|
+
- _sass/fonts.scss
|
|
65
|
+
- _sass/include.scss
|
|
61
66
|
- assets/css/styles.scss
|
|
67
|
+
- assets/images/about-icon.png
|
|
68
|
+
- assets/images/blog-icon.png
|
|
69
|
+
- assets/images/cross.png
|
|
70
|
+
- assets/images/dusk-gray.jpg
|
|
71
|
+
- assets/images/dusk.jpg
|
|
72
|
+
- assets/images/github-logo.png
|
|
73
|
+
- assets/images/noise.png
|
|
62
74
|
homepage: https://github.com/Parmjot-Singh/jekyll-theme-dusk/
|
|
63
75
|
licenses:
|
|
64
76
|
- MIT
|