summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-03-22 20:52:20 +0100
committerVolpeon <git@volpeon.ink>2021-03-22 20:52:20 +0100
commitb292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e (patch)
tree95e6a5701c6686725f3fd4145881e3687f5228ee
parentWIP: Redesign (diff)
downloadvolpeon.ink-b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e.tar.gz
volpeon.ink-b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e.tar.bz2
volpeon.ink-b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e.zip
WIP: Redesign
Diffstat
-rw-r--r--.stylelintrc.json2
-rw-r--r--assets/css/_basics.scss6
-rw-r--r--assets/css/_vars.scss42
-rw-r--r--assets/css/components/_hero.scss53
-rw-r--r--assets/css/components/_landing-banner.scss40
-rw-r--r--assets/css/components/_nav.scss27
-rw-r--r--assets/css/layouts/_container.scss19
-rw-r--r--assets/css/layouts/_landing.scss60
-rw-r--r--assets/css/layouts/_site.scss46
-rw-r--r--assets/css/scopes/_body.scss7
-rw-r--r--assets/css/style.scss6
-rw-r--r--assets/logo/logo.svg (renamed from content/logo.svg)10
-rw-r--r--content/index.md2
-rw-r--r--package.json3
-rwxr-xr-xscripts/build_content.sh6
-rw-r--r--templates/base.html2
-rw-r--r--templates/layouts/index.html20
-rw-r--r--templates/symbols.svg8
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
37html,
38body,
39main {
40 height: 100%;
41}
42
37html { 43html {
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 @@
2title: Home 2title: Home
3--- 3---
4 4
5Welcome 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>
generated by cgit v1.2.3-54-g00ecf (git 2.44.0) at 2024-06-29 10:10:47 +0000