Update branding

[WWW] / media / index.html

diff --git a/media/index.html b/media/index.html
index b16f8ec91f0d514154c06981c5aeadbc9a22c5c7..5bb41e75e5fd5d50c50ed7162f3962a8f82bfe98 100644 (file)
--- a/media/index.html
+++ b/media/index.html
@@ -2,21 +2,21 @@
 <TITLE>Media | Lady’s Computer</TITLE>
 <META Name=viewport Content="width=480">
 <STYLE>
 <TITLE>Media | Lady’s Computer</TITLE>
 <META Name=viewport Content="width=480">
 <STYLE>

-html{ Color: #F3DEE3; Background: #1A1A1A; Font-Family: Serif; Line-Height: 1.5; Text-Align: Justify; Text-Align-Last: Center }
+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 }
 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; Text-Decoration: Underline }
+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 }
 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{ 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>
 
 img{ Display: Block; Margin: Auto; Block-Size: Auto; Max-Inline-Size: 100%; Image-Rendering: Pixelated }
 </STYLE>
 

-<HEADER>
-       <P><A HRef=/><IMG Alt="Lady’s Computer" Aria-Label="Lady’s Computer: MY computer over YOUR internets" Width=468 Height=60 Src=/media/banner.png></A></P>
-</HEADER>
+<H1><SMALL><A HRef="/">Lady’s Computer</A> ∷ </SMALL>Media</H1>

 
 

-<H1>Media</H1>

 <SECTION>
        <H2><CITE>Lady’s Computer</CITE></H2>
        <SECTION>
 <SECTION>
        <H2><CITE>Lady’s Computer</CITE></H2>
        <SECTION>


@@ -38,16 +38,24 @@ img{ Display: Block; Margin: Auto; Block-Size: Auto; Max-Inline-Size: 100%; Imag
                        <FIGCAPTION>Button <SMALL>(72×27)</SMALL></FIGCAPTION>
                </FIGURE>
                <FIGURE>
                        <FIGCAPTION>Button <SMALL>(72×27)</SMALL></FIGCAPTION>
                </FIGURE>
                <FIGURE>

-                       <IMG Width=80 Height=15 Src=badge.png>
-                       <FIGCAPTION>Badge <SMALL>(80×15)</SMALL></FIGCAPTION>
+                       <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>
                </FIGURE>
                <FIGURE>
                        <IMG Width=48 Height=48 Src=icon-large.png>
                        <FIGCAPTION>Icon <SMALL>(48×48)</SMALL></FIGCAPTION>
                </FIGURE>
                <FIGURE>

-                       <IMG Width=32 Height=32 Src=icon.png>
-                       <FIGCAPTION>Icon <SMALL>(32×32)</SMALL></FIGCAPTION>
+                       <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>
                </FIGURE>
                <FIGURE>
                        <IMG Width=16 Height=16 Src=icon-small.png>