webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: normalized and centralized sizes and padding

Browse source
This commit is contained in:
Robert Janus 2025-05-14 10:58:19 +02:00
parent 38cd37cf74
commit e591c276f5
11 changed files with 108 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

90
app/assets/styles/general.css
View file

@ -1,11 +1,4 @@
:root {
--padding-default: 1rem;
--padding-small: 0.5rem;
--padding-large: 2rem;
--radius-default: 3px;
--radius-border: 15px;
--transition-default: 150ms;
--color-success: #328104;
--color-error: #a20606;
--color-blue-light: #0ddce7;
@ -35,6 +28,9 @@
--color-accent-dark: var(--color-green-dark);
--color-accent-darkest: var(--color-green-darkest);
--color-text: var(--color-darkest);
--color-text-invert: var(--color-lightest);
--color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light));
--color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark));
--color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light));
@ -45,6 +41,28 @@
--box-shadow-upper: 0 -3px 6px rgba(0, 0, 0, 0.16), 0 -3px 6px rgba(0, 0, 0, 0.23);
--box-shadow-z2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
--box-shadow-inset: inset 0 3px 6px rgba(0, 0, 0, 0.16), inset 0 3px 6px rgba(0, 0, 0, 0.23);
/* Font Sizes & Scaling Factor*/
--scaling-factor: 1.25;
--font-size-normal: 1rem;
--font-size-s: calc(var(--font-size-normal) / var(--scaling-factor));
--font-size-xs: calc(var(--font-size-s) / var(--scaling-factor));
--font-size-l: calc(var(--font-size-normal) * var(--scaling-factor));
--font-size-xl: calc(var(--font-size-l) * var(--scaling-factor));
--font-size-xxl: calc(var(--font-size-xl) * var(--scaling-factor));
/* Paddings depend on Font-Size */
--padding-default: var(--font-size-normal);
--padding-s: calc(var(--padding-default) / var(--scaling-factor));
--padding-xs: calc(var(--padding-s) / var(--scaling-factor));
--padding-xxs: calc(var(--padding-xs) / var(--scaling-factor));
--padding-l: calc(var(--padding-default) * var(--scaling-factor));
--padding-xl: calc(var(--padding-l) * var(--scaling-factor));
--radius-default: calc(var(--font-size-normal) / 3);
--radius-border: var(--font-size-normal);
--transition-default: 150ms;
}
* {
@ -59,43 +77,25 @@ body {
overflow-x: hidden;
font-family: sans-serif;
background: var(--color-main-darkest);
color: var(--color-text);
font-size: var(--font-size-normal);
}
.dot {
--size: 10px;
width: var(--size);
height: var(--size);
top: 5px;
right: 25%;
border-radius: 50%;
background-color: var(--color-accent);
display: inline-block;
margin-right: 0.5rem;
position: absolute;
box-shadow: var(--box-shadow-z2);
scale: 0;
transition: var(--transition-default);
&.visible {
scale: 1;
animation: pulse 1s infinite;
}
h1, h2, h3 {
margin: var(--padding-xl) 0 var(--padding-default);
text-wrap: balance;
hyphens: auto;
font-size: var(--font-size-xl);
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
h2 {
margin: var(--padding-l) 0 var(--padding-default);
font-size: var(--font-size-l);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
h3 {
margin: var(--padding-default) 0 var(--padding-default);
font-size: var(--font-size-normal);
}
.card {
@ -115,7 +115,7 @@ body {
}
.text-white {
color: var(--color-lightest);
color: var(--color-text-invert);
}
.bg-main {
@ -135,7 +135,7 @@ body {
}
.gap-default {
gap: 1rem;
gap: var(--padding-default);
}
.bg-blue {
@ -147,13 +147,13 @@ body {
}
.padding {
gap: 1rem;
gap: var(--padding-default);
padding: var(--padding-default);
}
.padding-small {
gap: 1rem;
padding: var(--padding-small);
gap: var(--padding-default);
padding: var(--padding-s);
}
.roboto-condensed {
@ -170,5 +170,5 @@ body {
.grow {
flex-grow: 1;
height: 10px;
height: var(--padding-s);
}