fontfaceonload
Version:
A simple utility to execute a callback when a webfont loads.
375 lines (318 loc) • 7.95 kB
CSS
//--------------------------------------------------
// Reset
// -------------------------------------------------
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
article, aside, figure, footer, header, hgroup, nav, section {
display: block;
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
img {
width: 100%;
}
.skip,
.a11y {
left: -1000em;
overflow: hidden;
position: absolute;
top: 0;
width: 0;
}
/*---------------------------*/
/*---- Syntax Hightlight ----*/
/*---------------------------*/
/*
* GitHub style for Pygments syntax highlighter, for use with Jekyll
* Courtesy of GitHub.com
*/
.highlight pre, pre, .highlight .hll { background-color: #f8f8f8; border: 1px solid #ccc; padding: 6px 10px; border-radius: 3px; }
.highlight .c { color: #999988; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .k { font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #999988; font-style: italic; }
.highlight .cp { color: #999999; font-weight: bold; }
.highlight .c1 { color: #999988; font-style: italic; }
.highlight .cs { color: #999999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000000; background-color: #ffdddd; }
.highlight .gd .x { color: #000000; background-color: #ffaaaa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #aa0000; }
.highlight .gh { color: #999999; }
.highlight .gi { color: #000000; background-color: #ddffdd; }
.highlight .gi .x { color: #000000; background-color: #aaffaa; }
.highlight .go { color: #888888; }
.highlight .gp { color: #555555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #800080; font-weight: bold; }
.highlight .gt { color: #aa0000; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kn { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #445588; font-weight: bold; }
.highlight .m { color: #009999; }
.highlight .s { color: #dd1144; }
.highlight .n { color: #333333; }
.highlight .na { color: teal; }
.highlight .nb { color: #0086b3; }
.highlight .nc { color: #445588; font-weight: bold; }
.highlight .no { color: teal; }
.highlight .ni { color: purple; }
.highlight .ne { color: #990000; font-weight: bold; }
.highlight .nf { color: #990000; font-weight: bold; }
.highlight .nn { color: #555555; }
.highlight .nt { color: navy; }
.highlight .nv { color: teal; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbbbbb; }
.highlight .mf { color: #009999; }
.highlight .mh { color: #009999; }
.highlight .mi { color: #009999; }
.highlight .mo { color: #009999; }
.highlight .sb { color: #dd1144; }
.highlight .sc { color: #dd1144; }
.highlight .sd { color: #dd1144; }
.highlight .s2 { color: #dd1144; }
.highlight .se { color: #dd1144; }
.highlight .sh { color: #dd1144; }
.highlight .si { color: #dd1144; }
.highlight .sx { color: #dd1144; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #dd1144; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999999; }
.highlight .vc { color: teal; }
.highlight .vg { color: teal; }
.highlight .vi { color: teal; }
.highlight .il { color: #009999; }
.highlight .gc { color: #999; background-color: #EAF2F5; }
/*---------------------------*/
/*-------- Site styles ------*/
/*---------------------------*/
* {
moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
font-family: 'Helvetica Neue', Helvetica, serif;
font-weight: normal;
margin: 0;
min-height: 100%;
}
img {
max-width: 100%;
}
a:link,
a:active {
border-bottom: 2px solid #e6008c;
color: #000;
font-weight: bold;
text-decoration: none;
}
a:active {
bottom: -1px;
position: relative;
}
a:hover,
a:visited {
background-color: rgba(230, 0, 140, .1);
border-bottom: 2px solid #e6008c;
color: #000;
text-decoration: none;
}
a:focus {
background-color: rgba(230, 0, 140, .1)
}
p {
font-size: .875rem;
line-height: 1.5;
}
.center {
text-align: center;
}
.warning, .note {
padding: 0.5em 1em;
margin: 1em;
border-radius: 5px;
}
.warning {
background: #fff3a5;
}
.note {
background: #428bca;
color: #fff;
}
/*-------------------------------*/
/*---------Site wide header -----*/
/*-------------------------------*/
.site-header {
align-items: center;
background: rgb(57, 15, 57);
padding: 2em 1em;
}
.site-header-wrapper {
max-width: 1040px;
margin: 0 auto;
}
@media (min-width: 40em) {
.site-header-wrapper {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
}
.site-logo {
flex: 1 0 auto;
}
.logo {
margin: 0;
padding: 0;
}
a.logo-link:link,
a.logo-link:visited {
background: url('/img/logo-qunit@2x.png') no-repeat 0 0;
background-size: cover;
border: none;
display: block;
height: 66px;
text-indent: -99999px;
width: 243px;
}
a.logo-link:hover {
background-color: transparent;
border: none;
}
a.logo-link:focus {
background-color: none;
}
.site-nav {
flex: 1 0 auto;
}
.site-nav-list {
margin: 1em 0 0 0;
padding: 0;
}
@media (min-width: 40em) {
.site-nav-list {
margin: 0;
text-align: right;
}
}
.site-nav-list-item {
display: inline-block;
}
a.site-nav-list-link:link,
a.site-nav-list-link:active {
border-bottom: none;
color: #fff;
display: inline-block;
font-style: normal;
font-weight: normal;
padding: 1em 2em 1em 0;
}
a.site-nav-list-link:hover,
a.site-nav-list-link:visited {
background-color: transparent;
color: #fff;
text-decoration: underline;
}
a.site-nav-list-link:focus {
background-color: transparent;
text-decoration: underline;
}
@media (min-width: 40em) {
a.site-nav-list-link:link {
padding: 0 2em;
}
}
/*--------------------------------------------*/
/*---------- Home page ----------------*/
/*--------------------------------------------*/
.main {
/*background-color: #403B6E;*/
}
.wrapper {
max-width: 1040px;
margin: 0 auto;
padding: 1em;
display: flex;
}
@media (min-width: 65em) {
.main-content {
padding: 0;
}
}
.sidebar {
flex: 0 0 240px;
}
.sidebar-list {
padding-left: 0;
}
.sidebar-item ~ .sidebar-item{
padding-top: 1rem;
}
table {
padding: 0; }
table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0; }
table tr:nth-child(2n) {
background-color: #f8f8f8; }
table tr th {
font-weight: bold;
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px; }
table tr td {
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px; }
table tr th :first-child, table tr td :first-child {
margin-top: 0; }
table tr th :last-child, table tr td :last-child {
margin-bottom: 0; }