webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: lp and navigation

Browse source 
Added... a lot of stuff
This commit is contained in:
Fiona Lena Urban 2025-05-22 09:59:27 +02:00
parent 55fc3fe4e0
commit f60719fa9e
20 changed files with 332 additions and 331 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/assets/styles/dialog.css
View file

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

39
app/assets/styles/form/textfield.css
View file

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

27
app/assets/styles/general.css
View file

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

83
app/assets/styles/header.css
View file

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

2
app/assets/styles/landingpage.css
View file

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

69
app/assets/styles/navigation.css Normal file
View file

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

2
app/assets/styles/page.css
View file

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

4
app/assets/styles/priceCard.css
View file

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

2
app/assets/styles/toolbar.css
View file

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