/ittf/meta/document/styles.css.ittf (primary)

edit 
                                            
   1 css
   2     $include options-init
   3     $
   4         opt.prettyprint = true;
   5         opt.l_mc_top = 8;
   6         opt.c_bg_tn_bar = '#fafafa';
   7         opt.c_bg_tn_main = '#ededed';
   8     $include options-analize
   9     css/layouts/meta_main( &opt)
  10     < body
  11         background-color ${opt.c_bg_0}
  12         color ${opt.c_0}
  13         font-size 15px
  14         font-family roboto, verdana, tahoma, arial, sans-serif
  15         line-height 1.8em
  16     < h1
  17         font-size 2rem
  18         padding 1rem 0 0.5rem 0
  19     < h2
  20         font-size 1.5rem
  21         padding 0.6rem 0 0.3rem 0
  22     . clear
  23         clear both
  24     $include css/tn
  25     $include css/fsitems
  26     $include css/mc
  27     $include css/modal
  28     $include css/editor
  29     $include css/sidebar-left
  30     $include css/breadcrumbs

/ittf/meta/t/options-init.ittf

edit 
                                            
   1 $group
   2     $
   3         var opt = {
   4             resetMarginsPaddingsBorders: true,
   5             resetDisplayBlock: false,
   6             resetOlUl: true,
   7             resetBlockquote: false,
   8             resetTable: false,
   9             resetLinks: true,
  10             prettyprint: false,
  11             debug_css: false,
  12             c_0: '#000',
  13             c_bg_0: '#fff',
  14             fa_1: false,
  15             sidebar_1: false,
  16             sb_1_min_w: 0,
  17             logo_w: 70,
  18             logo_h: 35,
  19         };

/ittf/meta/t/options-analize.ittf

edit 
                                            
   1 $group
   2     $
   3         if (opt.sidebar_1) {
   4             opt.fa_1 = true;
   5         }

/ittf/meta/document/t/css/tn.css.ittf

edit 
                                            
   1 $group
   2     # tn-input-toggle
   3         display none
   4     . tn-bar
   5         position fixed
   6         min-width 100%
   7         background-color ${opt.c_bg_tn_bar}
   8         . tn-main
   9             - flex for logo and menu UL
  10             display flex
  11             align-items center
  12             - space-between evenly distributes the child elements within the parent flex container
  13             justify-content space-between
  14             padding 1rem 1rem
  15             . logo
  16                 background-color ${opt.c_bg_tn_bar}
  17                 < img
  18                     width 7rem
  19                     height 3rem
  20                     & :hover
  21                         background-color ${opt.c_tn_bg_logo_hover}
  22             < ul
  23                 display flex
  24                 justify-content space-between
  25                 list-style-type none
  26                 - width is required for justify-content to take effect
  27                 width 90%
  28                 < li
  29                     display inline-block
  30                     padding 1rem
  31                     font-size 1.6rem
  32                     < a
  33                         text-decoration none
  34                         & :hover
  35                             color ${opt.c_tn_2}
  36         . tn-breadcrumbs
  37             margin 5px
  38             background-color ${opt.c_bg_tn_main}

/ittf/meta/document/t/css/fsitems.css.ittf

edit 
                                            
   1 $group
   2     . breadcrumbs-panel
   3         display flex
   4         flex-direction row
   5         padding 0 0.5rem 0.5rem 0.5rem
   6     . breadcrumb-item
   7         padding 0.5rem 1rem
   8         font-size 1.5rem
   9     . fsitem
  10         < img
  11             position relative
  12             top 3px
  13         < a
  14             padding-left 0.5rem

/ittf/meta/document/t/css/mc.css.ittf

