81 cursor: pointer; |
82 cursor: pointer; |
82 color: #3060f8; |
83 color: #3060f8; |
83 text-decoration: none; |
84 text-decoration: none; |
84 } |
85 } |
85 |
86 |
|
87 #body-area { |
|
88 display: grid; |
|
89 grid-template-columns: max-content auto; |
|
90 grid-template-rows: max-content 1fr; |
|
91 height: 100%; |
|
92 } |
|
93 |
86 #mainMenu { |
94 #mainMenu { |
87 position: fixed; |
95 grid-row: 1; |
88 z-index: 2; |
96 grid-column: 1 / span 2; |
89 width: 100%; |
97 width: 100%; |
90 display: flex; |
98 display: flex; |
91 flex-flow: row wrap; |
99 flex-flow: row wrap; |
92 border-image-source: linear-gradient(to right, #606060, rgba(60, 60, 60, .25)); |
100 border-image-source: linear-gradient(to right, #606060, rgba(60, 60, 60, .25)); |
93 border-image-slice: 1; |
101 border-image-slice: 1; |
94 border-bottom-style: solid; |
102 border-bottom-style: solid; |
95 border-bottom-width: thin; |
103 border-bottom-width: thin; |
|
104 font-size: 1.2rem; |
|
105 background: #e0e0e5; |
96 } |
106 } |
97 |
107 |
98 #sideMenu { |
108 #sideMenu { |
|
109 grid-row: 2; |
|
110 grid-column: 1; |
99 display: flex; |
111 display: flex; |
100 z-index: 1; |
|
101 flex-flow: column; |
112 flex-flow: column; |
102 position: fixed; |
|
103 height: 100%; |
|
104 width: 40ch; /* adjust with sidebar-spacing.margin-left */ |
|
105 padding-top: 2.25rem; |
|
106 color: #3060f8; |
113 color: #3060f8; |
107 border-image-source: linear-gradient(to bottom, #606060, rgba(60, 60, 60, .25)); |
114 border-image-source: linear-gradient(to bottom, #606060, rgba(60, 60, 60, .25)); |
108 border-image-slice: 1; |
115 border-image-slice: 1; |
109 border-right-style: solid; |
116 border-right-style: solid; |
110 border-right-width: thin; |
117 border-right-width: thin; |
111 } |
|
112 |
|
113 #content-area.sidebar-spacing { |
|
114 margin-left: 40ch; /* adjust with sideMenu.width */ |
|
115 } |
|
116 |
|
117 #mainMenu { |
|
118 font-size: 1.2rem; |
|
119 background: #e0e0e5; |
|
120 } |
|
121 |
|
122 #sideMenu { |
|
123 background: #f7f7ff; |
118 background: #f7f7ff; |
124 overflow-x: scroll; |
|
125 } |
119 } |
126 |
120 |
127 #mainMenu .menuEntry { |
121 #mainMenu .menuEntry { |
128 padding: .25em 1em .25em 1em; |
122 padding: .25em 1em .25em 1em; |
129 border-right-style: solid; |
123 border-right-style: solid; |
130 border-right-width: thin; |
124 border-right-width: thin; |
131 border-right-color: #9095a1; |
125 border-right-color: #9095a1; |
132 } |
126 } |
133 |
127 |
134 #sideMenu .menuEntry { |
128 #sideMenu .menuEntry { |
|
129 padding-right: 1em; |
135 padding-top: .25em; |
130 padding-top: .25em; |
136 padding-bottom: .25em; |
131 padding-bottom: .25em; |
137 border-bottom-style: solid; |
132 border-bottom-style: solid; |
138 border-bottom-width: thin; |
133 border-bottom-width: thin; |
139 border-bottom-color: #d7d7df; |
134 border-bottom-color: #d7d7df; |