diff options
author | Volpeon <git@volpeon.ink> | 2021-03-22 20:52:20 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-03-22 20:52:20 +0100 |
commit | b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e (patch) | |
tree | 95e6a5701c6686725f3fd4145881e3687f5228ee | |
parent | WIP: Redesign (diff) | |
download | volpeon.ink-b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e.tar.gz volpeon.ink-b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e.tar.bz2 volpeon.ink-b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e.zip |
WIP: Redesign
-rw-r--r-- | .stylelintrc.json | 2 | ||||
-rw-r--r-- | assets/css/_basics.scss | 6 | ||||
-rw-r--r-- | assets/css/_vars.scss | 42 | ||||
-rw-r--r-- | assets/css/components/_hero.scss | 53 | ||||
-rw-r--r-- | assets/css/components/_landing-banner.scss | 40 | ||||
-rw-r--r-- | assets/css/components/_nav.scss | 27 | ||||
-rw-r--r-- | assets/css/layouts/_container.scss | 19 | ||||
-rw-r--r-- | assets/css/layouts/_landing.scss | 60 | ||||
-rw-r--r-- | assets/css/layouts/_site.scss | 46 | ||||
-rw-r--r-- | assets/css/scopes/_body.scss | 7 | ||||
-rw-r--r-- | assets/css/style.scss | 6 | ||||
-rw-r--r-- | assets/logo/logo.svg (renamed from content/logo.svg) | 10 | ||||
-rw-r--r-- | content/index.md | 2 | ||||
-rw-r--r-- | package.json | 3 | ||||
-rwxr-xr-x | scripts/build_content.sh | 6 | ||||
-rw-r--r-- | templates/base.html | 2 | ||||
-rw-r--r-- | templates/layouts/index.html | 20 | ||||
-rw-r--r-- | templates/symbols.svg | 8 |
18 files changed, 206 insertions, 153 deletions
diff --git a/.stylelintrc.json b/.stylelintrc.json index 58d0137..f15e9b6 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json | |||
@@ -9,6 +9,8 @@ | |||
9 | { "resolveNestedSelectors": true } | 9 | { "resolveNestedSelectors": true } |
10 | ], | 10 | ], |
11 | "declaration-colon-space-after": null, | 11 | "declaration-colon-space-after": null, |
12 | "function-parentheses-newline-inside": "always-multi-line", | ||
13 | "function-parentheses-space-inside": "never-single-line", | ||
12 | "scss/dollar-variable-colon-space-after": null, | 14 | "scss/dollar-variable-colon-space-after": null, |
13 | "order/properties-alphabetical-order": null, | 15 | "order/properties-alphabetical-order": null, |
14 | "order/order": null, | 16 | "order/order": null, |
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 740b293..eee48f4 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
@@ -34,6 +34,12 @@ code { | |||
34 | font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; | 34 | font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; |
35 | } | 35 | } |
36 | 36 | ||
37 | html, | ||
38 | body, | ||
39 | main { | ||
40 | height: 100%; | ||
41 | } | ||
42 | |||
37 | html { | 43 | html { |
38 | background-color: prop(--colors --bg); | 44 | background-color: prop(--colors --bg); |
39 | color: prop(--colors --fg); | 45 | color: prop(--colors --fg); |
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 3461b81..0c6102d 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -1,9 +1,8 @@ | |||
1 | $iro-root-size: 16px; | ||
2 | |||
3 | $breakpoints: ( | 1 | $breakpoints: ( |
4 | xs: 320px, | 2 | xs: 320px, |
5 | sm: 700px, | 3 | sm: 600px, |
6 | md: 1100px, | 4 | md: 900px, |
5 | lg: 1400px, | ||
7 | ); | 6 | ); |
8 | 7 | ||
9 | $unit-intervals: ( | 8 | $unit-intervals: ( |
@@ -18,28 +17,35 @@ $font-fam--large: 'Garet Variable', $font-fam--text; | |||
18 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; | 17 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; |
19 | $font-size: 16px; | 18 | $font-size: 16px; |
20 | $line-height: 1.7; | 19 | $line-height: 1.7; |
21 | $content--width: 56rem; | 20 | $content--width: 42rem; |
22 | $subcontent--indent: 2em; | 21 | $subcontent--indent: 2em; |
23 | 22 | ||
24 | $gray0: hsl(220, 0%, 7%); | 23 | $gray0: hsl(220, 0%, 6%); |
25 | $gray1: hsl(220, 0%, 10%); | 24 | $gray1: hsl(220, 0%, 9%); |
26 | $gray2: hsl(220, 0%, 29%); | 25 | $gray2: hsl(220, 0%, 16%); |
27 | $gray3: hsl(220, 0%, 54%); | 26 | $gray3: hsl(220, 0%, 29%); |
28 | $gray4: hsl(220, 0%, 73%); | 27 | $gray4: hsl(220, 0%, 54%); |
29 | $gray5: hsl(220, 0%, 100%); | 28 | $gray5: hsl(220, 0%, 73%); |
29 | $gray6: hsl(220, 0%, 100%); | ||
30 | 30 | ||
31 | @include store(( | 31 | @include store(( |
32 | --colors: ( | 32 | --colors: ( |
33 | --bg-hi: $gray0, // Lighter background | 33 | --bg-hi: $gray0, // Darker background |
34 | --bg: $gray1, // Background | 34 | --bg: $gray1, // Background |
35 | --bg-lo: $gray2, // Lighter background | ||
35 | 36 | ||
36 | --obj: $gray2, | 37 | --obj: $gray3, |
37 | 38 | ||
38 | --fg-hi: $gray3, // Faint text | 39 | --fg-hi: $gray4, // Faint text |
39 | --fg: $gray4, // Text | 40 | --fg: $gray5, // Text |
40 | --fg-lo: $gray5, // Strong text | 41 | --fg-lo: $gray6, // Strong text |
41 | 42 | ||
42 | --accent: hsl(354, 84%, 55%), | 43 | --accent: ( |
44 | --h: 354, | ||
45 | --s: 84%, | ||
46 | --l: 55%, | ||
47 | --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), | ||
48 | ) | ||
43 | ) | 49 | ) |
44 | )); | 50 | )); |
45 | 51 | ||
diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss deleted file mode 100644 index 3d8890e..0000000 --- a/assets/css/components/_hero.scss +++ /dev/null | |||
@@ -1,53 +0,0 @@ | |||
1 | @include namespace('hero') { | ||
2 | @include store(( | ||
3 | --colors: ( | ||
4 | --emph-fg: prop(--colors --accent, $global: true), | ||
5 | --back-fg: prop(--colors --bg-hi, $global: true) | ||
6 | ) | ||
7 | )); | ||
8 | |||
9 | @include component(namespace()) { | ||
10 | display: flex; | ||
11 | position: relative; | ||
12 | align-items: center; | ||
13 | justify-content: center; | ||
14 | text-align: center; | ||
15 | |||
16 | @include element('title') { | ||
17 | margin-top: 0; | ||
18 | font-family: $font-fam--large; | ||
19 | text-transform: none; | ||
20 | |||
21 | @include modifier('front') { | ||
22 | max-width: 7em; | ||
23 | font-size: 2.5rem; | ||
24 | font-weight: 200; | ||
25 | } | ||
26 | |||
27 | @include modifier('back') { | ||
28 | position: absolute; | ||
29 | z-index: -10; | ||
30 | transform: translateY(-.08em); | ||
31 | color: prop(--colors --back-fg); | ||
32 | } | ||
33 | } | ||
34 | |||
35 | @include element('emph') { | ||
36 | color: prop(--colors --emph-fg); | ||
37 | font-weight: 500; | ||
38 | } | ||
39 | |||
40 | @include iro-responsive-env(('xs', 'sm', 'md')) { | ||
41 | @include element('title') { | ||
42 | @include modifier('front') { | ||
43 | padding: iro-responsive-set((7rem, 7rem, 10rem)) 0; | ||
44 | font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem)); | ||
45 | } | ||
46 | |||
47 | @include modifier('back') { | ||
48 | font-size: iro-responsive-set((12rem, 14rem, 16rem)); | ||
49 | } | ||
50 | } | ||
51 | } | ||
52 | } | ||
53 | } | ||
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss new file mode 100644 index 0000000..ee5deab --- /dev/null +++ b/assets/css/components/_landing-banner.scss | |||
@@ -0,0 +1,40 @@ | |||
1 | @include namespace('landing-banner') { | ||
2 | @include store(( | ||
3 | --colors: ( | ||
4 | --emph-fg: prop(--colors --accent --color, $global: true), | ||
5 | --emph-bg: prop(--colors --bg-hi, $global: true) | ||
6 | ) | ||
7 | )); | ||
8 | |||
9 | @include component(namespace()) { | ||
10 | @include element('title') { | ||
11 | max-width: 7em; | ||
12 | margin-top: 0; | ||
13 | transform: translateX(-.04em); | ||
14 | font-family: $font-fam--large; | ||
15 | font-weight: 350; | ||
16 | text-transform: none; | ||
17 | } | ||
18 | |||
19 | @include element('title-inner') { | ||
20 | background-image: linear-gradient( | ||
21 | to top, | ||
22 | transparent .15em, | ||
23 | #{prop(--colors --emph-bg)} .15em, | ||
24 | #{prop(--colors --emph-bg)} .6em, | ||
25 | transparent .6em | ||
26 | ); | ||
27 | } | ||
28 | |||
29 | @include element('emph') { | ||
30 | color: prop(--colors --emph-fg); | ||
31 | font-weight: 550; | ||
32 | } | ||
33 | |||
34 | @include iro-responsive-env(('md', 'lg')) { | ||
35 | @include element('title') { | ||
36 | font-size: iro-responsive-set((2.6rem, 3rem)); | ||
37 | } | ||
38 | } | ||
39 | } | ||
40 | } | ||
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 8fc4564..03118a9 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss | |||
@@ -2,16 +2,17 @@ | |||
2 | @include store(( | 2 | @include store(( |
3 | --dims: ( | 3 | --dims: ( |
4 | --font-size: 15px, | 4 | --font-size: 15px, |
5 | --pad-y: 1em, | 5 | --pad-y: .5rem, |
6 | --item: ( | 6 | --item: ( |
7 | --pad-x: 1em, | 7 | --pad-x: 1rem, |
8 | --pad-y: 1em, | 8 | --pad-y: 1rem, |
9 | ), | 9 | ), |
10 | ), | 10 | ), |
11 | --colors: ( | 11 | --colors: ( |
12 | --bg: prop(--colors --bg-hi, $global: true), | ||
12 | --logo: ( | 13 | --logo: ( |
13 | --idle: ( | 14 | --idle: ( |
14 | --fg: prop(--colors --fg-hi, $global: true), | 15 | --fg: prop(--colors --accent --color, $global: true), |
15 | ), | 16 | ), |
16 | --hover: ( | 17 | --hover: ( |
17 | --fg: prop(--colors --fg-lo, $global: true), | 18 | --fg: prop(--colors --fg-lo, $global: true), |
@@ -33,7 +34,6 @@ | |||
33 | 34 | ||
34 | @include store(( | 35 | @include store(( |
35 | --dims: ( | 36 | --dims: ( |
36 | --pad-y: .5em, | ||
37 | --item: ( | 37 | --item: ( |
38 | --pad-x: .75em, | 38 | --pad-x: .75em, |
39 | --pad-y: .75em, | 39 | --pad-y: .75em, |
@@ -42,10 +42,15 @@ | |||
42 | ), 'sm'); | 42 | ), 'sm'); |
43 | 43 | ||
44 | @include component(namespace()) { | 44 | @include component(namespace()) { |
45 | display: flex; | 45 | display: flex; |
46 | align-items: center; | 46 | position: fixed; |
47 | padding: prop(--dims --pad-y) 0; | 47 | z-index: 10000; |
48 | font-size: prop(--dims --font-size); | 48 | top: 0; |
49 | left: 0; | ||
50 | align-items: center; | ||
51 | padding: prop(--dims --pad-y) 0; | ||
52 | background-color: prop(--colors --bg); | ||
53 | font-size: prop(--dims --font-size); | ||
49 | 54 | ||
50 | @include element('logo') { | 55 | @include element('logo') { |
51 | display: inline-block; | 56 | display: inline-block; |
@@ -90,5 +95,9 @@ | |||
90 | font-weight: bold; | 95 | font-weight: bold; |
91 | } | 96 | } |
92 | } | 97 | } |
98 | |||
99 | @include media('<=md') { | ||
100 | position: static; | ||
101 | } | ||
93 | } | 102 | } |
94 | } | 103 | } |
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index 2e102ee..0726950 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss | |||
@@ -1,10 +1,17 @@ | |||
1 | @include namespace('container') { | 1 | @include namespace('container') { |
2 | @include store(( | 2 | @include store(( |
3 | --dims: ( | 3 | --dims: ( |
4 | --pad-x: 3rem, | ||
5 | --pad-y: $line-height * 3rem | ||
6 | ) | ||
7 | )); | ||
8 | |||
9 | @include store(( | ||
10 | --dims: ( | ||
4 | --pad-x: 2rem, | 11 | --pad-x: 2rem, |
5 | --pad-y: $line-height * 2rem | 12 | --pad-y: $line-height * 2rem |
6 | ) | 13 | ) |
7 | )); | 14 | ), 'md'); |
8 | 15 | ||
9 | @include store(( | 16 | @include store(( |
10 | --dims: ( | 17 | --dims: ( |
@@ -14,16 +21,18 @@ | |||
14 | ), 'sm'); | 21 | ), 'sm'); |
15 | 22 | ||
16 | @include layout(namespace()) { | 23 | @include layout(namespace()) { |
17 | padding-right: prop(--dims --pad-x); | ||
18 | padding-left: prop(--dims --pad-x); | ||
19 | |||
20 | @include modifier('content') { | 24 | @include modifier('content') { |
21 | max-width: $content--width; | 25 | max-width: $content--width; |
22 | margin-right: auto; | 26 | margin-right: auto; |
23 | margin-left: auto; | 27 | margin-left: auto; |
24 | } | 28 | } |
25 | 29 | ||
26 | @include modifier('pad-v') { | 30 | @include modifier('pad-x') { |
31 | padding-right: prop(--dims --pad-x); | ||
32 | padding-left: prop(--dims --pad-x); | ||
33 | } | ||
34 | |||
35 | @include modifier('pad-y') { | ||
27 | padding-top: prop(--dims --pad-y); | 36 | padding-top: prop(--dims --pad-y); |
28 | padding-bottom: prop(--dims --pad-y); | 37 | padding-bottom: prop(--dims --pad-y); |
29 | } | 38 | } |
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss new file mode 100644 index 0000000..b824005 --- /dev/null +++ b/assets/css/layouts/_landing.scss | |||
@@ -0,0 +1,60 @@ | |||
1 | @include namespace('landing') { | ||
2 | @include store(( | ||
3 | --dims: ( | ||
4 | --banner-width: 30rem, | ||
5 | ), | ||
6 | --colors: ( | ||
7 | --banner-bg: prop(--colors --bg, $global: true) | ||
8 | ) | ||
9 | )); | ||
10 | |||
11 | @include layout(namespace()) { | ||
12 | display: flex; | ||
13 | flex-direction: row; | ||
14 | align-items: center; | ||
15 | min-height: 100%; | ||
16 | |||
17 | @include element('banner') { | ||
18 | flex-shrink: 1.2; | ||
19 | width: 100%; | ||
20 | max-width: prop(--dims --banner-width); | ||
21 | background-color: prop(--colors --banner-bg); | ||
22 | } | ||
23 | |||
24 | @include element('content') { | ||
25 | width: 100%; | ||
26 | min-width: 0; | ||
27 | } | ||
28 | |||
29 | @include iro-responsive-env(('md', 'lg')) { | ||
30 | @include element('banner') { | ||
31 | padding: | ||
32 | iro-responsive-set((2rem, 6rem)) | ||
33 | iro-responsive-set((0, 6rem)); | ||
34 | } | ||
35 | |||
36 | @include element('content') { | ||
37 | padding: | ||
38 | iro-responsive-set((2rem, 6rem)) | ||
39 | iro-responsive-set((0, 6rem)) | ||
40 | iro-responsive-set((2rem, 6rem)) | ||
41 | 0; | ||
42 | } | ||
43 | } | ||
44 | |||
45 | @include media('<=md') { | ||
46 | display: block; | ||
47 | height: auto; | ||
48 | |||
49 | @include element('banner', 'content') { | ||
50 | width: auto; | ||
51 | padding-right: 0; | ||
52 | padding-left: 0; | ||
53 | } | ||
54 | |||
55 | @include element('banner') { | ||
56 | max-width: none; | ||
57 | } | ||
58 | } | ||
59 | } | ||
60 | } | ||
diff --git a/assets/css/layouts/_site.scss b/assets/css/layouts/_site.scss deleted file mode 100644 index 2c06606..0000000 --- a/assets/css/layouts/_site.scss +++ /dev/null | |||
@@ -1,46 +0,0 @@ | |||
1 | @include namespace('site') { | ||
2 | @include store(( | ||
3 | --dims: ( | ||
4 | --outer-pad-x: 6rem, | ||
5 | --inner-pad-x: 2rem, | ||
6 | --pad-y: 6rem, | ||
7 | ) | ||
8 | )); | ||
9 | |||
10 | @include layout(namespace()) { | ||
11 | display: flex; | ||
12 | flex-direction: row; | ||
13 | justify-content: space-around; | ||
14 | |||
15 | @include element('col') { | ||
16 | box-sizing: border-box; | ||
17 | flex: 0 0 auto; | ||
18 | width: 100%; | ||
19 | min-width: 0; | ||
20 | max-width: 35rem; | ||
21 | height: 100%; | ||
22 | padding: prop(--dims --pad-y) prop(--dims --inner-pad-x) prop(--dims --pad-y) prop(--dims --outer-pad-x); | ||
23 | |||
24 | @include next-twin-element { | ||
25 | flex: 1 1 auto; | ||
26 | max-width: 45rem; | ||
27 | height: auto; | ||
28 | padding-right: prop(--dims --outer-pad-x); | ||
29 | padding-left: prop(--dims --inner-pad-x); | ||
30 | } | ||
31 | } | ||
32 | |||
33 | @include media('<=sm') { | ||
34 | display: block; | ||
35 | |||
36 | @include element('col') { | ||
37 | width: auto; | ||
38 | height: auto; | ||
39 | |||
40 | @include next-twin-element { | ||
41 | width: auto; | ||
42 | } | ||
43 | } | ||
44 | } | ||
45 | } | ||
46 | } | ||
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss new file mode 100644 index 0000000..7adda03 --- /dev/null +++ b/assets/css/scopes/_body.scss | |||
@@ -0,0 +1,7 @@ | |||
1 | @include namespace('body') { | ||
2 | @include scope(namespace()) { | ||
3 | > :first-child { | ||
4 | margin-top: 0; | ||
5 | } | ||
6 | } | ||
7 | } | ||
diff --git a/assets/css/style.scss b/assets/css/style.scss index c8fd0c1..f4c6db7 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss | |||
@@ -9,12 +9,14 @@ | |||
9 | @import 'basics'; | 9 | @import 'basics'; |
10 | 10 | ||
11 | @import 'components/nav'; | 11 | @import 'components/nav'; |
12 | @import 'components/hero'; | 12 | @import 'components/landing-banner'; |
13 | @import 'components/footer'; | 13 | @import 'components/footer'; |
14 | 14 | ||
15 | @import 'layouts/site'; | 15 | @import 'layouts/landing'; |
16 | @import 'layouts/container'; | 16 | @import 'layouts/container'; |
17 | 17 | ||
18 | @import 'scopes/body'; | ||
19 | |||
18 | @import 'utils'; | 20 | @import 'utils'; |
19 | 21 | ||
20 | :root { | 22 | :root { |
diff --git a/content/logo.svg b/assets/logo/logo.svg index 4f66970..ff5f3de 100644 --- a/content/logo.svg +++ b/assets/logo/logo.svg | |||
@@ -45,13 +45,15 @@ | |||
45 | fit-margin-left="0" | 45 | fit-margin-left="0" |
46 | fit-margin-right="0" | 46 | fit-margin-right="0" |
47 | fit-margin-bottom="0" | 47 | fit-margin-bottom="0" |
48 | inkscape:zoom="3.8866667" | 48 | inkscape:zoom="15.546667" |
49 | inkscape:cx="42.086996" | 49 | inkscape:cx="14.053597" |
50 | inkscape:cy="54.170536" | 50 | inkscape:cy="2.8249734" |
51 | inkscape:window-x="1536" | 51 | inkscape:window-x="1536" |
52 | inkscape:window-y="0" | 52 | inkscape:window-y="0" |
53 | inkscape:window-maximized="1" | 53 | inkscape:window-maximized="1" |
54 | inkscape:current-layer="svg8" /> | 54 | inkscape:current-layer="svg8" |
55 | inkscape:document-rotation="0" | ||
56 | units="mm" /> | ||
55 | <path | 57 | <path |
56 | fill="currentColor" | 58 | fill="currentColor" |
57 | stroke="none" | 59 | stroke="none" |
diff --git a/content/index.md b/content/index.md index 7e7ab99..438e56a 100644 --- a/content/index.md +++ b/content/index.md | |||
@@ -2,8 +2,6 @@ | |||
2 | title: Home | 2 | title: Home |
3 | --- | 3 | --- |
4 | 4 | ||
5 | Welcome to my website! I'm Volpeon, a red fox doing human things such as programming, creating vector art, and running a website. | ||
6 | |||
7 | ## Find me | 5 | ## Find me |
8 | 6 | ||
9 | - **Bandcamp:** [volpeon](https://bandcamp.com/volpeon) | 7 | - **Bandcamp:** [volpeon](https://bandcamp.com/volpeon) |
diff --git a/package.json b/package.json index eceefd7..aa9474b 100644 --- a/package.json +++ b/package.json | |||
@@ -8,6 +8,7 @@ | |||
8 | "iro-sass": "git+https://git.vulpes.one/iro-sass/" | 8 | "iro-sass": "git+https://git.vulpes.one/iro-sass/" |
9 | }, | 9 | }, |
10 | "scripts": { | 10 | "scripts": { |
11 | "lint": "stylelint \"assets/css/**/*.scss\"" | 11 | "lint": "stylelint \"assets/css/**/*.scss\"", |
12 | "fix": "stylelint \"assets/css/**/*.scss\" --fix" | ||
12 | } | 13 | } |
13 | } | 14 | } |
diff --git a/scripts/build_content.sh b/scripts/build_content.sh index 22f52df..8bcf7c2 100755 --- a/scripts/build_content.sh +++ b/scripts/build_content.sh | |||
@@ -54,7 +54,7 @@ get_subpages_basedir() { | |||
54 | local filename=$1 | 54 | local filename=$1 |
55 | filename=${filename%.md} | 55 | filename=${filename%.md} |
56 | if [ "${filename##*/}" = "index" ]; then | 56 | if [ "${filename##*/}" = "index" ]; then |
57 | filename=${filename%index} | 57 | filename=${filename%/index} |
58 | fi | 58 | fi |
59 | echo "$filename" | 59 | echo "$filename" |
60 | } | 60 | } |
@@ -69,8 +69,8 @@ get_subpages_metadata() { | |||
69 | -type f \ | 69 | -type f \ |
70 | -name "*.md" \ | 70 | -name "*.md" \ |
71 | ! -name "_*.md" \ | 71 | ! -name "_*.md" \ |
72 | ! -wholename "${base_dir_in}index.md" \ | 72 | ! -wholename "$base_dir_in/index.md" \ |
73 | \( -wholename "$base_dir_in*/index.md" -o ! -wholename "$base_dir_in*/*.md" \) \ | 73 | \( -wholename "$base_dir_in/*/index.md" -o ! -wholename "$base_dir_in/*/*.md" \) \ |
74 | -print0) | 74 | -print0) |
75 | fi | 75 | fi |
76 | 76 | ||
diff --git a/templates/base.html b/templates/base.html index 98e6da2..4a2102e 100644 --- a/templates/base.html +++ b/templates/base.html | |||
@@ -32,7 +32,7 @@ | |||
32 | </head> | 32 | </head> |
33 | 33 | ||
34 | <body> | 34 | <body> |
35 | <nav class="c-nav l-container l-container--content"> | 35 | <nav class="c-nav l-container l-container--pad-x"> |
36 | <a class="c-nav__logo" href="/" title="$site.title$"> | 36 | <a class="c-nav__logo" href="/" title="$site.title$"> |
37 | <svg class="c-nav__logo-symbol"> | 37 | <svg class="c-nav__logo-symbol"> |
38 | <use xlink:href="#logo" href="#logo"></use> | 38 | <use xlink:href="#logo" href="#logo"></use> |
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index aaac808..d145b54 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
@@ -1,11 +1,21 @@ | |||
1 | <main> | 1 | <main> |
2 | <header class="c-hero"> | 2 | <section class="l-landing"> |
3 | <h1 class="c-hero__title c-hero__title--front">I'm a <strong class="c-hero__emph">red fox</strong> in disguise</h1> | 3 | <header class="l-landing__banner"> |
4 | <h2 class="c-hero__title c-hero__title--back">Volpeon</h2> | 4 | <div class="c-landing-banner l-container l-container--pad-x l-container--content"> |
5 | </header> | 5 | <h1 class="c-landing-banner__title"> |
6 | <span class="c-landing-banner__title-inner"> | ||
7 | I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise. | ||
8 | </span> | ||
9 | </h1> | ||
10 | <p>Welcome to my website! I'm Volpeon, a red fox doing human things such as programming, creating vector art, and running a website.</p> | ||
11 | </div> | ||
12 | </header> | ||
6 | 13 | ||
7 | <section class="l-container l-container--content"> | 14 | <section class="l-landing__content"> |
15 | <div class="l-container l-container--pad-x l-container--content s-body"> | ||
8 | $body$ | 16 | $body$ |
17 | </div> | ||
18 | </section> | ||
9 | </section> | 19 | </section> |
10 | 20 | ||
11 | $-- <footer class="c-footer l-container"> | 21 | $-- <footer class="c-footer l-container"> |
diff --git a/templates/symbols.svg b/templates/symbols.svg index 2221fad..1487e5e 100644 --- a/templates/symbols.svg +++ b/templates/symbols.svg | |||
@@ -1,10 +1,10 @@ | |||
1 | <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" aria-hidden="true" version="1.1" | 1 | <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" aria-hidden="true" version="1.1" |
2 | xmlns="http://www.w3.org/2000/svg"> | 2 | xmlns="http://www.w3.org/2000/svg"> |
3 | <defs> | 3 | <defs> |
4 | <symbol id="logo" viewBox="0 0 22.271938 15.456" preserveAspectRatio="xMinYMid"> | 4 | <symbol id="logo" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> |
5 | <path fill="currentColor" stroke="none" d="M 4.928,15.456 H 6.24 L 1.312,0 H 0 Z" /> | 5 | <path fill="currentColor" stroke="none" d="M 3.879982,13 H 6.0160181 L 2.6160361,3 H 0.48 Z" /> |
6 | <path fill="currentColor" stroke="none" d="m 14.44797,15.456 h 1.36 L 9.3439695,0 h -1.36 z" /> | 6 | <path fill="currentColor" stroke="none" d="m 9.91599,13 h 2.168035 L 8.584018,3 H 6.4159819 Z" /> |
7 | <path fill="currentColor" stroke="none" d="m 14.447939,15.456 h 1.36 L 22.271939,0 h -1.36 z" /> | 7 | <path fill="currentColor" stroke="none" d="M 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z" /> |
8 | </symbol> | 8 | </symbol> |
9 | </defs> | 9 | </defs> |
10 | </svg> | 10 | </svg> |