1 changed files with 0 additions and 293 deletions
@ -1,293 +0,0 @@ |
|||||||
|
|
||||||
:root { |
|
||||||
--color-theme: #2978ad; |
|
||||||
--bg-primary: #212121; |
|
||||||
--bg-secondary: rgba(21,21,21,.5); |
|
||||||
--bg-hover: rgba(41,120,173,.5); |
|
||||||
--color-primary: #eee; |
|
||||||
--color-secondary: #74a7ca; |
|
||||||
--color-success: #66BB6A; |
|
||||||
--color-warning: #F57C00; |
|
||||||
--color-danger: #DC3545; |
|
||||||
--padding: 1rem; |
|
||||||
--rounded: 0.25rem; |
|
||||||
--shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12) |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
box-sizing: border-box; |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
font-size: 15px; |
|
||||||
transition: opacity .3s; |
|
||||||
font-family: "Open Sans"; |
|
||||||
} |
|
||||||
|
|
||||||
html { |
|
||||||
color: var(--color-primary); |
|
||||||
background: var(--bg-primary); |
|
||||||
} |
|
||||||
body { |
|
||||||
margin: 0 auto; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar { |
|
||||||
width: 5px; |
|
||||||
height: 5px; |
|
||||||
} |
|
||||||
::-webkit-scrollbar-track { |
|
||||||
background: #4e4e4e; |
|
||||||
} |
|
||||||
::-webkit-scrollbar-thumb { |
|
||||||
background: var(--bg-secondary); |
|
||||||
} |
|
||||||
|
|
||||||
a, a:visited { |
|
||||||
color: var(--color-secondary); |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
a:hover, a:focus { |
|
||||||
text-decoration: underline; |
|
||||||
cursor: pointer; |
|
||||||
webkit-text-decoration-color: var(--color-text-acc); |
|
||||||
webkit-text-decoration-skip: true; |
|
||||||
} |
|
||||||
|
|
||||||
#container { |
|
||||||
margin: 1em auto 0; |
|
||||||
width: 70%; |
|
||||||
} |
|
||||||
|
|
||||||
h1, h2 { |
|
||||||
font-weight: 300; |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
h3, h4 { |
|
||||||
text-transform: uppercase; |
|
||||||
text-align: left; |
|
||||||
color: var(--color-secondary); |
|
||||||
} |
|
||||||
h1 { |
|
||||||
font-size: 4em; |
|
||||||
font-weight: 700; |
|
||||||
} |
|
||||||
h3 { |
|
||||||
font-size: 20px; |
|
||||||
font-weight: 900; |
|
||||||
padding: var(--padding); |
|
||||||
} |
|
||||||
h4 { |
|
||||||
font-size: 1.1em; |
|
||||||
font-weight: 400; |
|
||||||
padding-bottom: .5rem; |
|
||||||
} |
|
||||||
#togglebookmarks { |
|
||||||
text-decoration: none!important; |
|
||||||
} |
|
||||||
|
|
||||||
button { |
|
||||||
background-color: var(--bg-hover); |
|
||||||
color: #fff; |
|
||||||
border: none; |
|
||||||
padding: 10px 20px; |
|
||||||
text-align: center; |
|
||||||
text-decoration: none; |
|
||||||
display: inline-block; |
|
||||||
margin: 4px 2px; |
|
||||||
cursor: pointer; |
|
||||||
border-radius: 5rem; |
|
||||||
text-transform: uppercase; |
|
||||||
box-shadow: var(--shadow); |
|
||||||
} |
|
||||||
button:hover { |
|
||||||
background-color: var(--color-theme); |
|
||||||
} |
|
||||||
|
|
||||||
/* ANIMATION */ |
|
||||||
|
|
||||||
@keyframes fadeseq{ |
|
||||||
100% { |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.fade { |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.fade { |
|
||||||
animation: fadeseq .3s forwards; |
|
||||||
} |
|
||||||
|
|
||||||
.fade:nth-child(2) { |
|
||||||
animation-delay: .4s; |
|
||||||
} |
|
||||||
|
|
||||||
/* HEADERS */ |
|
||||||
|
|
||||||
#header { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
#header-time, #header-date { |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
#header-time { |
|
||||||
font-size: 5em; |
|
||||||
} |
|
||||||
#header-date { |
|
||||||
margin-top: -1rem; |
|
||||||
margin-bottom: .5rem; |
|
||||||
} |
|
||||||
#header-quote { |
|
||||||
margin-top: 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* LINKS */ |
|
||||||
|
|
||||||
#apps-container { |
|
||||||
display: grid; |
|
||||||
grid-column-gap: 0px; |
|
||||||
grid-row-gap: 0px; |
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr; |
|
||||||
} |
|
||||||
|
|
||||||
#apps-container a { |
|
||||||
text-decoration: none; |
|
||||||
color: var(--color-primary); |
|
||||||
} |
|
||||||
|
|
||||||
.apps-item { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
flex-wrap: wrap; |
|
||||||
height: 64px; |
|
||||||
margin: .5rem; |
|
||||||
box-shadow: var(--shadow); |
|
||||||
background: var(--bg-secondary); |
|
||||||
border-radius: var(--rounded); |
|
||||||
-o-transition: background-color .3s; |
|
||||||
-ms-transition: background-color .3s; |
|
||||||
-moz-transition: background-color .3s; |
|
||||||
-webkit-transition: background-color .3s; |
|
||||||
/* ...and now for the proper property */ |
|
||||||
transition: background-color .3s; |
|
||||||
} |
|
||||||
.apps-item:hover { |
|
||||||
background-color: var(--bg-hover)!important; |
|
||||||
} |
|
||||||
|
|
||||||
.apps-icon { |
|
||||||
height: 64px; |
|
||||||
margin: 0 1em; |
|
||||||
padding-top: 13px; |
|
||||||
} |
|
||||||
|
|
||||||
.icon { |
|
||||||
font-size: 2.5em; |
|
||||||
} |
|
||||||
|
|
||||||
.apps-text { |
|
||||||
text-align: left; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
.apps-text span { |
|
||||||
font-size: 1em; |
|
||||||
font-weight: 500; |
|
||||||
text-transform: uppercase; |
|
||||||
text-decoration: none!important; |
|
||||||
} |
|
||||||
.apps-text span:nth-child(2n) { |
|
||||||
color: var(--color-secondary); |
|
||||||
font-size: 0.8em; |
|
||||||
text-transform: lowercase; |
|
||||||
} |
|
||||||
|
|
||||||
/* BOOKMARKS */ |
|
||||||
|
|
||||||
#links-container { |
|
||||||
display: grid; |
|
||||||
flex-wrap: nowrap; |
|
||||||
grid-column-gap: 20px; |
|
||||||
grid-row-gap: 0px; |
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr; |
|
||||||
grid-template-rows: auto; |
|
||||||
} |
|
||||||
|
|
||||||
.links-item { |
|
||||||
line-height: 1.5rem; |
|
||||||
margin-left: 1rem; |
|
||||||
margin-bottom: 2em; |
|
||||||
webkit-font-smoothing: antialiased; |
|
||||||
} |
|
||||||
|
|
||||||
.links-item a { |
|
||||||
color: var(--color-primary); |
|
||||||
display: block; |
|
||||||
line-height: 2; |
|
||||||
text-decoration: none; |
|
||||||
padding-left: .5em; |
|
||||||
-o-transition: padding .3s; |
|
||||||
-ms-transition: padding .3s; |
|
||||||
-moz-transition: padding .3s; |
|
||||||
-webkit-transition: padding .3s; |
|
||||||
transition: padding .3s; |
|
||||||
} |
|
||||||
.links-item a:hover { |
|
||||||
color: var(--color-secondary); |
|
||||||
padding-left: 1em; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* MOBILE */ |
|
||||||
|
|
||||||
@media screen and (max-width: 1100px) { |
|
||||||
#container { |
|
||||||
width: 90%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (max-width: 858px) { |
|
||||||
#apps-container { |
|
||||||
grid-template-columns: 1fr 1fr 1fr; |
|
||||||
width: 90vw; |
|
||||||
} |
|
||||||
#links-container { |
|
||||||
grid-template-columns: 1fr 1fr 1fr; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (max-width: 666px) { |
|
||||||
#apps-container { |
|
||||||
grid-column-gap: 0px; |
|
||||||
grid-row-gap: 0px; |
|
||||||
grid-template-columns: 1fr 1fr; |
|
||||||
width: 90vw; |
|
||||||
} |
|
||||||
#links-container{ |
|
||||||
display: grid; |
|
||||||
flex-wrap: nowrap; |
|
||||||
grid-column-gap: 20px; |
|
||||||
grid-row-gap: 0px; |
|
||||||
grid-template-columns: 1fr 1fr; |
|
||||||
grid-template-rows: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ |
|
||||||
color: #fff; |
|
||||||
opacity: 1; /* Firefox */ |
|
||||||
} |
|
||||||
|
|
||||||
:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
::-ms-input-placeholder { /* Microsoft Edge */ |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
Loading…
Reference in new issue