@ -3,85 +3,70 @@ html { font-size:14px }
header { position : relative }
header hr { display : none }
body {
margin : . 2rem ;
max-width : 54rem ;
padding : 0 . 62rem ;
font : 1 . 2rem / 1 . 62 sans-serif
}
margin : . 2rem ; padding : 0 . 62rem ;
font : 1 . 2rem / 1 . 62 sans-serif ;
display : -webkit-flex ; display : -ms-flexbox ; display : flex ;
flex-direction : column }
main { flex : 1 0 auto }
nav > a {
padding : . 2rem 0 ;
display : block ;
border-top : 1px dotted # 000
}
border-top : 1px dotted # 000 }
nav > a : first-child { border : none }
h1 , h2 , h3 , h4 , h5 , h6 { line-height : 1 }
header h1 { margin : 1.4 rem auto 1.2 rem ; margin-right : 52 px }
header h1 { margin : 1.4 rem 52 px 1.2 rem auto }
a { text-decoration : none }
a : link , a : visited { color : #087CA7 }
a : hover , a : visited : hover { color : #09B2DC }
ul {
padding-left : 0 ; margin-left : 0 ;
list-style-position : inside
}
ul li { margin : 0.35 rem }
ul { padding-left : 0 ; margin-left : 0 ; list-style : inside }
ul li { margin : .35 rem }
li > ul { margin-left : 1 em }
. tag {
font-size : . 8rem ;
font-size : . 8rem ; vertical-align : middle ;
padding : . 2rem ; border-radius : . 33rem ;
background-color : # 191919 ; color : # FFF ;
vertical-align : middle
}
background : # 191919 ; color : # FFF }
pre {
background -color : # 191919 ; color : # FFF ;
background : # 191919 ; color : # FFF ;
white-space : pre-wrap ; overflow-x : auto ;
padding : 12px ; border : 1px solid # FFF ;
}
padding : 12px ; border : 1px solid # FFF }
footer p { margin : 0 }
table { text-align : left ; width : 100 % ; border-collapse : collapse }
td , th { border : 1 px solid #222 ; padding : 9 px 6 px }
th { padding : 12 px ; color : white }
thead th { background -color : #191919 }
tbody th { background -color : #292929 }
tr : nth-child ( even ) { background -color : #FEFEFE }
tr : hover { background -color : #DEDEDE }
th { padding : 12 px ; color : #FFF }
thead th { background : #191919 }
tbody th { background : #292929 }
tr : nth-child ( even ) { background : #FEFEFE }
tr : hover { background : #DEDEDE }
. burger-container {
position : absolute ; height : 24px ; width : 30px ;
cursor : pointer ; top : 34px ; right : 10px }
# burger-toggle { display : none }
# burger-toggle , # burger-toggle ~ nav { display : none }
. burger , . burger :: after , . burger :: before {
position : absolute ; background-color : # 000 ;
position : absolute ; background : # 000 ;
height : 4px ; width : 30px ; border-radius : 2px ; content : "" ;
transition : transform 300ms cubic-bezier ( 0 . 4 , 1 , 0 . 5 , 1 ) }
transition : transform 300ms cubic-bezier ( . 4 , 1 , . 5 , 1 ) }
. burger :: before { margin-top : -8 px }
. burger :: after { margin-top : 8 px }
# burger-toggle ~ nav { display : none ; }
# burger-toggle : checked ~ nav { display : block ; }
# burger-toggle : checked + . burger-container . burger :: before { margin-top : 0 px ; transform : rotate ( 45 deg ) }
# burger-toggle : checked + . burger-container . burger :: after { margin-top : 0 px ; transform : rotate ( -45 deg ) }
# burger-toggle : checked ~ nav { display : block }
# burger-toggle : checked + . burger-container . burger :: before { margin-top : 0 ; transform : rotate ( 45 deg ) }
# burger-toggle : checked + . burger-container . burger :: after { margin-top : 0 ; transform : rotate ( -45 deg ) }
# burger-toggle : checked + . burger-container . burger { background : rgba ( 255 , 255 , 255 , 0 ) }
footer p { margin : 0 }
body {
display : -webkit-flex ; display : -ms-flexbox ; display : flex ;
flex-direction : column
}
main { flex : 1 0 auto }
@ media print { body { max-width : none } }
@ media ( min-width : 720px ) {
body { margin : .2 rem auto ; }
body { margin : .2 rem auto }
nav > a { margin-left : 2 rem ; padding : auto ; display : inline ; border : none }
nav > a : first-child { padding : 1 rem 0 ; padding-left : 0 ; margin-left : 0 }
nav > a : first-child { padding : 1 rem 0 ; margin-left : 0 }
ul li { margin : auto }
. burger-container { display : none }
# burger-toggle ~ nav { display : block }
header hr { display : block }
# burger-toggle ~ nav , header hr { display : block }
}
@ media ( max-width : 320px ) {
# burger-toggle ~ nav { display : block }
@ -93,7 +78,7 @@ main { flex:1 0 auto }
a : link , a : visited { color : #9CF }
a : hover , a : visited : hover { color : #DA4167 }
nav > a { border-color : #FFF }
. tag { background -color : #FFF ; color : #000 }
. tag { background : #FFF ; color : #000 }
. burger , . burger :: after , . burger :: before { background : #FFF }
}