diff options
author | Volpeon <git@volpeon.ink> | 2021-12-24 09:45:51 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-12-24 09:45:51 +0100 |
commit | 2580c5dcb9f1e5e6541f63f8c7e24e5dfc82f078 (patch) | |
tree | d66c67a55e4890b612f7013c6fb288d47b1a2b0a | |
parent | Added inverted selection colors where necessary (diff) | |
download | volpeon.ink-2580c5dcb9f1e5e6541f63f8c7e24e5dfc82f078.tar.gz volpeon.ink-2580c5dcb9f1e5e6541f63f8c7e24e5dfc82f078.tar.bz2 volpeon.ink-2580c5dcb9f1e5e6541f63f8c7e24e5dfc82f078.zip |
Add snow effect for Christmas time
-rw-r--r-- | assets/css/objects/_icon.scss | 15 | ||||
-rw-r--r-- | content/script.js | 22 | ||||
-rw-r--r-- | content/symbols.svg | 4 | ||||
-rw-r--r-- | templates/base.html | 2 |
4 files changed, 43 insertions, 0 deletions
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss index cbce5cf..6718c50 100644 --- a/assets/css/objects/_icon.scss +++ b/assets/css/objects/_icon.scss | |||
@@ -1,4 +1,10 @@ | |||
1 | @include namespace('icon') { | 1 | @include namespace('icon') { |
2 | @keyframes fall { | ||
3 | to { | ||
4 | transform: translateY(105vh) rotate(90deg); | ||
5 | } | ||
6 | } | ||
7 | |||
2 | @include object(namespace()) { | 8 | @include object(namespace()) { |
3 | display: block; | 9 | display: block; |
4 | width: 16px; | 10 | width: 16px; |
@@ -11,5 +17,14 @@ | |||
11 | display: inline-block; | 17 | display: inline-block; |
12 | vertical-align: -.1em; | 18 | vertical-align: -.1em; |
13 | } | 19 | } |
20 | |||
21 | @include modifier('snow') { | ||
22 | position: fixed; | ||
23 | z-index: 9999; | ||
24 | top: -20px; | ||
25 | animation: fall linear forwards; | ||
26 | stroke-width: 2px; | ||
27 | color: #fff; | ||
28 | } | ||
14 | } | 29 | } |
15 | } | 30 | } |
diff --git a/content/script.js b/content/script.js new file mode 100644 index 0000000..5702edf --- /dev/null +++ b/content/script.js | |||
@@ -0,0 +1,22 @@ | |||
1 | function createSnowFlake() { | ||
2 | const snowFlake = document.createElementNS("http://www.w3.org/2000/svg", "svg"); | ||
3 | const snowFlakeInner = document.createElementNS("http://www.w3.org/2000/svg", "use"); | ||
4 | |||
5 | snowFlakeInner.setAttribute("href", "/symbols.svg#icon-asterisk"); | ||
6 | |||
7 | snowFlake.classList.add("o-icon"); | ||
8 | snowFlake.classList.add("o-icon--snow"); | ||
9 | snowFlake.ariaHidden = true; | ||
10 | |||
11 | snowFlake.style.width = Math.random() * 10 + 10 + 'px'; | ||
12 | snowFlake.style.left = Math.random() * window.innerWidth + 'px'; | ||
13 | snowFlake.style.animationDuration = Math.random() * 3 + 2 + 's'; | ||
14 | snowFlake.style.opacity = Math.random(); | ||
15 | |||
16 | snowFlake.appendChild(snowFlakeInner); | ||
17 | document.body.appendChild(snowFlake); | ||
18 | |||
19 | setTimeout(() => { snowFlake.remove(); }, 5000); | ||
20 | } | ||
21 | |||
22 | window.addEventListener("load", () => { setInterval(createSnowFlake, 100); }) | ||
diff --git a/content/symbols.svg b/content/symbols.svg index df6ddd9..97992fc 100644 --- a/content/symbols.svg +++ b/content/symbols.svg | |||
@@ -8,6 +8,10 @@ | |||
8 | 8 | ||
9 | <symbol id="icon-blank" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"></symbol> | 9 | <symbol id="icon-blank" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"></symbol> |
10 | 10 | ||
11 | <symbol id="icon-asterisk" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
12 | <path d="m7.75 1.25v14m-6-10.5 12 7m-12 0 12-7" fill="none" stroke="currentColor" /> | ||
13 | </symbol> | ||
14 | |||
11 | <symbol id="icon-arrow-left" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | 15 | <symbol id="icon-arrow-left" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> |
12 | <path d="m7.25 3.75-4.5 4.5 4.5 4.5m-4.5-4.5h10.5" fill="none" stroke="currentColor" /> | 16 | <path d="m7.25 3.75-4.5 4.5 4.5 4.5m-4.5-4.5h10.5" fill="none" stroke="currentColor" /> |
13 | </symbol> | 17 | </symbol> |
diff --git a/templates/base.html b/templates/base.html index 353a2bd..c1e1f4f 100644 --- a/templates/base.html +++ b/templates/base.html | |||
@@ -82,6 +82,8 @@ ${layouts/page()} | |||
82 | <pre class="c-footer__ascii u-dn@sm-hi">${partials/ascii_fox_small()}</pre> | 82 | <pre class="c-footer__ascii u-dn@sm-hi">${partials/ascii_fox_small()}</pre> |
83 | </div> | 83 | </div> |
84 | </footer> | 84 | </footer> |
85 | |||
86 | <script src="/script.js"></script> | ||
85 | </body> | 87 | </body> |
86 | 88 | ||
87 | </html> | 89 | </html> |