From c51942e5c066a8e45b18f81de2e40ea3c05c96aa Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 11 Dec 2025 11:58:40 +0000 Subject: [PATCH] Adding cityscape and junk --- assets/js/cityscape.js | 76 +++++ assets/js/nav_time.js | 85 +++++ assets/js/pages/audio.js | 6 +- assets/sass/_mixins.scss | 64 ++++ assets/sass/pages/about.scss | 2 +- assets/sass/partials/_lavalamp.scss | 147 ++++++++- assets/sass/partials/_lcd-display.scss | 2 +- assets/sass/partials/_music.scss | 48 ++- assets/sass/partials/_vu-meter.scss | 4 +- assets/sass/partials/_window.scss | 370 ++++++++++++++++++++++ assets/sass/style.scss | 108 ++++++- content/now.md | 0 layouts/index.html | 150 +++------ layouts/now/single.html | 332 +++++++++++++++++++ layouts/partials/elements/ipod.html | 46 +++ layouts/partials/elements/lavalamp.html | 5 +- layouts/partials/elements/lcd-screen.html | 5 +- layouts/partials/elements/vu-meter.html | 33 ++ layouts/partials/elements/window.html | 14 + 19 files changed, 1351 insertions(+), 146 deletions(-) create mode 100644 assets/js/cityscape.js create mode 100644 assets/js/nav_time.js create mode 100644 assets/sass/_mixins.scss create mode 100644 assets/sass/partials/_window.scss create mode 100644 content/now.md create mode 100644 layouts/now/single.html create mode 100644 layouts/partials/elements/ipod.html create mode 100644 layouts/partials/elements/vu-meter.html create mode 100644 layouts/partials/elements/window.html diff --git a/assets/js/cityscape.js b/assets/js/cityscape.js new file mode 100644 index 0000000..875f6d6 --- /dev/null +++ b/assets/js/cityscape.js @@ -0,0 +1,76 @@ +// Configuration +const config = { + buildingsFar: { count: [10, 15], windows: [10, 30] }, + buildingsMid: { count: [6, 10], windows: [20, 40] }, + buildingsNear: { count: [5, 10], windows: [4, 8] }, +}; + +// Helper function to get random integer between min and max (inclusive) +function randomInt(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; +} + +// Function to create a building with random windows +function createBuilding(minWindows, maxWindows) { + const building = document.createElement("div"); + building.className = "building"; + + const windowsContainer = document.createElement("div"); + windowsContainer.className = "building-windows"; + + const numWindows = randomInt(minWindows, maxWindows); + + for (let i = 0; i < numWindows; i++) { + const window = document.createElement("div"); + window.className = "window-light"; + windowsContainer.appendChild(window); + } + + building.appendChild(windowsContainer); + return building; +} + +// Function to populate a layer with buildings +function populateLayer(layerName, numBuildings, windowRange) { + const layer = document.querySelector(`.${layerName}`); + if (!layer) { + console.warn(`Layer ${layerName} not found`); + return; + } + + // Clear existing buildings + layer.innerHTML = ""; + + for (let i = 0; i < numBuildings; i++) { + const building = createBuilding(windowRange[0], windowRange[1]); + layer.appendChild(building); + } +} + +// Initialize all layers +function initializeCityscape() { + populateLayer( + "buildings-far", + randomInt(...config.buildingsFar.count), + config.buildingsFar.windows, + ); + + populateLayer( + "buildings-mid", + randomInt(...config.buildingsMid.count), + config.buildingsMid.windows, + ); + + populateLayer( + "buildings-near", + randomInt(...config.buildingsNear.count), + config.buildingsNear.windows, + ); +} + +// Run when DOM is ready +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", initializeCityscape); +} else { + initializeCityscape(); +} diff --git a/assets/js/nav_time.js b/assets/js/nav_time.js new file mode 100644 index 0000000..accf622 --- /dev/null +++ b/assets/js/nav_time.js @@ -0,0 +1,85 @@ +// Time display with glitch effect +(function () { + const timeDisplay = document.querySelector(".time-display"); + if (!timeDisplay) return; + + const lcdText = timeDisplay.querySelector(".lcd-text"); + if (!lcdText) return; + + let isHovered = false; + let timeInterval; + + // Format time as hh:mm:ss + function getFormattedTime() { + const now = new Date(); + const hours = String(now.getHours()).padStart(2, "0"); + const minutes = String(now.getMinutes()).padStart(2, "0"); + const seconds = String(now.getSeconds()).padStart(2, "0"); + return `${hours}:${minutes}:${seconds}`; + } + + // Update time display + function updateTime() { + if (!isHovered) { + lcdText.textContent = getFormattedTime(); + } + } + + // Glitch characters for effect + const glitchChars = [ + "█", + "▓", + "▒", + "░", + "▀", + "▄", + "▌", + "▐", + "■", + "□", + "▪", + "▫", + "_", + "-", + "|", + ]; + + // Create glitch effect + function glitchEffect(callback) { + let glitchCount = 0; + const maxGlitches = 5; + + const glitchInterval = setInterval(() => { + // Generate random glitchy text + const glitchText = Array(8) + .fill(0) + .map(() => glitchChars[Math.floor(Math.random() * glitchChars.length)]) + .join(""); + + lcdText.textContent = glitchText; + glitchCount++; + + if (glitchCount >= maxGlitches) { + clearInterval(glitchInterval); + lcdText.textContent = "_N:OW:__"; + if (callback) callback(); + } + }, 50); + } + + // Mouse over handler + timeDisplay.addEventListener("mouseenter", () => { + isHovered = true; + glitchEffect(); + }); + + // Mouse out handler + timeDisplay.addEventListener("mouseleave", () => { + isHovered = false; + updateTime(); + }); + + // Start time updates + updateTime(); + timeInterval = setInterval(updateTime, 1000); +})(); diff --git a/assets/js/pages/audio.js b/assets/js/pages/audio.js index 7ef5ab9..ee804b5 100644 --- a/assets/js/pages/audio.js +++ b/assets/js/pages/audio.js @@ -1,25 +1,21 @@ if (document.getElementById("starfield")) { let starfield = document.getElementById("starfield"); - let numStars = 200; + let numStars = parseInt(starfield.dataset.stars) || 200; // Create static twinkling stars for (let i = 0; i < numStars; i++) { const star = document.createElement("div"); star.className = "star"; - // Random size const sizeClass = Math.random() < 0.7 ? "small" : Math.random() < 0.9 ? "medium" : "large"; star.classList.add(sizeClass); - // Random position star.style.left = Math.random() * 100 + "%"; star.style.top = Math.random() * 100 + "%"; - // Random animation duration (2-6 seconds) and delay star.style.animationDuration = 2 + Math.random() * 4 + "s"; star.style.animationDelay = Math.random() * 5 + "s"; - starfield.appendChild(star); } } diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss new file mode 100644 index 0000000..6427f27 --- /dev/null +++ b/assets/sass/_mixins.scss @@ -0,0 +1,64 @@ +// Define your breakpoints +$breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px, +); + +// Mixin for min-width (mobile-first) +@mixin media-up($breakpoint) { + @if map-has-key($breakpoints, $breakpoint) { + $value: map-get($breakpoints, $breakpoint); + @if $value == 0 { + @content; + } @else { + @media (min-width: $value) { + @content; + } + } + } +} + +// Mixin for max-width (desktop-first) +@mixin media-down($breakpoint) { + @if map-has-key($breakpoints, $breakpoint) { + $value: map-get($breakpoints, $breakpoint); + @media (max-width: #{$value - 1px}) { + @content; + } + } +} + +// Generate utility classes +@each $breakpoint, $value in $breakpoints { + // Hidden at this breakpoint and up + .hidden-#{$breakpoint}-up { + @include media-up($breakpoint) { + display: none !important; + } + } + + // Hidden at this breakpoint and down + .hidden-#{$breakpoint}-down { + @include media-down($breakpoint) { + display: none !important; + } + } + + // Visible only at this breakpoint + .visible-#{$breakpoint}-only { + display: none !important; + @include media-up($breakpoint) { + @if $breakpoint != xxl { + @include media-down($breakpoint) { + display: block !important; + } + } @else { + display: block !important; + } + } + } +} diff --git a/assets/sass/pages/about.scss b/assets/sass/pages/about.scss index c15989d..56df346 100644 --- a/assets/sass/pages/about.scss +++ b/assets/sass/pages/about.scss @@ -34,7 +34,7 @@ .lamp-text { font-size: 30px; - color: rgba(224, 27, 36, 0.7); + //color: rgba(224, 27, 36, 0.7); } } diff --git a/assets/sass/partials/_lavalamp.scss b/assets/sass/partials/_lavalamp.scss index f2305e2..9f3a2e6 100644 --- a/assets/sass/partials/_lavalamp.scss +++ b/assets/sass/partials/_lavalamp.scss @@ -1,16 +1,129 @@ .lava-lamp-container { - position: absolute; - bottom: 20%; - left: 20%; width: 80px; height: 150px; display: flex; flex-direction: column; align-items: center; z-index: 999; - + position: relative; margin: 0 auto; - //width: fit-content; /* or specify a fixed width */ + + .nav-lamp & { + top: -20px; + + @include media-down(lg) { + top: auto; + } + } + + &::before { + content: ""; + position: absolute; + top: 10%; + width: 150%; + height: 80%; + background: conic-gradient( + from 0deg, + rgba(255, 100, 0, 0.8) 0deg, + transparent 5deg, + transparent 10deg, + rgba(255, 150, 0, 0.6) 15deg, + transparent 20deg, + transparent 25deg, + rgba(255, 200, 0, 0.7) 30deg, + transparent 35deg, + transparent 40deg, + rgba(255, 100, 0, 0.8) 45deg, + transparent 50deg, + transparent 55deg, + rgba(255, 150, 0, 0.6) 60deg, + transparent 65deg, + transparent 70deg, + rgba(255, 200, 0, 0.7) 75deg, + transparent 80deg, + transparent 85deg, + rgba(255, 100, 0, 0.8) 90deg, + transparent 95deg, + transparent 100deg, + rgba(255, 150, 0, 0.6) 105deg, + transparent 110deg, + transparent 115deg, + rgba(255, 200, 0, 0.7) 120deg, + transparent 125deg, + transparent 130deg, + rgba(255, 100, 0, 0.8) 135deg, + transparent 140deg, + transparent 145deg, + rgba(255, 150, 0, 0.6) 150deg, + transparent 155deg, + transparent 160deg, + rgba(255, 200, 0, 0.7) 165deg, + transparent 170deg, + transparent 175deg, + rgba(255, 100, 0, 0.8) 180deg, + transparent 185deg, + transparent 190deg, + rgba(255, 150, 0, 0.6) 195deg, + transparent 200deg, + transparent 205deg, + rgba(255, 200, 0, 0.7) 210deg, + transparent 215deg, + transparent 220deg, + rgba(255, 100, 0, 0.8) 225deg, + transparent 230deg, + transparent 235deg, + rgba(255, 150, 0, 0.6) 240deg, + transparent 245deg, + transparent 250deg, + rgba(255, 200, 0, 0.7) 255deg, + transparent 260deg, + transparent 265deg, + rgba(255, 100, 0, 0.8) 270deg, + transparent 275deg, + transparent 280deg, + rgba(255, 150, 0, 0.6) 285deg, + transparent 290deg, + transparent 295deg, + rgba(255, 200, 0, 0.7) 300deg, + transparent 305deg, + transparent 310deg, + rgba(255, 100, 0, 0.8) 315deg, + transparent 320deg, + transparent 325deg, + rgba(255, 150, 0, 0.6) 330deg, + transparent 335deg, + transparent 340deg, + rgba(255, 200, 0, 0.7) 345deg, + transparent 350deg, + transparent 355deg, + rgba(255, 100, 0, 0.8) 360deg + ); + border-radius: 50%; + opacity: 0; + filter: blur(12px); + pointer-events: none; + transition: + opacity 0.4s ease, + transform 0.4s ease; + z-index: -1; + } + + &:hover::before { + opacity: 1; + animation: rotate-beams 7s linear infinite; + } +} + +@keyframes rotate-beams { + 0% { + transform: rotate(0deg) scale(1); + } + 50% { + transform: rotate(180deg) scale(1.2); + } + 100% { + transform: rotate(360deg) scale(1); + } } .lamp-cap { @@ -116,14 +229,32 @@ transform: translate(-35%, -50%) rotate(85deg); font-size: 30px; font-weight: bold; - color: rgba(224, 27, 36, 0); + color: rgba(224, 27, 36, 0.7); transition: color 0.5s ease; pointer-events: none; - z-index: 1; + z-index: 4; letter-spacing: 2px; } -.lava-lamp:hover .lamp-text { +.lamp-text-shadow { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-35%, -50%) rotate(85deg); + font-size: 30px; + font-weight: bold; + color: rgba(224, 27, 36, 0); + transition: color 0.5s ease; + pointer-events: none; + z-index: 4; + letter-spacing: 2px; + + @include media-down(lg) { + color: rgba(224, 27, 36, 0.2); + } +} + +.lava-lamp:hover .lamp-text-shadow { color: rgba(224, 27, 36, 0.7); } diff --git a/assets/sass/partials/_lcd-display.scss b/assets/sass/partials/_lcd-display.scss index d2f59af..a559564 100644 --- a/assets/sass/partials/_lcd-display.scss +++ b/assets/sass/partials/_lcd-display.scss @@ -28,7 +28,7 @@ z-index: 1; white-space: nowrap; overflow: hidden; - font-size: 2.2rem; + font-size: 2em; line-height: 1; &::before { diff --git a/assets/sass/partials/_music.scss b/assets/sass/partials/_music.scss index 8500d20..57e4837 100644 --- a/assets/sass/partials/_music.scss +++ b/assets/sass/partials/_music.scss @@ -1,15 +1,17 @@ .music { - position: absolute; - bottom: 15%; - right: 27%; + // position: absolute; + // bottom: 15%; + // right: 27%; cursor: pointer; + position: relative; + height: 100px; } .music-text { - display: block; position: absolute; - top: 0px; - left: -150px; + display: block; + bottom: 0; + right: 0; color: white; font-size: 20px; font-weight: bold; @@ -20,9 +22,17 @@ padding-left: 5px; padding-right: 5px; border-radius: 5px; - background-color: black; + background-color: rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 0.3s ease; + text-align: center; + + @include media-down(lg) { + opacity: 1; + transform: rotate(0deg); + bottom: 0; + font-size: 14px; + } } .music:hover .music-text { @@ -33,7 +43,7 @@ .notes { position: absolute; bottom: 30%; - left: -100px; + left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 9999; @@ -134,8 +144,9 @@ /* iPod group container - maintains relative positioning */ .ipod-group { - position: absolute; - left: -200px; + // position: absolute; + // left: -200px; + position: relative; width: 150px; height: 100px; z-index: 15; @@ -156,16 +167,21 @@ inset 0 -1px 3px rgba(0, 0, 0, 0.2); transform: rotate(-8deg); z-index: 2; + + @include media-down(lg) { + width: 70px; + height: 110px; + } } .ipod::before { content: ""; position: absolute; - top: 8px; + top: 5%; left: 50%; transform: translateX(-50%); - width: 32px; - height: 22px; + width: 80%; + height: 40%; background: linear-gradient(180deg, #1a1a2a 0%, #0a0a1a 100%); border-radius: 2px; box-shadow: inset 0 0 5px rgba(0, 100, 150, 0.3); @@ -173,11 +189,11 @@ .ipod-wheel { position: absolute; - bottom: 8px; + bottom: 8%; left: 50%; transform: translateX(-50%); - width: 32px; - height: 30px; + width: 70%; + height: 42%; background: radial-gradient( circle at center, #fff 0%, diff --git a/assets/sass/partials/_vu-meter.scss b/assets/sass/partials/_vu-meter.scss index dc38d14..8736082 100644 --- a/assets/sass/partials/_vu-meter.scss +++ b/assets/sass/partials/_vu-meter.scss @@ -1,8 +1,8 @@ /* VU Meter on desk */ .vu-meter { position: absolute; - bottom: 18%; - right: 30%; + left: 90px; + top: 10px; width: 120px; height: 60px; z-index: 8; diff --git a/assets/sass/partials/_window.scss b/assets/sass/partials/_window.scss new file mode 100644 index 0000000..6c990db --- /dev/null +++ b/assets/sass/partials/_window.scss @@ -0,0 +1,370 @@ +.window-frame { + position: relative; + width: 100%; + aspect-ratio: 16/9; + background: #3a3a3a; + border: 3px solid #2a2520; + border-top: 0px; + box-shadow: + inset 0 0 20px rgba(0, 0, 0, 0.8), + 0 10px 40px rgba(0, 0, 0, 0.9); + overflow: hidden; +} + +.window-frame::before { + content: ""; + position: absolute; + inset: -20px; + border: 5px solid #1a1510; + border-top: 0px; + pointer-events: none; + z-index: 10; +} + +/* Cityscape view */ +.cityscape { + width: 100%; + height: 100%; + position: relative; + background: linear-gradient( + 180deg, + #1a2332 0%, + #2a3a52 30%, + #4a5a72 60%, + #6a7a92 100% + ); + overflow: hidden; +} + +/* Sky with slight gradient */ +.starfield { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + background: linear-gradient(180deg, #0a0f1a 0%, #1a2a3a 50%, #2a3a52 100%); +} + +.building-windows { + width: 100%; + display: grid; + + > .window-light { + width: 100%; + aspect-ratio: 1/1; + } +} + +@mixin buildings-base { + position: absolute; + bottom: 0; + top: 0; + left: 0; + right: 0; + display: flex; + align-items: flex-end; + + @for $i from 1 through 20 { + > .building:nth-child(#{$i}) { + @if random(4) == 1 { + opacity: 0; + } + + > .building-windows { + @for $j from 1 through 40 { + > .window-light:nth-child(#{$j}) { + @if random(2) == 1 { + background: transparent; + box-shadow: none; + } @else { + $color-choice: random(100); + $light-color: null; + + @if $color-choice <= 85 { + $hue: 40 + random(20); // 40-60 + $sat: 70 + random(30); // 70-100% + $light: 50 + random(30); // 50-80% + $light-color: hsl($hue, $sat * 1%, $light * 1%); + } @else if $color-choice <= 95 { + $hue: 320 + random(20); // 320-340 (pink range) + $sat: 60 + random(40); // 60-100% + $light: 60 + random(20); // 60-80% + $light-color: hsl($hue, $sat * 1%, $light * 1%); + } @else { + $hue: 260 + random(40); // 260-300 (purple range) + $sat: 50 + random(50); // 50-100% + $light: 50 + random(30); // 50-80% + $light-color: hsl($hue, $sat * 1%, $light * 1%); + } + + background: $light-color; + box-shadow: 0 0 10px $light-color; + } + } + } + } + } + } +} + +.buildings-far { + @include buildings-base; + + > .building { + background: linear-gradient(180deg, #272629 0%, #2a3a52 100%); + box-shadow: + inset -2px 0 5px rgba(0, 0, 0, 0.1), + 0 0 10px rgba(42, 38, 31, 0.1); + + > .building-windows { + width: 100%; + height: 50%; + opacity: 0.3; + padding: 5%; + } + } + + @for $i from 1 through 20 { + > .building:nth-child(#{$i}) { + @if random(2) == 1 { + $width: random(10) + 5; + width: $width * 1%; + } @else { + $width: random(15) + 5; + width: $width + 15px; + } + + $height: random(60) + 30; + height: $height * 1%; + + > .building-windows { + grid-template-columns: repeat(#{random(3) + 3}, 1fr); + + > .window-light { + aspect-ratio: #{0.5 + random(150) / 100}; + } + } + } + } +} + +.buildings-mid { + @include buildings-base; + + > .building { + background: linear-gradient(180deg, #201e22 0%, #2a3a52 100%); + box-shadow: + inset -2px 0 5px rgba(0, 0, 0, 0.1), + 0 0 10px rgba(42, 38, 31, 0.1); + + > .building-windows { + width: 100%; + height: 50%; + opacity: 0.7; + padding: 5%; + } + } + + @for $i from 1 through 20 { + > .building:nth-child(#{$i}) { + @if random(2) == 1 { + $width: random(10) + 10; + width: $width * 1%; + } @else { + $width: random(15) + 10; + width: $width + 15px; + } + + $height: random(20) + 30; + height: $height * 1%; + + > .building-windows { + grid-template-columns: repeat(#{random(3) + 3}, 1fr); + + > .window-light { + aspect-ratio: #{0.5 + random(150) / 100}; + } + } + } + } +} + +.buildings-near { + @include buildings-base; + + > .building { + background: linear-gradient(180deg, #121113 0%, #182230 100%); + box-shadow: + inset -2px 0 5px rgba(0, 0, 0, 0.1), + 0 0 10px rgba(42, 38, 31, 0.1); + + > .building-windows { + width: 100%; + height: 50%; + opacity: 0.8; + padding: 5%; + } + } + + @for $i from 1 through 20 { + > .building:nth-child(#{$i}) { + @if random(2) == 1 { + $width: random(3) * 7; + width: $width * 1%; + } @else { + $width: random(10) + 50; + width: $width + 15px; + } + + $height: random(3) * 10; + height: $height * 1%; + + > .building-windows { + grid-template-columns: repeat(#{random(2) + 3}, 1fr); + + > .window-light { + aspect-ratio: #{0.5 + random(150) / 100}; + } + } + } + } +} + +/* Buildings container */ +.buildings { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 60%; + display: flex; + align-items: flex-end; + justify-content: space-around; + + > .building { + animation: buildingGlow 4s ease-in-out infinite; + } +} + +.building { + position: relative; + background: linear-gradient(180deg, #1a1a2e 0%, #0a0a1e 100%); + box-shadow: + inset -2px 0 10px rgba(0, 0, 0, 0.5), + 0 0 20px rgba(255, 200, 100, 0.1); +} + +/* Building windows */ +.building-windows { + gap: 10%; + padding: 5% 5%; +} + +.window-light { + background: #ffd700; + box-shadow: 0 0 10px #ffd700; + animation: windowFlicker 5s ease-in-out infinite; +} + +.window-light:nth-child(odd) { + animation-delay: 0.5s; +} + +.window-light:nth-child(3n) { + animation-delay: 3s; +} + +.window-light:nth-child(4n) { + animation-delay: 5.5s; +} + +@keyframes windowFlicker { + 0%, + 100% { + opacity: 0.3; + } + 50% { + opacity: 0.9; + } +} + +@keyframes buildingGlow { + 0%, + 100% { + box-shadow: + inset -2px 0 10px rgba(0, 0, 0, 0.5), + 0 0 20px rgba(255, 200, 100, 0.1); + } + 50% { + box-shadow: + inset -2px 0 10px rgba(0, 0, 0, 0.5), + 0 0 30px rgba(255, 200, 100, 0.2); + } +} + +/* Dirt and grime on window */ +.window-grime { + position: absolute; + inset: 0; + background: + radial-gradient( + circle at 20% 30%, + rgba(50, 40, 30, 0.2) 0%, + transparent 40% + ), + radial-gradient( + circle at 80% 60%, + rgba(40, 35, 25, 0.15) 0%, + transparent 50% + ), + radial-gradient( + circle at 50% 80%, + rgba(45, 38, 28, 0.18) 0%, + transparent 45% + ); + pointer-events: none; + z-index: 6; +} + +/* Glass reflection */ +.glass-reflection { + position: absolute; + inset: 0; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.1) 0%, + transparent 30%, + transparent 70%, + rgba(255, 255, 255, 0.05) 100% + ); + pointer-events: none; + z-index: 7; +} + +/* Ambient light from city */ +.ambient-light { + position: absolute; + bottom: -50px; + left: 50%; + transform: translateX(-50%); + width: 200%; + height: 200px; + background: radial-gradient( + ellipse at center, + rgba(255, 200, 100, 0.2) 0%, + transparent 70% + ); + filter: blur(40px); + animation: ambientPulse 3s ease-in-out infinite; +} + +@keyframes ambientPulse { + 0%, + 100% { + opacity: 0.5; + } + 50% { + opacity: 0.8; + } +} diff --git a/assets/sass/style.scss b/assets/sass/style.scss index 410da15..78da401 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -1,3 +1,5 @@ +@import "mixins"; + @import "partials/global-styles"; @import "partials/neon-sign"; @@ -8,6 +10,7 @@ @import "partials/lavalamp"; @import "partials/floppy"; @import "partials/lcd-display"; +@import "partials/window"; @import "partials/content-screens"; @@ -406,6 +409,26 @@ body { ); } +.window { + position: absolute; + top: 0; + left: 20%; + aspect-ratio: 16/9; + width: 350px; + border: 5px solid #c4b89a; + border-top: 0px; + + &::after { + content: ""; + position: absolute; + bottom: -5px; + left: -3%; + width: 106%; + height: 10px; + background-color: #c4b89a; + } +} + /* Post-it notes and papers on wall */ .sticky-note { font-family: "Caveat", cursive; @@ -435,7 +458,7 @@ body { } .note3 { - top: 12%; + top: 21%; left: 38%; transform: rotate(-3deg); background: #99ff99; @@ -653,6 +676,13 @@ body { left: 50%; transform: translate(-50%, -50%); z-index: 10; + + @include media-down(lg) { + position: relative; + transform: none; + top: auto; + left: auto; + } } /* CRT Monitor bezel */ @@ -667,6 +697,12 @@ body { inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.3); position: relative; + + @include media-down(lg) { + width: 100%; + padding: 0px 0px 45px 0px; + border-radius: 0px; + } } /* Brand logo on bezel */ @@ -680,6 +716,10 @@ body { font-size: 11px; font-weight: bold; letter-spacing: 2px; + + @include media-down(lg) { + content: "RITUAL.SH"; + } } /* Power indicator LED */ @@ -775,6 +815,10 @@ body { inset 0 0 40px rgba(0, 255, 100, 0.05), inset 3px 3px 8px rgba(255, 255, 255, 0.1), inset -3px -3px 8px rgba(0, 0, 0, 0.5); + + @include media-down(lg) { + border-radius: 0px; + } } /* Screen curvature/glass emboss effect */ @@ -1541,8 +1585,7 @@ body { /* Coffee mug */ .coffee-mug { - bottom: 12%; - left: 75%; + position: relative; width: 55px; height: 62px; background: linear-gradient(180deg, #4a2a1a 0%, #3a1a0a 100%); @@ -1575,3 +1618,62 @@ body { /* Import a nice cursive font */ @import url("https://fonts.googleapis.com/css2?family=Neonderthaw&display=swap"); + +.navigation { + position: absolute; + bottom: 10%; + left: 0; + right: 0; + z-index: 999; + display: flex; + justify-content: space-evenly; + align-items: center; + + @include media-down(lg) { + position: relative; + } + + > .time-display { + width: 150px; + z-index: 30; + padding: 0.5em; + background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%); + border: 1px solid #333; + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.5), + inset 0 1px 2px rgba(255, 255, 255, 0.1); + border-radius: 1em; + cursor: pointer; + + &::after { + content: "Interests and Tools"; + position: absolute; + width: 150px; + color: white; + font-size: 20px; + font-weight: bold; + z-index: 8000; + transform: rotate(-10deg); + border: 1px solid #0f0; + padding: 2px; + padding-left: 5px; + padding-right: 5px; + border-radius: 5px; + background-color: rgba(0, 0, 0, 0.7); + opacity: 0; + transition: opacity 0.3s ease; + text-align: center; + + @include media-down(lg) { + opacity: 1; + transform: rotate(0deg); + bottom: 0; + font-size: 14px; + } + } + + &:hover::after { + opacity: 1; + } + } +} diff --git a/content/now.md b/content/now.md new file mode 100644 index 0000000..e69de29 diff --git a/layouts/index.html b/layouts/index.html index 3f11c95..ae4beb0 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -3,6 +3,8 @@ {{ end }}{{ define "main" }}
+
{{ partial "elements/window.html" . }}
+ {{ partial "elements/neon-sign.html" . }} @@ -67,122 +69,29 @@
+{{/*
_
+*/}} +{{/*
-
+ +*/}} - -
-
MUSIC & AUDIO GEAR
- -
-
-
-
- - - - - - - - - - - - - - - - - -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
-
-
-
- -
-
♪
-
♫
-
♪
-
♫
-
♪
-
♫
-
-
- +{{/*
- -{{ partial "elements/lavalamp.html" . }} +*/}}
@@ -210,7 +119,7 @@
-
+
> updates -lah
{{ $pages := where .Site.RegularPages "Kind" "page" }} {{ range first 5 @@ -226,7 +135,7 @@
-
+
[PKT] 192.168.1.1:443
@@ -308,7 +217,7 @@
-
+
PING 8.8.8.8
64 bytes: 12ms
@@ -318,7 +227,7 @@
-
+
> tail -f /var/log
[INFO] Process OK
@@ -336,6 +245,39 @@
+
+
{{ partial "elements/lavalamp.html" . }}
+ +
+ {{ partial "elements/lcd-screen.html" (dict "text" "12:03:31" "placeholder" + "00:00:00") }} +
+
+
+
+
+ {{ $pages := where .Site.RegularPages "Kind" "page" }} {{ range first 1 (sort $pages "Lastmod" "desc") }} diff --git a/layouts/now/single.html b/layouts/now/single.html new file mode 100644 index 0000000..229ae72 --- /dev/null +++ b/layouts/now/single.html @@ -0,0 +1,332 @@ + + + + + + Basement Window + + + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ + diff --git a/layouts/partials/elements/ipod.html b/layouts/partials/elements/ipod.html new file mode 100644 index 0000000..d718ff4 --- /dev/null +++ b/layouts/partials/elements/ipod.html @@ -0,0 +1,46 @@ +
+
+
+
+ + + + + + + + + + + + + + + + + +
+
+
diff --git a/layouts/partials/elements/lavalamp.html b/layouts/partials/elements/lavalamp.html index cef601c..ed5aa7c 100644 --- a/layouts/partials/elements/lavalamp.html +++ b/layouts/partials/elements/lavalamp.html @@ -21,9 +21,8 @@
-
- -
ABOUT
+
ABOUT
+
ABOUT
diff --git a/layouts/partials/elements/lcd-screen.html b/layouts/partials/elements/lcd-screen.html index 706d843..94bbd25 100644 --- a/layouts/partials/elements/lcd-screen.html +++ b/layouts/partials/elements/lcd-screen.html @@ -1,6 +1,5 @@ -{{ $text := .text | default "" }} {{ $placeholder := strings.Repeat (len $text) -"8" }} - +{{ $text := .text | default "" }} {{ $placeholder := .placeholder | default +(strings.Repeat (len $text) "8" ) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
diff --git a/layouts/partials/elements/window.html b/layouts/partials/elements/window.html new file mode 100644 index 0000000..f400397 --- /dev/null +++ b/layouts/partials/elements/window.html @@ -0,0 +1,14 @@ +
+ +
+
+
+
+
+
+
+ + +
+
+