vrifox/website
vrifox/website
1
0
Fork 0
Code Issues 2 Pull requests Activity

respect reduced motion preference

Browse source
This commit is contained in:
Vri 🌈 2023-05-17 13:54:02 +02:00
parent 4fe76e19b7
commit e8f74110b5
Signed by: vrifox
GPG key ID: D40098E5B60B2197
6 changed files with 115 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

38
assets/scss/main.scss
View file

@ -2,15 +2,9 @@
box-sizing: border-box;
scrollbar-color: var(--vriish-rose) var(--background);
scrollbar-width: thin;
scroll-behavior: smooth;
&::-webkit-scrollbar {
background: var(--background);
width: 6px;
}
&::-webkit-scrollbar-thumb { background: var(--vriish-rose); }
&::selection {
color: var(--text);
background-color: var(--link-underline);
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
}
@ -19,6 +13,7 @@ html {
overflow-x: hidden;
overflow-y: scroll;
padding: 0;
body {
background: var(--background);
color: var(--text);
@ -29,6 +24,7 @@ html {
line-height: 1.5;
margin: 0;
min-height: 100vh;
@media (max-width: 920px) {
font-size: 1em;
grid-template-areas:
@ -37,33 +33,45 @@ html {
"footer";
grid-template-columns: 1fr;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
margin: .8em 0;
}
a {
color: var(--text);
text-decoration: underline;
text-decoration-color: var(--link-underline);
text-decoration-thickness: 3px;
text-underline-offset: 2px;
transition: text-decoration-color .2s;
&:hover { text-decoration-color: var(--link-underline-hover); }
@media (prefers-reduced-motion: no-preference) {
transition: text-decoration-color .2s;
}
&:hover {
text-decoration-color: var(--link-underline-hover);
}
}
pre {
border: 1px solid var(--vriish-rose);
border-radius: 4px;
overflow: auto;
padding: 10px 15px;
}
p {
hyphens: auto;
img {
border-radius: 1rem;
display: block;
margin: 0 auto;
}
}
hr {
border: 1px solid var(--border);
color: var(--border);
@ -82,7 +90,8 @@ html {
justify-content: center;
padding: 3em 0;
z-index: 2;
h1, p {
h1, p {
margin: 0;
}
}
@ -95,7 +104,10 @@ main {
padding: 30px;
width: 100%;
min-height: 85.6vh;
span { font-size: .8em; }
span {
font-size: .8em;
}
}
p.date-published {