diff options
Diffstat (limited to 'internal/web/static/blog.css')
| -rw-r--r-- | internal/web/static/blog.css | 5 |
1 files changed, 5 insertions, 0 deletions
diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css index 8cd969e..aa8357e 100644 --- a/internal/web/static/blog.css +++ b/internal/web/static/blog.css @@ -56,6 +56,10 @@ img { max-width: 100%; height: auto; } .post.has-thumb { overflow: hidden; } .post-image { margin: 0 0 1em; } .post-image img { display: block; max-width: 100%; margin: 0 auto; } +/* gallery page: a masonry wall from CSS columns alone; without them the pictures simply stack */ +.gallery { -webkit-column-width: 220px; -moz-column-width: 220px; column-width: 220px; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; } +.gallery a { display: block; margin: 0 0 1em; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } +.gallery img { display: block; width: 100%; } .read-more { margin: 0.3em 0 0; font-weight: bold; } .read-more a { text-decoration: none; } .read-more a:hover { text-decoration: underline; } @@ -158,6 +162,7 @@ img { max-width: 100%; height: auto; } @media (max-width: 700px) { .content { padding: 1em; } .post-thumb { width: 40%; margin-left: 1em; } + .gallery { -webkit-column-width: 140px; -moz-column-width: 140px; column-width: 140px; } .site-title { font-size: 1.5em; } .ruled > .header-rule { display: none; } .ruled > .brand { white-space: normal; } .cols { display: block; } |