jekyll-theme-dusk 0.0.1 → 0.1.1
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/LICENSE.txt +1 -1
- data/README.md +1 -1
- data/_config.yml +38 -0
- data/_data/navigation.yml +0 -2
- data/_includes/head.html +6 -0
- data/_includes/header-default.html +3 -0
- data/_includes/header-home.html +39 -0
- data/_includes/navigation.html +7 -9
- data/_layouts/default.html +7 -10
- data/_layouts/home.html +13 -4
- data/_layouts/post.html +1 -1
- data/_sass/base.scss +205 -0
- data/assets/css/styles.scss +1 -1
- metadata +37 -16
- data/_sass/main.scss +0 -84
- data/assets/fonts/Inconsolata-VariableFont_wdth,wght.ttf +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 69d708e1bb6078b12faffef83ba1f227b543d144a753ef64b7c8640845763f23
|
4
|
+
data.tar.gz: 5cb921e5da076b8346d4db1ad30d5969f846fd72e7f3fc3b1e77e11d071e249e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 58b5f169d9a819dc7ee2cdedf6b2983ab7f8e369ddaece1d9bad1971e16f54f252f03f6889909cefc085f4f09dae9e9c46d947a91f83cfe1304059750f160f89
|
7
|
+
data.tar.gz: f8b79562048473f211bf866a40dae25a7b242b904faa1c30b577d4c0ad58e683a344d4c958c4b9a9f882dac71a60784ee7f35dfff99e555432695bf228d88235
|
data/LICENSE.txt
CHANGED
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/[USERNAME]/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/_config.yml
ADDED
@@ -0,0 +1,38 @@
|
|
1
|
+
# Files excluded from Jekyll builds - I've probably missed some stuff
|
2
|
+
exclude:
|
3
|
+
- LICENSE.txt
|
4
|
+
- README.md
|
5
|
+
- Gemfile
|
6
|
+
- Gemfile.lock
|
7
|
+
- jekyll-theme-dusk.gemspec
|
8
|
+
- .jekyll-metadata
|
9
|
+
|
10
|
+
# Installed Gems - no SEO because privacy :)
|
11
|
+
plugins:
|
12
|
+
|
13
|
+
# Jekyll settings
|
14
|
+
sass:
|
15
|
+
style: compressed
|
16
|
+
permalink: pretty
|
17
|
+
strict_front_matter: true # not sure if this goes here
|
18
|
+
|
19
|
+
# Site settings
|
20
|
+
encoding: utf-8
|
21
|
+
lang: en
|
22
|
+
title: "Dusk"
|
23
|
+
|
24
|
+
#domain: parmjot-singh.github.io
|
25
|
+
#url: https://parmjot-singh.github.io
|
26
|
+
baseurl: ""
|
27
|
+
repo: "https://github.com/parmjot-singh/jekyll-theme-dusk"
|
28
|
+
|
29
|
+
# Load custom fonts
|
30
|
+
fonts:
|
31
|
+
preconnect_urls:
|
32
|
+
- https://fonts.gstatic.com
|
33
|
+
fonts_urls:
|
34
|
+
# Display - Chivo Mono
|
35
|
+
# Content - Titillium Web
|
36
|
+
# Second link - Material Symbols
|
37
|
+
- 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
|
38
|
+
- 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/head.html
ADDED
@@ -0,0 +1,39 @@
|
|
1
|
+
<div class="home"> <!-- this is so that the formatting can differentiate between header layouts. There has to be a better solution -->
|
2
|
+
<header>
|
3
|
+
<div id="header-content"> <!-- center div in middle, and allow text to remain above quick links 60% height of viewport -->
|
4
|
+
<div> <!-- text -->
|
5
|
+
<h1 class="page-title">{{ page.title }}</h1>
|
6
|
+
<h2 class="page-summary">{{ page.summary }}</h2>
|
7
|
+
</div>
|
8
|
+
<div id="quick-links"> <!-- quick links -->
|
9
|
+
|
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
|
+
</div>
|
38
|
+
</header>
|
39
|
+
</div>
|
data/_includes/navigation.html
CHANGED
@@ -1,11 +1,9 @@
|
|
1
|
+
<!--
|
1
2
|
<nav>
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
</a>
|
8
|
-
</li>
|
9
|
-
{% endfor %}
|
10
|
-
</ul>
|
3
|
+
{% for item in site.data.navigation %}
|
4
|
+
<a href="{{ item.link }}">
|
5
|
+
{{ item.name }}
|
6
|
+
</a>
|
7
|
+
{% endfor %}
|
11
8
|
</nav>
|
9
|
+
-->
|
data/_layouts/default.html
CHANGED
@@ -1,14 +1,11 @@
|
|
1
|
-
<!
|
2
|
-
<html>
|
3
|
-
|
4
|
-
<meta charset="utf-8">
|
5
|
-
<title>{{ page.title }}</title>
|
6
|
-
<link rel="stylesheet" href="/assets/css/styles.css">
|
7
|
-
</head>
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="{{ site.lang | default: 'en-US' }}">
|
3
|
+
{%- include head.html -%}
|
8
4
|
<body>
|
9
|
-
|
10
|
-
|
5
|
+
{%- include navigation.html -%}
|
6
|
+
{%- include header-default.html -%}
|
7
|
+
<main>
|
11
8
|
{{ content }}
|
12
|
-
</
|
9
|
+
</main>
|
13
10
|
</body>
|
14
11
|
</html>
|
data/_layouts/home.html
CHANGED
@@ -1,4 +1,13 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="{{ site.lang | default: 'en-US' }}">
|
3
|
+
{%- include head.html -%}
|
4
|
+
<body>
|
5
|
+
{%- include navigation.html -%}
|
6
|
+
{%- include header-home.html -%}
|
7
|
+
<main>
|
8
|
+
<div class="home">
|
9
|
+
{{ content }}
|
10
|
+
</div>
|
11
|
+
</main>
|
12
|
+
</body>
|
13
|
+
</html>
|
data/_layouts/post.html
CHANGED
data/_sass/base.scss
ADDED
@@ -0,0 +1,205 @@
|
|
1
|
+
@use "sass:math";
|
2
|
+
|
3
|
+
/* CSS Reset - https://www.joshwcomeau.com/css/custom-css-reset/ */
|
4
|
+
/* 1. Use a more-intuitive box-sizing model. */
|
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
|
+
}
|
41
|
+
|
42
|
+
/* Colours */
|
43
|
+
$primary-colour: #c7bc87; // Light Gold
|
44
|
+
$background-colour: #171717; // Dark Gray
|
45
|
+
|
46
|
+
/* Templates */
|
47
|
+
@mixin display {
|
48
|
+
font-family: 'Chivo Mono', monospace;
|
49
|
+
color: $primary-colour;
|
50
|
+
}
|
51
|
+
|
52
|
+
@mixin content {
|
53
|
+
font-family: 'Titillium Web', sans-serif;
|
54
|
+
color: white;
|
55
|
+
}
|
56
|
+
|
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
|
+
p {
|
68
|
+
@include content;
|
69
|
+
font-size: 0.8rem;
|
70
|
+
}
|
71
|
+
|
72
|
+
h1 {
|
73
|
+
font-size: 3rem;
|
74
|
+
font-weight: 700;
|
75
|
+
}
|
76
|
+
|
77
|
+
h2 {
|
78
|
+
font-size: 1.4rem;
|
79
|
+
font-weight: 400;
|
80
|
+
}
|
81
|
+
|
82
|
+
h3 {
|
83
|
+
font-size: 1.2rem;
|
84
|
+
font-weight: 200;
|
85
|
+
}
|
86
|
+
|
87
|
+
h4 {
|
88
|
+
font-size: 3rem * 0.55;
|
89
|
+
}
|
90
|
+
|
91
|
+
h5 {
|
92
|
+
font-size: 4rem * 0.4;
|
93
|
+
}
|
94
|
+
|
95
|
+
h6 {
|
96
|
+
font-size: 4rem * 0.25;
|
97
|
+
}
|
98
|
+
|
99
|
+
h1, h2, h3, h4, h5, h6 {
|
100
|
+
@include display;
|
101
|
+
}
|
102
|
+
|
103
|
+
a, a:hover, a:active, a:visited {
|
104
|
+
color: white;
|
105
|
+
text-decoration: none;
|
106
|
+
}
|
107
|
+
|
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
|
+
/* Base Formatting */
|
202
|
+
html {
|
203
|
+
@include content;
|
204
|
+
background-color: $background-colour;
|
205
|
+
}
|
data/assets/css/styles.scss
CHANGED
metadata
CHANGED
@@ -1,30 +1,44 @@
|
|
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.1.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
|
-
- Parmjot
|
8
|
-
autorequire:
|
7
|
+
- Parmjot Singh
|
8
|
+
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2023-04-20 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
|
-
name:
|
14
|
+
name: github-pages
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
16
16
|
requirements:
|
17
17
|
- - "~>"
|
18
18
|
- !ruby/object:Gem::Version
|
19
|
-
version: '
|
19
|
+
version: '228'
|
20
20
|
type: :runtime
|
21
21
|
prerelease: false
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
23
23
|
requirements:
|
24
24
|
- - "~>"
|
25
25
|
- !ruby/object:Gem::Version
|
26
|
-
version: '
|
27
|
-
|
26
|
+
version: '228'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: webrick
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - ">="
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '0'
|
34
|
+
type: :runtime
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ">="
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
41
|
+
description:
|
28
42
|
email:
|
29
43
|
- parmjotsinghrobot@gmail.com
|
30
44
|
executables: []
|
@@ -33,20 +47,27 @@ extra_rdoc_files: []
|
|
33
47
|
files:
|
34
48
|
- LICENSE.txt
|
35
49
|
- README.md
|
50
|
+
- _config.yml
|
36
51
|
- _data/navigation.yml
|
52
|
+
- _includes/head.html
|
53
|
+
- _includes/header-default.html
|
54
|
+
- _includes/header-home.html
|
37
55
|
- _includes/navigation.html
|
38
56
|
- _layouts/default.html
|
39
57
|
- _layouts/home.html
|
40
58
|
- _layouts/page.html
|
41
59
|
- _layouts/post.html
|
42
|
-
- _sass/
|
60
|
+
- _sass/base.scss
|
43
61
|
- assets/css/styles.scss
|
44
|
-
|
45
|
-
homepage: https://github.com/Parmjot-Singh/jekyll-theme-dusk
|
62
|
+
homepage: https://github.com/Parmjot-Singh/jekyll-theme-dusk/
|
46
63
|
licenses:
|
47
64
|
- MIT
|
48
|
-
metadata:
|
49
|
-
|
65
|
+
metadata:
|
66
|
+
bug_tracker_uri: https://github.com/Parmjot-Singh/jekyll-theme-dusk//issues
|
67
|
+
documentation_uri: https://github.com/Parmjot-Singh/jekyll-theme-dusk/
|
68
|
+
homepage_uri: https://github.com/Parmjot-Singh/jekyll-theme-dusk/
|
69
|
+
source_code_uri: https://github.com/Parmjot-Singh/jekyll-theme-dusk/
|
70
|
+
post_install_message:
|
50
71
|
rdoc_options: []
|
51
72
|
require_paths:
|
52
73
|
- lib
|
@@ -61,8 +82,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
61
82
|
- !ruby/object:Gem::Version
|
62
83
|
version: '0'
|
63
84
|
requirements: []
|
64
|
-
rubygems_version: 3.
|
65
|
-
signing_key:
|
85
|
+
rubygems_version: 3.2.33
|
86
|
+
signing_key:
|
66
87
|
specification_version: 4
|
67
|
-
summary: A
|
88
|
+
summary: A dark theme with emphasis on elegance?
|
68
89
|
test_files: []
|
data/_sass/main.scss
DELETED
@@ -1,84 +0,0 @@
|
|
1
|
-
---
|
2
|
-
---
|
3
|
-
/* Reset CSS to make it consistent on all browsers */
|
4
|
-
/* http://meyerweb.com/eric/tools/css/reset/
|
5
|
-
v2.0 | 20110126
|
6
|
-
License: none (public domain)
|
7
|
-
*/
|
8
|
-
|
9
|
-
html, body, div, span, applet, object, iframe,
|
10
|
-
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
11
|
-
a, abbr, acronym, address, big, cite, code,
|
12
|
-
del, dfn, em, img, ins, kbd, q, s, samp,
|
13
|
-
small, strike, strong, sub, sup, tt, var,
|
14
|
-
b, u, i, center,
|
15
|
-
dl, dt, dd, ol, ul, li,
|
16
|
-
fieldset, form, label, legend,
|
17
|
-
table, caption, tbody, tfoot, thead, tr, th, td,
|
18
|
-
article, aside, canvas, details, embed,
|
19
|
-
figure, figcaption, footer, header, hgroup,
|
20
|
-
menu, nav, output, ruby, section, summary,
|
21
|
-
time, mark, audio, video {
|
22
|
-
margin: 0;
|
23
|
-
padding: 0;
|
24
|
-
border: 0;
|
25
|
-
font-size: 100%;
|
26
|
-
font: inherit;
|
27
|
-
vertical-align: baseline;
|
28
|
-
}
|
29
|
-
|
30
|
-
/* HTML5 display-role reset for older browsers */
|
31
|
-
article, aside, details, figcaption, figure,
|
32
|
-
footer, header, hgroup, menu, nav, section {
|
33
|
-
display: block;
|
34
|
-
}
|
35
|
-
|
36
|
-
/* fonts */
|
37
|
-
/* Regular */
|
38
|
-
@font-face {
|
39
|
-
font-family: "Inconsolata";
|
40
|
-
src: url("/assets/fonts/Inconsolata-VariableFont_wdth,wght.ttf") format("truetype");
|
41
|
-
font-weight: 300 700;
|
42
|
-
font-style: normal;
|
43
|
-
}
|
44
|
-
|
45
|
-
/* Italic */
|
46
|
-
@font-face {
|
47
|
-
font-family: "Inconsolata";
|
48
|
-
src: url("/assets/fonts/Inconsolata-VariableFont_wdth,wght.ttf") format("truetype");
|
49
|
-
font-weight: 300 700;
|
50
|
-
font-style: italic;
|
51
|
-
}
|
52
|
-
|
53
|
-
html {
|
54
|
-
font-family: Inconsolata, "Courier New", monospace;
|
55
|
-
}
|
56
|
-
|
57
|
-
/* main website area */
|
58
|
-
#content {
|
59
|
-
display: block;
|
60
|
-
width: 80vw;
|
61
|
-
margin: 10vh auto 10vh auto;
|
62
|
-
background-color: red;
|
63
|
-
}
|
64
|
-
|
65
|
-
/* navigation */
|
66
|
-
nav {
|
67
|
-
a {
|
68
|
-
font-style: normal;
|
69
|
-
text-decoration: none;
|
70
|
-
color: inherit;
|
71
|
-
}
|
72
|
-
ul {
|
73
|
-
list-style-type: none;
|
74
|
-
overflow: hidden;
|
75
|
-
}
|
76
|
-
li {
|
77
|
-
display: block;
|
78
|
-
width: 100%;
|
79
|
-
background-color: gray;
|
80
|
-
text-align: center;
|
81
|
-
}
|
82
|
-
width: 50%;
|
83
|
-
aspect-ratio: 1 / 1;
|
84
|
-
}
|
Binary file
|