Skip to content

Commit

Permalink
Design stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanshenrik
hanshenrik committed Jun 21, 2024
1 parent 7f05500 commit e349e49
Show file tree
Hide file tree
Showing 16 changed files with 130 additions and 110 deletions.
Binary file added public/profil/frimerke-sykkeltur-transparent.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/profil/frimerke-sykkeltur.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 18 additions & 14 deletions src/components/ArtistNavigationLinks.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,32 +30,36 @@ const {
compact ? "justify-between" : "flex-col"
} gap-4 sm:flex-row sm:justify-between ${extraClasses}`}
>
<div class="self-start sm:self-auto flex flex-row gap-1 items-center">
<div class="self-start sm:self-auto flex flex-row gap-2 items-center">
<Link href={`/artist/${prevId}`} title={prevShortTitle || prevTitle}>
<span class="flex flex-row items-center gap-2">
<Icon
class="icon group-hover:-translate-y-0.5 transition-transform"
pack="ion"
name="play-back-outline"
size={28}
size={40}
/>
<span class={compact ? "hidden lg:block" : ""}
>{prevShortTitle || prevTitle}</span
></span
>
</Link>
<img
src={`/artist/${prevId}.jpg`}
alt={prevShortTitle || prevTitle}
class="w-7 h-7 rounded-lg object-cover"
/>
<a href={`/artist/${prevId}`} title={prevShortTitle || prevTitle}
><img
src={`/artist/${prevId}.jpg`}
alt={prevShortTitle || prevTitle}
class="w-10 h-10 rounded-lg object-cover"
/></a
>
</div>
<div class="self-end sm:self-auto flex flex-row gap-1 items-center">
<img
src={`/artist/${nextId}.jpg`}
alt={nextShortTitle || nextTitle}
class="w-7 h-7 rounded-lg object-cover"
/>
<div class="self-end sm:self-auto flex flex-row gap-2 items-center">
<a href={`/artist/${nextId}`} title={nextShortTitle || nextTitle}
><img
src={`/artist/${nextId}.jpg`}
alt={nextShortTitle || nextTitle}
class="w-10 h-10 rounded-lg object-cover"
/></a
>
<Link href={`/artist/${nextId}`} title={nextShortTitle || nextTitle}>
<span class="flex flex-row items-center gap-2"
><span class={compact ? "hidden lg:block" : ""}
Expand All @@ -65,7 +69,7 @@ const {
class="icon group-hover:-translate-y-0.5 transition-transform"
pack="ion"
name="play-forward-outline"
size={28}
size={40}
/></span
>
</Link>
Expand Down
2 changes: 1 addition & 1 deletion src/components/DesktopMenu.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const { class: extraClasses, navItems } = Astro.props;

<div class={`relative ${extraClasses}`}>
<nav
class="menu p-4 flex gap-10 bg-dark-blue bg-grainy text-white fixed w-full top-0 left-0 rounded-b-lg"
class="menu p-4 flex gap-10 bg-dark-blue bg-grainy text-white fixed w-full top-0 left-0 rounded-b-lg shadow-xl"
>
<a href="/" class="ml-2 hover:-rotate-6 transition-transform shrink-0"
><img
Expand Down
8 changes: 4 additions & 4 deletions src/components/Footer.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import BuyTicketsButton from "./BuyTicketsButton.astro";
---

<footer class="relative">
<div class="py-32 bg-dark-blue bg-grainy text-white z-10 relative">
<div class="py-32 bg-dark-blue bg-grainy text-white z-10 relative shadow-inner">
<div
class="max-w-5xl mx-auto px-4 sm:px-6 md:px-8 lg:px-16 xl:px-32 space-y-8"
>
Expand All @@ -17,7 +17,7 @@ import BuyTicketsButton from "./BuyTicketsButton.astro";
<Link
href="mailto:post@mandaljazz.no"
title="post@mandaljazz.no"
external
openInNewTab
>
post@mandaljazz.no
</Link>
Expand All @@ -36,7 +36,7 @@ import BuyTicketsButton from "./BuyTicketsButton.astro";
<Link
href="mailto:eirik@mandaljazz.no"
title="eirik@mandaljazz.no"
external
openInNewTab
>
eirik@mandaljazz.no
</Link>
Expand All @@ -61,7 +61,7 @@ import BuyTicketsButton from "./BuyTicketsButton.astro";
<Link
href="mailto:marimarie@mandaljazz.no"
title="marimarie@mandaljazz.no"
external
openInNewTab
>
marimarie@mandaljazz.no
</Link>
Expand Down
17 changes: 9 additions & 8 deletions src/components/IconAndLabel.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,28 @@ export interface Props {
icon: string;
flip?: boolean;
pack?: string;
type: "yellow" | "orange" | "blue";
type: "yellow" | "orange" | "blue" | "beige";
fluid?: boolean;
}
const { icon, pack, flip, type } = Astro.props;
const { icon, pack, flip, fluid, type } = Astro.props;
const backgroundColor = {
yellow: "bg-yellow",
orange: "bg-orange",
blue: "bg-blue",
beige: "bg-beige",
}[type];
---

<div
class={`relative ${
flip ? "-skew-y-2" : "skew-y-2"
} w-fit flex flex-row ${backgroundColor} bg-grainy`}
class:list={[
`relative w-fit flex flex-row ${backgroundColor} bg-grainy rounded-lg`,
fluid ? "w-full" : undefined,
]}
>
<span
class={`${
flip ? "skew-y-2" : "-skew-y-2"
} py-2 px-4 my-2 flex flex-row gap-2 items-center text-lg md:text-xl`}
class={`py-2 px-4 my-2 flex flex-row gap-2 items-center text-lg md:text-xl`}
><Icon
class="icon group-hover:-translate-y-0.5 transition-transform"
pack={pack || "ion"}
Expand Down
21 changes: 17 additions & 4 deletions src/components/Link.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,36 @@ export interface Props {
href: string;
title: string;
external?: boolean;
openInNewTab?: boolean;
class?: string;
unstyled?: boolean;
}
const { href, external, class: extraClasses, unstyled } = Astro.props;
const {
href,
external,
openInNewTab,
class: extraClasses,
unstyled,
} = Astro.props;
---

{
external ? (
openInNewTab || external ? (
<a
href={href}
class:list={["inline", unstyled ? undefined : "link", extraClasses]}
rel="noopener nofollow"
target="_blank"
>
<slot />
<Icon class="inline icon mb-1" pack="ion" name="ios-link" size={24} />
{external ? (
<>
<slot />
<Icon class="inline icon mb-1" pack="ion" name="ios-link" size={24} />
</>
) : (
<slot />
)}
</a>
) : (
<a
Expand Down
4 changes: 2 additions & 2 deletions src/components/MobileMenu.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const { class: extraClasses, navItems } = Astro.props;

<div class={`relative ${extraClasses}`}>
<nav
class="fixed w-full text-2xl top-0 left-0 transition-transform duration-500 ease-in-out -translate-y-full bg-dark-blue text-white rounded-lg off-screen-nav-items flex flex-col gap-4 items-center py-24 bg-grainy"
class="fixed w-full text-2xl top-0 left-0 transition-transform duration-500 ease-in-out -translate-y-full bg-dark-blue text-white rounded-lg off-screen-nav-items flex flex-col gap-4 items-center py-24 bg-grainy shadow-xl"
>
{
navItems.map(({ href, title }) => (
Expand All @@ -30,7 +30,7 @@ const { class: extraClasses, navItems } = Astro.props;
}
</nav>
<nav
class="menu fixed w-full top-0 px-4 flex items-center justify-between gap-10 rounded-b-lg text-white z-10 duration-500 bg-dark-blue bg-grainy"
class="menu fixed w-full top-0 px-4 flex items-center justify-between gap-10 rounded-b-lg text-white z-10 duration-500 bg-dark-blue bg-grainy shadow-xl"
>
<a href="/" class="m-3"
><img src="/profil/logo/tertiary/white.svg" class="w-7 h-auto" /></a
Expand Down
10 changes: 2 additions & 8 deletions src/components/Title.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,9 @@ const fontColor = {
---

<div
class={`relative ${
flip ? "-skew-y-2" : "skew-y-2"
} w-fit flex flex-row ${backgroundColor} bg-grainy mt-16`}
class={`relative w-fit flex flex-row ${backgroundColor} bg-grainy mt-16 rounded-md`}
>
<h2
class={`${
flip ? "skew-y-2" : "-skew-y-2"
} font-display text-3xl p-4 my-2 ${fontColor}`}
>
<h2 class={`font-display text-3xl p-4 my-2 ${fontColor}`}>
{title}
</h2>
<img
Expand Down
29 changes: 24 additions & 5 deletions src/layouts/ArtistLayout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import InfoBox from "../components/InfoBox.astro";
import ImageAndLabel from "../components/ImageAndLabel.astro";
import BuyTicketsButton from "../components/BuyTicketsButton.astro";
import ImageWithBlurredBackground from "../components/ImageWithBlurredBackground.astro";
import Icon from "astro-icon";
const {
frontmatter: {
Expand Down Expand Up @@ -107,19 +108,37 @@ const image = imageType ? `${id}.${imageType}` : `${id}.jpg`;
<p class="text-3xl hyphens-auto">
{tagline}
</p>
<div class="space-y-8">
<div
class="grid grid-cols-1 gap-2 max-w-sm rounded-md rounded-tl-none p-4 clip shadow bg-beige"
>
{
concertStartAt && (
<IconAndLabel icon="time-outline" type="blue">
<span
class={`flex flex-row gap-2 items-center text-lg md:text-xl`}
>
<Icon
class="icon group-hover:-translate-y-0.5 transition-transform"
pack={"ion"}
name={"time-outline"}
size={48}
/>
{`${formatHumanDateTime(concertStartAt)}${concertEndAt ? `–${formatTime(concertEndAt)}` : ""}`}
</IconAndLabel>
</span>
)
}
{
venue && (
<IconAndLabel icon="location-outline" type="yellow" flip>
<span
class={`flex flex-row gap-2 items-center text-lg md:text-xl`}
>
<Icon
class="icon group-hover:-translate-y-0.5 transition-transform"
pack={"ion"}
name={"location-outline"}
size={48}
/>
{venue}
</IconAndLabel>
</span>
)
}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/billetter.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ import "../styles/tikkio-overrides.css";
</article>
</div>
<div
class="sticky bottom-4 md:bottom-8 h-fit md:col-span-2 space-y-2 flex flex-col items-end"
class="sticky bottom-4 md:bottom-8 h-fit md:col-span-2 space-y-2 flex flex-col items-end gap-3"
>
<img
src="/profil/frimerke-sykkeltur.png"
Expand Down
3 changes: 0 additions & 3 deletions src/pages/festivalkomite.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,6 @@ const positions = await Astro.glob("../content/festivalkomite/*.mdx");
av en skikkelig hyggelig gjeng!
</p>
</div>
<!-- <Link href="#registreringsskjema" title="Til registreingsskjema">
Til registreringsskjema
</Link> -->
<div class="space-y-8">
<h2 class="font-display text-2xl md:text-3xl">
Les litt om de ulike stillingene
Expand Down
6 changes: 5 additions & 1 deletion src/pages/frivillig.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,11 @@ const groups = await Astro.glob("../content/frivillig/*.mdx");
</p>
</div>
</div>
<Link href="#registreringsskjema" title="Til registreingsskjema">
<Link
href="#registreringsskjema"
title="Til registreingsskjema"
class="mx-auto"
>
Til registreringsskjema
</Link>
<div class="space-y-8">
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const byOrder = (a, b) => {
>
<div class="space-y-8">
<Link
external
openInNewTab
unstyled
href="https://cosmopolite.no/program/cosmopolite/2024/april/mandaljazz-10-ar-andreas-roysum-takeover"
title="mandaljazz 10 år: Andreas Røysum takeover på Cosmopolite 12. april 2024"
Expand Down
Loading

0 comments on commit e349e49

Please sign in to comment.