ITTF explorer

Starter Lab Productions Play

Project Docs Github

/ittf/css/cheatsheet.css.ittf (primary)
                                            edit
                                            css
    $
        var opt = {
            sidebar_1: true,
            sb_1_min_w: 60,
            debug_css: false
        };
        var l_mc_top = 48;
        var l_mc_sub_top = 125;
        var l_mc_top_mobile = 7; // rem
        var l_mc_sub_top_mobile = 7;  // rem
        var c_0 = "#fff";
        var c_bg_0 = "#000";
        var c_tn_bg_0 = "#333";
        var c_tn_bg_sub = "#666";
        var c_tn_bg_logo_hover = "#066";
        var c_tn_bg_li_mobile = "#999";
        var c_tn_bg_bar = "#fff";
        var c_tn_1 = "#fff";
        var c_tn_2 = "#f44";
        var c_tn_bg_f_0 = "#000";
        var c_mc_bg_frame_bar = c_tn_bg_sub;
        var c_mc_frame_bar = c_tn_bg_bar;

    < h1, h2, h3, h4, h5, h6
        margin 0
    < h3
        font-size 18px
    . wrapper
        font-family arial, verdana
        font-size 15px
        padding 2rem
    . head-bar-item
        display flex
        flex-direction column
        border 1px solid #222
        margin-bottom 2rem
    . head-bar-title
        padding 0.2rem 2rem
        background-color #015ba0
        color #fefefe
    . head-bar-value
        padding 0.5rem 2rem
        text-align center
        font-size 1.5rem
    . code-title
        margin 30px 0
        padding-top 10px
        border-top 1px solid hsl(0, 0%, 87%)
        color #fefefe
    $include prettyprint
    $include tn
    $include mc

                                        
   1 css
   2     $
   3         var opt = {
   4             sidebar_1: true,
   5             sb_1_min_w: 60,
   6             debug_css: false
   7         };
   8         var l_mc_top = 48;
   9         var l_mc_sub_top = 125;
  10         var l_mc_top_mobile = 7; // rem
  11         var l_mc_sub_top_mobile = 7;  // rem
  12         var c_0 = "#fff";
  13         var c_bg_0 = "#000";
  14         var c_tn_bg_0 = "#333";
  15         var c_tn_bg_sub = "#666";
  16         var c_tn_bg_logo_hover = "#066";
  17         var c_tn_bg_li_mobile = "#999";
  18         var c_tn_bg_bar = "#fff";
  19         var c_tn_1 = "#fff";
  20         var c_tn_2 = "#f44";
  21         var c_tn_bg_f_0 = "#000";
  22         var c_mc_bg_frame_bar = c_tn_bg_sub;
  23         var c_mc_frame_bar = c_tn_bg_bar;
  24     < h1, h2, h3, h4, h5, h6
  25         margin 0
  26     < h3
  27         font-size 18px
  28     . wrapper
  29         font-family arial, verdana
  30         font-size 15px
  31         padding 2rem
  32     . head-bar-item
  33         display flex
  34         flex-direction column
  35         border 1px solid #222
  36         margin-bottom 2rem
  37     . head-bar-title
  38         padding 0.2rem 2rem
  39         background-color #015ba0
  40         color #fefefe
  41     . head-bar-value
  42         padding 0.5rem 2rem
  43         text-align center
  44         font-size 1.5rem
  45     . code-title
  46         margin 30px 0
  47         padding-top 10px
  48         border-top 1px solid hsl(0, 0%, 87%)
  49         color #fefefe
  50     $include prettyprint
  51     $include tn
  52     $include mc

