From 38d332b5748594276e0fa0659ca6fe80eedf7202 Mon Sep 17 00:00:00 2001 From: elise Date: Thu, 9 Jul 2026 14:28:11 +0200 Subject: [PATCH] style studio banner, add more decorations and instagram icon --- web/package-lock.json | 108 ------------------ .../studio-2026/studio-banner-left-deco.svg | 45 ++++++++ .../studio-2026/studio-banner-right-deco.svg | 37 ++++++ .../graphics/studio-2026/studio-datos.svg | 25 ++++ .../graphics/studio-2026/studio-instagram.svg | 5 + web/src/components/studio/StudioHeader.tsx | 60 +++++++--- .../studio/studioHeader.module.scss | 83 ++++++++++++-- 7 files changed, 226 insertions(+), 137 deletions(-) create mode 100644 web/public/assets/graphics/studio-2026/studio-banner-left-deco.svg create mode 100644 web/public/assets/graphics/studio-2026/studio-banner-right-deco.svg create mode 100644 web/public/assets/graphics/studio-2026/studio-datos.svg create mode 100644 web/public/assets/graphics/studio-2026/studio-instagram.svg diff --git a/web/package-lock.json b/web/package-lock.json index 63b7065..d5d1cf3 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -1621,9 +1621,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1640,9 +1637,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1659,9 +1653,6 @@ "cpu": [ "ppc64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1678,9 +1669,6 @@ "cpu": [ "riscv64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1697,9 +1685,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1716,9 +1701,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1735,9 +1717,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1754,9 +1733,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1773,9 +1749,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -1798,9 +1771,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -1823,9 +1793,6 @@ "cpu": [ "ppc64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -1848,9 +1815,6 @@ "cpu": [ "riscv64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -1873,9 +1837,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -1898,9 +1859,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -1923,9 +1881,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -1948,9 +1903,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -2498,9 +2450,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2517,9 +2466,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2536,9 +2482,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2555,9 +2498,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -8902,9 +8842,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -8921,9 +8858,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -8940,9 +8874,6 @@ "cpu": [ "ppc64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -8959,9 +8890,6 @@ "cpu": [ "riscv64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -8978,9 +8906,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -8997,9 +8922,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -9016,9 +8938,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -9035,9 +8954,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -9054,9 +8970,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -9079,9 +8992,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -9104,9 +9014,6 @@ "cpu": [ "ppc64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -9129,9 +9036,6 @@ "cpu": [ "riscv64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -9154,9 +9058,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -9179,9 +9080,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -9204,9 +9102,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -9229,9 +9124,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ diff --git a/web/public/assets/graphics/studio-2026/studio-banner-left-deco.svg b/web/public/assets/graphics/studio-2026/studio-banner-left-deco.svg new file mode 100644 index 0000000..5254f7f --- /dev/null +++ b/web/public/assets/graphics/studio-2026/studio-banner-left-deco.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/public/assets/graphics/studio-2026/studio-banner-right-deco.svg b/web/public/assets/graphics/studio-2026/studio-banner-right-deco.svg new file mode 100644 index 0000000..744ff41 --- /dev/null +++ b/web/public/assets/graphics/studio-2026/studio-banner-right-deco.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/public/assets/graphics/studio-2026/studio-datos.svg b/web/public/assets/graphics/studio-2026/studio-datos.svg new file mode 100644 index 0000000..3269779 --- /dev/null +++ b/web/public/assets/graphics/studio-2026/studio-datos.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/public/assets/graphics/studio-2026/studio-instagram.svg b/web/public/assets/graphics/studio-2026/studio-instagram.svg new file mode 100644 index 0000000..1452bc4 --- /dev/null +++ b/web/public/assets/graphics/studio-2026/studio-instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/src/components/studio/StudioHeader.tsx b/web/src/components/studio/StudioHeader.tsx index 431aa4a..3c4ab36 100644 --- a/web/src/components/studio/StudioHeader.tsx +++ b/web/src/components/studio/StudioHeader.tsx @@ -10,25 +10,51 @@ export const StudioHeader = ({ return (

{title}

-
- Studentfestivalen i Oslo - STUDiO - Hele oslos fadderuke +
+
+ + +
+
+ STUDiO +
+ Studentfestivalen i Oslo + Hele Oslos fadderuke + 10–14. august +
+ + Instagram + +
{lead && ( -
+
)}
); diff --git a/web/src/components/studio/studioHeader.module.scss b/web/src/components/studio/studioHeader.module.scss index 32181e9..0ad74f8 100644 --- a/web/src/components/studio/studioHeader.module.scss +++ b/web/src/components/studio/studioHeader.module.scss @@ -1,36 +1,95 @@ .studioHeader { position: relative; - width: var(--size-width-lead); - max-width: 100%; - margin: 0 auto var(--spacing-l); } -.logos { - display: flex; - flex-direction: column; +.banner { + position: relative; + width: 100vw; + margin: calc(var(--spacing-sitepadding-block) * -1) calc(var(--spacing-sitepadding-inline) * -1) 2rem; + background: #EEA971; +} + +.deco { + width: 100%; + height: 100%; + + &Left, + &Right { + position: absolute; + height: 100%; + z-index: 0; + } + + &Left { + left: 0; + } + + &Right { + right: 0; + } +} + +.logo { + position: relative; + z-index: 2; + display: grid; + grid-template-columns: auto 2fr .5fr; align-items: center; - gap: var(--spacing-xs); - margin-bottom: var(--spacing-m); + justify-content: center; + gap: var(--spacing-m); + padding: var(--spacing-xs); + width: calc(var(--size-width-lead) + var(--spacing-sitepadding-inline)); + max-width: 100%; + margin: 0 auto var(--spacing-l); } .mainLogo { display: block; width: 100%; - max-width: 16rem; + max-width: 16vw; height: auto; margin: var(--spacing-xs) 0; } +.logoText { + display: flex; + flex-direction: column; + width: 100%; + max-width: 28rem; + gap: var(--spacing-s); +} + .studentfestivalen { display: block; - width: 100%; - max-width: 27rem; + width: 83%; height: auto; } .fadderuke { display: block; width: 100%; - max-width: 30rem; height: auto; } + +.datos { + display: block; + width: 40%; +} + +.instagram { + width: var(--size-icon-circle); + height: var(--size-icon-circle); + border-radius: 10rem; + background: #D68A56; + padding: var(--spacing-xs); + + .icon { + display: block; + } +} + +.lead { + width: var(--size-width-lead); + max-width: 100%; + margin: 0 auto var(--spacing-l); +} \ No newline at end of file