diff options
author | Volpeon <git@volpeon.ink> | 2021-03-23 18:14:39 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-03-23 18:14:39 +0100 |
commit | 7531a7125c72227198f7605c6c129d15cd926857 (patch) | |
tree | 134015fc623a89cf9db620f675b396d67c5e503b | |
parent | WIP: Redesign (diff) | |
download | volpeon.ink-7531a7125c72227198f7605c6c129d15cd926857.tar.gz volpeon.ink-7531a7125c72227198f7605c6c129d15cd926857.tar.bz2 volpeon.ink-7531a7125c72227198f7605c6c129d15cd926857.zip |
WIP: Redesign
-rw-r--r-- | assets/css/_basics.scss | 24 | ||||
-rw-r--r-- | assets/css/_utils.scss | 4 | ||||
-rw-r--r-- | assets/css/_vars.scss | 4 | ||||
-rw-r--r-- | assets/css/components/_card.scss | 59 | ||||
-rw-r--r-- | assets/css/components/_section-heading.scss | 28 | ||||
-rw-r--r-- | assets/css/layouts/_card-grid.scss | 7 | ||||
-rw-r--r-- | assets/css/objects/_icon.scss | 12 | ||||
-rw-r--r-- | assets/css/style.scss | 5 | ||||
-rw-r--r-- | content/index.md | 6 | ||||
-rw-r--r-- | templates/base.html | 2 | ||||
-rw-r--r-- | templates/layouts/index.html | 78 | ||||
-rw-r--r-- | templates/symbols.svg | 4 |
12 files changed, 208 insertions, 25 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index eee48f4..64b11cf 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
@@ -76,6 +76,11 @@ strong { | |||
76 | font-weight: bold; | 76 | font-weight: bold; |
77 | } | 77 | } |
78 | 78 | ||
79 | small { | ||
80 | color: prop(--colors --fg-hi); | ||
81 | font-size: 1 / 16 * 14em; | ||
82 | } | ||
83 | |||
79 | ul, | 84 | ul, |
80 | ol { | 85 | ol { |
81 | margin: ($line-height * 1em) 0 0; | 86 | margin: ($line-height * 1em) 0 0; |
@@ -175,27 +180,12 @@ h1 { | |||
175 | } | 180 | } |
176 | 181 | ||
177 | p { | 182 | p { |
178 | margin: ($line-height * 1em) 0 0; | 183 | margin: ($line-height * 1em) 0 0; |
179 | hyphens: auto; | ||
180 | } | 184 | } |
181 | 185 | ||
182 | :link, | 186 | :link, |
183 | :visited { | 187 | :visited { |
184 | position: relative; | 188 | color: var(--link--idle--fg); |
185 | z-index: 1; | ||
186 | margin: 0 -.3em; | ||
187 | padding: .2em .3em; | ||
188 | color: var(--link--idle--fg); | ||
189 | |||
190 | &:hover { | ||
191 | background-color: var(--link--hover--bg); | ||
192 | color: var(--link--hover--fg); | ||
193 | text-decoration: none; | ||
194 | } | ||
195 | |||
196 | strong { | ||
197 | color: currentColor; | ||
198 | } | ||
199 | } | 189 | } |
200 | 190 | ||
201 | hr { | 191 | hr { |
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss index bca50d8..3eff6fc 100644 --- a/assets/css/_utils.scss +++ b/assets/css/_utils.scss | |||
@@ -19,3 +19,7 @@ | |||
19 | @include utility('mt0') { | 19 | @include utility('mt0') { |
20 | margin-top: 0; | 20 | margin-top: 0; |
21 | } | 21 | } |
22 | |||
23 | @include utility('db') { | ||
24 | display: block; | ||
25 | } | ||
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 0c6102d..1ef0c8a 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -2,7 +2,7 @@ $breakpoints: ( | |||
2 | xs: 320px, | 2 | xs: 320px, |
3 | sm: 600px, | 3 | sm: 600px, |
4 | md: 900px, | 4 | md: 900px, |
5 | lg: 1400px, | 5 | lg: 1500px, |
6 | ); | 6 | ); |
7 | 7 | ||
8 | $unit-intervals: ( | 8 | $unit-intervals: ( |
@@ -22,7 +22,7 @@ $subcontent--indent: 2em; | |||
22 | 22 | ||
23 | $gray0: hsl(220, 0%, 6%); | 23 | $gray0: hsl(220, 0%, 6%); |
24 | $gray1: hsl(220, 0%, 9%); | 24 | $gray1: hsl(220, 0%, 9%); |
25 | $gray2: hsl(220, 0%, 16%); | 25 | $gray2: hsl(220, 0%, 15%); |
26 | $gray3: hsl(220, 0%, 29%); | 26 | $gray3: hsl(220, 0%, 29%); |
27 | $gray4: hsl(220, 0%, 54%); | 27 | $gray4: hsl(220, 0%, 54%); |
28 | $gray5: hsl(220, 0%, 73%); | 28 | $gray5: hsl(220, 0%, 73%); |
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss new file mode 100644 index 0000000..4b3a094 --- /dev/null +++ b/assets/css/components/_card.scss | |||
@@ -0,0 +1,59 @@ | |||
1 | @include namespace('card') { | ||
2 | @include store(( | ||
3 | --dims: ( | ||
4 | --pad-x: 1.3em, | ||
5 | --pad-y: 1em | ||
6 | ), | ||
7 | --colors: ( | ||
8 | --bg: prop(--colors --bg-lo, $global: true), | ||
9 | --flip: ( | ||
10 | --bg: prop(--colors --bg-lo, $global: true), | ||
11 | ) | ||
12 | ) | ||
13 | )); | ||
14 | |||
15 | @include component(namespace()) { | ||
16 | display: block; | ||
17 | position: relative; | ||
18 | background-color: prop(--colors --bg); | ||
19 | line-height: 1.4; | ||
20 | |||
21 | &:hover { | ||
22 | @include element('content') { | ||
23 | @include modifier('flip') { | ||
24 | visibility: visible; | ||
25 | transition: | ||
26 | visibility 0s, | ||
27 | opacity .2s; | ||
28 | opacity: 1; | ||
29 | } | ||
30 | } | ||
31 | } | ||
32 | |||
33 | @include element('content') { | ||
34 | display: flex; | ||
35 | box-sizing: border-box; | ||
36 | flex-direction: row; | ||
37 | align-items: center; | ||
38 | padding: prop(--dims --pad-y) prop(--dims --pad-x); | ||
39 | |||
40 | @include modifier('flip') { | ||
41 | visibility: hidden; | ||
42 | position: absolute; | ||
43 | top: 0; | ||
44 | left: 0; | ||
45 | width: 100%; | ||
46 | height: 100%; | ||
47 | transition: | ||
48 | visibility 0s linear .2s, | ||
49 | opacity .2s; | ||
50 | opacity: 0; | ||
51 | background-color: prop(--colors --flip --bg); | ||
52 | } | ||
53 | } | ||
54 | |||
55 | @include element('icon') { | ||
56 | margin-left: auto; | ||
57 | } | ||
58 | } | ||
59 | } | ||
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss new file mode 100644 index 0000000..db75159 --- /dev/null +++ b/assets/css/components/_section-heading.scss | |||
@@ -0,0 +1,28 @@ | |||
1 | @include namespace('section-heading') { | ||
2 | @include store(( | ||
3 | --dims: ( | ||
4 | --pad-y: $line-height * 2rem | ||
5 | ), | ||
6 | --colors: ( | ||
7 | --line: prop(--colors --accent --color, $global: true), | ||
8 | ) | ||
9 | )); | ||
10 | |||
11 | @include component(namespace()) { | ||
12 | margin: 0 0 prop(--dims --pad-y); | ||
13 | font-size: .8em; | ||
14 | font-weight: 400; | ||
15 | letter-spacing: .2em; | ||
16 | text-transform: uppercase; | ||
17 | |||
18 | &::before { | ||
19 | content: ''; | ||
20 | display: inline-block; | ||
21 | width: 3em; | ||
22 | height: 1px; | ||
23 | margin-right: 1.3em; | ||
24 | background-color: prop(--colors --line); | ||
25 | vertical-align: middle; | ||
26 | } | ||
27 | } | ||
28 | } | ||
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss new file mode 100644 index 0000000..7998952 --- /dev/null +++ b/assets/css/layouts/_card-grid.scss | |||
@@ -0,0 +1,7 @@ | |||
1 | @include namespace('card-grid') { | ||
2 | @include layout(namespace()) { | ||
3 | display: grid; | ||
4 | grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); | ||
5 | gap: .7rem; | ||
6 | } | ||
7 | } | ||
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss new file mode 100644 index 0000000..cb966c8 --- /dev/null +++ b/assets/css/objects/_icon.scss | |||
@@ -0,0 +1,12 @@ | |||
1 | @include namespace('icon') { | ||
2 | @include object(namespace()) { | ||
3 | display: block; | ||
4 | width: 16px; | ||
5 | height: 16px; | ||
6 | stroke-width: 1.5px; | ||
7 | stroke-linecap: round; | ||
8 | stroke: currentColor; | ||
9 | stroke-linejoin: round; | ||
10 | fill: none; | ||
11 | } | ||
12 | } | ||
diff --git a/assets/css/style.scss b/assets/css/style.scss index f4c6db7..90cbe5d 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss | |||
@@ -8,12 +8,17 @@ | |||
8 | @import 'functions'; | 8 | @import 'functions'; |
9 | @import 'basics'; | 9 | @import 'basics'; |
10 | 10 | ||
11 | @import 'objects/icon'; | ||
12 | |||
11 | @import 'components/nav'; | 13 | @import 'components/nav'; |
12 | @import 'components/landing-banner'; | 14 | @import 'components/landing-banner'; |
15 | @import 'components/section-heading'; | ||
13 | @import 'components/footer'; | 16 | @import 'components/footer'; |
17 | @import 'components/card'; | ||
14 | 18 | ||
15 | @import 'layouts/landing'; | 19 | @import 'layouts/landing'; |
16 | @import 'layouts/container'; | 20 | @import 'layouts/container'; |
21 | @import 'layouts/card-grid'; | ||
17 | 22 | ||
18 | @import 'scopes/body'; | 23 | @import 'scopes/body'; |
19 | 24 | ||
diff --git a/content/index.md b/content/index.md index 438e56a..e0472ad 100644 --- a/content/index.md +++ b/content/index.md | |||
@@ -2,8 +2,7 @@ | |||
2 | title: Home | 2 | title: Home |
3 | --- | 3 | --- |
4 | 4 | ||
5 | ## Find me | 5 | <!-- |
6 | |||
7 | - **Bandcamp:** [volpeon](https://bandcamp.com/volpeon) | 6 | - **Bandcamp:** [volpeon](https://bandcamp.com/volpeon) |
8 | - **Email:** me@volpeon.ink | 7 | - **Email:** me@volpeon.ink |
9 | - **Fediverse:** @volpeon@fedi.vulpes.one | 8 | - **Fediverse:** @volpeon@fedi.vulpes.one |
@@ -13,9 +12,8 @@ title: Home | |||
13 | - **Steam:** [volpeon](https://steamcommunity.com/id/volpeon/) | 12 | - **Steam:** [volpeon](https://steamcommunity.com/id/volpeon/) |
14 | - **XMPP:** <available> | 13 | - **XMPP:** <available> |
15 | 14 | ||
16 | ## OMEMO Fingerprints | ||
17 | |||
18 | ```plain | 15 | ```plain |
19 | CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449 | 16 | CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449 |
20 | C2C575EE 0236965C 4DBAA7EA 12F9EC90 AFD57B2C F75B3F32 70F3D393 2EDA3A08 | 17 | C2C575EE 0236965C 4DBAA7EA 12F9EC90 AFD57B2C F75B3F32 70F3D393 2EDA3A08 |
21 | ``` | 18 | ``` |
19 | --> | ||
diff --git a/templates/base.html b/templates/base.html index 4a2102e..4fa4ee7 100644 --- a/templates/base.html +++ b/templates/base.html | |||
@@ -35,7 +35,7 @@ | |||
35 | <nav class="c-nav l-container l-container--pad-x"> | 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 href="#logo"></use> |
39 | </svg> | 39 | </svg> |
40 | </a> | 40 | </a> |
41 | $for(menus.main.items)$ | 41 | $for(menus.main.items)$ |
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index d145b54..bc1b6d4 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
@@ -7,12 +7,88 @@ | |||
7 | I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise. | 7 | I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise. |
8 | </span> | 8 | </span> |
9 | </h1> | 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> | 10 | <p> |
11 | Welcome to my website! I'm Volpeon, a red fox disguised as a human. | ||
12 | I enjoy programming, creating vector art and designing user interfaces. | ||
13 | </p> | ||
11 | </div> | 14 | </div> |
12 | </header> | 15 | </header> |
13 | 16 | ||
14 | <section class="l-landing__content"> | 17 | <section class="l-landing__content"> |
15 | <div class="l-container l-container--pad-x l-container--content s-body"> | 18 | <div class="l-container l-container--pad-x l-container--content s-body"> |
19 | <h1 class="c-section-heading">My profiles</h1> | ||
20 | |||
21 | <div class="l-card-grid"> | ||
22 | <div class="c-card"> | ||
23 | <div class="c-card__content"> | ||
24 | <div> | ||
25 | <strong class="u-db">Bandcamp</strong> | ||
26 | <small>volpeon</small> | ||
27 | </div> | ||
28 | <svg class="c-card__icon o-icon"> | ||
29 | <use href="#icon-link-external"></use> | ||
30 | </svg> | ||
31 | </div> | ||
32 | <div class="c-card__content c-card__content--flip"> | ||
33 | <a href="https://bandcamp.com/volpeon">View profile</a> | ||
34 | </div> | ||
35 | </div> | ||
36 | |||
37 | <div class="c-card"> | ||
38 | <div class="c-card__content"> | ||
39 | <div> | ||
40 | <strong class="u-db">E-Mail</strong> | ||
41 | <small>me@volpeon.ink</small> | ||
42 | </div> | ||
43 | </div> | ||
44 | </div> | ||
45 | |||
46 | <div class="c-card"> | ||
47 | <div class="c-card__content"> | ||
48 | <div> | ||
49 | <strong class="u-db">Fediverse</strong> | ||
50 | <small>@volpeon@fedi.vulpes.one</small> | ||
51 | </div> | ||
52 | </div> | ||
53 | </div> | ||
54 | |||
55 | <div class="c-card"> | ||
56 | <div class="c-card__content"> | ||
57 | <div> | ||
58 | <strong class="u-db">IRC</strong> | ||
59 | <small>volpeon</small> | ||
60 | </div> | ||
61 | <svg class="c-card__icon o-icon"> | ||
62 | <use href="#icon-link-external"></use> | ||
63 | </svg> | ||
64 | </div> | ||
65 | <div class="c-card__content c-card__content--flip"> | ||
66 | <div> | ||
67 | <a href="irc://irc.furnet.org">Furnet</a>, | ||
68 | <a href="ircs://chat.freenode.net">Freenode</a>, | ||
69 | <a href="ircs://irc.vulpes.one">irc.vulpes.one</a> | ||
70 | </div> | ||
71 | </div> | ||
72 | </div> | ||
73 | |||
74 | <div class="c-card"> | ||
75 | <div class="c-card__content"> | ||
76 | <div> | ||
77 | <strong class="u-db">PeerTube</strong> | ||
78 | <small>@volpeon@pt.vulpes.one</small> | ||
79 | </div> | ||
80 | </div> | ||
81 | </div> | ||
82 | |||
83 | <div class="c-card"> | ||
84 | <div class="c-card__content"> | ||
85 | <div> | ||
86 | <strong class="u-db">XMPP</strong> | ||
87 | <small><available></small> | ||
88 | </div> | ||
89 | </div> | ||
90 | </div> | ||
91 | </div> | ||
16 | $body$ | 92 | $body$ |
17 | </div> | 93 | </div> |
18 | </section> | 94 | </section> |
diff --git a/templates/symbols.svg b/templates/symbols.svg index 1487e5e..d3f2987 100644 --- a/templates/symbols.svg +++ b/templates/symbols.svg | |||
@@ -6,5 +6,9 @@ | |||
6 | <path fill="currentColor" stroke="none" d="m 9.91599,13 h 2.168035 L 8.584018,3 H 6.4159819 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 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 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 | |||
10 | <symbol id="icon-link-external" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
11 | <path fill="none" stroke="currentColor" d="m 5.25,4.25 h 6.5 v 6.5 m 0,-6.5 -7.5,7.5" /> | ||
12 | </symbol> | ||
9 | </defs> | 13 | </defs> |
10 | </svg> | 14 | </svg> |