Adding cityscape and junk
This commit is contained in:
Dan
parent
0d21b06acd
commit
c51942e5c0
19 changed files with 1351 additions and 146 deletions
76
assets/js/cityscape.js
Normal file
76
assets/js/cityscape.js
Normal file
|
|
@ -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();
|
||||
}
|
||||
85
assets/js/nav_time.js
Normal file
85
assets/js/nav_time.js
Normal file
|
|
@ -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);
|
||||
})();
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
64
assets/sass/_mixins.scss
Normal file
64
assets/sass/_mixins.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
.lamp-text {
|
||||
font-size: 30px;
|
||||
color: rgba(224, 27, 36, 0.7);
|
||||
//color: rgba(224, 27, 36, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
z-index: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: 2.2rem;
|
||||
font-size: 2em;
|
||||
line-height: 1;
|
||||
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -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%,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
370
assets/sass/partials/_window.scss
Normal file
370
assets/sass/partials/_window.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
0
content/now.md
Normal file
0
content/now.md
Normal file
|
|
@ -3,6 +3,8 @@
|
|||
{{ end }}{{ define "main" }}
|
||||
<div class="wall"></div>
|
||||
|
||||
<div class="window">{{ partial "elements/window.html" . }}</div>
|
||||
|
||||
<!-- Neon sign above monitor -->
|
||||
{{ partial "elements/neon-sign.html" . }}
|
||||
|
||||
|
|
@ -67,122 +69,29 @@
|
|||
<div class="desk"></div>
|
||||
|
||||
<!-- Desk monitor -->
|
||||
{{/*
|
||||
<div class="secondary-screen desk-monitor">
|
||||
<div class="screen-display large crt">
|
||||
<span class="cursor-blink">_</span>
|
||||
</div>
|
||||
<div class="monitor-stand-small"></div>
|
||||
</div>
|
||||
*/}}
|
||||
|
||||
<!-- Desk clutter -->
|
||||
{{/*
|
||||
<div class="desk-item keyboard"></div>
|
||||
<div class="desk-item mouse"></div>
|
||||
<div class="desk-item coffee-mug"></div>
|
||||
|
||||
*/}}
|
||||
|
||||
<!-- MUSICAL STUFF -->
|
||||
<a href="/audio/">
|
||||
<div class="music">
|
||||
<div class="music-text">MUSIC & AUDIO GEAR</div>
|
||||
|
||||
<div class="ipod-group">
|
||||
<div class="ipod">
|
||||
<div class="ipod-wheel"></div>
|
||||
</div>
|
||||
|
||||
<!-- Earbud cables within the group container -->
|
||||
<svg class="ipod-cables" viewBox="0 0 150 100" style="overflow: visible">
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="cableGradient"
|
||||
x1="0%"
|
||||
y1="0%"
|
||||
x2="100%"
|
||||
y2="100%"
|
||||
>
|
||||
<stop offset="0%" style="stop-color: #6b4fb3" />
|
||||
<stop offset="100%" style="stop-color: #4169e1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<path
|
||||
d="M 85,3 C 85,-12 75,-22 55,-22 C 35,-22 25,-15 25,0 C 25,15 28,35 32,50 L 35,65"
|
||||
stroke="url(#cableGradient)"
|
||||
stroke-width="2.5"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M 35,65 C 28,72 20,82 5,88"
|
||||
stroke="url(#cableGradient)"
|
||||
stroke-width="1.8"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M 35,65 C 55,73 95,82 125,83"
|
||||
stroke="url(#cableGradient)"
|
||||
stroke-width="1.8"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="earbud earbud-left"></div>
|
||||
<div class="earbud earbud-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="vu-meter">
|
||||
<div class="vu-meter-body">
|
||||
<div class="vu-meter-screen">
|
||||
<div class="vu-bars crt">
|
||||
<div class="vu-bar" style="--delay: 0s; --height: 45%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.1s; --height: 65%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.2s; --height: 80%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.3s; --height: 55%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.4s; --height: 90%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.5s; --height: 70%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.6s; --height: 85%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.7s; --height: 60%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.8s; --height: 75%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.9s; --height: 50%"></div>
|
||||
<div class="vu-bar" style="--delay: 1s; --height: 65%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.1s; --height: 40%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.2s; --height: 55%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.3s; --height: 70%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.4s; --height: 45%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.5s; --height: 35%"></div>
|
||||
</div>
|
||||
<!-- Peak indicator line -->
|
||||
<div class="vu-peak-line"></div>
|
||||
</div>
|
||||
<!-- VU Meter LEDs -->
|
||||
<div class="vu-leds">
|
||||
<div class="vu-led green"></div>
|
||||
<div class="vu-led green"></div>
|
||||
<div class="vu-led yellow"></div>
|
||||
<div class="vu-led red"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notes">
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Widgets and gadgets -->
|
||||
{{/*
|
||||
<div class="widget router"></div>
|
||||
<div class="widget hard-drive"></div>
|
||||
|
||||
{{ partial "elements/lavalamp.html" . }}
|
||||
*/}}
|
||||
|
||||
<!-- CRT Monitor -->
|
||||
<div class="crt-container">
|
||||
|
|
@ -210,7 +119,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Wall-mounted monitors -->
|
||||
<div class="secondary-screen wall-monitor-1">
|
||||
<div class="secondary-screen wall-monitor-1 hidden-xl-down">
|
||||
<div class="screen-display crt">
|
||||
> updates -lah<br />
|
||||
{{ $pages := where .Site.RegularPages "Kind" "page" }} {{ range first 5
|
||||
|
|
@ -226,7 +135,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="secondary-screen wall-monitor-2">
|
||||
<div class="secondary-screen wall-monitor-2 hidden-xl-down">
|
||||
<div class="screen-display tiny cyan crt">
|
||||
<div class="scroll-text">
|
||||
[PKT] 192.168.1.1:443<br />
|
||||
|
|
@ -308,7 +217,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="secondary-screen wall-monitor-3">
|
||||
<div class="secondary-screen wall-monitor-3 hidden-xl-down">
|
||||
<div class="screen-display crt">
|
||||
PING 8.8.8.8<br />
|
||||
64 bytes: 12ms<br />
|
||||
|
|
@ -318,7 +227,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="secondary-screen wall-monitor-4">
|
||||
<div class="secondary-screen wall-monitor-4 hidden-xl-down">
|
||||
<div class="screen-display tiny amber crt">
|
||||
> tail -f /var/log<br />
|
||||
[INFO] Process OK<br />
|
||||
|
|
@ -336,6 +245,39 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navigation">
|
||||
<div class="nav-lamp">{{ partial "elements/lavalamp.html" . }}</div>
|
||||
<div>
|
||||
<a href="/audio/">
|
||||
<div class="music">
|
||||
<div class="music-text">MUSIC & AUDIO GEAR</div>
|
||||
|
||||
{{ partial "elements/ipod.html" . }}
|
||||
|
||||
<div class="hidden-md-down">
|
||||
{{ partial "elements/vu-meter.html" . }}
|
||||
</div>
|
||||
|
||||
<div class="notes">
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="time-display">
|
||||
{{ partial "elements/lcd-screen.html" (dict "text" "12:03:31" "placeholder"
|
||||
"00:00:00") }}
|
||||
</div>
|
||||
<div class="hidden-xl-down">
|
||||
<div class="coffee-mug"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ $pages := where .Site.RegularPages "Kind" "page" }} {{ range first 1 (sort
|
||||
$pages "Lastmod" "desc") }}
|
||||
|
||||
|
|
|
|||
332
layouts/now/single.html
Normal file
332
layouts/now/single.html
Normal file
|
|
@ -0,0 +1,332 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Basement Window</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
|
||||
font-family: "Courier New", monospace;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.basement-wall {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
|
||||
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.window-frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
background: #3a3a3a;
|
||||
border: 20px solid #2a2520;
|
||||
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;
|
||||
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 */
|
||||
.sky {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40%;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#0a0f1a 0%,
|
||||
#1a2a3a 50%,
|
||||
#2a3a52 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Buildings container */
|
||||
.buildings {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
gap: 20px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.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);
|
||||
animation: buildingGlow 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.building:nth-child(1) {
|
||||
width: 80px;
|
||||
height: 280px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.building:nth-child(2) {
|
||||
width: 60px;
|
||||
height: 200px;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.building:nth-child(3) {
|
||||
width: 90px;
|
||||
height: 320px;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.building:nth-child(4) {
|
||||
width: 70px;
|
||||
height: 240px;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
.building:nth-child(5) {
|
||||
width: 85px;
|
||||
height: 300px;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
/* Building windows */
|
||||
.building-windows {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
padding: 15px 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.window-light {
|
||||
background: #ffd700;
|
||||
opacity: 0;
|
||||
box-shadow: 0 0 10px #ffd700;
|
||||
animation: windowFlicker 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.window-light:nth-child(odd) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.window-light:nth-child(3n) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.window-light:nth-child(4n) {
|
||||
animation-delay: 1.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="basement-wall">
|
||||
<div class="window-frame">
|
||||
<!-- Cityscape -->
|
||||
<div class="cityscape">
|
||||
<div class="sky"></div>
|
||||
<div class="buildings">
|
||||
<div class="building">
|
||||
<div class="building-windows">
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="building">
|
||||
<div class="building-windows">
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="building">
|
||||
<div class="building-windows">
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="building">
|
||||
<div class="building-windows">
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="building">
|
||||
<div class="building-windows">
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ambient-light"></div>
|
||||
</div>
|
||||
|
||||
<!-- Window effects -->
|
||||
<div class="window-grime"></div>
|
||||
<div class="glass-reflection"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
46
layouts/partials/elements/ipod.html
Normal file
46
layouts/partials/elements/ipod.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<div class="ipod-group">
|
||||
<div class="ipod">
|
||||
<div class="ipod-wheel"></div>
|
||||
</div>
|
||||
|
||||
<!-- Earbud cables within the group container -->
|
||||
<svg
|
||||
class="ipod-cables hidden-lg-down"
|
||||
viewBox="0 0 150 100"
|
||||
style="overflow: visible"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="cableGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color: #6b4fb3" />
|
||||
<stop offset="100%" style="stop-color: #4169e1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<path
|
||||
d="M 85,3 C 85,-12 75,-22 55,-22 C 35,-22 25,-15 25,0 C 25,15 28,35 32,50 L 35,65"
|
||||
stroke="url(#cableGradient)"
|
||||
stroke-width="2.5"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M 35,65 C 28,72 20,82 5,88"
|
||||
stroke="url(#cableGradient)"
|
||||
stroke-width="1.8"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M 35,65 C 55,73 95,82 125,83"
|
||||
stroke="url(#cableGradient)"
|
||||
stroke-width="1.8"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="earbud earbud-left hidden-lg-down"></div>
|
||||
<div class="earbud earbud-right hidden-lg-down"></div>
|
||||
</div>
|
||||
|
|
@ -21,9 +21,8 @@
|
|||
<div class="lava-lamp-container">
|
||||
<div class="lamp-cap"></div>
|
||||
<div class="lava-lamp" id="lavaLamp">
|
||||
<div class="blobs-container"></div>
|
||||
<!-- NEW: wrapper for blobs -->
|
||||
<div class="lamp-text">ABOUT</div>
|
||||
<div class="blobs-container"><div class="lamp-text">ABOUT</div></div>
|
||||
<div class="lamp-text-shadow">ABOUT</div>
|
||||
</div>
|
||||
<div class="lamp-base"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
{{ $text := .text | default "" }} {{ $placeholder := strings.Repeat (len $text)
|
||||
"8" }}
|
||||
|
||||
{{ $text := .text | default "" }} {{ $placeholder := .placeholder | default
|
||||
(strings.Repeat (len $text) "8" ) }}
|
||||
<div class="lcd-container">
|
||||
<div class="lcd-screen">
|
||||
<span class="lcd-text" data-placeholder="{{ $placeholder }}"
|
||||
|
|
|
|||
33
layouts/partials/elements/vu-meter.html
Normal file
33
layouts/partials/elements/vu-meter.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<div class="vu-meter">
|
||||
<div class="vu-meter-body">
|
||||
<div class="vu-meter-screen">
|
||||
<div class="vu-bars crt">
|
||||
<div class="vu-bar" style="--delay: 0s; --height: 45%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.1s; --height: 65%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.2s; --height: 80%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.3s; --height: 55%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.4s; --height: 90%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.5s; --height: 70%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.6s; --height: 85%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.7s; --height: 60%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.8s; --height: 75%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.9s; --height: 50%"></div>
|
||||
<div class="vu-bar" style="--delay: 1s; --height: 65%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.1s; --height: 40%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.2s; --height: 55%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.3s; --height: 70%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.4s; --height: 45%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.5s; --height: 35%"></div>
|
||||
</div>
|
||||
<!-- Peak indicator line -->
|
||||
<div class="vu-peak-line"></div>
|
||||
</div>
|
||||
<!-- VU Meter LEDs -->
|
||||
<div class="vu-leds">
|
||||
<div class="vu-led green"></div>
|
||||
<div class="vu-led green"></div>
|
||||
<div class="vu-led yellow"></div>
|
||||
<div class="vu-led red"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
14
layouts/partials/elements/window.html
Normal file
14
layouts/partials/elements/window.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<div class="window-frame">
|
||||
<!-- Cityscape -->
|
||||
<div class="cityscape">
|
||||
<div class="starfield" id="starfield" data-stars="50"></div>
|
||||
<div class="buildings-far"></div>
|
||||
<div class="buildings-mid"></div>
|
||||
<div class="buildings-near"></div>
|
||||
<div class="ambient-light"></div>
|
||||
</div>
|
||||
|
||||
<!-- Window effects -->
|
||||
<div class="window-grime"></div>
|
||||
<div class="glass-reflection"></div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue