update website with better performance and styles
This commit is contained in:
Frederik Spirgi
+27
-22
@@ -1,26 +1,31 @@
|
||||
const darkModeToggle = document.getElementById('dark-mode-toggle');
|
||||
localStorage.setItem('darkMode', 'disabled');
|
||||
if (localStorage.getItem('darkMode') === 'enabled') {
|
||||
document.body.classList.add('dark-mode');
|
||||
}
|
||||
darkModeToggle.addEventListener('click', () => {
|
||||
document.body.classList.toggle('dark-mode');
|
||||
darkModeToggle.classList.toggle('dark-mode');
|
||||
if (document.body.classList.contains('dark-mode')) {
|
||||
localStorage.setItem('darkMode', 'enabled');
|
||||
darkModeToggle.style.color = "black";
|
||||
darkModeToggle.innerHTML = "☀️<br>Toggle Light Mode";
|
||||
} else {
|
||||
localStorage.setItem('darkMode', 'disabled');
|
||||
darkModeToggle.style.color = "white";
|
||||
darkModeToggle.innerHTML = "🌙<br>Toggle Dark Mode";
|
||||
}
|
||||
});
|
||||
const themeIcon = darkModeToggle.querySelector('.theme-icon');
|
||||
const themeLabel = darkModeToggle.querySelector('.theme-label');
|
||||
|
||||
enterButton.addEventListener('click', () => {
|
||||
if (document.body.classList.contains('dark-mode')) {
|
||||
document.body.style.backgroundColor = "black";
|
||||
} else {
|
||||
document.body.style.backgroundColor = "white";
|
||||
function applyTheme(isDark) {
|
||||
document.body.classList.toggle('dark-mode', isDark);
|
||||
darkModeToggle.setAttribute('aria-pressed', String(isDark));
|
||||
themeIcon.textContent = isDark ? '☀' : '☾';
|
||||
themeLabel.textContent = isDark ? 'Light mode' : 'Dark mode';
|
||||
document.querySelector('meta[name="theme-color"]').content = isDark ? '#0d1828' : '#e9f3fb';
|
||||
window.dispatchEvent(new Event('themechange'));
|
||||
}
|
||||
|
||||
let savedTheme;
|
||||
try {
|
||||
savedTheme = localStorage.getItem('darkMode');
|
||||
} catch {
|
||||
savedTheme = null;
|
||||
}
|
||||
|
||||
applyTheme(savedTheme === 'enabled' || (savedTheme === null && window.matchMedia('(prefers-color-scheme: dark)').matches));
|
||||
|
||||
darkModeToggle.addEventListener('click', () => {
|
||||
const isDark = !document.body.classList.contains('dark-mode');
|
||||
applyTheme(isDark);
|
||||
try {
|
||||
localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
|
||||
} catch {
|
||||
// The chosen theme remains active for this visit when storage is unavailable.
|
||||
}
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
+150
-61
@@ -3,33 +3,29 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fretux</title>
|
||||
<meta name="description" content="Explore Fretux's projects in an interactive pixel-art portfolio.">
|
||||
<meta name="theme-color" content="#e9f3fb">
|
||||
<title>Fretux — Interactive Portfolio</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" href="img/favicon.ico " type=image/x-icon>
|
||||
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Welcome Screen -->
|
||||
<div id="welcome-screen">
|
||||
<div id="welcome-content">
|
||||
<h1 id="welcome-text">Welcome! Click the image below to begin your journey through my site!</h1>
|
||||
<img id="enter-button" src="img/Penguin_Normal.png" alt="Enter Website"/>
|
||||
<img id="turn-device-sideways" src="img/turn-device-sideways.png" alt="Enter Website"/>
|
||||
<button id="dark-mode-toggle" class="dark-mode-toggle">
|
||||
🌙<br>
|
||||
Toggle Dark Mode
|
||||
</button>
|
||||
<p class="eyebrow">Fretux</p>
|
||||
<h1 id="welcome-text">A little world to explore</h1>
|
||||
<button id="enter-button" type="button">Start <span aria-hidden="true">→</span></button>
|
||||
<p class="control-guide">← → / A D to move · ↑ / W to jump · Enter to interact</p>
|
||||
</div>
|
||||
</div>
|
||||
<button id="dark-mode-toggle" class="dark-mode-toggle" type="button" aria-pressed="false"><span class="theme-icon" aria-hidden="true">☾</span><span class="theme-label">Dark mode</span></button>
|
||||
<button id="sound-toggle" type="button" aria-label="Mute sound effects" aria-pressed="true" title="Toggle sound (M)"><span id="sound-icon" aria-hidden="true">♪</span></button>
|
||||
<noscript><div class="no-script">This interactive portfolio needs JavaScript. <a href="https://git.bachmannj.ch/Fretux">Browse the projects on Gitea instead.</a></div></noscript>
|
||||
|
||||
<!-- Game Container -->
|
||||
<div id="game-container">
|
||||
<canvas id="game-canvas"></canvas>
|
||||
<div id="content-overlay">
|
||||
<h1 id="section-title"></h1>
|
||||
<p id="section-content"></p>
|
||||
</div>
|
||||
|
||||
<!-- "?" Block Explanatory Text -->
|
||||
<canvas id="game-canvas" tabindex="0" aria-label="Interactive snowy portfolio world"></canvas>
|
||||
<div id="block-info" class="hidden">
|
||||
<h1>Welcome!</h1>
|
||||
<p>Welcome to my portfolio! Here, you'll discover the projects I've worked on, along with insights about my skills and background. If you're curious about my work or have any questions, feel free to reach out! Enjoy exploring!</p>
|
||||
@@ -38,74 +34,167 @@
|
||||
|
||||
<section id="projects">
|
||||
<div class="project">
|
||||
<h3 class="project-name">TRLStats</h3>
|
||||
<p class="project-description">An interactive JavaScript and Python application designed to calculate damage statistics for the popular Roblox game 'The Red Lake'.</p>
|
||||
<img src="img/Project_TrlStats.png" alt="TRLStats">
|
||||
<p class="long-description" data-project-name="TRLStats">TRLStats was my first project, a damage calculator for the Roblox game 'The Red Lake'. This project combines Python, Flask for backend processing, and JavaScript to dynamically display data extracted from JSON files.</p>
|
||||
<a class="link" href="https://fretux.ch/trlstats" data-project-name="TRLStats">Link to the Website</a>
|
||||
<p class="tags">HTML</p>
|
||||
<p class="tags">CSS</p>
|
||||
<p class="tags">Javascript</p>
|
||||
<p class="tags">Python</p>
|
||||
<p class="tags">JSON</p>
|
||||
<h3 class="project-name">The_Tower</h3>
|
||||
<p class="project-description">A simple tower defense game made in Unity.</p>
|
||||
<p class="long-description" data-project-name="The_Tower">A Unity tower defense game where enemies attack a tower. The C# project includes enemy spawning, bullets, cannon effects, and upgrade cards.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/The_Tower" data-project-name="The_Tower">Source code</a>
|
||||
<p class="tags">C#</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">SBB-History</h3>
|
||||
<p class="project-description">A Website about the creation of the SBB (Swiss Train Corporation) with an
|
||||
interactable map!</p>
|
||||
<img src="img/SBB-History.png" alt="SBB-History">
|
||||
<p class="long-description" data-project-name="SBB-History">For a School Project, me and 2 friends had to create a page about the economic history of a part of the swiss, which we chose to do about the "SBB", the Swiss Train Coorporation, founded in 1902. It is a simple Website, using HTML, CSS, and JavaScript, alongside the "Maptiler" API for the interactive map.</p>
|
||||
<a class="link" href="https://sbb-history.fretux.ch" data-project-name="SBB-History">Link to the Website</a>
|
||||
<p class="tags">HTML</p>
|
||||
<p class="tags">CSS</p>
|
||||
<p class="tags">Javascript</p>
|
||||
<h3 class="project-name">PortfolioWebsite</h3>
|
||||
<p class="project-description">An interactive portfolio built as a snowy 2D game.</p>
|
||||
<p class="long-description" data-project-name="PortfolioWebsite">This website is a small canvas platform game. Walk through the snowy world to discover projects and enter the house to learn about its creator.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/PortfolioWebsite" data-project-name="PortfolioWebsite">Source code</a>
|
||||
<p class="tags">JavaScript</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">anomaly-front-stats</h3>
|
||||
<p class="project-description">A web calculator for Anomaly Front stats and weapons.</p>
|
||||
<p class="long-description" data-project-name="anomaly-front-stats">A Flask website for calculating Anomaly Front stats, browsing and filtering weapon data, and sending suggestions. It follows the earlier TRL Stats project.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/anomaly-front-stats" data-project-name="anomaly-front-stats">Source code</a>
|
||||
<p class="tags">Python / Flask</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">AdapativeMobs</h3>
|
||||
<p class="project-description">A Minecraft mod that makes hostile mobs adapt to world progression.</p>
|
||||
<p class="long-description" data-project-name="AdapativeMobs">A server-side Minecraft Forge mod that scales vanilla hostile mobs as the world advances. Mobs can gain stronger attributes, better equipment, extra spawn pressure, and tactical behavior.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/AdapativeMobs" data-project-name="AdapativeMobs">Source code</a>
|
||||
<p class="tags">Java</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">WebsitePortfolio2</h3>
|
||||
<p class="project-description">A Next.js portfolio with project, about, and contact pages.</p>
|
||||
<p class="long-description" data-project-name="WebsitePortfolio2">A separate portfolio website built with Next.js. It presents Frederik's work through dedicated project, about, and contact pages.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/WebsitePortfolio2" data-project-name="WebsitePortfolio2">Source code</a>
|
||||
<p class="tags">JavaScript</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">Shoppy</h3>
|
||||
<p class="project-description">A mobile shopping assistant for checking products in the store.</p>
|
||||
<p class="long-description" data-project-name="Shoppy">An Expo and React Native app concept for scanning product barcodes and judging them against personal goals such as allergies, nutrition, budget, and sustainability.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/Shoppy" data-project-name="Shoppy">Source code</a>
|
||||
<p class="tags">JavaScript</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">linux_distro_roguelite_promotion</h3>
|
||||
<p class="project-description">The pre-registration site and backend for Linux Distro Roguelite.</p>
|
||||
<p class="long-description" data-project-name="linux_distro_roguelite_promotion">A Quarkus backend and static pre-registration page for a free game. Players sign up, choose platforms, and unlock rewards through community milestones.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/linux_distro_roguelite_promotion" data-project-name="linux_distro_roguelite_promotion">Source code</a>
|
||||
<p class="tags">Java</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">linuxdistro-roguelite</h3>
|
||||
<p class="project-description">A Linux distribution themed roguelite made in Unity.</p>
|
||||
<p class="long-description" data-project-name="linuxdistro-roguelite">The Unity game project for Linux Distro Roguelite. Its scenes and scripts cover combat, game runs, progression, and a gambling scene.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/linuxdistro-roguelite" data-project-name="linuxdistro-roguelite">Source code</a>
|
||||
<p class="tags">Unity / C#</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">MindMotion</h3>
|
||||
<p class="project-description">A Minecraft mod adding Sanity, Insanity, and Tempo systems.</p>
|
||||
<p class="long-description" data-project-name="MindMotion">A configurable Minecraft gameplay mod inspired by Deepwoken. Sanity, Insanity, and Tempo respond to the player's surroundings and actions, adding decisions to exploration and combat.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/MindMotion" data-project-name="MindMotion">Source code</a>
|
||||
<p class="tags">Java</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">Ailments</h3>
|
||||
<p class="project-description">A Forge library for combat effects such as Bleed and Fear.</p>
|
||||
<p class="long-description" data-project-name="Ailments">A Minecraft Forge library mod that provides reusable effects including Soul Rot, Bleed, Fracture, Fear, Charm, Taunt, Overcharm, and Winded for other mods.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/Ailments" data-project-name="Ailments">Source code</a>
|
||||
<p class="tags">Java</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">KnockedBack</h3>
|
||||
<p class="project-description">A minecraft forge mod for 1.20.1 that revamps dying!</p>
|
||||
<img src="img/Knockedback.png" alt="KnockedBack">
|
||||
<p class="long-description" data-project-name="KnockedBack">For a long time, I had wanted a mod that really changed how dying worked in PVP, to make it more tactical. However, there was none. So, I looked into the possibility of making my own minecraft mod, initially with neoforge, but after multiple setbacks, I decided to go with normal forge, as it was easier.</p>
|
||||
<a class="link" href="https://www.curseforge.com/minecraft/mc-mods/knockedback" data-project-name="KnockedBack">Link to the Mod</a>
|
||||
<p class="project-description">A Minecraft mod that turns lethal hits into knockdowns.</p>
|
||||
<p class="long-description" data-project-name="KnockedBack">A Minecraft Forge mod that replaces many instant deaths with a temporary knocked-out state. Teammates can rescue and carry a downed player, while opponents can execute them.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/KnockedBack" data-project-name="KnockedBack">Source code</a>
|
||||
<a class="link" href="https://www.curseforge.com/minecraft/mc-mods/knockedback" data-project-name="KnockedBack">Download mod</a>
|
||||
<p class="tags">Java</p>
|
||||
</div>
|
||||
<div class="pagination-controls">
|
||||
<button id="prev-button" disabled>Previous</button>
|
||||
<button id="next-button">Next</button>
|
||||
<div class="project">
|
||||
<h3 class="project-name">Ascend</h3>
|
||||
<p class="project-description">A soulslike Minecraft RPG progression mod.</p>
|
||||
<p class="long-description" data-project-name="Ascend">A Minecraft mod inspired by Deepwoken. Players earn Ascend levels, invest skill points in attributes, and gain Knowledge through play.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/Ascend" data-project-name="Ascend">Source code</a>
|
||||
<p class="tags">Java</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">SkillEngine</h3>
|
||||
<p class="project-description">A framework for adding custom skill trees to Forge mods.</p>
|
||||
<p class="long-description" data-project-name="SkillEngine">A modular Minecraft Forge framework for other mods to define skill nodes, requirements, icons, and unlocks. It also handles the skill tree interface and server synchronization.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/SkillEngine" data-project-name="SkillEngine">Source code</a>
|
||||
<p class="tags">Java</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">KrisHD_AI</h3>
|
||||
<p class="project-description">Elsewhere, an AI chat app with personas and roleplay sessions.</p>
|
||||
<p class="long-description" data-project-name="KrisHD_AI">Elsewhere is an Express and SQLite chat app with user accounts, custom personas, roleplay conversations, and a persona market. Conversations can branch and be compared.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/KrisHD_AI" data-project-name="KrisHD_AI">Source code</a>
|
||||
<a class="link" href="https://ai.krishd.ch/" data-project-name="KrisHD_AI">Live website</a>
|
||||
<p class="tags">JavaScript</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">Discord_bot</h3>
|
||||
<p class="project-description">A Discord bot with moderation, roles, and virtual currency.</p>
|
||||
<p class="long-description" data-project-name="Discord_bot">A Discord.js bot for community servers. Its commands cover moderation, role management, utility features, and a virtual currency system.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/Discord_bot" data-project-name="Discord_bot">Source code</a>
|
||||
<p class="tags">JavaScript</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">Portfolio2</h3>
|
||||
<p class="project-description">Another repo of the Next.js portfolio website.</p>
|
||||
<p class="long-description" data-project-name="Portfolio2">A second repository for the Next.js portfolio site, with the same home page as WebsitePortfolio2 and dedicated project, about, and contact pages.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/Portfolio2" data-project-name="Portfolio2">Source code</a>
|
||||
<p class="tags">JavaScript</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">Autoclicker</h3>
|
||||
<p class="project-description">A desktop autoclicker with a configurable hotkey.</p>
|
||||
<p class="long-description" data-project-name="Autoclicker">A Python desktop autoclicker built with Tkinter and pynput. Configure a hotkey, then start or stop clicking from the app or the keyboard.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/Autoclicker" data-project-name="Autoclicker">Source code</a>
|
||||
<p class="tags">Python</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">Gambling_API</h3>
|
||||
<p class="project-description">A multiplayer virtual-chip poker game for the web.</p>
|
||||
<p class="long-description" data-project-name="Gambling_API">A browser-based multiplayer poker game with Express, WebSockets, and SQLite. Players register accounts, join lobbies, and play with virtual chips.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/Gambling_API" data-project-name="Gambling_API">Source code</a>
|
||||
<p class="tags">JavaScript</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3 class="project-name">TARS</h3>
|
||||
<p class="project-description">A Discord bot for a private server's moderation and utilities.</p>
|
||||
<p class="long-description" data-project-name="TARS">A Python Discord bot with moderation tools, reports, reminders, server utilities, fun commands, and a perk shop for server boosters.</p>
|
||||
<a class="link" href="https://git.bachmannj.ch/Fretux/TARS" data-project-name="TARS">Source code</a>
|
||||
<p class="tags">Python</p>
|
||||
</div>
|
||||
<!-- More projects here -->
|
||||
</section>
|
||||
<div id="detailsContainer"
|
||||
style="display:none; position:fixed; top:20%; left:20%; width:60%; height:60%; background:white; padding:20px; overflow:auto; box-shadow: 0 0 10px rgba(0,0,0,0.5);">
|
||||
<!-- Details will be loaded here -->
|
||||
</div>
|
||||
|
||||
<!-- NPC Dialog Overlay (initially hidden via CSS) -->
|
||||
<div id="npc-dialog" class="hidden">
|
||||
<div id="npc-dialog" class="hidden" role="dialog" aria-label="About Fretux">
|
||||
<div id="npc-dialog-content">
|
||||
<div class="dialog-heading"><span>About Fretux</span><button id="npc-dialog-close" type="button" aria-label="Close dialog">×</button></div>
|
||||
<p id="npc-dialog-text">Hello, I'm Frederik Spirgi (aka Fretux), the creator of this website! Feel free to ask me anything—I'm here to share my journey and the technologies behind this interactive experience!</p>
|
||||
<button id="dialog-option-1">Tell me more about your background!</button>
|
||||
<br>
|
||||
<button id="dialog-option-2">What technologies did you use to build this site?</button>
|
||||
<br>
|
||||
<button id="dialog-option-3">Why did you create this interactive website?</button>
|
||||
<br>
|
||||
<h6>(You can leave the house by pressing Enter again)</h6>
|
||||
<button id="dialog-option-1" type="button">My background</button>
|
||||
<button id="dialog-option-2" type="button">How this site was built</button>
|
||||
<button id="dialog-option-3" type="button">Why an interactive portfolio?</button>
|
||||
<p class="dialog-hint">Press Escape to close the conversation.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mobile-controls">
|
||||
<button id="move-left-button"><</button>
|
||||
<button id="jump-button">^</button>
|
||||
<button id="move-right-button">></button>
|
||||
<button id="interact-button">Interact</button>
|
||||
<button id="interact-character-button" class="hidden">Interact with Character</button>
|
||||
<button id="move-left-button" type="button" aria-label="Move left">←</button>
|
||||
<button id="jump-button" type="button" aria-label="Jump">↑</button>
|
||||
<button id="move-right-button" type="button" aria-label="Move right">→</button>
|
||||
<button id="interact-button" type="button">Use</button>
|
||||
<button id="interact-character-button" class="hidden" type="button">Talk</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Snowfall Container -->
|
||||
<div id="snow-container"></div>
|
||||
<script type="text/javascript" src="audio.js"></script>
|
||||
<script type="text/javascript" src="script1.js"></script>
|
||||
<script type="text/javascript" src="Tutorial.js"></script>
|
||||
<script type="text/javascript" src="darkmode.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+452
-548
File diff suppressed because it is too large
Load Diff
@@ -1,478 +1,377 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
background: linear-gradient(180deg, #8fc9f2 0%, #eef8ff 100%);
|
||||
font-family: "Trebuchet MS", Verdana, sans-serif;
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #182b3d;
|
||||
--muted: #4a6071;
|
||||
--paper: #eef6f8;
|
||||
--panel: #f3f8f9;
|
||||
--line: #547389;
|
||||
--accent: #265d82;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
background: #b9d9ed;
|
||||
color: var(--ink);
|
||||
font-family: "Courier New", monospace;
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
color-scheme: dark;
|
||||
--ink: #edf3f5;
|
||||
--muted: #bdced7;
|
||||
--paper: #1d2e3d;
|
||||
--panel: #243747;
|
||||
--line: #8ba8b9;
|
||||
--accent: #a9d9ef;
|
||||
background: #111d2a;
|
||||
}
|
||||
|
||||
button { font: inherit; cursor: pointer; }
|
||||
button:focus-visible, a:focus-visible, canvas:focus-visible {
|
||||
outline: 3px solid #d48439;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.hidden { display: none; }
|
||||
|
||||
.no-script {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
gap: 12px;
|
||||
padding: 24px;
|
||||
background: #e6f3fa;
|
||||
color: #182b3d;
|
||||
text-align: center;
|
||||
}
|
||||
.no-script a { color: #265d82; }
|
||||
|
||||
#welcome-screen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
background-color: #B3C0CA;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow-y: auto;
|
||||
padding: 70px 22px 32px;
|
||||
background:
|
||||
radial-gradient(circle at 20% 18%, rgba(255,255,255,.56) 0 2px, transparent 3px),
|
||||
radial-gradient(circle at 76% 32%, rgba(255,255,255,.55) 0 2px, transparent 3px),
|
||||
linear-gradient(#91bfdc, #d9edf7 78%, #f5fafb);
|
||||
transition: opacity .7s ease;
|
||||
}
|
||||
body.dark-mode #welcome-screen {
|
||||
background:
|
||||
radial-gradient(circle at 20% 18%, rgba(255,255,255,.48) 0 2px, transparent 3px),
|
||||
radial-gradient(circle at 76% 32%, rgba(255,255,255,.42) 0 2px, transparent 3px),
|
||||
linear-gradient(#152738, #304b60 78%, #627d8c);
|
||||
}
|
||||
|
||||
#welcome-screen.hidden {
|
||||
display: grid;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: #B3C0CA;
|
||||
transition: opacity 0.5s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
color: #fff;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#main-content.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
#welcome-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: background-color 0.5s ease;
|
||||
transition: opacity .5s ease, transform .7s ease;
|
||||
}
|
||||
|
||||
#welcome-text {
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-family: 'Pacifico', cursive;
|
||||
}
|
||||
|
||||
#enter-button {
|
||||
cursor: pointer;
|
||||
width: 200px;
|
||||
height: auto;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
#enter-button:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#snow-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.snowflake {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
pointer-events: none;
|
||||
animation: fall linear infinite;
|
||||
z-index: -1
|
||||
}
|
||||
|
||||
.paused .snowflake {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes fall {
|
||||
to {
|
||||
transform: translateY(100vh);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.paused {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
.snowflake:nth-child(odd) {
|
||||
animation-duration: 4s;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.snowflake:nth-child(even) {
|
||||
animation-duration: 6s;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
max-width: 900px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.5s, opacity 3s;
|
||||
#welcome-screen.hidden #welcome-content {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transform: translateY(-14px);
|
||||
}
|
||||
|
||||
.content-section.visible {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
#welcome-content {
|
||||
width: min(620px, 100%);
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.content-section-top {
|
||||
max-width: 900px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.content-section:nth-child(even) {
|
||||
margin-left: auto;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.content-section:nth-child(odd) {
|
||||
margin-right: auto;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content-section {
|
||||
margin: 20px auto;
|
||||
}
|
||||
}
|
||||
|
||||
#game-container {
|
||||
display: none;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #8fc9f2;
|
||||
}
|
||||
|
||||
#game-canvas {
|
||||
.welcome-penguin {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: clamp(96px, 15vw, 142px);
|
||||
height: clamp(96px, 15vw, 142px);
|
||||
margin: 0 auto 18px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.tutorial {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
.eyebrow {
|
||||
margin: 0 0 12px;
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: .28em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tutorial-content {
|
||||
background: #333;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.tutorial-content button {
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
font-size: 1rem;
|
||||
color: white;
|
||||
background: #007bff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tutorial.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#block-info.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#block-info {
|
||||
background: rgba(248, 252, 255, 0.94);
|
||||
border: 1px solid rgba(255, 255, 255, 0.72);
|
||||
border-radius: 22px;
|
||||
padding: 18px;
|
||||
width: 280px;
|
||||
text-align: center;
|
||||
font-family: "Trebuchet MS", Verdana, sans-serif;
|
||||
color: #102033;
|
||||
font-size: 14px;
|
||||
z-index: 10;
|
||||
animation: fade-in 0.5s ease-out;
|
||||
position: absolute;
|
||||
box-shadow: 0 24px 60px rgba(9, 24, 43, 0.24);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
#block-info h1 {
|
||||
margin: 0 0 8px;
|
||||
color: #102033;
|
||||
}
|
||||
|
||||
#block-info p {
|
||||
#welcome-text {
|
||||
margin: 0;
|
||||
color: #496071;
|
||||
line-height: 1.45;
|
||||
font-size: clamp(2.25rem, 6vw, 4.4rem);
|
||||
font-weight: bold;
|
||||
line-height: 1.08;
|
||||
letter-spacing: -.055em;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
.welcome-intro {
|
||||
margin: 21px 0 28px;
|
||||
color: var(--muted);
|
||||
font-size: clamp(.94rem, 1.5vw, 1.08rem);
|
||||
line-height: 1.6;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
#projects {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
background-color: #5a322a;
|
||||
height: 100%;
|
||||
display: none
|
||||
}
|
||||
|
||||
.project {
|
||||
flex: 1;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.project h3 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 10px 16px;
|
||||
color: white;
|
||||
background: #102033;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 10px 24px rgba(9, 24, 43, 0.16);
|
||||
font-family: inherit;
|
||||
transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 14px 30px rgba(9, 24, 43, 0.22);
|
||||
}
|
||||
|
||||
#turn-device-sideways {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mobile-controls {
|
||||
position: fixed;
|
||||
bottom: 14px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#interact-character-button {
|
||||
position: absolute;
|
||||
bottom: 66px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #2f7dd3;
|
||||
}
|
||||
|
||||
#interact-button,
|
||||
#move-left-button,
|
||||
#jump-button,
|
||||
#move-right-button {
|
||||
display: inline-block;
|
||||
padding: 12px 18px;
|
||||
font-size: 16px;
|
||||
background: rgba(16, 32, 51, 0.88);
|
||||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||
backdrop-filter: blur(10px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#mobile-controls button:active {
|
||||
background-color: #2f7dd3;
|
||||
transform: translateY(1px) scale(0.98);
|
||||
}
|
||||
|
||||
#npc-dialog {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
background: rgba(248, 252, 255, 0.94);
|
||||
padding: 24px;
|
||||
border-radius: 26px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.72);
|
||||
box-shadow: 0 30px 80px rgba(9, 24, 43, 0.28);
|
||||
backdrop-filter: blur(16px);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#npc-dialog p {
|
||||
color: #102033;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#npc-dialog button {
|
||||
width: 100%;
|
||||
background: #102033;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#mobile-controls {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 480px) {
|
||||
#welcome-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#enter-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#turn-device-sideways {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.dark-mode a {
|
||||
color: #BB86FC;
|
||||
}
|
||||
|
||||
.dark-mode button {
|
||||
background-color: #333;
|
||||
min-width: 172px;
|
||||
min-height: 54px;
|
||||
padding: 9px 22px;
|
||||
border: 3px solid #162b3c;
|
||||
border-radius: 2px;
|
||||
background: #244d69;
|
||||
box-shadow: 5px 5px 0 #162b3c;
|
||||
color: #fff;
|
||||
border-color: #444;
|
||||
font-size: 1.08rem;
|
||||
font-weight: bold;
|
||||
transition: transform .12s ease, box-shadow .12s ease;
|
||||
}
|
||||
|
||||
.dark-mode #welcome-screen {
|
||||
background-color: #333;
|
||||
#enter-button:hover {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 3px 3px 0 #162b3c;
|
||||
}
|
||||
|
||||
.dark-mode #game-container {
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.dark-mode .content-section,
|
||||
.dark-mode .project {
|
||||
background-color: #1e1e1e;
|
||||
color: #fff;
|
||||
#enter-button span { margin-left: 15px; }
|
||||
.control-guide {
|
||||
max-width: 520px;
|
||||
margin: 34px auto 0;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(24,43,61,.4);
|
||||
color: var(--muted);
|
||||
font-size: .78rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.dark-mode-toggle {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1000;
|
||||
background: black;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
z-index: 40;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 0;
|
||||
border: 2px solid var(--line);
|
||||
border-radius: 2px;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
}
|
||||
.dark-mode-toggle:hover { background: var(--panel); }
|
||||
.theme-icon { font-size: 1.4rem; line-height: 1; }
|
||||
.theme-label {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
body.menu-open .dark-mode-toggle {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dark-mode-toggle.dark-mode {
|
||||
background: white;
|
||||
#sound-toggle {
|
||||
position: fixed;
|
||||
bottom: 14px;
|
||||
left: 14px;
|
||||
z-index: 20;
|
||||
display: none;
|
||||
place-items: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 0;
|
||||
border: 2px solid var(--line);
|
||||
border-radius: 2px;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
body.game-started #sound-toggle { display: grid; }
|
||||
#sound-toggle[hidden], body.menu-open #sound-toggle { display: none; }
|
||||
#sound-toggle:hover { background: var(--panel); }
|
||||
#sound-toggle[aria-pressed="false"]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 29px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.dark-mode body {
|
||||
background-color: #000;
|
||||
#game-container {
|
||||
position: relative;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
background: #b4d8ed;
|
||||
opacity: 0;
|
||||
transition: opacity .75s ease;
|
||||
}
|
||||
#game-container.visible { opacity: 1; }
|
||||
#game-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.dark-mode #main-content {
|
||||
background-color: #000;
|
||||
#block-info {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
width: min(300px, calc(100vw - 30px));
|
||||
padding: 16px;
|
||||
border: 2px solid var(--line);
|
||||
border-radius: 2px;
|
||||
background: var(--panel);
|
||||
color: var(--ink);
|
||||
}
|
||||
#block-info h1 { margin: 0 0 8px; font-size: 1.1rem; }
|
||||
#block-info p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
|
||||
body.menu-open #block-info { display: none; }
|
||||
|
||||
#projects { display: none; }
|
||||
|
||||
#snow-container {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
body.menu-open #snow-container { display: none; }
|
||||
.snowflake {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #fff;
|
||||
opacity: .8;
|
||||
animation: fall linear infinite;
|
||||
}
|
||||
.paused .snowflake { animation-play-state: paused; }
|
||||
@keyframes fall { to { transform: translateY(110vh); } }
|
||||
|
||||
#npc-dialog {
|
||||
position: fixed;
|
||||
top: clamp(20px, 8vh, 80px);
|
||||
left: 50%;
|
||||
z-index: 30;
|
||||
width: min(540px, calc(100vw - 30px));
|
||||
max-height: calc(100dvh - 40px);
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
border: 3px solid var(--line);
|
||||
border-radius: 2px;
|
||||
background: var(--panel);
|
||||
color: var(--ink);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.dialog-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
font-size: 1.05rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
#npc-dialog-close {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 2px solid var(--line);
|
||||
border-radius: 2px;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
#npc-dialog-text {
|
||||
margin: 18px 0 20px;
|
||||
color: var(--muted);
|
||||
font-size: .86rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
#npc-dialog-content > button:not(#npc-dialog-close) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
margin-top: 8px;
|
||||
padding: 9px 12px;
|
||||
border: 2px solid var(--line);
|
||||
border-radius: 2px;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-size: .82rem;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
#npc-dialog-content > button:not(#npc-dialog-close):hover { background: var(--panel); }
|
||||
.dialog-hint { margin: 17px 0 0; color: var(--muted); font-size: .72rem; }
|
||||
|
||||
#mobile-controls { display: none; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#welcome-screen { padding: 70px 20px 26px; }
|
||||
#welcome-text { font-size: clamp(2.15rem, 11vw, 3.4rem); }
|
||||
.control-guide { margin-top: 27px; font-size: .72rem; }
|
||||
#sound-toggle { top: 14px; right: 64px; bottom: auto; left: auto; }
|
||||
body.game-started #mobile-controls {
|
||||
position: fixed;
|
||||
right: 12px;
|
||||
bottom: max(12px, env(safe-area-inset-bottom));
|
||||
left: 12px;
|
||||
z-index: 6;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 7px;
|
||||
pointer-events: none;
|
||||
}
|
||||
#mobile-controls button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 52px;
|
||||
height: 52px;
|
||||
padding: 0 10px;
|
||||
border: 2px solid #a4c1d2;
|
||||
border-radius: 2px;
|
||||
background: #18374d;
|
||||
color: #fff;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
pointer-events: auto;
|
||||
touch-action: none;
|
||||
}
|
||||
#mobile-controls button:active { background: #326789; }
|
||||
#mobile-controls .hidden, body.menu-open #mobile-controls { display: none; }
|
||||
#interact-button { margin-left: auto; font-size: .84rem !important; }
|
||||
#interact-character-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 61px;
|
||||
background: #265d82 !important;
|
||||
font-size: .84rem !important;
|
||||
}
|
||||
#npc-dialog { padding: 16px; }
|
||||
}
|
||||
|
||||
.dark-mode #welcome-screen {
|
||||
background-color: #333;
|
||||
@media (max-width: 390px) {
|
||||
#mobile-controls button { min-width: 45px; height: 48px; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: .01ms !important;
|
||||
transition-duration: .01ms !important;
|
||||
}
|
||||
.snowflake { display: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user