Eric Huang (Talk | contribs) |
Eric Huang (Talk | contribs) |
||
Line 126: | Line 126: | ||
/********************************* Main css ***************************************/ | /********************************* Main css ***************************************/ | ||
@import url("https://2017.igem.org/Team:CCU_Taiwan/fontawesome"); | @import url("https://2017.igem.org/Team:CCU_Taiwan/fontawesome"); | ||
− | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600 | + | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600"); |
/* | /* | ||
Line 136: | Line 136: | ||
/* Reset */ | /* Reset */ | ||
− | + | 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; | ||
+ | } | ||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { | ||
Line 185: | Line 192: | ||
.container.\31 25\25 { | .container.\31 25\25 { | ||
width: 100%; | width: 100%; | ||
− | max-width: | + | max-width: 1750px; |
− | min-width: | + | min-width: 1400px; |
} | } | ||
.container.\37 5\25 { | .container.\37 5\25 { | ||
− | width: | + | width: 1050px; |
} | } | ||
.container.\35 0\25 { | .container.\35 0\25 { | ||
− | width: | + | width: 700px; |
} | } | ||
.container.\32 5\25 { | .container.\32 5\25 { | ||
− | width: | + | width: 350px; |
} | } | ||
.container { | .container { | ||
− | width: | + | width: 1400px; |
} | } | ||
Line 209: | Line 216: | ||
.container.\31 25\25 { | .container.\31 25\25 { | ||
width: 100%; | width: 100%; | ||
− | max-width: | + | max-width: 1500px; |
− | min-width: | + | min-width: 1200px; |
} | } | ||
.container.\37 5\25 { | .container.\37 5\25 { | ||
− | width: | + | width: 900px; |
} | } | ||
.container.\35 0\25 { | .container.\35 0\25 { | ||
− | width: | + | width: 600px; |
} | } | ||
.container.\32 5\25 { | .container.\32 5\25 { | ||
− | width: | + | width: 300px; |
} | } | ||
.container { | .container { | ||
− | width: | + | width: 1200px; |
} | } | ||
Line 235: | Line 242: | ||
.container.\31 25\25 { | .container.\31 25\25 { | ||
width: 100%; | width: 100%; | ||
− | max-width: | + | max-width: 125%; |
− | min-width: | + | min-width: 100%; |
} | } | ||
.container.\37 5\25 { | .container.\37 5\25 { | ||
− | width: | + | width: 75%; |
} | } | ||
.container.\35 0\25 { | .container.\35 0\25 { | ||
− | width: | + | width: 50%; |
} | } | ||
.container.\32 5\25 { | .container.\32 5\25 { | ||
− | width: | + | width: 25%; |
} | } | ||
.container { | .container { | ||
− | width: | + | width: 100%; |
} | } | ||
} | } | ||
− | @media screen and (max-width: | + | @media screen and (max-width: 960px) { |
.container.\31 25\25 { | .container.\31 25\25 { | ||
width: 100%; | width: 100%; | ||
− | max-width: | + | max-width: 125%; |
− | min-width: | + | min-width: 100%; |
} | } | ||
.container.\37 5\25 { | .container.\37 5\25 { | ||
− | width: | + | width: 75%; |
} | } | ||
.container.\35 0\25 { | .container.\35 0\25 { | ||
− | width: | + | width: 50%; |
} | } | ||
.container.\32 5\25 { | .container.\32 5\25 { | ||
− | width: | + | width: 25%; |
} | } | ||
.container { | .container { | ||
− | width: | + | width: 100%; |
} | } | ||
Line 287: | Line 294: | ||
.container.\31 25\25 { | .container.\31 25\25 { | ||
width: 100%; | width: 100%; | ||
− | max-width: | + | max-width: 125%; |
− | min-width: | + | min-width: 100%; |
} | } | ||
.container.\37 5\25 { | .container.\37 5\25 { | ||
− | width: | + | width: 75%; |
} | } | ||
.container.\35 0\25 { | .container.\35 0\25 { | ||
− | width: | + | width: 50%; |
} | } | ||
.container.\32 5\25 { | .container.\32 5\25 { | ||
− | width: | + | width: 25%; |
} | } | ||
.container { | .container { | ||
− | width: | + | width: 100% !important; |
} | } | ||
Line 310: | Line 317: | ||
@media screen and (max-width: 736px) { | @media screen and (max-width: 736px) { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.container.\31 25\25 { | .container.\31 25\25 { | ||
Line 409: | Line 390: | ||
.row > * { | .row > * { | ||
− | padding: | + | padding: 48px 0 0 48px; |
} | } | ||
.row { | .row { | ||
− | margin: - | + | margin: -48px 0 -1px -48px; |
} | } | ||
.row.uniform > * { | .row.uniform > * { | ||
− | padding: | + | padding: 48px 0 0 48px; |
} | } | ||
.row.uniform { | .row.uniform { | ||
− | margin: - | + | margin: -48px 0 -1px -48px; |
} | } | ||
.row.\32 00\25 > * { | .row.\32 00\25 > * { | ||
− | padding: | + | padding: 96px 0 0 96px; |
} | } | ||
.row.\32 00\25 { | .row.\32 00\25 { | ||
− | margin: - | + | margin: -96px 0 -1px -96px; |
} | } | ||
.row.uniform.\32 00\25 > * { | .row.uniform.\32 00\25 > * { | ||
− | padding: | + | padding: 96px 0 0 96px; |
} | } | ||
.row.uniform.\32 00\25 { | .row.uniform.\32 00\25 { | ||
− | margin: - | + | margin: -96px 0 -1px -96px; |
} | } | ||
.row.\31 50\25 > * { | .row.\31 50\25 > * { | ||
− | padding: | + | padding: 72px 0 0 72px; |
} | } | ||
.row.\31 50\25 { | .row.\31 50\25 { | ||
− | margin: - | + | margin: -72px 0 -1px -72px; |
} | } | ||
.row.uniform.\31 50\25 > * { | .row.uniform.\31 50\25 > * { | ||
− | padding: | + | padding: 72px 0 0 72px; |
} | } | ||
.row.uniform.\31 50\25 { | .row.uniform.\31 50\25 { | ||
− | margin: - | + | margin: -72px 0 -1px -72px; |
} | } | ||
.row.\35 0\25 > * { | .row.\35 0\25 > * { | ||
− | padding: | + | padding: 24px 0 0 24px; |
} | } | ||
.row.\35 0\25 { | .row.\35 0\25 { | ||
− | margin: - | + | margin: -24px 0 -1px -24px; |
} | } | ||
.row.uniform.\35 0\25 > * { | .row.uniform.\35 0\25 > * { | ||
− | padding: | + | padding: 24px 0 0 24px; |
} | } | ||
.row.uniform.\35 0\25 { | .row.uniform.\35 0\25 { | ||
− | margin: - | + | margin: -24px 0 -1px -24px; |
} | } | ||
.row.\32 5\25 > * { | .row.\32 5\25 > * { | ||
− | padding: | + | padding: 12px 0 0 12px; |
} | } | ||
.row.\32 5\25 { | .row.\32 5\25 { | ||
− | margin: - | + | margin: -12px 0 -1px -12px; |
} | } | ||
.row.uniform.\32 5\25 > * { | .row.uniform.\32 5\25 > * { | ||
− | padding: | + | padding: 12px 0 0 12px; |
} | } | ||
.row.uniform.\32 5\25 { | .row.uniform.\32 5\25 { | ||
− | margin: - | + | margin: -12px 0 -1px -12px; |
} | } | ||
Line 622: | Line 603: | ||
.row > * { | .row > * { | ||
− | padding: | + | padding: 48px 0 0 48px; |
} | } | ||
.row { | .row { | ||
− | margin: - | + | margin: -48px 0 -1px -48px; |
} | } | ||
.row.uniform > * { | .row.uniform > * { | ||
− | padding: | + | padding: 48px 0 0 48px; |
} | } | ||
.row.uniform { | .row.uniform { | ||
− | margin: - | + | margin: -48px 0 -1px -48px; |
} | } | ||
.row.\32 00\25 > * { | .row.\32 00\25 > * { | ||
− | padding: | + | padding: 96px 0 0 96px; |
} | } | ||
.row.\32 00\25 { | .row.\32 00\25 { | ||
− | margin: - | + | margin: -96px 0 -1px -96px; |
} | } | ||
.row.uniform.\32 00\25 > * { | .row.uniform.\32 00\25 > * { | ||
− | padding: | + | padding: 96px 0 0 96px; |
} | } | ||
.row.uniform.\32 00\25 { | .row.uniform.\32 00\25 { | ||
− | margin: - | + | margin: -96px 0 -1px -96px; |
} | } | ||
.row.\31 50\25 > * { | .row.\31 50\25 > * { | ||
− | padding: | + | padding: 72px 0 0 72px; |
} | } | ||
.row.\31 50\25 { | .row.\31 50\25 { | ||
− | margin: - | + | margin: -72px 0 -1px -72px; |
} | } | ||
.row.uniform.\31 50\25 > * { | .row.uniform.\31 50\25 > * { | ||
− | padding: | + | padding: 72px 0 0 72px; |
} | } | ||
.row.uniform.\31 50\25 { | .row.uniform.\31 50\25 { | ||
− | margin: - | + | margin: -72px 0 -1px -72px; |
} | } | ||
.row.\35 0\25 > * { | .row.\35 0\25 > * { | ||
− | padding: | + | padding: 24px 0 0 24px; |
} | } | ||
.row.\35 0\25 { | .row.\35 0\25 { | ||
− | margin: - | + | margin: -24px 0 -1px -24px; |
} | } | ||
.row.uniform.\35 0\25 > * { | .row.uniform.\35 0\25 > * { | ||
− | padding: | + | padding: 24px 0 0 24px; |
} | } | ||
.row.uniform.\35 0\25 { | .row.uniform.\35 0\25 { | ||
− | margin: - | + | margin: -24px 0 -1px -24px; |
} | } | ||
.row.\32 5\25 > * { | .row.\32 5\25 > * { | ||
− | padding: | + | padding: 12px 0 0 12px; |
} | } | ||
.row.\32 5\25 { | .row.\32 5\25 { | ||
− | margin: - | + | margin: -12px 0 -1px -12px; |
} | } | ||
.row.uniform.\32 5\25 > * { | .row.uniform.\32 5\25 > * { | ||
− | padding: | + | padding: 12px 0 0 12px; |
} | } | ||
.row.uniform.\32 5\25 { | .row.uniform.\32 5\25 { | ||
− | margin: - | + | margin: -12px 0 -1px -12px; |
} | } | ||
Line 837: | Line 818: | ||
.row > * { | .row > * { | ||
− | padding: | + | padding: 36px 0 0 36px; |
} | } | ||
.row { | .row { | ||
− | margin: - | + | margin: -36px 0 -1px -36px; |
} | } | ||
.row.uniform > * { | .row.uniform > * { | ||
− | padding: | + | padding: 36px 0 0 36px; |
} | } | ||
.row.uniform { | .row.uniform { | ||
− | margin: - | + | margin: -36px 0 -1px -36px; |
} | } | ||
.row.\32 00\25 > * { | .row.\32 00\25 > * { | ||
− | padding: | + | padding: 72px 0 0 72px; |
} | } | ||
.row.\32 00\25 { | .row.\32 00\25 { | ||
− | margin: - | + | margin: -72px 0 -1px -72px; |
} | } | ||
.row.uniform.\32 00\25 > * { | .row.uniform.\32 00\25 > * { | ||
− | padding: | + | padding: 72px 0 0 72px; |
} | } | ||
.row.uniform.\32 00\25 { | .row.uniform.\32 00\25 { | ||
− | margin: - | + | margin: -72px 0 -1px -72px; |
} | } | ||
.row.\31 50\25 > * { | .row.\31 50\25 > * { | ||
− | padding: | + | padding: 54px 0 0 54px; |
} | } | ||
.row.\31 50\25 { | .row.\31 50\25 { | ||
− | margin: - | + | margin: -54px 0 -1px -54px; |
} | } | ||
.row.uniform.\31 50\25 > * { | .row.uniform.\31 50\25 > * { | ||
− | padding: | + | padding: 54px 0 0 54px; |
} | } | ||
.row.uniform.\31 50\25 { | .row.uniform.\31 50\25 { | ||
− | margin: - | + | margin: -54px 0 -1px -54px; |
} | } | ||
.row.\35 0\25 > * { | .row.\35 0\25 > * { | ||
− | padding: | + | padding: 18px 0 0 18px; |
} | } | ||
.row.\35 0\25 { | .row.\35 0\25 { | ||
− | margin: - | + | margin: -18px 0 -1px -18px; |
} | } | ||
.row.uniform.\35 0\25 > * { | .row.uniform.\35 0\25 > * { | ||
− | padding: | + | padding: 18px 0 0 18px; |
} | } | ||
.row.uniform.\35 0\25 { | .row.uniform.\35 0\25 { | ||
− | margin: - | + | margin: -18px 0 -1px -18px; |
} | } | ||
.row.\32 5\25 > * { | .row.\32 5\25 > * { | ||
− | padding: | + | padding: 9px 0 0 9px; |
} | } | ||
.row.\32 5\25 { | .row.\32 5\25 { | ||
− | margin: - | + | margin: -9px 0 -1px -9px; |
} | } | ||
.row.uniform.\32 5\25 > * { | .row.uniform.\32 5\25 > * { | ||
− | padding: | + | padding: 9px 0 0 9px; |
} | } | ||
.row.uniform.\32 5\25 { | .row.uniform.\32 5\25 { | ||
− | margin: - | + | margin: -9px 0 -1px -9px; |
} | } | ||
Line 1,049: | Line 1,030: | ||
} | } | ||
− | @media screen and (max-width: | + | @media screen and (max-width: 960px) { |
.row > * { | .row > * { | ||
− | padding: | + | padding: 32px 0 0 32px; |
} | } | ||
.row { | .row { | ||
− | margin: - | + | margin: -32px 0 -1px -32px; |
} | } | ||
.row.uniform > * { | .row.uniform > * { | ||
− | padding: | + | padding: 32px 0 0 32px; |
} | } | ||
.row.uniform { | .row.uniform { | ||
− | margin: - | + | margin: -32px 0 -1px -32px; |
} | } | ||
.row.\32 00\25 > * { | .row.\32 00\25 > * { | ||
− | padding: | + | padding: 64px 0 0 64px; |
} | } | ||
.row.\32 00\25 { | .row.\32 00\25 { | ||
− | margin: - | + | margin: -64px 0 -1px -64px; |
} | } | ||
.row.uniform.\32 00\25 > * { | .row.uniform.\32 00\25 > * { | ||
− | padding: | + | padding: 64px 0 0 64px; |
} | } | ||
.row.uniform.\32 00\25 { | .row.uniform.\32 00\25 { | ||
− | margin: - | + | margin: -64px 0 -1px -64px; |
} | } | ||
.row.\31 50\25 > * { | .row.\31 50\25 > * { | ||
− | padding: | + | padding: 48px 0 0 48px; |
} | } | ||
.row.\31 50\25 { | .row.\31 50\25 { | ||
− | margin: - | + | margin: -48px 0 -1px -48px; |
} | } | ||
.row.uniform.\31 50\25 > * { | .row.uniform.\31 50\25 > * { | ||
− | padding: | + | padding: 48px 0 0 48px; |
} | } | ||
.row.uniform.\31 50\25 { | .row.uniform.\31 50\25 { | ||
− | margin: - | + | margin: -48px 0 -1px -48px; |
} | } | ||
.row.\35 0\25 > * { | .row.\35 0\25 > * { | ||
− | padding: | + | padding: 16px 0 0 16px; |
} | } | ||
.row.\35 0\25 { | .row.\35 0\25 { | ||
− | margin: - | + | margin: -16px 0 -1px -16px; |
} | } | ||
.row.uniform.\35 0\25 > * { | .row.uniform.\35 0\25 > * { | ||
− | padding: | + | padding: 16px 0 0 16px; |
} | } | ||
.row.uniform.\35 0\25 { | .row.uniform.\35 0\25 { | ||
− | margin: - | + | margin: -16px 0 -1px -16px; |
} | } | ||
.row.\32 5\25 > * { | .row.\32 5\25 > * { | ||
− | padding: | + | padding: 8px 0 0 8px; |
} | } | ||
.row.\32 5\25 { | .row.\32 5\25 { | ||
− | margin: - | + | margin: -8px 0 -1px -8px; |
} | } | ||
.row.uniform.\32 5\25 > * { | .row.uniform.\32 5\25 > * { | ||
− | padding: | + | padding: 8px 0 0 8px; |
} | } | ||
.row.uniform.\32 5\25 { | .row.uniform.\32 5\25 { | ||
− | margin: - | + | margin: -8px 0 -1px -8px; |
} | } | ||
Line 1,267: | Line 1,248: | ||
.row > * { | .row > * { | ||
− | padding: | + | padding: 32px 0 0 32px; |
} | } | ||
.row { | .row { | ||
− | margin: - | + | margin: -32px 0 -1px -32px; |
} | } | ||
.row.uniform > * { | .row.uniform > * { | ||
− | padding: | + | padding: 32px 0 0 32px; |
} | } | ||
.row.uniform { | .row.uniform { | ||
− | margin: - | + | margin: -32px 0 -1px -32px; |
} | } | ||
.row.\32 00\25 > * { | .row.\32 00\25 > * { | ||
− | padding: | + | padding: 64px 0 0 64px; |
} | } | ||
.row.\32 00\25 { | .row.\32 00\25 { | ||
− | margin: - | + | margin: -64px 0 -1px -64px; |
} | } | ||
.row.uniform.\32 00\25 > * { | .row.uniform.\32 00\25 > * { | ||
− | padding: | + | padding: 64px 0 0 64px; |
} | } | ||
.row.uniform.\32 00\25 { | .row.uniform.\32 00\25 { | ||
− | margin: - | + | margin: -64px 0 -1px -64px; |
} | } | ||
.row.\31 50\25 > * { | .row.\31 50\25 > * { | ||
− | padding: | + | padding: 48px 0 0 48px; |
} | } | ||
.row.\31 50\25 { | .row.\31 50\25 { | ||
− | margin: - | + | margin: -48px 0 -1px -48px; |
} | } | ||
.row.uniform.\31 50\25 > * { | .row.uniform.\31 50\25 > * { | ||
− | padding: | + | padding: 48px 0 0 48px; |
} | } | ||
.row.uniform.\31 50\25 { | .row.uniform.\31 50\25 { | ||
− | margin: - | + | margin: -48px 0 -1px -48px; |
} | } | ||
.row.\35 0\25 > * { | .row.\35 0\25 > * { | ||
− | padding: | + | padding: 16px 0 0 16px; |
} | } | ||
.row.\35 0\25 { | .row.\35 0\25 { | ||
− | margin: - | + | margin: -16px 0 -1px -16px; |
} | } | ||
.row.uniform.\35 0\25 > * { | .row.uniform.\35 0\25 > * { | ||
− | padding: | + | padding: 16px 0 0 16px; |
} | } | ||
.row.uniform.\35 0\25 { | .row.uniform.\35 0\25 { | ||
− | margin: - | + | margin: -16px 0 -1px -16px; |
} | } | ||
.row.\32 5\25 > * { | .row.\32 5\25 > * { | ||
− | padding: | + | padding: 8px 0 0 8px; |
} | } | ||
.row.\32 5\25 { | .row.\32 5\25 { | ||
− | margin: - | + | margin: -8px 0 -1px -8px; |
} | } | ||
.row.uniform.\32 5\25 > * { | .row.uniform.\32 5\25 > * { | ||
− | padding: | + | padding: 8px 0 0 8px; |
} | } | ||
.row.uniform.\32 5\25 { | .row.uniform.\32 5\25 { | ||
− | margin: - | + | margin: -8px 0 -1px -8px; |
} | } | ||
Line 1,689: | Line 1,670: | ||
.\-1u\28mobile\29 { | .\-1u\28mobile\29 { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
margin-left: 8.33333%; | margin-left: 8.33333%; | ||
} | } | ||
Line 1,910: | Line 1,676: | ||
/* Basic */ | /* Basic */ | ||
− | |||
− | |||
− | |||
− | |||
body { | body { | ||
− | background: # | + | background: #f0f4f4; |
+ | color: #5b5b5b; | ||
+ | font-size: 15pt; | ||
+ | line-height: 1.85em; | ||
+ | font-family: 'Source Sans Pro', sans-serif; | ||
+ | font-weight: 300; | ||
} | } | ||
− | body.is-loading * { | + | body.is-loading *, body.is-loading *:after, body.is-loading *:before { |
-moz-transition: none !important; | -moz-transition: none !important; | ||
-webkit-transition: none !important; | -webkit-transition: none !important; | ||
Line 1,930: | Line 1,697: | ||
} | } | ||
− | + | input, textarea, select { | |
− | + | font-size: 15pt; | |
+ | line-height: 1.85em; | ||
font-family: 'Source Sans Pro', sans-serif; | font-family: 'Source Sans Pro', sans-serif; | ||
− | font- | + | font-weight: 300; |
+ | } | ||
+ | |||
+ | h1, h2, h3, h4, h5, h6 { | ||
font-weight: 400; | font-weight: 400; | ||
− | line-height: 1. | + | color: #483949; |
+ | line-height: 1.25em; | ||
} | } | ||
− | a | + | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { |
− | + | color: inherit; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | color: | + | |
text-decoration: none; | text-decoration: none; | ||
+ | border-bottom-color: transparent; | ||
} | } | ||
− | + | h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { | |
− | + | ||
− | + | ||
− | + | ||
− | strong, | + | |
font-weight: 600; | font-weight: 600; | ||
− | |||
} | } | ||
− | + | h2 { | |
− | font- | + | font-size: 2.85em; |
} | } | ||
− | + | h3 { | |
− | + | font-size: 1.25em; | |
} | } | ||
− | + | h4 { | |
− | + | font-size: 1em; | |
− | font- | + | margin: 0 0 0.25em 0; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | strong, b { | |
− | + | font-weight: 400; | |
− | + | color: #483949; | |
− | + | } | |
− | + | em, i { | |
− | font- | + | font-style: italic; |
} | } | ||
− | + | a { | |
− | + | color: inherit; | |
+ | border-bottom: solid 1px rgba(128, 128, 128, 0.15); | ||
+ | text-decoration: none; | ||
+ | -moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | ||
+ | -webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | ||
+ | -ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | ||
+ | transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | ||
} | } | ||
+ | |||
+ | a:hover { | ||
+ | color: #ef8376; | ||
+ | border-bottom-color: transparent; | ||
+ | } | ||
sub { | sub { | ||
− | |||
position: relative; | position: relative; | ||
top: 0.5em; | top: 0.5em; | ||
+ | font-size: 0.8em; | ||
} | } | ||
sup { | sup { | ||
− | |||
position: relative; | position: relative; | ||
top: -0.5em; | top: -0.5em; | ||
− | + | font-size: 0.8em; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
blockquote { | blockquote { | ||
− | border-left: solid 0.5em | + | border-left: solid 0.5em #ddd; |
− | + | ||
padding: 1em 0 1em 2em; | padding: 1em 0 1em 2em; | ||
+ | font-style: italic; | ||
} | } | ||
− | + | p, ul, ol, dl, table { | |
+ | margin-bottom: 1em; | ||
+ | } | ||
− | + | p { | |
− | text-align: | + | text-align: justify; |
} | } | ||
− | + | br.clear { | |
− | + | clear: both; | |
} | } | ||
− | + | hr { | |
− | position: | + | position: relative; |
− | top: - | + | display: block; |
− | + | border: 0; | |
− | + | top: 4.5em; | |
− | + | margin-bottom: 9em; | |
+ | height: 6px; | ||
+ | border-top: solid 1px rgba(128, 128, 128, 0.2); | ||
+ | border-bottom: solid 1px rgba(128, 128, 128, 0.2); | ||
+ | } | ||
+ | |||
+ | hr:before, hr:after { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | top: -8px; | ||
+ | display: block; | ||
+ | width: 1px; | ||
+ | height: 21px; | ||
+ | background: rgba(128, 128, 128, 0.2); | ||
} | } | ||
− | + | hr:before { | |
− | + | left: -1px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | hr:after { | |
− | + | right: -1px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .timestamp { | |
− | + | color: rgba(128, 128, 128, 0.75); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
font-size: 0.8em; | font-size: 0.8em; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | /* Sections/Article */ | |
− | + | ||
− | + | section, article { | |
− | + | margin-bottom: 3em; | |
− | + | ||
− | - | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | section > :last-child, section:last-child, article > :last-child, article:last-child { | |
− | + | margin-bottom: 0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | section.special > header, section.special > footer, article.special > header, article.special > footer { | |
− | + | text-align: center; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .row > section, .row > article { | |
− | + | margin-bottom: 0; | |
} | } | ||
− | + | header { | |
− | + | margin: 0 0 1em 0; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | header > p { | |
− | + | display: block; | |
− | + | font-size: 1.5em; | |
− | + | margin: 1em 0 2em 0; | |
+ | line-height: 1.5em; | ||
+ | text-align: inherit; | ||
+ | } | ||
− | + | footer { | |
− | + | margin: 2.5em 0 0 0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 2,206: | Line 1,858: | ||
.image { | .image { | ||
− | + | position: relative; | |
display: inline-block; | display: inline-block; | ||
− | + | border: 0; | |
+ | outline: 0; | ||
} | } | ||
− | .image | + | .image img { |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
display: block; | display: block; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
width: 100%; | width: 100%; | ||
} | } | ||
− | .image | + | .image.fit { |
display: block; | display: block; | ||
+ | width: 100%; | ||
} | } | ||
− | .image. | + | .image.featured { |
display: block; | display: block; | ||
+ | width: 100%; | ||
+ | margin: 0 0 4em 0; | ||
} | } | ||
− | + | .image.left { | |
− | + | float: left; | |
− | + | margin: 0 2em 2em 0; | |
− | + | } | |
− | .image. | + | .image.centered { |
display: block; | display: block; | ||
margin: 0 0 2em 0; | margin: 0 0 2em 0; | ||
} | } | ||
− | .image. | + | .image.centered img { |
− | + | margin: 0 auto; | |
− | width: | + | width: auto; |
} | } | ||
− | + | /* List */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ul.default { | |
− | + | list-style: disc; | |
− | + | padding-left: 1em; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ul.default li { | |
+ | padding-left: 0.5em; | ||
+ | } | ||
− | . | + | ul.actions { |
− | + | margin: 3em 0 0 0; | |
− | + | ||
− | + | ||
} | } | ||
− | . | + | form ul.actions { |
− | - | + | margin-top: 0; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | ul.actions li { |
− | display: | + | display: inline-block; |
+ | margin: 0 0.75em 0 0.75em; | ||
} | } | ||
− | + | ul.actions li:first-child { | |
+ | margin-left: 0; | ||
+ | } | ||
− | + | ul.actions li:last-child { | |
− | + | margin-right: 0; | |
− | padding- | + | } |
+ | |||
+ | ul.divided li { | ||
+ | border-top: solid 1px rgba(128, 128, 128, 0.2); | ||
+ | padding-top: 1.5em; | ||
+ | margin-top: 1.5em; | ||
} | } | ||
− | + | ul.divided li:first-child { | |
− | padding- | + | border-top: 0; |
+ | padding-top: 0; | ||
+ | margin-top: 0; | ||
} | } | ||
− | ul. | + | ul.menu { |
− | + | height: 1em; | |
− | + | line-height: 1em; | |
} | } | ||
− | ul. | + | ul.menu li { |
− | + | display: inline-block; | |
+ | border-left: solid 1px rgba(128, 128, 128, 0.2); | ||
+ | padding-left: 1.25em; | ||
+ | margin-left: 1.25em; | ||
} | } | ||
+ | |||
+ | ul.menu li:first-child { | ||
+ | border-left: 0; | ||
+ | padding-left: 0; | ||
+ | margin-left: 0; | ||
+ | } | ||
ul.icons { | ul.icons { | ||
+ | position: relative; | ||
+ | background: rgba(128, 128, 128, 0.05); | ||
+ | border-radius: 4em; | ||
+ | display: inline-block; | ||
+ | padding: 0.35em 0.75em 0.35em 0.75em; | ||
+ | font-size: 1.25em; | ||
cursor: default; | cursor: default; | ||
} | } | ||
Line 2,337: | Line 1,969: | ||
ul.icons li { | ul.icons li { | ||
display: inline-block; | display: inline-block; | ||
− | |||
− | |||
− | |||
} | } | ||
− | + | ul.icons li a { | |
− | + | ||
− | + | ||
− | + | ||
− | ul.icons li a | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
display: inline-block; | display: inline-block; | ||
− | height: | + | background: none; |
− | line-height: | + | width: 2.5em; |
+ | height: 2.5em; | ||
+ | line-height: 2.5em; | ||
text-align: center; | text-align: center; | ||
− | + | border-radius: 100%; | |
+ | border: 0; | ||
+ | color: inherit; | ||
} | } | ||
− | ul.icons li a | + | ul.icons li a:hover { |
− | + | color: #ef8376; | |
} | } | ||
− | + | ol.default { | |
− | + | list-style: decimal; | |
− | + | padding-left: 1.25em; | |
} | } | ||
− | + | ol.default li { | |
− | + | padding-left: 0.25em; | |
} | } | ||
− | + | /* Form */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | form label { | |
− | + | display: block; | |
− | + | font-weight: 400; | |
+ | color: #483949; | ||
+ | margin: 0 0 1em 0; | ||
+ | } | ||
− | + | form input[type="text"], | |
− | + | form input[type="email"], | |
− | + | form input[type="password"], | |
+ | form select, | ||
+ | form textarea { | ||
+ | -webkit-appearance: none; | ||
+ | display: block; | ||
+ | border: 0; | ||
+ | background: #fafafa; | ||
+ | width: 100%; | ||
+ | border-radius: 0.5em; | ||
+ | border: solid 1px #E5E5E5; | ||
+ | padding: 1em; | ||
+ | -moz-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out; | ||
+ | -webkit-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out; | ||
+ | -ms-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out; | ||
+ | transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out; | ||
+ | } | ||
+ | |||
+ | form input[type="text"]:focus, | ||
+ | form input[type="email"]:focus, | ||
+ | form input[type="password"]:focus, | ||
+ | form select:focus, | ||
+ | form textarea:focus { | ||
+ | background: #fff; | ||
+ | border-color: #df7366; | ||
} | } | ||
− | + | form input[type="text"], | |
− | + | form input[type="email"], | |
− | + | form input[type="password"], | |
+ | form select { | ||
+ | line-height: 1em; | ||
+ | } | ||
− | + | form textarea { | |
+ | min-height: 9em; | ||
+ | } | ||
− | . | + | form .formerize-placeholder { |
− | + | color: #555 !important; | |
− | + | ||
} | } | ||
+ | |||
+ | form ::-webkit-input-placeholder { | ||
+ | color: #555 !important; | ||
+ | } | ||
+ | |||
+ | form :-moz-placeholder { | ||
+ | color: #555 !important; | ||
+ | } | ||
+ | |||
+ | form ::-moz-placeholder { | ||
+ | color: #555 !important; | ||
+ | } | ||
+ | |||
+ | form :-ms-input-placeholder { | ||
+ | color: #555 !important; | ||
+ | } | ||
+ | |||
+ | form ::-moz-focus-inner { | ||
+ | border: 0; | ||
+ | } | ||
+ | |||
+ | /* Table */ | ||
table { | table { | ||
Line 2,407: | Line 2,079: | ||
table.default tbody tr { | table.default tbody tr { | ||
− | border- | + | border-top: solid 1px #e5e5e5; |
} | } | ||
− | table.default tbody tr:nth-child(2n | + | table.default tbody tr:first-child { |
− | background: | + | border-top: 0; |
+ | } | ||
+ | |||
+ | table.default tbody tr:nth-child(2n+1) { | ||
+ | background: #fafafa; | ||
} | } | ||
Line 2,419: | Line 2,095: | ||
table.default th { | table.default th { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
text-align: left; | text-align: left; | ||
− | + | font-weight: 400; | |
+ | padding: 0.5em 1em 0.5em 1em; | ||
} | } | ||
table.default thead { | table.default thead { | ||
− | border-bottom: solid | + | border-bottom: solid 2px #e5e5e5; |
+ | } | ||
+ | |||
+ | table.default tfoot { | ||
+ | border-top: solid 2px #e5e5e5; | ||
} | } | ||
/* Button */ | /* Button */ | ||
+ | input[type="button"], | ||
input[type="submit"], | input[type="submit"], | ||
input[type="reset"], | input[type="reset"], | ||
− | + | button, | |
.button { | .button { | ||
− | + | position: relative; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
display: inline-block; | display: inline-block; | ||
− | + | background: #df7366; | |
− | + | color: #fff; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
text-align: center; | text-align: center; | ||
+ | border-radius: 0.5em; | ||
text-decoration: none; | text-decoration: none; | ||
− | + | padding: 0.65em 3em 0.65em 3em; | |
+ | border: 0; | ||
+ | cursor: pointer; | ||
+ | outline: 0; | ||
+ | font-weight: 300; | ||
+ | -moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | ||
+ | -webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | ||
+ | -ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | ||
+ | transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; | ||
} | } | ||
+ | input[type="button"]:hover, | ||
input[type="submit"]:hover, | input[type="submit"]:hover, | ||
input[type="reset"]:hover, | input[type="reset"]:hover, | ||
− | + | button:hover, | |
.button:hover { | .button:hover { | ||
− | + | color: #fff; | |
− | + | background: #ef8376; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | background: # | + | |
} | } | ||
+ | input[type="button"].alt, | ||
input[type="submit"].alt, | input[type="submit"].alt, | ||
input[type="reset"].alt, | input[type="reset"].alt, | ||
− | + | button.alt, | |
.button.alt { | .button.alt { | ||
− | background | + | background: #2B252C; |
− | + | ||
− | + | ||
} | } | ||
+ | input[type="button"].alt:hover, | ||
input[type="submit"].alt:hover, | input[type="submit"].alt:hover, | ||
input[type="reset"].alt:hover, | input[type="reset"].alt:hover, | ||
− | + | button.alt:hover, | |
.button.alt:hover { | .button.alt:hover { | ||
− | background: | + | background: #3B353C; |
} | } | ||
− | + | /* Post */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | /* | + | |
− | . | + | .post.stub { |
− | + | text-align: center; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .post.stub header { |
− | + | margin: 0; | |
− | + | ||
− | + | ||
} | } | ||
− | /* | + | /* Icons */ |
− | . | + | .icon { |
− | + | text-decoration: none; | |
− | + | ||
} | } | ||
− | . | + | .icon:before { |
− | + | display: inline-block; | |
− | + | font-family: FontAwesome; | |
− | + | font-size: 1.25em; | |
+ | text-decoration: none; | ||
+ | font-style: normal; | ||
+ | font-weight: normal; | ||
+ | line-height: 1; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
} | } | ||
− | . | + | .icon > .label { |
− | + | display: none; | |
} | } | ||
− | . | + | .icon.circled { |
− | + | ||
− | + | ||
− | + | ||
position: relative; | position: relative; | ||
− | + | display: inline-block; | |
+ | background: #2b252c; | ||
+ | color: #fff; | ||
+ | border-radius: 100%; | ||
+ | width: 3em; | ||
+ | height: 3em; | ||
+ | line-height: 3.25em; | ||
+ | text-align: center; | ||
+ | font-size: 1.25em; | ||
} | } | ||
− | . | + | header .icon.circled { |
− | + | margin: 0 0 2em 0; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | /* Wrapper */ | |
− | background: | + | |
+ | .wrapper { | ||
+ | background: #fff; | ||
+ | margin: 0 0 2em 0; | ||
+ | padding: 6em 0 6em 0; | ||
+ | } | ||
+ | |||
+ | .wrapper.style2 { | ||
+ | padding-top: 0; | ||
+ | } | ||
+ | |||
+ | /* Header */ | ||
+ | |||
+ | #header { | ||
+ | position: relative; | ||
+ | background-image: url("../../images/header.jpg"); | ||
+ | background-size: cover; | ||
+ | background-position: center center; | ||
+ | background-attachment: fixed; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | padding: 7.5em 0 2em 0; | ||
+ | cursor: default; | ||
+ | } | ||
+ | |||
+ | #header:before { | ||
content: ''; | content: ''; | ||
display: inline-block; | display: inline-block; | ||
− | |||
vertical-align: middle; | vertical-align: middle; | ||
+ | height: 100%; | ||
} | } | ||
− | . | + | #header .inner { |
+ | position: relative; | ||
+ | z-index: 1; | ||
+ | margin: 0; | ||
display: inline-block; | display: inline-block; | ||
− | |||
vertical-align: middle; | vertical-align: middle; | ||
− | |||
} | } | ||
− | + | #header header { | |
− | + | display: inline-block; | |
− | + | } | |
− | . | + | #header header > p { |
+ | font-size: 1.25em; | ||
margin: 0; | margin: 0; | ||
} | } | ||
− | + | #header h1 { | |
− | + | color: #fff; | |
+ | font-size: 3em; | ||
+ | line-height: 1em; | ||
} | } | ||
− | + | #header h1 a { | |
− | + | color: inherit; | |
} | } | ||
− | + | #header .button { | |
− | + | display: inline-block; | |
− | + | border-radius: 100%; | |
− | + | width: 4.5em; | |
− | + | height: 4.5em; | |
− | . | + | line-height: 4.5em; |
− | + | text-align: center; | |
− | + | font-size: 1.25em; | |
+ | padding: 0; | ||
+ | } | ||
− | . | + | #header hr { |
− | + | top: 1.5em; | |
+ | margin-bottom: 3em; | ||
+ | border-bottom-color: rgba(192, 192, 192, 0.35); | ||
+ | box-shadow: inset 0 1px 0 0 rgba(192, 192, 192, 0.35); | ||
} | } | ||
− | + | #header hr:before, #header hr:after { | |
− | + | background: rgba(192, 192, 192, 0.35); | |
} | } | ||
− | + | #header footer { | |
− | + | margin: 1em 0 0 0; | |
− | + | } | |
− | + | ||
− | + | body.homepage #header { | |
− | + | height: 100vh; | |
− | + | min-height: 40em; | |
+ | } | ||
− | . | + | body.homepage #header h1 { |
− | + | font-size: 4em; | |
} | } | ||
− | + | body.homepage #header:after { | |
+ | content: ''; | ||
+ | background: #1C0920; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | opacity: 0; | ||
+ | -moz-transition: opacity 2.5s ease-in-out; | ||
+ | -webkit-transition: opacity 2.5s ease-in-out; | ||
+ | -ms-transition: opacity 2.5s ease-in-out; | ||
+ | transition: opacity 2.5s ease-in-out; | ||
+ | -moz-transition-delay: 0.5s; | ||
+ | -webkit-transition-delay: 0.5s; | ||
+ | -ms-transition-delay: 0.5s; | ||
+ | transition-delay: 0.5s; | ||
+ | } | ||
− | #header { | + | body.homepage.is-loading #header:after { |
− | + | opacity: 1; | |
− | + | } | |
− | + | ||
− | + | /* Nav */ | |
− | + | ||
− | + | #nav { | |
− | + | position: absolute; | |
− | + | top: 0; | |
+ | left: 0; | ||
+ | width: 100%; | ||
text-align: center; | text-align: center; | ||
+ | padding: 1.5em 0 1.5em 0; | ||
+ | z-index: 1; | ||
+ | overflow: hidden; | ||
} | } | ||
− | # | + | #nav > ul { |
− | + | line-height: 0px; | |
− | + | position: relative; | |
− | + | display: inline-block; | |
− | + | margin: 0; | |
− | + | height: 21px; | |
− | + | border-left: solid 1px rgba(192, 192, 192, 0.35); | |
+ | border-right: solid 1px rgba(192, 192, 192, 0.35); | ||
} | } | ||
− | + | #nav > ul:before, #nav > ul:after { | |
− | + | content: ''; | |
− | + | display: block; | |
− | + | width: 300%; | |
− | + | position: absolute; | |
+ | top: 50%; | ||
+ | margin-top: -2px; | ||
+ | height: 5px; | ||
+ | border-top: solid 1px rgba(192, 192, 192, 0.35); | ||
+ | border-bottom: solid 1px rgba(192, 192, 192, 0.35); | ||
+ | } | ||
− | + | #nav > ul:before { | |
− | + | left: 100%; | |
− | + | margin-left: 1px; | |
− | + | } | |
− | + | #nav > ul:after { | |
− | + | right: 100%; | |
− | + | margin-right: 1px; | |
− | + | } | |
− | # | + | #nav > ul > li { |
− | border- | + | display: inline-block; |
− | color: | + | margin: -9px 0.5em 0 0.5em; |
+ | border-radius: 0.5em; | ||
+ | padding: 0.85em; | ||
+ | border: solid 1px transparent; | ||
+ | -moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out; | ||
+ | -webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out; | ||
+ | -ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out; | ||
+ | transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out; | ||
} | } | ||
− | + | #nav > ul > li.active { | |
− | + | border-color: rgba(192, 192, 192, 0.35); | |
− | + | } | |
− | + | #nav > ul > li > a, #nav > ul > li > span { | |
− | + | display: block; | |
− | + | color: inherit; | |
+ | text-decoration: none; | ||
+ | border: 0; | ||
+ | outline: 0; | ||
+ | } | ||
− | + | #nav > ul > li > ul { | |
− | + | display: none; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .dropotron { | |
− | + | background: rgba(255, 255, 255, 0.975); | |
− | + | padding: 1em 1.25em 1em 1.25em; | |
− | + | line-height: 1em; | |
− | + | height: auto; | |
− | + | text-align: left; | |
− | + | border-radius: 0.5em; | |
− | + | box-shadow: 0 0.15em 0.25em 0 rgba(0, 0, 0, 0.25); | |
− | + | min-width: 12em; | |
− | + | margin-top: -1em; | |
− | + | } | |
− | + | ||
+ | .dropotron li { | ||
+ | border-top: solid 1px rgba(128, 128, 128, 0.2); | ||
+ | color: #5b5b5b; | ||
} | } | ||
− | + | .dropotron li:first-child { | |
− | + | border-top: 0; | |
− | + | ||
} | } | ||
− | + | .dropotron li:hover { | |
− | + | color: #ef8376; | |
− | + | } | |
− | + | ||
− | + | .dropotron li a, .dropotron li span { | |
− | + | display: block; | |
− | + | border: 0; | |
− | + | padding: 0.5em 0 0.5em 0; | |
+ | -moz-transition: color 0.35s ease-in-out; | ||
+ | -webkit-transition: color 0.35s ease-in-out; | ||
+ | -ms-transition: color 0.35s ease-in-out; | ||
+ | transition: color 0.35s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .dropotron.level-0 { | ||
+ | margin-top: 2em; | ||
+ | font-size: 0.9em; | ||
} | } | ||
− | + | .dropotron.level-0:before { | |
+ | content: ''; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: -0.7em; | ||
+ | margin-left: -0.75em; | ||
+ | border-bottom: solid 0.75em rgba(255, 255, 255, 0.975); | ||
+ | border-left: solid 0.75em rgba(64, 64, 64, 0); | ||
+ | border-right: solid 0.75em rgba(64, 64, 64, 0); | ||
+ | } | ||
− | + | /* Banner */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #banner { | |
− | + | background: #fff; | |
− | + | ||
text-align: center; | text-align: center; | ||
+ | padding: 4.5em 0 4.5em 0; | ||
+ | margin-bottom: 0; | ||
} | } | ||
− | # | + | #banner header > p { |
− | + | margin-bottom: 0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | /* Content */ | |
− | + | ||
− | + | ||
− | + | #content > hr { | |
− | + | top: 3em; | |
− | } | + | margin-bottom: 6em; |
+ | } | ||
− | + | #content > section { | |
− | + | margin-bottom: 0; | |
− | + | } | |
− | # | + | /* Sidebar */ |
− | + | ||
+ | #sidebar > hr { | ||
+ | top: 3em; | ||
+ | margin-bottom: 6em; | ||
+ | } | ||
+ | |||
+ | #sidebar > hr.first { | ||
+ | display: none; | ||
} | } | ||
− | + | #sidebar > section { | |
− | + | margin-bottom: 0; | |
− | + | } | |
− | + | ||
− | + | /* Main */ | |
− | + | ||
− | + | #main { | |
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | #main section:first-of-type { | ||
+ | padding-top: 2em; | ||
} | } | ||
− | + | /* Footer */ | |
− | + | ||
− | + | #footer { | |
− | + | position: relative; | |
− | + | overflow: hidden; | |
− | + | padding: 6em 0 6em 0; | |
− | + | background: #2b252c; | |
+ | color: #fff; | ||
+ | } | ||
− | #footer | + | #footer .icon.circled { |
− | + | background: #fff; | |
− | + | color: #2b252c; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | #footer | + | #footer header { |
− | + | text-align: center; | |
+ | cursor: default; | ||
} | } | ||
− | #footer | + | #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 { |
− | + | color: #fff; | |
} | } | ||
+ | |||
+ | #footer .contact { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #footer .contact p { | ||
+ | text-align: center; | ||
+ | margin: 0 0 3em 0; | ||
+ | } | ||
#footer .copyright { | #footer .copyright { | ||
− | color: rgba( | + | text-align: center; |
+ | color: rgba(128, 128, 128, 0.75); | ||
font-size: 0.8em; | font-size: 0.8em; | ||
− | + | cursor: default; | |
− | + | ||
} | } | ||
− | #footer .copyright | + | #footer .copyright a { |
− | + | color: rgba(128, 128, 128, 0.75); | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | #footer .copyright | + | #footer .copyright a:hover { |
− | + | color: rgba(212, 212, 212, 0.85); | |
− | + | ||
− | + | ||
} | } | ||
− | + | /* Carousel */ | |
− | + | ||
− | + | ||
− | + | .carousel { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
position: relative; | position: relative; | ||
− | + | overflow: hidden; | |
+ | padding: 2em 0 2em 0; | ||
+ | margin-bottom: 0; | ||
} | } | ||
− | + | .carousel .forward, .carousel .backward { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
position: absolute; | position: absolute; | ||
− | top: | + | top: 50%; |
− | width: | + | width: 6em; |
− | + | height: 12em; | |
+ | margin-top: -6em; | ||
+ | cursor: pointer; | ||
} | } | ||
− | + | .carousel .forward:before, .carousel .backward:before { | |
− | + | content: ''; | |
− | + | display: block; | |
− | + | width: 6em; | |
+ | height: 6em; | ||
+ | border-radius: 100%; | ||
+ | background-color: rgba(72, 57, 73, 0.5); | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | margin-top: -3em; | ||
+ | -moz-transition: background-color 0.35s ease-in-out; | ||
+ | -webkit-transition: background-color 0.35s ease-in-out; | ||
+ | -o-transition: background-color 0.35s ease-in-out; | ||
+ | -ms-transition: background-color 0.35s ease-in-out; | ||
+ | transition: background-color 0.35s ease-in-out; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | } | ||
− | / | + | .carousel .forward:after, .carousel .backward:after { |
+ | content: ''; | ||
+ | width: 3em; | ||
+ | height: 3em; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | margin: -1.5em 0 0 0; | ||
+ | background: url("images/arrow.svg") no-repeat center center; | ||
+ | } | ||
− | + | .carousel .forward:hover:before, .carousel .backward:hover:before { | |
+ | background-color: rgba(239, 131, 118, 0.75); | ||
+ | } | ||
− | + | .carousel .forward { | |
+ | right: 0; | ||
+ | } | ||
− | + | .carousel .forward:before { | |
− | + | right: -3em; | |
} | } | ||
− | + | .carousel .forward:after { | |
− | + | right: -0.25em; | |
} | } | ||
− | + | .carousel .backward { | |
− | + | left: 0; | |
+ | } | ||
+ | |||
+ | .carousel .backward:before { | ||
+ | left: -3em; | ||
} | } | ||
− | + | .carousel .backward:after { | |
− | + | left: -0.25em; | |
− | + | -moz-transform: scaleX(-1); | |
− | + | -webkit-transform: scaleX(-1); | |
+ | -ms-transform: scaleX(-1); | ||
+ | transform: scaleX(-1); | ||
} | } | ||
− | + | .carousel .reel { | |
+ | white-space: nowrap; | ||
+ | position: relative; | ||
+ | -webkit-overflow-scrolling: touch; | ||
+ | padding: 0 2em 0 2em; | ||
+ | } | ||
− | # | + | .carousel article { |
− | + | display: inline-block; | |
+ | width: 18em; | ||
+ | background: #fff; | ||
+ | text-align: center; | ||
+ | padding: 0 1em 3em 1em; | ||
+ | margin: 0 2em 0 0; | ||
+ | white-space: normal; | ||
+ | opacity: 1.0; | ||
+ | -moz-transition: opacity 0.75s ease-in-out; | ||
+ | -webkit-transition: opacity 0.75s ease-in-out; | ||
+ | -ms-transition: opacity 0.75s ease-in-out; | ||
+ | transition: opacity 0.75s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .carousel article.loading { | ||
+ | opacity: 0; | ||
} | } | ||
− | + | .carousel article .image { | |
− | + | position: relative; | |
− | } | + | left: -1em; |
+ | top: 0; | ||
+ | width: auto; | ||
+ | margin-right: -2em; | ||
+ | margin-bottom: 3em; | ||
+ | } | ||
− | + | .carousel article p { | |
− | + | text-align: center; | |
− | + | } | |
− | + | ||
− | + | /* Wide */ | |
− | + | @media screen and (max-width: 1680px) { | |
− | + | ||
− | @media screen and (max-width: | + | |
/* Basic */ | /* Basic */ | ||
− | body, input | + | body, input, textarea, select { |
− | font-size: | + | font-size: 14pt; |
+ | line-height: 1.75em; | ||
} | } | ||
− | + | /* Carousel */ | |
− | + | ||
− | + | ||
− | + | .carousel { | |
− | + | padding: 1.5em 0 1.5em 0; | |
} | } | ||
− | + | .carousel .reel { | |
+ | padding: 0 1.5em 0 1.5em; | ||
+ | } | ||
− | + | .carousel article { | |
− | + | width: 18em; | |
− | + | margin: 0 1.25em 0 0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | /* Normal */ | |
− | + | @media screen and (max-width: 1280px) { | |
− | + | ||
− | + | ||
− | + | ||
− | /* | + | /* Basic */ |
− | + | body, input, textarea, select { | |
− | height: | + | font-size: 12pt; |
+ | line-height: 1.5em; | ||
} | } | ||
− | + | /* Wrapper */ | |
− | + | ||
− | } | + | .wrapper { |
+ | padding-left: 2em; | ||
+ | padding-right: 2em; | ||
+ | } | ||
/* Header */ | /* Header */ | ||
#header { | #header { | ||
− | background-attachment: | + | background-attachment: scroll; |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | #header | + | #header .inner { |
− | + | padding-left: 2em; | |
+ | padding-right: 2em; | ||
} | } | ||
− | + | /* Banner */ | |
− | + | ||
− | + | ||
− | + | #banner { | |
− | + | padding-left: 2em; | |
− | + | padding-right: 2em; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
/* Footer */ | /* Footer */ | ||
#footer { | #footer { | ||
− | + | padding-left: 2em; | |
− | + | padding-right: 2em; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 2,987: | Line 2,739: | ||
/* Narrow */ | /* Narrow */ | ||
− | @media screen and (max-width: | + | /* Narrower */ |
+ | |||
+ | @media screen and (max-width: 840px) { | ||
/* Basic */ | /* Basic */ | ||
− | body, input | + | body, input, textarea, select { |
− | font-size: | + | font-size: 13pt; |
+ | line-height: 1.65em; | ||
} | } | ||
− | + | .tweet { | |
+ | text-align: center; | ||
+ | } | ||
− | + | .timestamp { | |
+ | display: block; | ||
+ | text-align: center; | ||
+ | } | ||
− | + | /* Footer */ | |
− | + | #footer { | |
− | + | padding: 4em 2em 4em 2em; | |
− | + | ||
− | padding | + | |
− | + | ||
} | } | ||
− | + | /* Carousel */ | |
− | padding | + | |
− | + | .carousel { | |
+ | padding: 1.25em 0 1.25em 0; | ||
} | } | ||
+ | |||
+ | .carousel article { | ||
+ | width: 18em; | ||
+ | margin: 0 1em 0 0; | ||
+ | } | ||
} | } | ||
/* Mobile */ | /* Mobile */ | ||
+ | |||
+ | #navPanel, #titleBar { | ||
+ | display: none; | ||
+ | } | ||
@media screen and (max-width: 736px) { | @media screen and (max-width: 736px) { | ||
/* Basic */ | /* Basic */ | ||
+ | |||
+ | html, body { | ||
+ | overflow-x: hidden; | ||
+ | } | ||
+ | |||
+ | body, input, textarea, select { | ||
+ | font-size: 12.5pt; | ||
+ | line-height: 1.5em; | ||
+ | } | ||
h2 { | h2 { | ||
− | font-size: | + | font-size: 1.75em; |
} | } | ||
h3 { | h3 { | ||
− | font-size: | + | font-size: 1.25em; |
+ | } | ||
+ | |||
+ | hr { | ||
+ | top: 3em; | ||
+ | margin-bottom: 6em; | ||
} | } | ||
/* Section/Article */ | /* Section/Article */ | ||
− | + | section, article { | |
− | + | margin-bottom: 2em; | |
} | } | ||
− | + | section:last-child, article:last-child { | |
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | .row > section, .row > article { | ||
margin-bottom: 2em; | margin-bottom: 2em; | ||
} | } | ||
− | + | header > p { | |
− | + | font-size: 1.25em; | |
− | + | } | |
− | + | /* Image */ | |
− | + | ||
− | + | ||
− | + | .image.featured { | |
− | margin | + | margin: 0 0 2em 0; |
} | } | ||
− | + | .image.left { | |
− | + | margin: 0 1em 1em 0; | |
− | } | + | } |
+ | |||
+ | .image.centered { | ||
+ | margin: 0 0 1em 0; | ||
+ | } | ||
/* List */ | /* List */ | ||
+ | |||
+ | form ul.actions { | ||
+ | margin-top: 0; | ||
+ | } | ||
ul.actions li { | ul.actions li { | ||
− | + | display: block; | |
+ | margin: 0.75em 0 0 0; | ||
} | } | ||
− | + | ul.actions li:first-child { | |
− | + | margin-top: 0; | |
+ | } | ||
+ | |||
+ | ul.menu { | ||
+ | height: auto; | ||
+ | text-align: center; | ||
} | } | ||
− | + | ul.menu li { | |
+ | display: block; | ||
+ | border: 0; | ||
+ | padding: 0.75em 0 0 0; | ||
+ | margin: 0; | ||
+ | } | ||
− | + | ul.menu li:first-child { | |
− | + | padding-top: 0; | |
− | + | } | |
+ | |||
+ | ul.icons { | ||
+ | font-size: 1em; | ||
+ | padding: 0.35em 0.5em 0.35em 0.5em; | ||
} | } | ||
− | + | ul.icons li a { | |
+ | width: 2.25em; | ||
+ | } | ||
− | . | + | /* Button */ |
− | + | ||
+ | input[type="button"], | ||
+ | input[type="submit"], | ||
+ | input[type="reset"], | ||
+ | button, | ||
+ | .button { | ||
display: block; | display: block; | ||
− | + | padding: 0; | |
− | + | line-height: 3em; | |
+ | width: 100%; | ||
} | } | ||
− | + | /* Off-Canvas Navigation */ | |
− | + | ||
− | + | ||
− | . | + | #page-wrapper { |
− | + | -moz-backface-visibility: hidden; | |
− | } | + | -webkit-backface-visibility: hidden; |
+ | -ms-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | -moz-transition: -moz-transform 0.5s ease; | ||
+ | -webkit-transition: -webkit-transform 0.5s ease; | ||
+ | -ms-transition: -ms-transform 0.5s ease; | ||
+ | transition: transform 0.5s ease; | ||
+ | padding-bottom: 1px; | ||
+ | } | ||
− | . | + | #navButton { |
− | + | -moz-backface-visibility: hidden; | |
− | + | -webkit-backface-visibility: hidden; | |
− | + | -ms-backface-visibility: hidden; | |
− | } | + | backface-visibility: hidden; |
+ | -moz-transition: -moz-transform 0.5s ease; | ||
+ | -webkit-transition: -webkit-transform 0.5s ease; | ||
+ | -ms-transition: -ms-transform 0.5s ease; | ||
+ | transition: transform 0.5s ease; | ||
+ | display: block; | ||
+ | height: 44px; | ||
+ | left: 0; | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | z-index: 10001; | ||
+ | } | ||
− | . | + | #navButton .toggle { |
− | + | position: absolute; | |
− | + | left: 0; | |
− | + | top: 0; | |
width: 100%; | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 0; | ||
+ | outline: 0; | ||
} | } | ||
− | + | #navButton .toggle:before { | |
+ | font-family: FontAwesome; | ||
+ | text-decoration: none; | ||
+ | font-style: normal; | ||
+ | font-weight: normal; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | content: '\f0c9'; | ||
+ | color: #fff; | ||
+ | color: rgba(255, 255, 255, 0.75); | ||
+ | text-align: center; | ||
+ | display: block; | ||
+ | font-size: 14px; | ||
+ | width: 80px; | ||
+ | height: 30px; | ||
+ | line-height: 30px; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | margin-left: -40px; | ||
+ | background: rgba(132, 128, 136, 0.75); | ||
+ | border-top: 0; | ||
+ | border-radius: 0 0 0.35em 0.35em; | ||
+ | } | ||
− | # | + | #navPanel { |
− | + | -moz-backface-visibility: hidden; | |
− | + | -webkit-backface-visibility: hidden; | |
− | + | -ms-backface-visibility: hidden; | |
+ | backface-visibility: hidden; | ||
+ | -moz-transform: translateY(-50vh); | ||
+ | -webkit-transform: translateY(-50vh); | ||
+ | -ms-transform: translateY(-50vh); | ||
+ | transform: translateY(-50vh); | ||
+ | -moz-transition: -moz-transform 0.5s ease; | ||
+ | -webkit-transition: -webkit-transform 0.5s ease; | ||
+ | -ms-transition: -ms-transform 0.5s ease; | ||
+ | transition: transform 0.5s ease; | ||
+ | display: block; | ||
+ | height: 50vh; | ||
+ | left: 0; | ||
+ | overflow-y: auto; | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | z-index: 10002; | ||
+ | background: #1f1920; | ||
+ | box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.25); | ||
+ | font-size: 1em; | ||
} | } | ||
− | # | + | #navPanel:before { |
− | height: | + | content: ''; |
+ | display: block; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background: url("images/overlay.png"); | ||
+ | background-size: 128px 128px; | ||
} | } | ||
− | # | + | #navPanel .link { |
− | + | position: relative; | |
+ | z-index: 1; | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | padding: 0.5em; | ||
+ | color: #ddd; | ||
+ | border: 0; | ||
+ | border-top: dotted 1px rgba(255, 255, 255, 0.05); | ||
} | } | ||
− | + | #navPanel .link:first-child { | |
− | font- | + | border-top: 0; |
+ | } | ||
+ | |||
+ | #navPanel .link.depth-0 { | ||
+ | color: #fff; | ||
+ | font-weight: 600; | ||
+ | } | ||
+ | |||
+ | #navPanel .indent-1 { | ||
+ | display: inline-block; | ||
+ | width: 1em; | ||
} | } | ||
− | # | + | #navPanel .indent-2 { |
− | + | display: inline-block; | |
+ | width: 2em; | ||
} | } | ||
− | # | + | #navPanel .indent-3 { |
− | + | display: inline-block; | |
+ | width: 3em; | ||
} | } | ||
− | + | #navPanel .indent-4 { | |
+ | display: inline-block; | ||
+ | width: 4em; | ||
+ | } | ||
− | + | #navPanel .indent-5 { | |
− | + | display: inline-block; | |
− | + | width: 5em; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | # | + | #navPanel .depth-0 { |
− | + | color: #fff; | |
} | } | ||
− | + | body.navPanel-visible #page-wrapper { | |
+ | -moz-transform: translateY(50vh); | ||
+ | -webkit-transform: translateY(50vh); | ||
+ | -ms-transform: translateY(50vh); | ||
+ | transform: translateY(50vh); | ||
+ | } | ||
− | # | + | body.navPanel-visible #navButton { |
− | + | -moz-transform: translateY(50vh); | |
+ | -webkit-transform: translateY(50vh); | ||
+ | -ms-transform: translateY(50vh); | ||
+ | transform: translateY(50vh); | ||
} | } | ||
− | + | body.navPanel-visible #navPanel { | |
+ | -moz-transform: translateY(0); | ||
+ | -webkit-transform: translateY(0); | ||
+ | -ms-transform: translateY(0); | ||
+ | transform: translateY(0); | ||
+ | } | ||
− | /* | + | /* Wrapper */ |
− | + | .wrapper { | |
+ | padding: 3em 1em 3em 1em; | ||
+ | } | ||
− | /* | + | /* Header */ |
− | header | + | #header { |
− | + | background-attachment: scroll; | |
− | padding | + | padding: 2.5em 0 0 0; |
} | } | ||
− | + | #header .inner { | |
− | + | padding-top: 1.5em; | |
− | + | padding-left: 1em; | |
− | + | padding-right: 1em; | |
+ | } | ||
− | + | #header header > p { | |
+ | font-size: 1em; | ||
+ | } | ||
− | + | #header h1 { | |
− | + | font-size: 1.75em; | |
− | + | } | |
− | + | #header hr { | |
− | + | top: 1em; | |
− | padding: | + | margin-bottom: 2.5em; |
+ | } | ||
+ | |||
+ | body.homepage #header { | ||
+ | min-height: 0; | ||
+ | padding: 5.5em 0 5em 0; | ||
+ | height: auto; | ||
} | } | ||
− | + | body.homepage #header:before { | |
− | + | display: none; | |
} | } | ||
− | /* | + | body.homepage #header h1 { |
+ | font-size: 2.5em; | ||
+ | } | ||
+ | |||
+ | /* Nav */ | ||
− | + | #nav { | |
− | + | display: none; | |
− | + | ||
− | + | ||
− | display: | + | |
− | + | ||
} | } | ||
− | /* | + | /* Banner */ |
− | + | #banner { | |
− | padding: 2em | + | padding: 3em 2em 3em 2em; |
} | } | ||
− | /* | + | /* Sidebar */ |
− | + | #sidebar > hr:first-of-type { | |
− | + | display: block; | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
/* Main */ | /* Main */ | ||
− | #main { | + | #main > header { |
− | + | text-align: center; | |
− | + | ||
} | } | ||
Line 3,222: | Line 3,142: | ||
#footer { | #footer { | ||
− | |||
padding-left: 1em; | padding-left: 1em; | ||
padding-right: 1em; | padding-right: 1em; | ||
} | } | ||
− | + | /* Carousel */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .carousel { | |
− | + | padding: 0.5em 0 0.5em 0; | |
− | + | ||
− | padding | + | |
− | + | ||
} | } | ||
− | + | .carousel .reel { | |
− | + | padding: 0 0.5em 0 0.5em; | |
+ | } | ||
+ | |||
+ | .carousel article { | ||
+ | width: 14em; | ||
+ | padding-bottom: 2em; | ||
+ | margin: 0 0.5em 0 0; | ||
} | } | ||
+ | |||
+ | .carousel article .image { | ||
+ | margin-bottom: 2em; | ||
+ | } | ||
} | } | ||
+ | / | ||
</style> | </style> |
Revision as of 08:06, 25 July 2017