@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'), url(../fonts/PRmiXeptR36kaC0GEAetxlDMrAYtoOisqqMDW9M_Mqc.ttf) format('truetype'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; src: local('Oswald Regular'), local('Oswald-Regular'), url(../fonts/Y_TKV6o8WovbUd3m_X9aAA.ttf) format('truetype'); } html, h1, h2, h3 { font-family: "Oswald", "Helvetica Neue",Helvetica,Arial,sans-serif; } html { font-weight: 400; font-size: 14px; line-height: 20px; } em { color: #444; } a { color: #33b5e5; } a:hover { color: #33b5e5; } .uk-article-meta { color: #767676; /* required to get an accessible contrast */ } .uk-article-meta > a { color: #444; } .uk-article-meta > a:hover { color: #444; } .uk-article-meta > .uk-icon-comment { color: #444; } .uk-article-content { font: 400 14px / 20px "Helvetica Neue",Helvetica,Arial,sans-serif; } .uk-icon-twitter { color: #00B0ED; } .uk-icon-facebook, .uk-icon-facebook-square { color: #3B5999; } .uk-icon-google-plus, .uk-icon-google-plus-square { color: #D34836; } .uk-nav-side > li.uk-active > a { background: #28D1B2; } .uk-pagination > .uk-active > span { background: #28D1B2; } .uk-icon-medium { margin-right: 0.3em; } .uk-navbar-toggle { color: white; } .uk-navbar-toggle:hover, .uk-navbar-toggle:focus { color: white; } .uk-nav-offcanvas > li > a { border-top: 1px solid rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } .uk-nav-offcanvas > li > a:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .uk-nav-offcanvas .uk-nav-divider { border-top: 1px solid rgba(255, 255, 255, 0.01); margin: 0; height: 4px; background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } .uk-nav-offcanvas .uk-nav-header { margin-top: 0; background: #404040; border-top: 1px solid rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } .mg-header { overflow: hidden; /* to hide the absolutely positioned mg-skiplinks child */ background-color: #39b39d; } .mg-header-content { display: flex; justify-content: space-between; } .mg-brand, .mg-brand > h1 { display: block; margin: .5rem 0; font-style: italic; font-size: 2.5rem; line-height: 2.5rem; color: #444; } .mg-brand:hover, .mg-brand:focus { color: white; } @media (max-width: 767px) { .mg-brand { padding: 0; max-width: 100%; font-size: 2rem; } } .mg-tagline { padding: .5rem 2rem; font-size: 1.4rem; color: white; } .mg-header-extra { flex: 1; display: flex; justify-content: flex-end; } .mg-tag-filters { list-style-type: none; display: flex; align-items: center; margin: 0; } .mg-tag-filter { background-color: transparent; border: 2px solid white; overflow: visible; color: #444; font: inherit; padding: .5rem 1.5rem; margin: .5rem 1rem; text-transform: uppercase; cursor: pointer; } .mg-tag-filter:hover { border-color: #b2b2b2; } .mg-tag-filter-include { background-color: #33b5e5; } .mg-tag-filter-exclude { background-color: #FF9148; } .mg-nav-small { display: flex; width: 100% } .mg-nav-menu-toggle-small { flex: 1; } .mg-main { margin-top: 4em; margin-bottom: 3em; min-height: 100%; } .mg-articles { list-style-type: none; } .mg-article-short { display: flex; align-items: center; flex-wrap: wrap; } li:nth-child(even) .mg-article-short { flex-direction: row-reverse; } .mg-article-image { flex: 1 1 15rem; min-height: 0; /* required for flexbox shrink to work properly - Chrome 60 */ min-width: 0; /* required for flexbox shrink to work properly - Chrome 60 */ max-height: 50%; max-width: 50%; padding: 1rem; margin: 0 auto; width: 100%; height: 100%; object-fit: contain; } .mg-article-content { flex: 3 1 35rem; } .mg-feed { color: #bf4d00; } .mg-feed:hover { color: #FF6600; } .mg-tags { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; text-align: right; } .mg-tag { margin: 0 .5rem; color: #FF6600; } .mg-tag:hover { color: #FF6600; } .mg-tag > .uk-icon-tag { display: inline; /* so that the icon stick with the tag label */ margin-right: .2rem; } .mg-list-title { font-size: 2em; line-height: 42px; font-weight: 400; text-transform: none; margin-top: 0.5em; } .mg-footer { margin-bottom: 1em; } .mg-author { margin-top: 1em; } .mg-icon-link { padding: .3rem; } .mg-icon-link:hover { text-decoration: none; } .mg-icons-small { margin-bottom: 1em; } .mg-icons-small .uk-icon-rss { color: white; background-color: #FF6600; } .mg-icons-small .uk-icon-twitter { background-color: #00B0ED; } .mg-icons-small .uk-icon-facebook { background-color: #3B5999; } .mg-icons-small .uk-icon-google-plus { background-color: #D34836; } .mg-icons-small .uk-icon-envelope { background-color: #059; } .uk-icon-shaarli:before { content: ' '; display: inline-block; height: 28px; width: 28px; background-image: url(../shaarli-icon.png); background-size: contain; vertical-align: middle; } .uk-icon-stackoverflow:before { content: ' '; display: inline-block; height: 28px; width: 28px; background-image: url(../stackoverflow-icon.png); background-size: contain; vertical-align: middle; } .uk-icon-travis-ci:before { content: ' '; display: inline-block; height: 28px; width: 28px; background-image: url(../travis-ci-icon.png); background-size: contain; vertical-align: middle; } .mg-support-logo { margin: .5rem;} .mg-badges li { float: left; position: relative; } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } .mg-search { display: flex; } .mg-search-button { font-family: FontAwesome; background-color: transparent; border: none; cursor: pointer; } .mg-search-query { padding: 0; } /* override uk-search-field */ .mg-tagcloud { list-style: none; padding: 0; width: 80%; text-align: center; } .mg-cloud-tag { display: inline-block; padding: .2rem; line-height: 110%; } .mg-cloud-tag-size-5 { font-size: 140%; } .mg-cloud-tag-size-4 { font-size: 180%; } .mg-cloud-tag-size-3 { font-size: 220%; } .mg-cloud-tag-size-2 { font-size: 260%; } .mg-cloud-tag-size-1 { font-size: 300%; } .mg-cloud-tag-badge { color: #FF6600; } .mg-fadeable { max-height: 100vh; overflow: hidden; transition: max-height 1s ease-in; } .mg-faded { max-height: 0; transition: max-height 1s ease-out; } /* Accessibility */ a:focus, .uk-link:focus { outline: 1px dotted !important; /* resetting an outline - damn uikit :( */ } .mg-skiplinks { list-style-type: none; } .mg-skiplinks a { color: #39b39d; } .mg-skiplinks a:focus { color: white; }