edit 
                                            
   1 $group
   2     # mc-wrapper
   3         position fixed
   4         width 100%
   5         height 100%
   6         $f opt.debug_css
   7             border 1px solid blue
   8     . mc-wrapper-layout
   9         top ${opt.l_mc_top}rem
  10         height calc(100% - ${opt.l_mc_top + 10}rem)
  11     . mc-frame
  12         display flex
  13         flex-direction row
  14         height 100%
  15         $if opt.debug_css
  16             border 1px solid red
  17     . mc-content
  18         $$padding 50px 30px
  19         $$ Do the same as mc-sidebar-left
  20         padding 20px 20px
  21         $$ height 100%
  22         $$ still i can't find why i need to subtract these 40 pixels
  23         $$ It seems to be the padding. Why? Isn t it internal to height
  24         height calc(100% - 10rem)
  25         overflow auto
  26     . mc-pane
  27         width 100%
  28         < h2
  29             font-size 2rem
  30             font-weight 700
  31             margin 2rem 0 0 0
  32         < h3
  33             font-size 1.4rem
  34             font-weight 700
  35             margin 1.5rem 0 0 0
  36         < h4
  37             font-weight 700
  38             margin 0.5rem 0 -3px 0
  39         < p
  40             line-height 1.3rem
  41             margin-bottom 0.5rem
  42         < ul
  43             list-style-type disc
  44             padding-left 2rem
  45     . code-edit-button
  46         cursor pointer
  47         & :hover
  48             text-decoration underline
  49     media screen and (max-width: 1028px)
  50         # mc-wrapper
  51             . mc-frame
  52                 display block
  53                 . mc-sidebar-left
  54                     $$ TODO explain exactly why 160px (that is mc-frame-bar height)
  55                     height calc(100% - 10rem)
  56                     margin 10px
  57                     < ul li
  58                         font-size 3rem
  59                         border-bottom 2px solid ${opt.c_0}
  60                         padding 2rem 0
  61                     < ul li:last-child
  62                         border-bottom 0
  63         . mc-wrapper-layout
  64             top ${opt.l_mc_top_mobile}rem
  65             height calc(100% - ${opt.l_mc_top_mobile + 1}rem)
  66         . mc-frame-bar
  67             display flex
  68             flex-direction row
  69             justify-content space-between
  70             background-color ${opt.c_mc_bg_frame_bar}
  71             color ${opt.c_mc_frame_bar}
  72             margin 1rem
  73             padding 1.5rem 1rem
  74         . mc-sidebar-left-title
  75             display block
  76             padding-left 0
  77             font-size 3rem
  78         . mc-label-toggle
  79             display block
  80         . mc-item-link
  81             display none
  82         . mc-pane
  83             display none
  84             font-size 1.1rem
  85             < h2
  86                 font-size 1.6rem
  87                 font-weight 500
  88                 margin 1.5rem 0 0 0
  89             < h3
  90                 font-size 1.3rem
  91                 font-weight 500
  92                 margin 1.2rem 0 0 0
  93             < h4
  94                 font-weight 500
  95                 margin 1rem 0 -3px 0
  96             < p
  97                 line-height 2rem
  98                 margin-bottom 1rem
  99         . mc-content
 100             $$ TODO explain exactly why 60px (that is mc-frame-bar height)
 101             height calc(100% - 60px)
 102             margin 10px
 103             padding 20px 40px
 104         . mc-content-title
 105             display none
 106         # mc-toggle-toc:checked ~ .mc-frame .mc-sidebar-left
 107             display none
 108         # mc-toggle-toc:checked ~ .mc-frame .mc-label-toggle-close
 109             font-size 70px
 110             cursor pointer
 111             display block
 112             $$ float right
 113             height 35px
 114             $$ margin-top -0.7rem
 115             width 35px

/ittf/meta/document/t/css/modal.css.ittf

edit 
                                            
   1 $group
   2     . modal
   3         display none
   4         position fixed
   5         z-index 1
   6         left 0
   7         top 0
   8         width 100%
   9         height 100%
  10         overflow auto
  11         background-color rgb(0,0,0)
  12         background-color rgba(0,0,0,0.4)
  13     . modal-content
  14         background-color #fefefe
  15         margin 5% auto
  16         padding 20px
  17         border 1px solid #888
  18         width 80%
  19     . modal-close
  20         color #aaa
  21         float right
  22         font-size 28px
  23         font-weight bold
  24     . modal-close:hover
  25         + .modal-close:focus
  26         color black
  27         text-decoration none
  28         cursor pointer

/ittf/meta/document/t/css/editor.css.ittf

edit 
                                            
   1 $group
   2     . editor-form
   3         display flex
   4         flex-direction column
   5     . editor-content
   6         display flex
   7         flex-direction row
   8     . editor-buttons
   9         display flex
  10         flex-direction column
  11         padding 2rem 5rem
  12     . editor-title
  13         font-size 1.2rem
  14         font-weight 900
  15         padding-bottom 0.2rem
  16     . editor-panel
  17     . editor-button
  18         background-color #666
  19         color #fff
  20         text-align center
  21         padding 1rem
  22         margin-bottom 0.5rem
  23         border-radius 0.5rem
  24         cursor pointer
  25         & :hover
  26             background-color #999
  27             color #ff0

