dotfiles/.config/homepage/styles/homepage.css
2020-07-04 14:23:27 +02:00

126 lines
2.3 KiB
CSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Anton');
body {
background-color: #282a36;
margin: 0px;
}
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#clock {
font-family: sans-serif;
font-size: 4.0rem;
font-weight: 600;
font-family: "Anton";
color: #fff;
margin-bottom: .25em;
}
#search {
width: 100%;
height: 100vh;
background-color: #000000;
display: none;
position: absolute;
box-sizing: border-box;
flex-direction: column;
align-items: center;
justify-content: center;
}
#search-field {
width: 90%;
padding: .75em 1em;
box-sizing: border-box;
background-color: #000000;
border: solid 0px #000000;
font-family: "Roboto Mono";
font-size: 4rem;
color: #f2f2f2;
outline: none;
border-radius: 3px;
margin-bottom: 1em;
text-align: center;
}
.weather-container {
width: 30%;
background-color: #000000;
padding: 1em;
border-radius: 3px;
font-family: "Roboto Mono";
font-size: 1.2rem;
color: #fff;
text-align: center;
}
.inline {
display: inline-block;
}
.bookmark-container {
display: flex;
flex-direction: row;
justify-content: center;
width: 60%;
margin: 1em 0em;
}
@media only screen and (max-width: 960px) {
.container {
height: auto;
}
#clock {
margin-top: 1em;
}
.container > .bookmark-container {
flex-direction: column;
width: 60%;
}
.bookmark-container > .bookmark-set {
width: auto;
margin: 1em 0em;
}
}
.bookmark-set{
padding: 1em;
background-color: #000000;
border-radius: 3px;
font-family: "Roboto Mono";
font-size: .85rem;
width: 25%;
height: 16em;
margin: 0em .5em;
}
.bookmark-inner-container {
overflow-y: scroll;
height: 80%;
vertical-align: top;
}
.bookmark-title {
font-family: "Roboto";
font-size: 1.2rem;
font-weight: 600;
color: #ededed;
margin: 0em 0em .35em 0em;
}
.bookmark {
text-decoration: none;
color: #8c8c8b;
display:block;
margin: .4em 0em;
}
.bookmark:hover {
color: #fff;
}