├── README.md
├── notion.css
└── notion
    ├── 400.woff
    ├── 400i.woff
    ├── 600i.woff
    ├── 700.woff
    ├── 700i.woff
    ├── Notion.jpg
    ├── NotionCode.jpg
    ├── NotionPattern.jpg
    ├── logo.svg
    └── sidebar.svg


/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | <div id="top"></div>
  3 | 
  4 | <div align="center">
  5 | 
  6 | 
  7 | <img src="https://svg-rewriter.sachinraja.workers.dev/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2F%40mdi%2Fsvg%406.7.96%2Fsvg%2Flanguage-markdown.svg&fill=%23262626&width=200px&height=200px" style="width:200px;"/>
  8 | 
  9 | <h3 align="center">Typora theme - Notion.so</h3>
 10 | 
 11 | <p align="center">
 12 | My little attempt at recreating the notion.so theme and functionality through pure CSS themes.
 13 | </p>    
 14 | </div>
 15 | 
 16 | ##  1. <a name='TableofContents'></a>Table of Contents
 17 | 
 18 | 
 19 | * 1. [Table of Contents](#TableofContents)
 20 | * 2. [About The Project](#AboutTheProject)
 21 | 	* 2.1. [Built With](#BuiltWith)
 22 | 	* 2.2. [Installation](#Installation)
 23 | * 3. [Usage](#Usage)
 24 | 	* 3.1. [Main feature - Top image full width image](#Mainfeature-Topimagefullwidthimage)
 25 | 	* 3.2. [Hidden image folder](#Hiddenimagefolder)
 26 | 	* 3.3. [Embedded Header Logo](#EmbeddedHeaderLogo)
 27 | 	* 3.4. [Sidebar](#Sidebar)
 28 | 	* 3.5. [Fences and Codeblocks](#FencesandCodeblocks)
 29 | * 4. [ Customising](#Customising)
 30 | * 5. [Troubleshooting](#Troubleshooting)
 31 | * 6. [Contributing](#Contributing)
 32 | * 7. [License](#License)
 33 | * 8. [Contact](#Contact)
 34 | * 9. [Changelog](#Changelog)
 35 | 
 36 | 
 37 | 
 38 | ##  2. <a name='AboutTheProject'></a>About The Project
 39 | 
 40 | ![Notion Screenshot](https://github.com/IORoot/typora__notion-theme/blob/master/notion/Notion.jpg?raw=true)
 41 | ![Notion Screenshot](https://github.com/IORoot/typora__notion-theme/blob/master/notion/NotionPattern.jpg?raw=true)
 42 | 
 43 | <p align="right">(<a href="#top">back to top</a>)</p>
 44 | 
 45 | 
 46 | ###  2.1. <a name='BuiltWith'></a>Built With
 47 | 
 48 | This project was built with the following frameworks, technologies and software.
 49 | 
 50 | - [Typora](https://typora.io/)
 51 | 
 52 | <p align="right">(<a href="#top">back to top</a>)</p>
 53 | 
 54 | 
 55 | ###  2.2. <a name='Installation'></a>Installation
 56 | 
 57 | These are the steps to get up and running with this theme.
 58 | 
 59 | 1. Clone the repo into your typora theme folder
 60 |     ```sh
 61 |     git clone https://github.com/IORoot/typora__notion-theme
 62 |     ```
 63 | 
 64 | 
 65 | <p align="right">(<a href="#top">back to top</a>)</p>
 66 | 
 67 | 
 68 | ##  3. <a name='Usage'></a>Usage
 69 | 
 70 | Features listed below:
 71 | 
 72 | ###  3.1. <a name='Mainfeature-Topimagefullwidthimage'></a>Main feature - Top image full width image
 73 | 
 74 | Place an image in the very first paragraph of the page and it will be converted into a full-width, 30vh sized image across the top of the page. 
 75 | The image is aligned top-center. and the rest will be cropped. You can change this to be center-center in the CSS.
 76 | 
 77 | 
 78 | ###  3.2. <a name='Hiddenimagefolder'></a>Hidden image folder
 79 | 
 80 | Put all images in a 'hidden' folder called `.images`at the same directory level as the markdown file by selecting the option for images :  ''Copy image to custom folder"
 81 | 
 82 | ```
 83 | ./.images/${filename}
 84 | ```
 85 | 
 86 | ###  3.3. <a name='EmbeddedHeaderLogo'></a>Embedded Header Logo
 87 | 
 88 | I have my own logo embedded in the sidebar at the top as an SVG. Replace the SVG for your own.
 89 | 
 90 | ###  3.4. <a name='Sidebar'></a>Sidebar
 91 | 
 92 | - Custom Notion.so colour.
 93 | - Removed folder icons
 94 | - Can add custom SVG sidebar backgrounds.  (Line 165 is commented out in `notion.css` - uncomment to include background SVG in sidebar.)
 95 | 
 96 | 
 97 | ###  3.5. <a name='FencesandCodeblocks'></a>Fences and Codeblocks
 98 | 
 99 | Is similar to a dark 'Monokai' theme for VSCode.
100 | 
101 | ![Notion Screenshot](https://github.com/IORoot/typora__notion-theme/blob/master/notion/NotionCode.jpg?raw=true)
102 | 
103 | 
104 | ##  4. <a name='Customising'></a> Customising
105 | 
106 | Edit the CSS File to create any customisations.
107 | 
108 | ##  5. <a name='Troubleshooting'></a>Troubleshooting
109 | 
110 | None
111 | 
112 | <p align="right">(<a href="#top">back to top</a>)</p>
113 | 
114 | 
115 | ##  6. <a name='Contributing'></a>Contributing
116 | 
117 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
118 | 
119 | If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue.
120 | Don't forget to give the project a star! Thanks again!
121 | 
122 | 1. Fork the Project
123 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
124 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
125 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
126 | 5. Open a Pull Request
127 | 
128 | <p align="right">(<a href="#top">back to top</a>)</p>
129 | 
130 | 
131 | 
132 | ##  7. <a name='License'></a>License
133 | 
134 | Distributed under the MIT License.
135 | 
136 | MIT License
137 | 
138 | Copyright (c) 2022 Andy Pearson
139 | 
140 | Permission is hereby granted, free of charge, to any person obtaining a copy
141 | of this software and associated documentation files (the "Software"), to deal
142 | in the Software without restriction, including without limitation the rights
143 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
144 | copies of the Software, and to permit persons to whom the Software is
145 | furnished to do so, subject to the following conditions:
146 | 
147 | The above copyright notice and this permission notice shall be included in all
148 | copies or substantial portions of the Software.
149 | 
150 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
151 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
152 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
153 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
154 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
155 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
156 | SOFTWARE.
157 | 
158 | <p align="right">(<a href="#top">back to top</a>)</p>
159 | 
160 | 
161 | 
162 | ##  8. <a name='Contact'></a>Contact
163 | 
164 | Author Link: [https://github.com/IORoot](https://github.com/IORoot)
165 | 
166 | <p align="right">(<a href="#top">back to top</a>)</p>
167 | 
168 | ##  9. <a name='Changelog'></a>Changelog
169 | 
170 | - v1.0.2 Widen the writing space and add media queries to expand on bigger screens.
171 | - v1.0.1 Move SVGs into external files (changing logo), add separate CSS variables for fences and codeblocks, recolouring mermaid SVG strokes.
172 | - v1.0.0 Initial Release.
173 | 


--------------------------------------------------------------------------------
/notion.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --side-bar-bg-color: rgb(247, 246, 243);
  3 |     --control-text-color: #777;
  4 | 
  5 |     /* dark color for background*/
  6 |     /* default color */
  7 |     --bg-color1: rgb(40, 44, 52);
  8 |     /* for most panel, context, header, etc */
  9 |     --bg-color2: rgb(33, 37, 43);
 10 |     /* for toc and table edit panel */
 11 |     --bg-color3: rgba(16, 17, 20, 0.5);
 12 |     /* for tips */
 13 |     --bg-color4: black;
 14 |     /* for blockquote, codeblock, input, etc */
 15 |     --bg-color5: rgb(29, 31, 35);
 16 | 
 17 |     /* Codeblocks / Fences */
 18 |     --bg-color-codeblock: rgb(29, 31, 35);
 19 |     --bg-color-fences:    rgb(29, 31, 35);
 20 | 
 21 |     /* light color for text and icon*/
 22 |     /* default color */
 23 |     --text-color1: rgb(170, 178, 180);
 24 |     /* for text on panel - Colour of Mermaid strokes */
 25 |     --text-color2:rgba(39, 48, 63, 1.0);
 26 |     /* for checkbox and radio */
 27 |     --text-color3: hsl(192, 6%, 40%);
 28 |     /* for tips */
 29 |     --text-color4: white;
 30 |     /* for focus mode */
 31 |     --text-color5: rgba(170, 178, 180, 0.5);
 32 |     /* link color */
 33 |     --link-color: rgb(197, 202, 210);
 34 |     /* for codeblocks */
 35 |     --text-color-codeblock: rgb(247, 246, 243);
 36 |     --text-color-fences:    rgba(100, 116, 139, 1.0);
 37 | 
 38 |     /* codeblock color */
 39 |     --code-red-color: rgb(221, 110, 115);
 40 |     --code-yellow-color: rgb(218, 192, 123);
 41 |     --code-cyan-color: rgb(86, 182, 194);
 42 |     --code-blue-color: rgb(94, 174, 237);
 43 |     --code-purple-color: rgb(195, 115, 215);
 44 |     --code-orange-color: rgb(221, 153, 103);
 45 |     --code-grey-color: rgb(127, 132, 142);
 46 |     --code-green-color: rgb(152, 195, 123);
 47 |     --code-select-bg-color: rgb(64, 72, 89);
 48 |     --code-cursor-color: rgb(82, 139, 255);
 49 | }
 50 | 
 51 | 
 52 | @font-face {
 53 |     font-family: 'Open Sans';
 54 |     font-style: normal;
 55 |     font-weight: normal;
 56 |     src: local('Open Sans Regular'),url('./notion/400.woff') format('woff');
 57 | }
 58 | 
 59 | @font-face {
 60 |     font-family: 'Open Sans';
 61 |     font-style: italic;
 62 |     font-weight: normal;
 63 |     src: local('Open Sans Italic'),url('./notion/400i.woff') format('woff');
 64 | }
 65 | 
 66 | @font-face {
 67 |     font-family: 'Open Sans';
 68 |     font-style: normal;
 69 |     font-weight: bold;
 70 |     src: local('Open Sans Bold'),url('./notion/700.woff') format('woff');
 71 | }
 72 | 
 73 | @font-face {
 74 |     font-family: 'Open Sans';
 75 |     font-style: italic;
 76 |     font-weight: bold;
 77 |     src: local('Open Sans Bold Italic'),url('./notion/700i.woff') format('woff');
 78 | }
 79 | 
 80 | html {
 81 |     font-size: 20px;
 82 | }
 83 | 
 84 | body {
 85 |     font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 86 |     color: rgb(51, 51, 51);
 87 |     line-height: 1.6;
 88 | }
 89 | 
 90 | 
 91 | 
 92 | /*  ┌─────────────────────────────────────────────────────────────────────────┐
 93 |     │                                                                         │░
 94 |     │                                                                         │░
 95 |     │                                 NOTION                                  │░
 96 |     │                                                                         │░
 97 |     │                                                                         │░
 98 |     └─────────────────────────────────────────────────────────────────────────┘░
 99 |      ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */
100 | 
101 | 
102 | /*  ┌─────────────────────────────────────────────────────────────────────────┐
103 |     │                             Main writing section                        │
104 |     └─────────────────────────────────────────────────────────────────────────┘ */
105 |     #write {
106 |         max-width: 860px;
107 |         margin: 0 auto;
108 |         padding: 30px;
109 |         padding-bottom: 100px;
110 |     }
111 | 
112 |     @media only screen and (min-width: 1400px) {
113 |         #write {
114 |             max-width: 1024px;
115 |         }
116 |     }
117 | 
118 |     @media only screen and (min-width: 1800px) {
119 |         #write {
120 |             max-width: 1200px;
121 |         }
122 |     }
123 | 
124 |     #write > ul:first-child,
125 |     #write > ol:first-child{
126 |         margin-top: 30px;
127 |     }
128 | 
129 |     
130 | /*  ┌─────────────────────────────────────────────────────────────────────────┐
131 |     │                        FIRST Header Image / iframe                      │
132 |     └─────────────────────────────────────────────────────────────────────────┘ */
133 |     #write p:first-child img:nth-of-type(1) {
134 |         height: 30vh;
135 |         min-height: 300px;
136 |         width: 101vw;
137 |         max-width: 101vw;
138 |         object-fit: cover; 
139 |         object-position: center center;
140 |         margin-top: -54px;
141 |         margin-left: calc((-100vw / 2) + 320px);
142 |         margin-bottom: 3.2em;
143 |         display: inline-block;
144 |     }
145 | 
146 |     .sidebar-tab.active {
147 |         opacity: 0;
148 |     }
149 | 
150 |     #typora-sidebar  {
151 |         border-right: 0px solid rgba(0,0,0,.07)
152 |     }
153 | 
154 | /*  ┌─────────────────────────────────────────────────────────────────────────┐
155 |     │                               Wider Tables                              │
156 |     └─────────────────────────────────────────────────────────────────────────┘ */
157 |     .md-table-fig {
158 |         max-width: 100vw;
159 |         margin: 0px -10vw;
160 |     }
161 | 
162 | /*  ┌─────────────────────────────────────────────────────────────────────────┐
163 |     │                                   LOGO                                  │
164 |     └─────────────────────────────────────────────────────────────────────────┘ */
165 |     .sidebar-tabs {
166 |         background-image: url("./notion/logo.svg");
167 |         background-repeat: no-repeat;
168 |         background-position: center;
169 |         background-size: contain;
170 |     }
171 | 
172 | /*  ┌─────────────────────────────────────────────────────────────────────────┐
173 |     │                           BACKGROUND PATTERN                            │
174 |     └─────────────────────────────────────────────────────────────────────────┘ */
175 |     .sidebar-content {
176 |         background-color: rgb(247, 246, 243);
177 |         /* background-image: url("./notion/sidebar.svg"); */
178 |         background-attachment: fixed;
179 |         background-size: cover;
180 |     }
181 | 
182 |     #file-library {
183 |         padding-top: 20px;
184 |     }
185 | 
186 | 
187 |     /* remove folder icon */
188 |     .fa-folder:before {
189 |         content: "";
190 |     }
191 |     /* Space file icon */
192 |     .fa-file-text-o:before {
193 |         margin-right:5px;
194 |     }
195 | 
196 | 
197 | 
198 | 
199 | a {
200 |     color: #4183C4;
201 | }
202 | h1,
203 | h2,
204 | h3,
205 | h4,
206 | h5,
207 | h6 {
208 |     position: relative;
209 |     margin-top: 1rem;
210 |     margin-bottom: 1rem;
211 |     font-weight: bold;
212 |     line-height: 1.4;
213 |     cursor: text;
214 | }
215 | h1:hover a.anchor,
216 | h2:hover a.anchor,
217 | h3:hover a.anchor,
218 | h4:hover a.anchor,
219 | h5:hover a.anchor,
220 | h6:hover a.anchor {
221 |     text-decoration: none;
222 | }
223 | h1 tt,
224 | h1 code {
225 |     font-size: inherit;
226 | }
227 | h2 tt,
228 | h2 code {
229 |     font-size: inherit;
230 | }
231 | h3 tt,
232 | h3 code {
233 |     font-size: inherit;
234 | }
235 | h4 tt,
236 | h4 code {
237 |     font-size: inherit;
238 | }
239 | h5 tt,
240 | h5 code {
241 |     font-size: inherit;
242 | }
243 | h6 tt,
244 | h6 code {
245 |     font-size: inherit;
246 | }
247 | h1 {
248 |     padding-bottom: .3em;
249 |     font-size: 2.25em;
250 |     line-height: 1.2;
251 |     border-bottom: 1px solid #eee;
252 | }
253 | h2 {
254 |    padding-bottom: .3em;
255 |     font-size: 1.75em;
256 |     line-height: 1.225;
257 |     border-bottom: 1px solid #eee;
258 | }
259 | h3 {
260 |     font-size: 1.5em;
261 |     line-height: 1.43;
262 | }
263 | h4 {
264 |     font-size: 1.25em;
265 | }
266 | h5 {
267 |     font-size: 1em;
268 | }
269 | h6 {
270 |    font-size: 1em;
271 |     color: #777;
272 | }
273 | p,
274 | blockquote,
275 | ul,
276 | ol,
277 | dl,
278 | table{
279 |     margin: 0.8em 0;
280 | }
281 | li>ol,
282 | li>ul {
283 |     margin: 0 0;
284 | }
285 | hr {
286 |     height: 2px;
287 |     padding: 0;
288 |     margin: 16px 0;
289 |     background-color: #e7e7e7;
290 |     border: 0 none;
291 |     overflow: hidden;
292 |     box-sizing: content-box;
293 | }
294 | 
295 | li p.first {
296 |     display: inline-block;
297 | }
298 | ul,
299 | ol {
300 |     padding-left: 30px;
301 | }
302 | ul:first-child,
303 | ol:first-child {
304 |     margin-top: 0;
305 | }
306 | ul:last-child,
307 | ol:last-child {
308 |     margin-bottom: 0;
309 | }
310 | blockquote {
311 |     border-left: 4px solid #dfe2e5;
312 |     padding: 0 15px;
313 |     color: #777777;
314 | }
315 | blockquote blockquote {
316 |     padding-right: 0;
317 | }
318 | table {
319 |     padding: 0;
320 |     word-break: initial;
321 | }
322 | table tr {
323 |     border-top: 1px solid #dfe2e5;
324 |     margin: 0;
325 |     padding: 0;
326 | }
327 | table tr:nth-child(2n),
328 | thead {
329 |     background-color: #f8f8f8;
330 | }
331 | table tr th {
332 |     font-weight: bold;
333 |     border: 1px solid #dfe2e5;
334 |     border-bottom: 0;
335 |     margin: 0;
336 |     padding: 6px 13px;
337 | }
338 | table tr td {
339 |     border: 1px solid #dfe2e5;
340 |     margin: 0;
341 |     padding: 6px 13px;
342 | }
343 | table tr th:first-child,
344 | table tr td:first-child {
345 |     margin-top: 0;
346 | }
347 | table tr th:last-child,
348 | table tr td:last-child {
349 |     margin-bottom: 0;
350 | }
351 | 
352 | .CodeMirror-lines {
353 |     padding-left: 4px;
354 | }
355 | 
356 | .code-tooltip {
357 |     box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);
358 |     border-top: 1px solid #eef2f2;
359 | }
360 | 
361 | .md-fences,
362 | code,
363 | tt {
364 |     border: 1px solid #e7eaed;
365 |     background-color: #f8f8f8;
366 |     border-radius: 3px;
367 |     padding: 0;
368 |     padding: 2px 4px 0px 4px;
369 |     font-size: 0.9em;
370 | }
371 | 
372 | code {
373 |     background-color: #f3f4f4;
374 |     padding: 0 2px 0 2px;
375 | }
376 | 
377 | .md-fences {
378 |     margin-bottom: 15px;
379 |     margin-top: 15px;
380 |     padding-top: 8px;
381 |     padding-bottom: 6px;
382 | }
383 | 
384 | /* andyp code  - codeblocks black  */
385 | 
386 | /* inline codeblock */
387 | code {
388 |     color: var(--text-color-codeblock);
389 |     font-size: 1em;
390 |     background-color: var(--bg-color-codeblock);
391 |     border-radius: 6px;
392 |     padding: 4px 8px 4px 8px;
393 |     margin: 0px 6px 0px 6px;
394 |     /* box-shadow: 0px 0px 10px rgba(0, 0, 0, .2); */
395 | }
396 | 
397 | /* codeblock */
398 | .md-fences,
399 | .md-fences:active {
400 |     background-color: var(--bg-color-fences);
401 |     color: var(--text-color-fences);
402 |     border-radius: 6px;
403 |     padding: 8px 4px 8px 4px !important;
404 |     margin-top: 15px;
405 |     margin-bottom: 15px;
406 |     /* box-shadow: 0px 0px 10px rgba(0, 0, 0, .2); */
407 | }
408 | 
409 | .md-fences .code-tooltip {
410 |     display: block !important;
411 |     visibility: hidden;
412 |     opacity: 0;
413 |     transition: 0.3s;
414 |     background-color: var(--bg-color3);
415 | }
416 | 
417 | .md-fences.md-focus .code-tooltip {
418 |     opacity: 1;
419 |     visibility: visible;
420 | }
421 | 
422 | .CodeMirror-lines {
423 |     padding-left: 4px;
424 | }
425 | 
426 | /* selected text and cursor */
427 | .CodeMirror-selected,
428 | .CodeMirror-selectedtext {
429 |     background: var(--code-select-bg-color) !important;
430 | }
431 | 
432 | .CodeMirror div.CodeMirror-cursor {
433 |     border-left: 2px solid var(--code-cursor-color);
434 |     z-index: 3;
435 | }
436 | 
437 | .CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
438 |     border-left: 3px solid var(--code-cursor-color);
439 | }
440 | 
441 | /* highlight */
442 | .cm-s-inner .cm-property {
443 |     color: var(--code-blue-color) !important;
444 | }
445 | 
446 | .cm-s-inner .cm-operator {
447 |     color: var(--code-cyan-color) !important;
448 | }
449 | 
450 | .cm-s-inner .cm-keyword {
451 |     color: var(--code-purple-color) !important;
452 | }
453 | 
454 | .cm-s-inner .cm-tag {
455 |     color: var(--code-red-color) !important;
456 | }
457 | 
458 | .cm-s-inner .cm-attribute {
459 |     color: var(--code-orange-color) !important;
460 | }
461 | 
462 | .cm-s-inner .cm-string {
463 |     color: var(--code-green-color) !important;
464 | }
465 | 
466 | .cm-s-inner .cm-comment,
467 | .cm-s-inner.cm-comment {
468 |     /*     color: var(--code-orange-color) !important; */
469 |     color: var(--code-grey-color) !important;
470 |     font-style: italic;
471 | }
472 | 
473 | .cm-s-inner .cm-header,
474 | .cm-s-inner .cm-def,
475 | .cm-s-inner.cm-header,
476 | .cm-s-inner.cm-def {
477 |     /*     color: var(--code-red-color) !important; */
478 |     color: var(--code-blue-color) !important;
479 | }
480 | 
481 | .cm-s-inner .cm-meta,
482 | .cm-s-inner .cm-qualifier {
483 |     color: var(--code-red-color) !important;
484 | }
485 | 
486 | .cm-s-inner .cm-builtin {
487 |     /*     color: var(--code-blue-color) !important; */
488 |     color: var(--code-cyan-color) !important;
489 | }
490 | 
491 | .cm-s-inner .cm-bracket {
492 |     color: var(--text-color1) !important;
493 | }
494 | 
495 | .cm-s-inner .cm-number {
496 |     color: var(--code-orange-color) !important;
497 | }
498 | 
499 | .cm-s-inner .cm-variable {
500 |     color: var(--text-color1) !important;
501 | }
502 | 
503 | .cm-s-inner .cm-variable-2 {
504 |     /*     color: var(--code-blue-color) !important; */
505 |     color: var(--code-yellow-color) !important;
506 | }
507 | 
508 | .cm-s-typora-default .cm-header,
509 | .cm-s-typora-default .cm-property {
510 |     color: var(--code-red-color) !important;
511 | }
512 | 
513 | .cm-s-typora-default .cm-string {
514 |     /*     color: var(--code-blue-color); */
515 |     color: var(--code-purple-color);
516 | }
517 | 
518 | .cm-s-typora-default .cm-atom {
519 |     color: var(--code-grey-color);
520 |     font-style: italic;
521 | }
522 | 
523 | .cm-s-typora-default .cm-number {
524 |     color: var(--code-orange-color);
525 |     font-style: normal !important;
526 | }
527 | 
528 | .cm-s-typora-default .cm-link {
529 |     color: var(--code-blue-color);
530 | }
531 | 
532 | .cm-s-typora-default .CodeMirror-activeline-background {
533 |     background: var(--hover-bg-color1);
534 | }
535 | 
536 | .cm-s-typora-default .cm-comment,
537 | .cm-s-typora-default .cm-code {
538 |     color: var(--code-purple-color);
539 | }
540 | 
541 | .cm-s-typora-default .cm-tag {
542 |     /*     color: var(--code-red-color); */
543 |     color: var(--code-blue-color);
544 | }
545 | 
546 | .cm-s-typora-default .cm-strong,
547 | .cm-s-typora-default .cm-em,
548 | .cm-s-typora-default .cm-del {
549 |     /*     color: var(--code-green-color); */
550 |     color: var(--code-orange-color)
551 | }
552 | 
553 | .cm-s-typora-default .cm-block-start.cm-variable-2 {
554 |     /*     color: var(--code-orange-color); */
555 |     color: var(--code-red-color);
556 | }
557 | 
558 | .cm-formatting-task .cm-formatting-task {
559 |     color: var(--code-red-color);
560 | }
561 | 
562 | /* math formula tag */
563 | .cm-s-inner .cm-atom,
564 | .cm-s-inner.cm-atom {
565 |     color: var(--code-blue-color);
566 | }
567 | 
568 | /* inline codeblock in source mode */
569 | .cm-s-typora-default .cm-comment {
570 |     color: var(--code-green-color);
571 | }
572 | 
573 | /* horizontal divider when language is markdown */
574 | .cm-s-inner .cm-hr {
575 |     color: var(--text-color1);
576 | }
577 | 
578 | /* variable type when language is c/cpp */
579 | .cm-s-inner .cm-variable-3 {
580 |     color: var(--code-purple-color);
581 | }
582 | 
583 | /* unknown highlight keyword */
584 | .cm-s-inner .cm-quote,
585 | .cm-s-inner.cm-quote {
586 |     color: #57ac57;
587 | }
588 | 
589 | .cm-s-inner .cm-link {
590 |     color: var(--code-blue-color);
591 | }
592 | 
593 | .cm-s-inner .cm-negative {
594 |     color: #d95050;
595 | }
596 | 
597 | .cm-s-inner .cm-positive {
598 |     color: #50e650;
599 | }
600 | 
601 | .cm-s-inner .cm-string-2 {
602 |     color: #f50;
603 | }
604 | 
605 | .CodeMirror-gutters {
606 |     border-right: none;
607 | }
608 | /* andyp - codeblocks black */
609 | 
610 | .md-task-list-item > input {
611 |   margin-left: -1.3em;
612 | }
613 | 
614 | @media print {
615 |     html {
616 |         font-size: 13px;
617 |     }
618 |     table,
619 |     pre {
620 |         page-break-inside: avoid;
621 |     }
622 |     pre {
623 |         word-wrap: break-word;
624 |     }
625 | }
626 | 
627 | /* .md-fences {
628 | 	background-color: #f8f8f8;
629 | } */
630 | #write pre.md-meta-block {
631 | 	padding: 1rem;
632 |     font-size: 85%;
633 |     line-height: 1.45;
634 |     background-color: #f7f7f7;
635 |     border: 0;
636 |     border-radius: 3px;
637 |     color: #242424;
638 |     margin-top: 0 !important;
639 | }
640 | 
641 | .mathjax-block>.code-tooltip {
642 | 	bottom: .375rem;
643 | }
644 | 
645 | .md-mathjax-midline {
646 |     background: #fafafa;
647 | }
648 | 
649 | #write>h3.md-focus:before{
650 | 	left: -1.5625rem;
651 | 	top: .375rem;
652 | }
653 | #write>h4.md-focus:before{
654 | 	left: -1.5625rem;
655 | 	top: .285714286rem;
656 | }
657 | #write>h5.md-focus:before{
658 | 	left: -1.5625rem;
659 | 	top: .285714286rem;
660 | }
661 | #write>h6.md-focus:before{
662 | 	left: -1.5625rem;
663 | 	top: .285714286rem;
664 | }
665 | .md-image>.md-meta {
666 |     /*border: 1px solid #ddd;*/
667 |     border-radius: 3px;
668 |     padding: 2px 0px 0px 4px;
669 |     font-size: 0.9em;
670 |     color: inherit;
671 | }
672 | 
673 | .md-tag {
674 |     color: #a7a7a7;
675 |     opacity: 1;
676 | }
677 | 
678 | .md-toc { 
679 |     margin-top:20px;
680 |     padding-bottom:20px;
681 | }
682 | 
683 | .sidebar-tabs {
684 |     border-bottom: none;
685 | }
686 | 
687 | /* andyp sidebar */
688 | #typora-sidebar .file-list-item-file-name {
689 |     font-family: 'Open Sans';
690 |     font-weight: bold;
691 | }
692 | 
693 | #typora-sidebar .file-list-item-summary,
694 | #typora-sidebar .ty-search-item-line {
695 |     font-family: 'Open Sans';
696 | }
697 | 
698 | #typora-sidebar #outline-content .outline-h1>.outline-item {
699 |     font-family: 'Open Sans';
700 | }
701 | 
702 | #typora-sidebar .file-tree-node.file-library-file-node.active .file-node-background,
703 | #typora-sidebar .file-list-item.file-library-file-node.active {
704 |     border-left: 6px solid #53A5E3;
705 | }
706 | 
707 | .file-library-node:not(.file-node-root):focus>.file-node-content {
708 |     outline: none;
709 | }
710 | 
711 | #typora-sidebar .file-list-item.file-library-file-node:hover {
712 |     background: #f1f1f1;
713 | }
714 | 
715 | #typora-sidebar .file-tree-node.file-library-file-node {
716 |     padding: 0px 0px 0px 18px;
717 | }
718 | 
719 | #typora-sidebar .file-tree-node.file-library-file-node.active .file-node-title {
720 |     color: #53A5E3;
721 | }
722 | 
723 | #typora-sidebar .file-tree-node {
724 |     border: 0;
725 |     padding: 0 0 0 20px;
726 |     margin: 0;
727 | }
728 | 
729 | /* andyp */
730 | 
731 | #typora-quick-open {
732 |     border: 1px solid #ddd;
733 |     background-color: #f8f8f8;
734 | }
735 | 
736 | #typora-quick-open-item {
737 |     background-color: #FAFAFA;
738 |     border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
739 |     border-style: solid;
740 |     border-width: 1px;
741 | }
742 | 
743 | /** focus mode */
744 | .on-focus-mode blockquote {
745 |     border-left-color: rgba(85, 85, 85, 0.12);
746 | }
747 | 
748 | header, .context-menu, .megamenu-content, footer{
749 |     font-family: "Segoe UI", "Arial", sans-serif;
750 | }
751 | 
752 | .file-node-content:hover .file-node-icon,
753 | .file-node-content:hover .file-node-open-state{
754 |     visibility: visible;
755 | }
756 | 
757 | .mac-seamless-mode #typora-sidebar {
758 |     background-color: #fafafa;
759 |     background-color: var(--side-bar-bg-color);
760 | }
761 | 
762 | .md-lang {
763 |     color: #b4654d;
764 | }
765 | 
766 | .html-for-mac .context-menu {
767 |     --item-hover-bg-color: #E6F0FE;
768 | }
769 | 
770 | #md-notification .btn {
771 |     border: 0;
772 | }
773 | 
774 | .dropdown-menu .divider {
775 |     border-color: #e5e5e5;
776 | }
777 | 
778 | .ty-preferences .window-content {
779 |     background-color: #fafafa;
780 | }
781 | 
782 | .ty-preferences .nav-group-item.active {
783 |     color: white;
784 |     background: #999;
785 | }


