Changed files
| File | Changes | |
|---|---|---|
| config.toml | +4 −0 | raw |
| themes/hugo-coder/layouts/_default/baseof.html | +50 −43 | raw |
Compare
60709f2205bf262ec42f0b19fae221d57d3620c4
…
main
· 5 commits
Commits
| Hash | Subject | Author | Date |
|---|---|---|---|
| 5a25c726 | added presentations url | Ryan Schanzenbacher | |
| 6160cb2e | automatic snow and fireworks | Ryan Schanzenbacher | |
| 44a3d939 | fix snow positioning on scroll | Ryan Schanzenbacher | |
| 9f64ddef | snow again | Ryan Schanzenbacher | |
| 954e5081 | snow | Ryan Schanzenbacher |
@@ -49,6 +49,10 @@ hideColorSchemeToggle = true
icon = "fa fa-key-modern fa-2x"
url = "gpgkey.asc"
+[[menu.main]]
+ name = "Presentations"
+ weight = 3
+ url = "https://p.rscha.nz"
[[menu.main]]
name = "Projects"
weight = 2
@@ -29,7 +29,7 @@
height: 5px;
border-radius: 50%;
background-color: white;
- position: absolute;
+ position: fixed;
transform: translate(var(--x), var(--y));
animation: snow var(--s) linear var(--d) infinite;
}
@@ -128,9 +128,9 @@
<body class="preload-transitions {{ $csClass }}{{ if .Site.Params.rtl }} rtl{{ end }}"
onload="{{ if .Site.Params.enableTwemoji }} twemoji.parse(document.body); {{ end }}"
>
- <!-- <div id=fireworksContainer style="position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;"></div> -->
- <!-- <div id="snow" style="position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; --s: 10s; --w: 50vw; --d: 0s;"></div> -->
+ <div id="fireworksContainer" style="position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: none;"></div>
+ <div id="snow" style="position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; --s: 10s; --w: 50vw; --d: 0s; pointer-events: none; z-index: 1; display: none;"></div>
{{ partial "float" . }}
<main class="wrapper">
@@ -180,45 +180,51 @@
{{ if and .Site.Params.googleTagManager .Site.Params.googleTagManager.id }}
{{- partial "analytics/googletagmanager" . -}}
{{ end }}
- <!-- {{ if eq .RelPermalink "/" }}
- <script src="https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.js"></script>
- <script>
- const c = document.querySelector("#fireworksContainer")
- const f = new Fireworks(c, {
- "hue": {
- "min": 0,
- "max": 345
- },
- "delay": {
- "min": 45,
- "max": 60
- },
- "rocketsPoint": 27,
- "opacity": 0.5,
- "speed": 15,
- "acceleration": 1.1,
- "friction": 0.97,
- "gravity": 1.5,
- "particles": 150,
- "trace": 6,
- "explosion": 7,
- "autoresize": true,
- "brightness": {
- "min": 50,
- "max": 80,
- "decay": {
- "min": 0.015,
- "max": 0.03
- }
- },
- })
- f._randomRocketsPoint = true
- f.start()
- </script>
- {{ end }} -->
- <!-- <script>
- function r(min, max) {
+ <script>
+ const today = new Date();
+ const month = today.getMonth(); // 0 = Jan, 11 = Dec
+ const day = today.getDate();
+
+ const showFireworks = (month === 0 && day >= 1 && day <= 5);
+ const showSnow = (month === 11) || (month === 0 && day > 5 && day <= 31);
+
+ if (showFireworks) {
+ {{ if eq .RelPermalink "/" }}
+ document.getElementById("fireworksContainer").style.display = "block";
+ const script = document.createElement("script");
+ script.src = "https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.js";
+ script.onload = () => {
+ const c = document.querySelector("#fireworksContainer");
+ const f = new Fireworks(c, {
+ "hue": { "min": 0, "max": 345 },
+ "delay": { "min": 45, "max": 60 },
+ "rocketsPoint": 27,
+ "opacity": 0.5,
+ "speed": 15,
+ "acceleration": 1.1,
+ "friction": 0.97,
+ "gravity": 1.5,
+ "particles": 150,
+ "trace": 6,
+ "explosion": 7,
+ "autoresize": true,
+ "brightness": {
+ "min": 50,
+ "max": 80,
+ "decay": { "min": 0.015, "max": 0.03 }
+ }
+ });
+ f._randomRocketsPoint = true;
+ f.start();
+ };
+ document.body.appendChild(script);
+ {{ end }}
+ } else if (showSnow) {
+ const snowContainer = document.getElementById("snow");
+ snowContainer.style.display = "block";
+
+ function r(min, max) {
return Math.random() * (max - min) + min;
}
@@ -226,9 +232,10 @@
const el = document.createElement("div");
el.className = "snow";
el.style = `--x: ${r(0, 200)}vw; --y: -${r(0, 100)}vh; --d: ${r(-20, 20)}s; --w: ${r(40, 70)}vw; --s: ${r(12, 20)}s;`;
- snow.appendChild(el);
+ snowContainer.appendChild(el);
}
- </script> -->
+ }
+ </script>
</body>
</html>