diff options
Diffstat (limited to 'static/css')
-rw-r--r-- | static/css/style.css | 41 | ||||
-rw-r--r-- | static/css/theme.css | 22 |
2 files changed, 52 insertions, 11 deletions
diff --git a/static/css/style.css b/static/css/style.css index 915a1f2..5a18881 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -52,6 +52,12 @@ a{ text-decoration: none; } +mark, +mark * { + background: none; + animation: mark-rainbow 2s linear infinite; +} + body > header, body > footer, main { @@ -75,15 +81,10 @@ main.art p { /* article/art elements */ div.article-info, div.art-info { - line-height: 0.3; + line-height: 0.5; font-size: smaller; } -div.article-info > div.article-tags, -div.art-info > div.art-tags { - font-size: larger; -} - /* nav bar / header */ body > header { @@ -253,11 +254,6 @@ img.wrap-left { float: left; } -img.qr { - max-width: 200px; - padding: 1em; -} - /* img grid */ div.img-grid, div.img-grid > p { @@ -274,6 +270,26 @@ div.img-grid img { overflow: hidden; } +/* crypto grid */ +div.crypto-grid { + display: grid; + gap: 1em; + /* the 200px corresponds tothe img qr size */ + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +} + +div.crypto-grid figure { + margin: 0; +} + +div.crypto-grid a { + display: contents; +} + +div.crypto-grid img.qr { + max-width: 140px; +} + /* art grid / art gallery */ div.art-grid { display: grid; @@ -296,8 +312,11 @@ div.art-grid a { div.art-grid img { object-fit: cover; + width: 100%; + height: 100%; } +/* not sure if these two are needed as the one above works fine */ div.art-grid a.wide img { width: 100%; } diff --git a/static/css/theme.css b/static/css/theme.css index b3bbb18..c9b85c6 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -86,6 +86,28 @@ --pagenav-link-hl: var(--color6); } +/* animations */ +@keyframes mark-rainbow { + 0%{ + color: var(--color11); + } + 20%{ + color: var(--color12); + } + 40%{ + color: var(--color13); + } + 60%{ + color: var(--color14); + } + 80%{ + color: var(--color15); + } + 100%{ + color: var(--color11); + } +} + /* general */ a { color: var(--link); |