[Blog] / style.css

html{ Color: #E3E3E3; Background: #1A1A1A; Font-Family: Serif; Line-Height: 1.5 }
body{ Display: Flow-Root; Box-Sizing: Border-Box; Margin: 0; Border: 1PX #000000 Solid; Min-Block-Size: 100SVB; Color: #E3E3E3; Background: No-Repeat Radial-Gradient(Ellipse 64REM 96REM At Center, Transparent 32REM, #1A1A1A) Center / Cover, Repeating-Linear-Gradient(-45DEG, #3E3E3E00 0, #3E3E3E00 2PX, #3E3E3E7F 2.12PX, #3E3E3E7F 4.12PX, #3E3E3E00 4.24PX), #1A1A1A }
body>header{ Padding-Block: 16PX; Border-Block-End: 3PX #2CB38D Double }
body>header img{ Display: Block; Margin: Auto; Block-Size: Auto; Max-Inline-Size: 100%; Image-Rendering: Pixelated }
body>footer{ Border-Block-Start: 3PX #2CB38D Double }
main{ Display: Flow-Root; Margin: Auto; Border-Inline: 1PX #97596B Solid; Padding-Inline: 3CH; Max-Inline-Size: 43REM; Background: #1A1A1A }
main>header>p,main>nav>header>h1{ Margin-Block: 1.5REM; Border: 2PX #700020 Solid; Padding-Inline: 1CH; Max-Inline-Size: Max-Content; Color: #700020; Background: #F3DEE3; Box-Shadow: 0 0 0 2PX #F3DEE3, 2PX 2PX 0 2PX #2CB38D, -2PX -2PX 0 2PX #700020; Font-Size: 1.5REM; Font-Style: Italic; Font-Weight: Normal }
main>footer>p,main>nav>footer>p{ Display: Block; Margin-Block: 1.5REM; Margin-Inline: Auto; Border-Style: Solid; Border-Block-Color: #D6B7BF #2CB38D; Border-Inline-Color: #D6B7BF #2CB38D; Border-Width: 1PX; Padding-Inline: 1CH; Max-Inline-Size: Max-Content; Color: #700020; Background: #F3DEE3; Box-Shadow: 0 0 0 1PX #700020, Inset 0 0 0 1PX #700020 }
main>nav>footer>p{ Margin-Inline: Auto 0 }
nav ul[rel="http://bblfish.net/work/atom-owl/2006-06-06/entry"]{ All: Unset }
main>article,nav li[resource]{ Display: Flow-Root; Position: Relative; Margin-Block: 3REM 1.5REM; Border-Inline-Start: 2PX #700020 Dotted; Padding-Block: 1REM; Padding-Inline: Calc(5REM + 2CH) 2CH; Color: #1A1A1A; Background: No-Repeat Radial-Gradient(Circle At 2REM 3.5REM, #700020 .725REM, Transparent .775REM) Top Left / 4REM 12REM, No-Repeat Linear-Gradient(To Left, #992244 1PX, Transparent 1PX) Left / 5REM, No-Repeat Linear-Gradient(To Top, #2CB38D 1PX, Transparent 1PX) Top / Auto 5REM, #F3DEE3; Box-Shadow: 3PX 3PX 0 1PX #000000 }
main>article>header>h1,nav li[resource]>a{ Display: Flex; Align-Items: End; Margin-Block: -1REM 0; Padding-Block: .5REM; Block-Size: 4REM; Overflow: Auto; Font-Size: 1.5REM; Font-Style: Italic; Font-Weight: Inherit; Line-Height: 2REM }
nav li[resource]>a>h3{ All: Unset }
nav li[resource] p:has([rel="http://purl.org/dc/elements/1.1/creator"]){ Display: None }
nav li[resource] [rel="http://purl.org/dc/elements/1.1/creator"]:First-Child::before{ Content: "A blogpost by " }
nav li[resource] [rel="http://purl.org/dc/elements/1.1/creator"]:Last-Child::after{ Content: "." }
#entry\.author{ Margin-Block-End: 0; Margin-Inline: -1CH; Border: Thin #700020 Solid; Padding-Inline: 1CH; Color: #000000; Background: #D6B7BF; Box-Shadow: -2PX -2PX #992244, -4PX -4PX #B38A96; Font-Style: Italic }
#entry\.author::before{ Content: "A blogpost by " }
#entry\.author::after{ Content: "." }
#entry\.published,main>article #entry\.updated,nav li[resource] time[property="http://purl.org/dc/elements/1.1/date"]{ Position: Absolute; Inset-Block: -1REM Auto; Inset-Inline: 2CH Auto; Margin: 0; Border-Style: Solid; Border-Block-Color: #E7BD51 #9DFF9D; Border-Inline-Color: #E7BD51 #9DFF9D; Border-Width: 1PX; Padding-Inline: 1CH; Inline-Size: Max-Content; Max-Inline-Size: 80%; Color: #001B5F; Background: #F0E3C0; Box-Shadow: 0 0 0 1PX #8F6600, Inset 0 0 0 1PX #8F6600, -1CH 0 0 1PX #0040E1; Opacity: Calc(23 / 24) }
main>article #entry\.updated{ Inset-Block: Auto -1REM; Inset-Inline: Auto 2CH; Border-Block-Color: #9DFF9D #E7BD51; Border-Inline-Color: #9DFF9D #E7BD51 }
nav li[resource] time[property="http://purl.org/dc/elements/1.1/date"]::before{ Content: "Published: " }
nav li[resource] time[property="http://purl.org/dc/elements/1.1/date"]::after{ Content: "." }
#entry\.content,#entry\.rights,nav li[resource] div[property="http://purl.org/dc/elements/1.1/abstract"]{ Display: Flow-Root; Margin-Block: 0 -1REM; Margin-Inline: -2CH; Padding-Block: .25REM; Padding-Inline: 2CH; Background: #FFFFFFCF; Box-Shadow: Inset 0 0 0 .5CH #F3DEE3; Counter-Reset(P) }
#entry\.content{ Position: Relative; Margin-Block-End: .5REM }
#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,#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; Overflow-X: Auto; 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,pre>code.hljs{ Display: Block; Border: /* to match the Shades of Purple theme */ #2D2B57 Outset; Padding-Block: 1EM; Padding-Inline: 2CH; Color: /* to match the Shades of Purple theme */ #E3DFFF; Background: /* to match the Shades of Purple theme */ #2D2B57; Font-Size: .75REM }
p{ Margin-Block: .5EM }
:Any-Link{ Color: #3AE6B5 }
:Any-Link code{ Text-Decoration: Underline }
main :Any-Link{ Color: #1F7D63 }
main>header>p :Any-Link,main>nav>header>h1 :Any-Link{ Color: Inherit }
main>footer :Any-Link{ Color: Inherit; Font-Style: Italic }
main small{ Color: #700020 }