summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--assets/css/_basics.scss19
-rw-r--r--assets/css/_vars.scss27
-rw-r--r--assets/css/components/_nav.scss34
-rw-r--r--assets/css/layouts/_container.scss20
-rw-r--r--assets/css/scopes/_page.scss4
-rw-r--r--assets/css/style.scss2
-rw-r--r--content/favicon.icobin7406 -> 7406 bytes
-rw-r--r--content/index.md2
-rw-r--r--content/projects/index.md6
-rw-r--r--metadata/metadata.json12
-rwxr-xr-xscripts/build_fonts.sh4
-rw-r--r--templates/base.html28
-rw-r--r--templates/pageHeaderSm.html2
13 files changed, 114 insertions, 46 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 3adf64c..dd394da 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -33,17 +33,8 @@ html {
33} 33}
34 34
35body { 35body {
36 margin: 2em; 36 margin: 0;
37 padding: 0; 37 padding: 0;
38
39 @media (max-width: $breakpoint-sm) {
40 margin: 1em;
41 }
42}
43
44main {
45 max-width: 70ch;
46 margin: 0 auto;
47} 38}
48 39
49code { 40code {
@@ -62,7 +53,7 @@ pre {
62} 53}
63 54
64strong { 55strong {
65 color: var(--fg-plus); 56 color: var(--fg-plus-2);
66 font-weight: bold; 57 font-weight: bold;
67} 58}
68 59
@@ -117,12 +108,12 @@ h3 {
117h1 { 108h1 {
118 text-transform: uppercase; 109 text-transform: uppercase;
119 font-size: px-to-em($heading-font-size); 110 font-size: px-to-em($heading-font-size);
120 color: var(--heading); 111 color: var(--heading-fg);
121} 112}
122 113
123h2 { 114h2 {
124 font-size: 1em; 115 font-size: 1em;
125 color: var(--heading); 116 color: var(--heading-fg);
126} 117}
127 118
128h3 { 119h3 {
@@ -138,7 +129,7 @@ p {
138:visited { 129:visited {
139 position: relative; 130 position: relative;
140 z-index: 1000; 131 z-index: 1000;
141 padding: 0.1em 0.3em; 132 padding: 0.2em 0.3em;
142 margin: 0 -0.3em; 133 margin: 0 -0.3em;
143 color: var(--link-idle-fg); 134 color: var(--link-idle-fg);
144 135
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index a29ad6d..4883605 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -4,6 +4,8 @@ $code-block-font-size: $font-size;
4$line-height: 1.5; 4$line-height: 1.5;
5$code-block-line-height: 1.4; 5$code-block-line-height: 1.4;
6 6
7$content-width: 75ch;
8
7$page-item-prefix-max-chars: 3ch; 9$page-item-prefix-max-chars: 3ch;
8$page-item-prefix-pad: 2ch; 10$page-item-prefix-pad: 2ch;
9$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad; 11$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
@@ -13,31 +15,40 @@ $subcontent-indent: 4ch;
13$breakpoint-sm: 700px; 15$breakpoint-sm: 700px;
14 16
15:root { 17:root {
16 --gray1: hsl(270, 0%, 9.7%); 18 --gray0: hsl(270, 0%, 7%);
19 --gray1: hsl(270, 0%, 10%);
17 --gray2: hsl(270, 1%, 29%); 20 --gray2: hsl(270, 1%, 29%);
18 --gray3: hsl(270, 2%, 54%); 21 --gray3: hsl(270, 2%, 54%);
19 --gray4: hsl(270, 2%, 73%); 22 --gray4: hsl(270, 2%, 73%);
20 --gray5: hsl(270, 2%, 83%); 23 --gray5: hsl(270, 2%, 83%);
21 --gray6: hsl(270, 2%, 100%); 24 --gray6: hsl(270, 2%, 100%);
22 25
26 --bg-minus: var(--gray0);
23 --bg: var(--gray1); 27 --bg: var(--gray1);
24 --bg-plus: var(--gray2); 28 --bg-plus: var(--gray2);
25 --fg-minus: var(--gray3); 29 --fg-minus: var(--gray3);
26 --fg: var(--gray4); 30 --fg: var(--gray4);
27 --fg-plus: var(--gray6); 31 --fg-plus: var(--gray5);
32 --fg-plus-2: var(--gray6);
33
34 --heading-fg: var(--fg-plus-2);
28 35
29 --select-bg: hsla(270, 2%, 100%, 0.996); 36 --select-bg: hsla(270, 2%, 100%, 0.996);
30 --select-fg: var(--gray1); 37 --select-fg: var(--bg-minus);
31 38
32 --code-fg: var(--fg-minus); 39 --code-fg: var(--fg-minus);
33 --code-block-fg: var(--fg-minus); 40 --code-block-fg: var(--fg-minus);
34 41
35 --page-item-prefix-fg: var(--fg-minus); 42 --page-item-prefix-fg: var(--fg-minus);
36 43
37 --link-idle-fg: var(--gray6); //#90acf2; //var(--gray6); 44 --link-idle-fg: var(--fg-plus-2); //#90acf2; //var(--gray6);
38 --link-visited-fg: var(--gray5); //#bc9df2; //var(--gray5); 45 --link-visited-fg: var(--fg-plus); //#bc9df2; //var(--gray5);
39 --link-hover-bg: var(--gray6); 46 --link-hover-bg: var(--fg-plus-2);
40 --link-hover-fg: var(--gray1); 47 --link-hover-fg: var(--bg-minus);
41 48
42 --heading: var(--fg-plus); 49 --nav-bg: var(--bg-minus);
50 --nav-logo-fg: var(--fg-minus);
51 --nav-item-idle-fg: var(--fg);
52 --nav-item-hover-fg: var(--fg-plus-2);
53 --nav-item-active-fg: var(--fg-plus-2);
43} 54}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 1fc24f9..d86a484 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,14 +1,36 @@
1.c-nav { 1.c-nav {
2 margin-bottom: $line-height * 2rem; 2 background-color: var(--nav-bg);
3 //border-bottom: 1px solid var(--bg-plus);
3 4
4 &::before { 5 &__items {
5 content: "//\\"; 6 display: flex;
6 color: var(--page-item-prefix-fg); 7 align-items: baseline;
8 }
9
10 &__logo {
11 display: inline-block;
12 color: var(--nav-logo-fg);
13 text-decoration: none;
14
15 &:link:hover {
16 background-color: transparent;
17 color: var(--nav-item-hover-fg);
18 font-weight: bold;
19 }
7 } 20 }
8 21
9 &__item { 22 &__item {
10 margin-left: 2ch; 23 display: inline-block;
11 color: var(--fg); 24 padding: 1rem 1ch calc(1rem - 2px);
25 margin: 0 -1ch 0 3ch;
26 color: var(--nav-item-idle-fg);
12 text-decoration: none; 27 text-decoration: none;
28 border-bottom: 2px solid transparent;
29
30 &:hover {
31 background-color: transparent;
32 color: var(--nav-item-hover-fg);
33 font-weight: bold;
34 }
13 } 35 }
14} 36}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
new file mode 100644
index 0000000..9159f5a
--- /dev/null
+++ b/assets/css/layouts/_container.scss
@@ -0,0 +1,20 @@
1.l-container {
2 padding-left: 2rem;
3 padding-right: 2rem;
4
5 &--narrow {
6 margin-left: auto;
7 margin-right: auto;
8 max-width: $content-width;
9 }
10
11 &--pad-v {
12 padding-top: $line-height * 2rem;
13 padding-bottom: $line-height * 2rem;
14 }
15
16 @media (max-width: $breakpoint-sm) {
17 padding-left: 1rem;
18 padding-right: 1rem;
19 }
20}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index cf7673c..4a97b79 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -1,6 +1,10 @@
1.s-page { 1.s-page {
2 padding-left: $page-item-prefix-width; 2 padding-left: $page-item-prefix-width;
3 3
4 > :first-child {
5 margin-top: 0;
6 }
7
4 h1, 8 h1,
5 h2, 9 h2,
6 h3, 10 h3,
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 7383ac4..2ca4cd4 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -6,6 +6,8 @@
6@import "components/nav"; 6@import "components/nav";
7@import "components/page-header"; 7@import "components/page-header";
8 8
9@import "layouts/container";
10
9@import "scopes/page"; 11@import "scopes/page";
10 12
11@import "utils"; 13@import "utils";
diff --git a/content/favicon.ico b/content/favicon.ico
index 39895e5..b1b98ec 100644
--- a/content/favicon.ico
+++ b/content/favicon.ico
Binary files differ
diff --git a/content/index.md b/content/index.md
index 64c3e77..403eab5 100644
--- a/content/index.md
+++ b/content/index.md
@@ -2,7 +2,7 @@
2id: "home" 2id: "home"
3title: "Home" 3title: "Home"
4 4
5ismain: true 5isHome: true
6--- 6---
7 7
8# Volpeon's Den 8# Volpeon's Den
diff --git a/content/projects/index.md b/content/projects/index.md
new file mode 100644
index 0000000..bc6204f
--- /dev/null
+++ b/content/projects/index.md
@@ -0,0 +1,6 @@
1---
2id: "projects"
3title: "Projects"
4---
5
6# Projects
diff --git a/metadata/metadata.json b/metadata/metadata.json
index dce6192..b53ac32 100644
--- a/metadata/metadata.json
+++ b/metadata/metadata.json
@@ -1,5 +1,8 @@
1{ 1{
2 "sitetitle": "Volpeon's Den", 2 "site": {
3 "title": "Volpeon's Den",
4 "logo": "\\\\\\\\/"
5 },
3 "menus": { 6 "menus": {
4 "main": [ 7 "main": [
5 { 8 {
@@ -10,7 +13,12 @@
10 { 13 {
11 "id": "blog", 14 "id": "blog",
12 "label": "Blog", 15 "label": "Blog",
13 "url": "/blog" 16 "url": "/blog/"
17 },
18 {
19 "id": "projects",
20 "label": "Projects",
21 "url": "/projects/"
14 } 22 }
15 ] 23 ]
16 } 24 }
diff --git a/scripts/build_fonts.sh b/scripts/build_fonts.sh
index 8c795ec..11c01db 100755
--- a/scripts/build_fonts.sh
+++ b/scripts/build_fonts.sh
@@ -1,6 +1,6 @@
1#!/bin/bash 1#!/bin/bash
2 2
3echo "[COMPILE] assets/fonts/iosevka-term-ss09-regular.ttf -> output/iosevka-term-ss09-regular.woff2" 3echo "[MINIFY ] assets/fonts/iosevka-term-ss09-regular.ttf -> output/iosevka-term-ss09-regular.woff2"
4 4
5pyftsubset assets/fonts/iosevka-term-ss09-regular.ttf \ 5pyftsubset assets/fonts/iosevka-term-ss09-regular.ttf \
6 --text-file='assets/fonts/glyphs.txt' \ 6 --text-file='assets/fonts/glyphs.txt' \
@@ -8,7 +8,7 @@ pyftsubset assets/fonts/iosevka-term-ss09-regular.ttf \
8 --flavor='woff2' \ 8 --flavor='woff2' \
9 --output-file='output/iosevka-term-ss09-regular.woff2' 9 --output-file='output/iosevka-term-ss09-regular.woff2'
10 10
11echo "[COMPILE] assets/fonts/iosevka-term-ss09-bold.ttf -> output/iosevka-term-ss09-bold.woff2" 11echo "[MINIFY ] assets/fonts/iosevka-term-ss09-bold.ttf -> output/iosevka-term-ss09-bold.woff2"
12 12
13pyftsubset assets/fonts/iosevka-term-ss09-bold.ttf \ 13pyftsubset assets/fonts/iosevka-term-ss09-bold.ttf \
14 --text-file='assets/fonts/glyphs.txt' \ 14 --text-file='assets/fonts/glyphs.txt' \
diff --git a/templates/base.html b/templates/base.html
index cc05840..96dd4ff 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -15,38 +15,42 @@
15 $if(keywords)$ 15 $if(keywords)$
16 <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" /> 16 <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
17 $endif$ 17 $endif$
18 <title>$if(ismain)$$else$$title$ – $endif$$sitetitle$</title> 18 <title>$if(isHome)$$else$$title$ – $endif$$site.title$</title>
19 <link rel="stylesheet" href="/style.css" /> 19 <link rel="stylesheet" href="/style.css" />
20 $if(id)$ 20 $if(id)$
21 <style> 21 <style>
22 .c-nav__item--$id$ { 22 .c-nav__item--$id$ {
23 font-weight: bold; 23 font-weight: bold;
24 color: var(--fg-plus); 24 color: var(--nav-item-active-fg);
25 border-bottom-color: var(--nav-item-active-fg);
25 } 26 }
26 </style> 27 </style>
27 $endif$ 28 $endif$
28</head> 29</head>
29 30
30<body> 31<body>
31 <main class="s-page"> 32 <nav class="c-nav">
32 <nav class="c-nav"> 33 <div class="c-nav__items l-container">
34 <span class="c-nav__logo">$site.logo$</span>
33 $for(menus.main)$ 35 $for(menus.main)$
34 <a class="c-nav__item c-nav__item--$it.id$" href="$it.url$">$it.label$</a> 36 <a class="c-nav__item c-nav__item--$it.id$" href="$it.url$">$it.label$</a>
35 $endfor$ 37 $endfor$
36 </nav> 38 </div>
39 </nav>
37 40
38 <header class="c-page-header" role="presentation"> 41 <main class="l-container l-container--narrow l-container--pad-v">
39 $if(ismain)$ 42 <div class="s-page">
43 $if(isHome)$
44 <header class="c-page-header" role="presentation">
40${pageHeader()} 45${pageHeader()}
41 $else$ 46 </header>
42${pageHeaderSm()}
43 $endif$ 47 $endif$
44 </header>
45 48
46 $body$ 49 $body$
50 </div>
47 </main> 51 </main>
48 52
49 $if(ismain)$ 53 $if(isHome)$
50 <template id="header-sm"> 54 <template id="header-sm">
51${pageHeaderSm()} 55${pageHeaderSm()}
52 </template> 56 </template>
diff --git a/templates/pageHeaderSm.html b/templates/pageHeaderSm.html
index 9386b8c..e673a73 100644
--- a/templates/pageHeaderSm.html
+++ b/templates/pageHeaderSm.html
@@ -4,7 +4,7 @@
4 '| .´ ,~'\ ).,__,)/,," ' . ' | | | ' .' 4 '| .´ ,~'\ ).,__,)/,," ' . ' | | | ' .'
5 |_ `~´ (/\\, (/\\, _' '_ _| ' |_ _' '_ 5 |_ `~´ (/\\, (/\\, _' '_ _| ' |_ _' '_
6--> 6-->
7<pre class="$if(ismain)$u-hidden@sm-up$endif$"> 7<pre class="$if(isHome)$u-hidden@sm-up$endif$">
8 .| <strong> //\__</strong> ' .' | . | ' . ' 8 .| <strong> //\__</strong> ' .' | . | ' . '
9 | <strong> _.~-"""-----~`` ,-´</strong> ' ' |' | ' ' 9 | <strong> _.~-"""-----~`` ,-´</strong> ' ' |' | ' '
10 '| <strong>.´ ,~'\ ).,__,)/,," </strong> ' . ' | | | ' .' 10 '| <strong>.´ ,~'\ ).,__,)/,," </strong> ' . ' | | | ' .'