diff options
Diffstat (limited to 'internal/web/static/blog.css')
| -rw-r--r-- | internal/web/static/blog.css | 17 |
1 files changed, 17 insertions, 0 deletions
diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css index eabb314..10568fa 100644 --- a/internal/web/static/blog.css +++ b/internal/web/static/blog.css @@ -7,6 +7,22 @@ img { max-width: 100%; height: auto; } .header-text { padding: 1.4em 1em; } .header-logo { padding: 1em; } .header-logo img.logo { display: inline-block; width: auto; } +/* header rule: a line beside the title or logo (both sides when centred) filling + the rest of the row. Table cells, so the rule is as tall as the brand and old + browsers lay it out the same; the stripes are a gradient in currentColor (the + header text colour). Wide screens only: on a phone a long title must wrap. */ +.ruled { display: table; width: 100%; } +.ruled > .brand, .ruled > .header-rule { display: table-cell; vertical-align: middle; } +.ruled > .brand { white-space: nowrap; padding: 0 1em; } +.ruled > .brand:first-child { padding-left: 0; } +.ruled > .brand:last-child { padding-right: 0; } +.ruled > .brand a, .ruled > .brand img.logo { display: block; } /* no line box under the logo: the rule is exactly as tall as it */ +.ruled > .brand img.logo { max-width: none; } /* a percentage max-width is 0 inside an auto-width cell */ +.ruled > .header-rule { width: 100%; } +.ruled > .header-rule:first-child, .ruled > .header-rule:first-child ~ .header-rule { width: 50%; } /* centred: two rules share the remainder */ +.rule-line > .header-rule::before, .rule-dots > .header-rule::before { content: ""; display: block; border-top: 1px solid; } +.rule-dots > .header-rule::before { border-top: 3px dotted; } +.rule-stripes > .header-rule { background: repeating-linear-gradient(90deg, currentColor, currentColor 2px, transparent 2px, transparent 10px); } .site-title { margin: 0; font-size: 2em; line-height: 1.2; } .site-title a { text-decoration: none; } .tagline { margin: 0.3em 0 0; opacity: 0.85; } @@ -126,6 +142,7 @@ img { max-width: 100%; height: auto; } .content { padding: 1em; } .post-thumb { width: 40%; margin-left: 1em; } .site-title { font-size: 1.5em; } + .ruled > .header-rule { display: none; } .ruled > .brand { white-space: normal; } .cols { display: block; } .col-left, .col-right { padding: 0; margin-top: 1.5em; } .col-left { order: 0; } |