/ittf/meta/t/css/sidebar-left.css.ittf

edit 
                                            
   1 $group
   2     . mc-sidebar-left
   3         padding 20px 30px
   4         $$ still i can't find why i need to subtract these
   5         height calc(100% - 10rem)
   6         min-width 20rem
   7         overflow auto
   8         < ul
   9             display flex
  10             justify-content space-between
  11             flex-direction column
  12             list-style-type none
  13             transition all 1s ease
  14             < li
  15                 border-bottom 1px solid ${opt.c_0}
  16                 color ${opt.c_0}
  17                 display block
  18                 font-size 0.8rem
  19                 $$ padding 0.1rem 0 0.1rem 1rem
  20                 padding 0
  21                 < a
  22                     color ${opt.c_0}
  23             < li:last-child
  24                 border-bottom 0
  25     . mc-sidebar-left-title
  26         display none

/ittf/meta/t/css/breadcrumbs.css.ittf

edit 
                                            
   1 $group
   2     . breadcrumb
   3         # centering
   4         display inline-block
   5         box-shadow 0 0 15px 1px rgba(0, 0, 0, 0.35)
   6         overflow hidden
   7         border-radius 5px
   8         # Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links
   9         counter-reset flag
  10     . breadcrumb a
  11         text-decoration none
  12         outline none
  13         display block
  14         float left
  15         font-size 12px
  16         line-height 36px
  17         color white
  18         # need more margin on the left of links to accomodate the numbers
  19         padding 0 10px 0 60px
  20         background #666
  21         background linear-gradient(#666, #333)
  22         position relative
  23     # since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links
  24     . breadcrumb a:first-child
  25         padding-left 46px
  26         border-radius 5px 0 0 5px
  27         # to match with the parent's radius
  28     . breadcrumb a:first-child:before
  29         left 14px
  30     . breadcrumb a:last-child
  31         border-radius 0 5px 5px 0
  32         # this was to prevent glitches on hover
  33         padding-right 20px
  34     # hover/active styles
  35     . breadcrumb a.active
  36         + .breadcrumb a:hover
  37         background #333
  38         background linear-gradient(#333, #000)
  39     . breadcrumb a.active:after
  40         + .breadcrumb a:hover:after
  41         background #333
  42         background linear-gradient(135deg, #333, #000)
  43     # adding the arrows for the breadcrumbs using rotated pseudo elements
  44     . breadcrumb a:after
  45         content ''
  46         position absolute
  47         top 0
  48         right -18px
  49         # half of square's length
  50         # same dimension as the line-height of .breadcrumb a
  51         width 36px
  52         height 36px
  53         #
  54             # as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
  55             # length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
  56             # if diagonal required = 1; length = 1/1.414 = 0.707
  57         transform scale(0.707) rotate(45deg)
  58         # we need to prevent the arrows from getting buried under the next link
  59         z-index 1
  60         # background same as links but the gradient will be rotated to compensate with the transform applied
  61         background #666
  62         background linear-gradient(135deg, #666, #333)
  63         # stylish arrow design using box shadow
  64         box-shadow 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1)
  65         #
  66             #
  67             # 5px - for rounded arrows and
  68             # 50px - to prevent hover glitches on the border created using shadows
  69         border-radius 0 5px 0 50px
  70     # we dont need an arrow after the last link
  71     . breadcrumb a:last-child:after
  72         content none
  73     # we will use the :before element to show numbers
  74     . breadcrumb a:before
  75         content counter(flag)
  76         counter-increment flag
  77         # some styles now
  78         border-radius 100%
  79         width 20px
  80         height 20px
  81         line-height 20px
  82         margin 8px 0
  83         position absolute
  84         top 0
  85         left 30px
  86         background #444
  87         background linear-gradient(#444, #222)
  88         font-weight bold
  89     . flat a
  90         + .flat a:after
  91         background white
  92         color black
  93         transition all 0.5s
  94     . flat a:before
  95         background white
  96         box-shadow 0 0 0 1px #ccc
  97     . flat a:hover
  98         + .flat a.active
  99         + .flat a:hover:after
 100         + .flat a.active:after
 101         background #9EEB62