rhi/gallery
1
0
Fork 0
Code Issues 5 Pull requests 1 Releases Wiki Activity

new buttons and tweaked bg gradients

Browse source
This commit is contained in:
rhiannon morris 2022-12-30 03:19:33 +01:00
parent 88b81681cb
commit cd8c51097c
8 changed files with 255 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

153
style/shiny/gallery.css
View file

@ -10,12 +10,15 @@
.page { max-width: 80%; }
}
#filters {
margin: 1em 0 2em 0;
}
#filters div {
display: grid;
grid-template-columns: 15% auto;
align-items: baseline;
grid-gap: 0.5em 0.75em;
margin: 1em 0 2em 0;
grid-gap: 0.75em;
}
#filters h3 {
@ -27,70 +30,106 @@
grid-area: auto / 1;
}
#singles {
text-align: left;
grid-area: auto / 2;
.filterlist {
display: flex;
flex-flow: row wrap;
/* justify-content: space-between; */
padding: 0;
font-weight: 500;
font-size: 90%;
grid-gap: 0.5em 1em;
}
.filterlist input {
appearance: none;
}
.filterlist li:not([hidden]) {
display: block;
}
.filterlist li:focus-within {
color: var(--focus-text);
}
.filterlist label {
padding: 0.15em 0.4em;
border-radius: var(--button-radius);
background: var(--button-bg);
border: var(--button-border);
}
.filterlist label::before {
content: url('/style/unchecked.svg');
display: inline-block;
height: 1em;
width: 1em;
vertical-align: -15%;
padding-right: 0.25em;
text-shadow: none;
}
.filterlist :checked + label::before { content: url('/style/checked.svg'); }
.filterlist label:not([data-count="1"])::after {
content: attr(data-count);
font-size: 80%;
font-weight: 400;
padding: 0 0.5em;
}
.filterlist [data-count="1"] {
font-size: 85%;
padding-right: 0.8em;
}
.filterlist input {
margin: 0;
}
#filterstuff {
padding: 0;
grid-area: auto / span 2;
display: flex;
justify-content: center;
margin-top: 0;
grid-gap: 2em;
}
#filterstuff li {
list-style: none;
display: inline-block;
padding: var(--button-pad);
border-radius: var(--button-radius);
background: var(--button-bg);
border: var(--button-border);
}
#filterstuff a {
font-weight: 500;
text-decoration: none;
}
@media (max-width: 80rem) {
#filters div {
grid-template-columns: auto;
}
#filters h3 {
text-align: left;
grid-area: unset;
}
}
#filters .bb-choice {
font-weight: 400;
font-size: 90%;
margin: 0;
border-radius: 0.5em;
border: 1px solid var(--text-col);
overflow: hidden;
background: var(--text-col);
grid-gap: 1px;
}
#filterstuff {
grid-area: unset;
flex-flow: column;
grid-gap: 0.2em;
}
#filters .bb-choice:focus-within {
box-shadow: var(--focus-box);
}
#filters .bb-choice li {
margin: 0;
flex-grow: 1;
}
#filters li:focus-within {
color: var(--focus-text);
}
#filters label {
display: block;
margin: 0;
border-radius: 0;
padding: 0.15em 0.5em;
text-align: center;
border: none;
box-shadow: none;
}
#filters label[data-count]::after {
content: '(' attr(data-count) ')';
font-size: 80%;
padding-left: 0.25em;
}
#filterstuff {
grid-area: auto / span 2;
display: flex;
justify-content: center;
margin-top: 0;
gap: 2em;
}
#filterstuff li {
list-style: none;
font-weight: 400;
#filterstuff li {
border-radius: 1em;
}
}
@ -115,7 +154,7 @@
.item:not(.year-marker) {
box-shadow: var(--text-shadow);
border: var(--border-thickness) solid var(--text-col);
border: var(--border-thickness) solid var(--border-col);
border-radius: 0.5em;
background: hsl(340, 45%, 65%);
}
@ -132,7 +171,7 @@ figure {
figcaption .date, figcaption .title {
position: absolute;
width: 100%;
border: 1px solid var(--text-col);
border: 1px solid var(--border-col);
display: block;
text-align: center;
background: hsl(0, 0%, 0%, 75%);