Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-12 07:12:52 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat!: add credit configurations for banner image

Browse Source 
BREAKING CHANGES: new mandatory fields added in `config.ts`
This commit is contained in:
saicaca
2024-07-27 21:51:32 +08:00
parent f28ad1b8e6
commit 336290a92f
5 changed files with 77 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/layouts/MainGridLayout.astro
View File

@@ -4,6 +4,8 @@ import Navbar from "@components/Navbar.astro";
import SideBar from "@components/widget/SideBar.astro";
import Footer from "@components/Footer.astro";
import BackToTop from "@components/control/BackToTop.astro";
import { Icon } from 'astro-icon/components';
import { siteConfig } from "../config";
interface Props {
title?: string;
@@ -13,6 +15,9 @@ interface Props {
const { title, banner, description } = Astro.props
const hasBannerCredit = siteConfig.banner.enable && siteConfig.banner.credit.enable
const hasBannerLink = !!(siteConfig.banner.credit.url)
---
<Layout title={title} banner={banner} description={description}>
@@ -20,9 +25,22 @@ const { title, banner, description } = Astro.props
<div class="max-w-[var(--page-width)] min-h-screen grid grid-cols-[17.5rem_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
mx-auto gap-4 relative px-0 md:px-4"
>
<div id="top-row" class="transition-all duration-700 col-span-2 grid-rows-1 z-50 onload-animation" class:list={[""]}>
<div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->
<div id="top-row" class="relative transition-all duration-700 col-span-2 grid-rows-1" class:list={[""]}>
<Navbar></Navbar>
<!-- Banner image credit -->
{hasBannerCredit && <a href={siteConfig.banner.credit.url} id="banner-credit" target="_blank" rel="noopener" aria-label="Visit image source"
class:list={["group onload-animation transition-all absolute flex justify-center items-center rounded-full " +
"px-3 right-0 bottom-0 bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}
>
<Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded" ></Icon>
<div class="text-white/75 text-xs">{siteConfig.banner.credit.text}</div>
<Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-2 text-[1.25rem] opacity-0",
{"group-hover:opacity-100": hasBannerLink}]}
name="material-symbols:chevron-right-rounded">
</Icon>
</a>}
</div>
<SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[17.5rem] onload-animation"></SideBar>