mirror of https://github.com/IoTcat/homepage.git
parent
06ee3667f7
commit
b89ad94413
1 changed files with 112 additions and 83 deletions
@ -1,120 +1,149 @@ |
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); |
||||
|
||||
:root { |
||||
--bg: #5f4b8b; |
||||
--fg: #ffffff; |
||||
--secondaryFg: #b3b3b3; |
||||
--containerBg: #272727; |
||||
--searchBg: var(--containerBg); |
||||
--scrollbarColor: #3f3f3f; |
||||
} |
||||
|
||||
body { |
||||
background-color: #5F4B8B; |
||||
margin: 0px; |
||||
background-color: var(--bg); |
||||
margin: 0px; |
||||
} |
||||
|
||||
.container { |
||||
width: 100%; |
||||
height: 100vh; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
width: 100%; |
||||
height: 100vh; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
#clock { |
||||
font-family: sans-serif; |
||||
font-size: 3.5rem; |
||||
font-weight: 600; |
||||
font-family: "Roboto Mono"; |
||||
color: #fff; |
||||
margin-bottom: .25em; |
||||
font-family: sans-serif; |
||||
font-size: 3.5rem; |
||||
font-weight: 600; |
||||
font-family: 'Roboto Mono'; |
||||
color: var(--fg); |
||||
margin-bottom: 0.25em; |
||||
} |
||||
|
||||
#search { |
||||
width: 100%; |
||||
height: 100vh; |
||||
background-color: #272727; |
||||
display: none; |
||||
position: absolute; |
||||
box-sizing: border-box; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100%; |
||||
height: 100vh; |
||||
background-color: var(--searchBg); |
||||
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: #272727; |
||||
border: solid 0px #272727; |
||||
font-family: "Roboto Mono"; |
||||
font-size: 4rem; |
||||
color: #f2f2f2; |
||||
outline: none; |
||||
border-radius: 3px; |
||||
margin-bottom: 1em; |
||||
text-align: center; |
||||
width: 90%; |
||||
padding: 0.75em 1em; |
||||
box-sizing: border-box; |
||||
background-color: var(--searchBg); |
||||
border: solid 0px var(--searchBg); |
||||
font-family: 'Roboto Mono'; |
||||
font-size: 4rem; |
||||
color: var(--fg); |
||||
outline: none; |
||||
border-radius: 3px; |
||||
margin-bottom: 1em; |
||||
text-align: center; |
||||
} |
||||
|
||||
.weather-container { |
||||
width: 30%; |
||||
background-color: #272727; |
||||
padding: 1em; |
||||
border-radius: 3px; |
||||
font-family: "Roboto Mono"; |
||||
color: #fff; |
||||
text-align: center; |
||||
width: 30%; |
||||
background-color: var(--containerBg); |
||||
padding: 1em; |
||||
border-radius: 3px; |
||||
font-family: 'Roboto Mono'; |
||||
color: var(--fg); |
||||
text-align: center; |
||||
} |
||||
.inline { |
||||
display: inline-block; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.bookmark-container { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
width: 50%; |
||||
margin: 1em 0em; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
width: 50%; |
||||
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; |
||||
} |
||||
.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: #272727; |
||||
border-radius: 3px; |
||||
font-family: "Roboto Mono"; |
||||
font-size: .85rem; |
||||
width: 25%; |
||||
height: 10em; |
||||
margin: 0em .5em; |
||||
.bookmark-set { |
||||
padding: 1em; |
||||
background-color: var(--containerBg); |
||||
border-radius: 3px; |
||||
font-family: 'Roboto Mono'; |
||||
font-size: 0.85rem; |
||||
width: 25%; |
||||
height: 12em; |
||||
margin: 0em 0.5em; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.bookmark-inner-container { |
||||
overflow-y: scroll; |
||||
height: 80%; |
||||
vertical-align: top; |
||||
overflow-y: scroll; |
||||
height: 80%; |
||||
vertical-align: top; |
||||
padding-right: 6px; |
||||
box-sizing: border-box; |
||||
|
||||
scrollbar-width: thin; |
||||
scrollbar-color: var(--scrollbarColor) #ffffff00; |
||||
} |
||||
|
||||
.bookmark-inner-container::-webkit-scrollbar { |
||||
width: 6px; |
||||
} |
||||
.bookmark-inner-container::-webkit-scrollbar-track { |
||||
background: #ffffff00; |
||||
} |
||||
.bookmark-inner-container::-webkit-scrollbar-thumb { |
||||
background-color: var(--scrollbarColor); |
||||
border-radius: 6px; |
||||
border: 3px solid #ffffff00; |
||||
} |
||||
|
||||
.bookmark-title { |
||||
font-size: 1.1rem; |
||||
font-weight: 600; |
||||
color: #fff; |
||||
margin: 0em 0em .35em 0em; |
||||
font-size: 1.1rem; |
||||
font-weight: 600; |
||||
color: var(--fg); |
||||
margin: 0em 0em 0.35em 0em; |
||||
} |
||||
.bookmark { |
||||
text-decoration: none; |
||||
color: #8c8c8b; |
||||
display:block; |
||||
margin: .5em 0em; |
||||
text-decoration: none; |
||||
color: var(--secondaryFg); |
||||
display: block; |
||||
margin: 0.5em 0em; |
||||
} |
||||
.bookmark:hover { |
||||
color: #fff; |
||||
color: var(--fg); |
||||
} |
||||
|
Loading…
Reference in new issue