/ittf/meta/html/styles.css.ittf (primary)
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 s/tn 25 $include s/fsitems 26 $include s/mc 27 $include s/modal 28 $include s/editor 29 $include css/sidebar-left 30 $include css/breadcrumbs
/ittf/meta/t/options-init.ittf
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
1 $group 2 $ 3 if (opt.sidebar_1) { 4 opt.fa_1 = true; 5 }
/ittf/meta/html/t/s/tn.css.ittf
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/html/t/s/fsitems.css.ittf
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/html/t/s/mc.css.ittf
1 $group 2 # mc-wrapper 3 position fixed 4 width 100% 5 height 100% 6 $if 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/html/t/s/modal.css.ittf
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/html/t/s/editor.css.ittf
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
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
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