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

feat: back-to-top, footer, about page, responsive design, etc.

Browse Source 
(cherry picked from commit 21319d339305c77311d42aa18501d425a5a2619c)
This commit is contained in:
saicaca
2023-09-29 11:58:14 +08:00
parent 124843848f
commit 8ed0aa071f
14 changed files with 127 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/layouts/Layout.astro
View File

@@ -75,7 +75,7 @@ if (!banner || typeof banner !== 'string' || banner.trim() === '') {
<title>{title}</title>
</head>
<body class="bg-[oklch(0.95_0.01_var(--hue))] dark:bg-[oklch(0.16_0.014_var(--hue))] min-h-screen transition">
<body class="bg-[oklch(0.95_0.01_var(--hue))] dark:bg-[oklch(0.16_0.014_var(--hue))] min-h-screen transition ">
<GlobalStyles>
<div class="absolute w-full"
class:list={{'banner-home': isHomePage, 'banner-else': !isHomePage}}

15
src/layouts/MainGridLayout.astro
View File

@@ -3,6 +3,8 @@ import Layout from "./Layout.astro";
import Navbar from "../components/Navbar.astro";
import SideBar from "../components/widget/SideBar.astro";
import {pathsEqual} from "../utils/url-utils";
import Footer from "../components/Footer.astro";
import BackToTop from "../components/control/BackToTop.astro";
interface Props {
title: string;
@@ -18,7 +20,7 @@ const sidebarWidth = "280px";
---
<Layout title={title} banner={banner}>
<div class=`max-w-[1200px] grid grid-cols-[280px_auto] grid-auto-rows-[auto] mx-auto gap-4 relative`
<div class=`max-w-[1200px] min-h-screen grid grid-cols-[280px_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto] mx-auto gap-4 relative overflow-hidden `
transition:animate="none"
>
<div id="top-row" class="col-span-2 grid-rows-1" class:list={{
@@ -27,14 +29,21 @@ const sidebarWidth = "280px";
>
<Navbar transition:animate="fade" transition:persist></Navbar>
</div>
<SideBar class="max-w-[280px] col-span-1 grid-rows-2" transition:persist></SideBar>
<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-[280px] overflow-hidden" transition:persist></SideBar>
<div class="grid-rows-2 grid-cols-2 overflow-hidden" transition:animate="slide">
<div class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden" transition:animate="slide">
<!-- the overflow-hidden here prevent long text break the layout-->
<slot></slot>
</div>
<div class="grid-rows-3 col-span-2 mt-4" transition:persist>
<Footer></Footer>
</div>
<BackToTop></BackToTop>
</div>
</Layout>
<style>