gallery/style/shiny/base.css

293 lines
4.7 KiB
CSS
Raw Normal View History

2020-07-20 16:40:34 -04:00
@import url(/fonts/muller/muller.css);
:root {
2022-12-29 21:19:33 -05:00
/* old slightly-muted gradient */
/*
2020-07-20 16:40:34 -04:00
--gradient:
linear-gradient(135deg,
hsl(42deg, 67%, 70%),
hsl(348deg, 67%, 70%),
hsl(334deg, 77%, 80%),
hsl(234deg, 77%, 76%),
hsl(195deg, 67%, 67%),
hsl(155deg, 57%, 62%)
);
2022-12-29 21:19:33 -05:00
*/
/* bright colours from yummy.cricket bg */
--gradient:
linear-gradient(135deg,
2023-12-28 07:11:28 -05:00
oklch(93% 0.16 86),
oklch(84% 0.17 15),
oklch(78% 0.18 304),
oklch(78% 0.18 233),
oklch(78% 0.18 162)
2022-12-29 21:19:33 -05:00
);
2020-07-24 12:40:16 -04:00
2020-08-03 13:23:20 -04:00
--text-col: white;
2021-03-12 23:28:22 -05:00
--text-shadow-col: hsl(0, 0%, 0%, 75%);
--text-shadow: 2px 2px 3px var(--text-shadow-col);
2020-08-03 13:32:40 -04:00
2022-12-29 21:19:33 -05:00
--focus-box: 0 0 5px hsl(55deg, 60%, 90%, 80%);
2020-08-03 17:06:19 -04:00
--focus-text: hsl(334deg, 87%, 90%);
2020-10-06 16:07:39 -04:00
--border-col: var(--text-col);
--border: 3px solid var(--border-col);
--border-radius: 1.5em;
--background: hsla(0, 0%, 0%, 60%);
2022-12-29 21:19:33 -05:00
--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;
2021-03-12 23:28:22 -05:00
2020-08-03 13:32:40 -04:00
font-family: Muller;
font-weight: 600;
background: var(--gradient) fixed;
margin: 0;
2020-07-20 16:40:34 -04:00
}
2023-06-21 13:58:01 -04:00
body { margin: 0; }
2020-07-20 16:40:34 -04:00
header {
text-align: center;
}
2020-08-28 19:54:30 -04:00
h1 { font-weight: 300; }
2020-08-04 12:59:38 -04:00
h2, h3, h4 { font-weight: 400; }
2020-07-20 16:40:34 -04:00
h1 { font-size: 300%; }
h2 { font-size: 125%; }
2020-08-04 12:59:38 -04:00
h3 { font-size: 110%; }
2020-07-20 16:40:34 -04:00
2020-10-06 16:07:39 -04:00
.page {
background: var(--background);
2020-07-20 16:40:34 -04:00
position: relative;
2020-07-23 13:59:07 -04:00
padding: 2em 4em;
2023-06-21 13:58:01 -04:00
margin: 0 auto;
2020-07-20 16:40:34 -04:00
2020-08-03 13:23:20 -04:00
color: var(--text-col);
2020-07-20 16:40:34 -04:00
text-shadow: var(--text-shadow);
}
header h1 {
margin: 0; padding: 0;
}
a {
color: inherit;
2020-08-04 12:59:38 -04:00
text-decoration: dotted underline;
2020-08-03 17:06:19 -04:00
}
2022-12-29 21:19:33 -05:00
2020-08-03 17:06:19 -04:00
a:focus {
outline: none;
color: var(--focus-text);
text-decoration-style: double;
2020-07-20 16:40:34 -04:00
}
2020-08-28 19:54:30 -04:00
b {
font-weight: 700;
}
2020-08-03 17:06:19 -04:00
2020-07-20 16:40:34 -04:00
footer {
font-weight: 500;
}
2020-09-26 08:22:06 -04:00
figure > img {
display: block;
}
2020-07-20 16:40:34 -04:00
.corner {
display: block;
margin: 0;
padding: 0;
position: absolute;
2023-06-21 13:58:01 -04:00
top: 1em;
2020-07-20 16:40:34 -04:00
font-size: 100%;
font-weight: 500;
}
2020-09-19 01:52:03 -04:00
.corner.left {
left: 2em;
text-align: left;
}
.corner.right {
right: 2em;
text-align: right;
}
2020-07-21 09:11:52 -04:00
.emoji {
max-height: 1.2em;
2021-04-15 12:56:44 -04:00
vertical-align: -0.2em;
2020-07-21 09:11:52 -04:00
}
2020-08-03 13:23:20 -04:00
2020-08-03 13:32:40 -04:00
.buttonbar {
padding: 0;
display: flex;
align-items: flex-start;
flex-flow: row wrap;
2022-12-26 16:04:57 -05:00
margin-top: 0;
2020-08-03 13:32:40 -04:00
margin-bottom: -0.5em;
}
.buttonbar li {
list-style: none;
margin-bottom: 0.5em;
}
.buttonbar a {
text-decoration: none;
}
.bb-choice {
justify-content: center;
}
2022-12-26 16:04:57 -05:00
.buttonbar input {
display: inline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
padding: 0;
width: 0;
}
2022-12-26 16:04:57 -05:00
.buttonbar label, .bb-links li {
2020-08-03 13:32:40 -04:00
margin-right: 0.5em;
2022-12-29 21:19:33 -05:00
padding: var(--button-pad);
2020-08-03 13:32:40 -04:00
background: var(--button-bg);
2022-12-29 21:19:33 -05:00
border: var(--button-border);
border-radius: var(--button-radius);
2020-08-03 13:32:40 -04:00
}
2022-12-26 16:04:57 -05:00
.buttonbar :focus ~ label, .bb-links li:focus-within {
2020-08-03 17:06:19 -04:00
box-shadow: var(--focus-box);
}
2022-12-26 16:04:57 -05:00
.buttonbar :checked ~ label {
2022-12-29 21:19:33 -05:00
background: var(--button-bg-selected);
border-color: var(--button-border-selected);
2020-08-03 13:32:40 -04:00
}
2022-12-29 21:19:33 -05:00
summary, summary h2 {
2020-08-04 12:59:38 -04:00
cursor: pointer;
2022-12-29 21:19:33 -05:00
display: inline;
2020-08-03 17:10:52 -04:00
}
summary:focus-within {
outline: none;
}
2021-03-12 23:28:22 -05:00
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after {
2022-12-29 21:19:33 -05:00
display: inline-block;
margin-left: 1.5em;
padding: var(--button-pad);
background: var(--button-bg);
border: var(--button-border);
border-radius: var(--button-radius);
2021-03-12 23:28:22 -05:00
}
2022-12-29 21:19:33 -05:00
summary::after { content: 'show'; }
[open] summary::after { content: 'hide'; }
2021-03-12 23:28:22 -05:00
2020-08-28 19:54:42 -04:00
dt {
font-size: 120%;
}
dd {
margin-left: 0;
}
dd + dt {
margin-top: 0.5em;
}
.btw {
2021-02-09 06:33:18 -05:00
font-size: 80%;
font-weight: 700;
}
dt .btw {
2020-08-28 19:54:42 -04:00
margin-left: 1em;
}
2020-08-03 17:10:52 -04:00
2021-03-12 23:28:22 -05:00
p {
text-align: justify;
-ms-hyphens: auto;
hyphens: auto;
}
2023-03-11 09:55:25 -05:00
del {
text-decoration: line-through wavy;
text-decoration-thickness: 2px;
}
2021-03-12 23:28:22 -05:00
2020-12-05 14:02:55 -05:00
.threecol {
columns: 3;
2024-07-07 16:00:44 -04:00
grid-column-gap: 2em;
2020-12-05 14:02:55 -05:00
}
.threecol dd {
break-before: avoid;
}
*[title] {
text-decoration: underline dotted;
}
2020-12-05 14:02:55 -05:00
2020-08-03 13:23:20 -04:00
@media (prefers-color-scheme: dark) {
:root {
--gradient:
linear-gradient(135deg,
2023-12-28 07:11:28 -05:00
/* oklch(33% 0.16 86), */
oklch(30% 0.17 15),
oklch(30% 0.18 304),
oklch(30% 0.18 233),
oklch(30% 0.18 162)
2020-08-03 13:23:20 -04:00
);
--text-col: hsl(55deg, 60%, 90%);
2022-12-29 21:19:33 -05:00
--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%);
2020-08-04 12:59:38 -04:00
--border-col: black;
}
2020-08-03 13:23:20 -04:00
@media (prefers-contrast: high) {
:root {
--text-col: white;
background: black;
}
body {
border: unset;
box-shadow: unset;
background: unset;
}
}
}
2020-08-03 13:32:40 -04:00
@media (pointer: coarse) {
.buttonbar {
font-size: 200%;
}
}