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