diff --git a/assets/css/extended/custom.css b/assets/css/extended/custom.css deleted file mode 100644 index abeb726..0000000 --- a/assets/css/extended/custom.css +++ /dev/null @@ -1,48 +0,0 @@ -.buy-me-a-coffee { - text-align: center; - border-radius: var(--radius); - background: var(--code-bg); - border: 1px solid var(--border); - - background-color: var(--secondary); - color: var(--tertiary); - padding: var(--gap); -} - -article a[href^="http"]:not(article .social-icons a, .paginav a, .buy-me-a-coffee a, .post-tags a, a.entry-link), -article a[href^="https://"]:not(article .social-icons a, .paginav a, .buy-me-a-coffee a, .post-tags a, a.entry-link) -{ - box-shadow: none; - background: linear-gradient(to left, #c34722, #fdbb2d 100%); - background-position: 0 100%; - background-size: 100% 2px; - background-repeat: repeat-x; -} - -.row { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - width: 100%; - gap: 14px; -} - -.col { - display: flex; - flex-direction: column; - flex-basis: 100%; - flex: 1; -} - -.photo { - flex: 25%; - - img { - border-radius: var(--radius); - - } -} - -.intro-text { - flex: 75%; -} \ No newline at end of file diff --git a/assets/js/commands/core.js b/assets/js/commands/core.js new file mode 100644 index 0000000..7efae8b --- /dev/null +++ b/assets/js/commands/core.js @@ -0,0 +1,41 @@ +// Core Commands Module +// These are essential commands for the terminal + +// Help command +window.terminal.registerCommand("help", "Display available commands", () => { + window.terminal.print("Available commands:", "success"); + window.terminal.print(""); + + const commands = Object.keys(window.terminal.commands).sort(); + commands.forEach((cmd) => { + const desc = window.terminal.commands[cmd].description || "No description"; + window.terminal.print(` ${cmd.padEnd(15)} - ${desc}`); + }); + window.terminal.print(""); +}); + +// Clear command +window.terminal.registerCommand("clear", "Clear the terminal screen", () => { + window.terminal.clear(); +}); + +// Echo command +window.terminal.registerCommand("echo", "Echo text to the terminal", (args) => { + window.terminal.print(args.join(" ")); +}); + +// History command +window.terminal.registerCommand("history", "Show command history", () => { + if (window.terminal.history.length === 0) { + window.terminal.print("No commands in history"); + return; + } + + window.terminal.print("Command history:", "info"); + window.terminal.history + .slice() + .reverse() + .forEach((cmd, idx) => { + window.terminal.print(` ${idx + 1}. ${cmd}`); + }); +}); diff --git a/assets/js/commands/custom.js b/assets/js/commands/custom.js new file mode 100644 index 0000000..68ea937 --- /dev/null +++ b/assets/js/commands/custom.js @@ -0,0 +1,101 @@ +// Custom Commands Module +// Add your custom commands here! +// This file is a template for creating your own commands + +// Example: Weather command (placeholder) +// window.terminal.registerCommand( +// "weather", +// "Show weather information", +// (args) => { +// const city = args.length > 0 ? args.join(" ") : "your location"; +// window.terminal.printInfo(`Fetching weather for ${city}...`); +// window.terminal.print("☀️ Sunny, 72°F"); +// window.terminal.print(""); +// window.terminal.printWarning( +// "Note: This is a placeholder. Integrate with a real weather API!", +// ); +// }, +// ); + +// Example: Random quote +// window.terminal.registerCommand("quote", "Display a random quote", () => { +// const quotes = [ +// "The only way to do great work is to love what you do. - Steve Jobs", +// "Innovation distinguishes between a leader and a follower. - Steve Jobs", +// "Stay hungry, stay foolish. - Steve Jobs", +// "First, solve the problem. Then, write the code. - John Johnson", +// ]; + +// const randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; +// window.terminal.printSuccess(randomQuote); +// }); + +// Example: List command (demonstrates dynamic content) +// window.terminal.registerCommand( +// "list", +// "List items in a collection", +// (args) => { +// if (args.length === 0) { +// window.terminal.printError("Usage: list "); +// window.terminal.print("Available categories: files, users, tasks"); +// return; +// } + +// const category = args[0].toLowerCase(); + +// switch (category) { +// case "files": +// window.terminal.print("Files:", "info"); +// window.terminal.print(" 📄 document.txt"); +// window.terminal.print(" 📄 notes.md"); +// window.terminal.print(" 📁 projects/"); +// break; +// case "users": +// window.terminal.print("Users:", "info"); +// window.terminal.print(" 👤 admin"); +// window.terminal.print(" 👤 guest"); +// break; +// case "tasks": +// window.terminal.print("Tasks:", "info"); +// window.terminal.print(" ✓ Complete terminal setup"); +// window.terminal.print(" ☐ Add more commands"); +// window.terminal.print(" ☐ Customize appearance"); +// break; +// default: +// window.terminal.printError(`Unknown category: ${category}`); +// } +// }, +// ); + +// Example: Color command (demonstrates HTML output) +window.terminal.registerCommand("colors", "Display available colors", () => { + window.terminal.print("Available terminal colors:", "info"); + window.terminal.print(""); + window.terminal.printHTML("● Standard (green)"); + window.terminal.printHTML('● Error (red)'); + window.terminal.printHTML( + '● Success (bright green)', + ); + window.terminal.printHTML('● Info (blue)'); + window.terminal.printHTML('● Warning (orange)'); +}); + +// ADD YOUR OWN COMMANDS BELOW THIS LINE +// ======================================== + +// Template for new command: +/* +window.terminal.registerCommand('commandname', 'Command description', (args) => { + // args is an array of arguments + // Example: if user types "mycommand hello world" + // args will be ['hello', 'world'] + + // Print output using: + window.terminal.print('Regular text'); + window.terminal.printSuccess('Success message'); + window.terminal.printError('Error message'); + window.terminal.printInfo('Info message'); + window.terminal.printWarning('Warning message'); + window.terminal.printHTML('HTML content'); +}); +*/ diff --git a/assets/js/commands/navigation.js b/assets/js/commands/navigation.js new file mode 100644 index 0000000..5efd761 --- /dev/null +++ b/assets/js/commands/navigation.js @@ -0,0 +1,52 @@ +// Navigation Commands Module +// Commands for navigating to different pages or URLs + +// Navigate to URL command +window.terminal.registerCommand("goto", "Navigate to a URL", (args) => { + if (args.length === 0) { + window.terminal.printError("Usage: goto "); + window.terminal.print("Examples:"); + window.terminal.print(" goto google.com"); + window.terminal.print(" goto https://github.com"); + return; + } + + const url = args[0]; + window.terminal.printInfo(`Navigating to ${url}...`); + + setTimeout(() => { + window.location.href = url.startsWith("http") ? url : `https://${url}`; + }, 500); +}); + +// Open in new tab command +window.terminal.registerCommand("open", "Open URL in new tab", (args) => { + if (args.length === 0) { + window.terminal.printError("Usage: open "); + window.terminal.print("Examples:"); + window.terminal.print(" open google.com"); + window.terminal.print(" open https://github.com"); + return; + } + + const url = args[0]; + window.terminal.printInfo(`Opening ${url} in new tab...`); + + const fullUrl = url.startsWith("http") ? url : `https://${url}`; + window.open(fullUrl, "_blank"); +}); + +// Reload page command +window.terminal.registerCommand("reload", "Reload the current page", () => { + window.terminal.printInfo("Reloading page..."); + setTimeout(() => { + window.location.reload(); + }, 500); +}); + +// PAGE NAVIGATION + +// About command +window.terminal.registerCommand("about", "About this site", () => { + window.location.href = "/about/"; +}); diff --git a/assets/js/commands/utility.js b/assets/js/commands/utility.js new file mode 100644 index 0000000..dd00f0a --- /dev/null +++ b/assets/js/commands/utility.js @@ -0,0 +1,97 @@ +// Utility Commands Module +// Useful utility commands + +// Time command +window.terminal.registerCommand("time", "Display current time", () => { + const now = new Date(); + window.terminal.print(`Current time: ${now.toLocaleString()}`); +}); + +// Calculator command +window.terminal.registerCommand("calc", "Simple calculator", (args) => { + if (args.length === 0) { + window.terminal.printError("Usage: calc "); + window.terminal.print("Example: calc 5 + 3"); + return; + } + + try { + const expression = args.join(" "); + // Note: eval is dangerous in production! This is just for demo purposes + const result = eval(expression); + window.terminal.printSuccess(`Result: ${result}`); + } catch (error) { + window.terminal.printError("Invalid expression"); + } +}); + +// Demo command +// window.terminal.registerCommand("demo", "Show demo content", () => { +// window.terminal.printSuccess("=== Demo Content ==="); +// window.terminal.print(""); +// window.terminal.print("This is regular text"); +// window.terminal.printInfo("This is info text"); +// window.terminal.printWarning("This is warning text"); +// window.terminal.printError("This is error text"); +// window.terminal.print(""); +// window.terminal.printHTML( +// 'You can also use HTML with links!', +// ); +// }); + +// ASCII art command +// window.terminal.registerCommand("ascii", "Display ASCII art", () => { +// const art = ` +// _____ _ _ +// |_ _|__ _ __ _ __ ___ (_)_ __ __ _| | +// | |/ _ \\ '__| '_ \` _ \\| | '_ \\ / _\` | | +// | | __/ | | | | | | | | | | | (_| | | +// |_|\\___|_| |_| |_| |_|_|_| |_|\\__,_|_| +// `; +// window.terminal.print(art, "success"); +// }); + +// ASCII art command +window.terminal.registerCommand("nerv", "Display NERV logo", () => { + const art = ` + # ## %*### + #****************** + #******************* + ******************** + %* ************************** + *** #***************************** + ** *******************************% + *# ********************************* + %* %************************************ + ****************************************** + ************************************* + **********************# ******#* + *** *% %** %********************** + *%**# * ** #************************* + * *** * ** ************************* + * %**# * **#####*************************# + * *** * ** * %**********************% + * %**#* ** #********************* + * *** ** %% ********************# + *% %* %** ** ******************* + %****************** + #********# #******************* + ** #** ****************** + ** **# *** *************# + ** #** **# ************ + *******# **% %********** + ** %** ** *%#*******# + ** *** #**#* ****** + ** #**% *** ****# + %****% ***% * %*** + #* + + `; + window.terminal.print(art, "success"); +}); + +// Greet command +window.terminal.registerCommand("greet", "Greet the user", (args) => { + const name = args.length > 0 ? args.join(" ") : "User"; + window.terminal.printSuccess(`Hello, ${name}! Welcome to the terminal.`); +}); diff --git a/assets/js/init.js b/assets/js/init.js new file mode 100644 index 0000000..856ce56 --- /dev/null +++ b/assets/js/init.js @@ -0,0 +1,16 @@ +// Terminal Initialization Script +// This script creates the terminal instance immediately +// so command modules can register commands + +// Create global terminal instance immediately +window.terminal = new TerminalShell(); + +// Boot the terminal when DOM is ready +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", () => { + terminal.boot(); + }); +} else { + // DOM already loaded + terminal.boot(); +} diff --git a/assets/js/lavalamp.js b/assets/js/lavalamp.js new file mode 100644 index 0000000..8781e82 --- /dev/null +++ b/assets/js/lavalamp.js @@ -0,0 +1,70 @@ +(function () { + const lavaLamp = document.getElementById("lavaLamp"); + let blobs = []; + let baseSpeed = 0.8; + + function createBlob() { + const blob = document.createElement("div"); + blob.className = "blob"; + const size = Math.random() * 30 + 20; // Smaller blobs (20-50px) + const startY = Math.random() * 100; // Within ~150px height + const duration = (Math.random() * 8 + 12) / baseSpeed; + const maxX = 60 - size; // Adjusted for narrower tube (80px wide) + const startX = Math.random() * maxX; + + blob.style.width = `${size}px`; + blob.style.height = `${size}px`; + blob.style.left = `${startX}px`; + blob.style.setProperty("--duration", `${duration}s`); + blob.style.setProperty("--start-x", "0px"); + blob.style.setProperty("--start-y", `${startY}px`); + blob.style.setProperty("--mid1-x", `${Math.random() * 15 - 15}px`); + blob.style.setProperty("--mid1-y", `${Math.random() * -40 - 40}px`); + blob.style.setProperty("--mid2-x", `${Math.random() * 20 - 20}px`); + blob.style.setProperty("--mid2-y", `${Math.random() * -80 - 40}px`); + blob.style.setProperty("--mid3-x", `${Math.random() * 15 - 15}px`); + blob.style.setProperty("--mid3-y", `${Math.random() * -60 - 10}px`); + blob.style.setProperty("--scale1", (Math.random() * 0.3 + 1.0).toFixed(2)); + blob.style.setProperty("--scale2", (Math.random() * 0.3 + 0.85).toFixed(2)); + blob.style.setProperty("--scale3", (Math.random() * 0.3 + 0.95).toFixed(2)); + blob.style.animationDelay = `${Math.random() * -20}s`; + + return blob; + } + + function updateBlobColors() { + const color1 = "#FF7800"; + const color2 = "#E01B24"; + const gradient = `radial-gradient(circle at 30% 30%, ${color1}, ${color2})`; + blobs.forEach((blob) => { + blob.style.background = gradient; + }); + } + + function updateLampBackground() { + const bg1 = "#F8E45C"; + const bg2 = "#FF7800"; + lavaLamp.style.background = `linear-gradient(180deg, ${bg1} 0%, ${bg2} 100%)`; + } + + function updateBlobCount() { + const count = parseInt(6); + while (blobs.length > count) { + const blob = blobs.pop(); + lavaLamp.removeChild(blob); + } + while (blobs.length < count) { + const blob = createBlob(); + blobs.push(blob); + lavaLamp.appendChild(blob); + updateBlobColors(); + } + } + + function init() { + updateBlobCount(); + updateLampBackground(); + } + + init(); +})(); diff --git a/assets/js/terminal.js b/assets/js/terminal.js new file mode 100644 index 0000000..45ff5e8 --- /dev/null +++ b/assets/js/terminal.js @@ -0,0 +1,190 @@ +// Terminal Shell System +class TerminalShell { + constructor() { + this.output = document.getElementById("output"); + this.input = document.getElementById("input"); + this.inputContainer = document.getElementById("input-container"); + this.history = []; + this.historyIndex = -1; + this.commands = {}; + + this.setupEventListeners(); + } + + // Boot sequence + async boot() { + const bootMessages = [ + " _ _ _____ ______ __", + " | \\ | | ____| _ \\ \\ / /", + " | \\| | _| | |_) \\ \\ / / ", + " | |\\ | |___| _ < \\ V / ", + " |_| \\_|_____|_| \\_\\ \\_/ ", + "", + "NERV OS v2.015 - MAGI System Interface", + "Initializing A.T. Field protocols...", + "CASPER... ONLINE", + "BALTHASAR... ONLINE", + "MELCHIOR... ONLINE", + "Synchronization ratio: 41.3%... 67.8%... 89.2%... OK", + "Loading Evangelion Unit-01 core drivers... OK", + "Mounting LCL interface... OK", + "Neural connection established... OK", + "", + "Running pattern analysis... PATTERN BLUE", + "", + "All systems optimal.", + "", + "", + ]; + for (let i = 0; i < bootMessages.length; i++) { + await this.sleep(100); + const line = document.createElement("div"); + line.className = "output-line boot-line"; + line.textContent = bootMessages[i]; + line.style.animationDelay = "0s"; + this.output.appendChild(line); + this.scrollToBottom(); + } + + this.printHTML( + 'Type "help" for available commands.', + ); + + this.printHTML( + 'This site is under contstruction. There\'s nothing of interest here yet.', + ); + + this.inputContainer.classList.remove("hidden"); + this.input.focus(); + } + + // Utility function for delays + sleep(ms) { + return new Promise((resolve) => setTimeout(resolve, ms)); + } + + // Setup event listeners + setupEventListeners() { + this.input.addEventListener("keydown", (e) => { + if (e.key === "Enter") { + e.preventDefault(); + this.executeCommand(this.input.value.trim()); + this.input.value = ""; + } else if (e.key === "ArrowUp") { + e.preventDefault(); + this.navigateHistory("up"); + } else if (e.key === "ArrowDown") { + e.preventDefault(); + this.navigateHistory("down"); + } + }); + + // Keep input focused + document.addEventListener("click", () => { + this.input.focus(); + }); + } + + // Command history navigation + navigateHistory(direction) { + if (this.history.length === 0) return; + + if (direction === "up") { + if (this.historyIndex < this.history.length - 1) { + this.historyIndex++; + this.input.value = this.history[this.historyIndex]; + } + } else if (direction === "down") { + if (this.historyIndex > 0) { + this.historyIndex--; + this.input.value = this.history[this.historyIndex]; + } else { + this.historyIndex = -1; + this.input.value = ""; + } + } + } + + // Execute command + executeCommand(commandString) { + if (!commandString) return; + + // Echo the command + this.print(`> ${commandString}`); + + // Add to history + this.history.unshift(commandString); + this.historyIndex = -1; + + // Parse command and arguments + const parts = commandString.split(" "); + const command = parts[0].toLowerCase(); + const args = parts.slice(1); + + // Execute command + if (this.commands[command]) { + try { + this.commands[command](args); + } catch (error) { + this.printError(`Error executing command: ${error.message}`); + } + } else { + this.printError(`Command not found: ${command}`); + } + + this.scrollToBottom(); + } + + // Register a new command + registerCommand(name, description, callback) { + this.commands[name.toLowerCase()] = callback; + this.commands[name.toLowerCase()].description = description; + } + + // Print methods + print(text, className = "") { + const line = document.createElement("div"); + line.className = `output-line ${className}`; + + if (typeof text === "string") { + line.textContent = text; + } else { + line.appendChild(text); + } + + this.output.appendChild(line); + } + + printHTML(html, className = "") { + const line = document.createElement("div"); + line.className = `output-line ${className}`; + line.innerHTML = html; + this.output.appendChild(line); + } + + printError(text) { + this.print(text, "error"); + } + + printSuccess(text) { + this.print(text, "success"); + } + + printInfo(text) { + this.print(text, "info"); + } + + printWarning(text) { + this.print(text, "warning"); + } + + scrollToBottom() { + this.output.parentElement.scrollTop = + this.output.parentElement.scrollHeight; + } + + // Clear the terminal + clear() { + this.output.innerHTML = ""; + } +} diff --git a/assets/sass/_normalize.scss b/assets/sass/_normalize.scss new file mode 100644 index 0000000..ba0a4cf --- /dev/null +++ b/assets/sass/_normalize.scss @@ -0,0 +1,255 @@ +/*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */ + +/* Document + ========================================================================== */ + +/** + * Use a better box model (opinionated). + */ + + html { + box-sizing: border-box; + } + + * { + box-sizing: inherit; + &::before, &::after { + box-sizing: inherit; + } + } + + /** + * Use a more readable tab size (opinionated). + */ + + :root { + -moz-tab-size: 4; + tab-size: 4; + } + + /** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + } + + /** + * Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) + */ + + /* Grouping content + ========================================================================== */ + + /** + * Add the correct height in Firefox. + */ + + hr { + height: 0; + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Add the correct text decoration in Chrome, Edge, and Safari. + */ + + abbr[title] { + text-decoration: underline dotted; + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, strong { + font-weight: bolder; + } + + /** + * 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, kbd, samp, pre { + font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in all browsers. + */ + + sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, input, optgroup, select, textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ + } + + /** + * Remove the inheritance of text transform in Edge and Firefox. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, select { + /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, [type='button'], [type='reset'], [type='submit'] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. + */ + + legend { + padding: 0; + } + + /** + * Add the correct vertical alignment in Chrome and Firefox. + */ + + progress { + vertical-align: baseline; + } + + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + + [type='number'] { + &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { + height: auto; + } + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ + &::-webkit-search-decoration { + -webkit-appearance: none; + } + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Chrome and Safari. + */ + + summary { + display: list-item; + } \ No newline at end of file diff --git a/assets/sass/partials/_global-styles.scss b/assets/sass/partials/_global-styles.scss new file mode 100644 index 0000000..dda5538 --- /dev/null +++ b/assets/sass/partials/_global-styles.scss @@ -0,0 +1,23 @@ +footer[role="contentinfo"] { + position: absolute; + bottom: 0; + right: 0; + z-index: 10000; + background: #000; // or whatever color you want + color: #0f0; // match your terminal green theme + padding: 5px; + text-align: center; + font-family: monospace; + border-top: 1px solid #0f0; + border-left: 1px solid #0f0; + border-top-left-radius: 5px; + + a { + color: #0f0; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} diff --git a/assets/sass/partials/_lavalamp.scss b/assets/sass/partials/_lavalamp.scss new file mode 100644 index 0000000..5dc916b --- /dev/null +++ b/assets/sass/partials/_lavalamp.scss @@ -0,0 +1,122 @@ +.lava-lamp-container { + position: absolute; + bottom: 20%; + left: 20%; + width: 80px; + height: 150px; + display: flex; + flex-direction: column; + align-items: center; + z-index: 999; +} + +.lamp-cap { + width: 60%; + height: 10%; + background: linear-gradient(180deg, #c0c0c0 0%, #888 50%, #666 100%); + border-radius: 60px 60px 0 0; + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.5), + inset 0 2px 4px rgba(255, 255, 255, 0.3); + position: relative; + z-index: 10; +} + +.lava-lamp { + position: relative; + width: 100%; + height: 102%; /*Being above 100% fixes the occasional gap when resizing the page, theoretically */ + background: var(--lamp-bg, linear-gradient(180deg, #2a1a4a 0%, #1a0a3a 100%)); + clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%); + overflow: hidden; + box-shadow: + inset 0 0 60px rgba(0, 0, 0, 0.3), + inset -10px 0 40px rgba(255, 255, 255, 0.1), + inset 10px 0 40px rgba(0, 0, 0, 0.2); + filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5)); +} + +.lava-lamp::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 90deg, + transparent 0%, + rgba(255, 255, 255, 0.15) 20%, + rgba(255, 255, 255, 0.05) 40%, + transparent 60% + ); + pointer-events: none; +} + +.lamp-base { + width: 100%; + height: 20%; + background: linear-gradient(180deg, #888 0%, #555 40%, #333 100%); + border-radius: 0 0 40px 40px / 0 0 60px 60px; + box-shadow: + 0 10px 30px rgba(0, 0, 0, 0.6), + inset 0 5px 10px rgba(255, 255, 255, 0.2), + inset 0 -5px 10px rgba(0, 0, 0, 0.5); + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + +.blob { + position: absolute; + border-radius: 50%; + background: var( + --blob-color, + radial-gradient(circle at 30% 30%, #ff6b9d, #c44569) + ); + filter: url(#goo); + animation: float var(--duration) ease-in-out infinite; + opacity: 0.95; + mix-blend-mode: normal; + z-index: 3; +} + +@keyframes float { + 0%, + 100% { + transform: translate(var(--start-x), var(--start-y)) scale(1); + } + 25% { + transform: translate(var(--mid1-x), var(--mid1-y)) scale(var(--scale1, 1.1)); + } + 50% { + transform: translate(var(--mid2-x), var(--mid2-y)) scale(var(--scale2, 0.9)); + } + 75% { + transform: translate(var(--mid3-x), var(--mid3-y)) + scale(var(--scale3, 1.05)); + } +} + +.lamp-text { + 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: 1; + letter-spacing: 2px; +} + +.lava-lamp:hover .lamp-text { + color: rgba(224, 27, 36, 0.7); +} + +.lava-lamp:hover { + cursor: pointer; +} diff --git a/assets/sass/partials/_now-playing.scss b/assets/sass/partials/_now-playing.scss new file mode 100644 index 0000000..c6b3d57 --- /dev/null +++ b/assets/sass/partials/_now-playing.scss @@ -0,0 +1,28 @@ +.nowplayingcard { + margin: auto; +} + +.nowplayingcontainer-inner { + transition: 0.3s; + display: inline-flex; + + .trackInfo { + width: 100%; + } + + #album { + display: none; + } +} + +img#trackart { + transition: 0.3s; + width: 100%; + height: 100%; + object-fit: cover; + filter: grayscale(60%); +} + +img#trackart[src=""] { + display: none; +} diff --git a/assets/sass/partials/_terminal.scss b/assets/sass/partials/_terminal.scss new file mode 100644 index 0000000..45182b8 --- /dev/null +++ b/assets/sass/partials/_terminal.scss @@ -0,0 +1,99 @@ +#terminal { + padding: 3px; + height: 100vh; + width: 100%; + overflow-y: auto; + overflow-x: hidden; +} + +.output-line { + margin: 2px 0; + white-space: pre-wrap; + word-wrap: break-word; +} + +.boot-line { + opacity: 0; + animation: fadeIn 0.1s forwards; +} + +@keyframes fadeIn { + to { + opacity: 1; + } +} + +.input-line { + display: flex; + align-items: center; + margin-top: 10px; +} + +.prompt { + color: #00ff00; + margin-right: 8px; +} + +#input { + background: transparent; + border: none; + color: #00ff00; + font-family: monospace; + font-size: 12px; + outline: none; + flex: 1; + caret-color: #00ff00; +} + +.cursor { + display: inline-block; + width: 8px; + height: 18px; + background: #00ff00; + animation: blink 1s infinite; + margin-left: 2px; +} + +@keyframes blink { + 0%, + 49% { + opacity: 1; + } + 50%, + 100% { + opacity: 0; + } +} + +.error { + color: #ff4444; +} + +.success { + color: #44ff44; +} + +.info { + color: #00ffff; +} + +.warning { + color: #ff9900; +} + +#terminal::-webkit-scrollbar { + width: 10px; +} + +#terminal::-webkit-scrollbar-track { + background: #1a1a1a; +} + +#terminal::-webkit-scrollbar-thumb { + background: #00ff00; + border-radius: 5px; +} + +.hidden { + display: none; +} diff --git a/assets/sass/partials/_vu-meter.scss b/assets/sass/partials/_vu-meter.scss new file mode 100644 index 0000000..dc38d14 --- /dev/null +++ b/assets/sass/partials/_vu-meter.scss @@ -0,0 +1,191 @@ +/* VU Meter on desk */ +.vu-meter { + position: absolute; + bottom: 18%; + right: 30%; + width: 120px; + height: 60px; + z-index: 8; +} + +.vu-meter-body { + width: 100%; + height: 100%; + background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%); + border: 2px solid #333; + border-radius: 4px; + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.7), + inset 0 2px 4px rgba(255, 255, 255, 0.1), + inset 0 -2px 4px rgba(0, 0, 0, 0.3); + padding: 8px; + display: flex; + flex-direction: column; + gap: 6px; +} + +.vu-meter-screen { + flex: 1; + background: #0a0a0a; + border-radius: 2px; + padding: 6px 4px; + position: relative; + overflow: hidden; + box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8); +} + +.vu-bars { + display: flex; + align-items: flex-end; + justify-content: space-around; + height: 100%; + gap: 2px; +} + +.vu-bar { + flex: 1; + background: linear-gradient( + to top, + #0f0 0%, + #0f0 60%, + #ff0 60%, + #ff0 85%, + #f00 85%, + #f00 100% + ); + border-radius: 1px; + box-shadow: + 0 0 4px rgba(0, 255, 0, 0.6), + inset 0 0 2px rgba(255, 255, 255, 0.2); + animation: vu-bounce 1.5s ease-in-out infinite; + animation-delay: var(--delay); + height: var(--height); + min-height: 10%; +} + +@keyframes vu-bounce { + 0%, + 100% { + height: var(--height); + filter: brightness(1); + } + 25% { + height: calc(var(--height) * 0.6); + filter: brightness(0.8); + } + 50% { + height: calc(var(--height) * 1.2); + filter: brightness(1.2); + } + 75% { + height: calc(var(--height) * 0.8); + filter: brightness(0.9); + } +} + +/* Peak indicator line */ +.vu-peak-line { + position: absolute; + top: 15%; + left: 4px; + right: 4px; + height: 1px; + background: #f00; + opacity: 0.6; + box-shadow: 0 0 3px #f00; + animation: peak-pulse 2s ease-in-out infinite; +} + +@keyframes peak-pulse { + 0%, + 100% { + opacity: 0.6; + top: 15%; + } + 50% { + opacity: 0.3; + top: 25%; + } +} + +/* LED indicators */ +.vu-leds { + display: flex; + justify-content: center; + gap: 8px; +} + +.vu-led { + width: 5px; + height: 5px; + border-radius: 50%; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); +} + +.vu-led.green { + background: #0f0; + box-shadow: + 0 0 6px #0f0, + inset 0 1px 2px rgba(0, 0, 0, 0.5); + animation: led-blink-green 2s ease-in-out infinite; +} + +.vu-led.yellow { + background: #880; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); + animation: led-blink-yellow 2s ease-in-out infinite; +} + +.vu-led.red { + background: #400; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); + animation: led-blink-red 2s ease-in-out infinite; +} + +@keyframes led-blink-green { + 0%, + 100% { + background: #0f0; + box-shadow: + 0 0 6px #0f0, + inset 0 1px 2px rgba(0, 0, 0, 0.5); + } + 50% { + background: #0a0; + box-shadow: + 0 0 3px #0a0, + inset 0 1px 2px rgba(0, 0, 0, 0.5); + } +} + +@keyframes led-blink-yellow { + 0%, + 40%, + 100% { + background: #880; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); + } + 50%, + 60% { + background: #ff0; + box-shadow: + 0 0 6px #ff0, + inset 0 1px 2px rgba(0, 0, 0, 0.5); + } +} + +@keyframes led-blink-red { + 0%, + 85%, + 100% { + background: #400; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); + } + 90%, + 95% { + background: #f00; + box-shadow: + 0 0 6px #f00, + inset 0 1px 2px rgba(0, 0, 0, 0.5); + } +} diff --git a/assets/sass/style.scss b/assets/sass/style.scss new file mode 100644 index 0000000..36a09fc --- /dev/null +++ b/assets/sass/style.scss @@ -0,0 +1,1762 @@ +@import "partials/global-styles"; + +@import "partials/vu-meter"; +@import "partials/terminal"; +@import "partials/now-playing"; +@import "partials/lavalamp"; + +@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100%; + height: 100vh; + overflow: hidden; + font-family: "Courier New", monospace; + background: #1a1a1a; + position: relative; +} + +@keyframes flicker { + 0% { + opacity: 0.27861; + } + 5% { + opacity: 0.34769; + } + 10% { + opacity: 0.23604; + } + 15% { + opacity: 0.90626; + } + 20% { + opacity: 0.18128; + } + 25% { + opacity: 0.83891; + } + 30% { + opacity: 0.65583; + } + 35% { + opacity: 0.67807; + } + 40% { + opacity: 0.26559; + } + 45% { + opacity: 0.84693; + } + 50% { + opacity: 0.96019; + } + 55% { + opacity: 0.08594; + } + 60% { + opacity: 0.20313; + } + 65% { + opacity: 0.71988; + } + 70% { + opacity: 0.53455; + } + 75% { + opacity: 0.37288; + } + 80% { + opacity: 0.71428; + } + 85% { + opacity: 0.70419; + } + 90% { + opacity: 0.7003; + } + 95% { + opacity: 0.36108; + } + 100% { + opacity: 0.24387; + } +} +@keyframes textShadow { + 0% { + text-shadow: + 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5), + -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 5% { + text-shadow: + 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5), + -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 10% { + text-shadow: + 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5), + -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 15% { + text-shadow: + 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5), + -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 20% { + text-shadow: + 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5), + -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 25% { + text-shadow: + 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5), + -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 30% { + text-shadow: + 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5), + -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 35% { + text-shadow: + 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5), + -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 40% { + text-shadow: + 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5), + -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 45% { + text-shadow: + 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5), + -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 50% { + text-shadow: + 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5), + -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 55% { + text-shadow: + 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5), + -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 60% { + text-shadow: + 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5), + -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 65% { + text-shadow: + 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5), + -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 70% { + text-shadow: + 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5), + -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 75% { + text-shadow: + 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5), + -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 80% { + text-shadow: + 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5), + -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 85% { + text-shadow: + 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5), + -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 90% { + text-shadow: + 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5), + -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 95% { + text-shadow: + 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5), + -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } + 100% { + text-shadow: + 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5), + -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), + 0 0 3px; + } +} +.crt::after { + content: " "; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: rgba(18, 16, 16, 0.1); + opacity: 0; + z-index: 2; + pointer-events: none; + animation: flicker 0.15s infinite; +} +.crt::before { + content: " "; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: + linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), + linear-gradient( + 90deg, + rgba(255, 0, 0, 0.06), + rgba(0, 255, 0, 0.02), + rgba(0, 0, 255, 0.06) + ); + z-index: 2; + background-size: + 100% 2px, + 3px 100%; + pointer-events: none; +} +.crt { + animation: textShadow 1.6s infinite; + background: black; + color: greenyellow; + font-family: monospace; +} + +/* Brick wall background */ +.wall { + position: absolute; + width: 100%; + height: 100%; + background: + linear-gradient( + 90deg, + transparent 0%, + transparent 49%, + #0a0a0a 49%, + #0a0a0a 51%, + transparent 51% + ), + linear-gradient( + 0deg, + transparent 0%, + transparent 49%, + #0a0a0a 49%, + #0a0a0a 51%, + transparent 51% + ); + background-size: 120px 60px; + background-position: + 0 0, + 60px 30px; +} + +.wall::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background: + repeating-linear-gradient( + 0deg, + #0f0a06 0px, + #1a110a 30px, + #0f0a06 30px, + #0f0a06 60px + ), + /* Dirt and grime texture */ + radial-gradient( + ellipse at 15% 20%, + rgba(20, 15, 10, 0.4) 0%, + transparent 30% + ), + radial-gradient( + ellipse at 85% 40%, + rgba(15, 10, 5, 0.5) 0%, + transparent 25% + ), + radial-gradient( + ellipse at 40% 80%, + rgba(25, 15, 10, 0.3) 0%, + transparent 35% + ), + radial-gradient( + ellipse at 70% 60%, + rgba(10, 8, 5, 0.6) 0%, + transparent 20% + ), + /* Stains and discoloration */ + radial-gradient( + circle at 25% 50%, + rgba(40, 25, 15, 0.2) 0%, + transparent 40% + ), + radial-gradient( + circle at 60% 30%, + rgba(35, 20, 10, 0.3) 0%, + transparent 30% + ), + radial-gradient( + circle at 90% 70%, + rgba(30, 18, 10, 0.25) 0%, + transparent 35% + ); + opacity: 0.95; +} + +.wall::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background: + /* More aggressive dark patches */ + radial-gradient(circle at 10% 15%, rgba(10, 5, 0, 0.5) 0%, transparent 25%), + radial-gradient(circle at 30% 70%, rgba(15, 8, 2, 0.4) 0%, transparent 30%), + radial-gradient( + circle at 75% 25%, + rgba(12, 6, 0, 0.45) 0%, + transparent 28% + ), + radial-gradient( + circle at 50% 90%, + rgba(18, 10, 3, 0.35) 0%, + transparent 35% + ), + radial-gradient(circle at 95% 50%, rgba(8, 4, 0, 0.5) 0%, transparent 22%), + /* Noise/texture overlay */ + repeating-linear-gradient( + 45deg, + transparent 0px, + rgba(0, 0, 0, 0.03) 1px, + transparent 2px, + transparent 4px + ); +} + +/* Post-it notes and papers on wall */ +.sticky-note { + font-family: "Caveat", cursive; + position: absolute; + width: 40px; + height: 40px; + background: #ffd966; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); + z-index: 2; + font-size: 12px; + padding: 5px; + line-height: 1.2; + text-align: center; +} + +.note1 { + top: 19%; + left: 66%; + transform: rotate(-8deg); +} + +.note2 { + top: 20%; + left: 32%; + transform: rotate(5deg); + background: #ff9999; +} + +.note3 { + top: 12%; + left: 38%; + transform: rotate(-3deg); + background: #99ff99; +} + +.note4 { + top: 43%; + left: 18%; + transform: rotate(12deg); + background: #99ccff; +} + +/* Poster on wall */ +.poster { + position: absolute; + top: 10%; + right: 8%; + width: 200px; + height: 200px; + background: #000; + border: 8px solid #1a1a1a; + box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); + transform: rotate(-2deg); + z-index: 1; +} + +.poster-image { + width: 100%; + height: 100%; + background-size: cover; + background-position: center; + background-image: url('data:image/svg+xml,NOW PLAYING'); + overflow: hidden; +} + +/* Now Playing post-it note */ +.now-playing-note, +.now-playing-artist { + position: absolute; + bottom: 145px; + right: 150px; + width: 60px; + height: 60px; + background: #ffd966; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); + z-index: 2; + transform: rotate(8deg); + font-size: 14px; + font-family: "Caveat", cursive; + padding: 8px; + line-height: 1.3; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-weight: bold; + /* Word wrapping */ + word-wrap: break-word; + overflow-wrap: break-word; + word-break: break-word; + hyphens: auto; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; +} + +.now-playing-artist { + bottom: -15px; + right: -20px; + transform: rotate(-8deg); +} + +/* X-Files "I want to believe" poster */ +.xfiles-poster { + position: absolute; + top: 15%; + left: 7%; + width: 220px; + height: 300px; + background: #000; + border: 10px solid #2a2a2a; + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6); + transform: rotate(1.5deg); + z-index: 1; + overflow: hidden; +} + +.xfiles-content { + width: 100%; + height: 100%; + background: linear-gradient(180deg, #001a33 0%, #000814 100%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 20px; + position: relative; +} + +.ufo-illustration { + width: 140px; + height: 80px; + position: relative; + margin-bottom: 40px; +} + +.ufo-body { + width: 100%; + height: 40px; + background: linear-gradient(180deg, #444 0%, #222 50%, #111 100%); + border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; + position: relative; + box-shadow: 0 -5px 20px rgba(100, 150, 255, 0.6); +} + +.ufo-dome { + width: 50px; + height: 25px; + background: linear-gradient( + 180deg, + rgba(100, 150, 200, 0.4) 0%, + rgba(50, 100, 150, 0.2) 100% + ); + border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%; + position: absolute; + top: -15px; + left: 50%; + transform: translateX(-50%); +} + +.ufo-lights { + position: absolute; + bottom: -5px; + left: 0; + right: 0; + display: flex; + justify-content: space-around; + padding: 0 20px; +} + +.ufo-light { + width: 8px; + height: 8px; + background: #ffeb3b; + border-radius: 50%; + box-shadow: + 0 0 10px #ffeb3b, + 0 0 20px #ffeb3b; + animation: ufo-blink 2s infinite; +} + +.ufo-light:nth-child(2) { + animation-delay: 0.4s; +} + +.ufo-light:nth-child(3) { + animation-delay: 0.8s; +} + +.ufo-light:nth-child(4) { + animation-delay: 1.2s; +} + +@keyframes ufo-blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.3; + } +} + +.light-beam { + position: absolute; + bottom: -40px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 50px; + background: linear-gradient( + 180deg, + rgba(150, 200, 255, 0.4) 0%, + transparent 100% + ); + clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%); + animation: beam-pulse 3s ease-in-out infinite; +} + +@keyframes beam-pulse { + 0%, + 100% { + opacity: 0.6; + } + 50% { + opacity: 0.3; + } +} + +.believe-text { + color: #fff; + font-family: "Courier New", monospace; + font-size: 24px; + font-weight: bold; + text-align: center; + letter-spacing: 2px; + text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + margin-top: 20px; +} + +/* CRT Monitor container */ +.crt-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; +} + +/* CRT Monitor bezel */ +.crt-monitor { + width: 650px; + height: 500px; + background: linear-gradient(145deg, #e8e0c8, #c4b89a); + border-radius: 12px; + padding: 25px 30px 45px 30px; + box-shadow: + 0 30px 60px rgba(0, 0, 0, 0.8), + inset 0 2px 4px rgba(255, 255, 255, 0.3), + inset 0 -2px 4px rgba(0, 0, 0, 0.3); + position: relative; +} + +/* Brand logo on bezel */ +.crt-monitor::before { + content: "ARASAKA"; + position: absolute; + bottom: 15px; + left: 50%; + transform: translateX(-50%); + color: #666; + font-size: 11px; + font-weight: bold; + letter-spacing: 2px; +} + +/* Power indicator LED */ +.crt-monitor::after { + content: ""; + position: absolute; + bottom: 15px; + right: 40px; + width: 8px; + height: 8px; + background: #0f0; + border-radius: 50%; + box-shadow: + 0 0 10px #0f0, + 0 0 20px #0f0; + animation: pulse 2s ease-in-out infinite; +} + +@keyframes pulse { + 0%, + 100% { + opacity: 1; + box-shadow: + 0 0 10px #0f0, + 0 0 20px #0f0; + } + 50% { + opacity: 0.5; + box-shadow: + 0 0 5px #0f0, + 0 0 10px #0f0; + } +} + +/* Monitor stand */ +.monitor-stand { + position: absolute; + bottom: -80px; + left: 50%; + transform: translateX(-50%); + width: 120px; + height: 80px; + z-index: -1; +} + +/* Stand neck */ +.stand-neck { + width: 40px; + height: 50px; + background: linear-gradient(90deg, #b8ac90, #a89978); + margin: 0 auto; + border-radius: 5px; + box-shadow: + inset -2px 0 5px rgba(0, 0, 0, 0.3), + 2px 0 5px rgba(0, 0, 0, 0.2); +} + +/* Stand base */ +.stand-base { + width: 120px; + height: 30px; + background: linear-gradient(180deg, #a89978, #8a7d62); + border-radius: 50% 50% 5px 5px; + box-shadow: + 0 5px 15px rgba(0, 0, 0, 0.4), + inset 0 2px 3px rgba(255, 255, 255, 0.2); + position: relative; + top: 0; +} + +.stand-base::before { + content: ""; + position: absolute; + bottom: 5px; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 2px; + background: rgba(0, 0, 0, 0.3); + border-radius: 50%; +} + +/* CRT Screen */ +.crt-screen { + width: 100%; + height: 100%; + background: #000; + border-radius: 8px; + position: relative; + overflow: hidden; + box-shadow: + inset 0 0 80px rgba(0, 255, 100, 0.1), + 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); +} + +/* Screen curvature/glass emboss effect */ +.crt-screen::before { + content: ""; + position: absolute; + top: -5%; + left: -5%; + right: -5%; + bottom: -5%; + background: + radial-gradient( + ellipse at 30% 30%, + rgba(255, 255, 255, 0.15) 0%, + transparent 40% + ), + radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%); + pointer-events: none; + z-index: 3; + border-radius: 8px; +} + +/* Scanlines */ +.crt-screen::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: repeating-linear-gradient( + 0deg, + rgba(0, 0, 0, 0.15) 0px, + rgba(0, 0, 0, 0.15) 1px, + transparent 1px, + transparent 2px + ); + pointer-events: none; + z-index: 2; + animation: scanline 8s linear infinite; +} + +@keyframes scanline { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(10px); + } +} + +/* Screen flicker */ +.crt-flicker { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 255, 100, 0.02); + animation: flicker 0.15s infinite; + pointer-events: none; + z-index: 4; +} + +@keyframes flicker { + 0% { + opacity: 0.98; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0.97; + } +} + +/* Content area */ +.content { + position: relative; + width: 100%; + height: 100%; + padding: 3px; + color: #0f0; + z-index: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-shadow: 0 0 10px rgba(0, 255, 0, 0.8); +} + +.content h1 { + font-size: 2.5rem; + margin-bottom: 1rem; + animation: textGlow 1.5s ease-in-out infinite alternate; +} + +.content p { + font-size: 1.2rem; + margin-bottom: 0.5rem; + line-height: 1.6; + max-width: 500px; + text-align: center; +} + +@keyframes textGlow { + from { + text-shadow: 0 0 10px rgba(0, 255, 0, 0.8); + } + to { + text-shadow: + 0 0 20px rgba(0, 255, 0, 1), + 0 0 30px rgba(0, 255, 0, 0.6); + } +} + +/* Desk */ +.desk { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 25%; + background: + /* Wear and tear patterns */ + radial-gradient( + ellipse at 30% 40%, + rgba(20, 15, 10, 0.3) 0%, + transparent 30% + ), + radial-gradient( + ellipse at 70% 60%, + rgba(15, 10, 5, 0.4) 0%, + transparent 25% + ), + radial-gradient( + ellipse at 50% 20%, + rgba(25, 18, 10, 0.2) 0%, + transparent 40% + ), + /* Coffee stains */ + radial-gradient( + circle at 20% 50%, + rgba(40, 25, 10, 0.6) 0%, + rgba(30, 20, 8, 0.3) 5%, + transparent 8% + ), + radial-gradient( + circle at 65% 30%, + rgba(35, 22, 8, 0.5) 0%, + rgba(25, 15, 5, 0.2) 4%, + transparent 7% + ), + /* Scratches and marks */ + linear-gradient( + 92deg, + transparent 45%, + rgba(50, 40, 30, 0.1) 49%, + transparent 51% + ), + linear-gradient( + 88deg, + transparent 60%, + rgba(40, 30, 20, 0.15) 62%, + transparent 64% + ), + linear-gradient( + 94deg, + transparent 25%, + rgba(45, 35, 25, 0.12) 27%, + transparent 29% + ), + /* Base wood color */ linear-gradient(180deg, #2d1f12 0%, #1d1208 100%); + box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5); + z-index: 5; +} + +.desk::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, #1d1208, #0d0804, #1d1208); +} + +.desk::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background: + /* Dust and grime texture */ repeating-linear-gradient( + 60deg, + transparent 0px, + rgba(0, 0, 0, 0.02) 1px, + transparent 2px, + transparent 5px + ); + pointer-events: none; +} + +/* Cables on desk - now using SVG for curves */ +.desk-cables { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 7; +} + +/* Better curved cables using SVG paths */ +.cable-svg { + position: absolute; + bottom: 20%; + z-index: 4; + pointer-events: none; +} + +.cable-svg svg { + filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5)); +} + +/* Secondary monitors on desk */ +/* Secondary CRT monitors - positioned relative to main monitor */ +.secondary-screen { + position: absolute; + border-radius: 8px; + z-index: 6; + padding: 8px 10px 20px 10px; +} + +/* Wall-mounted CRT 1 - upper left relative to main */ +.wall-monitor-1 { + top: 3%; + left: -34%; + width: 200px; + height: 200px; + background: linear-gradient(145deg, #c8c8c0, #a8a898); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.7), + inset 0 2px 4px rgba(255, 255, 255, 0.3), + inset 0 -2px 4px rgba(0, 0, 0, 0.3); + padding: 5px 7px 15px 7px; +} + +.wall-monitor-1::after { + content: ""; + position: absolute; + bottom: 4px; + right: 7px; + width: 4px; + height: 4px; + background: #0f0; + border-radius: 50%; + box-shadow: 0 0 6px #0f0; + animation: pulse 2s ease-in-out infinite; +} + +/* Wall-mounted CRT 2 - upper right, larger, closely stacked */ +.wall-monitor-2 { + top: 4%; + right: -50%; + width: 300px; + height: 245px; + background: linear-gradient(145deg, #b8b8b0, #989888); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.7), + inset 0 2px 4px rgba(255, 255, 255, 0.3), + inset 0 -2px 4px rgba(0, 0, 0, 0.3); + padding: 6px 8px 18px 8px; + transform: rotate(-1deg); +} + +.wall-monitor-2::after { + content: ""; + position: absolute; + bottom: 5px; + right: 8px; + width: 5px; + height: 5px; + background: #0ff; + border-radius: 50%; + box-shadow: 0 0 6px #0ff; + animation: pulse 1.8s ease-in-out infinite; +} + +/* Wall-mounted CRT 3 - lower right, larger, closely aligned to monitor 2 */ +.wall-monitor-3 { + top: 57%; + right: -33%; + width: 195px; + height: 140px; + background: linear-gradient(145deg, #d8d0b8, #b8b098); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.7), + inset 0 2px 4px rgba(255, 255, 255, 0.3), + inset 0 -2px 4px rgba(0, 0, 0, 0.3); + padding: 6px 8px 18px 8px; + transform: rotate(1deg); +} + +.wall-monitor-3::after { + content: ""; + position: absolute; + bottom: 5px; + right: 8px; + width: 5px; + height: 5px; + background: #f00; + border-radius: 50%; + box-shadow: 0 0 6px #f00; + animation: pulse 2.3s ease-in-out infinite; +} + +/* Wall-mounted CRT 4 - lower left relative to main */ +.wall-monitor-4 { + top: 50%; + left: -53%; + width: 300px; + height: 225px; + background: linear-gradient(145deg, #a8a898, #888878); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.7), + inset 0 2px 4px rgba(255, 255, 255, 0.3), + inset 0 -2px 4px rgba(0, 0, 0, 0.3); + padding: 5px 7px 15px 7px; + transform: rotate(-1deg); +} + +.wall-monitor-4::after { + content: ""; + position: absolute; + bottom: 4px; + right: 7px; + width: 4px; + height: 4px; + background: #fa0; + border-radius: 50%; + box-shadow: 0 0 6px #fa0; + animation: pulse 2.1s ease-in-out infinite; +} + +/* Desk-mounted CRT - on desk left side */ +.desk-monitor { + bottom: 10%; + left: 6%; + width: 200px; + height: 145px; + background: linear-gradient(145deg, #d8d0b8, #b8b098); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.7), + inset 0 2px 4px rgba(255, 255, 255, 0.3), + inset 0 -2px 4px rgba(0, 0, 0, 0.3); +} + +.desk-monitor::after { + content: ""; + position: absolute; + bottom: 6px; + right: 10px; + width: 5px; + height: 5px; + background: #0f0; + border-radius: 50%; + box-shadow: 0 0 8px #0f0; + animation: pulse 2.5s ease-in-out infinite; +} + +/* Equipment stacks */ +.equipment-stack { + position: absolute; + z-index: 2; +} + +/* LED indicators on equipment */ +.led-indicator { + position: absolute; + width: 3px; + height: 3px; + border-radius: 50%; + box-shadow: 0 0 4px currentColor; +} + +.led-green { + background: #0f0; + color: #0f0; + top: 50%; + right: 5px; + animation: pulse 1.5s ease-in-out infinite; +} + +.led-red { + background: #f00; + color: #f00; + top: 50%; + right: 12px; + animation: pulse 2s ease-in-out infinite; +} + +/* Small equipment on desk */ +.desk-equipment { + position: absolute; + bottom: 10%; + background: linear-gradient(145deg, #4a4a4a 0%, #2a2a2a 100%); + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6); + z-index: 8; +} + +.modem { + right: 25%; + width: 35px; + height: 12px; +} + +.modem::after { + content: ""; + position: absolute; + top: 50%; + right: 5px; + transform: translateY(-50%); + width: 2px; + height: 2px; + background: #0f0; + border-radius: 50%; + box-shadow: 0 0 4px #0f0; + animation: pulse 1s ease-in-out infinite; +} + +.power-strip { + left: 35%; + width: 50px; + height: 8px; + background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%); +} + +.power-strip::before { + content: ""; + position: absolute; + top: 50%; + left: 10px; + transform: translateY(-50%); + width: 3px; + height: 3px; + background: #f00; + border-radius: 50%; + box-shadow: 0 0 4px #f00; +} +.monitor-stand-small { + position: absolute; + bottom: -20px; + left: 50%; + transform: translateX(-50%); + width: 60%; + height: 20px; + background: linear-gradient(180deg, #a8a898 0%, #888878 100%); + z-index: 4; + border-radius: 0 0 8px 8px; + box-shadow: + 0 5px 15px rgba(0, 0, 0, 0.6), + inset 0 1px 2px rgba(255, 255, 255, 0.2); +} + +.monitor-stand-small::before { + content: ""; + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); + width: 90%; + height: 8px; + background: linear-gradient(90deg, transparent, #666, transparent); + border-radius: 50%; + opacity: 0.6; +} + +.screen-display { + width: 100%; + height: 100%; + background: #000; + padding: 8px; + font-family: monospace; + font-size: 10px; + color: #0f0; + overflow: hidden; + line-height: 1.3; + border-radius: 6px; + box-shadow: + inset 0 0 40px rgba(0, 255, 100, 0.08), + inset 0 0 20px rgba(0, 255, 100, 0.05), + inset 2px 2px 6px rgba(255, 255, 255, 0.08), + inset -2px -2px 6px rgba(0, 0, 0, 0.4); + position: relative; +} + +.screen-display::after { + content: ""; + position: absolute; + top: -3%; + left: -3%; + right: -3%; + bottom: -3%; + background: + radial-gradient( + ellipse at 25% 25%, + rgba(255, 255, 255, 0.12) 0%, + transparent 35% + ), + radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.25) 100%); + pointer-events: none; + z-index: 2; + border-radius: 6px; +} + +.screen-display::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: repeating-linear-gradient( + 0deg, + rgba(0, 0, 0, 0.15) 0px, + rgba(0, 0, 0, 0.15) 1px, + transparent 1px, + transparent 2px + ); + pointer-events: none; + z-index: 1; +} + +.screen-display.large { + font-size: 10px; + padding: 10px; +} + +.screen-display.tiny { + font-size: 7px; + padding: 5px; + line-height: 1.2; +} + +.screen-display.amber { + color: #ff9900; + background: #0a0600; +} + +.screen-display.amber::after { + background: + radial-gradient( + ellipse at 25% 25%, + rgba(255, 200, 100, 0.12) 0%, + transparent 35% + ), + radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.25) 100%); +} + +.screen-display.cyan { + color: #00ffff; + background: #001a1a; +} + +.screen-display.cyan::after { + background: + radial-gradient( + ellipse at 25% 25%, + rgba(100, 255, 255, 0.12) 0%, + transparent 35% + ), + radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.25) 100%); +} + +/* Scrolling text animation */ +.scroll-text { + animation: scroll-up 5s linear infinite; + display: block; +} + +@keyframes scroll-up { + 0% { + transform: translateY(0px); + } + 100% { + transform: translateY(-200px); + } +} + +/* Blinking cursor effect on screens */ +.cursor-blink { + animation: cursor 1s infinite; +} + +@keyframes cursor { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0; + } +} + +/* Widgets and gadgets */ +.widget { + position: absolute; + bottom: 8%; + border-radius: 2px; + z-index: 6; +} + +.router { + left: 25%; + width: 170px; + height: 50px; + 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); +} + +.router::before { + content: ""; + position: absolute; + top: 50%; + left: 10px; + transform: translateY(-50%); + width: 4px; + height: 4px; + background: #0f0; + border-radius: 50%; + box-shadow: 0 0 5px #0f0; + animation: blink-fast 1s infinite; +} + +.router::after { + content: ""; + position: absolute; + top: 50%; + left: 20px; + transform: translateY(-50%); + width: 4px; + height: 4px; + background: #ff0; + border-radius: 50%; + box-shadow: 0 0 5px #ff0; + animation: blink-fast 1.5s infinite; +} + +@keyframes blink-fast { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.2; + } +} + +.hard-drive { + left: 30%; + bottom: 20%; + width: 55px; + height: 35px; + background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%); + border: 1px solid #444; + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.5), + inset 0 1px 2px rgba(255, 255, 255, 0.1); +} + +.hard-drive::before { + content: ""; + position: absolute; + top: 8px; + right: 8px; + width: 3px; + height: 3px; + background: #f00; + border-radius: 50%; + box-shadow: 0 0 5px #f00; + animation: pulse-slow 2s infinite; +} + +@keyframes pulse-slow { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.3; + } +} + +/* Desk clutter */ +.desk-item { + position: absolute; + z-index: 8; +} + +/* Keyboard */ +.keyboard { + bottom: 9%; + left: 42%; + width: 170px; + height: 55px; + background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%); + border-radius: 3px; + box-shadow: + 0 3px 10px rgba(0, 0, 0, 0.6), + inset 0 1px 2px rgba(255, 255, 255, 0.1); +} + +.keyboard::before { + content: ""; + position: absolute; + top: 8px; + left: 10px; + right: 10px; + bottom: 8px; + background: + repeating-linear-gradient( + 0deg, + #1a1a1a 0px, + #1a1a1a 6px, + transparent 6px, + transparent 8px + ), + repeating-linear-gradient( + 90deg, + #1a1a1a 0px, + #1a1a1a 8px, + transparent 8px, + transparent 10px + ); +} + +/* Mouse */ +.mouse { + bottom: 8.5%; + right: 45%; + width: 25px; + height: 35px; + background: linear-gradient(145deg, #2a2a2a, #1a1a1a); + border-radius: 12px 12px 8px 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); +} + +.mouse::before { + content: ""; + position: absolute; + top: 5px; + left: 50%; + transform: translateX(-50%); + width: 2px; + height: 12px; + background: #111; + border-radius: 1px; +} + +/* Coffee mug */ +.coffee-mug { + bottom: 12%; + left: 75%; + width: 55px; + height: 62px; + background: linear-gradient(180deg, #4a2a1a 0%, #3a1a0a 100%); + border-radius: 15px; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6); +} + +.coffee-mug::before { + content: ""; + position: absolute; + top: 24%; + right: -33%; + width: 28%; + height: 42%; + border: 3px solid #3a1a0a; + border-left: none; + border-radius: 0 12px 12px 0; +} + +.coffee-mug::after { + content: ""; + position: absolute; + top: 8%; + left: 9%; + right: 9%; + height: 23%; + background: radial-gradient(ellipse, #2a1a0a 0%, #1a0a00 100%); + border-radius: 50%; +} + +/* iPod group container - maintains relative positioning */ +.ipod-group { + position: absolute; + bottom: 6%; + right: 34%; + width: 150px; + height: 100px; + z-index: 15; +} + +/* iPod 5th Generation */ +.ipod { + position: absolute; + top: 0; + left: 52px; + width: 45px; + height: 70px; + background: linear-gradient(145deg, #f0f0f0, #d0d0d0); + border-radius: 8px; + box-shadow: + 0 3px 10px rgba(0, 0, 0, 0.6), + inset 0 1px 3px rgba(255, 255, 255, 0.5), + inset 0 -1px 3px rgba(0, 0, 0, 0.2); + transform: rotate(-8deg); + z-index: 2; +} + +.ipod::before { + content: ""; + position: absolute; + top: 8px; + left: 50%; + transform: translateX(-50%); + width: 32px; + height: 22px; + background: linear-gradient(180deg, #1a1a2a 0%, #0a0a1a 100%); + border-radius: 2px; + box-shadow: inset 0 0 5px rgba(0, 100, 150, 0.3); +} + +.ipod-wheel { + position: absolute; + bottom: 8px; + left: 50%; + transform: translateX(-50%); + width: 32px; + height: 30px; + background: radial-gradient( + circle at center, + #fff 0%, + #fff 35%, + #ddd 35%, + #ccc 100% + ); + border-radius: 50%; + box-shadow: + inset 0 1px 2px rgba(0, 0, 0, 0.2), + 0 1px 3px rgba(0, 0, 0, 0.3); +} + +.ipod-wheel::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 12px; + height: 12px; + background: #e8e8e8; + border-radius: 50%; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); +} + +/* Earbuds/IEMs - redesigned to look like in-ear monitors */ +.earbud { + position: absolute; + width: 10px; + height: 12px; + background: linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 50%, #0a0a1a 100%); + border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%; + box-shadow: + 0 2px 4px rgba(0, 0, 0, 0.6), + inset 1px 1px 2px rgba(255, 255, 255, 0.1); + z-index: 3; +} + +/* IEM tips */ +.earbud::after { + content: ""; + position: absolute; + width: 6px; + height: 6px; + background: radial-gradient( + circle, + rgba(200, 200, 200, 0.3), + rgba(100, 100, 100, 0.2) + ); + border-radius: 50%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +/* IEM nozzle/sound bore */ +.earbud::before { + content: ""; + position: absolute; + width: 3px; + height: 5px; + background: linear-gradient(180deg, #444 0%, #222 100%); + border-radius: 2px; + top: 3px; + left: 50%; + transform: translateX(-50%); +} + +.earbud-left { + top: 85px; + left: 0px; + transform: rotate(-25deg); +} + +.earbud-right { + top: 80px; + left: 120px; + transform: rotate(35deg); +} + +/* Cable SVG positioned in container */ +.ipod-cables { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; +} + +/* Purple-blue gradient for cable */ +.ipod-cables defs stop.cable-start { + stop-color: #6b4fb3; +} + +.ipod-cables defs stop.cable-end { + stop-color: #4169e1; +} +/* Import a nice cursive font */ +@import url("https://fonts.googleapis.com/css2?family=Neonderthaw&display=swap"); + +/* Neon sign styling */ +.neon-sign { + position: absolute; + top: 5%; + left: 60%; + transform: translateX(-50%) rotate(-10deg); + z-index: 1; +} + +.neon-text { + font-family: "Neonderthaw", cursive; + font-size: 7rem; + color: #fff; + text-shadow: + /* White core */ + 0 0 5px #fff, + 0 0 5px #fff, + /* Bright green inner glow */ 0 0 21px #0f0, + 0 0 42px #0f0, + 0 0 82px #0f0, + /* Outer green glow */ 0 0 92px #0f0, + 0 0 142px #0f0, + 0 0 181px #0f0; + animation: + neon-flicker 10s infinite alternate, + neon-pulse 3s ease-in-out infinite; +} + +@keyframes neon-pulse { + 0%, + 100% { + text-shadow: + 0 0 7px #fff, + 0 0 10px #fff, + 0 0 21px #0f0, + 0 0 42px #0f0, + 0 0 82px #0f0, + 0 0 92px #0f0, + 0 0 102px #0f0, + 0 0 151px #0f0; + } + 50% { + text-shadow: + 0 0 4px #fff, + 0 0 7px #fff, + 0 0 15px #0f0, + 0 0 30px #0f0, + 0 0 60px #0f0, + 0 0 70px #0f0, + 0 0 80px #0f0, + 0 0 120px #0f0; + } +} + +@keyframes neon-flicker { + 0%, + 19%, + 21%, + 23%, + 25%, + 54%, + 56%, + 100% { + opacity: 1; + } + 20%, + 24%, + 55% { + opacity: 0.4; + } + 22% { + opacity: 0.6; + } +} diff --git a/config.yml b/config.yml index 8843237..d49589d 100644 --- a/config.yml +++ b/config.yml @@ -1,63 +1,31 @@ baseURL: "https://ritual.sh/" title: ritual.sh -paginate: 5 -theme: PaperMod - +theme: "hugo-starter" enableRobotsTXT: true buildDrafts: false buildFuture: false buildExpired: false - -googleAnalytics: UA-123-45 - enableEmoji: true +# Fixed: Changed from 'paginate: 5' to pagination block +pagination: + pagerSize: 5 + minify: disableXML: true minifyOutput: true params: - env: production # to enable google analytics, opengraph, twitter-cards and schema. - title: ritual - description: "Personal website of Dan Baker - Software Engineer" - keywords: [Blog] - author: Me - # author: ["Me", "You"] # multiple authors - images: [""] - DateFormat: "January 2, 2006" - defaultTheme: dark # dark, light - disableThemeToggle: false - - ShowReadingTime: true - ShowShareButtons: false - ShowPostNavLinks: true - ShowBreadCrumbs: false - ShowCodeCopyButtons: false - ShowWordCount: true - ShowRssButtonInSectionTermList: true - UseHugoToc: true - disableSpecial1stPost: false - disableScrollToTop: false - comments: true - hidemeta: false - hideSummary: false - hideAuthor: true - showtoc: false - tocopen: false - - mainSections: - - posts - - gear - + env: production + label: text: "ritual" icon: /images/android-chrome-512x512.png iconImageHeight: 35 iconHeight: 70 - - # profile-mode + profileMode: - enabled: false # needs to be explicitly set + enabled: false title: ExampleSite subtitle: "This is subtitle" imageUrl: "" @@ -69,12 +37,7 @@ params: url: posts - name: Tags url: tags - - # home-info mode - homeInfoParams: - Title: "I’m Dan. I live in the Golden Valley, Herefordshire. I work remotely as a software engineer, team leader, and system architect. " - Content: "I like to talk about engineering, networking, and system design. There’s a higher change I will also talk about many of my other interests – photography, digital minimalism, lego, gaming and game dev, coffee, or the great outdoors." - + socialIcons: - name: instagram url: "https://www.instagram.com/ritualphotos" @@ -85,26 +48,12 @@ params: - name: lastfm url: "https://www.last.fm/user/ritualplays" - analytics: - google: - SiteVerificationTag: "XYZabc" - bing: - SiteVerificationTag: "XYZabc" - yandex: - SiteVerificationTag: "XYZabc" - + cover: - hidden: false # hide everywhere but not in structured data - hiddenInList: true # hide on list pages and home - hiddenInSingle: false # hide on single page - - editPost: - URL: "https://github.com//content" - Text: "Suggest Changes" # edit text - appendFilePath: true # to append file path to Edit link - - # for search - # https://fusejs.io/api/options.html + hidden: false + hiddenInList: true + hiddenInSingle: false + fuseOpts: isCaseSensitive: false shouldSort: true @@ -112,8 +61,9 @@ params: distance: 1000 threshold: 0.4 minMatchCharLength: 0 - limit: 10 # refer: https://www.fusejs.io/api/methods.html#search + limit: 10 keys: ["title", "permalink", "summary", "content"] + menu: main: - identifier: about @@ -132,17 +82,19 @@ menu: name: tags url: /tags/ weight: 20 -# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma + pygmentsUseClasses: true + markup: highlight: noClasses: false - # anchorLineNos: true - # codeFences: true - # guessSyntax: true - # lineNos: true - # style: monokai + # Fixed: Added goldmark renderer to allow raw HTML + goldmark: + renderer: + unsafe: true module: imports: - - path: github.com/hugo-mods/lazyimg + - path: github.com/hugo-mods/lazyimg + + \ No newline at end of file diff --git a/content/posts/2024-01-30-.md b/content/posts/2024-01-30-.md deleted file mode 100644 index a354866..0000000 --- a/content/posts/2024-01-30-.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Finding the right dumb phone for me -author: Dan -type: post -date: -001-11-30T00:00:00+00:00 -draft: true -url: /?p=178 -categories: - - Digital Minimalism - ---- diff --git a/content/posts/2024-02-07-.md b/content/posts/2024-02-07-.md deleted file mode 100644 index d299389..0000000 --- a/content/posts/2024-02-07-.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Going back to an MP3 player in 2024 -author: Dan -type: post -date: -001-11-30T00:00:00+00:00 -draft: true -url: /?p=190 -categories: - - Uncategorised - ---- diff --git a/content/posts/2024-02-08-.md b/content/posts/2024-02-08-.md deleted file mode 100644 index 2cd45a8..0000000 --- a/content/posts/2024-02-08-.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: My Every Day Carry (EDC) – Early 2024 Edition -author: Dan -type: post -date: -001-11-30T00:00:00+00:00 -draft: true -url: /?p=192 -categories: - - Digital Minimalism - - Life -tags: - - edc - - every day carry - - tech - ---- diff --git a/layouts/_default/list.html b/layouts/_default/list.html deleted file mode 100644 index 81aea6e..0000000 --- a/layouts/_default/list.html +++ /dev/null @@ -1,121 +0,0 @@ -{{- define "main" }} - -{{- if (and site.Params.profileMode.enabled .IsHome) }} -{{- partial "index_profile.html" . }} -{{- else }} {{/* if not profileMode */}} - -{{- if not .IsHome | and .Title }} - -{{- end }} - -{{- if .Content }} -
- {{- if not (.Param "disableAnchoredHeadings") }} - {{- partial "anchored_headings.html" .Content -}} - {{- else }}{{ .Content }}{{ end }} -
-{{- end }} - -{{- $pages := union .RegularPages .Sections }} - -{{- if .IsHome }} -{{- $pages = where site.RegularPages "Type" "in" site.Params.mainSections }} -{{- $pages = where $pages "Params.hiddenInHomeList" "!=" "true" }} -{{- end }} - -{{- $paginator := .Paginate $pages }} - -{{- if and .IsHome site.Params.homeInfoParams (eq $paginator.PageNumber 1) }} -{{- partial "home_info.html" . }} -{{- end }} - -{{- $term := .Data.Term }} -{{- range $index, $page := $paginator.Pages }} - -{{- $class := "post-entry" }} - -{{- $user_preferred := or site.Params.disableSpecial1stPost site.Params.homeInfoParams }} -{{- if (and $.IsHome (eq $paginator.PageNumber 1) (eq $index 0) (not $user_preferred)) }} -{{- $class = "first-entry" }} -{{- else if $term }} -{{- $class = "post-entry tag-entry" }} -{{- end }} - -
- {{- $isHidden := (.Param "cover.hiddenInList") | default (.Param "cover.hidden") | default false }} - {{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }} -
-

- {{- .Title }} - {{- if .Draft }} - - - - - - {{- end }} -

-
- {{- if (ne (.Param "hideSummary") true) }} -
-

{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}

-
- {{- end }} - {{- if not (.Param "hideMeta") }} -
- {{- partial "post_meta.html" . -}} -
- {{- end }} - -
-{{- end }} - -{{- if gt $paginator.TotalPages 1 }} - -{{- end }} - -{{- end }}{{/* end profileMode */}} - -{{- end }}{{- /* end main */ -}} diff --git a/layouts/_default/single.html b/layouts/_default/single.html deleted file mode 100644 index 92be762..0000000 --- a/layouts/_default/single.html +++ /dev/null @@ -1,69 +0,0 @@ -{{- define "main" }} - -
-
- {{ partial "breadcrumbs.html" . }} -

- {{ .Title }} - {{- if .Draft }} - - - - - - {{- end }} -

- {{- if .Description }} -
- {{ .Description }} -
- {{- end }} - {{- if not (.Param "hideMeta") }} - - {{- end }} -
- {{- $isHidden := (.Param "cover.hiddenInSingle") | default (.Param "cover.hidden") | default false }} - {{- partial "cover.html" (dict "cxt" . "IsSingle" true "isHidden" $isHidden) }} - {{- if (.Param "ShowToc") }} - {{- partial "toc.html" . }} - {{- end }} - - {{- if .Content }} -
- {{- if not (.Param "disableAnchoredHeadings") }} - {{- partial "anchored_headings.html" .Content -}} - {{- else }}{{ .Content }}{{ end }} -
- {{- end }} - -
- {{- $tags := .Language.Params.Taxonomies.tag | default "tags" }} - - - {{- if ne .Params.disableCoffee true }} - {{- partial "buy_me_a_coffee.html" . -}} - {{- end }} - - {{- if (.Param "ShowPostNavLinks") }} - {{- partial "post_nav_links.html" . }} - {{- end }} - {{- if (and site.Params.ShowShareButtons (ne .Params.disableShare true)) }} - {{- partial "share_icons.html" . -}} - {{- end }} - -
- - {{- if (.Param "comments") }} - {{- partial "comments.html" . }} - {{- end }} -
- -{{- end }}{{/* end main */}} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..c9e09f5 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,401 @@ +{{ define "main" }} +
+ + +
+
ritual.sh
+
+ + +
fix bugs
+
pwd:
puppies
+
finish
coffee
+
CALL
WIFE
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
I WANT TO
BELIEVE
+
+
+ + +
+
+ + +
+
+ +
+
+
+
Recently Played
+
+
+ + + +
+
+
+ + + + +
+ + + + + + + + + + + + + + + + + + +
+ + +
+
+ SYSTEM LOAD
+ CPU: 67%
+ RAM: 4.2/8GB
+ NET: 2.4MB/s
+ DISK: 89%
+ _ +
+
+
+ + +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + + +
+
+
+ + +
+
+ +{{ partial "lavalamp.html" . }} + + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +
+
+ > netstat -an
+
+tcp   0   0 127.0.0.1:33842      0.0.0.0:*            LISTEN     
+tcp   0   0 127.0.0.1:41267      0.0.0.0:*            LISTEN     
+tcp   0   0 127.0.0.54:53        0.0.0.0:*            LISTEN     
+tcp   0   0 127.0.0.1:52918      127.0.0.1:38471      ESTABLISHED
+tcp   0   0 192.168.1.147:44321  52.143.67.201:443    ESTABLISHED
+tcp   0   0 192.168.1.147:39854  104.26.15.88:80      TIME_WAIT  
+tcp   0   0 127.0.0.1:38471      127.0.0.1:52918      ESTABLISHED
+tcp   0   0 127.0.0.1:56732      127.0.0.1:8080       ESTABLISHED
+tcp   0   0 192.168.1.147:41209  13.107.42.16:443     ESTABLISHED
+tcp   0   0 127.0.0.1:49563      127.0.0.1:8080       TIME_WAIT
+
+Proto RefCnt Flags  Type    State      I-Node Path
+unix  3      [ ]    STREAM  CONNECTED  50896  /run/user/1000/bus
+
+
+
+ +
+
+
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+ [PKT] 172.16.0.1:22
+ [PKT] 192.168.1.1:443
+ [PKT] 10.0.0.15:8080
+
+
+
+ +
+
+ PING 8.8.8.8
+ 64 bytes: 12ms
+ 64 bytes: 11ms
+ 64 bytes: 13ms
+ _ +
+
+ +
+
+ > tail -f /var/log
+ [INFO] Process OK
+ [WARN] High load detected - time for coffee break
+ [INFO] Connected to database (it's in a relationship now)
+ [ERROR] 404: Motivation not found
+ [WARN] Firewall detected actual fire, calling emergency services
+ [INFO] Successfully hacked into mainframe (jk it's just localhost)
+ [ERROR] Keyboard not found. Press F1 to continue.
+ [WARN] Too many open tabs. Browser having existential crisis.
+ [INFO] Ping 127.0.0.1 - there's no place like home
+ [ERROR] SQL injection attempt detected. Nice try, Bobby Tables.
+ _ +
+
+
+{{ end }} diff --git a/layouts/partials/buy_me_a_coffee.html b/layouts/partials/buy_me_a_coffee.html deleted file mode 100644 index 3c8e774..0000000 --- a/layouts/partials/buy_me_a_coffee.html +++ /dev/null @@ -1,3 +0,0 @@ -
- If you found this article useful, consider buying me a coffee. Every tip received makes my electricity bill seem less bad. -
\ No newline at end of file diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html deleted file mode 100644 index 21a7e3a..0000000 --- a/layouts/partials/comments.html +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html deleted file mode 100644 index f7cf45b..0000000 --- a/layouts/partials/footer.html +++ /dev/null @@ -1,130 +0,0 @@ -{{- if not (.Param "hideFooter") }} -
- {{- if site.Copyright }} - {{ site.Copyright | markdownify }} - {{- else }} - © {{ now.Year }} Dan Baker - {{- end }} -
-{{- end }} - -{{- if (not site.Params.disableScrollToTop) }} - - - - - -{{- end }} - -{{- partial "extend_footer.html" . }} - - - -{{- if (not site.Params.disableScrollToTop) }} - -{{- end }} - -{{- if (not site.Params.disableThemeToggle) }} - -{{- end }} - -{{- if (and (eq .Kind "page") (ne .Layout "archives") (ne .Layout "search") (.Param "ShowCodeCopyButtons")) }} - -{{- end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html deleted file mode 100644 index 3e55c67..0000000 --- a/layouts/partials/head.html +++ /dev/null @@ -1,157 +0,0 @@ - - - -{{- if hugo.IsProduction | or (eq site.Params.env "production") | and (ne .Params.robotsNoIndex true) }} - -{{- else }} - -{{- end }} - -{{- /* Title */}} -{{ if .IsHome }}{{ else }}{{ if .Title }}{{ .Title }} | {{ end }}{{ end }}{{ site.Title }} - -{{- /* Meta */}} -{{- if .IsHome }} -{{ with site.Params.keywords -}}{{ end }} -{{- else }} - -{{- end }} - - - -{{- if site.Params.analytics.google.SiteVerificationTag }} - -{{- end }} -{{- if site.Params.analytics.yandex.SiteVerificationTag }} - -{{- end }} -{{- if site.Params.analytics.bing.SiteVerificationTag }} - -{{- end }} -{{- if site.Params.analytics.naver.SiteVerificationTag }} - -{{- end }} - -{{- /* Styles */}} - -{{- /* includes */}} -{{- $includes := slice }} -{{- $includes = $includes | append (" " | resources.FromString "assets/css/includes-blank.css")}} - -{{- if not (eq site.Params.assets.disableScrollBarStyle true) }} - {{- $ScrollStyle := (resources.Get "css/includes/scroll-bar.css") }} - {{- $includes = (append $ScrollStyle $includes) }} -{{- end }} - -{{- $includes_all := $includes | resources.Concat "assets/css/includes.css" }} - -{{- $theme_vars := (resources.Get "css/core/theme-vars.css") }} -{{- $reset := (resources.Get "css/core/reset.css") }} -{{- $media := (resources.Get "css/core/zmedia.css") }} -{{- $license_css := (resources.Get "css/core/license.css") }} -{{- $common := (resources.Match "css/common/*.css") | resources.Concat "assets/css/common.css" }} - -{{- /* markup.highlight.noClasses should be set to `false` */}} -{{- $chroma_styles := (resources.Get "css/includes/chroma-styles.css") }} -{{- $chroma_mod := (resources.Get "css/includes/chroma-mod.css") }} - -{{- /* order is important */}} -{{- $core := (slice $theme_vars $reset $common $chroma_styles $chroma_mod $includes_all $media) | resources.Concat "assets/css/core.css" | resources.Minify }} -{{- $extended := (resources.Match "css/extended/*.css") | resources.Concat "assets/css/extended.css" | resources.Minify }} - -{{- /* bundle all required css */}} -{{- /* Add extended css after theme style */ -}} -{{- $stylesheet := (slice $license_css $core $extended) | resources.Concat "assets/css/stylesheet.css" }} - -{{- if not site.Params.assets.disableFingerprinting }} -{{- $stylesheet := $stylesheet | fingerprint }} - -{{- else }} - -{{- end }} - -{{- /* Search */}} -{{- if (eq .Layout `search`) -}} - -{{- $fastsearch := resources.Get "js/fastsearch.js" | js.Build (dict "params" (dict "fuseOpts" site.Params.fuseOpts)) | resources.Minify }} -{{- $fusejs := resources.Get "js/fuse.basic.min.js" }} -{{- $license_js := resources.Get "js/license.js" }} -{{- if not site.Params.assets.disableFingerprinting }} -{{- $search := (slice $fusejs $license_js $fastsearch ) | resources.Concat "assets/js/search.js" | fingerprint }} - -{{- else }} -{{- $search := (slice $fusejs $fastsearch ) | resources.Concat "assets/js/search.js" }} - -{{- end }} -{{- end -}} - -{{- /* Favicons */}} - - - - - - - - -{{- /* RSS */}} -{{ range .AlternativeOutputFormats -}} - -{{ end -}} -{{- range .AllTranslations -}} - -{{ end -}} - - - -{{- partial "extend_head.html" . -}} - -{{- /* Misc */}} -{{- if hugo.IsProduction | or (eq site.Params.env "production") }} -{{- template "_internal/google_analytics.html" . }} -{{- template "partials/templates/opengraph.html" . }} -{{- template "partials/templates/twitter_cards.html" . }} -{{- template "partials/templates/schema_json.html" . }} -{{- end -}} diff --git a/layouts/partials/header.html b/layouts/partials/header.html deleted file mode 100644 index a9e68cb..0000000 --- a/layouts/partials/header.html +++ /dev/null @@ -1,149 +0,0 @@ -{{- /* theme-toggle is enabled */}} -{{- if (not site.Params.disableThemeToggle) }} -{{- /* theme is light */}} -{{- if (eq site.Params.defaultTheme "light") }} - -{{- /* theme is dark */}} -{{- else if (eq site.Params.defaultTheme "dark") }} - -{{- else }} -{{- /* theme is auto */}} - -{{- end }} -{{- /* theme-toggle is disabled and theme is auto */}} -{{- else if (and (ne site.Params.defaultTheme "light") (ne site.Params.defaultTheme "dark"))}} - -{{- end }} - -
- -
diff --git a/layouts/partials/home_info.html b/layouts/partials/home_info.html deleted file mode 100644 index 961ddc4..0000000 --- a/layouts/partials/home_info.html +++ /dev/null @@ -1,34 +0,0 @@ -{{- with site.Params.homeInfoParams }} -
-
-

{{ .Title | markdownify }}

-
- -
- -
-
- {{- $me := resources.Get "/images/me.webp" }} - -
-
- {{ .Content | markdownify }} - -
- {{- partial "nowplaying.html" . }} -
-
-
- - - -
- {{ partial "social_icons.html" (dict "align" site.Params.homeInfoParams.AlignSocialIconsTo) }} -
-
- - - - -
-{{- end -}} diff --git a/layouts/partials/lavalamp.html b/layouts/partials/lavalamp.html new file mode 100644 index 0000000..1926071 --- /dev/null +++ b/layouts/partials/lavalamp.html @@ -0,0 +1,25 @@ +
+ + + + + + + + + + +
+
+
+
ABOUT
+
+
+
+
+
diff --git a/layouts/partials/nowplaying.html b/layouts/partials/nowplaying.html index 5a43c93..1df4095 100755 --- a/layouts/partials/nowplaying.html +++ b/layouts/partials/nowplaying.html @@ -5,7 +5,6 @@
-

Recently listening to:

🎵 -
diff --git a/layouts/partials/terminal.html b/layouts/partials/terminal.html new file mode 100644 index 0000000..e69de29 diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png deleted file mode 100644 index b9495bf..0000000 Binary files a/static/android-chrome-192x192.png and /dev/null differ diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png deleted file mode 100644 index 7e3c939..0000000 Binary files a/static/android-chrome-512x512.png and /dev/null differ diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png index 6875440..ab80c35 100644 Binary files a/static/apple-touch-icon.png and b/static/apple-touch-icon.png differ diff --git a/static/css/nowplaying.css b/static/css/nowplaying.css deleted file mode 100755 index e68edea..0000000 --- a/static/css/nowplaying.css +++ /dev/null @@ -1,28 +0,0 @@ -.nowplayingcard { - margin: auto; - padding: 14px; -} - -.nowplayingcontainer-inner { - transition: 0.3s; - display: inline-flex; - - .trackInfo { - width: 100%; - } - - #album { - display: none; - } -} - -img#trackart { - transition: 0.3s; - width: 60px; - height: 50px; - padding-left: 10px; -} - -img#trackart[src=""] { - display: none; -} diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png deleted file mode 100644 index a02a28f..0000000 Binary files a/static/favicon-16x16.png and /dev/null differ diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png deleted file mode 100644 index ca9f5e4..0000000 Binary files a/static/favicon-32x32.png and /dev/null differ diff --git a/static/favicon-96x96.png b/static/favicon-96x96.png new file mode 100644 index 0000000..e486c97 Binary files /dev/null and b/static/favicon-96x96.png differ diff --git a/static/favicon.ico b/static/favicon.ico index 88e7e01..802d5fe 100644 Binary files a/static/favicon.ico and b/static/favicon.ico differ diff --git a/static/favicon.svg b/static/favicon.svg new file mode 100644 index 0000000..835e553 --- /dev/null +++ b/static/favicon.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/static/mstile-150x150.png b/static/mstile-150x150.png deleted file mode 100644 index 91167d9..0000000 Binary files a/static/mstile-150x150.png and /dev/null differ diff --git a/static/site.webmanifest b/static/site.webmanifest new file mode 100644 index 0000000..93e87fe --- /dev/null +++ b/static/site.webmanifest @@ -0,0 +1,21 @@ +{ + "name": "ritual.sh", + "short_name": "ritual.sh", + "icons": [ + { + "src": "/web-app-manifest-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "/web-app-manifest-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} \ No newline at end of file diff --git a/static/web-app-manifest-192x192.png b/static/web-app-manifest-192x192.png new file mode 100644 index 0000000..7a7febd Binary files /dev/null and b/static/web-app-manifest-192x192.png differ diff --git a/static/web-app-manifest-512x512.png b/static/web-app-manifest-512x512.png new file mode 100644 index 0000000..bb973cb Binary files /dev/null and b/static/web-app-manifest-512x512.png differ diff --git a/themes/PaperMod b/themes/PaperMod deleted file mode 160000 index 66904cc..0000000 --- a/themes/PaperMod +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 66904cc4c2b292e6a3686d483e4054904a9f3954 diff --git a/themes/hugo-starter b/themes/hugo-starter new file mode 160000 index 0000000..d876912 --- /dev/null +++ b/themes/hugo-starter @@ -0,0 +1 @@ +Subproject commit d876912bf596a5257b3c3fab674a0ff6bf544c5b