andras/fleeting-garden
andras/fleeting-garden
Watch
1
0
Fork
You've already forked fleeting-garden
 0
Code Issues Pull requests 10 Projects Releases Packages Wiki Activity Actions

Add tiny UI

Browse source
This commit is contained in:
Andras Schmelczer 2023-04-30 11:27:26 +01:00
commit 6a752a57e9
No known key found for this signature in database
GPG key ID: FC8F2C3D3D1A718C
30 changed files with 627 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/style/vars.scss Normal file
View file

@ -0,0 +1,44 @@
@use 'mixins' as *;
:root {
--transition-time: 200ms;
--transition-time-long: 350ms;
--line-width: 4px;
--line-height: 1.125rem;
--accent-color: #b7455e;
--sun-color: #f7f78c;
--very-light-text-color: #ffffff;
--background: #ffffff;
--normal-text-color: #31343f;
--card-color: #ffffff;
--blurred-card-color: transparent;
--blur-radius: 12px;
--special-text-color: var(--accent-color);
--inset-shadow: inset 0 0 4px 1px rgba(0, 0, 0, 0.05), inset 0 0 5px rgba(0, 0, 0, 0.2);
--border-radius: 0.85rem;
--large-margin: 4.6rem;
--normal-margin: 2rem;
--small-margin: 1rem;
--shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.2);
--icon-size: 2.8rem;
--large-icon-size: 3.75rem;
--body-width: min(80%, 60rem);
}
@include on-small-screen {
:root {
--body-width: 90%;
--large-margin: 2.8rem;
--normal-margin: 2rem;
}
}
@include in-dark-mode {
--background: #242638;
--normal-text-color: #ffffff;
--card-color: #263551;
--blurred-card-color: #212f4a77;
--special-text-color: #ffffff;
--inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.5);
}