diff options
author | Volpeon <git@volpeon.ink> | 2021-04-28 06:53:58 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-04-28 06:53:58 +0200 |
commit | f3b2705e8cdd3bf3749816e09a5641aa3451e99f (patch) | |
tree | 9238e8bcba581c8865d935dfd27ed33867f0648d /templates | |
parent | Fixed modular scale (diff) | |
download | volpeon.ink-f3b2705e8cdd3bf3749816e09a5641aa3451e99f.tar.gz volpeon.ink-f3b2705e8cdd3bf3749816e09a5641aa3451e99f.tar.bz2 volpeon.ink-f3b2705e8cdd3bf3749816e09a5641aa3451e99f.zip |
Added preload directives, load SVG symbols from external file
Diffstat (limited to 'templates')
-rw-r--r-- | templates/base.html | 15 | ||||
-rw-r--r-- | templates/layouts/index.html | 10 | ||||
-rw-r--r-- | templates/symbols.svg | 73 |
3 files changed, 14 insertions, 84 deletions
diff --git a/templates/base.html b/templates/base.html index 4ebd507..039b0d1 100644 --- a/templates/base.html +++ b/templates/base.html | |||
@@ -28,6 +28,13 @@ | |||
28 | 28 | ||
29 | <title>$if(section.is_index)$$else$$title$ – $endif$$site.title$</title> | 29 | <title>$if(section.is_index)$$else$$title$ – $endif$$site.title$</title> |
30 | 30 | ||
31 | <link rel="preload" href="/style.css" as="style" /> | ||
32 | <link rel="preload" href="/symbols.svg" as="other" type="image/svg+xml" /> | ||
33 | <link rel="preload" href="/IBMPlexSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> | ||
34 | <link rel="preload" href="/IBMPlexSans-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> | ||
35 | <link rel="preload" href="/IBMPlexSans-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> | ||
36 | <link rel="preload" href="/GaretVariable.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> | ||
37 | |||
31 | <link rel="stylesheet" href="/style.css" /> | 38 | <link rel="stylesheet" href="/style.css" /> |
32 | </head> | 39 | </head> |
33 | 40 | ||
@@ -36,7 +43,7 @@ | |||
36 | <a class="c-outer-button c-outer-button--inverted" href="/" title="$site.title$"> | 43 | <a class="c-outer-button c-outer-button--inverted" href="/" title="$site.title$"> |
37 | <span class="c-outer-button__icon"> | 44 | <span class="c-outer-button__icon"> |
38 | <svg class="c-outer-button__icon-symbol"> | 45 | <svg class="c-outer-button__icon-symbol"> |
39 | <use href="#logo"></use> | 46 | <use href="/symbols.svg#logo"></use> |
40 | </svg> | 47 | </svg> |
41 | </span> | 48 | </span> |
42 | </a> | 49 | </a> |
@@ -70,16 +77,12 @@ ${layouts/page()} | |||
70 | <a class="c-outer-button" href="#" title="To the top"> | 77 | <a class="c-outer-button" href="#" title="To the top"> |
71 | <span class="c-outer-button__icon"> | 78 | <span class="c-outer-button__icon"> |
72 | <svg class="c-outer-button__icon-symbol o-icon"> | 79 | <svg class="c-outer-button__icon-symbol o-icon"> |
73 | <use href="#icon-arrow-up"></use> | 80 | <use href="/symbols.svg#icon-arrow-up"></use> |
74 | </svg> | 81 | </svg> |
75 | </span> | 82 | </span> |
76 | </a> | 83 | </a> |
77 | </footer> | 84 | </footer> |
78 | </main> | 85 | </main> |
79 | |||
80 | <div class="u-vh" aria-hidden="true"> | ||
81 | ${symbols.svg()} | ||
82 | </div> | ||
83 | </body> | 86 | </body> |
84 | 87 | ||
85 | </html> | 88 | </html> |
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 1099d27..18b1c69 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
@@ -24,7 +24,7 @@ | |||
24 | $endif$ | 24 | $endif$ |
25 | $if(it.icon)$ | 25 | $if(it.icon)$ |
26 | <svg class="c-card__icon o-icon"> | 26 | <svg class="c-card__icon o-icon"> |
27 | <use href="#icon-$it.icon$"></use> | 27 | <use href="/symbols.svg#icon-$it.icon$"></use> |
28 | </svg> | 28 | </svg> |
29 | $endif$ | 29 | $endif$ |
30 | <div class="c-card__content"> | 30 | <div class="c-card__content"> |
@@ -33,7 +33,7 @@ | |||
33 | </div> | 33 | </div> |
34 | $if(it.url)$ | 34 | $if(it.url)$ |
35 | <svg class="c-card__icon o-icon"> | 35 | <svg class="c-card__icon o-icon"> |
36 | <use href="#icon-arrow-up-right"></use> | 36 | <use href="/symbols.svg#icon-arrow-up-right"></use> |
37 | </svg> | 37 | </svg> |
38 | $endif$ | 38 | $endif$ |
39 | $if(it.url)$ | 39 | $if(it.url)$ |
@@ -55,7 +55,7 @@ $body$ | |||
55 | <a class="c-outer-button" href="#projects"> | 55 | <a class="c-outer-button" href="#projects"> |
56 | <span class="c-outer-button__icon"> | 56 | <span class="c-outer-button__icon"> |
57 | <svg class="c-outer-button__icon-symbol o-icon"> | 57 | <svg class="c-outer-button__icon-symbol o-icon"> |
58 | <use href="#icon-arrow-down-right"></use> | 58 | <use href="/symbols.svg#icon-arrow-down-right"></use> |
59 | </svg> | 59 | </svg> |
60 | </span> | 60 | </span> |
61 | <span class="c-outer-button__content"> | 61 | <span class="c-outer-button__content"> |
@@ -73,7 +73,7 @@ $body$ | |||
73 | <div class="c-project__card c-card"> | 73 | <div class="c-project__card c-card"> |
74 | $if(it.category.icon)$ | 74 | $if(it.category.icon)$ |
75 | <svg class="c-card__icon o-icon"> | 75 | <svg class="c-card__icon o-icon"> |
76 | <use href="#icon-$it.category.icon$"></use> | 76 | <use href="/symbols.svg#icon-$it.category.icon$"></use> |
77 | </svg> | 77 | </svg> |
78 | $endif$ | 78 | $endif$ |
79 | <div class="c-card__content"> | 79 | <div class="c-card__content"> |
@@ -81,7 +81,7 @@ $body$ | |||
81 | <strong class="u-db">$it.title$</strong> | 81 | <strong class="u-db">$it.title$</strong> |
82 | </div> | 82 | </div> |
83 | <svg class="c-card__icon o-icon"> | 83 | <svg class="c-card__icon o-icon"> |
84 | <use href="#icon-arrow-right"></use> | 84 | <use href="/symbols.svg#icon-arrow-right"></use> |
85 | </svg> | 85 | </svg> |
86 | </div> | 86 | </div> |
87 | </a> | 87 | </a> |
diff --git a/templates/symbols.svg b/templates/symbols.svg deleted file mode 100644 index acc7f4f..0000000 --- a/templates/symbols.svg +++ /dev/null | |||
@@ -1,73 +0,0 @@ | |||
1 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> | ||
2 | <defs> | ||
3 | <symbol id="logo" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
4 | <path fill="currentColor" stroke="none" d="M 3.879982,13 H 6.0160181 L 2.6160361,3 H 0.48 Z" /> | ||
5 | <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.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z" /> | ||
7 | </symbol> | ||
8 | |||
9 | <symbol id="icon-arrow-down-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
10 | <path d="m5.25 11.75h6.5v-6.5m0 6.5-7.5-7.5" fill="none" stroke="currentColor" /> | ||
11 | </symbol> | ||
12 | |||
13 | <symbol id="icon-arrow-up" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
14 | <path d="m12.25 7.25-4.5-4.5-4.5 4.5m4.5-4.5v10.5" fill="none" stroke="currentColor" /> | ||
15 | </symbol> | ||
16 | |||
17 | <symbol id="icon-arrow-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
18 | <path d="m8.75 3.75 4.5 4.5-4.5 4.5m-6-4.5h10.5" fill="none" stroke="currentColor" /> | ||
19 | </symbol> | ||
20 | |||
21 | <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
22 | <path | ||
23 | 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" | ||
24 | fill="none" stroke="currentColor" /> | ||
25 | </symbol> | ||
26 | |||
27 | <symbol id="icon-hash" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
28 | <path d="m4.7501 14.25 0.99984-12m4 12 1.0002-12m-8.5001 3.5h11m-11 5h11" fill="none" stroke="currentColor" /> | ||
29 | </symbol> | ||
30 | |||
31 | <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
32 | <path | ||
33 | 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" | ||
34 | fill="none" stroke="currentColor" /> | ||
35 | <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" | ||
36 | stroke="currentColor" /> | ||
37 | </symbol> | ||
38 | |||
39 | <symbol id="icon-arrow-up-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
40 | <path d="m5.25 4.25h6.5v6.5m0-6.5-7.5 7.5" fill="none" stroke="currentColor" /> | ||
41 | </symbol> | ||
42 | |||
43 | <symbol id="icon-parallelogram" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
44 | <path d="m15.25 4.25-5 7.5h-9.5l5-7.5z" fill="none" stroke="currentColor" /> | ||
45 | </symbol> | ||
46 | |||
47 | <symbol id="icon-video" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
48 | <path d="m6.75 6.25 2.5 2-2.5 2z" fill="currentColor" stroke="currentColor" /> | ||
49 | <rect x=".75" y="2.25" width="14.5" height="12" ry=".75" fill="none" stroke="currentColor" /> | ||
50 | </symbol> | ||
51 | |||
52 | <symbol id="icon-graph" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
53 | <path | ||
54 | 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" | ||
55 | fill="none" stroke="currentColor" /> | ||
56 | </symbol> | ||
57 | |||
58 | <symbol id="icon-git-branch" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
59 | <path | ||
60 | d="m12.25 5.75c0 3.5899-2.9101 6.5-6.5 6.5m3e-7 0c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm8.5-8.5c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm-10.5 6.4998v-7.9998" | ||
61 | fill="none" stroke="currentColor" /> | ||
62 | </symbol> | ||
63 | |||
64 | <symbol id="icon-smile" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
65 | <path d="m11.309 9.7658c-0.63143 1.1808-1.8764 1.9842-3.3091 1.9842-1.4381 0-2.6872-0.80955-3.3163-1.9978" | ||
66 | fill="none" stroke="currentColor" /> | ||
67 | <circle cx="8" cy="8" r="6.75" fill="none" stroke="currentColor" /> | ||
68 | <path d="m10.25 5.75v1.5" fill="none" stroke="currentColor" /> | ||
69 | <path d="m5.75 5.75v1.5" fill="none" stroke="currentColor" /> | ||
70 | </symbol> | ||
71 | |||
72 | </defs> | ||
73 | </svg> | ||