diff options
Diffstat (limited to 'internal/web/static/blog.css')
| -rw-r--r-- | internal/web/static/blog.css | 14 |
1 files changed, 10 insertions, 4 deletions
diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css index 81a5940..352f841 100644 --- a/internal/web/static/blog.css +++ b/internal/web/static/blog.css @@ -77,15 +77,21 @@ img { max-width: 100%; height: auto; } .content > .notices:last-child { margin-top: 1.5em; } .content > .notices:last-child > .notice:last-child { margin-bottom: 0; } /* gizmo: a box framed in the link colour (set by the theme CSS). On wide - screens the flex wrapper puts up to three headed gizmo boxes in one row - (they start at 30% and grow); a gizmo box without a heading, like every - plain/note/warning box, takes the whole row */ + screens the flex wrapper puts two headed gizmo boxes in one row of the main + column, the wider share (.w-<percent>, set by placeNotices from the amount + of text) to the longer one: the bases add up to 90% so a third never fits, + and the leftover grows into both equally. A gizmo box without a heading, + like every plain/note/warning box, takes the whole row */ .notice-gizmo { padding: 1em 1.2em; border: 1px solid; background: none; } .notice-gizmo .notice-title { font-size: 1.15em; font-style: italic; text-transform: none; letter-spacing: 0; margin-bottom: 0.6em; } @media (min-width: 701px) { .notices { display: flex; flex-wrap: wrap; gap: 0 1em; align-items: stretch; } .notices .notice { flex: 1 1 100%; } - .notices .notice-gizmo.headed { flex: 1 1 30%; } + .col-main .notices .w-25 { flex-basis: 20%; } + .col-main .notices .w-33 { flex-basis: 28%; } + .col-main .notices .w-50 { flex-basis: 45%; } + .col-main .notices .w-67 { flex-basis: 62%; } + .col-main .notices .w-75 { flex-basis: 70%; } } .pager { margin-top: 2em; padding-top: 1em; border-top: 1px solid rgba(0,0,0,0.1); text-align: center; } .pager a, .pager span { margin: 0 0.8em; } |