|
|
|
@ -4,305 +4,13 @@ |
|
|
|
@import 'fonts/montserrat'; |
|
|
|
@import 'font-awesome'; |
|
|
|
|
|
|
|
/* http://meyerweb.com/eric/tools/css/reset/ |
|
|
|
v2.0 | 20110126 |
|
|
|
License: none (public domain) |
|
|
|
*/ |
|
|
|
|
|
|
|
html, body, div, span, applet, object, iframe, |
|
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|
|
|
a, abbr, acronym, address, big, cite, code, |
|
|
|
del, dfn, em, img, ins, kbd, q, s, samp, |
|
|
|
small, strike, strong, sub, sup, tt, var, |
|
|
|
b, u, i, center, |
|
|
|
dl, dt, dd, ol, ul, li, |
|
|
|
fieldset, form, label, legend, |
|
|
|
table, caption, tbody, tfoot, thead, tr, th, td, |
|
|
|
article, aside, canvas, details, embed, |
|
|
|
figure, figcaption, footer, header, hgroup, |
|
|
|
menu, nav, output, ruby, section, summary, |
|
|
|
time, mark, audio, video { |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
border: 0; |
|
|
|
font-size: 100%; |
|
|
|
font: inherit; |
|
|
|
vertical-align: baseline; |
|
|
|
} |
|
|
|
|
|
|
|
/* HTML5 display-role reset for older browsers */ |
|
|
|
article, aside, details, figcaption, figure, |
|
|
|
footer, header, hgroup, menu, nav, section { |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
body { |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
|
|
|
|
ol, ul { |
|
|
|
list-style: none; |
|
|
|
} |
|
|
|
|
|
|
|
blockquote, q { |
|
|
|
quotes: none; |
|
|
|
} |
|
|
|
|
|
|
|
blockquote:before, blockquote:after, |
|
|
|
q:before, q:after { |
|
|
|
content: ''; |
|
|
|
content: none; |
|
|
|
} |
|
|
|
|
|
|
|
table { |
|
|
|
border-collapse: collapse; |
|
|
|
border-spacing: 0; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
|
background: lighten($color1, 4%); |
|
|
|
border: 0px none $color5; |
|
|
|
border-radius: 50px; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
|
background: lighten($color1, 6%); |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb:active { |
|
|
|
background: lighten($color1, 4%); |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
|
border: 0px none $color5; |
|
|
|
border-radius: 0; |
|
|
|
background: rgba($color8, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-track:hover { |
|
|
|
background: $color1; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-track:active { |
|
|
|
background: $color1; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-corner { |
|
|
|
background: transparent; |
|
|
|
} |
|
|
|
|
|
|
|
body { |
|
|
|
font-family: 'Roboto', sans-serif; |
|
|
|
background: $color1 image-url('background-photo.jpeg'); |
|
|
|
background-size: cover; |
|
|
|
background-attachment: fixed; |
|
|
|
font-size: 13px; |
|
|
|
line-height: 18px; |
|
|
|
font-weight: 400; |
|
|
|
color: $color5; |
|
|
|
padding-bottom: 140px; |
|
|
|
text-rendering: optimizelegibility; |
|
|
|
font-feature-settings: "kern"; |
|
|
|
text-size-adjust: none; |
|
|
|
|
|
|
|
&.app-body { |
|
|
|
position: fixed; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
padding: 0; |
|
|
|
background: $color1; |
|
|
|
} |
|
|
|
|
|
|
|
&.embed { |
|
|
|
background: transparent; |
|
|
|
margin: 0; |
|
|
|
|
|
|
|
.container { |
|
|
|
position: absolute; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.admin { |
|
|
|
background: darken($color1, 4%); |
|
|
|
position: fixed; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
@media screen and (max-width: 360px) { |
|
|
|
padding-bottom: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
button:focus { |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
|
|
|
|
.app-holder { |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.container { |
|
|
|
width: 700px; |
|
|
|
margin: 0 auto; |
|
|
|
margin-top: 40px; |
|
|
|
|
|
|
|
@media screen and (max-width: 700px) { |
|
|
|
width: 100%; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.logo-container { |
|
|
|
max-width: 400px; |
|
|
|
margin: 100px auto; |
|
|
|
margin-bottom: 0; |
|
|
|
cursor: default; |
|
|
|
|
|
|
|
@media screen and (max-width: 360px) { |
|
|
|
margin: 30px auto; |
|
|
|
} |
|
|
|
|
|
|
|
h1 { |
|
|
|
display: block; |
|
|
|
text-align: center; |
|
|
|
color: $color5; |
|
|
|
font-size: 48px; |
|
|
|
font-weight: 500; |
|
|
|
|
|
|
|
img { |
|
|
|
display: block; |
|
|
|
margin: 20px auto; |
|
|
|
width: 180px; |
|
|
|
height: 180px; |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
color: inherit; |
|
|
|
text-decoration: none; |
|
|
|
outline: 0; |
|
|
|
|
|
|
|
img { |
|
|
|
opacity: 0.8; |
|
|
|
transition: all 0.8s ease; |
|
|
|
} |
|
|
|
|
|
|
|
&:hover { |
|
|
|
img { |
|
|
|
opacity: 1; |
|
|
|
transition-duration: 0.2s; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
small { |
|
|
|
display: block; |
|
|
|
font-size: 12px; |
|
|
|
font-weight: 400; |
|
|
|
font-family: 'Roboto Mono', monospace; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.no-list { |
|
|
|
list-style: none; |
|
|
|
|
|
|
|
li { |
|
|
|
display: inline-block; |
|
|
|
margin: 0 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.footer { |
|
|
|
text-align: center; |
|
|
|
margin-top: 30px; |
|
|
|
font-size: 12px; |
|
|
|
color: darken($color2, 25%); |
|
|
|
|
|
|
|
.domain { |
|
|
|
font-weight: 500; |
|
|
|
|
|
|
|
a { |
|
|
|
color: inherit; |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.powered-by { |
|
|
|
font-weight: 400; |
|
|
|
|
|
|
|
a { |
|
|
|
color: inherit; |
|
|
|
text-decoration: underline; |
|
|
|
font-weight: 500; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.compact-header { |
|
|
|
h1 { |
|
|
|
font-size: 24px; |
|
|
|
line-height: 28px; |
|
|
|
color: $color3; |
|
|
|
overflow: hidden; |
|
|
|
font-weight: 500; |
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
a { |
|
|
|
color: inherit; |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
|
|
|
|
small { |
|
|
|
font-weight: 400; |
|
|
|
color: $color2; |
|
|
|
} |
|
|
|
|
|
|
|
img { |
|
|
|
display: inline-block; |
|
|
|
margin-bottom: -5px; |
|
|
|
margin-right: 15px; |
|
|
|
width: 36px; |
|
|
|
height: 36px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.landing-strip { |
|
|
|
background: rgba(darken($color1, 7%), 0.8); |
|
|
|
color: $color3; |
|
|
|
font-weight: 400; |
|
|
|
padding: 14px; |
|
|
|
border-radius: 4px; |
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
strong, a { |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
color: inherit; |
|
|
|
text-decoration: underline; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@import 'reset'; |
|
|
|
@import 'basics'; |
|
|
|
@import 'containers'; |
|
|
|
@import 'lists'; |
|
|
|
@import 'footer'; |
|
|
|
@import 'compact_header'; |
|
|
|
@import 'landing_strip'; |
|
|
|
@import 'forms'; |
|
|
|
@import 'accounts'; |
|
|
|
@import 'stream_entries'; |
|
|
|
|
Matt Jankowski
7 years ago
Eugen