54 lines
1.0 KiB
SCSS
54 lines
1.0 KiB
SCSS
.main {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
background: #eee;
|
|
background-image: url("/noise.png");
|
|
background-blend-mode: hard-light;
|
|
.motto {
|
|
width: 50vw;
|
|
margin-right: 10vw;
|
|
.content {
|
|
font-size: 40px;
|
|
font-family: 'Noto Serif SC', serif;
|
|
font-weight: 900;
|
|
}
|
|
.author {
|
|
margin-top: 4vh;
|
|
font-size: 20px;
|
|
font-family: 'Noto Serif SC', serif;
|
|
font-weight: 600;
|
|
color: gray;
|
|
}
|
|
}
|
|
// Dark mode with media query
|
|
@media (prefers-color-scheme: dark) {
|
|
background: #333;
|
|
background-image: url("/noise.png");
|
|
background-blend-mode: multiply;
|
|
.content {
|
|
color: #eee;
|
|
cursor: default;
|
|
}
|
|
.author {
|
|
color: #ccc;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
// For smaller screens
|
|
@media (max-width: 768px) {
|
|
flex-direction: column;
|
|
.motto {
|
|
width: 80vw;
|
|
margin-right: 0;
|
|
.content {
|
|
font-size: 30px;
|
|
}
|
|
.author {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
} |