diff options
Diffstat (limited to 'static/css/style.css')
| -rw-r--r-- | static/css/style.css | 211 |
1 files changed, 193 insertions, 18 deletions
diff --git a/static/css/style.css b/static/css/style.css index 7bbb584..fadf388 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -53,14 +53,17 @@ /* Theme */ :root { - --primary-color: #0000f5; + --brand-color: #0000f5; --background: #fff; --foreground: #000019; --foreground-emphasis: #191919; + --foreground-secondary: #0F261F; --selection-color: #ccc; + --code-background: #DAE6E3; --font-display: 'Libre Caslon Condensed', 'Fallback Display', serif; --font-body: 'Libre Caslon', 'Fallback Body', serif; --font-windows: 'Helvetica Neue', Helvetica, Arial, sans-serif; + --font-pre: 'Input Mono Comp Ex Lt', 'Input Mono Compressed', monospace; /* There's an issue with Helvetica Neue Bold's glyph sizing that wrecks the grid. */ --font-windows-bold: Helvetica, Arial, sans-serif; --root-font-size: 1rem; @@ -73,7 +76,7 @@ ::selection { background-color: var(--selection-color); -webkit-text-stroke: 0; - color: var(--primary-color); + color: var(--brand-color); } /* CSS Reset */ @@ -87,6 +90,7 @@ li,p { text-align: justify; transform: translateY(7px); } +a { color: var(--brand-color)} strong { font-family: var(--font-body); color: var(--foreground-emphasis); @@ -134,7 +138,7 @@ body { font-synthesis: none; font-variant-emoji: text; color: var(--foreground); - background: var(--primary-color); + background: var(--brand-color); font-size: var(--root-font-size); line-height: var(--base-grid); display: flex; @@ -148,7 +152,7 @@ body { & > header { color: #fff; display: flex; - background: var(--primary-color); + background: var(--brand-color); font-family: var(--font-display); padding: var(--base-grid); position: relative; @@ -209,7 +213,7 @@ body { /* Animation */ canvas { - background: var(--primary-color); + background: var(--brand-color); display: block; height: 75px; width: 75px; @@ -219,6 +223,29 @@ body { width: 50px; } } + + &.small { + canvas { + height: 2lh; + width: 2lh; + } + p { + font-size: var(--root-font-size); + white-space: normal; + width: auto; + line-height: var(--line-height); + margin: 0 0 0 1lh; + text-align: left; + transform: none; + width: 4lh; + } + a { + margin: 0; + transform: none; + width: auto; + word-spacing: inherit; + } + } } } /* The Main Body */ @@ -242,7 +269,8 @@ main { h3 { font-size: 1.25rem; line-height: 1.25; - font-weight: 500; + font-family: var(--font-display); + font-weight: 300; transform: translateY(2px); margin: 2lh 0 1lh; } @@ -259,19 +287,23 @@ main { list-style: none; margin-left: 0; margin-bottom: var(--base-grid); - } - li { - position: relative; - padding-left: var(--base-grid); - - &::before { - content: "✳\FE0E"; - width: var(--base-grid); - display: inline-block; - margin-left: calc(-1 * var(--base-grid)); - text-align: left; + li { + position: relative; + padding-left: var(--base-grid); + + &::before { + content: "✳\FE0E"; + width: var(--base-grid); + display: inline-block; + margin-left: calc(-1 * var(--base-grid)); + text-align: left; + } } } + + ol { + margin: var(--base-grid) 0 var(--base-grid) var(--base-grid); + } } #introduction { @@ -357,9 +389,142 @@ footer { } } -#text { +.single-column { max-width: calc(35 * var(--base-grid)); + width: 100%; padding: var(--base-grid); + + h1 { + font-family: var(--font-display); + line-height: calc(2 * var(--base-grid)); + margin-bottom: calc(2 * var(--base-grid)); + transform: translateY(13px); + + + hr { + margin-top: calc(-1 * var(--base-grid) + 1px); + + + aside { + margin-bottom: 2lh; + } + } + } + h2 { transform: translateY(4px) } + h3 { transform: translateY(6px) } + h2, h3, h4 { + line-height: var(--base-grid); + margin: var(--base-grid) 0; + } + p { + margin: var(--base-grid) 0; + &:empty { display: none } + } + + h1,h2,h3,h4 { + a { + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + } + + li code, p code { + line-height: 1; + padding: 0 0.25rem + } + code, pre { + background-color: var(--code-background); + overflow-x: scroll; + scrollbar-width: none; + border-radius: var(--radius); + font-family: var(--font-pre); + font-weight: 100; + } + pre { + padding: var(--base-grid); + } + + hr { + height: 1px; + border: 0; + background-color: var(--foreground); + margin-top: calc(var(--base-grid) - 1px); + } + + .meta { + font-style: italic; + display: flex; + color: var(--foreground-secondary); + justify-content: space-between; + font-size: 0.8125rem; + gap: 1lh; + line-height: var(--base-grid); + transform: translateY(7px); + + @media (max-width: 500px) { + flex-direction: column; + gap: 0; + } + + time { + white-space: nowrap; + } + + .category { flex-shrink: 0 } + .tags { + flex-shrink: 1; + text-align: right; + menu { + display: inline; + list-style: none; + li { + display: inline; + margin: 0 0.25rem; + } + } + @media (max-width: 500px) { + text-align: left; + } + } + } + + &.taxonomy-index, &.blog-index { + p { + margin-bottom: 2lh; + } + } + + .pager { + display: flex; + justify-content: space-between; + + .older, .newer { + max-width: 50%; + } + + .older:only-child { + margin-left: auto; + } + } + &.blog-post .pager { margin-top: 2lh } + + .hero-summary { + align-items: center; + display: flex; + gap: 1lh; + margin: 1lh 0; + + p { + margin: 0; + } + img { + border: 1px solid var(--foreground); + border-radius: var(--radius); + display: block; + height: min-content; + width: min-content; + } + } } /* The Floating Window */ @@ -373,6 +538,11 @@ footer { font-family: var(--font-windows); + &.shrink { + width: min-content; + margin: 0 auto; + } + .titlebar { border-bottom: var(--border-width) solid #000; font-family: var(--font-windows-bold); @@ -406,6 +576,11 @@ footer { .content { padding: calc(var(--base-grid) - 1px) var(--base-grid); + + > img:only-child { + margin: 0 auto; + display: block; + } } hr.divider { |