emily/kyouma-net
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Honor prefers-reduced-motion setting

Browse source
This commit is contained in:
emily 2024-09-22 18:33:17 +02:00
parent fc34094fc6
commit d6b75a73fd
Signed by: emily
GPG key ID: F6F4C66207FCF995
1 changed files with 52 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/assets/css/style.css
View file

@ -1,24 +1,24 @@
@font-face{ @font-face{
font-family:brandon light; font-family: brandon light;
src:url(../font.woff2) src: url(../font.woff2);
} }
*{ *{
margin:0; margin: 0;
padding:0; padding: 0;
position:relative; position: relative;
box-sizing:border-box; box-sizing: border-box;
overflow:hidden overflow: hidden;
} }
html,body{ html,body{
height:100% height: 100%;
} }
body{ body{
display:flex; display: flex;
justify-content:center; justify-content: center;
align-items:center; align-items: center;
background:#000 background: #000;
} }
#bg-video { #bg-video {
@ -34,11 +34,11 @@ body{
filter: brightness(75%); filter: brightness(75%);
} }
.nav-home, .nav-as, .nav-about { a[class^="nav-"] {
cursor: pointer; cursor: pointer;
} }
#home { #page-home {
z-index: 1; z-index: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -47,21 +47,21 @@ body{
filter: invert(100%); filter: invert(100%);
position: absolute; position: absolute;
& h1 { & h1 {
font-size:5.25vmin; font-size: 5.25vmin;
} }
& h2 { & h2 {
font-size:2vmin; font-size: 2vmin;
letter-spacing: 0.25em; letter-spacing: 0.25em;
margin-right: -0.25em; margin-right: -0.25em;
} }
& .social { & .links {
margin-top:.5vmin; margin-top: .5vmin;
font-family:brandon light; font-family: brandon light;
font-size:4.25vmin; font-size: 4.25vmin;
letter-spacing:.3vmin; letter-spacing: .3vmin;
& a { & a {
text-decoration:none; text-decoration: none;
color:#000; color: #000;
} }
} }
} }
@ -77,7 +77,7 @@ body{
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
color: #FFFFFF; color: #ffffff;
text-decoration: none; text-decoration: none;
font-size: 1.39vmin; font-size: 1.39vmin;
font-weight: bold; font-weight: bold;
@ -90,15 +90,32 @@ body{
} }
.hint { .hint {
z-index:1; z-index: 1;
color:#000; color: #000;
mix-blend-mode:overlay; mix-blend-mode: overlay;
filter:invert(100%); filter: invert(100%);
position:fixed; position: fixed;
bottom:6vmin; bottom: 6vmin;
font-family:brandon light; font-family: brandon light;
font-size:2.75vmin; font-size: 2.75vmin;
letter-spacing:.2vmin; letter-spacing: .2vmin;
font-weight:700; font-weight: 700;
cursor:pointer; cursor: pointer;
}
@media (prefers-reduced-motion) {
#bg-video {
visibility: hidden;
}
#page-home {
color: #ffffff;
filter: none;
mix-blend-mode: unset;
& .links a {
color: #ffffff;
}
}
.hint {
visibility: hidden;
}
} }