diff options
author | Volpeon <git@volpeon.ink> | 2021-04-12 20:39:04 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-04-12 20:39:04 +0200 |
commit | 6b2c6c4260b2af2adad37dc1f8c50a904e04f13d (patch) | |
tree | 46db61ecffa196c31f19b7f437b554ad1c2a193c /templates | |
parent | WIP: Redesign (diff) | |
download | volpeon.ink-6b2c6c4260b2af2adad37dc1f8c50a904e04f13d.tar.gz volpeon.ink-6b2c6c4260b2af2adad37dc1f8c50a904e04f13d.tar.bz2 volpeon.ink-6b2c6c4260b2af2adad37dc1f8c50a904e04f13d.zip |
Update
Diffstat (limited to 'templates')
-rw-r--r-- | templates/base.html | 12 | ||||
-rw-r--r-- | templates/layouts/index.html | 79 | ||||
-rw-r--r-- | templates/symbols.svg | 41 |
3 files changed, 88 insertions, 44 deletions
diff --git a/templates/base.html b/templates/base.html index 1d0da4d..c7f641c 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"> | 35 | <!--<nav class="c-nav"> |
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 href="#logo"></use> | 38 | <use href="#logo"></use> |
@@ -41,7 +41,15 @@ | |||
41 | $for(menus.main.items)$ | 41 | $for(menus.main.items)$ |
42 | <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a> | 42 | <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a> |
43 | $endfor$ | 43 | $endfor$ |
44 | </nav> | 44 | </nav>--> |
45 | |||
46 | <a class="c-outer-button c-outer-button--logo c-logo" href="/" title="$site.title$"> | ||
47 | <span class="c-outer-button__icon"> | ||
48 | <svg class="c-outer-button__icon-symbol"> | ||
49 | <use href="#logo"></use> | ||
50 | </svg> | ||
51 | </span> | ||
52 | </a> | ||
45 | 53 | ||
46 | $if(section.is_index)$ | 54 | $if(section.is_index)$ |
47 | ${layouts/index()} | 55 | ${layouts/index()} |
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index d819455..3145b69 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
@@ -1,5 +1,5 @@ | |||
1 | <main> | 1 | <main> |
2 | <section class="l-landing"> | 2 | <section class="l-section l-landing"> |
3 | <header class="l-landing__banner"> | 3 | <header class="l-landing__banner"> |
4 | <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content"> | 4 | <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content"> |
5 | <h1 class="c-landing-banner__title"> | 5 | <h1 class="c-landing-banner__title"> |
@@ -8,41 +8,40 @@ | |||
8 | </span> | 8 | </span> |
9 | </h1> | 9 | </h1> |
10 | <p class="c-landing-banner__text"> | 10 | <p class="c-landing-banner__text"> |
11 | Welcome to my website! I'm Volpeon, a red fox disguised as a human. | 11 | Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. |
12 | I enjoy programming, creating vector art and designing user interfaces. | ||
13 | </p> | 12 | </p> |
14 | </div> | 13 | </div> |
15 | </header> | 14 | </header> |
16 | 15 | ||
17 | <section class="l-landing__content"> | 16 | <section class="l-landing__content"> |
18 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body"> | 17 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body"> |
19 | <h1 class="c-section-heading">My profiles</h1> | ||
20 | |||
21 | <div class="l-card-grid"> | 18 | <div class="l-card-grid"> |
22 | $for(profiles)$ | 19 | $for(profiles)$ |
23 | $if(it.url)$ | 20 | $if(it.featured)$ |
24 | <a class="c-card" href="$it.url$"> | 21 | $if(it.url)$ |
25 | $else$ | 22 | <a class="l-card-grid__card c-card" href="$it.url$"> |
26 | <div class="c-card"> | 23 | $else$ |
27 | $endif$ | 24 | <div class="l-card-grid__card c-card"> |
28 | $if(it.icon)$ | ||
29 | <svg class="c-card__icon o-icon"> | ||
30 | <use href="#icon-$it.icon$"></use> | ||
31 | </svg> | ||
32 | $endif$ | 25 | $endif$ |
33 | <div class="c-card__content"> | 26 | $if(it.icon)$ |
34 | <strong class="u-db">$it.platform$</strong> | 27 | <svg class="c-card__icon o-icon"> |
35 | <small class="u-db">$it.username$</small> | 28 | <use href="#icon-$it.icon$"></use> |
36 | </div> | 29 | </svg> |
30 | $endif$ | ||
31 | <div class="c-card__content"> | ||
32 | <strong class="u-db">$it.platform$</strong> | ||
33 | <small class="u-db">$it.username$</small> | ||
34 | </div> | ||
35 | $if(it.url)$ | ||
36 | <svg class="c-card__icon o-icon"> | ||
37 | <use href="#icon-link-external"></use> | ||
38 | </svg> | ||
39 | $endif$ | ||
37 | $if(it.url)$ | 40 | $if(it.url)$ |
38 | <svg class="c-card__icon o-icon"> | 41 | </a> |
39 | <use href="#icon-link-external"></use> | 42 | $else$ |
40 | </svg> | 43 | </div> |
41 | $endif$ | 44 | $endif$ |
42 | $if(it.url)$ | ||
43 | </a> | ||
44 | $else$ | ||
45 | </div> | ||
46 | $endif$ | 45 | $endif$ |
47 | $endfor$ | 46 | $endfor$ |
48 | </div> | 47 | </div> |
@@ -52,7 +51,31 @@ $body$ | |||
52 | </section> | 51 | </section> |
53 | </section> | 52 | </section> |
54 | 53 | ||
55 | $-- <footer class="c-footer l-container"> | 54 | <section class="l-section"> |
56 | $-- 9thPK7O3xn | 55 | <header class="l-section__heading"> |
57 | $-- </footer> | 56 | <a class="c-outer-button" href="#projects" id="projects"> |
57 | <span class="c-outer-button__icon"> | ||
58 | <svg class="c-outer-button__icon-symbol o-icon"> | ||
59 | <use href="#icon-arrow-down-right"></use> | ||
60 | </svg> | ||
61 | </span> | ||
62 | <span class="c-outer-button__content"> | ||
63 | Projects | ||
64 | </span> | ||
65 | </a> | ||
66 | </header> | ||
67 | </section> | ||
68 | |||
69 | <footer class="c-footer"> | ||
70 | <div class="c-footer__content"> | ||
71 | 9thPK7O3xn | ||
72 | </div> | ||
73 | <a class="c-outer-button" href="#"> | ||
74 | <span class="c-outer-button__icon"> | ||
75 | <svg class="c-outer-button__icon-symbol o-icon"> | ||
76 | <use href="#icon-arrow-up"></use> | ||
77 | </svg> | ||
78 | </span> | ||
79 | </a> | ||
80 | </footer> | ||
58 | </main> | 81 | </main> |
diff --git a/templates/symbols.svg b/templates/symbols.svg index 7972457..902cc35 100644 --- a/templates/symbols.svg +++ b/templates/symbols.svg | |||
@@ -7,36 +7,49 @@ | |||
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 | 9 | ||
10 | <symbol id="icon-arrow-down-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
11 | <path d="m5.25 11.75h6.5v-6.5m0 6.5-7.5-7.5" fill="none" stroke="currentColor" /> | ||
12 | </symbol> | ||
13 | |||
14 | <symbol id="icon-arrow-up" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
15 | <path d="m12.25 7.25-4.5-4.5-4.5 4.5m4.5-4.5v10.5" fill="none" stroke="currentColor" /> | ||
16 | </symbol> | ||
17 | |||
10 | <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | 18 | <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> |
11 | <path fill="none" stroke="currentColor" | 19 | <path |
12 | d="m1.25 4.9995 6.75 4.25 6.75-4.25m-12.75-2.125h12c0.4155 0 0.75 0.3345 0.75 0.75v8.8755c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75v-8.8755c0-0.4155 0.3345-0.75 0.75-0.75z" /> | 20 | d="m1.25 3.5c0-0.4155 0.3345-0.75 0.75-0.75h12c0.4155 0 0.75 0.3345 0.75 0.75v8.5c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75zm0 0.25 5.2845 4.3681c1.0065 0.83198 1.9181 0.82912 2.9676-0.03704l5.2479-4.3311" |
21 | fill="none" stroke="currentColor" /> | ||
13 | </symbol> | 22 | </symbol> |
14 | 23 | ||
15 | <symbol id="icon-hash" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | 24 | <symbol id="icon-hash" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> |
16 | <path fill="none" stroke="currentColor" d="m5.2497 13.75 1.0003-11m2.9997 11 1.0003-11m-7.5 3.5h10m-10 4h10" /> | 25 | <path d="m4.7501 14.25 0.99984-12m4 12 1.0002-12m-8.5001 3.5h11m-11 5h11" fill="none" stroke="currentColor" /> |
17 | </symbol> | 26 | </symbol> |
18 | 27 | ||
19 | <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | 28 | <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> |
20 | <path fill="none" stroke="currentColor" | 29 | <path |
21 | d="m 2.5,1.75 h 8 c 0.4155,0 0.75,0.3345 0.75,0.75 v 5.499875 c 0,0.4155 -0.3345,0.75 -0.75,0.75 H 4.75 l -3,3.00025 V 2.5 C 1.75,2.0845 2.0845,1.75 2.5,1.75 Z" /> | 30 | d="m1.5 1.25h9c0.4155 0 0.75 0.3345 0.75 0.75v6.9999c0 0.4155-0.3345 0.75-0.75 0.75h-7.25l-2.5 2.5001v-10.25c0-0.4155 0.3345-0.75 0.75-0.75z" |
22 | <path fill="none" stroke="currentColor" d="m 6.75,11.750125 h 4.5 l 3,3 V 6.25" /> | 31 | fill="none" stroke="currentColor" /> |
32 | <path d="m5.25 12.75h7.5l2.5 2.5001v-10.25c0-0.4155-0.3345-0.75-0.75-0.75h-0.25" fill="none" | ||
33 | stroke="currentColor" /> | ||
23 | </symbol> | 34 | </symbol> |
24 | 35 | ||
25 | <symbol id="icon-link-external" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | 36 | <symbol id="icon-link-external" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> |
26 | <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" /> | 37 | <path d="m5.25 4.25h6.5v6.5m0-6.5-7.5 7.5" fill="none" stroke="currentColor" /> |
27 | </symbol> | 38 | </symbol> |
28 | 39 | ||
29 | <symbol id="icon-bandcamp" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | 40 | <symbol id="icon-parallelogram" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> |
30 | <path fill="none" stroke="currentColor" d="m 15.25,4.25 -5,7.5 h -9.5 l 5,-7.5 z" /> | 41 | <path d="m15.25 4.25-5 7.5h-9.5l5-7.5z" fill="none" stroke="currentColor" /> |
31 | </symbol> | 42 | </symbol> |
32 | 43 | ||
33 | <symbol id="icon-play" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | 44 | <symbol id="icon-video" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> |
34 | <path fill="none" stroke="currentColor" d="M 4.25,3.25 11.75,8 4.25,12.75 Z" /> | 45 | <path d="m6.75 6.25 2.5 2-2.5 2z" fill="currentColor" stroke="currentColor" /> |
46 | <rect x=".75" y="2.25" width="14.5" height="12" ry=".75" fill="none" stroke="currentColor" /> | ||
35 | </symbol> | 47 | </symbol> |
36 | 48 | ||
37 | <symbol id="icon-share" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | 49 | <symbol id="icon-graph" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> |
38 | <path fill="none" stroke="currentColor" | 50 | <path |
39 | d="M 5.75,8 A 1.75,1.75 0 0 1 4,9.75 1.75,1.75 0 0 1 2.25,8 1.75,1.75 0 0 1 4,6.25 1.75,1.75 0 0 1 5.75,8 Z m 7.5,-4 A 1.75,1.75 0 0 1 11.5,5.75 1.75,1.75 0 0 1 9.75,4 1.75,1.75 0 0 1 11.5,2.25 1.75,1.75 0 0 1 13.25,4 Z m 0,8 A 1.75,1.75 0 0 1 11.5,13.75 1.75,1.75 0 0 1 9.75,12 1.75,1.75 0 0 1 11.5,10.25 1.75,1.75 0 0 1 13.25,12 Z M 5.5273914,7.1280734 9.9,4.75 M 5.5098034,8.8930085 9.9,11.25" /> | 51 | d="m15.25 10.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-10 2.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm2.5-10a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-2.5378 9.4469 5.5686-1.3921m0.61265-2.1613-4.2845-4.2845m-2.1627 0.6058-1.4004 5.6015" |
52 | fill="none" stroke="currentColor" /> | ||
40 | </symbol> | 53 | </symbol> |
41 | </defs> | 54 | </defs> |
42 | </svg> | 55 | </svg> |