Difference between revisions of "Template:BIOSINT Mexico"
| (170 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | |||
<style> | <style> | ||
| + | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900"); | ||
| + | /* 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, hgroup, menu, output, ruby, section, summary, time, mark, audio, video { | 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, hgroup, menu, output, ruby, section, summary, time, mark, audio, video { | ||
margin: 0; | margin: 0; | ||
| Line 11: | Line 13: | ||
vertical-align: baseline; | 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 { | ||
display: block; | display: block; | ||
} | } | ||
| − | + | ||
body { | body { | ||
line-height: 1; | line-height: 1; | ||
} | } | ||
| − | + | ||
ol, ul { | ol, ul { | ||
list-style: none; | list-style: none; | ||
} | } | ||
| − | + | ||
blockquote, q { | blockquote, q { | ||
quotes: none; | quotes: none; | ||
} | } | ||
| − | + | ||
blockquote:before, blockquote:after, q:before, q:after { | blockquote:before, blockquote:after, q:before, q:after { | ||
content: ''; | content: ''; | ||
content: none; | content: none; | ||
} | } | ||
| − | + | ||
table { | table { | ||
border-collapse: collapse; | border-collapse: collapse; | ||
border-spacing: 0; | border-spacing: 0; | ||
} | } | ||
| − | + | ||
body { | body { | ||
-webkit-text-size-adjust: none; | -webkit-text-size-adjust: none; | ||
} | } | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
/* Basic */ | /* Basic */ | ||
| − | + | ||
@-ms-viewport { | @-ms-viewport { | ||
width: device-width; | width: device-width; | ||
} | } | ||
| − | + | ||
body { | body { | ||
-ms-overflow-style: scrollbar; | -ms-overflow-style: scrollbar; | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 480px) { | @media screen and (max-width: 480px) { | ||
| − | + | ||
html, body { | html, body { | ||
min-width: 320px; | min-width: 320px; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
body { | body { | ||
| − | background: # | + | background: #ffffff; |
} | } | ||
| − | + | ||
body.is-loading *, body.is-loading *:before, body.is-loading *:after { | body.is-loading *, body.is-loading *:before, body.is-loading *:after { | ||
-moz-animation: none !important; | -moz-animation: none !important; | ||
| Line 82: | Line 77: | ||
transition: none !important; | transition: none !important; | ||
} | } | ||
| − | + | ||
/* Type */ | /* Type */ | ||
| − | + | ||
body, input, select, textarea { | body, input, select, textarea { | ||
color: #646464; | color: #646464; | ||
| Line 92: | Line 87: | ||
line-height: 1.75; | line-height: 1.75; | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 1680px) { | @media screen and (max-width: 1680px) { | ||
| − | + | ||
body, input, select, textarea { | body, input, select, textarea { | ||
font-size: 12pt; | font-size: 12pt; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 1280px) { | @media screen and (max-width: 1280px) { | ||
| − | + | ||
body, input, select, textarea { | body, input, select, textarea { | ||
font-size: 12pt; | font-size: 12pt; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 980px) { | @media screen and (max-width: 980px) { | ||
| − | + | ||
body, input, select, textarea { | body, input, select, textarea { | ||
font-size: 12pt; | font-size: 12pt; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 736px) { | @media screen and (max-width: 736px) { | ||
| − | + | ||
body, input, select, textarea { | body, input, select, textarea { | ||
font-size: 12pt; | font-size: 12pt; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 480px) { | @media screen and (max-width: 480px) { | ||
| − | + | ||
body, input, select, textarea { | body, input, select, textarea { | ||
font-size: 12pt; | font-size: 12pt; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
a { | a { | ||
-moz-transition: color 0.2s ease, border-bottom-color 0.2s ease; | -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease; | ||
| Line 142: | Line 137: | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| − | + | ||
a:before { | a:before { | ||
-moz-transition: color 0.2s ease; | -moz-transition: color 0.2s ease; | ||
| Line 149: | Line 144: | ||
transition: color 0.2s ease; | transition: color 0.2s ease; | ||
} | } | ||
| − | + | ||
a:hover { | a:hover { | ||
border-bottom-color: transparent; | border-bottom-color: transparent; | ||
color: #2ebaae !important; | color: #2ebaae !important; | ||
} | } | ||
| − | + | ||
a:hover:before { | a:hover:before { | ||
color: #2ebaae !important; | color: #2ebaae !important; | ||
} | } | ||
| − | + | ||
strong, b { | strong, b { | ||
color: #3c3b3b; | color: #3c3b3b; | ||
font-weight: 700; | font-weight: 700; | ||
} | } | ||
| − | + | ||
em, i { | em, i { | ||
font-style: italic; | font-style: italic; | ||
} | } | ||
| − | + | ||
p { | p { | ||
margin: 0 0 2em 0; | margin: 0 0 2em 0; | ||
} | } | ||
| − | + | ||
h1, h2, h3, h4, h5, h6 { | h1, h2, h3, h4, h5, h6 { | ||
color: #3c3b3b; | color: #3c3b3b; | ||
| Line 181: | Line 176: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
| − | + | ||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { | ||
color: inherit; | color: inherit; | ||
border-bottom: 0; | border-bottom: 0; | ||
} | } | ||
| − | + | ||
h2 { | h2 { | ||
font-size: 1.1em; | font-size: 1.1em; | ||
} | } | ||
| − | + | ||
h3 { | h3 { | ||
font-size: 0.9em; | font-size: 0.9em; | ||
} | } | ||
| − | + | ||
h4 { | h4 { | ||
font-size: 0.7em; | font-size: 0.7em; | ||
} | } | ||
| − | + | ||
h5 { | h5 { | ||
font-size: 0.7em; | font-size: 0.7em; | ||
} | } | ||
| − | + | ||
h6 { | h6 { | ||
font-size: 0.7em; | font-size: 0.7em; | ||
} | } | ||
| − | + | ||
sub { | sub { | ||
font-size: 0.8em; | font-size: 0.8em; | ||
| Line 212: | Line 207: | ||
top: 0.5em; | top: 0.5em; | ||
} | } | ||
| − | + | ||
sup { | sup { | ||
font-size: 0.8em; | font-size: 0.8em; | ||
| Line 218: | Line 213: | ||
top: -0.5em; | top: -0.5em; | ||
} | } | ||
| − | + | ||
blockquote { | blockquote { | ||
border-left: solid 4px rgba(160, 160, 160, 0.3); | border-left: solid 4px rgba(160, 160, 160, 0.3); | ||
| Line 225: | Line 220: | ||
padding: 0.5em 0 0.5em 2em; | padding: 0.5em 0 0.5em 2em; | ||
} | } | ||
| − | + | ||
| + | code { | ||
| + | background: rgba(160, 160, 160, 0.075); | ||
| + | border: solid 1px rgba(160, 160, 160, 0.3); | ||
| + | font-family: "Courier New", monospace; | ||
| + | font-size: 0.9em; | ||
| + | margin: 0 0.25em; | ||
| + | padding: 0.25em 0.65em; | ||
| + | } | ||
| + | |||
pre { | pre { | ||
-webkit-overflow-scrolling: touch; | -webkit-overflow-scrolling: touch; | ||
| Line 232: | Line 236: | ||
margin: 0 0 2em 0; | margin: 0 0 2em 0; | ||
} | } | ||
| − | + | ||
pre code { | pre code { | ||
display: block; | display: block; | ||
| Line 239: | Line 243: | ||
overflow-x: auto; | overflow-x: auto; | ||
} | } | ||
| − | + | ||
hr { | hr { | ||
border: 0; | border: 0; | ||
| Line 245: | Line 249: | ||
margin: 2em 0; | margin: 2em 0; | ||
} | } | ||
| − | + | ||
hr.major { | hr.major { | ||
margin: 3em 0; | margin: 3em 0; | ||
} | } | ||
| − | + | ||
.align-left { | .align-left { | ||
text-align: left; | text-align: left; | ||
} | } | ||
| − | + | ||
.align-center { | .align-center { | ||
text-align: center; | text-align: center; | ||
} | } | ||
| − | + | ||
.align-right { | .align-right { | ||
text-align: right; | text-align: right; | ||
} | } | ||
| − | + | ||
| − | + | ||
| − | + | ||
/* Blurb */ | /* Blurb */ | ||
| − | + | ||
.blurb h2 { | .blurb h2 { | ||
font-size: 0.8em; | font-size: 0.8em; | ||
margin: 0 0 1.5em 0; | margin: 0 0 1.5em 0; | ||
} | } | ||
| − | + | ||
.blurb h3 { | .blurb h3 { | ||
font-size: 0.7em; | font-size: 0.7em; | ||
} | } | ||
| − | + | ||
.blurb p { | .blurb p { | ||
font-size: 0.9em; | font-size: 0.9em; | ||
} | } | ||
| − | + | ||
| − | + | ||
/* List */ | /* List */ | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
/* Post */ | /* Post */ | ||
| − | + | ||
.post { | .post { | ||
padding: 2em 3em 1em 3em ; | padding: 2em 3em 1em 3em ; | ||
| Line 530: | Line 297: | ||
position: relative; | position: relative; | ||
} | } | ||
| − | + | ||
.post > header { | .post > header { | ||
display: -moz-flex; | display: -moz-flex; | ||
| Line 542: | Line 309: | ||
width: calc(100% + 6em); | width: calc(100% + 6em); | ||
} | } | ||
| − | + | ||
.post > header .title { | .post > header .title { | ||
-moz-flex-grow: 1; | -moz-flex-grow: 1; | ||
| Line 551: | Line 318: | ||
padding: 3.75em 3em 3.3em 3em; | padding: 3.75em 3em 3.3em 3em; | ||
} | } | ||
| − | + | ||
.post > header .title h2 { | .post > header .title h2 { | ||
font-weight: 900; | font-weight: 900; | ||
font-size: 1.5em; | font-size: 1.5em; | ||
} | } | ||
| − | + | ||
.post > header .title > :last-child { | .post > header .title > :last-child { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
} | } | ||
| − | + | ||
.post > header .meta { | .post > header .meta { | ||
padding: 3.75em 3em 1.75em 3em ; | padding: 3.75em 3em 1.75em 3em ; | ||
| Line 568: | Line 335: | ||
width: 17em; | width: 17em; | ||
} | } | ||
| − | + | ||
.post > header .meta > * { | .post > header .meta > * { | ||
margin: 0 0 1em 0; | margin: 0 0 1em 0; | ||
} | } | ||
| − | + | ||
.post > header .meta > :last-child { | .post > header .meta > :last-child { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
} | } | ||
| − | + | ||
.post > header .meta .published { | .post > header .meta .published { | ||
color: #3c3b3b; | color: #3c3b3b; | ||
| Line 588: | Line 355: | ||
white-space: nowrap; | white-space: nowrap; | ||
} | } | ||
| − | + | ||
.post > a.image.featured { | .post > a.image.featured { | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| − | + | ||
.post > a.image.featured img { | .post > a.image.featured img { | ||
-moz-transition: -moz-transform 0.2s ease-out; | -moz-transition: -moz-transform 0.2s ease-out; | ||
| Line 599: | Line 366: | ||
transition: transform 0.2s ease-out; | transition: transform 0.2s ease-out; | ||
} | } | ||
| − | + | ||
.post > a.image.featured:hover img { | .post > a.image.featured:hover img { | ||
-moz-transform: scale(1.05); | -moz-transform: scale(1.05); | ||
| Line 606: | Line 373: | ||
transform: scale(1.05); | transform: scale(1.05); | ||
} | } | ||
| − | + | ||
.post > footer { | .post > footer { | ||
display: -moz-flex; | display: -moz-flex; | ||
| Line 617: | Line 384: | ||
align-items: center; | align-items: center; | ||
} | } | ||
| − | + | ||
.post > footer .actions { | .post > footer .actions { | ||
-moz-flex-grow: 1; | -moz-flex-grow: 1; | ||
| Line 624: | Line 391: | ||
flex-grow: 1; | flex-grow: 1; | ||
} | } | ||
| − | + | ||
.post > footer .stats { | .post > footer .stats { | ||
cursor: default; | cursor: default; | ||
| Line 630: | Line 397: | ||
padding: 0; | padding: 0; | ||
} | } | ||
| − | + | ||
.post > footer .stats li { | .post > footer .stats li { | ||
border-left: solid 1px rgba(160, 160, 160, 0.3); | border-left: solid 1px rgba(160, 160, 160, 0.3); | ||
| Line 643: | Line 410: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
| − | + | ||
.post > footer .stats li:first-child { | .post > footer .stats li:first-child { | ||
border-left: 0; | border-left: 0; | ||
| Line 649: | Line 416: | ||
padding-left: 0; | padding-left: 0; | ||
} | } | ||
| − | + | ||
.post > footer .stats li .icon { | .post > footer .stats li .icon { | ||
border-bottom: 0; | border-bottom: 0; | ||
} | } | ||
| − | + | ||
.post > footer .stats li .icon:before { | .post > footer .stats li .icon:before { | ||
color: rgba(160, 160, 160, 0.3); | color: rgba(160, 160, 160, 0.3); | ||
margin-right: 0.75em; | margin-right: 0.75em; | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 980px) { | @media screen and (max-width: 980px) { | ||
| − | + | ||
.post { | .post { | ||
| − | border-left: | + | border-left: 0; |
border-right: 0; | border-right: 0; | ||
left: -3em; | left: -3em; | ||
width: calc(100% + (3em * 2)); | width: calc(100% + (3em * 2)); | ||
} | } | ||
| − | + | ||
.post > header { | .post > header { | ||
-moz-flex-direction: column; | -moz-flex-direction: column; | ||
| Line 676: | Line 443: | ||
border-left: 0; | border-left: 0; | ||
} | } | ||
| − | + | ||
.post > header .title { | .post > header .title { | ||
-ms-flex: 0 1 auto; | -ms-flex: 0 1 auto; | ||
| Line 683: | Line 450: | ||
text-align: center; | text-align: center; | ||
} | } | ||
| − | + | ||
.post > header .meta { | .post > header .meta { | ||
-moz-align-items: center; | -moz-align-items: center; | ||
| Line 704: | Line 471: | ||
width: 100%; | width: 100%; | ||
} | } | ||
| − | + | ||
.post > header .meta > * { | .post > header .meta > * { | ||
border-left: solid 1px rgba(160, 160, 160, 0.3); | border-left: solid 1px rgba(160, 160, 160, 0.3); | ||
| Line 710: | Line 477: | ||
padding-left: 2em; | padding-left: 2em; | ||
} | } | ||
| − | + | ||
.post > header .meta > :first-child { | .post > header .meta > :first-child { | ||
border-left: 0; | border-left: 0; | ||
| Line 716: | Line 483: | ||
padding-left: 0; | padding-left: 0; | ||
} | } | ||
| − | + | ||
.post > header .meta .published { | .post > header .meta .published { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
margin-top: 0; | margin-top: 0; | ||
} | } | ||
| − | + | ||
.post > header .meta .author { | .post > header .meta .author { | ||
-moz-flex-direction: row-reverse; | -moz-flex-direction: row-reverse; | ||
| Line 729: | Line 496: | ||
margin-bottom: 0; | margin-bottom: 0; | ||
} | } | ||
| − | + | ||
.post > header .meta .author .name { | .post > header .meta .author .name { | ||
margin: 0 0 0 1.5em; | margin: 0 0 0 1.5em; | ||
} | } | ||
| − | + | ||
.post > header .meta .author img { | .post > header .meta .author img { | ||
width: 3.5em; | width: 3.5em; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 736px) { | @media screen and (max-width: 736px) { | ||
| − | + | ||
.post { | .post { | ||
padding: 1.5em 1.5em 0.1em 1.5em ; | padding: 1.5em 1.5em 0.1em 1.5em ; | ||
| Line 748: | Line 515: | ||
width: calc(100% + (1.5em * 2)); | width: calc(100% + (1.5em * 2)); | ||
} | } | ||
| − | + | ||
.post > header { | .post > header { | ||
padding: 3em 1.5em 0.5em 1.5em ; | padding: 3em 1.5em 0.5em 1.5em ; | ||
| Line 755: | Line 522: | ||
width: calc(100% + 3em); | width: calc(100% + 3em); | ||
} | } | ||
| − | + | ||
.post > header .title h2 { | .post > header .title h2 { | ||
font-size: 1.1em; | font-size: 1.1em; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 480px) { | @media screen and (max-width: 480px) { | ||
| − | + | ||
.post > header .meta { | .post > header .meta { | ||
-moz-align-items: center; | -moz-align-items: center; | ||
| Line 774: | Line 541: | ||
flex-direction: column; | flex-direction: column; | ||
} | } | ||
| − | + | ||
.post > header .meta > * { | .post > header .meta > * { | ||
border-left: 0; | border-left: 0; | ||
| Line 780: | Line 547: | ||
padding-left: 0; | padding-left: 0; | ||
} | } | ||
| − | + | ||
.post > header .meta .author .name { | .post > header .meta .author .name { | ||
display: none; | display: none; | ||
} | } | ||
| − | + | ||
.post > .image.featured { | .post > .image.featured { | ||
margin-left: -1.5em; | margin-left: -1.5em; | ||
| Line 790: | Line 557: | ||
width: calc(100% + 3em); | width: calc(100% + 3em); | ||
} | } | ||
| − | + | ||
.post > footer { | .post > footer { | ||
-moz-align-items: stretch; | -moz-align-items: stretch; | ||
| Line 801: | Line 568: | ||
flex-direction: column-reverse; | flex-direction: column-reverse; | ||
} | } | ||
| − | + | ||
.post > footer .stats { | .post > footer .stats { | ||
text-align: center; | text-align: center; | ||
} | } | ||
| − | + | ||
.post > footer .stats li { | .post > footer .stats li { | ||
margin: 0 0 0 1.25em; | margin: 0 0 0 1.25em; | ||
padding: 0 0 0 1.25em; | padding: 0 0 0 1.25em; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
/* Section/Article */ | /* Section/Article */ | ||
| − | + | ||
section.special, article.special { | section.special, article.special { | ||
text-align: center; | text-align: center; | ||
} | } | ||
| − | + | ||
header p { | header p { | ||
font-family: "Raleway", Helvetica, sans-serif; | font-family: "Raleway", Helvetica, sans-serif; | ||
| Line 828: | Line 595: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
| − | + | ||
/* --Header */ | /* --Header */ | ||
| − | + | ||
body { | body { | ||
padding-top: 3.5em; | padding-top: 3.5em; | ||
} | } | ||
| − | + | ||
#header { | #header { | ||
display: -moz-flex; | display: -moz-flex; | ||
| Line 854: | Line 621: | ||
z-index: 10000; | z-index: 10000; | ||
} | } | ||
| − | + | ||
#header a { | #header a { | ||
color: #fff; | color: #fff; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| − | + | ||
#header ul { | #header ul { | ||
list-style: none; | list-style: none; | ||
| Line 865: | Line 632: | ||
padding-left: 0; | padding-left: 0; | ||
} | } | ||
| − | + | ||
#header ul li { | #header ul li { | ||
display: inline-block; | display: inline-block; | ||
padding-left: 0; | padding-left: 0; | ||
} | } | ||
| − | + | ||
#header h1 { | #header h1 { | ||
height: inherit; | height: inherit; | ||
| Line 877: | Line 644: | ||
white-space: nowrap; | white-space: nowrap; | ||
} | } | ||
| − | + | ||
#header h1 a { | #header h1 a { | ||
font-size: 0.7em; | font-size: 0.7em; | ||
} | } | ||
| − | + | ||
#header .links { | #header .links { | ||
-moz-flex: 1; | -moz-flex: 1; | ||
| Line 894: | Line 661: | ||
padding-left: 1.5em; | padding-left: 1.5em; | ||
} | } | ||
| − | + | ||
#header .links ul li { | #header .links ul li { | ||
border-left: solid 1px rgba(160, 160, 160, 0.3); | border-left: solid 1px rgba(160, 160, 160, 0.3); | ||
| Line 901: | Line 668: | ||
padding-left: 1em; | padding-left: 1em; | ||
} | } | ||
| − | + | ||
#header .links ul li:first-child { | #header .links ul li:first-child { | ||
border-left: 0; | border-left: 0; | ||
| Line 907: | Line 674: | ||
padding-left: 0; | padding-left: 0; | ||
} | } | ||
| − | + | ||
#header .links ul li a { | #header .links ul li a { | ||
border-bottom: 0; | border-bottom: 0; | ||
| Line 916: | Line 683: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
| − | + | ||
#header .main { | #header .main { | ||
height: inherit; | height: inherit; | ||
| Line 922: | Line 689: | ||
text-align: right; | text-align: right; | ||
} | } | ||
| − | + | ||
#header .main ul { | #header .main ul { | ||
height: inherit; | height: inherit; | ||
line-height: inherit; | line-height: inherit; | ||
} | } | ||
| − | + | ||
#header .main ul li { | #header .main ul li { | ||
border-left: solid 1px rgba(160, 160, 160, 0.3); | border-left: solid 1px rgba(160, 160, 160, 0.3); | ||
| Line 934: | Line 701: | ||
white-space: nowrap; | white-space: nowrap; | ||
} | } | ||
| − | + | ||
#header .main ul li > * { | #header .main ul li > * { | ||
display: block; | display: block; | ||
float: left; | float: left; | ||
} | } | ||
| − | + | ||
#header .main ul li > a { | #header .main ul li > a { | ||
text-decoration: none; | text-decoration: none; | ||
| Line 949: | Line 716: | ||
width: 4em; | width: 4em; | ||
} | } | ||
| − | + | ||
#header .main ul li > a:before { | #header .main ul li > a:before { | ||
-moz-osx-font-smoothing: grayscale; | -moz-osx-font-smoothing: grayscale; | ||
| Line 958: | Line 725: | ||
text-transform: none !important; | text-transform: none !important; | ||
} | } | ||
| − | + | ||
#header .main ul li > a:before { | #header .main ul li > a:before { | ||
display: block; | display: block; | ||
| Line 970: | Line 737: | ||
width: inherit; | width: inherit; | ||
} | } | ||
| − | + | ||
#header form { | #header form { | ||
margin: 0; | margin: 0; | ||
} | } | ||
| − | + | ||
#header form input { | #header form input { | ||
display: inline-block; | display: inline-block; | ||
| Line 982: | Line 749: | ||
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
| − | + | ||
| − | + | #header #search { | |
| − | + | -moz-transition: all 0.5s ease; | |
| + | -webkit-transition: all 0.5s ease; | ||
| + | -ms-transition: all 0.5s ease; | ||
| + | transition: all 0.5s ease; | ||
| + | max-width: 0; | ||
| + | opacity: 0; | ||
| + | overflow: hidden; | ||
| + | padding: 0; | ||
| + | white-space: nowrap; | ||
| + | } | ||
| + | |||
| + | #header #search input { | ||
| + | width: 12em; | ||
| + | } | ||
| + | |||
| + | #header #search.visible { | ||
| + | max-width: 12.5em; | ||
| + | opacity: 1; | ||
| + | padding: 0 0.5em 0 0; | ||
| + | } | ||
| + | |||
@media screen and (max-width: 980px) { | @media screen and (max-width: 980px) { | ||
| − | + | ||
#header .links { | #header .links { | ||
display: none; | display: none; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 736px) { | @media screen and (max-width: 736px) { | ||
| − | + | ||
#header { | #header { | ||
height: 2.75em; | height: 2.75em; | ||
line-height: 2.75em; | line-height: 2.75em; | ||
} | } | ||
| − | + | ||
#header h1 { | #header h1 { | ||
padding: 0 0 0 1em; | padding: 0 0 0 1em; | ||
} | } | ||
| − | + | ||
#header .main .search { | #header .main .search { | ||
display: none; | display: none; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
/* Wrapper */ | /* Wrapper */ | ||
| − | + | ||
#wrapper { | #wrapper { | ||
display: -moz-flex; | display: -moz-flex; | ||
| Line 1,026: | Line 813: | ||
transition: opacity 0.5s ease; | transition: opacity 0.5s ease; | ||
margin: 0 auto; | margin: 0 auto; | ||
| − | max-width: | + | max-width: 130%; |
opacity: 1; | opacity: 1; | ||
padding: 4.5em; | padding: 4.5em; | ||
| − | width: | + | width: 130%; |
} | } | ||
| − | + | ||
| + | body.is-menu-visible #wrapper { | ||
| + | opacity: 0.15; | ||
| + | } | ||
| + | |||
@media screen and (max-width: 1680px) { | @media screen and (max-width: 1680px) { | ||
| − | + | ||
#wrapper { | #wrapper { | ||
padding: 4em; | padding: 4em; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 1280px) { | @media screen and (max-width: 1280px) { | ||
| − | + | ||
#wrapper { | #wrapper { | ||
display: block; | display: block; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 736px) { | @media screen and (max-width: 736px) { | ||
| − | + | ||
#wrapper { | #wrapper { | ||
padding: 1.5em; | padding: 1.5em; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
body.single #wrapper { | body.single #wrapper { | ||
display: block; | display: block; | ||
} | } | ||
| − | + | ||
/* Main */ | /* Main */ | ||
| − | + | ||
#main { | #main { | ||
-moz-flex-grow: 1; | -moz-flex-grow: 1; | ||
| Line 1,070: | Line 861: | ||
width: 100%; | width: 100%; | ||
} | } | ||
| − | + | ||
/* Sidebar */ | /* Sidebar */ | ||
| − | + | ||
#sidebar { | #sidebar { | ||
margin-left: 2em; | margin-left: 2em; | ||
margin-right: 2em; | margin-right: 2em; | ||
| − | width: | + | width: 30%; |
} | } | ||
| − | + | ||
#sidebar > * { | #sidebar > * { | ||
border-top: solid 1px rgba(160, 160, 160, 0.3); | border-top: solid 1px rgba(160, 160, 160, 0.3); | ||
| Line 1,084: | Line 875: | ||
padding: 3em 0 0 0; | padding: 3em 0 0 0; | ||
} | } | ||
| − | + | ||
#sidebar > :first-child { | #sidebar > :first-child { | ||
border-top: 0; | border-top: 0; | ||
| Line 1,090: | Line 881: | ||
padding-top: 0; | padding-top: 0; | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 1280px) { | @media screen and (max-width: 1280px) { | ||
| − | + | ||
#sidebar { | #sidebar { | ||
border-top: solid 1px rgba(160, 160, 160, 0.3); | border-top: solid 1px rgba(160, 160, 160, 0.3); | ||
| Line 1,100: | Line 891: | ||
width: 100%; | width: 100%; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
/* --Menu */ | /* --Menu */ | ||
| − | + | ||
ul, ol { | ul, ol { | ||
list-style:none; | list-style:none; | ||
} | } | ||
.nav li a { | .nav li a { | ||
| − | + | padding:0px 12px; | |
display:block; | display:block; | ||
} | } | ||
| − | + | ||
.nav li a:hover { | .nav li a:hover { | ||
} | } | ||
| − | + | ||
.nav li ul { | .nav li ul { | ||
display:none; | display:none; | ||
position:absolute; | position:absolute; | ||
} | } | ||
| − | + | ||
.nav li:hover > ul { | .nav li:hover > ul { | ||
background-color:#4E4444; | background-color:#4E4444; | ||
display:block; | display:block; | ||
} | } | ||
| − | + | ||
.nav li ul li { | .nav li ul li { | ||
position:relative; | position:relative; | ||
| − | + | ||
} | } | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
/* Intro */ | /* Intro */ | ||
| − | + | ||
#intro .logo { | #intro .logo { | ||
border-bottom: 0; | border-bottom: 0; | ||
| Line 1,144: | Line 935: | ||
width: 11em; | width: 11em; | ||
} | } | ||
| − | + | ||
#intro .logo:before { | #intro .logo:before { | ||
background-position: top left; | background-position: top left; | ||
| Line 1,157: | Line 948: | ||
width: 100%; | width: 100%; | ||
} | } | ||
| − | + | ||
#intro .logo img { | #intro .logo img { | ||
display: block; | display: block; | ||
| Line 1,163: | Line 954: | ||
width: 9em; | width: 9em; | ||
} | } | ||
| − | + | ||
#intro header h2 { | #intro header h2 { | ||
font-size: 2em; | font-size: 2em; | ||
font-weight: 900; | font-weight: 900; | ||
} | } | ||
| − | + | ||
#intro header p { | #intro header p { | ||
font-size: 0.8em; | font-size: 0.8em; | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 1280px) { | @media screen and (max-width: 1280px) { | ||
| − | + | ||
#intro { | #intro { | ||
margin: 0 0 3em 0; | margin: 0 0 3em 0; | ||
text-align: center; | text-align: center; | ||
} | } | ||
| − | + | ||
#intro header h2 { | #intro header h2 { | ||
font-size: 2em; | font-size: 2em; | ||
} | } | ||
| − | + | ||
#intro header p { | #intro header p { | ||
font-size: 0.7em; | font-size: 0.7em; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 736px) { | @media screen and (max-width: 736px) { | ||
| − | + | ||
#intro { | #intro { | ||
margin: 0 0 1.5em 0; | margin: 0 0 1.5em 0; | ||
padding: 1.25em 0; | padding: 1.25em 0; | ||
} | } | ||
| − | + | ||
#intro > :last-child { | #intro > :last-child { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
} | } | ||
| − | + | ||
#intro .logo { | #intro .logo { | ||
margin: 0 0 0.5em 0; | margin: 0 0 0.5em 0; | ||
} | } | ||
| − | + | ||
#intro header h2 { | #intro header h2 { | ||
font-size: 1.25em; | font-size: 1.25em; | ||
} | } | ||
| − | + | ||
#intro header > :last-child { | #intro header > :last-child { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
/* Footer */ | /* Footer */ | ||
| − | + | ||
#footer .icons { | #footer .icons { | ||
color: #aaaaaa; | color: #aaaaaa; | ||
} | } | ||
| − | + | ||
#footer .copyright { | #footer .copyright { | ||
color: #aaaaaa; | color: #aaaaaa; | ||
| Line 1,229: | Line 1,020: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
| − | + | ||
body.single #footer { | body.single #footer { | ||
text-align: center; | text-align: center; | ||
} | } | ||
| − | + | ||
| − | + | /* Menu */ | |
| + | |||
| + | #menu { | ||
| + | -moz-transform: translateX(25em); | ||
| + | -webkit-transform: translateX(25em); | ||
| + | -ms-transform: translateX(25em); | ||
| + | transform: translateX(25em); | ||
| + | -moz-transition: -moz-transform 0.5s ease, visibility 0.5s; | ||
| + | -webkit-transition: -webkit-transform 0.5s ease, visibility 0.5s; | ||
| + | -ms-transition: -ms-transform 0.5s ease, visibility 0.5s; | ||
| + | transition: transform 0.5s ease, visibility 0.5s; | ||
| + | -webkit-overflow-scrolling: touch; | ||
| + | background: #ffffff; | ||
| + | border-left: solid 1px rgba(160, 160, 160, 0.3); | ||
| + | box-shadow: none; | ||
| + | height: 100%; | ||
| + | max-width: 80%; | ||
| + | overflow-y: auto; | ||
| + | position: fixed; | ||
| + | right: 0; | ||
| + | top: 0; | ||
| + | visibility: hidden; | ||
| + | width: 25em; | ||
| + | z-index: 10002; | ||
| + | } | ||
| + | |||
| + | #menu > * { | ||
| + | border-top: solid 1px rgba(160, 160, 160, 0.3); | ||
| + | padding: 3em; | ||
| + | } | ||
| + | |||
| + | #menu > * > :last-child { | ||
| + | margin-bottom: 0; | ||
| + | } | ||
| + | |||
| + | #menu > :first-child { | ||
| + | border-top: 0; | ||
| + | } | ||
| + | |||
| + | #menu .links { | ||
| + | list-style: none; | ||
| + | padding: 0; | ||
| + | } | ||
| + | |||
| + | #menu .links > li { | ||
| + | border: 0; | ||
| + | border-top: dotted 1px rgba(160, 160, 160, 0.3); | ||
| + | margin: 1.5em 0 0 0; | ||
| + | padding: 1.5em 0 0 0; | ||
| + | } | ||
| + | |||
| + | #menu .links > li a { | ||
| + | display: block; | ||
| + | border-bottom: 0; | ||
| + | } | ||
| + | |||
| + | #menu .links > li a h3 { | ||
| + | -moz-transition: color 0.2s ease; | ||
| + | -webkit-transition: color 0.2s ease; | ||
| + | -ms-transition: color 0.2s ease; | ||
| + | transition: color 0.2s ease; | ||
| + | font-size: 0.7em; | ||
| + | } | ||
| + | |||
| + | #menu .links > li a p { | ||
| + | font-family: "Raleway", Helvetica, sans-serif; | ||
| + | font-size: 0.6em; | ||
| + | font-weight: 400; | ||
| + | letter-spacing: 0.25em; | ||
| + | margin-bottom: 0; | ||
| + | text-decoration: none; | ||
| + | text-transform: uppercase; | ||
| + | } | ||
| + | |||
| + | #menu .links > li a:hover h3 { | ||
| + | color: #2ebaae; | ||
| + | } | ||
| + | |||
| + | #menu .links > li:first-child { | ||
| + | border-top: 0; | ||
| + | margin-top: 0; | ||
| + | padding-top: 0; | ||
| + | } | ||
| + | |||
| + | body.is-menu-visible #menu { | ||
| + | -moz-transform: translateX(0); | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | visibility: visible; | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 736px) { | ||
| + | |||
| + | #menu > * { | ||
| + | padding: 1.5em; | ||
| + | } | ||
| + | |||
| + | } | ||
</style> | </style> | ||
</html> | </html> | ||
Latest revision as of 11:49, 19 October 2016