--------------------------------------------------------------------------------
/notion/400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IORoot/typora__notion-theme/0eb9d6edb1b2f481bb3dc51563cb181037f53bfb/notion/400.woff


--------------------------------------------------------------------------------
/notion/400i.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IORoot/typora__notion-theme/0eb9d6edb1b2f481bb3dc51563cb181037f53bfb/notion/400i.woff


--------------------------------------------------------------------------------
/notion/600i.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IORoot/typora__notion-theme/0eb9d6edb1b2f481bb3dc51563cb181037f53bfb/notion/600i.woff


--------------------------------------------------------------------------------
/notion/700.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IORoot/typora__notion-theme/0eb9d6edb1b2f481bb3dc51563cb181037f53bfb/notion/700.woff


--------------------------------------------------------------------------------
/notion/700i.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IORoot/typora__notion-theme/0eb9d6edb1b2f481bb3dc51563cb181037f53bfb/notion/700i.woff


--------------------------------------------------------------------------------
/notion/Notion.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IORoot/typora__notion-theme/0eb9d6edb1b2f481bb3dc51563cb181037f53bfb/notion/Notion.jpg


--------------------------------------------------------------------------------
/notion/NotionCode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IORoot/typora__notion-theme/0eb9d6edb1b2f481bb3dc51563cb181037f53bfb/notion/NotionCode.jpg


