Nachklang/Calendar_Frontend
2
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Redesign calendar landing page

Browse Source
This commit is contained in:
Patrick Müller
2026-06-28 14:00:47 +02:00
parent 55748260d0
commit 6400616335
1 changed files with 28 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/landingpage/landingpage.component.css
+28 -30
View File
@@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Jost:wght@300;400;500&display=swap');
/* ── Host fills the padded app-root container ───────────────────── */
:host {
display: block;
@@ -41,7 +39,7 @@
position: absolute;
top: 0;
right: 0;
font-family: 'Jost', sans-serif;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.68rem;
font-weight: 300;
letter-spacing: 0.14em;
@@ -85,39 +83,39 @@
}
h1 {
font-family: 'Cormorant Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: clamp(2.8rem, 7.5vw, 5rem);
font-weight: 300;
letter-spacing: 0.22em;
font-weight: 200;
letter-spacing: 0.12em;
color: #f0e6d3;
margin: 0 0 0.25em;
line-height: 1;
}
.tagline {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(0.8rem, 1.8vw, 1rem);
font-weight: 300;
font-style: italic;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: clamp(0.7rem, 1.6vw, 0.85rem);
font-weight: 400;
font-style: normal;
color: #c8a96e;
letter-spacing: 0.35em;
letter-spacing: 0.22em;
text-transform: uppercase;
margin: 0 0 1.1rem;
}
.ornament-line {
width: 44px;
width: 32px;
height: 1px;
background: linear-gradient(90deg, transparent, #c8a96e 35%, #c8a96e 65%, transparent);
margin: 0 auto 1.1rem;
}
.description {
font-family: 'Jost', sans-serif;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.8rem;
font-weight: 300;
color: rgba(240, 230, 211, 0.38);
letter-spacing: 0.06em;
color: rgba(240, 230, 211, 0.45);
letter-spacing: 0.03em;
margin: 0;
}
@@ -132,10 +130,10 @@ h1 {
/* ── Individual card ────────────────────────────────────────────── */
.card {
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(200, 169, 110, 0.13);
border-radius: 4px;
padding: 1.75rem 1rem 1.5rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(200, 169, 110, 0.15);
border-radius: 12px;
padding: 2rem 1.25rem 1.75rem;
display: flex;
flex-direction: column;
align-items: center;
@@ -143,7 +141,7 @@ h1 {
text-decoration: none;
color: inherit;
cursor: pointer;
font-family: 'Jost', sans-serif;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: inherit;
text-align: center;
transition:
@@ -157,7 +155,7 @@ h1 {
content: '';
position: absolute;
inset: 0;
border-radius: 3px;
border-radius: 11px;
background: linear-gradient(145deg, rgba(200, 169, 110, 0.07) 0%, transparent 65%);
opacity: 0;
transition: opacity 0.3s;
@@ -165,8 +163,8 @@ h1 {
}
.card:hover {
border-color: rgba(200, 169, 110, 0.38);
background: rgba(255, 255, 255, 0.04);
border-color: rgba(200, 169, 110, 0.4);
background: rgba(255, 255, 255, 0.05);
transform: translateY(-5px);
}
@@ -182,7 +180,7 @@ h1 {
.icon-wrap {
width: 48px;
height: 48px;
border-radius: 11px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
display: flex;
@@ -209,15 +207,15 @@ h1 {
font-size: 0.875rem;
font-weight: 500;
color: #ede0cc;
letter-spacing: 0.03em;
letter-spacing: 0.02em;
transition: color 0.25s;
}
.card-sub {
font-size: 0.68rem;
font-weight: 300;
color: rgba(240, 230, 211, 0.32);
letter-spacing: 0.09em;
font-size: 0.7rem;
font-weight: 400;
color: rgba(240, 230, 211, 0.38);
letter-spacing: 0.06em;
}
/* ── Copy card: confirmed state ─────────────────────────────────── */
@@ -267,6 +265,6 @@ h1 {
@media (max-width: 380px) {
h1 {
letter-spacing: 0.1em;
letter-spacing: 0.06em;
}
}