jekyll-theme-dusk 0.4.1 → 0.5.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +5 -4
- data/_config.yml +2 -12
- data/_data/navigation.yml +0 -2
- data/_includes/footer.html +18 -18
- data/_includes/head.html +4 -4
- data/_includes/header-default.html +3 -3
- data/_includes/header-home.html +7 -10
- data/_includes/header-post.html +8 -15
- data/_includes/image-gallery.html +7 -7
- data/_includes/navigation.html +31 -33
- data/_layouts/blog.html +19 -21
- data/_layouts/default.html +8 -8
- data/_layouts/home.html +9 -9
- data/_layouts/post.html +13 -13
- data/_sass/base.scss +184 -83
- data/_sass/css-reset.scss +10 -10
- data/_sass/device-support.scss +30 -15
- data/_sass/text.scss +43 -0
- data/_sass/variables.scss +14 -0
- data/assets/css/styles.scss +1 -1
- metadata +4 -5
- data/_sass/fonts.scss +0 -18
- data/_sass/include.scss +0 -175
- data/_sass/layout.scss +0 -10
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 98021741a38ec30b0f6cab6fc2fa9b3968101138d2d37d5c512ad70db65bad0c
|
|
4
|
+
data.tar.gz: b5162fb63acfb0089e7f7e774e9def719fe3d2c971f943bbc5cd91acaa5ca76d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 869911196277cdebcd6b39188d06624ff99ba1c638db23d7a46b080eddb2f242e3c522fa3e841a2c1976f2deeea42d60606ad9ca8138859dd4625d659d7ab968
|
|
7
|
+
data.tar.gz: 52e4957c66e3f9b77393e055a99be7493fb85f16438bd8c5469f7147eae4300f7db771a51cab8dd2d358182188ddd0624bd9b99d79ed2464e5e28c276aa8693e
|
data/README.md
CHANGED
|
@@ -57,10 +57,9 @@ This theme has many features in it. They are written here so that it is easier t
|
|
|
57
57
|
- ### Image Galleries
|
|
58
58
|
|
|
59
59
|
*This one is a bit complicated, but is pretty cool in my opinion.*
|
|
60
|
-
If you want to create a gallery, you will need to do a few things.
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
If you want to create a gallery, you will need to do a few things.
|
|
61
|
+
**In this section, replace [GALLERY_NAME] with the name of a gallery. This must be the same for all parts if you want to use the gallery without issues.**
|
|
62
|
+
|
|
64
63
|
1. Create the folders at the paths:
|
|
65
64
|
```
|
|
66
65
|
/assets/images/gallery/
|
|
@@ -105,6 +104,8 @@ This theme has many features in it. They are written here so that it is easier t
|
|
|
105
104
|
summary: "Dusk is a theme built for GitHub Pages."
|
|
106
105
|
```
|
|
107
106
|
|
|
107
|
+
You do not need the title or summary variables, as the variables ```{{ site.title }}``` and ```{{ site.description }}``` can be set in your ```_config.yml``` file as well, which is the default. This does override the other though.
|
|
108
|
+
|
|
108
109
|
- ### Blog Page
|
|
109
110
|
|
|
110
111
|
This page contains all your posts that you have made on your website. All you need to do is just to make some posts, and then they will all appear there.
|
data/_config.yml
CHANGED
|
@@ -17,26 +17,16 @@ exclude:
|
|
|
17
17
|
|
|
18
18
|
# Jekyll settings
|
|
19
19
|
sass:
|
|
20
|
-
style:
|
|
20
|
+
style: expanded
|
|
21
21
|
permalink: pretty
|
|
22
22
|
strict_front_matter: true # not sure if this goes here
|
|
23
23
|
|
|
24
24
|
# Site settings
|
|
25
25
|
encoding: utf-8
|
|
26
26
|
title: "Dusk"
|
|
27
|
+
description: "A dark coloured Jekyll theme compatible with GitHub Pages, with emphasis on elegance?"
|
|
27
28
|
|
|
28
29
|
#domain: parmjot-singh.github.io
|
|
29
30
|
#url: https://parmjot-singh.github.io
|
|
30
31
|
baseurl: ""
|
|
31
32
|
repo: "https://github.com/parmjot-singh/jekyll-theme-dusk"
|
|
32
|
-
|
|
33
|
-
# Load custom fonts
|
|
34
|
-
fonts:
|
|
35
|
-
preconnect_urls:
|
|
36
|
-
- https://fonts.gstatic.com
|
|
37
|
-
fonts_urls:
|
|
38
|
-
# Display - Chivo Mono
|
|
39
|
-
# Content - Titillium Web
|
|
40
|
-
# Second link - Material Symbols
|
|
41
|
-
- https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&family=Titillium+Web:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap
|
|
42
|
-
- https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
|
data/_data/navigation.yml
CHANGED
data/_includes/footer.html
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
<footer>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
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="footer__watermark">
|
|
17
|
+
This website is using Dusk, a theme built with ❤️ for GitHub pages, by Parmjot Singh.
|
|
18
|
+
</div>
|
|
19
|
+
{%- endif -%}
|
|
20
20
|
</footer>
|
data/_includes/head.html
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<head>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
<meta charset="utf-8" />
|
|
3
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
4
|
+
<title>{{ page.title }}</title>
|
|
5
|
+
<link rel="stylesheet" href="/assets/css/styles.css" />
|
|
6
6
|
</head>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<header>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
{%- include navigation.html -%}
|
|
3
|
+
<div id="header__content">
|
|
4
|
+
<h1 class="page-title">{{ page.title }}</h1>
|
|
5
5
|
<h2 class="page-summary">{{ page.summary }}</h2>
|
|
6
6
|
</div>
|
|
7
7
|
</header>
|
data/_includes/header-home.html
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
</div>
|
|
9
|
-
</header>
|
|
10
|
-
</div>
|
|
1
|
+
<header id="header--home">
|
|
2
|
+
{%- include navigation.html -%}
|
|
3
|
+
<div id="header__content"> <!-- center div in middle, and allow text to remain above quick links 60% height of viewport -->
|
|
4
|
+
<h1 class="page-title">{{ page.title | site.title }}</h1>
|
|
5
|
+
<h3 class="page-summary">{{ page.summary | default: site.description }}</h3>
|
|
6
|
+
</div>
|
|
7
|
+
</header>
|
data/_includes/header-post.html
CHANGED
|
@@ -1,18 +1,11 @@
|
|
|
1
1
|
<header>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<div class="b2-blog">
|
|
11
|
-
<small>
|
|
12
|
-
Back to Blog
|
|
13
|
-
</small>
|
|
14
|
-
</div>
|
|
15
|
-
</a>
|
|
16
|
-
</div>
|
|
2
|
+
{%- include navigation.html -%}
|
|
3
|
+
<div id="header__content">
|
|
4
|
+
<h1 class="page-title">Blog</h1>
|
|
5
|
+
<a class="b2b-container" href="/blog.html">
|
|
6
|
+
<small>
|
|
7
|
+
Back to Blog
|
|
8
|
+
</small>
|
|
9
|
+
</a>
|
|
17
10
|
</div>
|
|
18
11
|
</header>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<!-- credit to Tim Van Damme at css-tricks.com -->
|
|
2
2
|
<!-- https://css-tricks.com/adaptive-photo-layout-with-flexbox -->
|
|
3
3
|
<div class="image-gallery">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
<ul>
|
|
5
|
+
{%- for item in site.data.galleries[include.gallery_id] -%}
|
|
6
|
+
<li>
|
|
7
|
+
<img src="/assets/images/gallery/{{ include.gallery_id }}/{{ item.image }}">
|
|
8
|
+
</li>
|
|
9
|
+
{%- endfor -%}
|
|
10
|
+
</ul>
|
|
11
11
|
</div>
|
data/_includes/navigation.html
CHANGED
|
@@ -1,36 +1,34 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
2
|
+
/* Set the width of the side navigation to 250px */
|
|
3
|
+
function openNav() {
|
|
4
|
+
document.getElementById("nav").style.width = "200px";
|
|
5
|
+
document.getElementById("nav__openbtn").style.right = "-100px";
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* Set the width of the side navigation to 0 */
|
|
9
|
+
function closeNav() {
|
|
10
|
+
document.getElementById("nav").style.width = "0";
|
|
11
|
+
document.getElementById("nav__openbtn").style.right = "7px";
|
|
12
|
+
}
|
|
13
13
|
</script>
|
|
14
|
-
<nav>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
{%- endif -%}
|
|
34
|
-
</div>
|
|
35
|
-
<span onclick="openNav()" id="open-nav">Navigation</span>
|
|
14
|
+
<nav id="nav"> <!-- this has the ID nav because I do not think there is another way to get the JavaScript working. This is because there is no function to grab a tag, and apply a style to it, in the same way that getElementById() does. Otherwise, the ID does literally nothing, as all the formatting is applied to the nav tag itself -->
|
|
15
|
+
<a href="javascript:void(0)" id="nav__closebtn" onclick="closeNav()"><img src="/assets/images/cross.png"></a>
|
|
16
|
+
{%- if site.data.navigation -%}
|
|
17
|
+
{%- for item in site.data.navigation -%}
|
|
18
|
+
<a class="nav__links" href="{{ item.link }}">
|
|
19
|
+
<div style="width: 24px;"> <!-- even spacing -->
|
|
20
|
+
{%- if item.icon -%}
|
|
21
|
+
<img src="{{ item.icon }}" class="nav__links__icon">
|
|
22
|
+
{%- endif -%}
|
|
23
|
+
</div>
|
|
24
|
+
{%- if item.name -%}
|
|
25
|
+
{{ item.name }}
|
|
26
|
+
{%- else %}
|
|
27
|
+
{{ item.link }}
|
|
28
|
+
{%- endif -%}
|
|
29
|
+
<div style="width: 24px;"> <!-- even spacing --> </div>
|
|
30
|
+
</a>
|
|
31
|
+
{%- endfor -%}
|
|
32
|
+
{%- endif -%}
|
|
36
33
|
</nav>
|
|
34
|
+
<span onclick="openNav()" id="nav__openbtn">Navigation</span>
|
data/_layouts/blog.html
CHANGED
|
@@ -1,24 +1,22 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="{{ site.lang | default: 'en-US' }}">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
{%- include footer.html -%}
|
|
23
|
-
</body>
|
|
3
|
+
{%- include head.html -%}
|
|
4
|
+
<body>
|
|
5
|
+
{%- include header-default.html -%}
|
|
6
|
+
<main>
|
|
7
|
+
{{ content }}
|
|
8
|
+
<hr>
|
|
9
|
+
<h2>Latest Posts</h2>
|
|
10
|
+
<ul>
|
|
11
|
+
{%- for post in site.posts -%}
|
|
12
|
+
<li>
|
|
13
|
+
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
|
|
14
|
+
{%- if post.author -%} - {{ post.author }}{%- endif -%}
|
|
15
|
+
{{ post.excerpt }}
|
|
16
|
+
</li>
|
|
17
|
+
{%- endfor -%}
|
|
18
|
+
</ul>
|
|
19
|
+
</main>
|
|
20
|
+
{%- include footer.html -%}
|
|
21
|
+
</body>
|
|
24
22
|
</html>
|
data/_layouts/default.html
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="{{ site.lang | default: 'en-US' }}">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
3
|
+
{%- include head.html -%}
|
|
4
|
+
<body>
|
|
5
|
+
{%- include header-default.html -%}
|
|
6
|
+
<main>
|
|
7
|
+
{{ content }}
|
|
8
|
+
</main>
|
|
9
|
+
{%- include footer.html -%}
|
|
10
|
+
</body>
|
|
11
11
|
</html>
|
data/_layouts/home.html
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="{{ site.lang | default: 'en-US' }}">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
{%- include head.html -%}
|
|
4
|
+
<body>
|
|
5
|
+
{%- include header-home.html -%}
|
|
6
6
|
<main>
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
<div class="home">
|
|
8
|
+
{{ content }}
|
|
9
|
+
</div>
|
|
10
|
+
</main>
|
|
11
|
+
{%- include footer.html -%}
|
|
12
|
+
</body>
|
|
13
13
|
</html>
|
data/_layouts/post.html
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="{{ site.lang | default: 'en-US' }}">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
3
|
+
{%- include head.html -%}
|
|
4
|
+
<body>
|
|
5
|
+
{%- include header-post.html -%}
|
|
6
|
+
<main>
|
|
7
|
+
<h2>{{ page.title }}</h2>
|
|
8
|
+
<h4>{{ page.author }}</h4>
|
|
9
|
+
<p>{{ page.date | date_to_string }}</p>
|
|
10
|
+
<article>
|
|
11
|
+
{{ content }}
|
|
12
|
+
</article>
|
|
13
|
+
</main>
|
|
14
|
+
{%- include footer.html -%}
|
|
15
|
+
</body>
|
|
16
16
|
</html>
|
data/_sass/base.scss
CHANGED
|
@@ -1,112 +1,213 @@
|
|
|
1
|
-
@use "sass:math";
|
|
2
1
|
@import "css-reset";
|
|
3
|
-
@import "
|
|
4
|
-
@import "include";
|
|
5
|
-
@import "layout";
|
|
2
|
+
@import "text";
|
|
6
3
|
@import "device-support";
|
|
4
|
+
@import "variables.scss";
|
|
7
5
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
$background-colour: #171717; // Dark Gray
|
|
11
|
-
|
|
12
|
-
/* Templates */
|
|
13
|
-
@mixin display {
|
|
14
|
-
font-family: 'Chivo Mono', monospace;
|
|
15
|
-
color: $primary-colour;
|
|
6
|
+
h1, h2, h3, h4, h5, h6 {
|
|
7
|
+
@include display;
|
|
16
8
|
}
|
|
17
9
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
10
|
+
a, a:hover, a:active, a:visited {
|
|
11
|
+
color: white;
|
|
12
|
+
text-decoration: none;
|
|
21
13
|
}
|
|
22
14
|
|
|
15
|
+
/* Base Formatting */
|
|
23
16
|
html {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
h1 {
|
|
30
|
-
font-size: min(max(3rem, 9vw), 50px);
|
|
31
|
-
font-weight: 700;
|
|
17
|
+
@include content;
|
|
18
|
+
background-color: $background-colour;
|
|
19
|
+
transition: 0.5s;
|
|
32
20
|
}
|
|
33
21
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
22
|
+
header {
|
|
23
|
+
display: block;
|
|
24
|
+
height: 30vh;
|
|
25
|
+
flex-shrink: 0; /* this is so that the flex layout doesnt shrink the header when the window isn't tall enough to fit everything */
|
|
38
26
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
27
|
+
/* parallax effect in background */
|
|
28
|
+
background-image: url("/assets/images/dusk-gray.jpg");
|
|
29
|
+
background-repeat: no-repeat;
|
|
30
|
+
background-attachment: fixed;
|
|
31
|
+
background-position: center;
|
|
32
|
+
background-size: cover;
|
|
43
33
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
font-weight: 200;
|
|
34
|
+
/* center content in header */
|
|
35
|
+
position: relative;
|
|
47
36
|
}
|
|
48
37
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
font-style: italic;
|
|
38
|
+
#header--home {
|
|
39
|
+
height: 50vh;
|
|
40
|
+
text-align: center;
|
|
53
41
|
}
|
|
54
42
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
43
|
+
#header__content {
|
|
44
|
+
display: block;
|
|
45
|
+
width: 80vw;
|
|
46
|
+
/* center content in header */
|
|
47
|
+
margin: 0;
|
|
48
|
+
position: absolute;
|
|
49
|
+
top: 50%;
|
|
50
|
+
left: 50%;
|
|
51
|
+
transform: translate(-50%, -50%);
|
|
59
52
|
}
|
|
60
53
|
|
|
61
|
-
|
|
62
|
-
|
|
54
|
+
body {
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-direction: column;
|
|
57
|
+
align-items: stretch;
|
|
58
|
+
justify-content: space-between;
|
|
63
59
|
}
|
|
64
60
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
61
|
+
main {
|
|
62
|
+
width: 80vw;
|
|
63
|
+
margin: 30px auto 0 auto;
|
|
68
64
|
}
|
|
69
65
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
@include content;
|
|
73
|
-
background-color: $background-colour;
|
|
66
|
+
article {
|
|
67
|
+
margin: 20px 0;
|
|
74
68
|
}
|
|
75
69
|
|
|
76
|
-
main {
|
|
77
|
-
width: 80vw;
|
|
78
|
-
margin: 30px auto 0 auto;
|
|
79
|
-
}
|
|
80
70
|
hr {
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
article {
|
|
85
|
-
margin: 20px 0;
|
|
71
|
+
margin: 20px;
|
|
86
72
|
}
|
|
87
73
|
|
|
74
|
+
/* Custom Classes */
|
|
88
75
|
.image-gallery {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
76
|
+
margin: 10px 0;
|
|
77
|
+
|
|
78
|
+
ul {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-wrap: wrap;
|
|
81
|
+
list-style: none;
|
|
82
|
+
padding-left: 0;
|
|
83
|
+
margin: 0.75vmin;
|
|
84
|
+
|
|
85
|
+
&:after {
|
|
86
|
+
content: '';
|
|
87
|
+
display: block;
|
|
88
|
+
flex-grow: 10;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
li {
|
|
93
|
+
border: 1px solid rgba($primary-colour, 0.2);
|
|
94
|
+
border-radius: 0.5vmin;
|
|
95
|
+
padding: 3px;
|
|
96
|
+
flex-grow: 1;
|
|
97
|
+
margin: 0.75vmin;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
img {
|
|
101
|
+
max-height: 100%;
|
|
102
|
+
min-width: 100%;
|
|
103
|
+
object-fit: cover;
|
|
104
|
+
vertical-align: bottom;
|
|
105
|
+
border-radius: 0.5vmin;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.b2b-container {
|
|
110
|
+
display: inline-flex;
|
|
111
|
+
justify-content: center;
|
|
112
|
+
width: 120px;
|
|
113
|
+
margin: 0;
|
|
114
|
+
padding: 2px;
|
|
115
|
+
background-color: rgba(0, 0, 0, 0.6);
|
|
116
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
117
|
+
border-radius: 4px;
|
|
118
|
+
transition: 0.5s;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.b2b-container:hover {
|
|
122
|
+
background: rgba(199, 188, 135, 0.2) url(/assets/images/noise.png);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* navigation.html */
|
|
126
|
+
nav {
|
|
127
|
+
height: 100%;
|
|
128
|
+
width: 0; /* changed with JavaScript */
|
|
129
|
+
position: fixed;
|
|
130
|
+
z-index: 2;
|
|
131
|
+
top: 0;
|
|
132
|
+
right: 0;
|
|
133
|
+
overflow-x: hidden;
|
|
134
|
+
transition: 0.5s;
|
|
135
|
+
|
|
136
|
+
text-align: center;
|
|
137
|
+
background-color: rgba(0, 0, 0, 0.6);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.nav__links {
|
|
141
|
+
display: flex;
|
|
142
|
+
justify-content: space-between;
|
|
143
|
+
|
|
144
|
+
padding: 11px;
|
|
145
|
+
transition: 0.5s;
|
|
146
|
+
height: 45px;
|
|
147
|
+
width: 100%;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
#nav__closebtn {
|
|
151
|
+
transition: 0.5s;
|
|
152
|
+
padding: 11px;
|
|
153
|
+
position: absolute;
|
|
154
|
+
top: 0;
|
|
155
|
+
left: 0;
|
|
156
|
+
width: 45px;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.nav__links:hover, #nav__closebtn:hover {
|
|
160
|
+
background: rgba(199, 188, 135, 0.2) url(/assets/images/noise.png);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.nav__links__icon {
|
|
164
|
+
width: 24px;
|
|
165
|
+
display: inline-block;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
#nav__openbtn {
|
|
169
|
+
background-color: rgba(0, 0, 0, 0.6);
|
|
170
|
+
position: fixed;
|
|
171
|
+
top: 7px;
|
|
172
|
+
right: 7px;
|
|
173
|
+
z-index: 1;
|
|
174
|
+
display: block;
|
|
175
|
+
|
|
176
|
+
transition: 0.5s;
|
|
177
|
+
cursor: pointer;
|
|
178
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
179
|
+
border-radius: 4px;
|
|
180
|
+
padding: 3px 10px;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
#nav__openbtn:hover {
|
|
184
|
+
background: rgba(199, 188, 135, 0.2) url(/assets/images/noise.png);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* footer.html */
|
|
188
|
+
footer {
|
|
189
|
+
display: flex;
|
|
190
|
+
justify-content: space-between;
|
|
191
|
+
background: linear-gradient(100deg, #202020, #323232);
|
|
192
|
+
padding: 3% 10%;
|
|
193
|
+
margin-top: 5%;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
#footer__links {
|
|
197
|
+
display: inline-flex;
|
|
198
|
+
flex-direction: column;
|
|
199
|
+
a:hover {
|
|
200
|
+
transition: 0.5s;
|
|
201
|
+
color: $primary_colour;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
#footer__watermark {
|
|
206
|
+
display: flex;
|
|
207
|
+
flex-direction: column;
|
|
208
|
+
justify-content: flex-end;
|
|
209
|
+
text-align: right;
|
|
210
|
+
font-size: 85%;
|
|
211
|
+
width: 50%;
|
|
212
|
+
opacity: 50%;
|
|
112
213
|
}
|
data/_sass/css-reset.scss
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
1
|
/* CSS Reset - https://www.joshwcomeau.com/css/custom-css-reset/ */
|
|
2
2
|
/* 1. Use a more-intuitive box-sizing model. */
|
|
3
3
|
*, *::before, *::after {
|
|
4
|
-
|
|
4
|
+
box-sizing: border-box;
|
|
5
5
|
}
|
|
6
6
|
/* 2. Remove default margin */
|
|
7
7
|
* {
|
|
8
|
-
|
|
8
|
+
margin: 0;
|
|
9
9
|
}
|
|
10
10
|
/* 3. Allow percentage-based heights in the application */
|
|
11
11
|
html, body {
|
|
12
|
-
|
|
12
|
+
height: 100%;
|
|
13
13
|
}
|
|
14
14
|
/* Typographic tweaks!
|
|
15
15
|
4. Add accessible line-height
|
|
16
16
|
5. Improve text rendering
|
|
17
17
|
*/
|
|
18
18
|
body {
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
line-height: 1.5;
|
|
20
|
+
-webkit-font-smoothing: antialiased;
|
|
21
21
|
}
|
|
22
22
|
/* 6. Improve media defaults */
|
|
23
23
|
img, picture, video, canvas, svg {
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
display: block;
|
|
25
|
+
max-width: 100%;
|
|
26
26
|
}
|
|
27
27
|
/* 7. Remove built-in form typography styles */
|
|
28
28
|
input, button, textarea, select {
|
|
29
|
-
|
|
29
|
+
font: inherit;
|
|
30
30
|
}
|
|
31
31
|
/* 8. Avoid text overflows */
|
|
32
32
|
p, h1, h2, h3, h4, h5, h6 {
|
|
33
|
-
|
|
33
|
+
overflow-wrap: break-word;
|
|
34
34
|
}
|
|
35
35
|
/* 9. Create a root stacking context */
|
|
36
36
|
#root, #__next {
|
|
37
|
-
|
|
37
|
+
isolation: isolate;
|
|
38
38
|
}
|
data/_sass/device-support.scss
CHANGED
|
@@ -1,32 +1,47 @@
|
|
|
1
1
|
/* Extra small devices (phones, 600px and down) */
|
|
2
2
|
@media only screen and (max-width: 600px) {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
.image-gallery {
|
|
4
|
+
li {
|
|
5
|
+
height: 15vh;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
#header__content {
|
|
10
|
+
width: 80vw;
|
|
11
|
+
}
|
|
8
12
|
}
|
|
9
13
|
|
|
10
14
|
/* Small devices (portrait tablets and large phones, 600px and up) */
|
|
11
15
|
@media only screen and (min-width: 600px) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
.image-gallery {
|
|
17
|
+
li {
|
|
18
|
+
height: 20vh;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
#header__content {
|
|
23
|
+
width: 80vw;
|
|
24
|
+
}
|
|
17
25
|
}
|
|
18
26
|
|
|
19
27
|
/* Medium devices (landscape tablets, 768px and up) */
|
|
20
28
|
@media only screen and (min-width: 768px) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
29
|
+
.image-gallery {
|
|
30
|
+
li {
|
|
31
|
+
height: 30vh;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
#header__content {
|
|
36
|
+
width: 80vw;
|
|
37
|
+
}
|
|
26
38
|
}
|
|
27
39
|
|
|
28
40
|
/* Large devices (laptops/desktops, 992px and up) */
|
|
29
41
|
@media only screen and (min-width: 992px) {
|
|
42
|
+
#header__content {
|
|
43
|
+
width: 50vw;
|
|
44
|
+
}
|
|
30
45
|
}
|
|
31
46
|
|
|
32
47
|
/* Extra large devices (large laptops and desktops, 1200px and up) */
|
data/_sass/text.scss
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
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
|
+
/* Text formatting */
|
|
9
|
+
html {
|
|
10
|
+
font-size: min(max(16px, 2vw), 18px);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
h1 {
|
|
14
|
+
font-size: min(max(2.5rem, 9vw), 50px);
|
|
15
|
+
font-weight: 700;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
h2 {
|
|
19
|
+
font-size: min(max(2rem, 6vw), 25px);
|
|
20
|
+
font-weight: 400;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
h3 {
|
|
24
|
+
font-size: min(max(1.8rem, 5vw), 22px);
|
|
25
|
+
font-weight: 200;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h4 {
|
|
29
|
+
font-size: min(max(1.6rem, 4vw), 19px);
|
|
30
|
+
font-weight: 200;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
h5 {
|
|
34
|
+
font-size: min(max(1.4rem, 3vw), 17.5px);
|
|
35
|
+
font-weight: 200;
|
|
36
|
+
font-style: italic;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
h6 {
|
|
40
|
+
font-size: min(max(1.1rem, 2vw), 16px);
|
|
41
|
+
font-weight: 200;
|
|
42
|
+
font-style: italic;
|
|
43
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/* Colours */
|
|
2
|
+
$primary-colour: #c7bc87; // Light Gold
|
|
3
|
+
$background-colour: #171717; // Dark Gray
|
|
4
|
+
|
|
5
|
+
/* Templates */
|
|
6
|
+
@mixin display {
|
|
7
|
+
font-family: 'Chivo Mono', monospace;
|
|
8
|
+
color: $primary-colour;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@mixin content {
|
|
12
|
+
font-family: 'Titillium Web', sans-serif;
|
|
13
|
+
color: white;
|
|
14
|
+
}
|
data/assets/css/styles.scss
CHANGED
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.5.1
|
|
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-05-
|
|
11
|
+
date: 2023-05-13 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -56,9 +56,8 @@ files:
|
|
|
56
56
|
- _sass/base.scss
|
|
57
57
|
- _sass/css-reset.scss
|
|
58
58
|
- _sass/device-support.scss
|
|
59
|
-
- _sass/
|
|
60
|
-
- _sass/
|
|
61
|
-
- _sass/layout.scss
|
|
59
|
+
- _sass/text.scss
|
|
60
|
+
- _sass/variables.scss
|
|
62
61
|
- assets/css/styles.scss
|
|
63
62
|
- assets/images/about-icon.png
|
|
64
63
|
- assets/images/blog-icon.png
|
data/_sass/fonts.scss
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
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
DELETED
|
@@ -1,175 +0,0 @@
|
|
|
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: 50vh;
|
|
7
|
-
text-align: center;
|
|
8
|
-
/* parallax effect in background */
|
|
9
|
-
background-image: url("/assets/images/dusk-gray.jpg");
|
|
10
|
-
background-repeat: no-repeat;
|
|
11
|
-
background-attachment: fixed;
|
|
12
|
-
background-position: center;
|
|
13
|
-
background-size: cover;
|
|
14
|
-
|
|
15
|
-
/* center content in header */
|
|
16
|
-
position: relative;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
#header-content {
|
|
20
|
-
display: inline-flex;
|
|
21
|
-
flex-direction: column;
|
|
22
|
-
width: 50%;
|
|
23
|
-
/* center content in header */
|
|
24
|
-
margin: 0;
|
|
25
|
-
position: absolute;
|
|
26
|
-
top: 50%;
|
|
27
|
-
left: 50%;
|
|
28
|
-
transform: translate(-50%, -50%);
|
|
29
|
-
|
|
30
|
-
h1 {
|
|
31
|
-
font-size: min(max(3rem, 9vw), 70px);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
#why {/* container around .b2b-container div. Button doesn't look correct without this for some reason, hence the name #why */
|
|
36
|
-
display: flex;
|
|
37
|
-
flex-direction: row;
|
|
38
|
-
justify-content: flex-start;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.b2b-container {
|
|
42
|
-
display: inline-flex;
|
|
43
|
-
justify-content: center;
|
|
44
|
-
width: 120px;
|
|
45
|
-
margin: 0;
|
|
46
|
-
padding: 0;
|
|
47
|
-
|
|
48
|
-
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
49
|
-
border-radius: 4px;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.b2b-container:hover {
|
|
53
|
-
background: rgba(199, 188, 135, 0.2) url(/assets/images/noise.png);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.b2b-icon-container {
|
|
57
|
-
position: relative;
|
|
58
|
-
height: 100%;
|
|
59
|
-
aspect-ratio: 1/1;
|
|
60
|
-
|
|
61
|
-
img {
|
|
62
|
-
padding: 15%;
|
|
63
|
-
position: absolute;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
/* header-default.html */
|
|
68
|
-
header {
|
|
69
|
-
display: block;
|
|
70
|
-
height: 30vh;
|
|
71
|
-
|
|
72
|
-
/* parallax effect in background */
|
|
73
|
-
background-image: url("/assets/images/dusk-gray.jpg");
|
|
74
|
-
background-repeat: no-repeat;
|
|
75
|
-
background-attachment: fixed;
|
|
76
|
-
background-position: center;
|
|
77
|
-
background-size: cover;
|
|
78
|
-
|
|
79
|
-
/* center content in header */
|
|
80
|
-
position: relative;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
#header-content {
|
|
84
|
-
display: block;
|
|
85
|
-
width: 80vw;
|
|
86
|
-
/* center content in header */
|
|
87
|
-
margin: 0;
|
|
88
|
-
position: absolute;
|
|
89
|
-
top: 50%;
|
|
90
|
-
left: 50%;
|
|
91
|
-
transform: translate(-50%, -50%);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
/* navigation.html */
|
|
95
|
-
.sidenav {
|
|
96
|
-
height: 100%;
|
|
97
|
-
width: 0; /* changed with JavaScript */
|
|
98
|
-
position: fixed;
|
|
99
|
-
z-index: 2;
|
|
100
|
-
top: 0;
|
|
101
|
-
right: 0;
|
|
102
|
-
overflow-x: hidden;
|
|
103
|
-
transition: 0.5s;
|
|
104
|
-
|
|
105
|
-
text-align: center;
|
|
106
|
-
background-color: rgba(0, 0, 0, 0.6);
|
|
107
|
-
|
|
108
|
-
a {
|
|
109
|
-
display: flex;
|
|
110
|
-
justify-content: space-between;
|
|
111
|
-
|
|
112
|
-
padding: 11px;
|
|
113
|
-
transition: 0.5s;
|
|
114
|
-
height: 45px;
|
|
115
|
-
width: 100%;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.closebtn {
|
|
119
|
-
position: absolute;
|
|
120
|
-
top: 0;
|
|
121
|
-
left: 0;
|
|
122
|
-
width: 45px;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
a:hover, .closebtn:hover {
|
|
126
|
-
background: rgba(199, 188, 135, 0.2) url(/assets/images/noise.png);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
#open-nav {
|
|
131
|
-
background-color: rgba(0, 0, 0, 0.6);
|
|
132
|
-
position: fixed;
|
|
133
|
-
top: 7px;
|
|
134
|
-
right: 7px;
|
|
135
|
-
z-index: 1;
|
|
136
|
-
display: block;
|
|
137
|
-
|
|
138
|
-
transition: 0.5s;
|
|
139
|
-
cursor: pointer;
|
|
140
|
-
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
141
|
-
border-radius: 4px;
|
|
142
|
-
padding: 3px 10px;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
#open-nav:hover {
|
|
146
|
-
background: rgba(199, 188, 135, 0.2) url(/assets/images/noise.png);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.nav-links-icon {
|
|
150
|
-
width: 24px;
|
|
151
|
-
display: inline-block;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
/* footer.html */
|
|
155
|
-
footer {
|
|
156
|
-
display: flex;
|
|
157
|
-
justify-content: space-between;
|
|
158
|
-
background: linear-gradient(100deg, #202020, #323232);
|
|
159
|
-
padding: 3% 10%;
|
|
160
|
-
margin-top: 5%;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
#footer-links {
|
|
164
|
-
display: inline-flex;
|
|
165
|
-
flex-direction: column;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
#blatant-advertising {
|
|
169
|
-
display: flex;
|
|
170
|
-
flex-direction: column;
|
|
171
|
-
justify-content: flex-end;
|
|
172
|
-
text-align: right;
|
|
173
|
-
font-size: 85%;
|
|
174
|
-
width: 50%;
|
|
175
|
-
opacity: 50%;}
|