mikkel/astro-personal-website
1
0
Fork 0
mirror of https://github.com/mikkelsvartveit/astro-personal-website.git synced 2025-12-22 19:22:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change theme color for full-screen photo

Browse source
This commit is contained in:
Mikkel Svartveit 2023-10-22 20:44:53 -07:00
parent 394f6a834b
commit 12ed3514bd
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/layouts/RootLayout.astro
View file

@ -4,9 +4,10 @@ import { ViewTransitions } from "astro:transitions";
interface Props { interface Props {
title?: string; title?: string;
hideScrollbar?: boolean; hideScrollbar?: boolean;
themeColor?: string;
} }
const { title, hideScrollbar } = Astro.props; const { title, hideScrollbar, themeColor } = Astro.props;
const fullTitle = `${title ? title + " – " : ""}Mikkel Svartveit`; const fullTitle = `${title ? title + " – " : ""}Mikkel Svartveit`;
--- ---
@ -22,7 +23,7 @@ const fullTitle = `${title ? title + " – " : ""}Mikkel Svartveit`;
name="description" name="description"
content="Hi, I'm Mikkel! I am a Computer Science student from Norway and this is my playground. Here you will find some programming projects, and a small collection of photos I'm proud of." content="Hi, I'm Mikkel! I am a Computer Science student from Norway and this is my playground. Here you will find some programming projects, and a small collection of photos I'm proud of."
/> />
<meta name="theme-color" content="#facc15" /> <meta name="theme-color" content={themeColor ?? "#facc15"} />
<ViewTransitions fallback="swap" /> <ViewTransitions fallback="swap" />
</head> </head>

3
src/pages/photography/[photo].astro
View file

@ -3,7 +3,6 @@ import type { GetStaticPaths } from "astro";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import { getFileNameFromPath } from "./index.astro"; import { getFileNameFromPath } from "./index.astro";
import RootLayout from "@layouts/RootLayout.astro"; import RootLayout from "@layouts/RootLayout.astro";
import Photo from "@components/Photo.astro";
export const getStaticPaths = (async () => { export const getStaticPaths = (async () => {
const photos = await Astro.glob("../../assets/photos/*"); const photos = await Astro.glob("../../assets/photos/*");
@ -21,7 +20,7 @@ export const getStaticPaths = (async () => {
const { photo } = Astro.props; const { photo } = Astro.props;
--- ---
<RootLayout title="Photo" hideScrollbar> <RootLayout title="Photo" hideScrollbar themeColor="#111827">
<div <div
class="cursor-pointer bg-gray-900 w-full h-screen flex justify-center" class="cursor-pointer bg-gray-900 w-full h-screen flex justify-center"
onclick=" onclick="