style & layout updates
This commit is contained in:
parent
ebd08fb2e5
commit
485b90fb46
9 changed files with 65 additions and 159 deletions
|
|
@ -28,7 +28,6 @@
|
|||
--text-col: white;
|
||||
--text-shadow-col: hsl(0, 0%, 0%, 75%);
|
||||
--text-shadow: 2px 2px 3px var(--text-shadow-col);
|
||||
--nsfw-sticker-rotate: 15deg;
|
||||
|
||||
--focus-box: 0 0 5px hsl(55deg, 60%, 90%, 80%);
|
||||
--focus-text: hsl(334deg, 87%, 90%);
|
||||
|
|
@ -53,6 +52,8 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
body { margin: 0; }
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -65,12 +66,10 @@ h3 { font-size: 110%; }
|
|||
|
||||
.page {
|
||||
background: var(--background);
|
||||
border: var(--border);
|
||||
position: relative;
|
||||
|
||||
padding: 2em 4em;
|
||||
margin: 3em auto 3.5em;
|
||||
border-radius: var(--border-radius);
|
||||
margin: 0 auto;
|
||||
|
||||
color: var(--text-col);
|
||||
text-shadow: var(--text-shadow);
|
||||
|
|
@ -112,7 +111,7 @@ figure > img {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
top: 1em;
|
||||
|
||||
font-size: 100%;
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -3,13 +3,18 @@
|
|||
|
||||
:root {
|
||||
--image-size: 200px;
|
||||
--gap: 1em;
|
||||
--badge-size: calc(1/4 * var(--image-size));
|
||||
--gap: 0em;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.page { max-width: 80%; }
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 2em calc(1/4 * var(--image-size));
|
||||
}
|
||||
|
||||
#filters {
|
||||
margin: 1em 0 2em 0;
|
||||
}
|
||||
|
|
@ -33,7 +38,6 @@
|
|||
.filterlist {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
/* justify-content: space-between; */
|
||||
padding: 0;
|
||||
|
||||
font-weight: 500;
|
||||
|
|
@ -54,10 +58,7 @@
|
|||
}
|
||||
|
||||
.filterlist label {
|
||||
padding: 0.15em 0.4em;
|
||||
border-radius: var(--button-radius);
|
||||
background: var(--button-bg);
|
||||
border: var(--button-border);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filterlist label::before {
|
||||
|
|
@ -154,35 +155,18 @@
|
|||
|
||||
.item:not(.year-marker) {
|
||||
box-shadow: var(--text-shadow);
|
||||
border: var(--border-thickness) solid var(--border-col);
|
||||
border-radius: 0.5em;
|
||||
background: hsl(340, 45%, 65%);
|
||||
outline: var(--border-thickness) solid var(--border-col);
|
||||
background: hsl(0, 0%, 0%, 50%);
|
||||
clip-path: polygon(5% 0, 95% 10%, 95% 100%, 5% 90%);
|
||||
}
|
||||
.item img {
|
||||
clip-path: polygon(7% 2%, 93% 12%, 93% 98%, 7% 88%);
|
||||
}
|
||||
|
||||
.item:focus-within {
|
||||
box-shadow: var(--focus-box);
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
figcaption .date, figcaption .title {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border: 1px solid var(--border-col);
|
||||
display: block;
|
||||
text-align: center;
|
||||
background: hsl(0, 0%, 0%, 75%);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
figcaption .date { top: -1px; left: -1px; }
|
||||
figcaption .title { bottom: -1px; left: -1px; }
|
||||
|
||||
.date { text-transform: lowercase; }
|
||||
|
||||
.year-marker {
|
||||
/* uncomment to reenable line breaks before year markers */
|
||||
/* grid-area: auto / 1; */
|
||||
|
|
@ -210,9 +194,8 @@ figcaption .title { bottom: -1px; left: -1px; }
|
|||
}
|
||||
|
||||
.item.nsfw::before, .item[data-updated="true"]::after {
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
transform: var(--base-transform);
|
||||
height: var(--badge-size);
|
||||
width: var(--badge-size);
|
||||
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
|
@ -221,19 +204,18 @@ figcaption .title { bottom: -1px; left: -1px; }
|
|||
}
|
||||
|
||||
.item.nsfw::before {
|
||||
--size: calc(1/4 * var(--image-size));
|
||||
--base-transform: rotate(var(--nsfw-sticker-rotate));
|
||||
transform: rotate(15deg);
|
||||
content: url(../18_plus_white.svg);
|
||||
top: calc(1em + 3px);
|
||||
right: 3px;
|
||||
top: 11%;
|
||||
right: 7%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.item[data-updated="true"]::after {
|
||||
--size: calc(1/4 * var(--image-size));
|
||||
--base-transform: rotate(-8deg);
|
||||
transform: rotate(-8deg);
|
||||
content: url(../sparkles.svg);
|
||||
bottom: calc(1em + 3px);
|
||||
right: 3px;
|
||||
bottom: 4%;
|
||||
right: 7%;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -242,68 +224,6 @@ footer {
|
|||
margin-top: 1em;
|
||||
}
|
||||
|
||||
|
||||
@media (hover) and (pointer: fine) {
|
||||
.item:hover .date, .item:hover .title,
|
||||
.item:hover::before, .item:hover::after {
|
||||
filter: opacity(20%);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
figcaption .date, figcaption .title, .item::before, .item::after {
|
||||
transition-property: filter, transform;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.item:hover .title {
|
||||
transform: translate(-20%, 80%) rotateZ(7deg);
|
||||
}
|
||||
|
||||
.item:hover .date {
|
||||
transform: translate(20%, -80%) rotateZ(7deg);
|
||||
}
|
||||
|
||||
.item:hover::before {
|
||||
transform: translate(1.5em, -1.5em) var(--base-transform);
|
||||
}
|
||||
|
||||
.item:hover::after {
|
||||
transform: translate(1.5em, 1.5em) var(--base-transform);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (not hover), (pointer: coarse) {
|
||||
.item:not(.year-marker) {
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
figcaption .date, figcaption .title {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
figcaption .date {
|
||||
border-bottom: none;
|
||||
}
|
||||
figcaption .title {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
figcaption .date::after {
|
||||
content: ':';
|
||||
}
|
||||
|
||||
.item a {
|
||||
display: block;
|
||||
height: var(--image-size);
|
||||
}
|
||||
|
||||
.item img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
#filters label {
|
||||
font-size: 150%;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
|
||||
.page {
|
||||
width: 37.5em;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
#title::before, #title::after {
|
||||
|
|
@ -30,12 +31,11 @@
|
|||
}
|
||||
|
||||
|
||||
@media screen {
|
||||
@media not speech {
|
||||
.nsfw::after {
|
||||
content: url(../18_plus_white.svg);
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
transform: rotate(var(--nsfw-sticker-rotate));
|
||||
mix-blend-mode: hard-light;
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
|
||||
@media speech {
|
||||
.nsfw::after {
|
||||
content: ' (some nsfw)';
|
||||
content: ' (contains adult content)';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
border: var(--border-thickness) solid var(--border-col);
|
||||
border-radius: 1em;
|
||||
box-shadow: var(--text-shadow);
|
||||
background: hsl(340, 45%, 65%);
|
||||
}
|
||||
|
|
@ -76,20 +75,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.nsfw-label::after {
|
||||
content: url(../18_plus_white.svg);
|
||||
display: inline-block;
|
||||
height: 0.9em; width: 0.9em;
|
||||
vertical-align: -0.07em;
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
|
||||
:checked ~ .nsfw-label::after {
|
||||
content: url(../18_plus.svg);
|
||||
}
|
||||
*/
|
||||
|
||||
#date { text-transform: lowercase; }
|
||||
|
||||
#info {
|
||||
|
|
@ -104,9 +89,6 @@
|
|||
align-items: baseline;
|
||||
}
|
||||
|
||||
/* 'display: contents' removes things from the accessibility tree
|
||||
* which is probably only a problem for screen readers?
|
||||
*/
|
||||
@media not speech {
|
||||
.info-section {
|
||||
display: contents;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue