From 2d31b019e90d130a4588d70b56d4a891b96e22ff Mon Sep 17 00:00:00 2001
From: Robert Janus <hallo@robertjanus.de>
Date: Thu, 22 May 2025 14:23:09 +0200
Subject: [PATCH 1/2] add: desktop-background + fix: desktop-layout
---
app/assets/styles/general.css | 9 ++++++++-
app/assets/styles/header.css | 1 +
app/assets/styles/timelineCard.css | 4 +++-
public/img/desktop-background.svg | 1 +
4 files changed, 13 insertions(+), 2 deletions(-)
create mode 100644 public/img/desktop-background.svg
diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css
index 99a8bc6..1028fda 100755
--- a/app/assets/styles/general.css
+++ b/app/assets/styles/general.css
@@ -65,6 +65,8 @@
--radius-border: var(--font-size-default);
--transition-default: 150ms;
+
+ --page-max-width: 820px;
}
* {
@@ -78,9 +80,14 @@ body {
height: 100%;
overflow-x: hidden;
font-family: sans-serif;
- background: var(--color-main-darkest);
color: var(--color-text);
font-size: var(--font-size-default);
+ max-width: var(--page-max-width);
+ margin: 0 auto;
+ background-image: url("/img/desktop-background.svg");
+ background-position: center;
+ box-shadow: var(--box-shadow-z2);
+
}
h1, h2, h3 {
diff --git a/app/assets/styles/header.css b/app/assets/styles/header.css
index 5e5226d..101693a 100755
--- a/app/assets/styles/header.css
+++ b/app/assets/styles/header.css
@@ -17,6 +17,7 @@
backdrop-filter: blur(10px);
mask: linear-gradient(to top, transparent, black 30%);
width: 100%;
+ max-width: var(--page-max-width);
top: 0;
padding-bottom: var(--padding-xxl);
}
diff --git a/app/assets/styles/timelineCard.css b/app/assets/styles/timelineCard.css
index 033721e..fcfd0d1 100644
--- a/app/assets/styles/timelineCard.css
+++ b/app/assets/styles/timelineCard.css
@@ -8,11 +8,13 @@
& .icon {
font-size: var(--font-size-xxl);
- flex: 1 0 4rem;
+ min-width: 25%;
+ flex-shrink: 0;
color: var(--color-main-dark);
}
& .text {
text-align: left;
+ flex-grow: 1;
}
}
\ No newline at end of file
diff --git a/public/img/desktop-background.svg b/public/img/desktop-background.svg
new file mode 100644
index 0000000..6e811bd
--- /dev/null
+++ b/public/img/desktop-background.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 3840 2160" width="3840" height="2160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="3840" height="2160" fill="#292929"></rect><defs><linearGradient id="grad1_0" x1="43.8%" y1="100%" x2="100%" y2="0%"><stop offset="14.444444444444446%" stop-color="#013174" stop-opacity="1"></stop><stop offset="85.55555555555554%" stop-color="#013174" stop-opacity="1"></stop></linearGradient></defs><defs><linearGradient id="grad1_1" x1="43.8%" y1="100%" x2="100%" y2="0%"><stop offset="14.444444444444446%" stop-color="#013174" stop-opacity="1"></stop><stop offset="85.55555555555554%" stop-color="#202e5a" stop-opacity="1"></stop></linearGradient></defs><defs><linearGradient id="grad1_2" x1="43.8%" y1="100%" x2="100%" y2="0%"><stop offset="14.444444444444446%" stop-color="#282b41" stop-opacity="1"></stop><stop offset="85.55555555555554%" stop-color="#202e5a" stop-opacity="1"></stop></linearGradient></defs><defs><linearGradient id="grad1_3" x1="43.8%" y1="100%" x2="100%" y2="0%"><stop offset="14.444444444444446%" stop-color="#282b41" stop-opacity="1"></stop><stop offset="85.55555555555554%" stop-color="#292929" stop-opacity="1"></stop></linearGradient></defs><defs><linearGradient id="grad2_0" x1="0%" y1="100%" x2="56.3%" y2="0%"><stop offset="14.444444444444446%" stop-color="#013174" stop-opacity="1"></stop><stop offset="85.55555555555554%" stop-color="#013174" stop-opacity="1"></stop></linearGradient></defs><defs><linearGradient id="grad2_1" x1="0%" y1="100%" x2="56.3%" y2="0%"><stop offset="14.444444444444446%" stop-color="#202e5a" stop-opacity="1"></stop><stop offset="85.55555555555554%" stop-color="#013174" stop-opacity="1"></stop></linearGradient></defs><defs><linearGradient id="grad2_2" x1="0%" y1="100%" x2="56.3%" y2="0%"><stop offset="14.444444444444446%" stop-color="#202e5a" stop-opacity="1"></stop><stop offset="85.55555555555554%" stop-color="#282b41" stop-opacity="1"></stop></linearGradient></defs><defs><linearGradient id="grad2_3" x1="0%" y1="100%" x2="56.3%" y2="0%"><stop offset="14.444444444444446%" stop-color="#292929" stop-opacity="1"></stop><stop offset="85.55555555555554%" stop-color="#282b41" stop-opacity="1"></stop></linearGradient></defs><g transform="translate(3840, 2160)"><path d="M-1956 0C-1926.7 -253.3 -1897.4 -506.6 -1820 -753.9C-1742.7 -1001.2 -1617.2 -1242.4 -1438.3 -1438.3C-1259.3 -1634.1 -1027 -1784.5 -778.4 -1879.2C-529.8 -1973.9 -264.9 -2012.9 0 -2052L0 0Z" fill="#292a35"></path><path d="M-1467 0C-1445 -190 -1423.1 -380 -1365 -565.4C-1307 -750.9 -1212.9 -931.8 -1078.7 -1078.7C-944.5 -1225.6 -770.2 -1338.3 -583.8 -1409.4C-397.3 -1480.4 -198.7 -1509.7 0 -1539L0 0Z" fill="#252d4d"></path><path d="M-978 0C-963.4 -126.7 -948.7 -253.3 -910 -376.9C-871.3 -500.6 -808.6 -621.2 -719.1 -719.1C-629.7 -817 -513.5 -892.2 -389.2 -939.6C-264.9 -986.9 -132.4 -1006.5 0 -1026L0 0Z" fill="#172f67"></path><path d="M-489 0C-481.7 -63.3 -474.4 -126.7 -455 -188.5C-435.7 -250.3 -404.3 -310.6 -359.6 -359.6C-314.8 -408.5 -256.7 -446.1 -194.6 -469.8C-132.4 -493.5 -66.2 -503.2 0 -513L0 0Z" fill="#013174"></path></g><g transform="translate(0, 0)"><path d="M1962 0C1948.3 263.6 1934.6 527.1 1846.8 765C1759 1002.9 1597.1 1215.1 1413.5 1413.5C1229.9 1612 1024.5 1796.7 785.3 1895.8C546.1 1994.9 273 2008.5 0 2022L0 0Z" fill="#292a35"></path><path d="M1471.5 0C1461.2 197.7 1451 395.3 1385.1 573.7C1319.3 752.1 1197.9 911.3 1060.1 1060.1C922.4 1209 768.4 1347.5 588.9 1421.9C409.5 1496.2 204.8 1506.3 0 1516.5L0 0Z" fill="#252d4d"></path><path d="M981 0C974.2 131.8 967.3 263.6 923.4 382.5C879.5 501.4 798.6 607.5 706.8 706.8C614.9 806 512.2 898.3 392.6 947.9C273 997.5 136.5 1004.2 0 1011L0 0Z" fill="#172f67"></path><path d="M490.5 0C487.1 65.9 483.7 131.8 461.7 191.2C439.8 250.7 399.3 303.8 353.4 353.4C307.5 403 256.1 449.2 196.3 474C136.5 498.7 68.3 502.1 0 505.5L0 0Z" fill="#013174"></path></g></svg>
\ No newline at end of file
From 0ccfe985ae01fecbeacdb7decabb11de35474e3f Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Fri, 23 May 2025 08:26:03 +0200
Subject: [PATCH 2/2] add: small fix for flex
Add flex attribute
---
app/assets/styles/timelineCard.css | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/app/assets/styles/timelineCard.css b/app/assets/styles/timelineCard.css
index fcfd0d1..cf860a5 100644
--- a/app/assets/styles/timelineCard.css
+++ b/app/assets/styles/timelineCard.css
@@ -7,9 +7,8 @@
padding: var(--padding-xs);
& .icon {
+ flex: 0 0 25%;
font-size: var(--font-size-xxl);
- min-width: 25%;
- flex-shrink: 0;
color: var(--color-main-dark);
}