summaryrefslogtreecommitdiffstats
path: root/templates
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-04-28 06:53:58 +0200
committerVolpeon <git@volpeon.ink>2021-04-28 06:53:58 +0200
commitf3b2705e8cdd3bf3749816e09a5641aa3451e99f (patch)
tree9238e8bcba581c8865d935dfd27ed33867f0648d /templates
parentFixed modular scale (diff)
downloadvolpeon.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.html15
-rw-r--r--templates/layouts/index.html10
-rw-r--r--templates/symbols.svg73
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>