From: Lady Date: Thu, 4 May 2023 03:42:42 +0000 (-0700) Subject: Styling updates X-Git-Url: https://git.ladys.computer/Blog/commitdiff_plain/ec624d9df011144db39f0bac81c55083cfea588a Styling updates Primarily to support figures and code blocks. --- diff --git a/style.css b/style.css index 37eb424..6f6355f 100644 --- a/style.css +++ b/style.css @@ -26,11 +26,17 @@ nav li[resource] time[property="http://purl.org/dc/elements/1.1/date"]::after{ C #entry\.rights{ Margin-Block: .5REM; Border-Block: 1PX #686868 Solid; Color: #3E3E3E; Background: #E3E3E3; Box-Shadow: Inset 0 0 1CH #939393; Text-Align: Center } #entry\.rights>*{ Font-Size: Smaller } #entry\.content::before{ Position: Absolute; Inset-Block: .5CH; Inset-Inline-Start: -4REM; Border-Block: 1PX #97596B Dashed; Border-Inline-Start: 1PX #97596B Dashed; Border-Start-Start-Radius: 1CH; Border-End-Start-Radius: 1CH; Inline-Size: 1CH; Box-Shadow: Inset 0 0 0 1PX #F3DEE3, Inset -2PX 0 0 0 #F3DEE3, Inset 2PX 0 0 0 #B38A96; Content: "" } -#entry\.content p{ Counter-Increment: P } -#entry\.content p::before{ Position: Absolute; Inset-Inline-Start: -4REM; Inset-Inline-End: 100%; Margin-Block: -1PX; Margin-Inline: Auto; Border: 1PX Solid; Border-Radius: 50%; Padding-Inline: 1CH; Inline-Size: Max-Content; Color: #1F7D63; Text-Align: Center; Content: "¶" Counter(P) } +#entry\.content p,#entry\.content pre{ Counter-Increment: P } +#entry\.content p::before,#entry\.content pre::before{ Position: Absolute; Inset-Inline-Start: -4REM; Inset-Inline-End: 100%; Margin-Block: -1PX; Margin-Inline: Auto; Border: 1PX Solid; Border-Radius: 50%; Padding-Inline: 1CH; Inline-Size: Max-Content; Color: #1F7D63; Text-Align: Center; Content: "¶" Counter(P) } nav li[resource] div[property="http://purl.org/dc/elements/1.1/abstract"]{ Padding-Inline-Start: 4CH } nav li[resource] div[property="http://purl.org/dc/elements/1.1/abstract"]::before{ Display: Block; Margin-Block: .5EM; Margin-Inline: -2CH 0; Font-Style: Italic; Font-Weight: Bold; Letter-Spacing: Calc(1EM / 18); Text-Decoration: Underline; Content: "Summary:" } blockquote{ Border-Block-Color: #8396A9 #373F47; Border-Inline-Color: #8396A9 #373F47; Border-Style: Solid; Padding: .5REM 1CH; Color: #001B5F; Background: #E3E3E3; Box-Shadow: -2PX -2PX #D8E3FF, 2PX 2PX #6B95FF; Font-Style: Italic } +figure{ Margin-Block: .5EM; Margin-Inline: Auto; Max-Inline-Size: Max-Content } +figure>:First-Child:Nth-Last-Child(2){ Margin-Block-Start: 0; Margin-Block-End: 0 } +figcaption{ Margin-Block: .5EM 0; Margin-Inline: Auto; Border-Block-Start: Thin Solid; Padding-Block-Start: .25EM; Padding-Inline: 2CH; Inline-Size: Max-Content; Color: #97596B; Font-Size: Smaller; Font-Style: Italic; Text-Align: Center } +pre{ Margin-Block: .5EM; Font: Inherit } +code{ Display: Inline-Block; Border: Thin Solid; Border-Radius: .25CH; Padding-Inline: .5CH; Color: /* to match the Shades of Purple theme */ #2D2B57; Background: /* to match the Shades of Purple theme */ #E3DFFF; Font-Size: .75REM; Font-Family: /* to match the Shades of Purple theme */ 'Operator Mono', 'Fira Code', 'Menlo', 'Monaco', 'Courier New', 'monospace'; Line-Height: /* to match the Shades of Purple theme */ 1.45 } +pre>code.hljs{ Display: Block; Border: /* to match the Shades of Purple theme */ #2D2B57 Outset; Padding-Block: 1EM; Padding-Inline: 2CH; Font-Size: .75REM } p{ Margin-Block: .5EM } :Any-Link{ Color: #3AE6B5 } main :Any-Link{ Color: #1F7D63 }