/ittf/css/t/prettyprint.css.ittf
                                            edit
                                            $group
    - ========================================
        - WIZZI PRETTY PRINT
        - t/css/wz/prettyprint.css.ittf
        - ------------------------------------
    . pln
        color #F1F2F3
    . tag
        color #AAFF00
    . str
        color #EC7600
    . kwd
        color #f79256
    . com
        color #66747B
    . typ
        color #678CB1
    . lit
        color #FACD22
    . mix
        color #ff0040
        cursor pointer
    . tag
        color #8AC763
    . atn
        color #E0E2E4
    . atv
        color #EC7600
    . expr
        color #f3e877
    . fun
        color red
    . arg
        color yellow
    . pp-ln
        color #999
    . pp-pln
        color #EEE
    . pp-str
        color #EC7600
    . pp-kwd
        color #f79256
    . pp-com
        color #66747B
    . pp-typ
        color #678CB1
    . pp-lit
        color #FACD22
    . pp-mix
        color #ff0040
        cursor pointer
    . pp-tag
        color #50fa7b
    . pp-atn
        color #E0E2E4
    . pp-atv
        color #EC7600
    . pp-expr
        color #f3e877
    . pp-fun
        color red
    . pp-arg
        color yellow
    . code-title::before
        content ''
        position relative
        left -16px
        border-left 2px solid #3391FE
    . code-panel
        margin-bottom 1em
        margin-top 1em
    . code-prettyprint
        font-size 13px
        border 1px solid #ddd
        border-radius 3px
        box-shadow 0 1px 3px hsla(0, 0%, 0%, 0.05)
        overflow auto
    . code-prettyprint.source
        width inherit
    . code-prettyprint > code
        padding 15px
    . code-prettyprint code
        font-size 100%
        line-height 18px
        display block
        background-color #3e383d
        color #cDcEc3
    < pre
        background #fff
        padding 0px
        margin 0
    < pre code
        padding 0
        font-size inherit
        color inherit
        white-space pre-wrap
        background-color transparent
        border-radius 0
    < pre.prettyprint
        overflow auto
        background #3e383d
        text-shadow 0 1px #888
        font-family Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
        text-align left
        white-space pre
        word-spacing normal
        word-break normal
        word-wrap normal
        line-height 1.5
        tab-size 4
        hyphens none
        < ol
            padding-left 2rem
    . L0
        + .L1
        + .L2
        + .L3
        + .L4
        + .L5
        + .L6
        + .L7
        + .L8
        + .L9
        color #777
        margin-left 1rem
        padding-left 1rem
        list-style-type decimal
    # Alternate shading for lines
    . L1
        + .L3
        + .L5
        + .L7
        + .L9
        background #555
    . prettyprint-js
        background #fff
    # Alternate shading for lines
    . J1
        + .J3
        + .J5
        + .J7
        + .J9
        background #ddd
    . linenums
        color #fff
    media screen and (max-width: 1028px)
        . pp-pln
            color #FFF
        < pre.prettyprint
            padding 1.2rem
            border-left 5px solid #999
            font-size 2rem
            line-height 3rem
            overflow

                                        
   1 $group
   2     - ========================================
   3         - WIZZI PRETTY PRINT
   4         - t/css/wz/prettyprint.css.ittf
   5         - ------------------------------------
   6     . pln
   7         color #F1F2F3
   8     . tag
   9         color #AAFF00
  10     . str
  11         color #EC7600
  12     . kwd
  13         color #f79256
  14     . com
  15         color #66747B
  16     . typ
  17         color #678CB1
  18     . lit
  19         color #FACD22
  20     . mix
  21         color #ff0040
  22         cursor pointer
  23     . tag
  24         color #8AC763
  25     . atn
  26         color #E0E2E4
  27     . atv
  28         color #EC7600
  29     . expr
  30         color #f3e877
  31     . fun
  32         color red
  33     . arg
  34         color yellow
  35     . pp-ln
  36         color #999
  37     . pp-pln
  38         color #EEE
  39     . pp-str
  40         color #EC7600
  41     . pp-kwd
  42         color #f79256
  43     . pp-com
  44         color #66747B
  45     . pp-typ
  46         color #678CB1
  47     . pp-lit
  48         color #FACD22
  49     . pp-mix
  50         color #ff0040
  51         cursor pointer
  52     . pp-tag
  53         color #50fa7b
  54     . pp-atn
  55         color #E0E2E4
  56     . pp-atv
  57         color #EC7600
  58     . pp-expr
  59         color #f3e877
  60     . pp-fun
  61         color red
  62     . pp-arg
  63         color yellow
  64     . code-title::before
  65         content ''
  66         position relative
  67         left -16px
  68         border-left 2px solid #3391FE
  69     . code-panel
  70         margin-bottom 1em
  71         margin-top 1em
  72     . code-prettyprint
  73         font-size 13px
  74         border 1px solid #ddd
  75         border-radius 3px
  76         box-shadow 0 1px 3px hsla(0, 0%, 0%, 0.05)
  77         overflow auto
  78     . code-prettyprint.source
  79         width inherit
  80     . code-prettyprint > code
  81         padding 15px
  82     . code-prettyprint code
  83         font-size 100%
  84         line-height 18px
  85         display block
  86         background-color #3e383d
  87         color #cDcEc3
  88     < pre
  89         background #fff
  90         padding 0px
  91         margin 0
  92     < pre code
  93         padding 0
  94         font-size inherit
  95         color inherit
  96         white-space pre-wrap
  97         background-color transparent
  98         border-radius 0
  99     < pre.prettyprint
 100         overflow auto
 101         background #3e383d
 102         text-shadow 0 1px #888
 103         font-family Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
 104         text-align left
 105         white-space pre
 106         word-spacing normal
 107         word-break normal
 108         word-wrap normal
 109         line-height 1.5
 110         tab-size 4
 111         hyphens none
 112         < ol
 113             padding-left 2rem
 114     . L0
 115         + .L1
 116         + .L2
 117         + .L3
 118         + .L4
 119         + .L5
 120         + .L6
 121         + .L7
 122         + .L8
 123         + .L9
 124         color #777
 125         margin-left 1rem
 126         padding-left 1rem
 127         list-style-type decimal
 128     # Alternate shading for lines
 129     . L1
 130         + .L3
 131         + .L5
 132         + .L7
 133         + .L9
 134         background #555
 135     . prettyprint-js
 136         background #fff
 137     # Alternate shading for lines
 138     . J1
 139         + .J3
 140         + .J5
 141         + .J7
 142         + .J9
 143         background #ddd
 144     . linenums
 145         color #fff
 146     media screen and (max-width: 1028px)
 147         . pp-pln
 148             color #FFF
 149         < pre.prettyprint
 150             padding 1.2rem
 151             border-left 5px solid #999
 152             font-size 2rem
 153             line-height 3rem
 154             overflow