--------------------------------------------------------------------------------
/notion/NotionPattern.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IORoot/typora__notion-theme/0eb9d6edb1b2f481bb3dc51563cb181037f53bfb/notion/NotionPattern.jpg


--------------------------------------------------------------------------------
/notion/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="352px" height="80px" viewBox="0 0 352 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 4 |         <g id="Desktop-HD" transform="translate(-800.000000, -823.000000)" fill="#16A34A">
 5 |             <g id="Group" transform="translate(800.000000, 823.000000)">
 6 |                 <path d="M0,0 L42.137931,0 L94,80 L0,80 L0,0 Z M51,0 L145,0 L145,80 L102.862069,80 L51,0 Z" id="Logo_-_Squared"></path>
 7 |                 <path d="M200.997805,45 L214,74 L207.998987,74 L204.99848,67.0018095 L191.996285,67.0018095 L188.995779,74 L183,74 L194.996792,45.0074967 L200.997805,45 Z M345,47.0156792 C346.723535,48.5414344 348.075169,50.6829744 348,53.0113233 C348.034335,54.5962023 347.37454,56.7024464 346.5,58.0120803 C345.528977,59.3650193 344.533239,60.4042206 343,61.0055156 C343.956886,61.5362674 344.307005,62.1334751 345,62.9913419 C346.045163,64.3914979 347.164762,65.9192685 347.922398,67.5007968 C349.658882,71.0080728 351.036138,72.5214434 351.908474,73.8574521 L352,74 L346,73.9837224 C345.36006,72.9634628 344.446075,72.9102218 343.909742,71.8294464 C342.833304,69.6168289 341.803182,67.5837754 340.5,65.5022488 C339.921991,64.582849 338.866655,63.6318467 338,62.9913419 C337.334948,62.5570572 336.922051,62.0703405 336.189994,62.0105622 L336,62.0047896 L333,62.0047896 L333,74 L328,74 L328,45.0140658 L339,45.0140658 C341.455349,44.9062337 343.116033,45.4037312 345,47.0156792 Z M182.490215,47.5050305 C184.149595,49.0601589 185.067122,51.2038524 184.994768,53.4991248 C185.077588,55.8054653 184.17432,57.9487718 182.490215,59.4932191 C180.720851,61.0321809 178.618889,62.0192876 176.312837,61.9997105 L175.997122,61.9907584 L169.998692,61.9907584 L169.998692,73.9789469 L165.001938,73.9789469 L165.001,45.016 L175.997122,45.0074912 C178.378709,44.9033812 180.708914,45.8919297 182.490215,47.5050305 Z M233,47.0092186 C234.723463,48.5336969 236.075165,51.1726565 236,53.4990568 C236.034334,55.0826094 235.874503,56.687867 235,57.9964049 C234.029018,59.3482116 232.533175,60.3865398 231,60.9873316 C231.956846,61.5176393 232.307034,62.1191906 233,62.9763394 C234.044785,64.3755582 235.242041,65.8971652 236,67.4771698 C237.736412,70.9815105 239.041426,72.4895714 239.908748,73.8241831 L240,73.9665965 L234,73.9789469 C233.360087,72.9595412 232.536311,73.0500056 232,71.9701348 C230.923607,69.7593691 229.803127,67.5600812 228.5,65.4802966 C227.921718,64.5619043 226.866369,63.6165985 226,62.9763394 C225.334975,62.5424182 224.922025,62.051981 224.189987,61.9916177 L224,61.9857683 L221,61.9857683 L221,73.9789469 L216,73.9789469 L216,45.014109 L227,45.014109 C229.455219,44.906566 231.116015,45.3987949 233,47.0092186 Z M265,45 L254,58.4968005 L268,73.9789469 L261,73.9665965 L247,59.9950727 L247,73.9665965 L242,73.9665965 L242,45.003944 L247,45.003944 L247,57.9973764 L248,57.9973764 L258,45 L265,45 Z M288.359187,46.8074104 C293.04304,49.2568791 295.987317,54.1243958 296,59.4392366 C296.012602,64.7540775 293.091516,69.6357429 288.41937,72.1077808 C283.418716,74.6131217 277.538721,74.6020738 272.547385,72.0779591 C267.870345,69.6618269 264.949173,64.7931391 265.00067,59.4999232 C264.995474,56.9303146 265.682868,54.4074558 266.989564,52.2003335 C268.215642,50.0735918 269.978758,48.3148333 272.096471,47.1006452 L272.473829,46.8920657 L272.473829,46.8959136 C277.47169,44.3994821 283.334202,44.3668199 288.359187,46.8074104 Z M320.000725,45 L325,45.0038938 L325,61.9876551 C324.999354,65.8340758 323.794967,68.9119317 321.500507,70.978888 C319.206048,73.0458443 316.19946,73.9750272 312.001885,73.9750272 C309.640764,74.0320633 307.151019,73.4634789 305.0029,72.4769576 C303.144029,71.6057986 301.52843,70.2675259 300.503552,68.4821054 C299.450462,66.5643687 298.951094,64.1773759 299.00377,61.9876551 L299.00377,61.9876551 L299.008,45.003 L304.003045,45.0038938 L304.003045,61.9876551 C303.94182,63.3860423 304.438976,64.7054328 305.0029,65.9853228 C305.56632,67.0505251 306.940089,67.92047 308.002465,68.4821054 C309.239001,69.1576236 310.592922,69.0133877 312,68.9814619 C313.483584,69.026348 314.668638,69.138793 316.001305,68.4821054 C317.10536,67.9313618 318.430304,67.083296 319.00087,65.9853228 C319.609788,64.5845843 320.073134,63.5144886 320.000725,61.9876551 L320.000725,61.9876551 L320.000725,45 Z M275.336804,50.9564788 C273.954969,51.6937164 272.801233,52.7959163 271.997705,54.1419528 L271.830925,54.4340772 C270.998248,55.9916008 270.575889,57.7346432 270.604345,59.4999232 C270.577647,61.2677602 271.014233,63.0114421 271.870092,64.5551873 C272.691972,66.0298985 273.915787,67.2369415 275.396987,68.0337478 C276.970591,68.8726275 278.729399,69.2968859 280.509648,69.2670206 C283.146337,69.3615128 285.708619,68.3765981 287.612158,66.5368894 C289.479418,64.6885257 290.489226,62.1349268 290.39489,59.4999232 C290.42059,57.73005 289.987618,55.9840098 289.138696,54.4340772 C288.321483,52.9506834 287.093411,51.7387184 285.604158,50.9458969 C282.376481,49.2977656 278.561125,49.3016978 275.336804,50.9564788 Z M197.997298,51.0059456 L192.996454,63.0028436 L202.998143,63.0028436 L197.997298,51.0059456 Z M333,49.0067559 L333,58.0120803 L337,58.011686 C338.263047,58.0859778 339.511362,57.3151024 340.5,56.5087825 C341.360513,55.7201862 342.056423,54.6911551 342,53.5117053 C342.084859,52.3386251 341.377318,51.2751238 340.5,50.5131383 C339.513735,49.814909 338.423233,49.0347449 337.238253,49.0090572 L337,49.0142272 L333,49.0067559 Z M225.238245,49.0009262 L225,49.0060919 L221,49.0060919 L221,57.9964049 L225,57.9964049 C226.262995,58.0706345 227.511403,57.3000119 228.5,56.4943667 C229.360477,55.7064305 230.056421,54.6775195 230,53.4990568 C230.084855,52.3269584 229.377281,51.2650947 228.5,50.5037469 C227.579524,49.8526117 226.568139,49.130163 225.473973,49.0158631 L225.238245,49.0009262 Z M173.997645,49.0035541 L169.998692,49.0035541 L169.998692,57.9946955 L174.997384,57.9946955 C176.224337,58.0698581 177.080486,57.163965 178.072613,56.4250467 C178.927342,55.6645859 179.383329,54.5406213 179.304891,53.3875925 C179.304891,50.7194207 177.36639,49.0035541 173.997645,49.0035541 Z" id="PARKOUR"></path>
 8 |                 <path d="M165,10 L165,35 L179,35 L179,33 L167,33 L167,10 L165,10 Z M198.5,9.99999245 C201.769786,9.99675893 204.972181,11.0372356 207.5,13.4999925 C209.82769,15.821963 211,19.1574807 211,22.4995618 C211,25.8416429 209.82769,29.178037 207.5,31.4999925 C205.053943,33.8835636 201.699668,34.9639472 198.5,35.0047762 C195.188805,35.0470283 192.031316,33.9666448 189.5,31.4999925 C187.181613,29.1728188 186,25.838375 186,22.4995618 C186,19.1607486 187.181613,15.8271812 189.5,13.4999925 C191.949786,11.111526 195.330066,10.0031421 198.5,9.99999245 Z M198.845996,11.9976319 L198.511467,12 C195.705786,11.9385992 193.02725,12.9494786 191.044169,15 C189.080134,17.0258204 188,19.633368 188,22.5 C188,25.366632 189.035965,27.9741796 191,30 L191,30 L191.044169,30.142295 C193.027774,32.1929332 195.736613,33.0719201 198.542731,33.0098446 C201.333683,33.0726335 204.026561,32.0510726 205.988248,30 C207.993578,27.8998794 208.982361,25.207058 209,22.504877 C209.017952,19.7547381 208.029168,17.1373932 205.988248,15 C204.026263,12.9494823 201.302248,11.937289 198.511467,12 Z M243.032146,10 L243,32 L224,10 L222,10 L222,34.996595 L224,34.996595 L224,13 L243.032146,34.996595 L245,35 L245,10.003405 L243,10.003405 L243.032146,10 Z M266.5,10 C270.848933,10 274.207362,11.1730459 276.5,13.5 C281.069602,18.5833962 281.11238,26.3981346 276.562675,31.5 C274.293449,33.8558991 271.172791,35 267,35 L267,35 L258,34.9991487 L258,10 Z M274.5,14.5 C272.301777,12.4275482 269.493351,11.8751898 266.5,12 L266.5,12 L260,12 L260,33 L266.5,33 C269.42747,33.0959711 272.333419,32.5068574 274.5,30.5 C276.638938,28.4632898 278.121904,25.4819424 278,22.5027219 C278.102789,19.5496549 276.594534,16.5453525 274.5,14.5 Z M302.5,10 C305.769786,9.99676647 308.972181,11.0372431 311.5,13.5 C313.82769,15.8219706 315,19.1574883 315,22.4995694 C315,25.8416504 313.82769,29.1780445 311.5,31.5 C309.053943,33.8835712 305.699668,34.9639547 302.5,35.0047837 C299.188805,35.0470359 296.031316,33.9666523 293.5,31.5 C291.181613,29.1728264 290,25.8383825 290,22.4995694 C290,19.1607562 291.181613,15.8271887 293.5,13.5 C295.949786,11.1115335 299.330066,10.0031496 302.5,10 Z M302.845996,11.9976394 L302.511467,12.0000075 C299.705786,11.9386067 297.02725,12.9494861 295.044169,15.0000075 C293.080134,17.0258279 292,19.6333756 292,22.5000075 C292,25.3666395 293.035965,27.9741872 295,30.0000075 L295,30.0000075 L295.044169,30.1423026 C297.027774,32.1929407 299.736613,33.0719277 302.542731,33.0098521 C305.333683,33.0726411 308.026561,32.0510802 309.988248,30.0000075 C311.993578,27.899887 312.982361,25.2070655 313,22.5048845 C313.017952,19.7547457 312.029168,17.1374007 309.988248,15.0000075 C308.026263,12.9494898 305.302248,11.9372965 302.511467,12.0000075 Z M345,32 L326,10 L324,10 L324,34.996595 L326,34.996595 L326,13 L345,34.996595 L347,35 L347,10.003405 L345,10 L345,32 Z" id="LONDON"></path>
 9 |             </g>
