Adding lcd screen element

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);

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%;

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 {

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;
+}

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;

layouts/about/single.html

@@ -2,9 +2,8 @@
 "main" }}
 <article class="about-page">
   <div class="about-content">
-    <div class="about-header">{{ partial "elements/lavalamp.html" . }}</div>
-
     <div class="content-screen">
+      <div class="about-header">{{ partial "elements/lavalamp.html" . }}</div>
       <div class="screen-display crt no-scroll">
         > about -v <br />
         <span>Name</span> / <span class="info">Dan (He/Him)</span><br />
@@ -18,6 +17,12 @@
       </div>
     </div>
 
+    <div class="info-badges random-rotation">
+      {{ $likes := slice "LovingWifex1" "CrazyKidsx3" "labradorsx2" "Linux_User"
+      "Developer" "PC_GAMING" "RETRO_TECH"}} {{ range $likes }} {{ partial
+      "elements/lcd-screen.html" (dict "text" .) }} {{ end }}
+    </div>
+
     <div class="wide-item manifesto-container">
       <div class="content-screen">
         <div class="screen-display crt">

layouts/partials/elements/lcd-screen.html

@@ -0,0 +1,10 @@
+{{ $text := .text | default "" }} {{ $placeholder := strings.Repeat (len $text)
+"8" }}
+
+<div class="lcd-container">
+  <div class="lcd-screen">
+    <span class="lcd-text" data-placeholder="{{ $placeholder }}"
+      >{{ $text }}</span
+    >
+  </div>
+</div>