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

ADD: Pricing charts layout

Browse source 
Finished Pricing Charts
This commit is contained in:
webfussel 2025-05-28 06:30:44 +02:00
parent 84a295f011
commit a1a711b015
7 changed files with 300 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

18
app/assets/css/global.css
View file

@ -133,13 +133,27 @@ span.highlight {
}
span.chip {
background: var(--color-orange);
background: var(--background);
color: var(--color);
border-radius: 999px;
font-size: 1rem;
color: var(--color-black);
height: max-content;
padding: .5em 1em;
user-select: none;
display: flex;
align-items: center;
gap: .5em;
width: max-content;
&:not(.dark) {
--background: var(--color-orange);
--color: var(--color-black);
}
&.dark {
--background: var(--color-orange-dark);
--color: var(--color-white);
}
}
.card {

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

@ -1,6 +1,8 @@
.Pricing {
display: grid;
grid-template-rows: 150px auto auto auto 1fr;
grid-template-rows: auto auto 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-areas: "left middle right" "left middle right" "left middle right";
& article {
display: grid;
@ -8,42 +10,85 @@
grid-row: 1 / -1;
background-color: var(--color-orange-black);
overflow: hidden;
width: 100%;
&:nth-child(2) {
&:nth-child(1) {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
&:nth-child(4) {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
grid-area: left;
}
&:nth-child(3) {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
grid-area: right;
}
&:nth-child(2) {
z-index: 100;
scale: 1.05;
border-radius: 20px;
grid-area: middle;
}
& .price {
font-size: 3rem;
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .5rem;
& .post {
font-size: .8rem;
white-space: nowrap;
}
}
& .claim {
text-align: left;
}
& .conmin {
font-size: .8rem;
color: var(--color-white-transparent);
text-align: center;
}
& ul {
display: flex;
flex-direction: column;
gap: 1rem;
font-size: 1rem;
& li {
display: flex;
align-items: center;
gap: .5rem;
color: var(--color-white);
& .icon {
flex: 0 0 1.5rem;
&.yes {
color: var(--color-orange);
}
&.no {
color: var(--color-white-transparent);
}
}
}
}
& .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);
}
font-family: 'Roboto Condensed', sans-serif;
}
& header,
& main,
& footer {
padding: var(--spacing-standard);
padding: 1.5rem var(--spacing-standard);
display: flex;
flex-direction: column;
justify-content: center;
@ -51,21 +96,15 @@
& footer {
align-items: center;
color: var(--color-orange);
gap: .5rem;
& .price {
font-size: 2rem;
font-weight: bold;
}
}
&:nth-child(3) header {
&:nth-child(2) header {
background: var(--color-orange);
color: var(--color-black);
}
&:not(:nth-child(3)) header {
&:not(:nth-child(2)) header {
background: var(--color-orange-dark);
color: var(--color-white);
}
@ -89,4 +128,21 @@
}
}
}
}
@media (width <= 1400px) {
.Pricing {
grid-template-rows: auto auto 1fr auto auto 1fr auto auto 1fr;
grid-template-columns: 1fr;
grid-template-areas: "middle" "middle" "middle" "left" "left" "left" "right" "right" "right";
& article {
margin-bottom: 2rem;
border-radius: 20px;
&:nth-child(2) {
scale: 1;
}
}
}
}

34
app/assets/css/spoiler.css Normal file
View file

@ -0,0 +1,34 @@
.Spoiler {
background: var(--color-black);
padding: 1rem 2rem;
border-radius: 20px;
& .icon {
color: var(--color-orange);
}
& summary {
font-size: 1.5rem;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 1rem;
font-weight: bold;
}
& > div {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
}
@media (width <= 820px) {
.Spoiler {
& summary {
font-size: 1rem;
}
}
}