10 |         </g>
11 |     </g>
12 | </svg>


--------------------------------------------------------------------------------
/notion/sidebar.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns='http://www.w3.org/2000/svg' width='100%'><defs><linearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%' gradientTransform='rotate(306,420,458)'><stop offset='0' stop-color='#fafafa'/><stop offset='1' stop-color='#f5f5f5'/></linearGradient><pattern patternUnits='userSpaceOnUse' id='b' width='300' height='250' x='0' y='0' viewBox='0 0 1080 900'><g fill-opacity='0.05'><polygon fill='#444' points='90 150 0 300 180 300'/><polygon points='90 150 180 0 0 0'/><polygon fill='#AAA' points='270 150 360 0 180 0'/><polygon fill='#DDD' points='450 150 360 300 540 300'/><polygon fill='#999' points='450 150 540 0 360 0'/><polygon points='630 150 540 300 720 300'/><polygon fill='#DDD' points='630 150 720 0 540 0'/><polygon fill='#444' points='810 150 720 300 900 300'/><polygon fill='#FFF' points='810 150 900 0 720 0'/><polygon fill='#DDD' points='990 150 900 300 1080 300'/><polygon fill='#444' points='990 150 1080 0 900 0'/><polygon fill='#DDD' points='90 450 0 600 180 600'/><polygon points='90 450 180 300 0 300'/><polygon fill='#666' points='270 450 180 600 360 600'/><polygon fill='#AAA' points='270 450 360 300 180 300'/><polygon fill='#DDD' points='450 450 360 600 540 600'/><polygon fill='#999' points='450 450 540 300 360 300'/><polygon fill='#999' points='630 450 540 600 720 600'/><polygon fill='#FFF' points='630 450 720 300 540 300'/><polygon points='810 450 720 600 900 600'/><polygon fill='#DDD' points='810 450 900 300 720 300'/><polygon fill='#AAA' points='990 450 900 600 1080 600'/><polygon fill='#444' points='990 450 1080 300 900 300'/><polygon fill='#222' points='90 750 0 900 180 900'/><polygon points='270 750 180 900 360 900'/><polygon fill='#DDD' points='270 750 360 600 180 600'/><polygon points='450 750 540 600 360 600'/><polygon points='630 750 540 900 720 900'/><polygon fill='#444' points='630 750 720 600 540 600'/><polygon fill='#AAA' points='810 750 720 900 900 900'/><polygon fill='#666' points='810 750 900 600 720 600'/><polygon fill='#999' points='990 750 900 900 1080 900'/><polygon fill='#999' points='180 0 90 150 270 150'/><polygon fill='#444' points='360 0 270 150 450 150'/><polygon fill='#FFF' points='540 0 450 150 630 150'/><polygon points='900 0 810 150 990 150'/><polygon fill='#222' points='0 300 -90 450 90 450'/><polygon fill='#FFF' points='0 300 90 150 -90 150'/><polygon fill='#FFF' points='180 300 90 450 270 450'/><polygon fill='#666' points='180 300 270 150 90 150'/><polygon fill='#222' points='360 300 270 450 450 450'/><polygon fill='#FFF' points='360 300 450 150 270 150'/><polygon fill='#444' points='540 300 450 450 630 450'/><polygon fill='#222' points='540 300 630 150 450 150'/><polygon fill='#AAA' points='720 300 630 450 810 450'/><polygon fill='#666' points='720 300 810 150 630 150'/><polygon fill='#FFF' points='900 300 810 450 990 450'/><polygon fill='#999' points='900 300 990 150 810 150'/><polygon points='0 600 -90 750 90 750'/><polygon fill='#666' points='0 600 90 450 -90 450'/><polygon fill='#AAA' points='180 600 90 750 270 750'/><polygon fill='#444' points='180 600 270 450 90 450'/><polygon fill='#444' points='360 600 270 750 450 750'/><polygon fill='#999' points='360 600 450 450 270 450'/><polygon fill='#666' points='540 600 630 450 450 450'/><polygon fill='#222' points='720 600 630 750 810 750'/><polygon fill='#FFF' points='900 600 810 750 990 750'/><polygon fill='#222' points='900 600 990 450 810 450'/><polygon fill='#DDD' points='0 900 90 750 -90 750'/><polygon fill='#444' points='180 900 270 750 90 750'/><polygon fill='#FFF' points='360 900 450 750 270 750'/><polygon fill='#AAA' points='540 900 630 750 450 750'/><polygon fill='#FFF' points='720 900 810 750 630 750'/><polygon fill='#222' points='900 900 990 750 810 750'/><polygon fill='#222' points='1080 300 990 450 1170 450'/><polygon fill='#FFF' points='1080 300 1170 150 990 150'/><polygon points='1080 600 990 750 1170 750'/><polygon fill='#666' points='1080 600 1170 450 990 450'/><polygon fill='#DDD' points='1080 900 1170 750 990 750'/></g></pattern></defs><rect x='0' y='0' fill='url(#a)' width='100%' height='100%'/><rect x='0' y='0' fill='url(#b)' width='100%' height='100%'/></svg>


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