From: Lady <redacted> Date: Fri, 26 May 2023 22:35:18 +0000 (-0700) Subject: Update branding X-Git-Url: https://git.ladys.computer/WWW/commitdiff_plain/18a626a0108ac706d0d0ae707f6dfbde1255fa77?ds=inline Update branding - Remove banner and just use text for headers - Fonts to match `blog` - More icons & badges in `media/` --- diff --git a/index.html b/index.html index 75dca9c..9423643 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ <TITLE>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: 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: 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,h1 img{ Display: Block; Margin: 0; Color: #D6B7BF; Font-Size: 3REM; Font-Style: Italic; Font-Weight: Inherit; Text-Decoration: Underline } +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 } @@ -17,7 +17,7 @@ img{ Display: Block; Image-Rendering: Pixelated } #badges img{ Margin-Block-Start: 1PX } </STYLE> -<H1><IMG Alt="Lady’s Computer" Aria-Label="Lady’s Computer: MY computer over YOUR internets" Width=468 Height=60 Src=./media/banner.png></H1> +<H1>Lady’s Computer</H1> <NAV> <STRONG>Available subdomains:</STRONG> <UL> diff --git a/media/badge-alt.png b/media/badge-alt.png new file mode 100644 index 0000000..b7cb515 Binary files /dev/null and b/media/badge-alt.png differ diff --git a/media/badge.png b/media/badge.png index b7cb515..a97d6e4 100644 Binary files a/media/badge.png and b/media/badge.png differ diff --git a/media/icon-heart.png b/media/icon-heart.png new file mode 100644 index 0000000..cd445b6 Binary files /dev/null and b/media/icon-heart.png differ diff --git a/media/icon-lady.png b/media/icon-lady.png new file mode 100644 index 0000000..77c719a Binary files /dev/null and b/media/icon-lady.png differ diff --git a/media/icon-logotype.png b/media/icon-logotype.png new file mode 100644 index 0000000..dbd1417 Binary files /dev/null and b/media/icon-logotype.png differ diff --git a/media/index.html b/media/index.html index b16f8ec..5bb41e7 100644 --- 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> -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 } -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 } +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> -<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> @@ -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> - <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> - <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>