diff --git a/web/public/assets/graphics/studio-2026/studio-logo-shortcut.svg b/web/public/assets/graphics/studio-2026/studio-logo-shortcut.svg new file mode 100644 index 0000000..0e05de0 --- /dev/null +++ b/web/public/assets/graphics/studio-2026/studio-logo-shortcut.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/components/home/HomePageView.tsx b/web/src/components/home/HomePageView.tsx index 7d82fd4..cd2a265 100644 --- a/web/src/components/home/HomePageView.tsx +++ b/web/src/components/home/HomePageView.tsx @@ -13,6 +13,7 @@ import { Pig } from "@/components/general/Pig"; import { SectionFooter } from "@/components/general/SectionFooter"; import { SectionHeader } from "@/components/general/SectionHeader"; import { NewsList } from "@/components/news/NewsList"; +import { StudioShortcut } from "../studio/StudioShortcut"; const HomeFragmentDefinition = graphql(` fragment Home on HomePage { @@ -79,6 +80,7 @@ export function HomePageView({ home, events, news }: HomePageViewProps) { return ( <>
+
diff --git a/web/src/components/studio/StudioShortcut.tsx b/web/src/components/studio/StudioShortcut.tsx new file mode 100644 index 0000000..d08ebc7 --- /dev/null +++ b/web/src/components/studio/StudioShortcut.tsx @@ -0,0 +1,24 @@ +import Link from "next/link"; +import { Icon } from "../general/Icon"; +import styles from "./studioShortcut.module.scss"; + +export const StudioShortcut = () => { + return ( +
+ + STUDiO +
+ Alt om studentfestivalen i Oslo
+ Gratis arrangementer hele uka! +
+
+ +
+ +
+ ); +}; diff --git a/web/src/components/studio/studioShortcut.module.scss b/web/src/components/studio/studioShortcut.module.scss new file mode 100644 index 0000000..b0dd23e --- /dev/null +++ b/web/src/components/studio/studioShortcut.module.scss @@ -0,0 +1,66 @@ +.studioShortcut { + display: flex; +} + +.button { + margin: calc(var(--spacing-sitepadding-block) * -1.8) 0 calc(var(--spacing-sitepadding-block) * .8) auto; + max-width: 100%; + display: inline-flex; + align-items: center; + gap: var(--spacing-m); + padding: 0 1.5rem 0 0; + border-radius: 10rem; + background: #EEA971; + color: var(--color-deepBrick); + overflow: hidden; + text-decoration: none; +} + +.logo { + width: 6rem; +} + +.text { + line-height: 1.4; +} + +.heading { + font-weight: 600; +} + +.icon { + display: flex; + align-items: center; + font-size: 1.6rem; +} + +@media (max-width: 800px) { + .button { + margin: calc(var(--spacing-sitepadding-block) * -1) 0 var(--spacing-sitepadding-block) auto; + justify-content: space-between; + gap: var(--spacing-s); + padding: 0 1rem 0 0; + } + .logo { + width: 4rem; + } + .text { + font-size: var(--font-size-xs); + } + .icon { + font-size: 1rem; + } +} + +@media (max-width: 400px) { + .button { + margin: calc(var(--spacing-sitepadding-block) * -.5) 0 var(--spacing-sitepadding-block) auto; + width: 100%; + } +} + +@media (min-width: 1800px) { + .button { + margin: calc(var(--spacing-sitepadding-block) * -1.6) 0 calc(var(--spacing-sitepadding-block) * .5) auto; + } +} \ No newline at end of file