Mercurial > web
changeset 99:e83a48ef3bf4
cheese: make the style much more mobile-friendly
author | Paper <paper@tflc.us> |
---|---|
date | Fri, 27 Dec 2024 17:06:48 -0500 |
parents | caa6f0e136c8 |
children | f638780ffe2f |
files | cheese/index.html css/style.css |
diffstat | 2 files changed, 13 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/cheese/index.html Tue Nov 19 00:55:49 2024 -0500 +++ b/cheese/index.html Fri Dec 27 17:06:48 2024 -0500 @@ -3,7 +3,7 @@ title: cheese --- <div class="cheese-list"> -{% for item in site.data.cheese %} - <a href="{{ item.link }}"><img class="drop-shadow-box cheese-image" src="{{ item.link }}" alt="{{ item.name }}" title="{{ item.name }}"></a> +{% for row in site.data.cheese %} + <a href="{{ row.link }}"><img class="drop-shadow-box cheese-image" src="{{ row.link }}" alt="{{ row.name }}" title="{{ row.name }}"></a> {% endfor %} </div>
--- a/css/style.css Tue Nov 19 00:55:49 2024 -0500 +++ b/css/style.css Fri Dec 27 17:06:48 2024 -0500 @@ -77,7 +77,7 @@ } /* fuck off */ -h1, h2 { +h1, h2, h3, h4, h5, h6 { margin: 0; } @@ -172,18 +172,22 @@ .cheese-list { display: flex; + column-gap: 0.5em; + row-gap: 0.5em; flex-wrap: wrap; - justify-content: center; - row-gap: 0.5em; - column-gap: 0.5em; + justify-content: center; + align-items: center; + + width: 100%; } .cheese-image { + /* should be a safe value */ + min-height: 100px; + height: 33vh; display: block; - - height: 35vh; - width: auto; + object-fit: contain; } .plugs-list {