/ittf/css/t/tn.css.ittf
                                            edit
                                            $group
    # tn-input-toggle
        display none
    . tn-bar
        - We ensure that the navigation stays at the top of the browser window by giving it a position: fixed property.
            - Setting its width to min-width: 100% will ensure that the navigation spans the full width of the browser window.
        background-color ${c_tn_bg_bar}
        position fixed
        min-width 100%
        . tn-main
            - flex for logo and menu UL
            display flex
            align-items center
            - space-between evenly distributes the child elements within the parent flex container
            justify-content space-between
            padding 0 2%
            < ul
                display flex
                justify-content space-between
                list-style-type none
                - width is required for justify-content to take effect
                width 60%
                < li
                    display inline-block
                    padding 1rem
                    font-size 1.6rem
                    color ${c_tn_bg_0}
                    < a
                        text-decoration none
                        & :hover
                            color ${c_tn_2}
                . tn-pageSelected
                    background-color ${c_tn_bg_sub}
                    color ${c_tn_bg_bar}
                    < a
                        color ${c_tn_bg_bar}
                        & :hover
                            color ${c_tn_bg_bar}
        . tn-label-toggle
            display none
        . tn-label-toggle-close
            display none
        . tn-subPages
            background-color ${c_tn_bg_sub}
            padding 0 2rem
            margin 0 auto
            < ul
                display flex
                justify-content space-between
                list-style-type none
                width 60%
                < li
                    display inline-block
                    padding 0.4rem
                    font-size 1.3rem
                    < a
                        color ${c_tn_bg_bar}
                        text-decoration none
                        & :hover
                            color ${c_tn_2}
                . tn-subPageSelected
                    background-color ${c_tn_bg_bar}
                    color ${c_tn_bg_bar}
                    < a
                        color ${c_tn_bg_sub}
                        & :hover
                            color ${c_tn_bg_sub}
        . tn-subPages_mobile
            display none
    . mainContent
    media screen and (max-width: 1028px)
        . tn-bar
            padding 2.5rem 0
            . logo
                display inline-block
            . tn-main
                display block
                . logo
                    < img
                        width 200px
                        height 90px
                        margin -24px 0
                < ul
                    background-color ${c_tn_bg_0}
                    display block
                    list-style-type none
                    opacity 0
                    text-align center
                    width 100%
                    display none
                    margin-top 2rem
                    < li
                        border-bottom 2px solid ${c_tn_bg_bar}
                        color ${c_tn_bg_bar}
                        display block
                        font-size 3rem
                        padding 2rem 0
                        < a
                            color ${c_tn_bg_bar}
                    . tn-pageSelected
                        display block
            . tn-subPages
                display none
            . tn-subPages_mobile
                display block
            . tn-label-toggle
                background linear-gradient( to bottom, ${c_tn_bg_0} 0%, ${c_tn_bg_0} 15%, transparent 15%, transparent 35%, ${c_tn_bg_0} 35%, ${c_tn_bg_0} 50%, transparent 50%, transparent 70%, ${c_tn_bg_0} 70%, ${c_tn_bg_0} 85%, transparent 85%, transparent 100%)
                cursor pointer
                display block
                float right
                height 35px
                margin-top 1rem
                width 35px
        # wrapper
            flex-direction column
            position relative
            margin 10px
            height auto
            width 100%
        # wrapper-sub
        # tn-input-toggle:checked ~ .tn-bar
            height 100vh
            overflow-y scroll
            . tn-main ul
                opacity 1
                visibility visible
                display block
                < li .tn-subPages_mobile ul
                    margin-top 0.5rem
                    background-color ${c_tn_bg_li_mobile}
                    < li
                        font-size 2rem
                        padding 2rem 0
        # tn-input-toggle:checked ~ .tn-bar .tn-label-toggle
            display none
        # tn-input-toggle:checked ~ .tn-bar .tn-label-toggle-close
            color ${c_tn_bg_0}
            font-size 70px
            cursor pointer
            display block
            float right
            height 35px
            margin-top 0.2rem
            width 35px
        # tn-input-toggle:checked ~ #mc-wrapper
            display none

                                        
   1 $group
   2     # tn-input-toggle
   3         display none
   4     . tn-bar
   5         - We ensure that the navigation stays at the top of the browser window by giving it a position: fixed property.
   6             - Setting its width to min-width: 100% will ensure that the navigation spans the full width of the browser window.
   7         background-color ${c_tn_bg_bar}
   8         position fixed
   9         min-width 100%
  10         . tn-main
  11             - flex for logo and menu UL
  12             display flex
  13             align-items center
  14             - space-between evenly distributes the child elements within the parent flex container
  15             justify-content space-between
  16             padding 0 2%
  17             < ul
  18                 display flex
  19                 justify-content space-between
  20                 list-style-type none
  21                 - width is required for justify-content to take effect
  22                 width 60%
  23                 < li
  24                     display inline-block
  25                     padding 1rem
  26                     font-size 1.6rem
  27                     color ${c_tn_bg_0}
  28                     < a
  29                         text-decoration none
  30                         & :hover
  31                             color ${c_tn_2}
  32                 . tn-pageSelected
  33                     background-color ${c_tn_bg_sub}
  34                     color ${c_tn_bg_bar}
  35                     < a
  36                         color ${c_tn_bg_bar}
  37                         & :hover
  38                             color ${c_tn_bg_bar}
  39         . tn-label-toggle
  40             display none
  41         . tn-label-toggle-close
  42             display none
  43         . tn-subPages
  44             background-color ${c_tn_bg_sub}
  45             padding 0 2rem
  46             margin 0 auto
  47             < ul
  48                 display flex
  49                 justify-content space-between
  50                 list-style-type none
  51                 width 60%
  52                 < li
  53                     display inline-block
  54                     padding 0.4rem
  55                     font-size 1.3rem
  56                     < a
  57                         color ${c_tn_bg_bar}
  58                         text-decoration none
  59                         & :hover
  60                             color ${c_tn_2}
  61                 . tn-subPageSelected
  62                     background-color ${c_tn_bg_bar}
  63                     color ${c_tn_bg_bar}
  64                     < a
  65                         color ${c_tn_bg_sub}
  66                         & :hover
  67                             color ${c_tn_bg_sub}
  68         . tn-subPages_mobile
  69             display none
  70     . mainContent
  71     media screen and (max-width: 1028px)
  72         . tn-bar
  73             padding 2.5rem 0
  74             . logo
  75                 display inline-block
  76             . tn-main
  77                 display block
  78                 . logo
  79                     < img
  80                         width 200px
  81                         height 90px
  82                         margin -24px 0
  83                 < ul
  84                     background-color ${c_tn_bg_0}
  85                     display block
  86                     list-style-type none
  87                     opacity 0
  88                     text-align center
  89                     width 100%
  90                     display none
  91                     margin-top 2rem
  92                     < li
  93                         border-bottom 2px solid ${c_tn_bg_bar}
  94                         color ${c_tn_bg_bar}
  95                         display block
  96                         font-size 3rem
  97                         padding 2rem 0
  98                         < a
  99                             color ${c_tn_bg_bar}
 100                     . tn-pageSelected
 101                         display block
 102             . tn-subPages
 103                 display none
 104             . tn-subPages_mobile
 105                 display block
 106             . tn-label-toggle
 107                 background linear-gradient( to bottom, ${c_tn_bg_0} 0%, ${c_tn_bg_0} 15%, transparent 15%, transparent 35%, ${c_tn_bg_0} 35%, ${c_tn_bg_0} 50%, transparent 50%, transparent 70%, ${c_tn_bg_0} 70%, ${c_tn_bg_0} 85%, transparent 85%, transparent 100%)
 108                 cursor pointer
 109                 display block
 110                 float right
 111                 height 35px
 112                 margin-top 1rem
 113                 width 35px
 114         # wrapper
 115             flex-direction column
 116             position relative
 117             margin 10px
 118             height auto
 119             width 100%
 120         # wrapper-sub
 121         # tn-input-toggle:checked ~ .tn-bar
 122             height 100vh
 123             overflow-y scroll
 124             . tn-main ul
 125                 opacity 1
 126                 visibility visible
 127                 display block
 128                 < li .tn-subPages_mobile ul
 129                     margin-top 0.5rem
 130                     background-color ${c_tn_bg_li_mobile}
 131                     < li
 132                         font-size 2rem
 133                         padding 2rem 0
 134         # tn-input-toggle:checked ~ .tn-bar .tn-label-toggle
 135             display none
 136         # tn-input-toggle:checked ~ .tn-bar .tn-label-toggle-close
 137             color ${c_tn_bg_0}
 138             font-size 70px
 139             cursor pointer
 140             display block
 141             float right
 142             height 35px
 143             margin-top 0.2rem
 144             width 35px
 145         # tn-input-toggle:checked ~ #mc-wrapper
 146             display none

