summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-03-23 18:14:39 +0100
committerVolpeon <git@volpeon.ink>2021-03-23 18:14:39 +0100
commit7531a7125c72227198f7605c6c129d15cd926857 (patch)
tree134015fc623a89cf9db620f675b396d67c5e503b
parentWIP: Redesign (diff)
downloadvolpeon.ink-7531a7125c72227198f7605c6c129d15cd926857.tar.gz
volpeon.ink-7531a7125c72227198f7605c6c129d15cd926857.tar.bz2
volpeon.ink-7531a7125c72227198f7605c6c129d15cd926857.zip
WIP: Redesign
Diffstat
-rw-r--r--assets/css/_basics.scss24
-rw-r--r--assets/css/_utils.scss4
-rw-r--r--assets/css/_vars.scss4
-rw-r--r--assets/css/components/_card.scss59
-rw-r--r--assets/css/components/_section-heading.scss28
-rw-r--r--assets/css/layouts/_card-grid.scss7
-rw-r--r--assets/css/objects/_icon.scss12
-rw-r--r--assets/css/style.scss5
-rw-r--r--content/index.md6
-rw-r--r--templates/base.html2
-rw-r--r--templates/layouts/index.html78
-rw-r--r--templates/symbols.svg4
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
79small {
80 color: prop(--colors --fg-hi);
81 font-size: 1 / 16 * 14em;
82}
83
79ul, 84ul,
80ol { 85ol {
81 margin: ($line-height * 1em) 0 0; 86 margin: ($line-height * 1em) 0 0;
@@ -175,27 +180,12 @@ h1 {
175} 180}
176 181
177p { 182p {
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
201hr { 191hr {
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 @@
2title: Home 2title: 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:** &lt;available&gt; 13- **XMPP:** &lt;available&gt;
15 14
16## OMEMO Fingerprints
17
18```plain 15```plain
19CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449 16CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449
20C2C575EE 0236965C 4DBAA7EA 12F9EC90 AFD57B2C F75B3F32 70F3D393 2EDA3A08 17C2C575EE 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>&lt;available&gt;</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>
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-01 11:44:32 +0000