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

24
app/assets/styles/button.css
View file

@ -1,5 +1,5 @@
.Button {
--padding: .2rem;
--padding: var(--padding-xs);
--background: var(--color-main-dark);
--color: var(--color-lightest);
--background-hover: var(--color-main-dark);
@ -8,7 +8,7 @@
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
gap: var(--padding-default);
cursor: pointer;
transition: var(--transition-default);
outline: none;
@ -19,13 +19,13 @@
&.transparent {
--background: transparent;
box-shadow: none;
padding: .5em 1.5em;
padding: var(--padding-s) var(--padding-l);
border-radius: var(--radius-default);
}
&.raised {
box-shadow: var(--box-shadow-z2);
padding: .5em 1.5em;
padding: var(--padding-s) var(--padding-l);
border-radius: var(--radius-default);
&.danger {
@ -37,7 +37,7 @@
&.text {
--background: transparent;
--color: var(--color-darkest);
padding: .5em 1.5em;
padding: var(--padding-s) var(--padding-l);
border-radius: var(--radius-default);
&:hover {
@ -62,13 +62,13 @@
justify-content: center;
align-items: center;
border-radius: 100%;
padding: .5rem;
padding: var(--padding-s);
}
&.cta {
background: var(--background);
color: var(--color);
padding: .5rem 1.5rem;
padding: var(--padding-s) var(--padding-l);
border-radius: var(--radius-default);
box-shadow: var(--box-shadow-z2);
@ -98,7 +98,7 @@
--color: var(--color-main-darkest);
border-radius: 100%;
padding: var(--padding);
font-size: 1.1em;
font-size: var(--font-size-l);
&:hover {
scale: 1.2;
@ -106,17 +106,17 @@
}
&.mini-button {
padding: .5rem 1.5rem;
padding: var(--padding-s) var(--padding-l);
display: flex;
flex-direction: column;
gap: .5rem;
gap: var(--padding-xs);
& > .icon {
font-size: 1.5rem;
font-size: var(--font-size-xl);
}
& > span {
font-size: .8rem;
font-size: var(--font-size-s);
}
}
}

4
app/assets/styles/buttonGroup.css
View file

@ -9,8 +9,8 @@
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .5rem;
gap: var(--padding-xs);
padding: var(--padding-s);
flex-grow: 1;
background: var(--background);
color: var(--color);

4
app/assets/styles/dialog.css
View file

@ -7,7 +7,7 @@ dialog {
border: none;
border-radius: var(--radius-default);
background: var(--color-lightest);
font-size: 1rem;
font-size: var(--font-size-normal);
color: var(--color-darkest);
position: relative;
@ -40,7 +40,7 @@ dialog {
& > .wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
gap: var(--padding-default);
}
& header {

10
app/assets/styles/footer.css
View file

@ -12,27 +12,27 @@
& .bottom {
display: flex;
gap: 1rem;
gap: var(--padding-default);
justify-content: space-between;
color: var(--color-light);
}
& .socials {
font-size: 1.5rem;
font-size: var(--font-size-xl);
justify-content: center;
margin-bottom: 2rem;
margin-bottom: var(--padding-xl);
}
& .data-links {
justify-content: flex-end;
font-size: .8rem;
font-size: var(--font-size-s);
}
& ul {
list-style: none;
display: flex;
align-items: center;
gap: 1rem;
gap: var(--padding-default);
& a {
color: var(--color-lightest);

6
app/assets/styles/form/search.css
View file

@ -1,15 +1,15 @@
.Search {
border-radius: 9999px;
background: var(--color-lightest);
padding: 0 1rem;
padding: 0 var(--padding-default);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
gap: var(--padding-default);
& > input {
all: unset;
flex-grow: 1;
padding: .5rem 0;
padding: var(--padding-s) 0;
}
}

22
app/assets/styles/form/textfield.css
View file

@ -1,8 +1,8 @@
.TextField {
--border-color: var(--color-light);
--label-color: var(--color-middle);
--label-position-top: 0.4em;
--label-font-size: 1rem;
--label-position-top: var(--font-size-normal);
--label-font-size: var(--font-size-normal);
--icon-color: var(--color-main-dark);
--message-color: var(--color-middle);
@ -17,8 +17,8 @@
&:has(input:not(:placeholder-shown)) {
--icon-color: var(--color-main-dark);
--label-color: var(--color-main-dark);
--label-position-top: -11px;
--label-font-size: 0.8rem;
--label-position-top: calc(-1 * var(--font-size-normal));
--label-font-size: var(--font-size-s);
}
&.error {
@ -31,7 +31,7 @@
& .wrapper {
display: flex;
align-items: center;
padding: 0.1rem 0.5rem;
padding: var(--padding-xxs) var(--padding-s);
border: 1px solid var(--border-color);
border-radius: var(--radius-default);
}
@ -39,11 +39,11 @@
& label {
position: absolute;
background: var(--color-lightest);
padding: 0.2rem;
left: 1.8rem;
padding: var(--padding-xxs) 0;
left: var(--padding-s);
color: var(--label-color);
top: var(--label-position-top);
font-size: var(--label-font-size);
font-size: var(--font-size-normal);
transition: var(--transition-default);
}
@ -53,8 +53,8 @@
& input {
all: unset;
padding: var(--padding-small);
font-size: 1rem;
padding: var(--padding-s);
font-size: var(--font-size-normal);
width: 100%;
flex: 25% 1 0;
color: var(--color-darkest);
@ -62,6 +62,6 @@
& span {
color: var(--message-color);
font-size: 0.6rem;
font-size: var(--font-size-xs);
}
}

88
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);
}

12
app/assets/styles/header.css
View file

@ -5,7 +5,7 @@
background: var(--color-main-darkest);
display: flex;
align-items: center;
gap: 1rem;
gap: var(--padding-default);
padding: var(--padding-default);
& .logo {
@ -26,7 +26,7 @@
& .header-text {
display: flex;
align-items: center;
gap: 1rem;
gap: var(--padding-default);
& > div {
display: flex;
@ -34,11 +34,11 @@
}
& .big {
font-size: 1.5em;
font-size: var(--font-size-xl);
}
& .small {
font-size: .8em;
font-size: var(--font-size-s);
font-weight: 100;
}
}
@ -53,7 +53,7 @@
& nav,
& ul {
gap: 1em;
gap: var(--padding-default);
}
& nav {
@ -66,7 +66,7 @@
height: 100dvh;
transition: 150ms ease-in-out;
background: var(--color-lightest);
font-size: 2em;
font-size: var(--font-size-xl);
align-items: end;
z-index: 100;
}

12
app/assets/styles/page.css
View file

@ -49,10 +49,18 @@
overflow: hidden;
background: var(--color-lightest);
height: 100%;
h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
p:first-of-type,
figure:first-of-type {
margin-top: 0;
}
}
.content-text {
padding: var(--padding-large) var(--padding-default) var(--padding-default);
padding: var(--padding-xl) var(--padding-default) var(--padding-default);
color: var(--color-darkest);
text-align: center;
}
@ -67,6 +75,6 @@
}
.Legal {
padding: var(--padding-large) var(--padding-default);
padding: var(--padding-l) var(--padding-default);
color: var(--color-darkest);
}

22
app/assets/styles/priceCard.css
View file

@ -15,7 +15,7 @@
& > * {
flex-grow: 1;
color: var(--color-lightest);
font-size: 2rem;
font-size: var(--font-size-xl);
display: flex;
align-items: center;
@ -26,13 +26,13 @@
& .bg-edit {
background: var(--color-main-dark);
padding: 2rem;
padding: var(--padding-xl);
text-align: left;
}
& .bg-delete {
background: var(--color-error);
padding: 2rem;
padding: var(--padding-xl);
text-align: right;
justify-content: flex-end;
}
@ -42,7 +42,7 @@
position: relative;
background: var(--color-lightest);
z-index: 2;
gap: 1rem;
gap: var(--padding-default);
padding: var(--padding-default);
&.animated {
@ -56,14 +56,14 @@
color: var(--color-darkest);
& .icon {
font-size: 1rem;
font-size: var(--font-size-normal);
cursor: pointer;
}
}
& .name-price {
display: flex;
gap: .5rem;
gap: var(--padding-xs);
& > span:nth-child(1) {
font-weight: bold;
@ -75,7 +75,7 @@
& > span:nth-child(2)::before {
content: '•';
margin-right: .5rem;
margin-right: var(--padding-xs);
color: var(--color-middle);
}
}
@ -84,19 +84,19 @@
display: flex;
flex-direction: row;
width: 100%;
gap: 1rem;
gap: var(--padding-default);
justify-content: space-between;
& > .info {
flex-grow: 0;
align-items: center;
gap: .25rem;
gap: var(--padding-xxs);
font-weight: bold;
& > .price {
display: flex;
align-items: center;
gap: .5rem;
gap: var(--padding-xs);
& > .icon {
color: var(--color-main-dark);
@ -104,7 +104,7 @@
}
& > .pro {
font-size: .6rem;
font-size: var(--font-size-s);
color: var(--color-middle);
font-weight: lighter;
}

3
app/assets/styles/toolbar.css
View file

@ -8,7 +8,6 @@
box-shadow: var(--box-shadow-upper);
& > .Button {
--padding: 1rem;
font-size: 1rem;
font-size: var(--font-size-normal);
}
}