102 lines
1.8 KiB
CSS
102 lines
1.8 KiB
CSS
/* Support dark mode */
|
|
:root {
|
|
color-scheme: light dark;
|
|
|
|
--primary-color: #03FCBAFF;
|
|
--primary-color-rgb: rgb(3, 252, 186);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
ul.links img {
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
/* Main styling */
|
|
body {
|
|
font-family: Roboto, monospace;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
overflow: hidden; /* Make it a single-page, disable scroll bar */
|
|
}
|
|
|
|
.wrapper { /* Wrapper to center the content */
|
|
display: flex;
|
|
flex-direction: column; /* To show elements below each other */
|
|
|
|
height: 100vh;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.quote {
|
|
text-align: center;
|
|
}
|
|
|
|
footer {
|
|
opacity: 0.6;
|
|
font-size: small;
|
|
|
|
position: absolute;
|
|
bottom: 2vh;
|
|
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.heart {
|
|
color: #CD001A; /* Cherry red */
|
|
}
|
|
|
|
/* Show icons with links next to each other */
|
|
ul.links {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
}
|
|
|
|
ul.links li {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
ul.links img {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
ul.links a:hover {
|
|
-webkit-filter: opacity(50%);
|
|
-webkit-transition: all 0.5s ease;
|
|
-moz-transition: all 0.5s ease;
|
|
-o-transition: all 0.5s ease;
|
|
-ms-transition: all 0.5s ease;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
/* URL animation on hover in footer
|
|
Draw a line from left to right when hovering over the link */
|
|
footer a {
|
|
text-decoration: none;
|
|
color: inherit; /* Reset to default text color */
|
|
position: relative;
|
|
}
|
|
|
|
footer a::before {
|
|
content: '';
|
|
position: absolute;
|
|
/* Height of the line */
|
|
bottom: -2px;
|
|
height: 2px;
|
|
left: 0;
|
|
width: 0;
|
|
background-color: var(--primary-color);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
footer a:hover::before {
|
|
width: 100%;
|
|
}
|