badmanners/gallery.badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve HTML rendering in Markdown and update layouts

Browse source
This commit is contained in:
Bad Manners 2024-08-26 12:54:24 -03:00
parent 4194154818
commit 21a77ed254
40 changed files with 282 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/layouts/GalleryLayout.astro
View file

@ -3,15 +3,17 @@ import { getImage } from "astro:assets";
import BaseLayout from "./BaseLayout.astro";
import logoBM from "../assets/images/logo_bm.png";
import { t } from "../i18n";
import IconHome from "../components/icons/IconHome.astro";
import IconBriefcase from "../components/icons/IconBriefcase.astro";
import IconSquareRSS from "../components/icons/IconSquareRSS.astro";
import IconSun from "../components/icons/IconSun.astro";
import IconMoon from "../components/icons/IconMoon.astro";
import IconMagnifyingGlass from "../components/icons/IconMagnifyingGlass.astro";
import IconTags from "../components/icons/IconTags.astro";
import IconGamepad from "../components/icons/IconGamepad.astro";
import IconBook from "../components/icons/IconBook.astro";
import {
IconHome,
IconBriefcase,
IconSquareRSS,
IconSun,
IconMoon,
IconMagnifyingGlass,
IconTags,
IconGamepad,
IconBook,
} from "../components/icons";
type Props = {
pageTitle: string;
@ -29,107 +31,85 @@ const isCurrentRoute = (path: string) =>
<BaseLayout pageTitle={pageTitle}>
<Fragment slot="head">
<meta property="og:title" content={pageTitle || "Bad Manners"} />
<slot name="head-description" />
<meta property="og:url" content={Astro.url} />
<meta property="og:image" content={logo.src} />
<meta property="og:image:alt" content="Logo for Bad Manners" />
<slot name="head" />
</Fragment>
<div
class="flex min-h-screen flex-col bg-stone-200 text-stone-800 md:flex-row dark:bg-stone-800 dark:text-stone-200 print:bg-none"
>
<nav
class="h-card static mb-4 flex flex-col items-center bg-bm-300 pt-10 pb-10 text-center text-stone-900 shadow-xl md:fixed md:inset-y-0 md:left-0 md:mb-0 md:w-60 md:pt-20 dark:bg-green-900 dark:text-stone-100 print:bg-none print:shadow-none"
class="h-card static mb-4 flex flex-col items-center bg-bm-300 pb-10 pt-10 text-center text-stone-900 shadow-xl md:fixed md:inset-y-0 md:left-0 md:mb-0 md:w-60 md:pt-20 dark:bg-green-900 dark:text-stone-100 print:bg-none print:shadow-none"
>
<img
loading="eager"
src={logo.src}
alt="Logo for Bad Manners"
alt="A pixelated metal briefcase over a background with a green gradient."
class="u-logo my-4 w-full max-w-[192px] rounded-sm border-2 border-green-950 shadow-md"
width={192}
/>
<span class="p-name my-2 text-2xl font-semibold">Bad Manners</span>
<ul class="flex flex-col gap-y-2">
<li>
<a
class="u-url group text-link"
href="https://badmanners.xyz/"
data-age-restricted
rel="me"
>
<a class="u-url text-link group" href="https://badmanners.xyz/" data-age-restricted rel="me">
<IconHome width="1.25rem" height="1.25rem" class="inline align-middle" />
<span class="group-focus:underline group-hover:underline">Main website</span>
<span class="group-hover:underline group-focus:underline">Main website</span>
</a>
</li>
<li>
<a
class="u-url group text-link"
href="/"
aria-current={isCurrentRoute("/") ? "page" : undefined}
>
<a class="u-url text-link group" href="/" aria-current={isCurrentRoute("/") ? "page" : undefined}>
<IconBriefcase width="1.25rem" height="1.25rem" class="inline align-middle" />
<span class="group-focus:underline group-hover:underline">Gallery</span>
<span class="group-hover:underline group-focus:underline">Gallery</span>
</a>
</li>
<li>
<a
class="u-url group text-link"
class="u-url text-link group"
href="/stories/1"
aria-current={isCurrentRoute("/stories/1") ? "page" : undefined}
>
<IconBook width="1.25rem" height="1.25rem" class="inline align-middle" />
<span class="group-focus:underline group-hover:underline">Stories</span>
<span class="group-hover:underline group-focus:underline">Stories</span>
</a>
</li>
<li>
<a
class="u-url group text-link"
href="/games"
aria-current={isCurrentRoute("/games") ? "page" : undefined}
>
<a class="u-url text-link group" href="/games" aria-current={isCurrentRoute("/games") ? "page" : undefined}>
<IconGamepad width="1.25rem" height="1.25rem" class="inline align-middle" />
<span class="group-focus:underline group-hover:underline">Games</span>
<span class="group-hover:underline group-focus:underline">Games</span>
</a>
</li>
<li>
<a
class="u-url group text-link"
href="/tags"
aria-current={isCurrentRoute("/tags") ? "page" : undefined}
>
<a class="u-url text-link group" href="/tags" aria-current={isCurrentRoute("/tags") ? "page" : undefined}>
<IconTags width="1.25rem" height="1.25rem" class="inline align-middle" />
<span class="group-focus:underline group-hover:underline">Tags</span>
<span class="group-hover:underline group-focus:underline">Tags</span>
</a>
</li>
<li>
<a
class="u-url group text-link"
class="u-url text-link group"
href="/search"
rel="search"
aria-current={isCurrentRoute("/search") ? "page" : undefined}
>
<IconMagnifyingGlass width="1.25rem" height="1.25rem" class="inline align-middle" />
<span class="group-focus:underline group-hover:underline">Search</span>
<span class="group-hover:underline group-focus:underline">Search</span>
</a>
</li>
<li>
<a
class="u-url group text-link"
href="/feed.xml"
>
<a class="u-url text-link group" href="/feed.xml">
<IconSquareRSS width="1.25rem" height="1.25rem" class="inline align-middle" />
<span class="group-focus:underline group-hover:underline">RSS feed</span>
<span class="group-hover:underline group-focus:underline">RSS feed</span>
</a>
</li>
<li>
<button
data-dark-mode
style={{ display: "none" }}
class="group text-link"
>
<IconSun width="1.25rem" height="1.25rem" class="align-middle hidden dark:inline" />
<button data-dark-mode style={{ display: "none" }} class="text-link group">
<IconSun width="1.25rem" height="1.25rem" class="hidden align-middle dark:inline" />
<IconMoon width="1.25rem" height="1.25rem" class="inline align-middle dark:hidden" />
<span class="group-focus:underline group-hover:underline">{t("en", "published_content/toggle_dark_mode")}</span>
</a>
<span class="group-hover:underline group-focus:underline"
>{t("en", "published_content/toggle_dark_mode")}</span
>
</button>
</li>
</ul>
<div class="pt-4 text-center text-xs text-black dark:text-white">
@ -144,7 +124,7 @@ const isCurrentRoute = (path: string) =>
)
} |
</span>
<a class="text-link hover:underline focus:underline" href="/licenses.txt" rel="license">Licenses</a>
<a class="text-link hover:underline focus:underline" href="/licenses.toml" rel="license">Licenses</a>
</div>
</nav>
<main