diff --git a/assets/style.css b/assets/style.css deleted file mode 100644 index 0473892..0000000 --- a/assets/style.css +++ /dev/null @@ -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; -}