diff --git a/assets/js/lcd.js b/assets/js/lcd.js new file mode 100644 index 0000000..99f6d2d --- /dev/null +++ b/assets/js/lcd.js @@ -0,0 +1,52 @@ +function fitTextToContainer() { + // Find all LCD containers + const lcdContainers = document.querySelectorAll(".lcd-container"); + + lcdContainers.forEach((container) => { + container.style.opacity = 0; + + const lcdText = container.querySelector(".lcd-text"); + const lcdScreen = container.querySelector(".lcd-screen"); + + if (!lcdText || !lcdScreen) return; + + // Get the computed style to access padding + const screenStyle = window.getComputedStyle(lcdScreen); + const paddingLeft = parseFloat(screenStyle.paddingLeft); + const paddingRight = parseFloat(screenStyle.paddingRight); + + // Calculate available width + const availableWidth = lcdScreen.clientWidth - paddingLeft - paddingRight; + + lcdText.style.fontSize = ""; + let fontSize = parseFloat(window.getComputedStyle(lcdText).fontSize); + const maxFontSize = fontSize; + const minFontSize = 10; + + // Reduce font size until it fits + while (lcdText.scrollWidth > availableWidth && fontSize > minFontSize) { + fontSize -= 0.5; + lcdText.style.fontSize = `${fontSize}px`; + } + + container.style.opacity = 1; + }); +} + +function applyRandomRotation() { + if (!document.querySelector(".random-rotation")) return; + + console.log("Adding rotation..."); + + const containers = document.querySelectorAll( + ".random-rotation .lcd-container", + ); + containers.forEach((container) => { + const rotation = (Math.random() - 0.5) * 2; + container.style.transform = `rotate(${rotation}deg)`; + }); +} + +window.addEventListener("load", fitTextToContainer); +window.addEventListener("resize", fitTextToContainer); +window.addEventListener("load", applyRandomRotation); diff --git a/assets/sass/pages/about.scss b/assets/sass/pages/about.scss index 322d49a..c15989d 100644 --- a/assets/sass/pages/about.scss +++ b/assets/sass/pages/about.scss @@ -14,10 +14,38 @@ grid-column: 1 / -1; } - > .about-header { + .about-header { + position: absolute; + left: -80px; + bottom: 0px; text-align: center; } + .lava-lamp-container { + position: relative; + top: 0; + bottom: 0; + left: 0; + right: 0; + transform: rotate(-5deg); + + width: 100px; + height: 180px; + + .lamp-text { + font-size: 30px; + color: rgba(224, 27, 36, 0.7); + } + } + + > .info-badges { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + align-items: start; + align-content: start; + } + > .manifesto-container { position: relative; > .manifesto-floppy { @@ -31,6 +59,11 @@ } } +.digital { + font-family: "DSEG14-Classic"; + text-transform: uppercase; +} + @media (max-width: 800px) { .about-page > .about-content { width: 100%; diff --git a/assets/sass/partials/_lavalamp.scss b/assets/sass/partials/_lavalamp.scss index aa2b269..f2305e2 100644 --- a/assets/sass/partials/_lavalamp.scss +++ b/assets/sass/partials/_lavalamp.scss @@ -11,23 +11,6 @@ margin: 0 auto; //width: fit-content; /* or specify a fixed width */ - - .about-content & { - position: relative; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 160px; - height: 300px; - - transform: rotate(-5deg); - - .lamp-text { - font-size: 60px; - color: rgba(224, 27, 36, 0.7); - } - } } .lamp-cap { @@ -106,6 +89,7 @@ display: flex; justify-content: center; align-items: center; + border-top: 1px solid #924706; } @keyframes float { diff --git a/assets/sass/partials/_lcd-display.scss b/assets/sass/partials/_lcd-display.scss new file mode 100644 index 0000000..d2f59af --- /dev/null +++ b/assets/sass/partials/_lcd-display.scss @@ -0,0 +1,56 @@ +.lcd-container { + background: #2a2a2a; + padding: 1%; + border-radius: 0.5cqw; + box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, 0.5); + pointer-events: none; + min-width: 0; + opacity: 0; + + > .lcd-screen { + position: relative; + font-family: "DSEG14-Classic"; + text-transform: uppercase; + padding: 2% 4%; + background: #1a0f00; + border: 0.1cqw solid #4a3520; + border-radius: 0.3cqw; + overflow: hidden; + letter-spacing: 0.1em; + pointer-events: none; + + > .lcd-text { + display: inline-block; + pointer-events: none; + position: relative; + color: #ff8800; + text-shadow: 0 0 10px rgba(255, 136, 0, 0.2); + z-index: 1; + white-space: nowrap; + overflow: hidden; + font-size: 2.2rem; + line-height: 1; + + &::before { + content: attr(data-placeholder); + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + color: #4a2800; + opacity: 0.6; + pointer-events: none; + z-index: -1; + white-space: nowrap; + } + } + } +} + +.lcd-container, +.lcd-screen, +.lcd-text { + box-sizing: border-box; + height: auto; +} diff --git a/assets/sass/style.scss b/assets/sass/style.scss index 2b541ff..410da15 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -7,6 +7,7 @@ @import "partials/now-playing"; @import "partials/lavalamp"; @import "partials/floppy"; +@import "partials/lcd-display"; @import "partials/content-screens"; @@ -15,6 +16,26 @@ @import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap"); +@font-face { + font-family: "DSEG7-Classic"; + src: + url("../fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2") format("woff2"), + url("../fonts/DSEG7-Classic/DSEG7Classic-Bold.woff") format("woff"), + url("../fonts/DSEG7-Classic/DSEG7Classic-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: "DSEG14-Classic"; + src: + url("../fonts/DSEG14-Classic/DSEG14Classic-Bold.woff2") format("woff2"), + url("../fonts/DSEG14-Classic/DSEG14Classic-Bold.woff") format("woff"), + url("../fonts/DSEG14-Classic/DSEG14Classic-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; +} + * { margin: 0; padding: 0; diff --git a/layouts/about/single.html b/layouts/about/single.html index 05202be..770cac9 100644 --- a/layouts/about/single.html +++ b/layouts/about/single.html @@ -2,9 +2,8 @@ "main" }}
-
{{ partial "elements/lavalamp.html" . }}
-
+
{{ partial "elements/lavalamp.html" . }}
> about -v
Name / Dan (He/Him)
@@ -18,6 +17,12 @@
+
+ {{ $likes := slice "LovingWifex1" "CrazyKidsx3" "labradorsx2" "Linux_User" + "Developer" "PC_GAMING" "RETRO_TECH"}} {{ range $likes }} {{ partial + "elements/lcd-screen.html" (dict "text" .) }} {{ end }} +
+
diff --git a/layouts/partials/elements/lcd-screen.html b/layouts/partials/elements/lcd-screen.html new file mode 100644 index 0000000..706d843 --- /dev/null +++ b/layouts/partials/elements/lcd-screen.html @@ -0,0 +1,10 @@ +{{ $text := .text | default "" }} {{ $placeholder := strings.Repeat (len $text) +"8" }} + +
+
+ {{ $text }} +
+
diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-Bold.ttf b/static/fonts/DSEG14-Classic/DSEG14Classic-Bold.ttf new file mode 100644 index 0000000..d39ea76 Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-Bold.ttf differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-Bold.woff b/static/fonts/DSEG14-Classic/DSEG14Classic-Bold.woff new file mode 100644 index 0000000..af02d28 Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-Bold.woff differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-Bold.woff2 b/static/fonts/DSEG14-Classic/DSEG14Classic-Bold.woff2 new file mode 100644 index 0000000..17d7d1b Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-Bold.woff2 differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-BoldItalic.ttf b/static/fonts/DSEG14-Classic/DSEG14Classic-BoldItalic.ttf new file mode 100644 index 0000000..4931026 Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-BoldItalic.ttf differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-BoldItalic.woff b/static/fonts/DSEG14-Classic/DSEG14Classic-BoldItalic.woff new file mode 100644 index 0000000..03e4dc5 Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-BoldItalic.woff differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-BoldItalic.woff2 b/static/fonts/DSEG14-Classic/DSEG14Classic-BoldItalic.woff2 new file mode 100644 index 0000000..84640c0 Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-BoldItalic.woff2 differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-Italic.ttf b/static/fonts/DSEG14-Classic/DSEG14Classic-Italic.ttf new file mode 100644 index 0000000..3fea9cd Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-Italic.ttf differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-Italic.woff b/static/fonts/DSEG14-Classic/DSEG14Classic-Italic.woff new file mode 100644 index 0000000..34420dd Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-Italic.woff differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-Italic.woff2 b/static/fonts/DSEG14-Classic/DSEG14Classic-Italic.woff2 new file mode 100644 index 0000000..01a0da9 Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-Italic.woff2 differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-Light.ttf b/static/fonts/DSEG14-Classic/DSEG14Classic-Light.ttf new file mode 100644 index 0000000..ee708ea Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-Light.ttf differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-Light.woff b/static/fonts/DSEG14-Classic/DSEG14Classic-Light.woff new file mode 100644 index 0000000..0c89f14 Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-Light.woff differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-Light.woff2 b/static/fonts/DSEG14-Classic/DSEG14Classic-Light.woff2 new file mode 100644 index 0000000..99ccdab Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-Light.woff2 differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-LightItalic.ttf b/static/fonts/DSEG14-Classic/DSEG14Classic-LightItalic.ttf new file mode 100644 index 0000000..4c49120 Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-LightItalic.ttf differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-LightItalic.woff b/static/fonts/DSEG14-Classic/DSEG14Classic-LightItalic.woff new file mode 100644 index 0000000..bf0d9b8 Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-LightItalic.woff differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-LightItalic.woff2 b/static/fonts/DSEG14-Classic/DSEG14Classic-LightItalic.woff2 new file mode 100644 index 0000000..953ce7a Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-LightItalic.woff2 differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-Regular.ttf b/static/fonts/DSEG14-Classic/DSEG14Classic-Regular.ttf new file mode 100644 index 0000000..50e3b61 Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-Regular.ttf differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-Regular.woff b/static/fonts/DSEG14-Classic/DSEG14Classic-Regular.woff new file mode 100644 index 0000000..1bdce6d Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-Regular.woff differ diff --git a/static/fonts/DSEG14-Classic/DSEG14Classic-Regular.woff2 b/static/fonts/DSEG14-Classic/DSEG14Classic-Regular.woff2 new file mode 100644 index 0000000..100cd6e Binary files /dev/null and b/static/fonts/DSEG14-Classic/DSEG14Classic-Regular.woff2 differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-Bold.ttf b/static/fonts/DSEG7-Classic/DSEG7Classic-Bold.ttf new file mode 100644 index 0000000..49632e3 Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-Bold.ttf differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff b/static/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff new file mode 100644 index 0000000..167e6fb Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2 b/static/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2 new file mode 100644 index 0000000..c5f9dd2 Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2 differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-BoldItalic.ttf b/static/fonts/DSEG7-Classic/DSEG7Classic-BoldItalic.ttf new file mode 100644 index 0000000..bc43df8 Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-BoldItalic.ttf differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-BoldItalic.woff b/static/fonts/DSEG7-Classic/DSEG7Classic-BoldItalic.woff new file mode 100644 index 0000000..f55088e Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-BoldItalic.woff differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-BoldItalic.woff2 b/static/fonts/DSEG7-Classic/DSEG7Classic-BoldItalic.woff2 new file mode 100644 index 0000000..4689023 Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-BoldItalic.woff2 differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-Italic.ttf b/static/fonts/DSEG7-Classic/DSEG7Classic-Italic.ttf new file mode 100644 index 0000000..55eff12 Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-Italic.ttf differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-Italic.woff b/static/fonts/DSEG7-Classic/DSEG7Classic-Italic.woff new file mode 100644 index 0000000..9c87139 Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-Italic.woff differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-Italic.woff2 b/static/fonts/DSEG7-Classic/DSEG7Classic-Italic.woff2 new file mode 100644 index 0000000..17f8b0c Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-Italic.woff2 differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-Light.ttf b/static/fonts/DSEG7-Classic/DSEG7Classic-Light.ttf new file mode 100644 index 0000000..7cdd8e1 Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-Light.ttf differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-Light.woff b/static/fonts/DSEG7-Classic/DSEG7Classic-Light.woff new file mode 100644 index 0000000..fc38c5e Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-Light.woff differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-Light.woff2 b/static/fonts/DSEG7-Classic/DSEG7Classic-Light.woff2 new file mode 100644 index 0000000..bab8317 Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-Light.woff2 differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-LightItalic.ttf b/static/fonts/DSEG7-Classic/DSEG7Classic-LightItalic.ttf new file mode 100644 index 0000000..795802a Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-LightItalic.ttf differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-LightItalic.woff b/static/fonts/DSEG7-Classic/DSEG7Classic-LightItalic.woff new file mode 100644 index 0000000..0a59623 Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-LightItalic.woff differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-LightItalic.woff2 b/static/fonts/DSEG7-Classic/DSEG7Classic-LightItalic.woff2 new file mode 100644 index 0000000..b4c81bb Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-LightItalic.woff2 differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-Regular.ttf b/static/fonts/DSEG7-Classic/DSEG7Classic-Regular.ttf new file mode 100644 index 0000000..4d0fa5e Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-Regular.ttf differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff b/static/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff new file mode 100644 index 0000000..c8cab23 Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff differ diff --git a/static/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff2 b/static/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff2 new file mode 100644 index 0000000..5538bbf Binary files /dev/null and b/static/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff2 differ