From 84a295f0116a4562c891e8166a425346fb8bfec5 Mon Sep 17 00:00:00 2001 From: webfussel Date: Tue, 27 May 2025 21:42:49 +0200 Subject: [PATCH] ADD: Pricing charts layout Added column based pricing chart layout, add nuxt/fonts --- app/assets/css/button.css | 45 +- app/assets/css/fonts.css | 24 - app/assets/css/header.css | 2 +- app/assets/css/pricing.css | 168 +--- app/components/Flatrate.vue | 68 +- nuxt.config.ts | 4 - package-lock.json | 1350 +++++++++++++++++++++++++--- package.json | 1 + public/fonts/opensans.woff2 | Bin 16720 -> 0 bytes public/fonts/roboto_con_bold.woff2 | Bin 15660 -> 0 bytes public/fonts/roboto_con_reg.woff2 | Bin 15700 -> 0 bytes 11 files changed, 1310 insertions(+), 352 deletions(-) delete mode 100755 app/assets/css/fonts.css delete mode 100755 public/fonts/opensans.woff2 delete mode 100755 public/fonts/roboto_con_bold.woff2 delete mode 100755 public/fonts/roboto_con_reg.woff2 diff --git a/app/assets/css/button.css b/app/assets/css/button.css index 69b21ba..b86e8fd 100755 --- a/app/assets/css/button.css +++ b/app/assets/css/button.css @@ -1,5 +1,6 @@ .Button { all: unset; + font-family: 'Roboto Condensed', sans-serif; transition: 250ms; cursor: pointer; padding: 1rem 1.5rem; @@ -9,7 +10,6 @@ align-items: center; justify-content: center; gap: 1rem; - font-weight: bold; &.default { background: var(--color-orange); @@ -49,49 +49,6 @@ } } -.DualButton { - --size: 2.2rem; - display: flex; - width: 100%; - - & .divider { - display: flex; - align-items: center; - justify-content: center; - background-color: var(--color-black); - color: var(--color-white); - border-radius: 9999px; - width: var(--size); - height: var(--size); - padding: var(--size); - font-size: 1.2rem; - z-index: 1; - margin-left: calc(var(--size) * -1 - 25px); - border: 2px solid var(--color-black); - } - - .Button { - border: 2px solid currentColor; - } - - & .Button:hover { - outline: none; - box-shadow: none; - background-color: var(--color-black); - color: var(--color-white); - border-color: var(--color-orange); - } - - & .Button:first-child { - padding-right: calc(var(--size) * 2); - } - - & .Button:last-child { - padding-left: calc(var(--size) * 2); - margin-left: calc(var(--size) * -1 - 25px); - } -} - .button-wrapper { border-radius: 99999px; } \ No newline at end of file diff --git a/app/assets/css/fonts.css b/app/assets/css/fonts.css deleted file mode 100755 index e4a4fec..0000000 --- a/app/assets/css/fonts.css +++ /dev/null @@ -1,24 +0,0 @@ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - font-stretch: 100%; - font-display: swap; - src: url('/fonts/opensans.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url('/fonts/roboto_con_reg.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('/fonts/roboto_con_bold.woff2') format('woff2'); -} diff --git a/app/assets/css/header.css b/app/assets/css/header.css index b3f83fd..7ed1b7b 100755 --- a/app/assets/css/header.css +++ b/app/assets/css/header.css @@ -3,6 +3,7 @@ } .Header { + font-family: 'Roboto Condensed', sans-serif; padding: 15px calc(15vw - 30px); width: 100%; background: transparent; @@ -31,7 +32,6 @@ } & strong { - font-family: 'Roboto Condensed', sans-serif; font-size: 1.5rem; flex: 1.5; display: flex; diff --git a/app/assets/css/pricing.css b/app/assets/css/pricing.css index fa2d7d1..eef6e34 100644 --- a/app/assets/css/pricing.css +++ b/app/assets/css/pricing.css @@ -1,91 +1,45 @@ .Pricing { display: grid; - grid-template-columns: max-content 1fr max-content; - border-radius: 20px; - - & article:first-child { - border-radius: 20px 20px 0 0; - - & header, - & main, - & footer { - padding-bottom: 1.5rem; - } - - & header { - background-color: var(--color-orange-dark); - color: var(--color-white); - - & .bg-icon { - top: 60%; - } - } - - & .cols { - & li .value { - font-size: 1.5rem; - font-weight: bold; - } - } - } - - & article:last-child { - border-radius: 0 0 20px 20px; - - & header, - & main, - & footer { - padding-top: 1.5rem; - } - - & header { - background-color: var(--color-orange-dark); - color: var(--color-white); - } - - & .cols { - & li .value { - font-size: 1.5rem; - font-weight: bold; - } - } - } - - & article:nth-child(2) { - width: 105%; - margin-left: -2.5%; - margin-right: -2.5%; - border-radius: 20px; - z-index: 2; - - & header { - --size-difference: 7rem; - width: calc(100% - 2rem); - padding-top: var(--size-difference); - padding-bottom: var(--size-difference); - background-color: var(--color-orange); - color: var(--color-black); - - & .bg-icon { - right: 20%; - } - } - - & ul { - & li .value { - font-size: 3rem; - font-weight: bold; - } - } - } + grid-template-rows: 150px auto auto auto 1fr; & article { display: grid; - grid-column: 1 / -1; - grid-template-columns: subgrid; + grid-template-rows: subgrid; + grid-row: 1 / -1; background-color: var(--color-orange-black); overflow: hidden; + &:nth-child(2) { + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; + } + + &:nth-child(4) { + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + } + + &:nth-child(3) { + z-index: 100; + scale: 1.05; + border-radius: 20px; + } + + & .value { + padding: 2rem; + text-align: center; + + &.fat { + font-family: 'Roboto Condensed', sans-serif; + font-weight: bold; + font-size: 1.5rem; + } + + &.odd { + background: var(--color-black); + } + } + & header, & main, & footer { @@ -106,15 +60,19 @@ } } - & main { - background-color: var(--color-orange-black); - z-index: 1; + &:nth-child(3) header { + background: var(--color-orange); + color: var(--color-black); + } + + &:not(:nth-child(3)) header { + background: var(--color-orange-dark); + color: var(--color-white); } & header { position: relative; - padding-right: 8rem; - width: calc(100% + 8rem); + width: 100%; & strong { font-size: 2rem; @@ -124,49 +82,11 @@ & .bg-icon { position: absolute; top: 50%; - right: 40%; + right: 25%; translate: 50% -50%; font-size: 6rem; opacity: 0.15; } } - - & li { - display: flex; - align-items: center; - gap: .5rem; - } - - & .list { - display: flex; - flex-direction: column; - gap: .5rem; - - & .point-icon { - color: var(--color-orange); - } - } - - & .list-container { - display: flex; - justify-content: center; - gap: 4rem; - } - - & .cols { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-evenly; - gap: 1rem; - - & li { - flex-direction: column; - } - - & .color-icon { - color: var(--color-orange); - } - } } } \ No newline at end of file diff --git a/app/components/Flatrate.vue b/app/components/Flatrate.vue index 87d03f8..f8a65de 100755 --- a/app/components/Flatrate.vue +++ b/app/components/Flatrate.vue @@ -7,7 +7,14 @@ Hier gibt's die Entwickler-Flat für planbare Kosten und On-Demand-Entwicklung.

-
+
+
+

Gleichzeitige Tickets

+

Erreichbarkeit

+

Monatlicher Preis

+
+
+
{{service.title}}

{{service.smallClaim}}

@@ -15,14 +22,7 @@
-
- -
+

{{ typeof point === 'number' ? intl.format(point) : point }}