rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

style fixes

Browse source
This commit is contained in:
Rhiannon Morris 2022-06-07 13:31:45 +02:00
parent ec80a72379
commit d8404d40fd
2 changed files with 12 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

28
base.css
View file

@ -11,7 +11,7 @@
hsl(195deg, 100%, 67%), hsl(195deg, 100%, 67%),
hsl(155deg, 70%, 62%) hsl(155deg, 70%, 62%)
); );
--size: 1.75rem; --size: 15pt;
--weight: 600; --weight: 600;
--link-color: hsl(196deg, 100%, 85%); --link-color: hsl(196deg, 100%, 85%);
--hover-color: hsl(50deg, 100%, 82%); --hover-color: hsl(50deg, 100%, 82%);
@ -135,10 +135,12 @@ dd {
content: var(--around-image); content: var(--around-image);
} }
rt::before { margin-left: -1.25em; }
rt::after { margin-right: -1.25em; }
/* hacky fix for firefox mobile 68 freaking out at blend modes ☹ */ /* hacky fix for firefox mobile 68 freaking out at blend modes ☹ */
@media (-moz-touch-enabled) { @media (-moz-touch-enabled) {
body { :root {
background: var(--gradient) fixed; background: var(--gradient) fixed;
background-blend-mode: initial; background-blend-mode: initial;
} }
@ -164,7 +166,7 @@ dd {
/* ~the "not actually supported by browsers yet" zone~ */ /* ~the "not actually supported by browsers yet" zone~ */
@media (prefers-contrast: high), (prefers-color-scheme: dark) { @media (prefers-contrast: high), (prefers-color-scheme: dark) {
body { :root {
--gradient: --gradient:
linear-gradient(135deg, linear-gradient(135deg,
hsl(42deg, 56%, 55%), hsl(42deg, 56%, 55%),
@ -179,26 +181,12 @@ dd {
-webkit-image-set(url(media/bg_dim.png) 1x, -webkit-image-set(url(media/bg_dim.png) 1x,
url(media/bg_2x_dim.png) 2x) url(media/bg_2x_dim.png) 2x)
top center fixed, top center fixed,
linear-gradient(135deg, var(--gradient) fixed;
hsl(42deg, 56%, 55%),
hsl(348deg, 56%, 55%),
hsl(334deg, 60%, 43%),
hsl(234deg, 60%, 40%),
hsl(195deg, 60%, 44%),
hsl(155deg, 60%, 55%)
) fixed;
background: background:
image-set(url(media/bg_dim.png) 1x, image-set(url(media/bg_dim.png) 1x,
url(media/bg_2x_dim.png) 2x) url(media/bg_2x_dim.png) 2x)
top center fixed, top center fixed,
linear-gradient(135deg, var(--gradient) fixed;
hsl(42deg, 56%, 55%),
hsl(348deg, 56%, 55%),
hsl(334deg, 60%, 43%),
hsl(234deg, 60%, 40%),
hsl(195deg, 60%, 44%),
hsl(155deg, 60%, 55%)
) fixed;
} }
main { main {
@ -216,7 +204,7 @@ dd {
} }
@media (prefers-reduced-transparency) { @media (prefers-reduced-transparency) {
body { :root {
background: var(--gradient) fixed; background: var(--gradient) fixed;
background-blend-mode: initial; background-blend-mode: initial;
} }

6
index.css
View file

@ -44,7 +44,6 @@ rt {
} }
@media (hover) { @media (hover) {
[title] { [title] {
text-decoration: dotted underline; text-decoration: dotted underline;
@ -70,6 +69,9 @@ rt {
rt { --around-image: url(media/star.svg); } rt { --around-image: url(media/star.svg); }
h1, h2 { --around-image: url(media/sparkles.svg); } h1, h2 { --around-image: url(media/sparkles.svg); }
h1, h2, .ones { letter-spacing: 0.1ch; }
.ones rt { letter-spacing: initial; }
[href='#listen']::before { [href='#listen']::before {
vertical-align: middle; vertical-align: middle;
@ -92,7 +94,7 @@ h1, h2 { --around-image: url(media/sparkles.svg); }
#links ul { #links ul {
display: grid; display: grid;
grid-column-gap: 1em; grid-column-gap: 1em;
grid-template-columns: repeat(auto-fit, minmax(3em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(4.5em, 1fr));
max-width: 85%; max-width: 85%;
margin: auto; margin: auto;