andras/fleeting-garden
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more cleaning up

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-16 20:45:42 +01:00
parent 2c7d72a699
commit 560398fefb
110 changed files with 933 additions and 2647 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/style/_app-shell.scss
View file

@ -47,27 +47,6 @@ html > body {
}
}
> .dev-stats-overlay {
position: absolute;
top: max(10px, env(safe-area-inset-top, 0px));
left: max(10px, env(safe-area-inset-left, 0px));
z-index: 6;
padding: 7px 9px;
border: 1px solid rgb(255 255 255 / 18%);
border-radius: 6px;
background: rgb(9 12 18 / 72%);
box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
color: rgb(255 255 255 / 90%);
font-family:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
monospace;
font-size: 11px;
line-height: 1.45;
pointer-events: none;
user-select: none;
white-space: pre;
}
> .errors-container {
position: absolute;
top: 0;

4
src/style/_control-dock.scss
View file

@ -17,7 +17,7 @@ html > body > aside.control-dock {
visibility 0s;
> .toolbar-row,
> .pages {
> .info-page {
pointer-events: auto;
}
@ -32,7 +32,7 @@ html > body > aside.control-dock {
visibility 0s var(--transition-time-long);
> .toolbar-row,
> .pages {
> .info-page {
pointer-events: none;
}
}

6
src/style/_garden-prompt.scss
View file

@ -29,9 +29,9 @@ html > body > .canvas-container > .garden-prompt {
inset 0 0 0 1px rgb(255 255 255 / 5%);
backdrop-filter: blur(12px);
color: rgb(255 255 255 / 94%);
font:
400 20px/1.2 'Open Sans',
sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.2;
text-shadow: 0 1px 12px rgb(0 0 0 / 58%);
}

13
src/style/_loading.scss
View file

@ -1,6 +1,4 @@
.loading-indicator {
--loading-progress: 0%;
position: absolute;
top: 50%;
left: 50%;
@ -46,9 +44,9 @@
> .loading-status {
color: rgb(255 255 255 / 88%);
font:
400 16px/1.25 'Open Sans',
sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.25;
text-align: center;
text-shadow: 0 1px 12px rgb(0 0 0 / 60%);
letter-spacing: 0.01em;
@ -56,6 +54,8 @@
}
> .loading-progress {
--loading-progress: 0%;
position: relative;
width: 100%;
height: 3px;
@ -64,7 +64,8 @@
background: rgb(255 255 255 / 14%);
box-shadow: 0 1px 6px rgb(0 0 0 / 28%);
> .loading-progress-fill {
&::before {
content: '';
position: absolute;
top: 0;
left: 0;

4
src/style/_motion.scss
View file

@ -12,9 +12,5 @@
}
}
}
&.is-loading aside.control-dock {
transform: translateY(0);
}
}
}

90
src/style/_panels.scss
View file

@ -1,18 +1,21 @@
@use 'mixins' as *;
html > body > aside.control-dock > .pages {
html > body > aside.control-dock > .info-page {
width: min(calc(100vw - 1rem), 560px);
max-height: min(58vh, 520px);
max-height: min(58dvh, 520px);
margin: 0 auto 10px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid rgb(255 255 255 / 54%);
border: 1px solid rgb(255 255 255 / 78%);
border-radius: 8px;
background-color: rgb(255 255 255 / 34%);
background:
linear-gradient(180deg, rgb(255 255 255 / 97%), rgb(243 247 239 / 96%)),
rgb(255 255 255);
color: rgb(24 30 27);
box-shadow:
0 18px 48px rgb(0 0 0 / 28%),
0 2px 10px rgb(0 0 0 / 16%);
0 20px 54px rgb(0 0 0 / 38%),
0 2px 12px rgb(0 0 0 / 22%);
backdrop-filter: blur(12px);
scrollbar-width: thin;
scrollbar-color: var(--main-color) transparent;
@ -38,38 +41,35 @@ html > body > aside.control-dock > .pages {
outline-offset: 3px;
}
&.info-page {
background:
linear-gradient(180deg, rgb(255 255 255 / 97%), rgb(243 247 239 / 96%)),
rgb(255 255 255);
border-color: rgb(255 255 255 / 78%);
color: rgb(24 30 27);
box-shadow:
0 20px 54px rgb(0 0 0 / 38%),
0 2px 12px rgb(0 0 0 / 22%);
> section {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: var(--normal-margin);
> section {
gap: 0.85rem;
h1 {
margin-bottom: 0;
color: rgb(16 24 20);
font-size: 2rem;
line-height: 1.1;
}
h1 {
margin-bottom: 0;
color: rgb(16 24 20);
}
p {
max-width: 54ch;
margin-bottom: 0;
color: rgb(42 48 45);
font-size: 1.1rem;
line-height: 1.65;
hyphens: auto;
}
p {
max-width: 54ch;
margin-bottom: 0;
color: rgb(42 48 45);
}
a {
color: rgb(0 84 120);
font-weight: 400;
a {
color: rgb(0 84 120);
font-weight: 400;
&:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
&:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
}
}
@ -85,30 +85,6 @@ html > body > aside.control-dock > .pages {
visibility: hidden;
}
> section {
display: flex;
flex-direction: column;
padding: var(--normal-margin);
h1 {
font-size: 2rem;
line-height: 1.1;
}
p {
margin-bottom: var(--small-margin);
color: var(--normal-text-color);
font:
400 1.1rem/1.65 'Open Sans',
sans-serif;
hyphens: auto;
}
a {
color: var(--accent-color);
}
}
@include on-small-screen {
max-height: min(54vh, 500px);
max-height: min(54dvh, 500px);

26
src/style/_toolbar.scss
View file

@ -36,6 +36,9 @@ $toolbar-icons: (
);
html > body > aside.control-dock > .toolbar-row {
--toolbar-background-opacity: 0%;
--toolbar-background-strength: 0;
display: flex;
align-items: stretch;
justify-content: center;
@ -46,9 +49,17 @@ html > body > aside.control-dock > .toolbar-row {
gap: clamp(6px, 1.8vw, 14px);
border-radius: 12px;
color: rgb(245 250 244 / 92%);
font:
400 13px/1 'Open Sans',
sans-serif;
background-color: rgb(5 8 13 / var(--toolbar-background-opacity));
box-shadow:
inset 0 0 0 1px rgb(255 255 255 / calc(var(--toolbar-background-strength) * 16%)),
inset 0 1px 0 rgb(255 255 255 / calc(var(--toolbar-background-strength) * 7%)),
0 14px 34px rgb(0 0 0 / calc(var(--toolbar-background-strength) * 28%));
backdrop-filter: blur(calc(var(--toolbar-background-strength) * 18px))
brightness(calc(1 - var(--toolbar-background-strength) * 0.38))
saturate(calc(1 - var(--toolbar-background-strength) * 0.18));
font-size: 13px;
font-weight: 400;
line-height: 1;
transition:
backdrop-filter var(--transition-time-long),
background-color var(--transition-time-long),
@ -139,15 +150,6 @@ html > body > aside.control-dock > .toolbar-row {
}
}
&.needs-contrast-background {
background: linear-gradient(180deg, rgb(22 28 36 / 72%), rgb(5 8 13 / 82%));
box-shadow:
inset 0 0 0 1px rgb(255 255 255 / 16%),
inset 0 1px 0 rgb(255 255 255 / 7%),
0 14px 34px rgb(0 0 0 / 28%);
backdrop-filter: blur(18px) brightness(0.62) saturate(0.82);
}
> .toolbar-shell > nav.buttons {
grid-area: nav;
display: flex;

12
src/style/common.scss
View file

@ -14,14 +14,6 @@
}
}
h1 {
font-family: 'Open Sans', sans-serif;
}
p {
font-family: 'Open Sans', sans-serif;
}
html {
height: 100%;
-webkit-font-smoothing: antialiased;
@ -29,6 +21,10 @@ html {
text-rendering: optimizeLegibility;
}
body {
font-family: 'Open Sans', sans-serif;
}
.visually-hidden {
position: absolute !important;
width: 1px !important;

6
src/style/fonts.scss
View file

@ -4,9 +4,5 @@
font-style: normal;
font-weight: 400;
font-display: swap;
src:
local(''),
url('../../assets/fonts/open-sans-v34-latin-regular.woff2') format('woff2'),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url('../../assets/fonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
src: url('../../assets/fonts/open-sans-v34-latin-regular.woff2') format('woff2');
}

1
src/style/vars.scss
View file

@ -3,7 +3,6 @@
--transition-time-long: 350ms;
--accent-color: rgb(6.39851188659668, 70.28645324707031, 102.23043060302734);
--main-color: #aaa;
--normal-text-color: #31343f;
--normal-margin: 2rem;
--small-margin: 1rem;
}