diff options
author | David Luevano Alvarado <david@luevano.xyz> | 2021-06-06 12:56:44 -0600 |
---|---|---|
committer | David Luevano Alvarado <david@luevano.xyz> | 2021-06-06 12:56:44 -0600 |
commit | 403bcd7509498638b6e34d38eb29e1c3620917c9 (patch) | |
tree | b10d853a923a85d4bd981a5b301abd3c1f5a8a7f /static/css | |
parent | 55cfef7fcaad7a657336b8be62508be9f631ff86 (diff) |
finish base art page and upload first post
Diffstat (limited to 'static/css')
-rw-r--r-- | static/css/style.css | 99 | ||||
-rw-r--r-- | static/css/theme.css | 39 |
2 files changed, 119 insertions, 19 deletions
diff --git a/static/css/style.css b/static/css/style.css index 753cf3e..47ec270 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -41,6 +41,7 @@ body > footer { main { grid-area: main; border-radius: 5px; + padding-bottom: 0.5em; } a{ @@ -54,14 +55,20 @@ body > header, body > footer, main { padding-right: 0.5em; } +main.art { + width: clamp(30ch, calc(100% - 1em), 100%); +} + -/* article elements */ -div.article-info { +/* article/art elements */ +div.article-info, +div.art-info { line-height: 0.3; font-size: smaller; } -div.article-info > div.article-tags { +div.article-info > div.article-tags, +div.art-info > div.art-tags { font-size: larger; } @@ -224,7 +231,8 @@ img.qr { } /* img grid */ -div.img-grid, div.img-grid > p { +div.img-grid, +div.img-grid > p { display: grid; gap: 1em; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); @@ -238,17 +246,15 @@ div.img-grid img { overflow: hidden; } - -/* art grid */ -div.art-grid, div.art-grid > p { +/* art grid / art gallery */ +div.art-grid { display: grid; - gap: 1em; + gap: 0.5em; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - grid-auto-rows: minmax(250px, auto); + grid-auto-rows: auto; } -div.art-grid img { - border: 1px solid white; +div.art-grid a { display: flex; flex-direction: column; justify-content: center; @@ -256,12 +262,79 @@ div.art-grid img { overflow: hidden; } +div.art-grid a { + display: contents; +} + +div.art-grid img { + border: 1px solid white; + object-fit: cover; +} + +div.art-grid a.wide img { + width: 100%; +} + +div.art-grid a.tall img { + height: 100%; +} + @media screen and (min-width: 600px) { - div.art-grid img.wide { + div.art-grid a.wide img { grid-column: span 2 / auto; } - div.art-grid img.tall { + div.art-grid a.tall img { grid-row: span 2 / auto; } } + +a.zoom-in { + cursor: zoom-in; +} + +/* art nav */ +div.art-nav { + width: 100%; + display: grid; + grid-template-areas: + 'next index prev'; + grid-template-columns: 1fr 1fr 1fr; + + align-items: center; + justify-items: center; +} + +div.art-nav > span.index { + grid-area: index; +} + +div.art-nav > span.previous { + grid-area: prev; +} + +div.art-nav > span.next { + grid-area: next; +} + +div.art-nav > span { + border-radius: 5px; + min-width: 1em; + max-width: 10em; + padding-top: 0.2em; + padding-bottom: 0.2em; + padding-left: 0.4em; + padding-right: 0.4em; + margin-left: 0.2em; + margin-right: 0.2em; +} + +div.art-nav > span span { + display: none; +} + +@media screen and (min-width: 600px) { + div.art-nav > span span { + display: inline; + } +} diff --git a/static/css/theme.css b/static/css/theme.css index f490841..8f900ba 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -21,16 +21,16 @@ .theme-light { --bg: var(--color5); --body-bg: var(--color4); - --navitem-bg: var(--color9); - --navitem-bg-hl: var(--color10); + --navitem-bg: var(--color10); + --navitem-bg-hl: var(--color9); - --fg: var(--color3); - --fg-hl: var(--color0); + --fg: var(--color0); + --fg-hl: var(--color3); --link: var(--color15); --link-hl: var(--color7); - --navitem-link: var(--color8); - --navitem-link-hl: var(--color7); + --navitem-link: var(--color7); + --navitem-link-hl: var(--color6); --fg-acc1: var(--color11); --fg-acc2: var(--color12); @@ -44,6 +44,11 @@ --switch-sun: var(--color13); --code-border: var(--color3); + + --pagenav-bg: var(--color1); + --pagenav-bg-hl: var(--color2); + --pagenav-link: var(--color8); + --pagenav-link-hl: var(--color7); } .theme-dark { @@ -72,6 +77,11 @@ --switch-sun: var(--color13); --code-border: var(--color4); + + --pagenav-bg: var(--color10); + --pagenav-bg-hl: var(--color9); + --pagenav-link: var(--color7); + --pagenav-link-hl: var(--color6); } /* general */ @@ -177,3 +187,20 @@ button.theme-switcher > .fa-sun { .theme-light button.theme-switcher > .fa-sun { color: var(--switch-sun); } + +/* art nav */ +div.art-nav > span { + background: var(--pagenav-bg); +} + +div.art-nav > span > a { + color: var(--pagenav-link); +} + +div.art-nav > span:hover { + background: var(--pagenav-bg-hl); +} + +div.art-nav > span:hover > a { + color: var(--pagenav-link-hl); +} |