├── .gitignore
├── README.md
├── components.css
├── index.html
├── main.css
└── variables.css


/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | *.codekit
3 | 
4 | config.codekit
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # modulator
2 | 
3 | ![](https://i.imgur.com/KG8uHPD.png)
4 | 


--------------------------------------------------------------------------------
/components.css:
--------------------------------------------------------------------------------
  1 | .components-section {
  2 | 	padding-bottom: 48px;
  3 | 	margin-bottom: 48px;
  4 | 	box-shadow: 0 1px rgba(0,0,0,.1);
  5 | }
  6 | 
  7 | .components-variables-section {
  8 | 	background-color: hsl(219, 43%, 97%);
  9 | 	margin-left: calc(-1 * var(--contentPadding));
 10 | 	margin-right: calc(-1 * var(--contentPadding));
 11 | 	margin-top: calc(-1 * var(--contentPadding));
 12 | 	padding-top: var(--contentPadding);
 13 | 	padding-left: var(--contentPadding);
 14 | 	padding-right: var(--contentPadding);
 15 | }
 16 | 
 17 | @media (max-width: 720px) {
 18 | 	.components-variables-section {
 19 | 		padding-top: 128px;
 20 | 	}
 21 | }
 22 | 
 23 | .components-section-title {
 24 | 	font-size: var(--fontSize-2);
 25 | 	line-height: var(--lineHeight-2);
 26 | 	margin-bottom: 32px;
 27 | 	font-weight: 700;
 28 | }
 29 | 
 30 | .components-section-row {
 31 | 	display: flex;
 32 | 	flex-wrap: wrap;
 33 | }
 34 | 
 35 | .components-section-col {
 36 | 	flex-grow: 1;
 37 | }
 38 | 
 39 | .components-section-col:not(:last-child) {
 40 | 	margin-right: 32px;
 41 | }
 42 | 
 43 | .components-section-spacers-col {
 44 | 	flex-grow: 0;
 45 | }
 46 | 
 47 | .size-box {
 48 | 	width: 32px;
 49 | 	height: 16px;
 50 | 	margin-bottom: 4px;
 51 | 	background-color: #008FE5;
 52 | }
 53 | 
 54 | .size-box-section-description {
 55 | 	opacity: .6;
 56 | 	margin-bottom: 8px;
 57 | }
 58 | 
 59 | .size-box-section {
 60 | 	margin-bottom: 32px;
 61 | }
 62 | 
 63 | .size0 {
 64 | 	font-size: var(--fontSize-0);
 65 | 	line-height: var(--lineHeight-0);
 66 | }
 67 | 
 68 | .size1 {
 69 | 	font-size: var(--fontSize-1);
 70 | 	line-height: var(--lineHeight-1);
 71 | }
 72 | 
 73 | .size2 {
 74 | 	font-size: var(--fontSize-2);
 75 | 	line-height: var(--lineHeight-2);
 76 | }
 77 | 
 78 | .size3 {
 79 | 	font-size: var(--fontSize-3);
 80 | 	line-height: var(--lineHeight-3);
 81 | }
 82 | 
 83 | .font-size {
 84 | 	margin-bottom: 8px;
 85 | }
 86 | 
 87 | .maxw-sm { max-width: var(--width-sm) }
 88 | .maxw-md { max-width: var(--width-md) }
 89 | .maxw-lg { max-width: var(--width-lg) }
 90 | .maxw-xlg { max-width: var(--width-xlg) }
 91 | 
 92 | 
 93 | .btn {
 94 | 	background-color: #444444;
 95 | 	color: white;
 96 | 	padding: var(--space-sm) var(--space-md);
 97 | 	display: inline-block;
 98 | 	appearance: none;
 99 | 	-webkit-appearance: none;
100 | 	text-decoration: none;
101 | 	font: inherit;
102 | 	border: 0;
103 | 	border-radius: 3px;
104 | 	cursor: pointer;
105 | }
106 | 
107 | .input-field {
108 | 	font: inherit;
109 | 	padding: var(--space-sm) var(--space-md);
110 | 	border-radius: 3px;
111 | 	border: 0;
112 | 	box-shadow: inset 0 0 0 1px #ccc;
113 | 	color: inherit;
114 | 	width: 100%;
115 | }
116 | 
117 | .input-group-label {
118 | 	margin-bottom: var(--space-sm);
119 | }
120 | 
121 | .form-section {
122 | 	margin-bottom: var(--space-md);
123 | }
124 | 
125 | .card {
126 | 	padding: var(--space-md) var(--space-lg);
127 | 	border-radius: 3px;
128 | 	border: 1px solid #ccc;
129 | }
130 | 
131 | .card-header {
132 | 	font-size: var(--fontSize-2);
133 | 	line-height: var(--lineHeight-2);
134 | 	margin-bottom: var(--space-md);
135 | }
136 | 
137 | .list-item:not(:first-child) {
138 | 	padding-top: var(--space-md);
139 | }
140 | 
141 | .list-item:not(:last-child) {
142 | 	border-bottom: 1px solid #ccc;
143 | 	padding-bottom: var(--space-md);
144 | }
145 | 
146 | .list-sm .list-item:not(:first-child) {
147 | 	padding-top: var(--space-sm);
148 | }
149 | 
150 | .list-sm .list-item:not(:last-child) {
151 | 	padding-bottom: var(--space-sm);
152 | }
153 | 
154 | .list-lg .list-item:not(:first-child) {
155 | 	padding-top: var(--space-lg);
156 | }
157 | 
158 | .list-lg .list-item:not(:last-child) {
159 | 	padding-bottom: var(--space-lg);
160 | }
161 | 
162 | .avatar {
163 | 	display: flex;
164 | 	align-items: center;
165 | }
166 | 
167 | .avatar-img {
168 | 	border-radius: 50%;
169 | 	width: calc(var(--u) * 4);
170 | }
171 | 
172 | .avatar-letter {
173 | 	border-radius: 50%;
174 | 	width: calc(var(--u) * 4);
175 | 	height: calc(var(--u) * 4);
176 | 	background-color: #ddd;
177 | 	display: inline-flex;
178 | 	align-items: center;
179 | 	justify-content: center;
180 | 	text-transform: uppercase;
181 | }
182 | 
183 | .avatar-info {
184 | 	margin-left: var(--space-sm);
185 | }
186 | 
187 | .dropdown-trigger {
188 | 	padding: var(--space-sm) var(--space-md);
189 | 	border-radius: 3px;
190 | 	box-shadow: inset 0 0 0 1px #ccc;
191 | 	position: relative;
192 | 	cursor: pointer;
193 | }
194 | 
195 | .dropdown.isopen .dropdown-trigger {
196 | 	border-radius: 3px 3px 0 0;
197 | }
198 | 
199 | .dropdown-trigger:after {
200 | 	content: '';
201 | 	width: 8px;
202 | 	height: 8px;
203 | 	right: var(--space-md);
204 | 	top: 0;
205 | 	bottom: 6px;
206 | 	margin: auto;
207 | 	display: block;
208 | 	position: absolute;
209 | 	box-shadow: 1px 1px currentColor;
210 | 	transform: rotate(45deg);
211 | }
212 | 
213 | .dropdown-menu {
214 | 	display: none;
215 | 	border: 1px solid #ccc;
216 | 	border-width: 0 1px 1px 1px;
217 | 	border-radius: 0 0 3px 3px;
218 | 	padding: var(--space-sm) 0;
219 | }
220 | 
221 | .dropdown.isopen .dropdown-menu {
222 | 	display: block;
223 | }
224 | 
225 | .dropdown-menu-item {
226 | 	padding: var(--space-sm) var(--space-md);
227 | 	cursor: pointer;
228 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>Modulator</title>
  6 |     <meta name="description" content="">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 
  9 |     <link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
 10 | 
 11 |     <link rel="stylesheet" href="variables.css">
 12 |     <link rel="stylesheet" href="main.css">
 13 |     <link rel="stylesheet" href="components.css">
 14 | 
 15 |   </head>
 16 |   <body>
 17 |     <div class="global-container">
 18 |       <div class="sidebar">
 19 | 
 20 |         <h1 class="main-title">modulator</h1>
 21 | 
 22 |         <div class="st-section">
 23 |           <div class="st-section-title">
 24 |             Grid
 25 |           </div>
 26 |           <label class="st-row">
 27 |             <div class="st-title">unit</div>
 28 |             <div class="st-content">
 29 |               <input type="number" class="st-input-unit js-st-input-unit var-u" value="8" onkeyup="changeUnit()">
 30 |               <div class="st-input-suffix">px</div>
 31 |             </div>
 32 |           </label>
 33 |         </div>
 34 |         <div class="st-section">
 35 |           <div class="st-section-title">
 36 |             Spaces
 37 |           </div>
 38 |           <label class="st-row">
 39 |             <div class="st-title">sm</div>
 40 |             <div class="st-content">
 41 |               <input id="space-sm" type="number" class="st-input js-st-input" value="1">
 42 |               <div class="st-input-suffix">unit</div>
 43 |             </div>
 44 |           </label>
 45 |           <label class="st-row">
 46 |             <div class="st-title">md</div>
 47 |             <div class="st-content">
 48 |               <input id="space-md" type="number" class="st-input js-st-input" value="2">
 49 |               <div class="st-input-suffix">unit</div>
 50 |             </div>
 51 |           </label>
 52 |           <label class="st-row">
 53 |             <div class="st-title">lg</div>
 54 |             <div class="st-content">
 55 |               <input id="space-lg" type="number" class="st-input js-st-input" value="3">
 56 |               <div class="st-input-suffix">unit</div>
 57 |             </div>
 58 |           </label>
 59 |           <label class="st-row">
 60 |             <div class="st-title">xlg</div>
 61 |             <div class="st-content">
 62 |               <input id="space-xlg" type="number" class="st-input js-st-input" value="8">
 63 |               <div class="st-input-suffix">unit</div>
 64 |             </div>
 65 |           </label>
 66 |         </div>
 67 |         <div class="st-section">
 68 |           <div class="st-section-title">
 69 |             Widths
 70 |           </div>
 71 |           <label class="st-row">
 72 |             <div class="st-title">sm</div>
 73 |             <div class="st-content">
 74 |               <input id="width-sm" type="number" class="st-input js-st-input" value="8">
 75 |               <div class="st-input-suffix">unit</div>
 76 |             </div>
 77 |           </label>
 78 |           <label class="st-row">
 79 |             <div class="st-title">md</div>
 80 |             <div class="st-content">
 81 |               <input id="width-md" type="number" class="st-input js-st-input" value="16">
 82 |               <div class="st-input-suffix">unit</div>
 83 |             </div>
 84 |           </label>
 85 |           <label class="st-row">
 86 |             <div class="st-title">lg</div>
 87 |             <div class="st-content">
 88 |               <input id="width-lg" type="number" class="st-input js-st-input" value="32">
 89 |               <div class="st-input-suffix">unit</div>
 90 |             </div>
 91 |           </label>
 92 |           <label class="st-row">
 93 |             <div class="st-title">xlg</div>
 94 |             <div class="st-content">
 95 |               <input id="width-xlg" type="number" class="st-input js-st-input" value="64">
 96 |               <div class="st-input-suffix">unit</div>
 97 |             </div>
 98 |           </label>
 99 |         </div>
100 |         <div class="st-section">
101 |           <div class="st-section-title">
102 |             Type scale
103 |           </div>
104 |           <div class="st-row-group">
105 |             <div class="st-row-group-title">
106 |               size 0
107 |             </div>
108 |             <label class="st-row">
109 |               <div class="st-title">font size</div>
110 |               <div class="st-content">
111 |                 <input id="fontSize-0" type="number" class="st-input js-st-input-font-size" value="14">
112 |                 <div class="st-input-suffix">px</div>
113 |               </div>
114 |             </label>
115 |             <label class="st-row">
116 |               <div class="st-title">line height</div>
117 |               <div class="st-content">
118 |                 <input id="lineHeight-0" type="number" class="st-input js-st-input" value="2.5">
119 |                 <div class="st-input-suffix">unit</div>
120 |               </div>
121 |             </label>
122 |           </div>
123 |           <div class="st-row-group">
124 |             <div class="st-row-group-title">
125 |               size 1
126 |             </div>
127 |             <label class="st-row">
128 |               <div class="st-title">font size</div>
129 |               <div class="st-content">
130 |                 <input id="fontSize-1" type="number" class="st-input js-st-input-font-size" value="18">
131 |                 <div class="st-input-suffix">px</div>
132 |               </div>
133 |             </label>
134 |             <label class="st-row">
135 |               <div class="st-title">line height</div>
136 |               <div class="st-content">
137 |                 <input id="lineHeight-1" type="number" class="st-input js-st-input" value="3">
138 |                 <div class="st-input-suffix">unit</div>
139 |               </div>
140 |             </label>
141 |           </div>
142 |           <div class="st-row-group">
143 |             <div class="st-row-group-title">
144 |               size 2
145 |             </div>
146 |             <label class="st-row">
147 |               <div class="st-title">font size</div>
148 |               <div class="st-content">
149 |                 <input id="fontSize-2" type="number" class="st-input js-st-input-font-size" value="22">
150 |                 <div class="st-input-suffix">px</div>
151 |               </div>
152 |             </label>
153 |             <label class="st-row">
154 |               <div class="st-title">line height</div>
155 |               <div class="st-content">
156 |                 <input id="lineHeight-2" type="number" class="st-input js-st-input" value="4">
157 |                 <div class="st-input-suffix">unit</div>
158 |               </div>
159 |             </label>
160 |           </div>
161 |           <div class="st-row-group">
162 |             <div class="st-row-group-title">
163 |               size 3
164 |             </div>
165 |             <label class="st-row">
166 |               <div class="st-title">font size</div>
167 |               <div class="st-content">
168 |                 <input id="fontSize-3" type="number" class="st-input js-st-input-font-size" value="30">
169 |                 <div class="st-input-suffix">px</div>
170 |               </div>
171 |             </label>
172 |             <label class="st-row">
173 |               <div class="st-title">line height</div>
174 |               <div class="st-content">
175 |                 <input id="lineHeight-3" type="number" class="st-input js-st-input" value="5">
176 |                 <div class="st-input-suffix">unit</div>
177 |               </div>
178 |             </label>
179 |           </div>
180 |         </div>
181 |         
182 |         <div class="author-section">
183 |           made by
184 |           <a class="link" href="http://hihayk.com/" target="_blank">hayk</a>
185 |         </div>
186 |       </div>
187 |       <div class="sidebar-backdrop" onclick="toggleSidebar()"></div>
188 |       <div class="main-section">
189 | 
190 |         <div class="sidebar-toggle" onclick="toggleSidebar()">
191 |           <span>modulator</span>
192 |         </div>
193 | 
194 |         <div class="components-section components-variables-section">
195 |           
196 |           <div class="components-section-row">
197 |             <div class="components-section-col components-section-spacers-col">
198 |               <div class="size-box-section">
199 |               <div class="size-box-section-title">unit</div>
200 |               <div class="size-box-section-description">
201 |                 adjust the unit on the left sidebar
202 |               </div>
203 |               
204 |               <div class="size-box" style="width: var(--u)"></div>
205 |             </div>
206 | 
207 |             <div class="size-box-section">
208 |               <div class="size-box-section-title">spaces</div>
209 |               <div class="size-box-section-description">
210 |                 adjust the spaces on the left sidebar
211 |               </div>
212 |               
213 |               <div class="size-box" style="width: var(--space-sm)"></div>
214 |               <div class="size-box" style="width: var(--space-md)"></div>
215 |               <div class="size-box" style="width: var(--space-lg)"></div>
216 |               <div class="size-box" style="width: var(--space-xlg)"></div>
217 |             </div>
218 | 
219 |             <div class="size-box-section">
220 |               <div class="size-box-section-title">widths</div>
221 |               <div class="size-box-section-description">
222 |                 adjust the widths on the left sidebar
223 |               </div>
224 | 
225 |               <div class="size-box" style="width: var(--width-sm)"></div>
226 |               <div class="size-box" style="width: var(--width-md)"></div>
227 |               <div class="size-box" style="width: var(--width-lg)"></div>
228 |               <div class="size-box" style="width: var(--width-xlg)"></div>
229 |             </div>
230 |             </div>
231 |             <div class="components-section-col">
232 |               <div class="maxw-xlg">
233 |                 <div class="size-box-section-title">type scale</div>
234 |                 <div class="size-box-section-description">adjust the sizes on the left sidebar</div>
235 | 
236 |                 <div class="size3 font-size" contenteditable spellcheck="false">
237 |                   <span class="fs"></span> / 
238 |                   <span class="lh"></span>
239 |                    – size 3
240 |                 </div>
241 |                 
242 |                 <div class="size2 font-size" contenteditable spellcheck="false">
243 |                   <span class="fs"></span> / 
244 |                   <span class="lh"></span>
245 |                    – size 2
246 |                 </div>
247 |                 
248 |                 <div class="size1 font-size" contenteditable spellcheck="false">
249 |                   <span class="fs"></span> / 
250 |                   <span class="lh"></span>
251 |                    – size 1
252 |                 </div>
253 |                 
254 |                 <div class="size0 font-size" contenteditable spellcheck="false">
255 |                   <span class="fs"></span> / 
256 |                   <span class="lh"></span>
257 |                    – size 0
258 |                 </div>
259 |               </div>
260 |             </div>
261 |           </div>
262 |           
263 |         </div>
264 | 
265 |         <div class="components-section">
266 |           <div class="components-section-title">Button</div>
267 |           <button class="btn">button</button>
268 |         </div>
269 | 
270 |         <div class="components-section">
271 |           <div class="components-section-title">Input</div>
272 |           <div class="maxw-lg">
273 |             <input class="input-field" type="text" placeholder="input">
274 |           </div>
275 |         </div>
276 | 
277 |         <div class="components-section">
278 |           <div class="components-section-title">Dropdown</div>
279 | 
280 |           <div class="components-section-row">
281 |             <div class="components-section-col maxw-lg">
282 |               <div class="dropdown isopen">
283 |                 <div class="dropdown-trigger" tabindex="0">dropdown</div>
284 |                 <div class="dropdown-menu">
285 |                   <div class="dropdown-menu-item">dropdown menu item</div>
286 |                   <div class="dropdown-menu-item">dropdown menu item</div>
287 |                   <div class="dropdown-menu-item">dropdown menu item</div>
288 |                 </div>
289 |               </div>
290 |             </div>
291 | 
292 |             <div class="components-section-col maxw-lg">
293 |               <div class="dropdown">
294 |                 <div class="dropdown-trigger" tabindex="0">dropdown</div>
295 |                 <div class="dropdown-menu">
296 |                   <div class="dropdown-menu-item">dropdown menu item</div>
297 |                   <div class="dropdown-menu-item">dropdown menu item</div>
298 |                   <div class="dropdown-menu-item">dropdown menu item</div>
299 |                 </div>
300 |               </div>  
301 |             </div>
302 |           </div>
303 |         </div>
304 | 
305 |         <div class="components-section">
306 |           <div class="components-section-title">Form</div>
307 |           <div class="form-container maxw-xlg">
308 |             <div class="form-section">
309 |               <div class="input-group">
310 |                 <div class="input-group-label">label</div>
311 |                 <input class="input-field" type="text" placeholder="input">
312 |               </div>
313 |             </div>
314 |             <div class="form-section">
315 |               <div class="input-group">
316 |                 <div class="input-group-label">label</div>
317 |                 <input class="input-field" type="text" placeholder="input">
318 |               </div>
319 |             </div>
320 |             <div class="form-section">
321 |               <div class="input-group">
322 |                 <div class="input-group-label">label</div>
323 |                 <div class="dropdown">
324 |                   <div class="dropdown-trigger" tabindex="0">dropdown</div>
325 |                   <div class="dropdown-menu">
326 |                     <div class="dropdown-menu-item">dropdown menu item</div>
327 |                     <div class="dropdown-menu-item">dropdown menu item</div>
328 |                     <div class="dropdown-menu-item">dropdown menu item</div>
329 |                   </div>
330 |                 </div> 
331 |               </div>
332 |             </div>
333 |             <div class="form-section">
334 |               <button class="btn">button</button>
335 |             </div>
336 |           </div>
337 |         </div>
338 |         
339 |         <div class="components-section">
340 |           <div class="components-section-title">Card</div>
341 |           <div class="maxw-xlg">
342 |             <div class="card">
343 |               <div class="card-header" contenteditable spellcheck="false">
344 |                 Card title
345 |               </div>
346 |               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
347 |             </div>
348 |           </div>
349 |         </div>
350 | 
351 |         <div class="components-section">
352 |           <div class="components-section-title">List</div>
353 |           <div class="components-section-row">
354 | 
355 |           <div class="components-section-col maxw-lg">
356 | 
357 |             <div class="list list-lg">
358 |               <div class="list-item">
359 |                 list item
360 |               </div>
361 |               <div class="list-item">
362 |                 list item
363 |               </div>
364 |               <div class="list-item">
365 |                 list item
366 |               </div>
367 |             </div>
368 |             
369 |           </div>
370 |           <div class="components-section-col maxw-lg">
371 | 
372 |             <div class="list">
373 |               <div class="list-item">
374 |                 list item
375 |               </div>
376 |               <div class="list-item">
377 |                 list item
378 |               </div>
379 |               <div class="list-item">
380 |                 list item
381 |               </div>
382 |             </div>
383 |           
384 |           </div>
385 |           <div class="components-section-col maxw-lg">
386 | 
387 |             <div class="list list-sm">
388 |               <div class="list-item">
389 |                 list item
390 |               </div>
391 |               <div class="list-item">
392 |                 list item
393 |               </div>
394 |               <div class="list-item">
395 |                 list item
396 |               </div>
397 |             </div>
398 |           </div>
399 | 
400 |           </div>
401 |         </div>
402 | 
403 |         <div class="components-section">
404 |           <div class="components-section-title">Avatar</div>
405 |           <div class="avatar">
406 |             <img src="https://i.imgur.com/4ZXRQkH.png" alt="" class="avatar-img">
407 |             <div class="avatar-info">
408 |               Sophia Kelley
409 |             </div>
410 |           </div>
411 |           <br>
412 |           <div class="avatar">
413 |             <div class="avatar-letter">cf</div>
414 |           </div>
415 |         </div>
416 | 
417 |       </div>
418 |     </div>
419 | 
420 |     <script>
421 | 
422 |       const stInputs = [].slice.call(document.querySelectorAll('.js-st-input'));
423 | 
424 |       stInputs.forEach(input => input.addEventListener('change', handleUpdate));
425 |       stInputs.forEach(input => input.addEventListener('keyup', handleUpdate));
426 | 
427 |       function changeUnit() {
428 |         var currentUnit = document.querySelector('.js-st-input-unit').value;
429 |         document.documentElement.style.setProperty(`--u`, currentUnit + 'px');
430 |         updateSizes()
431 |       }
432 | 
433 |       function handleUpdate() {
434 |         var unit = parseFloat(window.getComputedStyle(document.documentElement).getPropertyValue('--u'));
435 |         document.documentElement.style.setProperty(`--${this.id}`, 'calc(' + this.value + ' * var(--u))');
436 |         updateSizes()
437 |       }
438 | 
439 |       function updateSizes() {
440 |         document.querySelector('.size0 .fs').innerHTML = window.getComputedStyle(document.querySelector('.size0')).getPropertyValue('font-size')
441 |         document.querySelector('.size0 .lh').innerHTML = window.getComputedStyle(document.querySelector('.size0')).getPropertyValue('line-height')
442 |         document.querySelector('.size1 .fs').innerHTML = window.getComputedStyle(document.querySelector('.size1')).getPropertyValue('font-size')
443 |         document.querySelector('.size1 .lh').innerHTML = window.getComputedStyle(document.querySelector('.size1')).getPropertyValue('line-height')
444 |         document.querySelector('.size2 .fs').innerHTML = window.getComputedStyle(document.querySelector('.size2')).getPropertyValue('font-size')
445 |         document.querySelector('.size2 .lh').innerHTML = window.getComputedStyle(document.querySelector('.size2')).getPropertyValue('line-height')
446 |         document.querySelector('.size3 .fs').innerHTML = window.getComputedStyle(document.querySelector('.size3')).getPropertyValue('font-size')
447 |         document.querySelector('.size3 .lh').innerHTML = window.getComputedStyle(document.querySelector('.size3')).getPropertyValue('line-height')
448 |       }
449 | 
450 |       updateSizes()
451 | 
452 |       const stFontSizeInputs = [].slice.call(document.querySelectorAll('.js-st-input-font-size'));
453 |       stFontSizeInputs.forEach(input => input.addEventListener('change', handleUpdateFontSize));
454 |       stFontSizeInputs.forEach(input => input.addEventListener('keyup', handleUpdateFontSize));
455 | 
456 |       function handleUpdateFontSize() {
457 |         document.documentElement.style.setProperty(`--${this.id}`, this.value + 'px');
458 |         updateSizes()
459 |       }
460 | 
461 |       function toggleSidebar() {
462 |         document.querySelector('.sidebar').classList.toggle('isopen')
463 |       }
464 | 
465 |     </script>
466 |   </body>
467 | </html>
468 | 


--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
  1 | *,*:before,*:after {
  2 | 	box-sizing: border-box;
  3 | }
  4 | 
  5 | *:focus {
  6 | 	outline-color: var(--blue); 
  7 | }
  8 | 
  9 | body {
 10 | 	margin: 0;
 11 | 	font-size: 12px;
 12 | 	line-height: 20px;
 13 | 	font-family: 'Space Mono', monospace;
 14 | 	color: #6c6c6c;
 15 | 	-webkit-font-smoothing: antialiased;
 16 | 	-moz-osx-font-smoothing: grayscale;
 17 | }
 18 | 
 19 | img {
 20 | 	max-width: 100%;
 21 | }
 22 | 
 23 | .global-container {
 24 | 	display: flex;
 25 | 	height: 100vh;
 26 | }
 27 | 
 28 | .sidebar {
 29 | 	border-right: 1px solid #D8D8D8;
 30 | 	overflow: auto;
 31 | 	flex-shrink: 0;
 32 | 	transition: .2s;
 33 | }
 34 | 
 35 | @media (max-width: 720px) {
 36 | 	.global-container {
 37 | 		position: relative;
 38 | 	}
 39 | 
 40 | 	.sidebar {
 41 | 		background-color: white;
 42 | 		transform: translateX(-100%);
 43 | 		position: absolute;
 44 | 		left: 0;
 45 | 		top: 0;
 46 | 		z-index: 100;
 47 | 	}
 48 | 
 49 | 	.sidebar.isopen {
 50 | 		transform: translateX(0%);
 51 | 	}
 52 | 
 53 | 	.sidebar-backdrop {
 54 | 		position: fixed;
 55 | 		width: 0;
 56 | 		height: 100%;
 57 | 		background-color: var(--blueLight);
 58 | 		opacity: 0;
 59 | 		z-index: 90;
 60 | 	}
 61 | 
 62 | 	.sidebar.isopen + .sidebar-backdrop {
 63 | 		opacity: .8;
 64 | 		width: 100%;
 65 | 	}
 66 | }
 67 | 
 68 | .main-title {
 69 | 	padding: 8px 24px;
 70 | 	font-size: 22px;
 71 | 	line-height: 32px;
 72 | 	font-weight: 400;
 73 | 	margin-bottom: 64px;
 74 | }
 75 | 
 76 | .sidebar-toggle {
 77 | 	display: none;
 78 | }
 79 | 
 80 | @media (max-width: 720px) {
 81 | 	.main-title {
 82 | 		opacity: 0;
 83 | 	}
 84 | 
 85 | 	.sidebar-toggle {
 86 | 		position: fixed;
 87 | 		top: 16px;
 88 | 		left: 24;
 89 | 		z-index: 120;
 90 | 		width: 100%;
 91 | 		font-family: 'Space Mono', monospace;
 92 | 		font-size: 20px;
 93 | 		line-height: 28px;
 94 | 		color: #6c6c6c;
 95 | 		display: block;
 96 | 	}
 97 | 
 98 | 	.sidebar-toggle span {
 99 | 		background-color: white;
100 | 		padding: 6px 16px 8px 16px;
101 | 		border: 1px solid #D8D8D8;
102 | 		display: inline-block;
103 | 		z-index: 1;
104 | 	}
105 | }
106 | 
107 | .main-section {
108 | 	padding: var(--contentPadding);
109 | 	overflow: auto;
110 | 	flex-grow: 1;
111 | 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
112 | 	font-size: var(--fontSize-0);
113 | 	line-height: var(--lineHeight-0);
114 | 	color: #444444;
115 | 	overflow-x: hidden;
116 | }
117 | 
118 | .st-section {
119 | 	padding: 16px 24px 8px 24px;
120 | 	border-bottom: 1px solid #D8D8D8;
121 | 	transition: .4s;
122 | }
123 | 
124 | .st-section:first-of-type {
125 | 	border-top: 1px solid #D8D8D8;
126 | }
127 | 
128 | .st-section:hover {
129 | 	background-color: var(--blueLight);
130 | 	transition: .15s;
131 | }
132 | 
133 | .st-section-title {
134 | 	margin-bottom: 12px;
135 | 	text-transform: uppercase;
136 | 	font-size: 11px;
137 | 	line-height: 18px;
138 | 	letter-spacing: 1px;
139 | 	font-weight: 700;
140 | }
141 | 
142 | .st-title {
143 | 	width: 106px;
144 | }
145 | 
146 | .st-row {
147 | 	display: flex;
148 | 	padding-bottom: 8px;
149 | 	cursor: pointer;
150 | }
151 | 
152 | .st-row-group {
153 | 	margin-bottom: 8px;
154 | }
155 | 
156 | .st-row-group-title {
157 | 	font-weight: 700;
158 | 	margin-bottom: 8px;
159 | }
160 | 
161 | .st-content {
162 | 	display: flex;
163 | }
164 | 
165 | .st-input, 
166 | .st-input-unit {
167 | 	width: 24px;
168 | 	font: inherit;
169 | 	color: inherit;
170 | 	border: 0;
171 | 	padding: 0;
172 | 	border-bottom: 2px solid rgba(0,0,0,.15);
173 | 	text-align: center;
174 | 	margin-right: 8px;
175 | 	background-color: transparent;
176 | 	-moz-appearance: textfield;
177 | }
178 | 
179 | .st-input::-moz-selection,
180 | .st-input-unit::-moz-selection { 
181 | 	background-color: var(--blue);
182 | 	color: white;
183 | }
184 | .st-input::selection,
185 | .st-input-unit::selection { 
186 | 	background-color: var(--blue);
187 | 	color: white;
188 | }
189 | 
190 | .st-input:focus,
191 | .st-input-unit:focus {
192 | 	border-bottom-color: var(--blue);
193 | 	outline: 0;
194 | }
195 | 
196 | .st-input-unit[type=number]::-webkit-inner-spin-button, 
197 | .st-input-unit[type=number]::-webkit-outer-spin-button { 
198 |   -webkit-appearance: none; 
199 |   margin: 0; 
200 | }
201 | 
202 | .st-input[type=number]::-webkit-inner-spin-button, 
203 | .st-input[type=number]::-webkit-outer-spin-button { 
204 |   -webkit-appearance: none; 
205 |   margin: 0; 
206 | }
207 | 
208 | .author-section {
209 | 	padding: 96px 24px 24px 24px;
210 | }
211 | 
212 | .link {
213 | 	text-decoration: none;
214 | 	color: inherit;
215 | 	border-bottom: 1px solid;
216 | }


--------------------------------------------------------------------------------
/variables.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	--u:8px;
 3 | 	
 4 | 	--space-sm: calc(var(--u) * 1);
 5 | 	--space-md: calc(var(--u) * 2);
 6 | 	--space-lg: calc(var(--u) * 3);
 7 | 	--space-xlg: calc(var(--u) * 8);
 8 | 
 9 | 	--width-sm: calc(var(--u) * 8);
10 | 	--width-md: calc(var(--u) * 16);
11 | 	--width-lg: calc(var(--u) * 32);
12 | 	--width-xlg: calc(var(--u) * 64);
13 | 
14 | 	--fontSize-0: 14px;
15 | 	--fontSize-1: 18px;
16 | 	--fontSize-2: 22px;
17 | 	--fontSize-3: 30px;
18 | 
19 | 	--lineHeight-0: calc(var(--u) * 2,5);
20 | 	--lineHeight-1: calc(var(--u) * 3);
21 | 	--lineHeight-2: calc(var(--u) * 4);
22 | 	--lineHeight-3: calc(var(--u) * 5);
23 | 
24 | 	--blue: #008FE5;
25 | 	--blueLight: hsl(219, 43%, 97%);
26 | 
27 | 	--contentPadding: 64px;
28 | }
29 | 
30 | @media (max-width: 720px) {
31 | 	:root {
32 | 		--contentPadding: 32px;
33 | 	}	
34 | }


--------------------------------------------------------------------------------