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