justin/sotf-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draw tree line as inline SVG and declare dark color scheme

Browse Source
This commit is contained in:
Justin Oros
2026-09-21 23:43:36 -07:00
parent 7da27df0d5
commit 7db7fd1866
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+9
View File
@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark">
<title>SOTF Inventory Editor</title> <title>SOTF Inventory Editor</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌲</text></svg>"> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌲</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -16,6 +17,14 @@
<h1>Inventory</h1> <h1>Inventory</h1>
<p class="subtitle">A save editor for Sons of the Forest. Load your save, set your counts, download the new file.</p> <p class="subtitle">A save editor for Sons of the Forest. Load your save, set your counts, download the new file.</p>
</div> </div>
<svg class="treeline" aria-hidden="true" focusable="false">
<defs>
<pattern id="trees" width="120" height="90" patternUnits="userSpaceOnUse">
<path transform="scale(1 1.5)" fill="currentColor" d="M0 60 L0 44 L8 30 L5 30 L12 16 L9 16 L16 2 L23 16 L20 16 L27 30 L24 30 L32 44 L32 60 Z M30 60 L38 40 L35 40 L42 26 L39 26 L46 14 L53 26 L50 26 L57 40 L54 40 L62 60 Z M58 60 L66 36 L63 36 L71 20 L68 20 L76 6 L84 20 L81 20 L89 36 L86 36 L94 60 Z M90 60 L97 44 L94 44 L101 30 L98 30 L105 20 L112 30 L109 30 L116 44 L113 44 L120 60 Z"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#trees)"/>
</svg>
</header> </header>
<main> <main>
styles.css
+5 -4
View File
@@ -1,4 +1,5 @@
:root { :root {
color-scheme: dark;
--spruce: #0f1512; --spruce: #0f1512;
--spruce-2: #161f1a; --spruce-2: #161f1a;
--spruce-3: #1f2a23; --spruce-3: #1f2a23;
@@ -35,14 +36,14 @@ body {
overflow: hidden; overflow: hidden;
} }
.hero::after { .treeline {
content: "";
position: absolute; position: absolute;
left: 0; left: 0;
right: 0;
bottom: -1px; bottom: -1px;
width: 100%;
height: 90px; height: 90px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath fill='%230f1512' d='M0 60 L0 44 L8 30 L5 30 L12 16 L9 16 L16 2 L23 16 L20 16 L27 30 L24 30 L32 44 L32 60 Z M30 60 L38 40 L35 40 L42 26 L39 26 L46 14 L53 26 L50 26 L57 40 L54 40 L62 60 Z M58 60 L66 36 L63 36 L71 20 L68 20 L76 6 L84 20 L81 20 L89 36 L86 36 L94 60 Z M90 60 L97 44 L94 44 L101 30 L98 30 L105 20 L112 30 L109 30 L116 44 L113 44 L120 60 Z'/%3E%3C/svg%3E") repeat-x bottom / 120px 90px; color: var(--spruce);
display: block;
} }
.hero-inner { .hero-inner {