webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ADD: Pricing charts layout

Browse source 
Added column based pricing chart layout, add nuxt/fonts
This commit is contained in:
webfussel 2025-05-27 21:42:49 +02:00
parent f263a5574a
commit 84a295f011
11 changed files with 1310 additions and 352 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/assets/css/button.css
View file

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

24
app/assets/css/fonts.css
View file

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

2
app/assets/css/header.css
View file

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

168
app/assets/css/pricing.css
View file

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