new buttons and tweaked bg gradients
This commit is contained in:
parent
88b81681cb
commit
cd8c51097c
8 changed files with 255 additions and 108 deletions
|
|
@ -1,6 +1,8 @@
|
|||
@import url(/fonts/muller/muller.css);
|
||||
|
||||
:root {
|
||||
/* old slightly-muted gradient */
|
||||
/*
|
||||
--gradient:
|
||||
linear-gradient(135deg,
|
||||
hsl(42deg, 67%, 70%),
|
||||
|
|
@ -10,24 +12,38 @@
|
|||
hsl(195deg, 67%, 67%),
|
||||
hsl(155deg, 57%, 62%)
|
||||
);
|
||||
*/
|
||||
|
||||
/* bright colours from yummy.cricket bg */
|
||||
--gradient:
|
||||
linear-gradient(135deg,
|
||||
hsl(42deg, 92%, 70%),
|
||||
hsl(348deg, 92%, 70%),
|
||||
hsl(334deg, 100%, 80%),
|
||||
hsl(234deg, 100%, 76%),
|
||||
hsl(195deg, 100%, 67%),
|
||||
hsl(155deg, 70%, 62%)
|
||||
);
|
||||
|
||||
--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 20px hsl(55deg, 60%, 90%, 80%);
|
||||
--focus-box: 0 0 5px hsl(55deg, 60%, 90%, 80%);
|
||||
--focus-text: hsl(334deg, 87%, 90%);
|
||||
|
||||
--shadow-col: hsl(42deg, 82%, 90%, 75%);
|
||||
--border-col: var(--text-col);
|
||||
--border: 3px solid var(--border-col);
|
||||
--border-radius: 1.5em;
|
||||
--shadow: 0 0 3em var(--shadow-col);
|
||||
--background: hsla(0, 0%, 0%, 60%);
|
||||
|
||||
--button-bg: hsl(330deg, 40%, 16%, 100%);
|
||||
--button-corner: 0.25em;
|
||||
--button-bg: hsla(0deg, 0%, 0%, 20%);
|
||||
--button-bg-selected: hsla(0deg, 0%, 100%, 20%);
|
||||
--button-border: 1px solid hsla(0deg, 0%, 0%, 40%);
|
||||
--button-border-selected: 1px solid hsla(0deg, 0%, 100%, 30%);
|
||||
--button-pad: 0.15em 0.8em;
|
||||
--button-radius: 1000px;
|
||||
|
||||
font-family: Muller;
|
||||
font-size: x-large;
|
||||
|
|
@ -50,7 +66,6 @@ h3 { font-size: 110%; }
|
|||
.page {
|
||||
background: var(--background);
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
position: relative;
|
||||
|
||||
padding: 2em 4em;
|
||||
|
|
@ -68,9 +83,9 @@ header h1 {
|
|||
a {
|
||||
color: inherit;
|
||||
text-decoration: dotted underline;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
|
||||
a:focus {
|
||||
outline: none;
|
||||
color: var(--focus-text);
|
||||
|
|
@ -152,12 +167,10 @@ figure > img {
|
|||
|
||||
.buttonbar label, .bb-links li {
|
||||
margin-right: 0.5em;
|
||||
padding: 0 0.35em;
|
||||
border-radius: var(--button-corner);
|
||||
|
||||
border: 1px solid var(--text-col);
|
||||
padding: var(--button-pad);
|
||||
background: var(--button-bg);
|
||||
text-shadow: none;
|
||||
border: var(--button-border);
|
||||
border-radius: var(--button-radius);
|
||||
}
|
||||
|
||||
.buttonbar :focus ~ label, .bb-links li:focus-within {
|
||||
|
|
@ -165,14 +178,14 @@ figure > img {
|
|||
}
|
||||
|
||||
.buttonbar :checked ~ label {
|
||||
color: var(--button-bg);
|
||||
background: var(--text-col);
|
||||
background: var(--button-bg-selected);
|
||||
border-color: var(--button-border-selected);
|
||||
}
|
||||
|
||||
|
||||
summary {
|
||||
summary, summary h2 {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
summary:focus-within {
|
||||
|
|
@ -183,28 +196,16 @@ summary { list-style: none; }
|
|||
summary::-webkit-details-marker { display: none; }
|
||||
|
||||
summary::after {
|
||||
--fg: var(--text-col);
|
||||
--bg: var(--button-bg);
|
||||
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
text-shadow: none;
|
||||
|
||||
border: 1px solid var(--fg);
|
||||
border-radius: var(--button-corner);
|
||||
|
||||
position: absolute;
|
||||
right: 0; top: 0;
|
||||
padding: 2px 5px;
|
||||
margin-left: 1ex;
|
||||
display: inline-block;
|
||||
margin-left: 1.5em;
|
||||
padding: var(--button-pad);
|
||||
background: var(--button-bg);
|
||||
border: var(--button-border);
|
||||
border-radius: var(--button-radius);
|
||||
}
|
||||
|
||||
details summary::after { content: 'show'; }
|
||||
details[open] summary::after {
|
||||
content: 'hide';
|
||||
--fg: var(--button-bg);
|
||||
--bg: var(--text-col);
|
||||
}
|
||||
summary::after { content: 'show'; }
|
||||
[open] summary::after { content: 'hide'; }
|
||||
|
||||
|
||||
dt {
|
||||
|
|
@ -252,18 +253,19 @@ p {
|
|||
:root {
|
||||
--gradient:
|
||||
linear-gradient(135deg,
|
||||
hsl(42deg, 27%, 25%),
|
||||
hsl(348deg, 27%, 25%),
|
||||
hsl(334deg, 32%, 25%),
|
||||
hsl(234deg, 57%, 23%),
|
||||
hsl(195deg, 27%, 20%),
|
||||
hsl(155deg, 22%, 20%)
|
||||
hsl(42deg, 37%, 20%),
|
||||
hsl(348deg, 37%, 20%),
|
||||
hsl(334deg, 42%, 20%),
|
||||
hsl(234deg, 67%, 18%),
|
||||
hsl(195deg, 37%, 15%),
|
||||
hsl(155deg, 32%, 15%)
|
||||
);
|
||||
--text-col: hsl(55deg, 60%, 90%);
|
||||
}
|
||||
|
||||
body {
|
||||
--shadow-col: hsl(42deg, 82%, 90%, 20%);
|
||||
--button-bg-selected: hsla(55deg, 40%, 95%, 20%);
|
||||
--button-border-selected: 1px solid hsl(55deg, 60%, 90%, 40%);
|
||||
--button-bg: hsla(0deg, 0%, 0%, 50%);
|
||||
--button-border: 1px solid hsla(0deg, 0%, 100%, 40%);
|
||||
--border-col: black;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
width: min-content;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: var(--border-thickness) solid var(--text-col);
|
||||
border: var(--border-thickness) solid var(--border-col);
|
||||
border-radius: 1em;
|
||||
box-shadow: var(--text-shadow);
|
||||
background: hsl(340, 45%, 65%);
|
||||
|
|
@ -221,3 +221,12 @@ footer {
|
|||
justify-content: end;
|
||||
grid-area: 1 / 3 / auto / auto;
|
||||
}
|
||||
|
||||
#tags ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#tags li {
|
||||
display: inline;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue