@@ -0,0 +1,51 @@
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ html , body , p , ol , ul , li , dl , dt , dd , blockquote , figure , fieldset , legend , textarea , pre , iframe , hr , h1 , h2 , h3 , h4 , h5 , h6 { margin : 0 ; padding : 0 } h1 , h2 , h3 , h4 , h5 , h6 { font-size : 100 % ; font-weight : normal } ul { list-style : none } button , input , select , textarea { margin : 0 } html { box-sizing : border-box } * , * :: before , * :: after { box-sizing : inherit } img , video { height : auto ; max-width : 100 % } iframe { border : 0 } table { border-collapse : collapse ; border-spacing : 0 } td , th { padding : 0 } td : not ( [ align ] ) , th : not ( [ align ] ) { text-align : left }
. grid { box-sizing : border-box ; display : -webkit- flex ; display : -ms- flexbox ; display : -webkit- box ; display : flex ; -webkit- flex : 0 1 auto ; -ms- flex : 0 1 auto ; -webkit- box-flex : 0 ; flex : 0 1 auto ; -webkit- flex-direction : row ; -ms- flex-direction : row ; -webkit- box-orient : horizontal ; -webkit- box-direction : normal ; flex-direction : row ; -webkit- flex-wrap : wrap ; -ms- flex-wrap : wrap ; flex-wrap : wrap ; margin : 0 -8 px 0 -8 px } . grid . grid-nogutter { margin : 0 } . grid . grid-nogutter > . col { padding : 0 } . col { box-sizing : border-box ; -webkit- flex : 0 0 auto ; -ms- flex : 0 0 auto ; flex : 0 0 auto ; -webkit- flex-grow : 1 ; -ms- flex-positive : 1 ; -webkit- box-flex : 1 ; flex-grow : 1 ; -ms- flex-preferred-size : 0 ; -webkit- flex-basis : 0 ; flex-basis : 0 ; max-width : 100 % ; min-width : 0 ; padding : 0 8 px 0 8 px } . col-align-top { -webkit- align-self : flex-start ; -ms- flex-item-align : start ; align-self : flex-start } . col-align-bottom { align-self : flex-end } . col-align-middle { -webkit- align-self : center ; -ms- flex-item-align : center ; align-self : center } . col-top { justify-content : flex-start !important ; flex-direction : column ; display : flex } . col-bottom { justify-content : flex-end !important ; flex-direction : column ; display : flex } . col-middle { justify-content : center ; flex-direction : column ; display : flex } . grid-start { -webkit- box-pack : start ; -ms- flex-pack : start ; justify-content : flex-start } . grid-center { -webkit- box-pack : center ; -ms- flex-pack : center ; justify-content : center } . grid-end { -webkit- box-pack : end ; -ms- flex-pack : end ; justify-content : flex-end } . grid-around { justify-content : space-around } . grid-between { -webkit- box-pack : justify ; -ms- flex-pack : justify ; justify-content : space-between } . col-first { -webkit- box-ordinal-group : 0 ; -ms- flex-order : -1 ; order : -1 } . col-last { -webkit- box-ordinal-group : 2 ; -ms- flex-order : 1 ; order : 1 } . grid-reverse { -webkit- box-orient : horizontal ; -webkit- box-direction : reverse ; -ms- flex-direction : row-reverse ; flex-direction : row-reverse } . col-fixed { flex : initial } . col-grow-2 { flex-grow : 2 } . col-grow-3 { flex-grow : 3 } . col-grow-4 { flex-grow : 4 } . col-grow-5 { flex-grow : 5 } . col-grow-6 { flex-grow : 6 } . col-grow-7 { flex-grow : 7 } . col-grow-8 { flex-grow : 8 } . col-grow-9 { flex-grow : 9 } . col-grow-10 { flex-grow : 10 } . col-grow-11 { flex-grow : 11 } . col-1 { -ms- flex-preferred-size : 8.33333 % ; -webkit- flex-basis : 8.33333 % ; flex-basis : 8.33333 % ; max-width : 8.33333 % } . col-2 { -ms- flex-preferred-size : 16.66667 % ; -webkit- flex-basis : 16.66667 % ; flex-basis : 16.66667 % ; max-width : 16.66667 % } . col-3 { -ms- flex-preferred-size : 25 % ; -webkit- flex-basis : 25 % ; flex-basis : 25 % ; max-width : 25 % } . col-4 { -ms- flex-preferred-size : 33.33333 % ; -webkit- flex-basis : 33.33333 % ; flex-basis : 33.33333 % ; max-width : 33.33333 % } . col-5 { -ms- flex-preferred-size : 41.66667 % ; -webkit- flex-basis : 41.66667 % ; flex-basis : 41.66667 % ; max-width : 41.66667 % } . col-6 { -ms- flex-preferred-size : 50 % ; -webkit- flex-basis : 50 % ; flex-basis : 50 % ; max-width : 50 % } . col-7 { -ms- flex-preferred-size : 58.33333 % ; -webkit- flex-basis : 58.33333 % ; flex-basis : 58.33333 % ; max-width : 58.33333 % } . col-8 { -ms- flex-preferred-size : 66.66667 % ; -webkit- flex-basis : 66.66667 % ; flex-basis : 66.66667 % ; max-width : 66.66667 % } . col-9 { -ms- flex-preferred-size : 75 % ; -webkit- flex-basis : 75 % ; flex-basis : 75 % ; max-width : 75 % } . col-10 { -ms- flex-preferred-size : 83.33333 % ; -webkit- flex-basis : 83.33333 % ; flex-basis : 83.33333 % ; max-width : 83.33333 % } . col-11 { -ms- flex-preferred-size : 91.66667 % ; -webkit- flex-basis : 91.66667 % ; flex-basis : 91.66667 % ; max-width : 91.66667 % } . col-12 { -ms- flex-preferred-size : 100 % ; -webkit- flex-basis : 100 % ; flex-basis : 100 % ; max-width : 100 % } @ media only screen and ( max-width : 480px ) { . col-sm { flex : 100 % ; max-width : 100 % } } @ media only screen and ( max-width : 624px ) { . col-md { flex : 100 % ; max-width : 100 % } } @ media only screen and ( max-width : 744px ) { . col-lg { flex : 100 % ; max-width : 100 % } }
. align-items-center { align-items : center } . align-items-top { align-items : start }
: root {
--color-red : #d47474
}
. text-center { text-align : center ; } . text-right { text-align : right } . text-left { text-align : left ; }
[ class ^ = "btn-" ] , [ class ~ = " btn-" ] { display : inline-block ; font-weight : 400 ; text-align : center ; white-space : nowrap ; vertical-align : middle ; user-select : none ; border : 1 px solid transparent ; padding : .375 rem .75 rem ; line-height : 1.5 ; border-radius : .25 rem ; cursor : pointer ; transition : color .15 s ease-in-out , background-color .15 s ease-in-out , border-color .15 s ease-in-out , box-shadow .15 s ease-in-out ; background : rgba ( 0 , 0 , 0 , 0.3 ) ; color : rgba ( 255 , 255 , 255 , 0.8 ) ; }
[ class ^ = "btn-" ] : hover , [ class ~ = " btn-" ] : hover { border-color : rgba ( 0 , 0 , 0 , 0.5 ) ; text-decoration : underline ; }
. btn-red { background : rgba ( 155 , 0 , 0 , 0.5 ) ; color : rgba ( 255 , 255 , 255 , 0.9 ) ; }
. btn-green { background : rgba ( 0 , 155 , 0 , 0.5 ) ; color : rgba ( 255 , 255 , 255 , 0.9 ) ; }
. btn-blue { background : rgba ( 0 , 0 , 155 , 0.5 ) ; color : rgba ( 255 , 255 , 255 , 0.9 ) ; }
body { background : #f3f3f9 }
code { white-space : pre-line ; font-family : monospace ; color : #e6e6e6 ; background : #343537 ; display : block ; padding : 1 rem ; line-height : 1.5 em ; border : 1 px solid #2e2e30 ; }
body { font-family : Helvetica Neue , Helvetica , Arial , sans-serif ; }
summary { cursor : pointer ; }
# body-main { min-height : calc ( 100 vh - 30 px ) ; display : flex }
/* Header */
# body-header { background : #fff ; color : #fff ; min-height : 60 px ; line-height : 60 px ; padding : 0 1 rem ; position : sticky ; top : 0 ; border-bottom : 1 px solid #ebedee ; }
# right-panel { max-width : calc ( 100 % - 240 px ) ; width : 100 % ; margin-left : auto }
# subheader { background : #fff ; padding : 1 rem 1.4 rem ; display : flex ; justify-content : space-between ; box-shadow : 0 1 px 2 px rgba ( 55 , 65 , 75 , 0.15 ) }
# subheader h1 { font-size : 1.1 rem ; font-size : inherit ; font-weight : bold }
# subheader . breadcrumb { font-size : 0.9 rem ; display : flex ; align-items : end }
# subheader . breadcrumb-item + . breadcrumb-item : before { content : "› " ; padding : 0 6 px ; }
/* Footer */
# body-footer { background : #fff ; color : #333 ; height : 30 px ; line-height : 30 px ; font-size : 0.8 rem ; padding : 0 0.5 rem ; text-align : right ; border-top : 1 px solid #ebedee ; }
/* Sidebar */
# main-nav { background : #242528 ; width : 240 px ; color : #fff ; font-family : consolas , courier new , monospace ; font-size : 0.9 rem ; position : fixed ; top : 0 ; bottom : 0 ; overflow-y : scroll ; padding-bottom : 2 rem ; border-right : 2 px solid #333 ; }
# main-nav . app-title { font-size : 1.3 rem ; text-align : center ; padding : 1.8 rem 0 }
# main-nav . app-title : before { content : "🔳" ; margin-right : 10 px }
# main-nav label { color : #a4a4a4 ; text-transform : uppercase ; display : block ; padding : 0.8 rem 1 rem ; font-size : 1.15 em ; }
# main-nav label : before { content : "⊙" ; margin-right : 10 px }
# main-nav a { color : #efecec ; text-decoration : none ; display : block ; padding : 0 1 rem 0 2 rem ; transition : all 0.3 s ease ; line-height : 3 em ; font-size : 0.9 em }
# main-nav a : before { content : "› " ; margin-right : 10 px ; line-height : 3 em }
# main-nav a : hover { background : rgba ( 255 , 255 , 255 , 0.1 ) }
/* Main content */
# main-content { padding : 4 vh 2 vw ; width : 100 % ; margin-left : auto ; }
# main-content section { border-radius : 0.3 rem ; box-shadow : 0 1 px 2 px rgba ( 56 , 65 , 74 , .15 ) }
# main-content section article { border-radius : 0.3 rem ; font-family : Courier New , Courier , monospace ; font-size : 0.8 em ; background : #fff ; padding : 1.5 rem ; }
# main-content section header { border-top-left : 0.3 rem ; border-top-right : 4 px ; background : #fff ; padding : 1 rem 1 rem ; font-size : 1.2 em ; color : #4b4848 ; border-bottom : 1 px solid #e9ebec ; display : flex ; align-items : center }
# main-content section footer { border-bottom-left : 0.3 rem ; border-bottom-right : 0.3 rem ; background : #f9f9f9 ; padding : 2 vh 1 vw ; }