106 lines
2.0 KiB
CSS
106 lines
2.0 KiB
CSS
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
color: var(--primary-color);
|
|
text-align: center;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
}
|
|
|
|
.clock {
|
|
display: none;
|
|
font-size: 10rem;
|
|
margin-top: 1.3rem;
|
|
}
|
|
|
|
.date {
|
|
display: none;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.quote {
|
|
display: none;
|
|
font-size: 1.6rem;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: absolute;
|
|
bottom: 1.3rem;
|
|
width: 100vw;
|
|
}
|
|
|
|
#quote-text {
|
|
width: 50vw;
|
|
}
|
|
|
|
.quote-author {
|
|
font-style: italic;
|
|
font-weight: 200;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.search-box {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 80%;
|
|
height: 50px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
|
|
.search-bar {
|
|
width: 100%;
|
|
height: 100%;
|
|
outline: none;
|
|
border: solid 2px var(--primary-color);
|
|
border-radius: var(--border-radius);
|
|
color: var(--primary-color);
|
|
background-color: var(--secondary-color);
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.search-icon {
|
|
height: 40px;
|
|
width: 40px;
|
|
position: relative;
|
|
left: -55px;
|
|
margin: 8px;
|
|
}
|
|
|
|
.search-bar:placeholder-shown {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(1rem);
|
|
}
|
|
|
|
.search-bar:placeholder-shown ~ .search-icon {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(1rem) translateX(-1.6rem);
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 1.5s;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
} |