Leverage it for inclusions of media and shared metadata across pages.
+/build
+/public
.grass
%*
--- /dev/null
+[submodule "书社"]
+ path = .shushe
+ url = https://git.ladys.computer/Shushe.git
-s .DS_Store
--s .git
--s .gitignore
--s /GNUmakefile
--s /.grass
-- /.rsync-filter
--s README*
-s #*
-s %*
--- /dev/null
+Subproject commit d627a5222e6649e8c359395febcfc093580b51f1
SHELL = /bin/sh
-# © 2023 Lady [@ Lady’s Computer].
+# © 2023–2024 Lady [@ Lady’s Computer].
#
# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
GIT_FORCE =
+SHUSHE = .shushe
+SHUSHE_OPTIONS = 'INCLUDEDIR=sources/INCLUDE' 'TRANSFORMS=$(wildcard transforms/*.xslt) $(wildcard $(SHUSHE)/transforms/*.xslt)'
+
build:
-# Put any necessary build scripts in here!
+ rm -rf ./public
+ @$(MAKE) -f $(SHUSHE)/GNUmakefile install $(SHUSHE_OPTIONS)
touch .grass
+list:
+ @$(MAKE) -f $(SHUSHE)/GNUmakefile list $(SHUSHE_OPTIONS)
+
ensure-build:
@if [ ! -f .grass ]; then echo 'Error: The website has not been built yet!' >&2; echo 'Run `make` before syncing.' >&2; exit 1; fi
@if buildtime=$$(stat -f '%m' .grass) && committime=$$(git log -1 --format='%ct' | awk '{print $$NF}') && [ "$$committime" -gt "$$buildtime" ]; then echo 'Error: A commit was made after the last build!' >&2; echo 'Run `make` before syncing.' >&2; exit 1; fi
@if output=$$(git status --porcelain) && [ ! -z "$$output" ]; then echo 'Error: There are uncommitted changes!' >&2; echo 'Commit changes and run `make` before syncing.' >&2; exit 1; fi
dry-sync: ensure-clean$(if $(GIT_FORCE),, ensure-branch-up-to-date) ensure-build
- $(RSYNC) $(RSYNC_FLAGS) --del --dry-run --filter=". $(RSYNC_FILTER)" --iconv=$(SOURCE_CHARSET),$(DESTINATION_CHARSET) $(RSYNC_OPTIONS) . $(DESTINATION)
+ cd public && $(RSYNC) $(RSYNC_FLAGS) --del --dry-run --filter=". ../$(RSYNC_FILTER)" --iconv=$(SOURCE_CHARSET),$(DESTINATION_CHARSET) $(RSYNC_OPTIONS) . $(DESTINATION)
sync: ensure-clean$(if $(GIT_FORCE),, ensure-branch-up-to-date) ensure-build
- $(RSYNC) $(RSYNC_FLAGS) --del --filter=". $(RSYNC_FILTER)" --iconv=$(SOURCE_CHARSET),$(DESTINATION_CHARSET) $(RSYNC_OPTIONS) . $(DESTINATION)
+ cd public && $(RSYNC) $(RSYNC_FLAGS) --del --filter=". ../$(RSYNC_FILTER)" --iconv=$(SOURCE_CHARSET),$(DESTINATION_CHARSET) $(RSYNC_OPTIONS) . $(DESTINATION)
git push$(if $(GIT_FORCE), --force,)
.PHONY: build dry-sync ensure-branch-up-to-date ensure-build ensure-clean sync;
+++ /dev/null
-<!dOcTyPe hTmL>
-<TITLE>About | Lady’s Computer</TITLE>
-<META Name=viewport Content="width=480">
-<STYLE>
-html{ Color: #F3DEE3; Background: #1A1A1A; Font-Family: 'Charis SIL', Charter, 'Bitstream Charter', 'Palatino Linotype', 'URW Palladio L', P052, Georgia, 'STIX Two Math', Serif; Line-Height: 1.5; Text-Align: Justify; Text-Align-Last: Center }
-body{ Margin: Auto; Padding-Block: 1REM; Padding-Inline: 1CH; Max-Inline-Size: 48REM }
-h1{ Margin-Block: 0 1REM; Color: #D6B7BF; Font-Size: 3REM; Font-Style: Italic; Font-Weight: Inherit }
-h2{ Margin-Block: 2REM; Color: #D6B7BF; Font-Size: 2REM }
-h3{ Margin-Block: 1REM; Margin-Inline: Auto; Border-Block: Thin Solid; Padding-Inline: 2CH; Max-Inline-Size: Max-Content; Color: #D6B7BF; Font-Size: 1.5REM; Font-Weight: Inherit }
-:Any-Link{ Color: #D6B7BF }
-h1 :Any-Link{ Color: Inherit }
-h1 small{ Font-Size: Inherit; Font-Style: Normal }
-</STYLE>
-
-<H1><SMALL><A HRef="/">Lady’s Computer</A> ∷ </SMALL>About</H1>
-
-<SECTION id="site">
- <H2>About this Site</H2>
- <P>
- <CITE>Lady’s Computer</CITE> is a humble home for my various digital creations on the internet.
- The name began as a joke/reference to the early <CITE>Pokémon</CITE> games, when the in‐universe cloud storage for Pokémon was literally called “Someone’s P·C”.
- You could, of course, also log into Prof Oak’s P·C to get your Pokédex evaluated, or log into your home P·C to access your storage.
- This site is like the last of those:
- It’s remote storage for my various files and digital clutter that you can log into from the internet.
- It’s designed and organized the way I would like to use it, and I hope that in your time here some of that personality shines through.
- <P>
- If you’re technically‐minded, I have a growing number of modules, scripts, and other code available on the <A HRef=https://git.ladys.computer>Gitweb instance</A> attached to this site.
- Otherwise, I have a <A HRef=https://blog.ladys.computer>blog</A> which may interest you.
- More functionality will probably be added to this site over time!
-</SECTION>
-
-<SECTION id="lady">
- <H2>About Lady</H2>
- <P>
- I’m a writer who got into programming because she wanted to publish her stories on the internet, and who got <EM>good</EM> at programming because she spent way too much time conlanging when she was in college and needed tools for dealing with that.
- I’m a fan of Nintendo games and have been known to write fanfiction about them.
- I’m also a dyke and a Gender Studies major, so I’m not one to shy away from speaking openly and frankly about sexuality.
- <P>
- If you want to contact me, I am @·able over on the (Mastodon‐compatible) fediverse <A HRef="https://glitch.cat.family/@Lady"><CODE>@Lady@cat.family</CODE></A>, where I mostly yell about pornography in <CITE>Zelda</CITE> fanfiction.
- You can also send me a message via electronic mail; my name is <CODE>lady</CODE> and my website is <CODE>ladys.computer</CODE>, so I’m sure you can figure the rest out.
-</SECTION>
+++ /dev/null
-<!dOcTyPe hTmL>
-<TITLE>Lady’s Computer</TITLE>
-<META Name=viewport Content="width=480">
-<STYLE>
-html{ Color: #F3DEE3; Background: #1A1A1A; Font-Family: 'Charis SIL', Charter, 'Bitstream Charter', 'Palatino Linotype', 'URW Palladio L', P052, Georgia, 'STIX Two Math', Serif; Line-Height: 1.5; Text-Align: Center }
-body{ Display: Grid; Grid-Template: Auto / Auto-Flow; Align-Content: Center; Justify-Content: Center; Box-Sizing: Border-Box; Margin: Auto; Padding-Block: 1REM; Padding-Inline: 1CH; Min-Block-Size: 100SVB; Max-Inline-Size: 48REM; Gap: 2REM }
-h1{ Margin: 0; Color: #D6B7BF; Font-Size: 3REM; Font-Style: Italic; Font-Weight: Inherit; Text-Decoration: Underline }
-nav{ Display: Flex; Flex-Wrap: Wrap; Justify-Content: Center; Gap: 1CH }
-body>nav{ Border: None; Font-Size: 1.5REM }
-body>nav+nav{ Border: Thin Dashed; Font-Size: 1.25REM }
-footer>nav{ Border: None; Font-Size: Inherit }
-nav ul,nav li{ Display: Contents }
-:Any-Link{ Color: #D6B7BF }
-img{ Display: Block; Image-Rendering: Pixelated }
-#buttons{ Font-Size: 16PX; Line-Height: 31PX }
-#buttons strong{ Width: 100%; Border-Bottom: 1PX Solid }
-#badges img{ Margin-Block-Start: 1PX }
-</STYLE>
-
-<H1>Lady’s Computer</H1>
-<NAV>
- <STRONG>Available subdomains:</STRONG>
- <UL>
- <LI><A HRef=https://blog.ladys.computer/><CODE>blog</CODE></A>
- <LI><A HRef=https://git.ladys.computer/><CODE>git</CODE></A>
- <LI><A HRef=https://status.ladys.computer/><CODE>status</CODE></A>
- <LI><A HRef=https://wiki.ladys.computer/><CODE>wiki</CODE></A>
- <LI><STRONG><CODE>www</CODE></STRONG>
- </UL>
-</NAV>
-<NAV>
- <STRONG>Pages:</STRONG>
- <UL>
- <LI><A HRef=/about><CODE>/about</CODE></A>
- <LI><A HRef=/media><CODE>/media</CODE></A>
- </UL>
-</NAV>
-<FOOTER>
- <NAV id="buttons">
- <STRONG>Also check out these sites:</STRONG>
- <UL>
- <LI><A HRef=https://www.fancoders.com/><IMG Alt="Fandom Coders" Aria-Label="{fc}: fandom coders" Title="Fandom Coders" Width=88 Height=31 Src=data:image/gif;base64,R0lGODdhWAAfAKIAACAiJZDbZWXS29zd3qOmqjY5PwAAAAAAACH5BAQKAAAALAAAAABYAB8AAAP/CLrc/qvISau9OGsJu2dbKI6XE5yfcgYONQxkBscZs67fjUbSTF++X2WBS5l2gElQqGRaiCzjA9l0uqwUqEPAFeSiycLrpSQ3xxV0EH02syc2cLfrQYbF1165iu/5/nt+fAVxC1xSdoNpelVLM46MkX0cWgCHiGB3S2Jsa5J9kJOiQYWWXpggkmageaGueZKVphBzpwBUka+Ni6Ksg6QqcrYMtZe4k2uPrS6AubCispfE0nTHyWTKfGMw18+ecDjFdHTTwSxY6BpF4ofSECvp8U9FCu6zHTjpm+nRw/dTYPTJyxLMkD97pe5Y2YeuXwOEsgQOpFTwXz2Iico4WqVxexRHbo/elKiEkFxCTdp+BUK28tvIihDF3cr06VO2XcsU1SDpz+Ccman26Wq0zU0ahgSBSjnCQyivobyOapC1NGIvm1iv1tQJx1xVKAGdifWYUtWzIWDpvdORys/Gt9yYuXSLlFADtfjsKJjIhIDfvxS/fuArT7ARwvESAAA7></A>
- <LI><A HRef=https://www.u2764.com/><IMG Alt=U2764 Aria-Label="❤ U2764" Title=www.u2764.com Width=88 Height=31 Src=data:image/gif;base64,R0lGODdhWAAfAJEAAB8aFPVul97b2fr49yH5BAQKAAAALAAAAABYAB8AAAL/hI+py+0Pn5i02ouz3rxnI0TiSJZNCITByrbu25rynIKAm+CIPgxKj+gBD8KiMHh0DGs1FsO5gC6JPoOxCrgWqdvGEqUKOMSNlRVLPVeTjGGSnWCDb2SZOYs+49Hw+Jqfx3UwVzdDNqWHiNf2BxjYxaRCZKfn5xVYqagpZ3NoWIl0yQiaFvrVOWly+Ii5uLCk+Opz2mSVpUqaW/qDFWvpGnmTWrLKKyua2JeJRRh0O1L8Kz2tlQfL3OnZ+hQdOk39NnU9mD05G3G3aTwquCuO3XR3u72TzvoN7khKGyZ/vh0D2C5dAwUmq2YjHpR5ZQKqK/hNXbUhhHQwzPNC1zslatbuHUvYLyDDejw8GlwH0Rc/OhltYYGxSh/BlO9arYRZ5yXMgeM4fpwJrOJOkjDasfEFcY8aZMFwynNa6AoXLd54QfopFCdLrUhqUk2qhl7QbFDL0jg7Yg7atWwlgPAAN67cuRva2r3LoAAAOw==></A>
- <LI><A HRef=https://mincerafter42.github.io/><IMG Alt=Viatrix Aria-Label=Viatrix. Title="Viatrix: Internet Rando Extraordinaire!" Width=88 Height=31 Src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAMAAABUFvrSAAABblBMVEUAAABqAEfUAI3UAY3UAo7VA47VBI/VBY/VCJHWCpHWDJLWDZPWDpPXD5TXFJbYFZbYFpfYGJjYGZjYGpnZHJrZIJvaIpzaJJ3aJZ7bJ57bKZ/bK6DbLKHdNqXeO6fePajfQ6vfRKvgSK3gSa7gSq7hTK/hT7DhULHiUbHiU7LiVLPiVbPjV7TjWrXkX7fkYbjmbL3nbr7ncsDnc8Dod8LoeMPpesTpe8TpfMTpfsXpf8bqgcfqg8jqhcjrhsnrh8nrisvsjsztk8/tldDumdHumtLum9Lvn9TvoNXvo9bwp9jwqNjxq9nxrNrxrdrxrtvyr9vysNzysdzyst3ys93ytN3ztd7zt9/zuuD0veH0v+L1wuT1w+T1xeX2x+b2yuf2zOj3zun3z+r30er30uv41ez41+352+/63/H64/L65PP75/T76PX76vb87Pf87vf87/j98vn99Pr99fv99vv++Pz++fz//f7//v////9aIiShAAAAAXRSTlMAQObYZgAAAYxJREFUSMft1vk3AlEUB/C6aLUWyZayZMmerCFrKFuyJJFEVKI0+P73ZqYm/OLMHM0PHPeHOfPePfdzZt7cmXkKBRfKsoZCCKWSyhoCXWaWp2VyC7JcsCwuJ//DImFDPKSSlhAJDwAt0hLfwQGE2aP6CW7SLE18zM8l1kvnXxJi4WG81hHZgPav8ysI/myNdXmMEq3ihrYA1FDbQSYX7aUYO4DdCn9fbJBPOPFoaMxiXPwa7yBAFUnM0tQVW69PYf8EjGkjicyZxYrHJwzxicoLHB7hvFI87EBe28E/HQt3xdVdRHcYKSyFFQj2NBQSrQyQN0voCm0O9kXEqAib3ZEUMFmCjUKCZgCXpHbzwXvLl3D1nTkczyXYoQCrSnAA2JUE9+MZMBXrvTgldRoLLHzJw1UCPAyGgYM0eyGjSFiTBYcU6j1gNiNvWKN5IG37BNdn4JrGQ203MCb2zWPbySnAel/2ftnD3nPz9QvXbiXYj2iVKoZtXTje9P/Z/FPw7/v9y7cTkm/vJs9u8x2/+H4jf93M9QAAAABJRU5ErkJggg==></A>
- </UL>
- </NAV>
-</FOOTER>
+++ /dev/null
-<!dOcTyPe hTmL>
-<TITLE>Media | Lady’s Computer</TITLE>
-<META Name=viewport Content="width=480">
-<STYLE>
-html{ Color: #F3DEE3; Background: #1A1A1A; Font-Family: 'Charis SIL', Charter, 'Bitstream Charter', 'Palatino Linotype', 'URW Palladio L', P052, Georgia, 'STIX Two Math', Serif; Line-Height: 1.5; Text-Align: Justify; Text-Align-Last: Center }
-body{ Margin: Auto; Padding-Block: 1REM; Padding-Inline: 1CH; Max-Inline-Size: 48REM }
-h1{ Margin-Block: 0 1REM; Color: #D6B7BF; Font-Size: 3REM; Font-Style: Italic; Font-Weight: Inherit }
-h2{ Margin-Block: 2REM; Color: #D6B7BF; Font-Size: 2REM }
-h3{ Margin-Block: 1REM; Margin-Inline: Auto; Border-Block: Thin Solid; Padding-Inline: 2CH; Max-Inline-Size: Max-Content; Color: #D6B7BF; Font-Size: 1.5REM; Font-Weight: Inherit }
-:Any-Link{ Color: #D6B7BF }
-h1 :Any-Link{ Color: Inherit }
-h1 small{ Font-Size: Inherit; Font-Style: Normal }
-figure{ Margin-Inline: Auto; Max-Width: Max-Content; Text-Align: Center }
-figure>div{ Display: Flex; Flex-Wrap: Wrap; Gap: .5EM 1CH }
-img{ Display: Block; Margin: Auto; Block-Size: Auto; Max-Inline-Size: 100%; Image-Rendering: Pixelated }
-</STYLE>
-
-<H1><SMALL><A HRef="/">Lady’s Computer</A> ∷ </SMALL>Media</H1>
-
-<SECTION>
- <H2><CITE>Lady’s Computer</CITE></H2>
- <SECTION>
- <H3>Banners, Buttons & Badges</H3>
- <FIGURE>
- <IMG Width=468 Height=60 Src=banner.png>
- <FIGCAPTION>Banner <SMALL>(468×60)</SMALL></FIGCAPTION>
- </FIGURE>
- <FIGURE>
- <IMG Width=144 Height=72 Src=logo.png>
- <FIGCAPTION>Logo <SMALL>(144×72)</SMALL></FIGCAPTION>
- </FIGURE>
- <FIGURE>
- <IMG Width=88 Height=31 Src=button.png>
- <FIGCAPTION>Button <SMALL>(88×31)</SMALL></FIGCAPTION>
- </FIGURE>
- <FIGURE>
- <IMG Width=72 Height=27 Src=button-small.png>
- <FIGCAPTION>Button <SMALL>(72×27)</SMALL></FIGCAPTION>
- </FIGURE>
- <FIGURE>
- <DIV>
- <IMG Width=80 Height=15 Src=badge.png>
- <IMG Width=80 Height=15 Src=badge-alt.png>
- </DIV>
- <FIGCAPTION>Badges <SMALL>(80×15)</SMALL></FIGCAPTION>
- </FIGURE>
- <FIGURE>
- <IMG Width=48 Height=48 Src=icon-large.png>
- <FIGCAPTION>Icon <SMALL>(48×48)</SMALL></FIGCAPTION>
- </FIGURE>
- <FIGURE>
- <DIV>
- <IMG Width=32 Height=32 Src=icon.png>
- <IMG Width=32 Height=32 Src=icon-heart.png>
- <IMG Width=32 Height=32 Src=icon-lady.png>
- <IMG Width=32 Height=32 Src=icon-logotype.png>
- </DIV>
- <FIGCAPTION>Icons <SMALL>(32×32)</SMALL></FIGCAPTION>
- </FIGURE>
- <FIGURE>
- <IMG Width=16 Height=16 Src=icon-small.png>
- <FIGCAPTION>Icon <SMALL>(16×16)</SMALL></FIGCAPTION>
- </FIGURE>
- </SECTION>
-</SECTION>
--- /dev/null
+<?xml version="1.0"?>
+<article xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:书社="urn:fdc:ladys.computer:20231231:Shu1She4" lang="en" xml:lang="en">
+ <meta itemprop="urn:fdc:ladys.computer:20231231:Shu1She4:title" content="About | Lady’s Computer"/>
+ <h1><small><a href="/">Lady’s Computer</a> ∷ </small>About</h1>
+ <section id="site">
+ <h2>About this Site</h2>
+ <p>
+ <cite>Lady’s Computer</cite> is a humble home for my various digital creations on the internet.
+ The name began as a joke/reference to the early <cite>Pokémon</cite> games, when the in‐universe cloud storage for Pokémon was literally called “Someone’s P·C”.
+ You could, of course, also log into Prof Oak’s P·C to get your Pokédex evaluated, or log into your home P·C to access your storage.
+ This site is like the last of those:
+ It’s remote storage for my various files and digital clutter that you can log into from the internet.
+ It’s designed and organized the way I would like to use it, and I hope that in your time here some of that personality shines through.
+ </p>
+ <p>
+ If you’re technically‐minded, I have a growing number of modules, scripts, and other code available on the <a href="https://git.ladys.computer">Gitweb instance</a> attached to this site.
+ Otherwise, I have a <a href="https://blog.ladys.computer">blog</a> which may interest you.
+ More functionality will probably be added to this site over time!
+ </p>
+ </section>
+ <section id="lady">
+ <h2>About Lady</h2>
+ <p>
+ I’m a writer who got into programming because she wanted to publish her stories on the internet, and who got <em>good</em> at programming because she spent way too much time conlanging when she was in college and needed tools for dealing with that.
+ I’m a fan of Nintendo games and have been known to write fanfiction about them.
+ I’m also a dyke and a Gender Studies major, so I’m not one to shy away from speaking openly and frankly about sexuality.
+ </p>
+ <p>
+ If you want to contact me, I am @·able over on the (Mastodon‐compatible) fediverse <a href="https://glitch.cat.family/@Lady"><code>@Lady@cat.family</code></a>, where I mostly yell about pornography in <cite>Zelda</cite> fanfiction.
+ You can also send me a message via electronic mail; my name is <code>lady</code> and my website is <code>ladys.computer</code>, so I’m sure you can figure the rest out.
+ </p>
+ </section>
+</article>
--- /dev/null
+<?xml version="1.0"?>
+<body xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:书社="urn:fdc:ladys.computer:20231231:Shu1She4" lang="en" xml:lang="en">
+ <style>
+body{ Display: Grid; Grid-Template: Auto / Auto-Flow; Align-Content: Center; Justify-Content: Center; Box-Sizing: Border-Box; Min-Block-Size: 100SVB; Gap: 2REM }
+h1{ Margin: 0; Text-Decoration: Underline }
+nav{ Display: Flex; Flex-Wrap: Wrap; Justify-Content: Center; Gap: 1CH }
+body>nav{ Border: None; Font-Size: 1.5REM }
+body>nav+nav{ Border: Thin Dashed; Font-Size: 1.25REM }
+footer>nav{ Border: None; Font-Size: Inherit }
+nav ul,nav li{ Display: Contents }
+img{ Display: Block; Image-Rendering: Pixelated }
+#buttons{ Font-Size: 16PX; Line-Height: 31PX }
+#buttons strong{ Width: 100%; Border-Bottom: 1PX Solid }
+#badges img{ Margin-Block-Start: 1PX }
+ </style>
+ <meta itemprop="urn:fdc:ladys.computer:20231231:Shu1She4:title" content="Lady’s Computer"/>
+ <h1>Lady’s Computer</h1>
+ <nav>
+ <strong>Available subdomains:</strong>
+ <ul>
+ <li><a href="https://blog.ladys.computer/"><code>blog</code></a></li>
+ <li><a href="https://git.ladys.computer/"><code>git</code></a></li>
+ <li><a href="https://status.ladys.computer/"><code>status</code></a></li>
+ <li><a href="https://wiki.ladys.computer/"><code>wiki</code></a></li>
+ <li><strong><code>www</code></strong></li>
+ </ul>
+ </nav>
+ <nav>
+ <strong>Pages:</strong>
+ <ul>
+ <li><a href="/about"><code>/about</code></a></li>
+ <li><a href="/media"><code>/media</code></a></li>
+ </ul>
+ </nav>
+ <footer>
+ <nav id="buttons">
+ <strong>Also check out these sites:</strong>
+ <ul>
+ <li><a href="https://www.fancoders.com/"><书社:apply-attributes alt="Fandom Coders" aria-label="{fc}: fandom coders" width="88" height="31"><书社:link xlink:href="about:shushe?include=buttons/fc.gif" xlink:show="embed"/></书社:apply-attributes></a></li>
+ <li><a href="https://www.u2764.com/"><书社:apply-attributes alt="U2764" aria-label="❤ U2764" width="88" height="31"><书社:link xlink:href="about:shushe?include=buttons/u2764.gif" xlink:show="embed"/></书社:apply-attributes></a></li>
+ <li><a href="https://mincerafter42.github.io/"><书社:apply-attributes alt="Viatrix" aria-label="Viatrix." width="88" height="31"><书社:link xlink:href="about:shushe?include=buttons/viatrix.png" xlink:show="embed"/></书社:apply-attributes></a></li>
+ </ul>
+ </nav>
+ </footer>
+</body>
--- /dev/null
+<?xml version="1.0"?>
+<article xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:书社="urn:fdc:ladys.computer:20231231:Shu1She4" lang="en" xml:lang="en">
+ <style>
+figure{ Margin-Inline: Auto; Max-Width: Max-Content; Text-Align: Center }
+figure>div{ Display: Flex; Flex-Wrap: Wrap; Gap: .5EM 1CH }
+img{ Display: Block; Margin: Auto; Block-Size: Auto; Max-Inline-Size: 100%; Image-Rendering: Pixelated }
+ </style>
+ <meta itemprop="urn:fdc:ladys.computer:20231231:Shu1She4:title" content="Media | Lady’s Computer"/>
+ <h1><small><a href="/">Lady’s Computer</a> ∷ </small>Media</h1>
+ <section id="ladys">
+ <h2><cite>Lady’s Computer</cite></h2>
+ <section id="ladys.brand">
+ <h3>Banners, Buttons & Badges</h3>
+ <figure>
+ <书社:apply-attributes width="468" height="60"><书社:link xlink:href="about:shushe?include=brand/banner.png" xlink:show="embed"/></书社:apply-attributes>
+ <figcaption>Banner <small>(468×60)</small></figcaption>
+ </figure>
+ <figure>
+ <书社:apply-attributes width="144" height="72"><书社:link xlink:href="about:shushe?include=brand/logo.png" xlink:show="embed"/></书社:apply-attributes>
+ <figcaption>Logo <small>(144×72)</small></figcaption>
+ </figure>
+ <figure>
+ <书社:apply-attributes width="88" height="31"><书社:link xlink:href="about:shushe?include=brand/button.png" xlink:show="embed"/></书社:apply-attributes>
+ <figcaption>Button <small>(88×31)</small></figcaption>
+ </figure>
+ <figure>
+ <书社:apply-attributes width="72" height="27"><书社:link xlink:href="about:shushe?include=brand/button-small.png" xlink:show="embed"/></书社:apply-attributes>
+ <figcaption>Button <small>(72×27)</small></figcaption>
+ </figure>
+ <figure>
+ <div>
+ <书社:apply-attributes width="80" height="15"><书社:link xlink:href="about:shushe?include=brand/badge.png" xlink:show="embed"/></书社:apply-attributes>
+ <书社:apply-attributes width="80" height="15"><书社:link xlink:href="about:shushe?include=brand/badge-alt.png" xlink:show="embed"/></书社:apply-attributes>
+ </div>
+ <figcaption>Badges <small>(80×15)</small></figcaption>
+ </figure>
+ <figure>
+ <书社:apply-attributes width="48" height="48"><书社:link xlink:href="about:shushe?include=brand/icon-large.png" xlink:show="embed"/></书社:apply-attributes>
+ <figcaption>Icon <small>(48×48)</small></figcaption>
+ </figure>
+ <figure>
+ <div>
+ <书社:apply-attributes width="32" height="32"><书社:link xlink:href="about:shushe?include=brand/icon.png" xlink:show="embed"/></书社:apply-attributes>
+ <书社:apply-attributes width="32" height="32"><书社:link xlink:href="about:shushe?include=brand/icon-heart.png" xlink:show="embed"/></书社:apply-attributes>
+ <书社:apply-attributes width="32" height="32"><书社:link xlink:href="about:shushe?include=brand/icon-lady.png" xlink:show="embed"/></书社:apply-attributes>
+ <书社:apply-attributes width="32" height="32"><书社:link xlink:href="about:shushe?include=brand/icon-logotype.png" xlink:show="embed"/></书社:apply-attributes>
+ </div>
+ <figcaption>Icons <small>(32×32)</small></figcaption>
+ </figure>
+ <figure>
+ <书社:apply-attributes width="16" height="16"><书社:link xlink:href="about:shushe?include=brand/icon-small.png" xlink:show="embed"/></书社:apply-attributes>
+ <figcaption>Icon <small>(16×16)</small></figcaption>
+ </figure>
+ </section>
+ </section>
+</article>
--- /dev/null
+<?xml version="1.0"?>
+<transform
+ xmlns="http://www.w3.org/1999/XSL/Transform"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns:xslt="http://www.w3.org/1999/XSL/Transform"
+ xmlns:书社="urn:fdc:ladys.computer:20231231:Shu1She4"
+ version="1.0"
+>
+ <书社:id>urn:fdc:ladys.computer:20240106:WWW:metadata.xslt</书社:id>
+ <template match="xslt:include[@书社:id='urn:fdc:ladys.computer:20240106:WWW:metadata.xslt']" mode="书社:metadata">
+ <html:meta name="viewport" content="width=480"/>
+ <html:style><text>@charset "UTF-8";
+html{ Color: #F3DEE3; Background: #1A1A1A; Font-Family: 'Charis SIL', Charter, 'Bitstream Charter', 'Palatino Linotype', 'URW Palladio L', P052, Georgia, 'STIX Two Math', Serif; Line-Height: 1.5; Text-Align: Justify; Text-Align-Last: Center }
+body{ Margin: Auto; Padding-Block: 1REM; Padding-Inline: 1CH; Max-Inline-Size: 48REM }
+h1{ Margin-Block: 0 1REM; Color: #D6B7BF; Font-Size: 3REM; Font-Style: Italic; Font-Weight: Inherit }
+h2{ Margin-Block: 2REM; Color: #D6B7BF; Font-Size: 2REM }
+h3{ Margin-Block: 1REM; Margin-Inline: Auto; Border-Block: Thin Solid; Padding-Inline: 2CH; Max-Inline-Size: Max-Content; Color: #D6B7BF; Font-Size: 1.5REM; Font-Weight: Inherit }
+:Any-Link{ Color: #D6B7BF }
+h1 :Any-Link{ Color: Inherit }
+h1 small{ Font-Size: Inherit; Font-Style: Normal }
+</text></html:style>
+ </template>
+</transform>