From 9b3eb3c4a6ef15dcd3962153d374ba1387f73ebd Mon Sep 17 00:00:00 2001 From: elisejakob Date: Thu, 20 Jun 2024 20:35:52 +0200 Subject: [PATCH] add icon buttons, misc styling on venue pages --- web/src/components/general/Icon.tsx | 31 +++++++++++++++ web/src/components/general/icon.module.scss | 11 ++++++ .../general/pigs/fun/neonChillPig.module.scss | 6 +-- web/src/components/layout/Footer.tsx | 21 ++++++---- web/src/components/layout/footer.module.scss | 5 +-- web/src/components/venues/VenueInfo.tsx | 5 +++ web/src/components/venues/neufMap.module.scss | 2 +- .../components/venues/venueInfo.module.scss | 2 + web/src/css/base.scss | 25 ------------ web/src/css/button.scss | 38 +++++++++++++++++++ web/src/css/main.scss | 4 +- web/src/css/variables.scss | 1 + 12 files changed, 110 insertions(+), 41 deletions(-) create mode 100644 web/src/components/general/Icon.tsx create mode 100644 web/src/components/general/icon.module.scss create mode 100644 web/src/css/button.scss diff --git a/web/src/components/general/Icon.tsx b/web/src/components/general/Icon.tsx new file mode 100644 index 0000000..2073f18 --- /dev/null +++ b/web/src/components/general/Icon.tsx @@ -0,0 +1,31 @@ +import styles from "./icon.module.scss"; + +export default function Icon({ type }: { type?: "doc" | "arrow" }) { + return ( +
+ {type === "doc" && ( + + + + )} + {type === "arrow" &&
→
} + {!type && ( +
+ + + +
+ )} +
+ ); +} diff --git a/web/src/components/general/icon.module.scss b/web/src/components/general/icon.module.scss new file mode 100644 index 0000000..213f17c --- /dev/null +++ b/web/src/components/general/icon.module.scss @@ -0,0 +1,11 @@ +.icon { + width: var(--size-icon); + height: var(--size-icon); + display: inline-block; + vertical-align: middle; + + svg { + display: block; + width: 100%; + } +} \ No newline at end of file diff --git a/web/src/components/general/pigs/fun/neonChillPig.module.scss b/web/src/components/general/pigs/fun/neonChillPig.module.scss index a63e8cb..eb74a40 100644 --- a/web/src/components/general/pigs/fun/neonChillPig.module.scss +++ b/web/src/components/general/pigs/fun/neonChillPig.module.scss @@ -4,13 +4,13 @@ .static, .animate { - position: absolute; - top: 0; - left: 0; width: 100%; } .animate { + position: absolute; + top: 0; + left: 0; animation: glow 1s infinite alternate; } } diff --git a/web/src/components/layout/Footer.tsx b/web/src/components/layout/Footer.tsx index 9c82638..b2aea48 100644 --- a/web/src/components/layout/Footer.tsx +++ b/web/src/components/layout/Footer.tsx @@ -3,6 +3,7 @@ import styles from "./footer.module.scss"; import { NeonChillPig } from "../general/pigs/fun/NeonChillPig"; import { ToTop } from "./ToTop"; import { LogoNeuf } from "../general/Logo"; +import Icon from "../general/Icon"; export const Footer = () => { return ( @@ -11,23 +12,27 @@ export const Footer = () => {

Følg oss

diff --git a/web/src/components/layout/footer.module.scss b/web/src/components/layout/footer.module.scss index bfbef8c..32105dc 100644 --- a/web/src/components/layout/footer.module.scss +++ b/web/src/components/layout/footer.module.scss @@ -94,12 +94,11 @@ position: relative; top: 0; right: 0; - transform: translate(1vw, 40%); z-index: 800; } .toTop { position: absolute; - right: 0; - bottom: 0; + right: var(--spacing-sitepadding); + bottom: var(--spacing-sitepadding); } \ No newline at end of file diff --git a/web/src/components/venues/VenueInfo.tsx b/web/src/components/venues/VenueInfo.tsx index 3875853..a1e0bbb 100644 --- a/web/src/components/venues/VenueInfo.tsx +++ b/web/src/components/venues/VenueInfo.tsx @@ -2,6 +2,7 @@ import { VenueFragment } from "@/gql/graphql"; import styles from "./venueInfo.module.scss"; import Link from "next/link"; import Image from "../general/Image"; +import Icon from "../general/Icon"; export const VenueInfo = ({ venue }: { venue: VenueFragment }) => { return ( @@ -46,6 +47,10 @@ export const VenueInfo = ({ venue }: { venue: VenueFragment }) => { + + Tekniske spesifikasjoner + + ); }; diff --git a/web/src/components/venues/neufMap.module.scss b/web/src/components/venues/neufMap.module.scss index bf279fc..b9ec3d8 100644 --- a/web/src/components/venues/neufMap.module.scss +++ b/web/src/components/venues/neufMap.module.scss @@ -3,7 +3,7 @@ grid-template-columns: 1fr 1fr; gap: var(--spacing-sitepadding); width: 100%; - max-width: 1000px; + max-width: 1200px; margin: var(--spacing-xl) auto; } diff --git a/web/src/components/venues/venueInfo.module.scss b/web/src/components/venues/venueInfo.module.scss index 84d926f..fb08f2c 100644 --- a/web/src/components/venues/venueInfo.module.scss +++ b/web/src/components/venues/venueInfo.module.scss @@ -5,6 +5,7 @@ table { width: 100%; border-collapse: collapse; + margin-bottom: 1rem; } tr { @@ -14,6 +15,7 @@ th { text-align: left; width: 11rem; + font-weight: 600; } th, diff --git a/web/src/css/base.scss b/web/src/css/base.scss index 3437bda..27610e5 100644 --- a/web/src/css/base.scss +++ b/web/src/css/base.scss @@ -126,31 +126,6 @@ img { max-width: 100%; } -button, -.button { - display: inline-block; - border-radius: 10rem; - background: var(--color-cta-background); - color: var(--color-cta-text); - border: none; - padding: .5rem 1rem; - margin: 0 0 .5rem; - font-family: var(--font-main); - font-size: var(--font-size-body); - font-weight: 500; - text-decoration: none; - transition: opacity var(--transition-easing); - cursor: pointer; - - &:hover { - opacity: .8; - } - - a { - text-decoration: none; - } -} - blockquote { font-family: var(--font-serif); font-size: 2.8rem; diff --git a/web/src/css/button.scss b/web/src/css/button.scss new file mode 100644 index 0000000..3cfe62c --- /dev/null +++ b/web/src/css/button.scss @@ -0,0 +1,38 @@ +button, +.button { + display: inline-flex; + align-items: center; + gap: 1rem; + border-radius: 10rem; + background: var(--color-cta-background); + color: var(--color-cta-text); + border: none; + padding: .5rem 1rem; + margin: 0 0 .5rem; + font-family: var(--font-main); + font-size: var(--font-size-body); + font-weight: 500; + text-decoration: none; + transition: opacity var(--transition-easing); + cursor: pointer; + + &:hover { + opacity: .8; + } + + a { + text-decoration: none; + } + + &.secondary { + color: var(--color-deepBrick); + background: var(--color-goldenBeige); + } + + &.tertiary { + color: currentColor; + background: transparent; + border: 2px solid currentColor; + padding: .25rem .75rem; + } +} \ No newline at end of file diff --git a/web/src/css/main.scss b/web/src/css/main.scss index 24d4bcd..560da78 100644 --- a/web/src/css/main.scss +++ b/web/src/css/main.scss @@ -1,4 +1,6 @@ @import 'fonts.scss'; @import 'variables.scss'; @import 'animations.scss'; -@import 'base.scss'; \ No newline at end of file +@import 'base.scss'; + +@import 'button.scss'; \ No newline at end of file diff --git a/web/src/css/variables.scss b/web/src/css/variables.scss index 44f4768..19b26fa 100644 --- a/web/src/css/variables.scss +++ b/web/src/css/variables.scss @@ -53,6 +53,7 @@ // sizes --size-width-p: 36rem; + --size-icon: 1em; // animations --transition-easing: .3s ease;