fix: normalized and centralized sizes and padding

app/assets/styles/button.css

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

app/assets/styles/buttonGroup.css

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

app/assets/styles/dialog.css

@@ -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 {

app/assets/styles/footer.css

@@ -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);

app/assets/styles/form/search.css

@@ -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;
     }
 }

app/assets/styles/form/textfield.css

@@ -1,8 +1,8 @@
 .TextField {
   --border-color: var(--color-light);
   --label-color: var(--color-middle);
-  --label-position-top: 0.4em;
+  --label-position-top: var(--font-size-normal);
-  --label-font-size: 1rem;
+  --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-position-top: calc(-1 * var(--font-size-normal));
-    --label-font-size: 0.8rem;
+    --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;
+    padding: var(--padding-xxs) 0;
-    left: 1.8rem;
+    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);
+    padding: var(--padding-s);
-    font-size: 1rem;
+    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);
   }
 }

app/assets/styles/general.css

@@ -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 {
+h1, h2, h3 {
-  --size: 10px;
+  margin: var(--padding-xl) 0 var(--padding-default);
-  width: var(--size);
+  text-wrap: balance;
-  height: var(--size);
+  hyphens: auto;
-  top: 5px;
+  font-size: var(--font-size-xl);
-  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;
-  }
 }
 
-@keyframes pulse {
+h2 {
-  0% {
+  margin: var(--padding-l) 0 var(--padding-default);
-    transform: scale(0.95);
+  font-size: var(--font-size-l);
-    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);
-  }
 
-  100% {
+h3 {
-    transform: scale(0.95);
+  margin: var(--padding-default) 0 var(--padding-default);
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+  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;
+  gap: var(--padding-default);
-  padding: var(--padding-small);
+  padding: var(--padding-s);
 }
 
 .roboto-condensed {
@@ -170,5 +170,5 @@ body {
 
 .grow {
   flex-grow: 1;
-  height: 10px;
+  height: var(--padding-s);
 }

app/assets/styles/header.css

@@ -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;
         }

app/assets/styles/page.css

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

app/assets/styles/priceCard.css

@@ -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;
                 }

app/assets/styles/toolbar.css

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