From e591c276f5d8d1511cdf977c01a483e978979e1d Mon Sep 17 00:00:00 2001 From: Robert Janus Date: Wed, 14 May 2025 10:58:19 +0200 Subject: [PATCH 1/4] fix: normalized and centralized sizes and padding --- app/assets/styles/button.css | 24 ++++---- app/assets/styles/buttonGroup.css | 4 +- app/assets/styles/dialog.css | 4 +- app/assets/styles/footer.css | 10 ++-- app/assets/styles/form/search.css | 6 +- app/assets/styles/form/textfield.css | 22 +++---- app/assets/styles/general.css | 90 ++++++++++++++-------------- app/assets/styles/header.css | 12 ++-- app/assets/styles/page.css | 12 +++- app/assets/styles/priceCard.css | 22 +++---- app/assets/styles/toolbar.css | 3 +- 11 files changed, 108 insertions(+), 101 deletions(-) diff --git a/app/assets/styles/button.css b/app/assets/styles/button.css index 11a6a95..e334808 100755 --- a/app/assets/styles/button.css +++ b/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); } } } \ No newline at end of file diff --git a/app/assets/styles/buttonGroup.css b/app/assets/styles/buttonGroup.css index 4b46732..bb8ffd8 100644 --- a/app/assets/styles/buttonGroup.css +++ b/app/assets/styles/buttonGroup.css @@ -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); diff --git a/app/assets/styles/dialog.css b/app/assets/styles/dialog.css index afa1065..b24cc61 100644 --- a/app/assets/styles/dialog.css +++ b/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 { diff --git a/app/assets/styles/footer.css b/app/assets/styles/footer.css index baaa1fe..5d2f50c 100644 --- a/app/assets/styles/footer.css +++ b/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); diff --git a/app/assets/styles/form/search.css b/app/assets/styles/form/search.css index 5a30772..e03c6a4 100644 --- a/app/assets/styles/form/search.css +++ b/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; } } \ No newline at end of file diff --git a/app/assets/styles/form/textfield.css b/app/assets/styles/form/textfield.css index b6c1959..b0dd28d 100755 --- a/app/assets/styles/form/textfield.css +++ b/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-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); } } diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css index 672acd2..4130039 100755 --- a/app/assets/styles/general.css +++ b/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 { - --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); } \ No newline at end of file diff --git a/app/assets/styles/header.css b/app/assets/styles/header.css index 6732374..6b4200d 100755 --- a/app/assets/styles/header.css +++ b/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; } diff --git a/app/assets/styles/page.css b/app/assets/styles/page.css index d621995..61f9345 100644 --- a/app/assets/styles/page.css +++ b/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); } \ No newline at end of file diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css index 4abf44e..9068df1 100755 --- a/app/assets/styles/priceCard.css +++ b/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; } diff --git a/app/assets/styles/toolbar.css b/app/assets/styles/toolbar.css index 7a39e32..c9aec5a 100755 --- a/app/assets/styles/toolbar.css +++ b/app/assets/styles/toolbar.css @@ -8,7 +8,6 @@ box-shadow: var(--box-shadow-upper); & > .Button { - --padding: 1rem; - font-size: 1rem; + font-size: var(--font-size-normal); } } \ No newline at end of file From dd707bbf6211155fcee73549b55eb23baa38beb7 Mon Sep 17 00:00:00 2001 From: Robert Janus Date: Thu, 15 May 2025 14:12:40 +0200 Subject: [PATCH 2/4] add: general structure for landingpage design --- app/app.vue | 14 ++++---------- app/assets/styles/general.css | 5 +++++ app/assets/styles/landingpage.css | 30 ++++++++++++++++++++++++++++++ app/layouts/default.vue | 11 +++++++++++ app/layouts/landingpage.vue | 10 ++++++++++ app/pages/landingpage.vue | 24 ++++++++++++++++++++++++ nuxt.config.ts | 1 + public/img/hero-image.webp | Bin 0 -> 26630 bytes 8 files changed, 85 insertions(+), 10 deletions(-) mode change 100755 => 100644 app/app.vue create mode 100644 app/assets/styles/landingpage.css create mode 100755 app/layouts/default.vue create mode 100644 app/layouts/landingpage.vue create mode 100644 app/pages/landingpage.vue create mode 100644 public/img/hero-image.webp diff --git a/app/app.vue b/app/app.vue old mode 100755 new mode 100644 index a738821..91fe27f --- a/app/app.vue +++ b/app/app.vue @@ -1,11 +1,5 @@ - \ No newline at end of file + + + + \ No newline at end of file diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css index 4130039..9e1e996 100755 --- a/app/assets/styles/general.css +++ b/app/assets/styles/general.css @@ -58,6 +58,7 @@ --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)); + --padding-xxl: calc(var(--padding-xl) * var(--scaling-factor)); --radius-default: calc(var(--font-size-normal) / 3); --radius-border: var(--font-size-normal); @@ -130,6 +131,10 @@ h3 { background-color: var(--color-main-dark); } +.bg-main-darkest { + background-color: var(--color-main-darkest); +} + .bg-main-dark-hover:hover { background-color: var(--color-main-dark); } diff --git a/app/assets/styles/landingpage.css b/app/assets/styles/landingpage.css new file mode 100644 index 0000000..66e1a84 --- /dev/null +++ b/app/assets/styles/landingpage.css @@ -0,0 +1,30 @@ +.home-hero { + background-image: url("/img/hero-image.webp"); + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + color: var(--color-text-invert); + text-align: center; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + + button { + margin: var(--padding-xxl) auto 0; + } + + .text { + padding: var(--padding-default); + } + + h1 { + font-size: var(--font-size-xxl); + } +} + +.home-text { + padding: var(--padding-xxl) var(--padding-default); + text-align: center; +} + diff --git a/app/layouts/default.vue b/app/layouts/default.vue new file mode 100755 index 0000000..cbd7b6c --- /dev/null +++ b/app/layouts/default.vue @@ -0,0 +1,11 @@ + + \ No newline at end of file diff --git a/app/layouts/landingpage.vue b/app/layouts/landingpage.vue new file mode 100644 index 0000000..e731440 --- /dev/null +++ b/app/layouts/landingpage.vue @@ -0,0 +1,10 @@ + + \ No newline at end of file diff --git a/app/pages/landingpage.vue b/app/pages/landingpage.vue new file mode 100644 index 0000000..102b124 --- /dev/null +++ b/app/pages/landingpage.vue @@ -0,0 +1,24 @@ + + + \ No newline at end of file diff --git a/nuxt.config.ts b/nuxt.config.ts index f1fe86c..68a8b95 100755 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -57,6 +57,7 @@ export default defineNuxtConfig({ './app/assets/styles/toolbar.css', './app/assets/styles/page.css', './app/assets/styles/dialog.css', + './app/assets/styles/landingpage.css', ], site: { diff --git a/public/img/hero-image.webp b/public/img/hero-image.webp new file mode 100644 index 0000000000000000000000000000000000000000..062741b91d9f76c5c41339d2bf9e560278717c58 GIT binary patch literal 26630 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 literal 0 HcmV?d00001 From 55fc3fe4e04ebd234077b5ebc4acc155a8637934 Mon Sep 17 00:00:00 2001 From: Robert Janus Date: Wed, 21 May 2025 13:28:57 +0200 Subject: [PATCH 3/4] fix: textfield-padding --- app/assets/styles/form/textfield.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/styles/form/textfield.css b/app/assets/styles/form/textfield.css index b0dd28d..3c528f0 100755 --- a/app/assets/styles/form/textfield.css +++ b/app/assets/styles/form/textfield.css @@ -31,7 +31,7 @@ & .wrapper { display: flex; align-items: center; - padding: var(--padding-xxs) var(--padding-s); + padding: var(--padding-xxs) var(--padding-xs); border: 1px solid var(--border-color); border-radius: var(--radius-default); } From f60719fa9e5c3305f564afc36b3a3f3518527706 Mon Sep 17 00:00:00 2001 From: webfussel Date: Thu, 22 May 2025 09:59:27 +0200 Subject: [PATCH 4/4] add: lp and navigation Added... a lot of stuff --- app/app.vue | 15 ++- app/assets/styles/dialog.css | 2 +- app/assets/styles/form/textfield.css | 39 +++--- app/assets/styles/general.css | 27 ++-- app/assets/styles/header.css | 83 +++++-------- app/assets/styles/landingpage.css | 2 +- app/assets/styles/navigation.css | 69 +++++++++++ app/assets/styles/page.css | 2 +- app/assets/styles/priceCard.css | 4 +- app/assets/styles/toolbar.css | 2 +- app/components/Pp/Form/TextField.vue | 21 ++-- app/components/Pp/Header.vue | 49 ++++---- app/components/Pp/Navigation.vue | 41 +++++++ app/components/Pp/PriceCardDialog.vue | 27 +++- app/composables/navigation.ts | 24 ++++ app/layouts/landingpage.vue | 1 + app/pages/index.vue | 169 +++----------------------- app/pages/landingpage.vue | 24 ---- app/pages/{other.vue => rechner.vue} | 61 ++++------ nuxt.config.ts | 1 + 20 files changed, 332 insertions(+), 331 deletions(-) create mode 100644 app/assets/styles/navigation.css create mode 100644 app/components/Pp/Navigation.vue create mode 100644 app/composables/navigation.ts mode change 100755 => 100644 app/pages/index.vue delete mode 100644 app/pages/landingpage.vue rename app/pages/{other.vue => rechner.vue} (74%) mode change 100644 => 100755 diff --git a/app/app.vue b/app/app.vue index 91fe27f..a084371 100644 --- a/app/app.vue +++ b/app/app.vue @@ -1,5 +1,18 @@ \ No newline at end of file + + + \ No newline at end of file diff --git a/app/assets/styles/dialog.css b/app/assets/styles/dialog.css index b24cc61..0f44254 100644 --- a/app/assets/styles/dialog.css +++ b/app/assets/styles/dialog.css @@ -7,7 +7,7 @@ dialog { border: none; border-radius: var(--radius-default); background: var(--color-lightest); - font-size: var(--font-size-normal); + font-size: var(--font-size-default); color: var(--color-darkest); position: relative; diff --git a/app/assets/styles/form/textfield.css b/app/assets/styles/form/textfield.css index 3c528f0..d2cfaf8 100755 --- a/app/assets/styles/form/textfield.css +++ b/app/assets/styles/form/textfield.css @@ -1,9 +1,9 @@ .TextField { --border-color: var(--color-light); --label-color: var(--color-middle); - --label-position-top: var(--font-size-normal); - --label-font-size: var(--font-size-normal); - --icon-color: var(--color-main-dark); + --label-position-top: var(--font-size-default); + --label-position-left: 2.5rem; + --label-font-size: var(--font-size-default); --message-color: var(--color-middle); position: relative; @@ -15,15 +15,11 @@ &:focus-within, &:has(input:not(:placeholder-shown)) { - --icon-color: var(--color-main-dark); --label-color: var(--color-main-dark); - --label-position-top: calc(-1 * var(--font-size-normal)); - --label-font-size: var(--font-size-s); } &.error { - --label-color: var(--color-error); - --icon-color: var(--color-error); + --label-color: var(--color-error) !important; --border-color: var(--color-error); --message-color: var(--color-error); } @@ -38,29 +34,38 @@ & label { position: absolute; - background: var(--color-lightest); - padding: var(--padding-xxs) 0; - left: var(--padding-s); + display: flex; + align-items: center; color: var(--label-color); - top: var(--label-position-top); - font-size: var(--font-size-normal); + gap: 2px; + top: -6px; + left: calc(var(--padding-xs) - 2px); + font-size: var(--font-size-s); transition: var(--transition-default); + + & > * { + background: var(--color-lightest); + padding: 0 2px; + } } & .icon { - color: var(--icon-color); + position: relative; + color: var(--label-color); + font-size: var(--font-size-default); + top: -1px; } & input { all: unset; - padding: var(--padding-s); - font-size: var(--font-size-normal); + padding: var(--padding-xxs) var(--padding-s) var(--padding-xxs) 0; + font-size: var(--font-size-s); width: 100%; flex: 25% 1 0; color: var(--color-darkest); } - & span { + & > span { color: var(--message-color); font-size: var(--font-size-xs); } diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css index 9e1e996..99a8bc6 100755 --- a/app/assets/styles/general.css +++ b/app/assets/styles/general.css @@ -1,7 +1,7 @@ :root { --color-success: #328104; --color-error: #a20606; - --color-blue-light: #0ddce7; + --color-blue-light: #d7e1f1; --color-blue: #05b0ff; --color-blue-dark: #0266f2; --color-blue-darkest: #013174; @@ -19,6 +19,7 @@ --color-green-darkest-most: #157c2a; --color-main: var(--color-blue); + --color-main-lightest: var(--color-blue-light); --color-main-light: var(--color-blue-light); --color-main-dark: var(--color-blue-dark); --color-main-darkest: var(--color-blue-darkest); @@ -44,24 +45,24 @@ /* 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-s: calc(var(--font-size-default) / var(--scaling-factor)); + --font-size-default: 1rem; + --font-size-l: calc(var(--font-size-default) * 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-xs: calc(var(--padding-s) / var(--scaling-factor)); + --padding-default: var(--font-size-default); + --padding-s: calc(var(--padding-default) / var(--scaling-factor)); --padding-l: calc(var(--padding-default) * var(--scaling-factor)); --padding-xl: calc(var(--padding-l) * var(--scaling-factor)); --padding-xxl: calc(var(--padding-xl) * var(--scaling-factor)); - --radius-default: calc(var(--font-size-normal) / 3); - --radius-border: var(--font-size-normal); + --radius-default: calc(var(--font-size-default) / 3); + --radius-border: var(--font-size-default); --transition-default: 150ms; } @@ -79,7 +80,7 @@ body { font-family: sans-serif; background: var(--color-main-darkest); color: var(--color-text); - font-size: var(--font-size-normal); + font-size: var(--font-size-default); } h1, h2, h3 { @@ -96,7 +97,11 @@ h2 { h3 { margin: var(--padding-default) 0 var(--padding-default); - font-size: var(--font-size-normal); + font-size: var(--font-size-default); +} + +a:has(button) { + text-decoration: none; } .card { diff --git a/app/assets/styles/header.css b/app/assets/styles/header.css index 6b4200d..6b61bc4 100755 --- a/app/assets/styles/header.css +++ b/app/assets/styles/header.css @@ -2,20 +2,37 @@ position: sticky; top: 0; z-index: 100; - background: var(--color-main-darkest); display: flex; align-items: center; gap: var(--padding-default); padding: var(--padding-default); + &:not(.lp) { + background: var(--color-main-darkest); + } + + &.lp { + position: absolute; + backdrop-filter: blur(10px); + mask: linear-gradient(to top, transparent, black 20%); + width: 100%; + top: 0; + } + & .logo { height: 40px; } + & .burger-button { + all: unset; + color: var(--color-lightest); + } + & header { display: flex; align-items: center; justify-content: space-between; + width: 100%; font-weight: bold; & a { @@ -42,61 +59,27 @@ font-weight: 100; } } + } - & input[type="checkbox"] { - display: none; + &:not(.lp) { + &:after, &:before { + content: ''; + display: block; + position: absolute; + bottom: calc(-1 * var(--radius-border)); + background: var(--color-blue-darkest); + width: var(--radius-border); + height: var(--radius-border); } - & input[type="checkbox"]:checked + nav { - translate: 0; - } - - & nav, - & ul { - gap: var(--padding-default); - } - - & nav { - position: fixed; - padding: var(--padding-default); - translate: 100% 0; - width: 100vw; + &:after { right: 0; - top: 0; - height: 100dvh; - transition: 150ms ease-in-out; - background: var(--color-lightest); - font-size: var(--font-size-xl); - align-items: end; - z-index: 100; + mask: radial-gradient(var(--radius-border) at 0 100%,#0000 98%,#000); } - & ul { - width: 100%; - align-items: center; - & li { - list-style: none; - } + &:before { + left: 0; + mask: radial-gradient(var(--radius-border) at 100% 100%,#0000 98%,#000); } } - - &:after, &:before { - content: ''; - display: block; - position: absolute; - bottom: calc(-1 * var(--radius-border)); - background: var(--color-blue-darkest); - width: var(--radius-border); - height: var(--radius-border); - } - - &:after { - right: 0; - mask: radial-gradient(var(--radius-border) at 0 100%,#0000 98%,#000); - } - - &:before { - left: 0; - mask: radial-gradient(var(--radius-border) at 100% 100%,#0000 98%,#000); - } } \ No newline at end of file diff --git a/app/assets/styles/landingpage.css b/app/assets/styles/landingpage.css index 66e1a84..5d45215 100644 --- a/app/assets/styles/landingpage.css +++ b/app/assets/styles/landingpage.css @@ -1,5 +1,5 @@ .home-hero { - background-image: url("/img/hero-image.webp"); + background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/img/hero-image.webp"); /* single color gradient for dark layer over image */ background-repeat: no-repeat; background-position: center center; background-size: cover; diff --git a/app/assets/styles/navigation.css b/app/assets/styles/navigation.css new file mode 100644 index 0000000..2b12356 --- /dev/null +++ b/app/assets/styles/navigation.css @@ -0,0 +1,69 @@ +.Navigation { + position: fixed; + display: flex; + justify-content: flex-end; + align-items: center; + z-index: 5000; + width: 100vw; + height: 100dvh; + right: 0; + top: 0; + transition: 150ms ease-in-out; + pointer-events: none; + + &.open { + pointer-events: all; + background: rgba(0, 0, 0, .5); + + & nav { + translate: -1rem 0; + } + } + + nav { + background: var(--color-lightest); + align-items: end; + box-shadow: var(--box-shadow-z2); + padding: var(--padding-default); + height: calc(100% - var(--padding-xxl)); + width: 70%; + translate: 100% 0; + transition: 150ms ease-in-out; + border-radius: var(--radius-default); + } + + & button { + justify-self: flex-end; + font-size: var(--font-size-xl); + } + + & ul { + width: 100%; + align-items: flex-start; + font-size: var(--font-size-l); + gap: var(--padding-default); + + & li { + list-style: none; + width: 100%; + + & a { + text-decoration: none; + display: flex; + align-items: center; + gap: var(--padding-default); + color: var(--color-middle); + border-radius: var(--radius-default); + padding: var(--padding-xs) var(--padding-s); + transition: var(--transition-default); + background: transparent; + cursor: pointer; + + &.active { + background: var(--color-main-light); + color: var(--color-main-dark); + } + } + } + } +} \ No newline at end of file diff --git a/app/assets/styles/page.css b/app/assets/styles/page.css index 61f9345..7dd7b75 100644 --- a/app/assets/styles/page.css +++ b/app/assets/styles/page.css @@ -60,7 +60,7 @@ } .content-text { - padding: var(--padding-xl) var(--padding-default) var(--padding-default); + padding: var(--padding-xl) var(--padding-default) 0; color: var(--color-darkest); text-align: center; } diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css index 9068df1..655f581 100755 --- a/app/assets/styles/priceCard.css +++ b/app/assets/styles/priceCard.css @@ -56,7 +56,7 @@ color: var(--color-darkest); & .icon { - font-size: var(--font-size-normal); + font-size: var(--font-size-default); cursor: pointer; } } @@ -104,7 +104,7 @@ } & > .pro { - font-size: var(--font-size-s); + font-size: var(--font-size-xs); color: var(--color-middle); font-weight: lighter; } diff --git a/app/assets/styles/toolbar.css b/app/assets/styles/toolbar.css index c9aec5a..d78e9f7 100755 --- a/app/assets/styles/toolbar.css +++ b/app/assets/styles/toolbar.css @@ -8,6 +8,6 @@ box-shadow: var(--box-shadow-upper); & > .Button { - font-size: var(--font-size-normal); + font-size: var(--font-size-default); } } \ No newline at end of file diff --git a/app/components/Pp/Form/TextField.vue b/app/components/Pp/Form/TextField.vue index 0c4f803..4e84828 100755 --- a/app/components/Pp/Form/TextField.vue +++ b/app/components/Pp/Form/TextField.vue @@ -1,9 +1,11 @@