2017-08-14 01:08:27 +00:00
@ 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' ) ;
}
2017-08-10 00:00:49 +00:00
html , h1 , h2 , h3 {
2017-08-09 00:11:13 +00:00
font-family : "Oswald" , "Helvetica Neue" , Helvetica , Arial , sans-serif ; }
2014-12-29 22:08:56 +00:00
html {
2017-08-09 00:11:13 +00:00
font-weight : 400 ;
font-size : 14px ;
line-height : 20px ; }
2014-12-29 22:08:56 +00:00
2017-09-25 15:52:25 +00:00
em {
color : # 444 ;
}
2014-12-29 22:08:56 +00:00
a {
2017-08-17 22:19:41 +00:00
color : # 33b5e5 ; }
2014-12-29 22:08:56 +00:00
a : hover {
2017-08-17 16:25:45 +00:00
color : # 33b5e5 ; }
2014-12-29 22:08:56 +00:00
2017-08-17 16:25:45 +00:00
. uk-article-meta {
color : # 767676 ; /* required to get an accessible contrast */ }
2014-12-29 22:08:56 +00:00
. uk-article-meta > a {
color : # 444 ; }
. uk-article-meta > a : hover {
color : # 444 ; }
. uk-article-meta > . uk-icon-comment {
color : # 444 ; }
2017-08-07 00:32:45 +00:00
. uk-article-content {
font : 400 14px / 20px "Helvetica Neue" , Helvetica , Arial , sans-serif ; }
2014-12-29 22:08:56 +00:00
. 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 ) ; }
2017-08-14 01:08:27 +00:00
2014-12-29 22:08:56 +00:00
. mg-header {
2017-08-18 10:05:32 +00:00
overflow : hidden ; /* to hide the absolutely positioned mg-skiplinks child */
2017-08-17 22:19:41 +00:00
background-color : # 39b39d ; }
2014-12-29 22:08:56 +00:00
2017-08-14 01:08:27 +00:00
. mg-header-content {
display : flex ;
justify-content : space-between ; }
2017-11-07 12:10:42 +00:00
. mg-brand , . mg-brand > h1 {
display : block ;
margin : . 5rem 0 ;
2014-12-30 20:10:36 +00:00
font-style : italic ;
2017-10-27 06:55:38 +00:00
font-size : 2 . 5rem ;
2017-11-07 12:10:42 +00:00
line-height : 2 . 5rem ;
color : # 444 ; }
2015-11-23 17:29:59 +00:00
. mg-brand : hover , . mg-brand : focus {
2014-12-29 22:08:56 +00:00
color : white ; }
2015-01-08 11:41:19 +00:00
@ media ( max-width : 767px ) {
. mg-brand {
padding : 0 ;
max-width : 100 % ;
2017-11-07 12:10:42 +00:00
font-size : 2rem ; }
}
2014-12-29 22:08:56 +00:00
. mg-tagline {
2017-11-07 12:10:42 +00:00
padding : . 5rem 2rem ;
font-size : 1 . 4rem ;
2014-12-29 22:08:56 +00:00
color : white ; }
2017-08-14 01:08:27 +00:00
2017-08-14 20:18:28 +00:00
. mg-header-extra {
2017-08-14 01:08:27 +00:00
flex : 1 ;
display : flex ;
justify-content : flex-end ; }
2017-08-17 16:25:45 +00:00
. mg-tag-filters {
list-style-type : none ;
display : flex ;
2017-08-17 22:19:41 +00:00
align-items : center ;
margin : 0 ; }
2017-08-14 01:08:27 +00:00
. mg-tag-filter {
background-color : transparent ;
2017-08-17 18:07:10 +00:00
border : 2px solid white ;
2017-08-14 01:08:27 +00:00
overflow : visible ;
2017-08-17 22:19:41 +00:00
color : # 444 ;
2017-08-14 01:08:27 +00:00
font : inherit ;
padding : . 5rem 1 . 5rem ;
margin : . 5rem 1rem ;
2017-08-14 23:39:41 +00:00
text-transform : uppercase ;
cursor : pointer ; }
. mg-tag-filter : hover {
2017-08-18 10:05:32 +00:00
border-color : # b2b2b2 ; }
2017-08-17 18:37:34 +00:00
. mg-tag-filter-include {
2017-08-17 18:07:10 +00:00
background-color : # 33b5e5 ; }
2017-08-17 18:37:34 +00:00
. mg-tag-filter-exclude {
2017-08-17 18:07:10 +00:00
background-color : # FF9148 ; }
2017-08-14 01:08:27 +00:00
. mg-nav-small {
2017-11-06 14:08:11 +00:00
display : flex ;
2017-08-14 01:08:27 +00:00
width : 100 % }
. mg-nav-menu-toggle-small {
flex : 1 ; }
2014-12-29 22:08:56 +00:00
. mg-main {
margin-top : 4em ;
margin-bottom : 3em ;
min-height : 100 % ; }
2017-08-17 16:25:45 +00:00
. mg-articles {
list-style-type : none ; }
2017-08-13 18:36:09 +00:00
. mg-article-short {
display : flex ;
align-items : center ;
flex-wrap : wrap ; }
2017-08-17 18:42:38 +00:00
li : nth-child ( even ) . mg-article-short {
2017-08-13 18:36:09 +00:00
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 ; }
2014-12-29 22:08:56 +00:00
. mg-feed {
2017-08-17 16:25:45 +00:00
color : # bf4d00 ; }
2014-12-29 22:08:56 +00:00
. mg-feed : hover {
2017-11-29 17:38:07 +00:00
color : # D14905 ; }
2014-12-29 22:08:56 +00:00
2017-08-13 18:36:09 +00:00
. mg-tags {
2017-08-15 21:57:43 +00:00
font-family : "Helvetica Neue" , Helvetica , Arial , sans-serif ;
2017-08-13 18:36:09 +00:00
text-align : right ; }
2017-08-09 00:41:22 +00:00
. mg-tag {
margin : 0 . 5rem ;
2017-11-29 17:38:07 +00:00
color : # D14905 ; }
2017-08-09 00:41:22 +00:00
. mg-tag : hover {
2017-11-29 17:38:07 +00:00
color : # D14905 ; }
2017-08-09 00:52:31 +00:00
. mg-tag > . uk-icon-tag {
2017-08-15 21:57:43 +00:00
display : inline ; /* so that the icon stick with the tag label */
2017-08-09 00:52:31 +00:00
margin-right : . 2rem ; }
2017-08-09 00:41:22 +00:00
2015-01-09 19:28:34 +00:00
. mg-list-title {
font-size : 2em ;
line-height : 42px ;
font-weight : 400 ;
text-transform : none ;
margin-top : 0 . 5em ; }
2014-12-29 22:08:56 +00:00
. mg-footer {
margin-bottom : 1em ; }
. mg-author {
margin-top : 1em ; }
2017-08-17 18:07:10 +00:00
. mg-icon-link {
2017-08-17 22:19:41 +00:00
padding : . 3rem ; }
2017-09-18 09:56:24 +00:00
. mg-icon-link : hover {
text-decoration : none ; }
2015-01-15 19:41:16 +00:00
2014-12-29 22:08:56 +00:00
. mg-icons-small {
margin-bottom : 1em ; }
. mg-icons-small . uk-icon-rss {
2017-08-17 18:07:10 +00:00
color : white ;
2017-11-29 17:38:07 +00:00
background-color : # D14905 ; }
2014-12-29 22:08:56 +00:00
. 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 ; }
2017-08-10 00:00:49 +00:00
. uk-icon-shaarli : before {
content : ' ' ;
display : inline-block ;
height : 28px ;
width : 28px ;
2017-08-10 07:23:22 +00:00
background-image : url ( . . / shaarli-icon . png ) ;
2017-08-17 18:07:10 +00:00
background-size : contain ;
vertical-align : middle ; }
2017-08-10 00:00:49 +00:00
. uk-icon-stackoverflow : before {
content : ' ' ;
display : inline-block ;
height : 28px ;
width : 28px ;
2017-08-10 07:23:22 +00:00
background-image : url ( . . / stackoverflow-icon . png ) ;
2017-08-17 18:07:10 +00:00
background-size : contain ;
vertical-align : middle ; }
2017-09-26 14:13:53 +00:00
. 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 ; }
2017-08-10 00:00:49 +00:00
. mg-support-logo {
margin : . 5rem ; }
2014-12-29 22:08:56 +00:00
. mg-badges li {
float : left ;
position : relative ; }
. browserupgrade {
margin : 0 . 2em 0 ;
background : # ccc ;
color : # 000 ;
padding : 0 . 2em 0 ; }
2015-01-08 23:09:35 +00:00
2017-08-14 01:08:27 +00:00
2017-08-17 16:25:45 +00:00
. 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 */
2017-08-14 01:08:27 +00:00
. 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 {
2017-11-29 17:38:07 +00:00
color : # D14905 ; }
2017-08-14 01:08:27 +00:00
2017-08-14 23:39:41 +00:00
. mg-fadeable {
max-height : 100vh ;
overflow : hidden ;
transition : max-height 1s ease-in ;
}
. mg-faded {
max-height : 0 ;
transition : max-height 1s ease-out ;
}
2017-08-18 10:05:32 +00:00
/* Accessibility */
2017-11-06 14:08:11 +00:00
a : focus , . uk-link : focus {
2017-08-18 10:05:32 +00:00
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 ;
}