~repos /website

#astro#js#html#css

git clone https://pyrossh.dev/repos/website.git

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

Readme
|
Commits
|
Files

src/layouts/BaseLayout.astro

Contents
|
History
|
Blame 
---
import { ClientRouter } from "astro:transitions";
import ResetCSS from "@appzic/astro-reset-css";
import Header from "@/components/Header.astro";
import Footer from "@/components/Footer.astro";
import Wrapper from "@/components/Wrapper.astro";
import iconSvg from "@/assets/icons/icon.svg";


interface Props {
  title: string;
  description: string;
  class?: string;
  image?: string;
}


const { title, description, class: classname } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
    />
    <meta name="theme-color" content="#131618" />
    <link rel="icon" type="image/svg+xml" href={iconSvg.src} />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <link
      rel="alternate"
      type="application/rss+xml"
      title={title}
      href={new URL("rss.xml", Astro.site)}
    />
    <meta name="generator" content={Astro.generator} />
    <link rel="canonical" href={canonicalURL} />
    <title>{title}</title>
    <meta name="title" content={title} />
    <meta name="description" content={description} />
    <meta name="author" content="pyrossh" />
    <meta name="keywords" content="pyrossh.dev,pyrossh,astrojs,website" />


    <!-- Open Graph / Facebook -->
    <meta property="og:site_name" content="pyrossh.dev" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content={Astro.url} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={iconSvg.src} />


    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content={Astro.url} />
    <meta property="twitter:title" content={title} />
    <meta property="twitter:description" content={description} />
    <meta property="twitter:image" content={iconSvg.src} />
    <ResetCSS />
    <ClientRouter />
  </head>
  <body>
    <style>
      @view-transition {
        navigation: auto; /* enabled! */
      }
    </style>
    <script is:inline>
      if (window.__TAURI__) {
        window.__TAURI__.log.info("Back key triggered");
        window.__TAURI__.app.onBackButtonPress(() => {
          if (window.history.length > 1) {
            window.history.back();
            return true; // Mark event as handled
          }
          return false; // Let the app close
        });
      }
    </script>
    <Header />
    <Wrapper>
      <main class:list={classname}>
        <slot />
      </main>
    </Wrapper>
    <Footer />
  </body>
</html>
<style is:global>
  :root {
    --color-black: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 0%));
    --color-white: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
    --color-accent: light-dark(hsl(65, 92%, 76%), hsl(65, 92%, 76%));
    --color-body-bg: light-dark(hsl(0, 0%, 100%), hsl(210, 13%, 15%));
    --color-box-bg: light-dark(hsl(0, 0%, 95%), hsl(210, 13%, 9%));
    --color-text: light-dark(hsl(0, 0%, 13%), hsl(210, 17%, 98%));
    --color-link: light-dark(hsl(211, 100%, 45%), hsl(211, 100%, 60%));
    --color-post-link: light-dark(hsl(0, 0%, 0%), hsl(211, 100%, 60%));
    --color-highlight-bg: light-dark(hsl(183, 80%, 88%), hsl(183, 80%, 18%));
    --color-code-fg: light-dark(hsl(348, 86%, 43%), hsl(348, 86%, 80%));
    --color-code-bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 0%));
    --color-pre-bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 0%));
    --color-tag: light-dark(hsl(152, 96%, 35%), hsl(152, 96%, 44%));
    --btn-light: none;
    --btn-dark: block;


    .astro-code,
    .astro-code span {
      background: var(--color-pre-bg) !important;
    }
  }


  [data-theme="dark"] {
    --btn-light: block;
    --btn-dark: none;


    .expressive-code .frame pre {
      background: var(--color-pre-bg) !important;
    }
  }


  [data-tooltip] {
    position: relative;
    cursor: help;
  }


  [data-tooltip]::after {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    content: attr(data-tooltip);
    left: 0;
    top: calc(100% + 10px);
    border-radius: 3px;
    box-shadow: 0 0 1px 1px var(--color-text);
    background-color: var(--color-box-bg);
    z-index: 10;
    padding: 8px;
    width: 300px;
    transform: translateY(-20px);
    transition: all 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
  }


  [data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(0);
    transition-duration: 300ms;
  }


  body {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: var(--color-body-bg);
    color: var(--color-text);
    font-family: system-ui;
    text-rendering: optimizeLegibility;
    font-variant-ligatures: common-ligatures;
    font-kerning: normal;
    font-size: 1.25rem;
    line-height: 1.5;
    min-height: 100vh;


    @media (max-width: 720px) {
      font-size: 1.1rem;
    }
  }


  main {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1em;
  }
</style>