/ittf/css/t/mc.css.ittf
                                            edit
                                            $group
    -
    - Main Content (mc)
    -
    # mc-wrapper
        position fixed
        width 100%
        $if opt.debug_css
            border 1px solid blue
    . mc-wrapper-layout
        top ${l_mc_top}px
        height calc(100% - ${l_mc_top + 10}px)
    . mc-wrapper-layout-sub
        top ${l_mc_sub_top}px
        height calc(100% - ${l_mc_sub_top + 1}px)
    . mc-frame-bar
        width calc(100% - ${opt.sb_1_min_w}px)
        height 40px
        background #545f58
        display flex
        flex-direction row
    . mc-frame-bar-item
        color #fff
        padding 5px 20px
        font-size 24px
    media screen and (min-width: 1000px)
        . mc-frame
            padding-left 18rem
    media screen and (min-width: 750px)
        . mc-frame
            padding-left 16.5rem
            padding-top 6.25rem
    $if false
        . mc-sidebar-left
            padding 20px 30px
            overflow auto
            < ul
                display flex
                justify-content space-between
                flex-direction column
                list-style-type none
                transition all 1s ease
                < li
                    border-bottom 1px solid ${c_0}
                    color ${c_0}
                    display block
                    font-size 0.8rem
                    padding 0.3rem 0 0.3rem 1rem
                    < a
                        color ${c_0}
                < li:last-child
                    border-bottom 0
    . mc-sidebar-left
        border 0px
        bottom 0rem
        display block
        height 100%
        top 0rem
        overflow-y auto
        transition opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s
        width 320px
        z-index 9999
        opacity 0
        pointer-events none
        < ul
            display flex
            justify-content space-between
            flex-direction column
            list-style-type none
            transition all 1s ease
            < li
                border-bottom 1px solid ${c_0}
                color ${c_0}
                display block
                font-size 0.8rem
                padding 0.3rem 0 0.3rem 0.3rem
                < a
                    color ${c_0}
                < ul
                    @ padding-inline-start 10px
            < li:last-child
                border-bottom 0
    media (min-width: 750px)
        . mc-sidebar-left
            max-width none
            pointer-events auto
            width 16.5rem
            opacity 1 !important
    . mc-sidebar-left-title
        display none
    . mc-content
        padding 20px 20px
        overflow auto
    . mc-pane
        width 100%
        < h2
            font-size 2rem
            font-weight 700
            margin 2rem 0 0 0
        < h3
            font-size 1.4rem
            font-weight 700
            margin 1.5rem 0 0 0
        < h4
            font-weight 700
            margin 0.5rem 0 -3px 0
        < p
            line-height 1.3rem
            margin-bottom 0.5rem
        < ul
            list-style-type disc
            padding-left 2rem
    < input[id^='mc-toggle-']
        display none
    . mc-label-toggle
        display none
        cursor pointer
    . mc-label-toggle-close
        display none
    media screen and (max-width: 1028px)
        # mc-wrapper
            . mc-frame
                display block
                . mc-sidebar-left
                    < ul li
                        font-size 3rem
                        border-bottom 2px solid ${c_0}
                        padding 2rem 0
                    < ul li:last-child
                        border-bottom 0
        . mc-wrapper-layout
            top ${l_mc_top_mobile}rem
            height calc(100% - ${l_mc_top_mobile + 1}rem)
        . mc-wrapper-layout-sub
            top ${l_mc_sub_top_mobile}rem
            height calc(100% - ${l_mc_sub_top_mobile + 10}rem)
        . mc-frame-bar
            display flex
            flex-direction row
            justify-content space-between
            background-color ${c_mc_bg_frame_bar}
            color ${c_mc_frame_bar}
            margin 1rem
            padding 1.5rem 1rem
        . mc-label-toggle
            display block
        . mc-item-link
            display none
        . mc-pane
            display none
            font-size 1.1rem
            < h2
                font-size 1.6rem
                font-weight 500
                margin 1.5rem 0 0 0
            < h3
                font-size 1.3rem
                font-weight 500
                margin 1.2rem 0 0 0
            < h4
                font-weight 500
                margin 1rem 0 -3px 0
            < p
                line-height 2rem
                margin-bottom 1rem
        . mc-content
            height calc(100% - 60px)
            margin 10px
            padding 20px 40px
        . mc-content-title
            display none
        # mc-toggle-toc:checked ~ .mc-frame .mc-sidebar-left
            display none
        # mc-toggle-toc:checked ~ .mc-frame .mc-label-toggle-close
            font-size 70px
            cursor pointer
            display block
            height 35px
            width 35px

                                        
   1 $group
   2     -
   3     - Main Content (mc)
   4     -
   5     # mc-wrapper
   6         position fixed
   7         width 100%
   8         $if opt.debug_css
   9             border 1px solid blue
  10     . mc-wrapper-layout
  11         top ${l_mc_top}px
  12         height calc(100% - ${l_mc_top + 10}px)
  13     . mc-wrapper-layout-sub
  14         top ${l_mc_sub_top}px
  15         height calc(100% - ${l_mc_sub_top + 1}px)
  16     . mc-frame-bar
  17         width calc(100% - ${opt.sb_1_min_w}px)
  18         height 40px
  19         background #545f58
  20         display flex
  21         flex-direction row
  22     . mc-frame-bar-item
  23         color #fff
  24         padding 5px 20px
  25         font-size 24px
  26     media screen and (min-width: 1000px)
  27         . mc-frame
  28             padding-left 18rem
  29     media screen and (min-width: 750px)
  30         . mc-frame
  31             padding-left 16.5rem
  32             padding-top 6.25rem
  33     $if false
  34         . mc-sidebar-left
  35             padding 20px 30px
  36             overflow auto
  37             < ul
  38                 display flex
  39                 justify-content space-between
  40                 flex-direction column
  41                 list-style-type none
  42                 transition all 1s ease
  43                 < li
  44                     border-bottom 1px solid ${c_0}
  45                     color ${c_0}
  46                     display block
  47                     font-size 0.8rem
  48                     padding 0.3rem 0 0.3rem 1rem
  49                     < a
  50                         color ${c_0}
  51                 < li:last-child
  52                     border-bottom 0
  53     . mc-sidebar-left
  54         border 0px
  55         bottom 0rem
  56         display block
  57         height 100%
  58         top 0rem
  59         overflow-y auto
  60         transition opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s
  61         width 320px
  62         z-index 9999
  63         opacity 0
  64         pointer-events none
  65         < ul
  66             display flex
  67             justify-content space-between
  68             flex-direction column
  69             list-style-type none
  70             transition all 1s ease
  71             < li
  72                 border-bottom 1px solid ${c_0}
  73                 color ${c_0}
  74                 display block
  75                 font-size 0.8rem
  76                 padding 0.3rem 0 0.3rem 0.3rem
  77                 < a
  78                     color ${c_0}
  79                 < ul
  80                     @ padding-inline-start 10px
  81             < li:last-child
  82                 border-bottom 0
  83     media (min-width: 750px)
  84         . mc-sidebar-left
  85             max-width none
  86             pointer-events auto
  87             width 16.5rem
  88             opacity 1 !important
  89     . mc-sidebar-left-title
  90         display none
  91     . mc-content
  92         padding 20px 20px
  93         overflow auto
  94     . mc-pane
  95         width 100%
  96         < h2
  97             font-size 2rem
  98             font-weight 700
  99             margin 2rem 0 0 0
 100         < h3
 101             font-size 1.4rem
 102             font-weight 700
 103             margin 1.5rem 0 0 0
 104         < h4
 105             font-weight 700
 106             margin 0.5rem 0 -3px 0
 107         < p
 108             line-height 1.3rem
 109             margin-bottom 0.5rem
 110         < ul
 111             list-style-type disc
 112             padding-left 2rem
 113     < input[id^='mc-toggle-']
 114         display none
 115     . mc-label-toggle
 116         display none
 117         cursor pointer
 118     . mc-label-toggle-close
 119         display none
 120     media screen and (max-width: 1028px)
 121         # mc-wrapper
 122             . mc-frame
 123                 display block
 124                 . mc-sidebar-left
 125                     < ul li
 126                         font-size 3rem
 127                         border-bottom 2px solid ${c_0}
 128                         padding 2rem 0
 129                     < ul li:last-child
 130                         border-bottom 0
 131         . mc-wrapper-layout
 132             top ${l_mc_top_mobile}rem
 133             height calc(100% - ${l_mc_top_mobile + 1}rem)
 134         . mc-wrapper-layout-sub
 135             top ${l_mc_sub_top_mobile}rem
 136             height calc(100% - ${l_mc_sub_top_mobile + 10}rem)
 137         . mc-frame-bar
 138             display flex
 139             flex-direction row
 140             justify-content space-between
 141             background-color ${c_mc_bg_frame_bar}
 142             color ${c_mc_frame_bar}
 143             margin 1rem
 144             padding 1.5rem 1rem
 145         . mc-label-toggle
 146             display block
 147         . mc-item-link
 148             display none
 149         . mc-pane
 150             display none
 151             font-size 1.1rem
 152             < h2
 153                 font-size 1.6rem
 154                 font-weight 500
 155                 margin 1.5rem 0 0 0
 156             < h3
 157                 font-size 1.3rem
 158                 font-weight 500
 159                 margin 1.2rem 0 0 0
 160             < h4
 161                 font-weight 500
 162                 margin 1rem 0 -3px 0
 163             < p
 164                 line-height 2rem
 165                 margin-bottom 1rem
 166         . mc-content
 167             height calc(100% - 60px)
 168             margin 10px
 169             padding 20px 40px
 170         . mc-content-title
 171             display none
 172         # mc-toggle-toc:checked ~ .mc-frame .mc-sidebar-left
 173             display none
 174         # mc-toggle-toc:checked ~ .mc-frame .mc-label-toggle-close
 175             font-size 70px
 176             cursor pointer
 177             display block
 178             height 35px
 179             width 35px