├── .gitignore ├── LICENSE ├── README.md ├── main.ts ├── src ├── flora.ts ├── frameworks.ts └── types.ts ├── static └── styles │ ├── attri.css │ ├── awsm.css │ ├── basic.css │ ├── marx.css │ ├── openprops.css │ ├── sakura.css │ ├── stylize.css │ ├── tufte.css │ └── writ.css └── test.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # classless-css-demo -------------------------------------------------------------------------------- /main.ts: -------------------------------------------------------------------------------- 1 | import { serve } from "https://deno.land/std@0.152.0/http/server.ts"; 2 | import { join } from "https://deno.land/std@0.152.0/path/mod.ts"; 3 | import { contentType } from "https://deno.land/std@0.152.0/media_types/mod.ts"; 4 | import template from "./src/flora.ts"; 5 | 6 | import { Route, Framework } from "./src/types.ts"; 7 | import frameworks from "./src/frameworks.ts"; 8 | 9 | class StaticFileHandler { 10 | 11 | #basePath: string = ""; 12 | 13 | constructor(base: string) { 14 | this.#basePath = base; 15 | } 16 | 17 | handler(request: Request): Response { 18 | const pathname = new URL(request.url).pathname; 19 | const extension = pathname.substr(pathname.lastIndexOf(".")); 20 | const resolvedPathname = (pathname == "" || pathname == "/") ? "/index.html" : pathname; 21 | const path = join(Deno.cwd(), this.#basePath, resolvedPathname) 22 | const file = Deno.readFile(path) 23 | .then(data => new Response(data, { status: 200, headers: { 'content-type': contentType(extension) } })) // Need to think about content tyoes. 24 | .catch(_ => new Response("Not found", { status: 404 })); 25 | 26 | return file; 27 | } 28 | 29 | get pattern(): URLPattern { 30 | return new URLPattern({ pathname: "*" }) 31 | } 32 | } 33 | 34 | const render = (currentFramework) => { 35 | return template` 36 | 37 | 38 | Compare Classless CSS frameworks — currently using "${frameworks[currentFramework].name}" 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |

Welcome to Classless CSS Demo using "${frameworks[currentFramework].name}"

48 |

I was struggling to make a simple page I was building look decent. 49 | I knew there were stylesheets that just used 'semantic html' (like Tufte) and didn't require any special class names 50 | (i.e <button class="btn-primary">a button</button>), however I was struggling to find them. 51 |

52 | 53 |

So I asked Twitter:

54 |
I should know this, but I'm looking for a simple CSS stylesheet that would replace the default user agent 55 | and make it look half decent. Google-fu is failing me, all I can find is resets and full frameworks. :\\ 56 |
57 | 58 |

Once I found examples of 'class-less CSS', it was then a bit of a pain to find them and compare all the different 59 | examples. Hence this page.

60 | 61 |

This page is designed to collate all the CSS frameworks into one place and let you compare and contrast them.

62 | 63 |

Here is the list of class-less CSS frameworks that you can checkout:

64 | 65 | 69 | 70 |

If you have a framework you would like include, create PR against frameworks.ts

72 | 73 |

Check out my other site.

74 |
75 | 76 |

This page is rendered using ${frameworks[currentFramework].name}.

77 |

Some of the entries are taken from the layout from stylize. 79 |

80 | 81 | 82 |

Typography:

83 |

This is a H1 heading

84 |

This is a H2 heading

85 |

This is a H3 heading

86 |

This is a H4 heading

87 |
This is a H5 heading
88 |
This is a H6 heading
89 |

This is a paragraph of text. It's my paragraph. I like it a lot.

90 |
91 | This is a Strong / Bold text 92 |
93 | This is an Emphasized / Italic text 94 |
95 | This is a Marked / Highlighted text 96 |
97 | This is a Small text 98 |
99 | This is a Deleted text 100 |
101 | This is a Underlined / Inserted text 102 |
103 | This is a Subscript text 104 |
105 | This is a Superscript text 106 |
107 | 
This is a preformatted text.
108 |
This is a Blockquote.
109 | 112 | This is a sample output. 113 |
114 | This is the <code> & kbd 115 |
116 |

Links & navigation:

117 | 124 |
125 |
126 | Normal link 127 |
128 |

Lists:

129 | 138 |
    139 |
  1. Ordered list item 1
    2. 140 |
  2. Ordered list item 2
    3. 141 |
      142 |
    1. Ordered list item 3
      2. 143 |
    144 |
  3. Ordered list item 4
    4. 145 |
  4. Ordered list item 5
    5. 146 |
147 |
148 |
Banana
149 |
A yellow fruit that is easy to peel.
150 |
Which also grows on a tree.
151 |
Cashew
152 |
A tan nut without a peel.
153 |
Cherry
154 |
A red fruit that is hard to peel.
155 |
156 |
157 |

Form:

158 |
159 | This is a legend on fieldset 160 |
161 |
162 | 163 | 164 |
165 | 166 | 173 |
174 | 175 | 176 |
177 | 178 | 179 | 180 |
181 | 182 | 183 | 184 |
185 | 186 |
187 | 188 | 189 |
190 |
191 |
192 | 193 | Anchor role=button 194 | 195 | 196 |
197 | 198 | 199 |
200 |

Table:

201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 |
#NameUsernameLocation
1Vasanth@vsnthvChennai, India
2John@johnUSA
3Chan@chanHong Kong
231 |

Table with border=1

232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 |
#NameUsernameLocation
1Vasanth@vsnthvChennai, India
2John@johnUSA
3Chan@chanHong Kong
262 |
263 |

Images

264 |
265 | placeholder image 900 pixels wide by 500 pixels tall 266 |
A photo placeholder text
267 |
268 | 269 | 270 | 271 | 272 | ` 273 | .then(data => new Response(data, { status: 200, headers: { 'content-type': 'text/html' } })); 274 | } 275 | 276 | serve((req: Request) => { 277 | const url = req.url; 278 | const staticFiles = new StaticFileHandler('static'); 279 | let response: Response = new Response(new Response("Not found", { status: 404 })); 280 | 281 | // Probably only needs to be a static site 282 | const routes: Array = [ 283 | [ 284 | new URLPattern({ pathname: "/" }), 285 | (request, patternResult) => { 286 | console.log(window.location) 287 | return render(""); // index 288 | } 289 | ], 290 | [ 291 | new URLPattern({ pathname: "/:framework.html" }), 292 | (request, patternResult) => { 293 | const pathname = new URL(request.url).pathname; 294 | const { framework } = patternResult.pathname.groups; 295 | 296 | if (framework == null) { 297 | return new Response("Not found", { status: 404 }) 298 | } 299 | 300 | return render(framework); 301 | } 302 | ], 303 | // Fall through. 304 | [ 305 | staticFiles.pattern, 306 | staticFiles.handler.bind(staticFiles) 307 | ] 308 | ]; 309 | 310 | for (const [pattern, handler] of routes) { 311 | const patternResult = pattern.exec(url); 312 | console.log(pattern, url, patternResult) 313 | if (patternResult != null) { 314 | // Find the first matching route. 315 | const responseFromHandler = handler(req, patternResult); 316 | 317 | response = responseFromHandler; 318 | break; 319 | } 320 | } 321 | 322 | return response; 323 | }); -------------------------------------------------------------------------------- /src/flora.ts: -------------------------------------------------------------------------------- 1 | const encoder = new TextEncoder(); 2 | 3 | const pipeInto = async (from, controller) => { 4 | const reader = from.getReader(); 5 | 6 | return reader.read().then(function process(result) { 7 | if (result.done) { 8 | return; 9 | } 10 | const value = result.value; 11 | const isTypedArray = (value instanceof Int8Array 12 | || value instanceof Int16Array 13 | || value instanceof Int32Array 14 | || value instanceof Uint8Array 15 | || value instanceof Uint8ClampedArray 16 | || value instanceof Uint16Array 17 | || value instanceof Uint32Array 18 | || value instanceof Float32Array 19 | || value instanceof Float64Array) 20 | if((isTypedArray === false && !!result.value) || (isTypedArray && value.length > 0)) { 21 | controller.enqueue(result.value); 22 | } 23 | return reader.read().then(process); 24 | }); 25 | }; 26 | 27 | const enqueueItem = async (val, controller) => { 28 | if (val instanceof ReadableStream) { 29 | await pipeInto(val, controller); 30 | } 31 | else if (val instanceof Promise) { 32 | let newVal; 33 | newVal = await val; 34 | 35 | if (newVal instanceof ReadableStream) { 36 | await pipeInto(newVal, controller); 37 | } else { 38 | await enqueueItem(newVal, controller); 39 | } 40 | } 41 | else { 42 | if (Array.isArray(val)) { 43 | for (let item of val) { 44 | await enqueueItem(item, controller) 45 | } 46 | } 47 | else if (!!val) { 48 | controller.enqueue(encoder.encode(val)); 49 | } 50 | } 51 | } 52 | 53 | export default async (strings, ...values):ReadableStream => { 54 | return new ReadableStream({ 55 | start(controller) { 56 | async function push() { 57 | let i = 0; 58 | while (i < values.length) { 59 | let html = strings[i]; 60 | controller.enqueue(encoder.encode(html)); 61 | await enqueueItem(values[i], controller); 62 | 63 | i++; 64 | } 65 | controller.enqueue(encoder.encode(strings[i])); 66 | controller.close(); 67 | } 68 | 69 | push(); 70 | } 71 | }); 72 | }; -------------------------------------------------------------------------------- /src/frameworks.ts: -------------------------------------------------------------------------------- 1 | /* 2 | To add a framework, add in the details below: 3 | + Please keep it in alphabetical order. 4 | + If you need to add a version of the stylesheet, add it to the /static/styles folder (otherwise a link is fine). 5 | + Make sure to add a link to the homepage. 6 | */ 7 | 8 | const frameworks: Record = { 11 | "": { name: "Browser default style", htmlUrl: "/", cssUrl: `/styles/index.css`, siteUrl: "https://meiert.com/en/blog/user-agent-style-sheets/" }, // This is a hack to use my default style 12 | "attri": { name: "AttriCSS", htmlUrl: "/attri.html", cssUrl: "/styles/attri.css", siteUrl: "https://raj457036.github.io/attriCSS/" }, 13 | "awsm": { name: "Awsm.css", htmlUrl: "/awsm.html", cssUrl: "/styles/awsm.css", siteUrl: "https://igoradamenko.github.io/awsm.css/elements.html" }, 14 | "basic": { name: "Basic.css", htmlUrl: "/basic.html", cssUrl: "/styles/basic.css", siteUrl: "https://vladocar.github.io/Basic.css/" }, 15 | "bahunya": { name: "Bahunya", htmlUrl: "/bahunya.html", cssUrl: " https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css", siteUrl: "https://hakanalpay.com/bahunya/" }, 16 | "bedrocss": { name: "Bedrocss", htmlUrl: "/bedrocss.html", cssUrl: "https://unpkg.com/bedrocss", siteUrl: "https://bedrocss.austingil.com/" }, 17 | "classless": { name: "Classless.css", htmlUrl: "/classless.html", cssUrl: "https://classless.de/classless.css", siteUrl: "https://classless.de/" }, 18 | "downstyler": { name: "Downstyler", htmlUrl: "/downstyler.html", cssUrl: "https://raw.githack.com/waldyrious/downstyler/master/downstyler.css", siteUrl: "https://waldyrious.net/downstyler/" }, 19 | "holiday": { name: "Holiday.css", htmlUrl: "/holiday.html", cssUrl: "https://cdn.jsdelivr.net/npm/holiday.css@0.9.8", siteUrl: "https://holidaycss.js.org/" }, 20 | "marx": { name: "Marx", htmlUrl: "/marx.html", cssUrl: "/styles/marx.css", siteUrl: "https://mblode.github.io/marx/" }, 21 | "mvp": { name: "MVP.css", htmlUrl: "/mvp.html", cssUrl: "https://unpkg.com/mvp.css", siteUrl: "https://andybrewer.github.io/mvp/" }, 22 | "openprops": { name: "OpenProps + Normalize.css", htmlUrl: "/openprops.html", cssUrl: "/styles/openprops.css", siteUrl: "https://open-props.style" }, 23 | "pico": { name: "Pico", htmlUrl: "/pico.html", cssUrl: "https://unpkg.com/@picocss/pico@latest/css/pico.min.css", siteUrl: "https://picocss.com/" }, 24 | "sakura": { name: "Sakura", htmlUrl: "/sakura.html", cssUrl: "/styles/sakura.css", siteUrl: "https://github.com/oxalorg/sakura" }, 25 | "simple": { name: "Simple.css", htmlUrl: "/simple.html", cssUrl: "https://cdn.simplecss.org/simple.min.css", siteUrl: "https://simplecss.org/demo" }, 26 | "stylize": { name: "Stylize", htmlUrl: "/stylize.html", cssUrl: "/styles/stylize.css", siteUrl: "https://vasanthv.com/stylize.css/demo.html" }, 27 | "tacit": { name: "Tacit", htmlUrl: "/tacit.html", cssUrl: "https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.5.5.min.css", siteUrl: "https://yegor256.github.io/tacit/" }, 28 | "tufte": { name: "Tufte.css", htmlUrl: "/tufte.html", cssUrl: "/styles/tufte.css", siteUrl: "https://github.com/edwardtufte/tufte-css" }, 29 | "water": { name: "Water.css", htmlUrl: "/water.html", cssUrl: "https://cdn.jsdelivr.net/npm/water.css@2/out/water.css", siteUrl: "https://watercss.kognise.dev/" }, 30 | "wing": { name: "Wing", htmlUrl: "/wing.html", cssUrl: "https://unpkg.com/wingcss", siteUrl: "https://kbrsh.github.io/wing/" }, 31 | "writ": { name: "Writ", htmlUrl: "/writ.html", cssUrl: "/styles/writ.css", siteUrl: "https://writ.cmcenroe.me/writ.css" }, 32 | } 33 | 34 | export default frameworks; 35 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | export type Route = [URLPattern, RequestHandler]; 2 | export type RequestHandler = (Request) => Response; 3 | export type Framewprk = [string, URL] -------------------------------------------------------------------------------- /static/styles/attri.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Nunito");html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,textarea,input,select,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-family:"Nunito",sans-serif;color:#000}body,html{padding:0;margin:0;overflow-x:hidden;background-color:#fff}nav{font-family:"Nunito",sans-serif;background-color:#212121;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}nav header{padding:8px;display:inline}nav header a{text-decoration:none;color:#fff}nav header a:hover{color:#00c853}nav header+input:checked+div{display:block}nav div{display:none;margin-left:auto}nav div ul{list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 10px}nav div ul li a{display:inline-block;padding:8px;color:#fff;text-decoration:none}nav div ul li:hover{background-color:#00c853}nav div ul li ul{right:0;position:relative;background:pink}@media (max-width: 630px){nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}nav header{text-align:center}nav div{margin:auto}nav div ul{padding:0}nav div ul li{border-top-left-radius:5px;border-top-right-radius:5px}nav div ul li[active],nav div ul li.active{border:1px solid #00c853;border-bottom:none}blockquote{border-left:4px solid #00c853;padding:8px 5px;margin:0}blockquote p{font-size:0.4rem}}@media (min-width: 630px){nav div ul li.active,nav div ul li[active]{border:1px solid #00c853;border-bottom:none;border-top:none}nav header label{display:none}}section[container]{max-width:38em;margin:auto;padding:5px}h1{font-size:2.35em}h2{font-size:2em}h3{font-size:1.75em}h4{font-size:1.5em}h5{font-size:1.25em}h6{font-size:1em}a{color:#00c853}a:hover{color:#212121}mark{background-color:#00c853}code{font-family:monospace;background-color:#bdbdbd;padding-left:5px;padding-right:5px}blockquote{border-left:4px solid #00c853;padding:8px 10px;width:100%}blockquote p{font-style:italic;font-size:1.1rem}blockquote footer::before{content:"\2014 \00A0"}blockquote footer cite{font-style:italic;color:#bdbdbd}pre{background:#eee;overflow-x:auto;text-align:left;padding:5px}pre code{display:block;padding:0 10px;background:transparent}table{display:table;padding:5px;border-collapse:collapse}table thead,table tbody{text-align:left}table tr th,table tr td{padding:5px 10px;border-bottom:1px solid #00c853}div[overflow]{overflow-x:auto;max-width:100vw}div[overflow] ::-webkit-scrollbar{height:0}img{max-width:100%;border-radius:5px}form div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:10px 5px}form div p{margin:0px}form input,form select{font-size:1rem;padding:5px;border:1px solid #bdbdbd;color:#212121}form input:active,form input:focus,form select:active,form select:focus{outline-color:#00c853}form input[type="submit"]{padding:10px;background-color:#00c853;color:#000;border-radius:5px;border:none;cursor:pointer}form input[type="submit"]:active,form input[type="submit"]:focus{outline:none}form input[type="submit"]:active{background-color:#212121;color:#00c853}form input[type="submit"]:disabled{background:#bdbdbd;cursor:not-allowed}form input[type="submit"][secondary]{background-color:#212121;color:#00c853}form input[type="submit"][secondary]:active{background-color:#00c853;color:initial}textarea{color:#212121;width:-webkit-fill-available;font-size:1rem;padding:5px}textarea:active,textarea:focus{outline-color:#00c853}button{padding:10px;background-color:#00c853;color:#000;border-radius:5px;border:none;cursor:pointer}button:active,button:focus{outline:none}button:active{background-color:#212121;color:#00c853}button:disabled{background:#bdbdbd;cursor:not-allowed}button[secondary]{background-color:#212121;color:#00c853}button[secondary]:active{background-color:#00c853;color:initial}body>footer{background-color:#212121;position:relative;bottom:0;width:100%;padding:5px;color:#fff} 2 | -------------------------------------------------------------------------------- /static/styles/awsm.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | * awsm.css v3.0.7 (https://igoradamenko.github.io/awsm.css/) 4 | * Copyright 2015 Igor Adamenko (https://igoradamenko.com) 5 | * Licensed under MIT (https://github.com/igoradamenko/awsm.css/blob/master/LICENSE.md) 6 | */ 7 | html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"PT Sans","Open Sans","Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:100%;line-height:1.4;background:#fff;color:#000;-webkit-overflow-scrolling:touch}body{margin:1.2em;font-size:1rem}@media (min-width:20rem){body{font-size:calc(1rem + .00625*(100vw - 20rem))}}@media (min-width:40rem){body{font-size:1.125rem}}body article,body footer,body header,body main{position:relative;max-width:40rem;margin:0 auto}body>header{margin-bottom:3.5em}body>header h1{margin:0;font-size:1.5em}body>header p{margin:0;font-size:.85em}body>footer{margin-top:6em;padding-bottom:1.5em;text-align:center;font-size:.8rem;color:#aaa}details,nav{margin:1em 0}nav ul{list-style:none;margin:0;padding:0}nav li{display:inline-block;margin-right:1em;margin-bottom:.25em}nav li:last-child{margin-right:0}a,nav a:visited{color:#0064c1}article header h1 a:visited:hover,article header h2 a:visited:hover,nav a:hover{color:#f00000}ol,ul{margin-top:0;padding-top:0;padding-left:2.5em}article header h1+p,article header h2+p,ol li+li,ul li+li{margin-top:.25em}ol li>details,ul li>details{margin:0}p{margin:1em 0;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}aside:first-child,form legend:first-child+label,p:first-child{margin-top:0}aside:last-child,p:last-child{margin-bottom:0}p+ol,p+ul{margin-top:-.75em}p img,p picture{float:right;margin-bottom:.5em;margin-left:.5em}p picture img{float:none;margin:0}blockquote,dd{padding-left:2.5em}dd{margin-bottom:1em;margin-left:0}dt{font-weight:700}blockquote{margin:0}aside{margin:.5em 0;font-style:italic;color:#aaa}@media (min-width:65rem){aside{position:absolute;right:-12.5rem;width:9.375rem;max-width:9.375rem;margin:0;padding-left:.5em;font-size:.8em;border-left:1px solid #f2f2f2}}section+section{margin-top:2em}h1,h2,h3,h4,h5,h6{margin:1.25em 0 0;line-height:1.2}h1:focus>a[href^="#"][id]:empty,h1:hover>a[href^="#"][id]:empty,h2:focus>a[href^="#"][id]:empty,h2:hover>a[href^="#"][id]:empty,h3:focus>a[href^="#"][id]:empty,h3:hover>a[href^="#"][id]:empty,h4:focus>a[href^="#"][id]:empty,h4:hover>a[href^="#"][id]:empty,h5:focus>a[href^="#"][id]:empty,h5:hover>a[href^="#"][id]:empty,h6:focus>a[href^="#"][id]:empty,h6:hover>a[href^="#"][id]:empty{opacity:1}figure+p,h1+details,h1+p,h2+details,h2+p,h3+details,h3+p,h4+details,h4+p,h5+details,h5+p,h6+details,h6+p{margin-top:.5em}h1>a[href^="#"][id]:empty,h2>a[href^="#"][id]:empty,h3>a[href^="#"][id]:empty,h4>a[href^="#"][id]:empty,h5>a[href^="#"][id]:empty,h6>a[href^="#"][id]:empty{position:absolute;left:-.65em;opacity:0;text-decoration:none;font-weight:400;line-height:1;color:#aaa}@media (min-width:40rem){h1>a[href^="#"][id]:empty,h2>a[href^="#"][id]:empty,h3>a[href^="#"][id]:empty,h4>a[href^="#"][id]:empty,h5>a[href^="#"][id]:empty,h6>a[href^="#"][id]:empty{left:-.8em}}h1>a[href^="#"][id]:empty:focus,h1>a[href^="#"][id]:empty:hover,h1>a[href^="#"][id]:empty:target,h2>a[href^="#"][id]:empty:focus,h2>a[href^="#"][id]:empty:hover,h2>a[href^="#"][id]:empty:target,h3>a[href^="#"][id]:empty:focus,h3>a[href^="#"][id]:empty:hover,h3>a[href^="#"][id]:empty:target,h4>a[href^="#"][id]:empty:focus,h4>a[href^="#"][id]:empty:hover,h4>a[href^="#"][id]:empty:target,h5>a[href^="#"][id]:empty:focus,h5>a[href^="#"][id]:empty:hover,h5>a[href^="#"][id]:empty:target,h6>a[href^="#"][id]:empty:focus,h6>a[href^="#"][id]:empty:hover,h6>a[href^="#"][id]:empty:target{opacity:1;box-shadow:none;color:#000}h1>a[href^="#"][id]:empty:target:focus,h2>a[href^="#"][id]:empty:target:focus,h3>a[href^="#"][id]:empty:target:focus,h4>a[href^="#"][id]:empty:target:focus,h5>a[href^="#"][id]:empty:target:focus,h6>a[href^="#"][id]:empty:target:focus{outline:0}h1>a[href^="#"][id]:empty::before,h2>a[href^="#"][id]:empty::before,h3>a[href^="#"][id]:empty::before,h4>a[href^="#"][id]:empty::before,h5>a[href^="#"][id]:empty::before,h6>a[href^="#"][id]:empty::before{content:"§ "}h1{font-size:2.5em}h2{font-size:1.75em}h3{font-size:1.25em}h4{font-size:1.15em}a abbr,h5,h6{font-size:1em}h6{margin-top:1em}article+article{margin-top:4em}article header p{font-size:.6em;color:#aaa}article header p+h1,article header p+h2{margin-top:-.25em}article header h1 a,article header h2 a{color:#000}article header h1 a:visited,article header h2 a:visited,h6,legend{color:#aaa}article>footer{margin-top:1.5em;font-size:.85em}a:visited{color:#8d39d0}a:active,a:hover{outline-width:0}a:hover{color:#f00000}abbr{margin-right:-.075em;text-decoration:none;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;letter-spacing:.075em;font-size:.9em}img,picture{display:block;max-width:100%;margin:0 auto}audio,video{width:100%;max-width:100%}figure{margin:1em 0 .5em;padding:0}figure figcaption{opacity:.65;font-size:.85em}table{display:inline-block;border-spacing:0;border-collapse:collapse;overflow-x:auto;max-width:100%;text-align:left;vertical-align:top;background:linear-gradient(rgba(0,0,0,.15) 0%,rgba(0,0,0,.15) 100%) 0 0,linear-gradient(rgba(0,0,0,.15) 0%,rgba(0,0,0,.15) 100%) 100% 0;background-attachment:scroll,scroll;background-size:1px 100%,1px 100%;background-repeat:no-repeat,no-repeat}table caption{font-size:.9em;background:#fff}table td,table th{padding:.35em .75em;vertical-align:top;font-size:.9em;border:1px solid #f2f2f2;border-top:0;border-left:0}table td:first-child,table th:first-child{padding-left:0;background-image:linear-gradient(to right,#fff 50%,rgba(255,255,255,0) 100%);background-size:2px 100%;background-repeat:no-repeat}table td:last-child,table th:last-child{padding-right:0;border-right:0;background-image:linear-gradient(to left,#fff 50%,rgba(255,255,255,0) 100%);background-position:100% 0;background-size:2px 100%;background-repeat:no-repeat}table td:only-child,table th:only-child{background-image:linear-gradient(to right,#fff 50%,rgba(255,255,255,0) 100%),linear-gradient(to left,#fff 50%,rgba(255,255,255,0) 100%);background-position:0 0,100% 0;background-size:2px 100%,2px 100%;background-repeat:no-repeat,no-repeat}table th{line-height:1.2}form{margin-right:auto;margin-left:auto}@media (min-width:40rem){form{max-width:80%}}form label,form select,output{display:block}form label:not(:first-child){margin-top:1em}form p label{display:inline}form p label+label{margin-left:1em}form input[type],form select,form textarea{margin-bottom:1em}form input[type=checkbox],form input[type=radio]{margin-bottom:0}button,fieldset{margin:0;border:1px solid #aaa}fieldset{padding:.5em 1em}button{outline:0;box-sizing:border-box;height:2em;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border-radius:2px;background:#fff;display:inline-block;width:auto;background:#f2f2f2;color:#000;cursor:pointer}button:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,input[type^=date]:focus,select:focus{border:1px solid #000}button:not([disabled]):hover,input[type=button]:not([disabled]):hover,input[type=file]:not([disabled]):hover,input[type=reset]:not([disabled]):hover,input[type=submit]:not([disabled]):hover,select:not([disabled]):hover{border:1px solid #000}button:active,select:active{background-color:#aaa}button[disabled],select[disabled]{color:#aaa;cursor:not-allowed}select{outline:0;box-sizing:border-box;height:2em;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #aaa;border-radius:2px;background:#fff;display:inline-block;width:auto;background:#f2f2f2;color:#000;cursor:pointer;padding-right:1.2em;background-position:top 55% right .35em;background-size:.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='rgb(170, 170, 170)' fill-rule='nonzero' d='M1.5 2L3 0H0z'/%3E%3C/svg%3E")}select:not([disabled]):focus,select:not([disabled]):hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='rgb(0, 0, 0)' fill-rule='nonzero' d='M1.5 2L3 0H0z'/%3E%3C/svg%3E")}input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],input[type^=date]{outline:0;box-sizing:border-box;height:2em;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #aaa;border-radius:2px;background:#fff;color:#000;display:block;width:100%;line-height:calc(2em - 1px*2 - (.25em - 1px)*2);-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=email]::-moz-placeholder,input[type=month]::-moz-placeholder,input[type=number]::-moz-placeholder,input[type=password]::-moz-placeholder,input[type=search]::-moz-placeholder,input[type=tel]::-moz-placeholder,input[type=text]::-moz-placeholder,input[type=time]::-moz-placeholder,input[type=url]::-moz-placeholder,input[type=week]::-moz-placeholder,input[type^=date]::-moz-placeholder{color:#aaa}input[type=email]::-webkit-input-placeholder,input[type=month]::-webkit-input-placeholder,input[type=number]::-webkit-input-placeholder,input[type=password]::-webkit-input-placeholder,input[type=search]::-webkit-input-placeholder,input[type=tel]::-webkit-input-placeholder,input[type=text]::-webkit-input-placeholder,input[type=time]::-webkit-input-placeholder,input[type=url]::-webkit-input-placeholder,input[type=week]::-webkit-input-placeholder,input[type^=date]::-webkit-input-placeholder{color:#aaa}input[type=email]:-ms-input-placeholder,input[type=month]:-ms-input-placeholder,input[type=number]:-ms-input-placeholder,input[type=password]:-ms-input-placeholder,input[type=search]:-ms-input-placeholder,input[type=tel]:-ms-input-placeholder,input[type=text]:-ms-input-placeholder,input[type=time]:-ms-input-placeholder,input[type=url]:-ms-input-placeholder,input[type=week]:-ms-input-placeholder,input[type^=date]:-ms-input-placeholder{color:#aaa}input[type=button],input[type=reset],input[type=submit]{outline:0;box-sizing:border-box;height:2em;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #aaa;border-radius:2px;background:#fff;display:inline-block;width:auto;background:#f2f2f2;color:#000;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{border:1px solid #000}input[type=button]:active,input[type=reset]:active,input[type=submit]:active{background-color:#aaa}input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{color:#aaa;cursor:not-allowed}input[type=color]{outline:0;box-sizing:border-box;height:2em;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #aaa;border-radius:2px;background:#fff;color:#000;display:block;line-height:calc(2em - 1px*2 - (.25em - 1px)*2);-webkit-appearance:none;-moz-appearance:none;appearance:none;width:6em}input[type=color]:focus{border:1px solid #000}input[type=color]::-moz-placeholder,textarea::-moz-placeholder{color:#aaa}input[type=color]::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#aaa}input[type=color]:-ms-input-placeholder{color:#aaa}input[type=color]:hover{border:1px solid #000}input[type=file]{outline:0;box-sizing:border-box;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;border:1px solid #aaa;border-radius:2px;background:#fff;background:#f2f2f2;color:#000;cursor:pointer;display:block;width:100%;height:auto;padding:.75em .5em;font-size:12px;line-height:1}input[type=file]:focus,textarea:focus{border:1px solid #000}input[type=file]:active{background-color:#aaa}input[type=file][disabled]{color:#aaa;cursor:not-allowed}input[type=checkbox],input[type=radio]{margin:-.2em .75em 0 0;vertical-align:middle}textarea{outline:0;box-sizing:border-box;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #aaa;border-radius:2px;background:#fff;color:#000;display:block;width:100%;line-height:calc(2em - 1px*2 - (.25em - 1px)*2);-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4.5em;resize:vertical;padding-top:.5em;padding-bottom:.5em}textarea:-ms-input-placeholder{color:#aaa}code,kbd,samp,var{font-family:Consolas,"Lucida Console",Monaco,monospace;font-style:normal}pre{overflow-x:auto;font-size:.8em;background:linear-gradient(rgba(0,0,0,.15) 0%,rgba(0,0,0,.15) 100%) 0 0,linear-gradient(rgba(0,0,0,.15) 0%,rgba(0,0,0,.15) 100%) 100% 0;background-attachment:scroll,scroll;background-size:1px 100%,1px 100%;background-repeat:no-repeat,no-repeat}pre>code,summary{display:inline-block}pre>code{overflow-x:visible;box-sizing:border-box;min-width:100%;border-right:3px solid #fff;border-left:1px solid #fff}hr{height:1px;margin:2em 0;border:0;background:#f2f2f2}details[open]{padding-bottom:.5em;border-bottom:1px solid #f2f2f2}summary{font-weight:700;border-bottom:1px dashed;cursor:pointer}summary::-webkit-details-marker{display:none}noscript{color:#d00000}::selection{background:rgba(0,100,193,.25)} -------------------------------------------------------------------------------- /static/styles/basic.css: -------------------------------------------------------------------------------- 1 | *{box-sizing:border-box}:root{--sans:1em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Fira Sans,sans-serif;--mono:SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,'Courier New',monospace;--c1:#0074d9;--c2:#eee;--c3:#fff;--c4:#000;--c5:#fff;--m1:8px;--rc:8px}@media (prefers-color-scheme:dark){:root{--c2:#333;--c3:#1e1f20;--c4:#fff}}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;font:var(--sans);font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;background-color:var(--c3);color:var(--c4)}iframe,img{border:none;max-width:100%}a{color:var(--c1);text-decoration:none}a:hover{color:var(--c1);text-decoration:underline}pre{font:1em/1.6 var(--mono);background:var(--c2);padding:1em;overflow:auto}code{font:1em/1.6 var(--mono)}blockquote{border-left:5px solid var(--c2);padding:1em 1.5em;margin:0}hr{border:0;border-bottom:1px solid var(--c4)}h1,h2,h3,h4,h5,h6{margin:.6em 0;font-weight:400}h1{font-size:2.625em;line-height:1.2}h2{font-size:1.625em;line-height:1.2}h3{font-size:1.3125em;line-height:1.24}h4{font-size:1.1875em;line-height:1.23}h5,h6{font-size:1em;font-weight:700}table{border-collapse:collapse;border-spacing:0;margin:1em 0}td,th{text-align:left;vertical-align:top;border:1px solid;padding:.4em}tfoot,thead{background:var(--c2)}button,code,img,input,pre,select,textarea{border-radius:var(--rc)}input,select,textarea{font-size:1em;color:var(--c4);background:var(--c2);border:0;padding:.6em}button,input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:none;font-size:1em;display:inline-block;color:var(--c5);background:var(--c1);border:0;margin:4px;padding:.6em;cursor:pointer;text-align:center}button:focus,button:hover,input:hover,select:hover,textarea:hover{opacity:.8}section{display:flex;flex-flow:row wrap}[style*="--c:"],article,aside,section>section{flex:var(--c,1);margin:var(--m1)}article{background:var(--c2);border-radius:var(--rc);padding:1em;box-shadow:0 1px 0 rgba(0,0,0,.3)}[style*="--c:"]:first-child,article:first-child,section>section:first-child{margin-left:0}[style*="--c:"]:last-child, section>section:last-child, article:last-child {margin-right:0} 2 | -------------------------------------------------------------------------------- /static/styles/marx.css: -------------------------------------------------------------------------------- 1 | /*! Marx v4.0.1 - The classless CSS reset (perfect for Communists) | MIT License | https://github.com/mblode/marx */*,:after,:before{background-repeat:no-repeat;box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}:where(:root){-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;tab-size:4}:where(body){margin:0}:where(h1){font-size:2em;margin:.67em 0}:where(dl,ol,ul) :where(dl,ol,ul){margin:0}:where(hr){color:inherit;height:0}:where(nav) :where(ol,ul){list-style-type:none;padding:0}:where(navli):before{content:"\200B";float:left}:where(pre){font-family:monospace,monospace;font-size:1em;overflow:auto}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}:where(iframe){border-style:none}:where(svg:not([fill])){fill:currentColor}:where(table){border-collapse:collapse;border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button,[type=button i],[type=reset i],[type=submit i]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){margin:0;resize:vertical}:where([type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(details>summary:first-of-type){display:list-item}:where([aria-busy=true i]){cursor:progress}:where([aria-disabled=true i],[disabled]){cursor:not-allowed}:where([aria-hidden=false i][hidden]){display:initial}:where([aria-hidden=false i][hidden]:not(:focus)){clip:rect(0,0,0,0);position:absolute}:root{--br:4px;--xs-pad:4px;--sm-pad:8px;--md-pad:16px;--lg-pad:20px;--xlg-pad:40px;--sm-breakpoint:400px;--lg-breakpoint:768px;--primary-400:#60a5fa;--primary:#3b82f6;--primary-600:#2563eb;--accent:#64ffda;--red:#f43f5e;--red-600:#dc2626;--yellow:#eab308;--grey:#f7f7f9;--white:#fff;--black:#000;--text:rgba(0,0,0,.8);--secondary:rgba(0,0,0,.54);--disabled:rgba(0,0,0,.38);--dividers:rgba(0,0,0,.12);--link-color:var(--primary);--link-hover-color:var(--primary-600);--sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--serif:Georgia,Times,"Times New Roman",serif;--monospace:Menlo,Monaco,Consolas,"Courier New",monospace;--font-family:var(--sans-serif);--font-size-base:16px;--font-size-sm:14px;--font-size-h1:40px;--font-size-h2:32px;--font-size-h3:28px;--font-size-h4:24px;--font-size-h5:20px;--font-size-h6:16px;--line-height-base:1.5;--border:1px solid var(--dividers)}article,aside,details,footer,header,main,section,summary{margin:0 auto;margin-bottom:var(--md-pad);width:100%}main{display:block;margin:0 auto;max-width:var(--lg-breakpoint);padding:0 var(--md-pad) var(--md-pad)}footer{border-top:var(--border);padding:var(--md-pad) 0;text-align:center}footer p{margin-bottom:0}hr{border:0;border-top:var(--border);box-sizing:content-box;display:block;height:0;margin-bottom:var(--md-pad);margin-top:var(--md-pad);overflow:visible;width:100%}img{height:auto;max-width:100%;vertical-align:baseline}@media screen and (max-width:var(--sm-breakpoint)){article,aside,section{clear:both;display:block;max-width:100%}img{margin-right:var(--md-pad)}}embed,iframe,video{border:0}body{color:var(--text);font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-base)}p{margin:0;margin-bottom:var(--md-pad)}h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;font-weight:500;line-height:1.2}h1{font-size:var(--font-size-h1)}h1,h2{margin:var(--lg-pad) 0 var(--md-pad)}h2{font-size:var(--font-size-h2)}h3{font-size:var(--font-size-h3)}h3,h4{margin:var(--md-pad) 0 var(--xs-pad)}h4{font-size:var(--font-size-h4)}h5{font-size:var(--font-size-h5);margin:var(--md-pad 0) var(--xs-pad)}h6{font-size:var(--font-size-h6);margin:var(--md-pad) 0 var(--xs-pad)}small{color:var(--secondary);vertical-align:bottom}pre{background-color:var(--grey);display:block;margin:var(--md-pad 0);overflow-wrap:break-word;padding:var(--md-pad);white-space:pre-wrap}code,pre{color:var(--text);font-family:var(--monospace);font-size:var(--font-size-base)}code{word-wrap:break-word;line-height:inherit;margin:0;padding:0;vertical-align:baseline;word-break:break-all}a{background-color:transparent;color:var(--link-color);text-decoration:none}a:focus,a:hover{color:var(--link-hover-color);text-decoration:underline}dl{margin-bottom:var(--md-pad)}dd{margin-left:var(--xlg-pad)}ol,ul{margin-bottom:var(--sm-pad);padding-left:var(--xlg-pad);vertical-align:baseline}blockquote{border-left:2px solid var(--text);font-style:italic;margin:var(--md-pad 0);padding-left:var(--md-pad)}blockquote,figcaption{font-family:var(--serif)}u{text-decoration:underline}s{text-decoration:line-through}sup{vertical-align:super}sub,sup{font-size:var(--font-size-sm)}sub{vertical-align:sub}mark{background-color:var(--yellow)}input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{background:var(--white);background-clip:padding-box;border:var(--border);border-radius:var(--br);color:var(--text);display:block;font-family:var(--sans-serif);font-size:1rem;line-height:1.5;padding:var(--sm-pad) var(--md-pad);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%;word-break:normal}input[type=color]{background-color:var(--white);display:inline-block;vertical-align:middle}input:not([type]),input[type=color]{border:var(--border);border-radius:var(--br)}input:not([type]){-webkit-appearance:none;background:var(--white);background-clip:padding-box;color:var(--text);display:block;line-height:1.5;padding:var(--sm-pad) var(--md-pad);text-align:left;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%;word-break:normal}input:not([type]):focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{background-color:var(--white);border-color:var(--primary-400);box-shadow:0 0 0 .2rem rgba(59,130,246,.5);outline:0}input[type=checkbox]:focus,input[type=file]:focus,input[type=radio]:focus{outline:1px thin var(--dividers)}input:not([type])[disabled],input[type=color][disabled],input[type=date][disabled],input[type=datetime-local][disabled],input[type=datetime][disabled],input[type=email][disabled],input[type=month][disabled],input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=text][disabled],input[type=time][disabled],input[type=url][disabled],input[type=week][disabled],select[disabled],textarea[disabled]{background-color:var(--dividers);color:var(--secondary);cursor:not-allowed;opacity:1}input[readonly],select[readonly],textarea[readonly]{border-color:var(--dividers);color:var(--secondary)}input:focus:invalid,select:focus:invalid,textarea:focus:invalid{border-color:var(--red-600);color:var(--red)}input[type=checkbox]:focus:invalid:focus,input[type=file]:focus:invalid:focus,input[type=radio]:focus:invalid:focus{outline-color:var(--red)}select{border:var(--border);vertical-align:sub}select:not([size]):not([multiple]){height:calc(2.25rem + 2px)}select[multiple]{height:auto}label{display:inline-block;line-height:2}fieldset{border:0;margin:0}fieldset,legend{padding:var(--sm-pad 0)}legend{border-bottom:var(--border);color:var(--text);display:block;margin-bottom:var(--sm-pad);width:100%}textarea{overflow:auto;resize:vertical}input[type=checkbox],input[type=radio]{box-sizing:border-box;display:inline;padding:0}button,input[type=button],input[type=reset],input[type=submit]{background-color:var(--primary);border:1px solid transparent;border-radius:var(--br);color:var(--white);display:inline-block;font-size:1rem;font-weight:400;line-height:1.5;padding:var(--sm-pad) var(--md-pad);text-align:center;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0}button:hover,button:not(:disabled):active,input[type=button]:hover,input[type=button]:not(:disabled):active,input[type=reset]:hover,input[type=reset]:not(:disabled):active,input[type=submit]:hover,input[type=submit]:not(:disabled):active{background-color:var(--primary-600);border-color:var(--primary-600);color:var(--white)}button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:0 0 0 .2rem rgba(59,130,246,.5);outline:0}button:disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{background-color:var(--primary);border-color:var(--primary);color:var(--white);cursor:not-allowed;opacity:.65}table{border-top:var(--border);margin-bottom:var(--md-pad)}caption{padding:var(--sm-pad 0)}thead th{border:0;border-bottom:2px solid var(--dividers);text-align:left}tr{margin-bottom:var(--sm-pad)}td,th{border-bottom:var(--border);padding:var(--md-pad);vertical-align:inherit}tfoot tr{text-align:left}tfoot td{color:var(--secondary);font-size:var(--sm-pad);font-style:italic;padding:var(--md-pad) var(--xs-pad)} -------------------------------------------------------------------------------- /static/styles/openprops.css: -------------------------------------------------------------------------------- 1 | @import "https://unpkg.com/open-props" layer(base); 2 | @import "https://unpkg.com/open-props/normalize.min.css" layer(base); 3 | @import "https://unpkg.com/open-props/buttons.min.css" layer(base); -------------------------------------------------------------------------------- /static/styles/sakura.css: -------------------------------------------------------------------------------- 1 | /* Sakura.css v1.4.1 2 | * ================ 3 | * Minimal css theme. 4 | * Project: https://github.com/oxalorg/sakura/ 5 | */ 6 | /* Body */ 7 | html { 8 | font-size: 62.5%; 9 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 10 | } 11 | 12 | body { 13 | font-size: 1.8rem; 14 | line-height: 1.618; 15 | max-width: 38em; 16 | margin: auto; 17 | color: #4a4a4a; 18 | background-color: #f9f9f9; 19 | padding: 13px; 20 | } 21 | 22 | @media (max-width: 684px) { 23 | body { 24 | font-size: 1.53rem; 25 | } 26 | } 27 | @media (max-width: 382px) { 28 | body { 29 | font-size: 1.35rem; 30 | } 31 | } 32 | h1, h2, h3, h4, h5, h6 { 33 | line-height: 1.1; 34 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 35 | font-weight: 700; 36 | margin-top: 3rem; 37 | margin-bottom: 1.5rem; 38 | overflow-wrap: break-word; 39 | word-wrap: break-word; 40 | -ms-word-break: break-all; 41 | word-break: break-word; 42 | } 43 | 44 | h1 { 45 | font-size: 2.35em; 46 | } 47 | 48 | h2 { 49 | font-size: 2em; 50 | } 51 | 52 | h3 { 53 | font-size: 1.75em; 54 | } 55 | 56 | h4 { 57 | font-size: 1.5em; 58 | } 59 | 60 | h5 { 61 | font-size: 1.25em; 62 | } 63 | 64 | h6 { 65 | font-size: 1em; 66 | } 67 | 68 | p { 69 | margin-top: 0px; 70 | margin-bottom: 2.5rem; 71 | } 72 | 73 | small, sub, sup { 74 | font-size: 75%; 75 | } 76 | 77 | hr { 78 | border-color: #1d7484; 79 | } 80 | 81 | a { 82 | text-decoration: none; 83 | color: #1d7484; 84 | } 85 | a:visited { 86 | color: #144f5a; 87 | } 88 | a:hover { 89 | color: #982c61; 90 | border-bottom: 2px solid #4a4a4a; 91 | } 92 | 93 | ul { 94 | padding-left: 1.4em; 95 | margin-top: 0px; 96 | margin-bottom: 2.5rem; 97 | } 98 | 99 | li { 100 | margin-bottom: 0.4em; 101 | } 102 | 103 | blockquote { 104 | margin-left: 0px; 105 | margin-right: 0px; 106 | padding-left: 1em; 107 | padding-top: 0.8em; 108 | padding-bottom: 0.8em; 109 | padding-right: 0.8em; 110 | border-left: 5px solid #1d7484; 111 | margin-bottom: 2.5rem; 112 | background-color: #f1f1f1; 113 | } 114 | 115 | blockquote p { 116 | margin-bottom: 0; 117 | } 118 | 119 | img, video { 120 | height: auto; 121 | max-width: 100%; 122 | margin-top: 0px; 123 | margin-bottom: 2.5rem; 124 | } 125 | 126 | /* Pre and Code */ 127 | pre { 128 | background-color: #f1f1f1; 129 | display: block; 130 | padding: 1em; 131 | overflow-x: auto; 132 | margin-top: 0px; 133 | margin-bottom: 2.5rem; 134 | font-size: 0.9em; 135 | } 136 | 137 | code, kbd, samp { 138 | font-size: 0.9em; 139 | padding: 0 0.5em; 140 | background-color: #f1f1f1; 141 | white-space: pre-wrap; 142 | } 143 | 144 | pre > code { 145 | padding: 0; 146 | background-color: transparent; 147 | white-space: pre; 148 | font-size: 1em; 149 | } 150 | 151 | /* Tables */ 152 | table { 153 | text-align: justify; 154 | width: 100%; 155 | border-collapse: collapse; 156 | } 157 | 158 | td, th { 159 | padding: 0.5em; 160 | border-bottom: 1px solid #f1f1f1; 161 | } 162 | 163 | /* Buttons, forms and input */ 164 | input, textarea { 165 | border: 1px solid #4a4a4a; 166 | } 167 | input:focus, textarea:focus { 168 | border: 1px solid #1d7484; 169 | } 170 | 171 | textarea { 172 | width: 100%; 173 | } 174 | 175 | .button, button, input[type=submit], input[type=reset], input[type=button] { 176 | display: inline-block; 177 | padding: 5px 10px; 178 | text-align: center; 179 | text-decoration: none; 180 | white-space: nowrap; 181 | background-color: #1d7484; 182 | color: #f9f9f9; 183 | border-radius: 1px; 184 | border: 1px solid #1d7484; 185 | cursor: pointer; 186 | box-sizing: border-box; 187 | } 188 | .button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] { 189 | cursor: default; 190 | opacity: 0.5; 191 | } 192 | .button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled { 193 | background-color: #982c61; 194 | border-color: #982c61; 195 | color: #f9f9f9; 196 | outline: 0; 197 | } 198 | 199 | textarea, select, input { 200 | color: #4a4a4a; 201 | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ 202 | margin-bottom: 10px; 203 | background-color: #f1f1f1; 204 | border: 1px solid #f1f1f1; 205 | border-radius: 4px; 206 | box-shadow: none; 207 | box-sizing: border-box; 208 | } 209 | textarea:focus, select:focus, input:focus { 210 | border: 1px solid #1d7484; 211 | outline: 0; 212 | } 213 | 214 | input[type=checkbox]:focus { 215 | outline: 1px dotted #1d7484; 216 | } 217 | 218 | label, legend, fieldset { 219 | display: block; 220 | margin-bottom: 0.5rem; 221 | font-weight: 600; 222 | } -------------------------------------------------------------------------------- /static/styles/stylize.css: -------------------------------------------------------------------------------- 1 | /*! stylize.css v1.0.0 | License MIT | https://github.com/vasanthv/stylize.css */ 2 | :root{ 3 | --text: #333333; 4 | --text-med: #888888; 5 | --text-light: #cccccc; 6 | --text-lighter: #eeeeee; 7 | --blue: #3498db; 8 | --dark-blue: #2980b9; 9 | --yellow: #ffeaa7; 10 | --red: #c0392b; 11 | --border-radius: 3px; 12 | } 13 | 14 | body{ 15 | font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; /* To use the system default font. */ 16 | line-height: 1.5; 17 | font-size: 1em; 18 | color:var(--text); 19 | margin: 10px; 20 | -webkit-text-size-adjust: 100%; 21 | } 22 | 23 | /* Headings */ 24 | h1{ 25 | font-size: 2em; /* h1 inside section is treated different in some browsers */ 26 | margin: 0.67em 0; 27 | } 28 | h2{ 29 | font-size: 1.5em; 30 | margin: 0.83em 0; 31 | } 32 | h3{ 33 | font-size: 1.17em; 34 | margin: 1em 0; 35 | } 36 | h4{ 37 | font-size: 1em; 38 | margin: 1.17em 0; 39 | } 40 | h5{ 41 | font-size: 0.83em; 42 | margin: 1.5em 0; 43 | } 44 | h6{ 45 | font-size: 0.67em; 46 | margin: 2em 0; 47 | } 48 | 49 | /* Links */ 50 | a{ 51 | color:var(--blue); 52 | background-color: transparent; 53 | } 54 | a:visited{ 55 | color:var(--dark-blue); 56 | } 57 | 58 | /* Navigation Links*/ 59 | nav{ 60 | background-color: var(--text-lighter); 61 | padding: 1em; 62 | margin:-10px; 63 | } 64 | nav a{ 65 | padding:0.5em; 66 | border-radius: var(--border-radius); 67 | text-decoration: none; 68 | } 69 | nav a:hover{ 70 | background-color: var(--text-light); 71 | color: var(--text) 72 | } 73 | 74 | /* Horizontal Line */ 75 | hr{ 76 | border: 1px solid var(--text-med); 77 | border-bottom: 0px; 78 | height:0px; 79 | } 80 | 81 | /* Text formatting tags */ 82 | p{ 83 | margin:1em 0; 84 | } 85 | mark{ 86 | background-color: var(--yellow); 87 | color:#333333; 88 | } 89 | small{ 90 | font-size: 80%; 91 | } 92 | sub, 93 | sup{ 94 | font-size: 75%; 95 | } 96 | 97 | /* Quotation and Citation tags*/ 98 | blockquote{ 99 | border-left: 4px solid var(--text-light); 100 | margin:1em 0; 101 | padding:0.6em 1em; 102 | } 103 | pre{ 104 | font-family: monospace; 105 | border:1px solid var(--text-light); 106 | background-color: var(--text-lighter); 107 | padding: 0.8em; 108 | border-radius: var(--border-radius); 109 | font-size: 1em; 110 | white-space: pre-wrap; 111 | word-wrap: break-word; 112 | } 113 | code, 114 | kbd, 115 | samp{ 116 | font-family: monospace; 117 | font-size: 1em; 118 | } 119 | code, 120 | kbd{ 121 | border-radius: var(--border-radius); 122 | padding:0px 2px; 123 | } 124 | code{ 125 | border:1px solid var(--text-light); 126 | background-color: var(--text-lighter); 127 | color:var(--red); 128 | } 129 | kbd{ 130 | border:1px solid var(--text); 131 | background-color: var(--text); 132 | color:var(--text-lighter); 133 | } 134 | 135 | /* List items */ 136 | ul, ol{ 137 | padding-left: 2em; 138 | } 139 | 140 | /* Form elements */ 141 | 142 | fieldset{ 143 | border: 1px solid var(--text); 144 | border-radius: var(--border-radius); 145 | } 146 | select { 147 | -webkit-appearance: none; 148 | -moz-appearance : none; 149 | appearance : none; 150 | background: transparent; 151 | background-image: url("data:image/svg+xml;utf8,"); 152 | background-repeat: no-repeat; 153 | background-position-x: 100%; 154 | background-position-y: 50%; 155 | } 156 | button, 157 | input, 158 | select, 159 | textarea, 160 | a[role="button"] { 161 | font-family: inherit; 162 | font-size: 100%; 163 | line-height: 1.5; 164 | margin: 0; 165 | padding: 0.33em; 166 | border: 1px solid var(--text-light); 167 | border-radius: var(--border-radius); 168 | box-sizing: border-box; 169 | } 170 | input[type="checkbox"], 171 | input[type="radio"]{ 172 | border:none; 173 | border:0; 174 | } 175 | 176 | button, 177 | input[type="button"], 178 | input[type="submit"], 179 | a[role="button"] { 180 | padding: 0.33em 0.66em; 181 | cursor: pointer; 182 | background-color: var(--text-lighter); 183 | color: var(--text); 184 | text-decoration: none; 185 | } 186 | button:hover, 187 | input[type="button"]:hover, 188 | input[type="submit"]:hover, 189 | a[role="button"]:hover { 190 | background-color: var(--text-light); 191 | } 192 | a[role="button"]{ 193 | padding:0.5em 0.66em; 194 | } 195 | button:disabled, 196 | input[type="button"]:disabled, 197 | input[type="submit"]:disabled, 198 | a[role="button"]:disabled { 199 | background-color: var(--text-lighter); 200 | color: var(--text-light); 201 | cursor: not-allowed; 202 | } 203 | /* Progress Bar */ 204 | 205 | progress[value] { 206 | -webkit-appearance: none; 207 | -moz-appearance: none; 208 | appearance: none; 209 | vertical-align: middle; 210 | border: none; 211 | width: 15em; 212 | height: 0.75em; 213 | background-color: var(--text-light); 214 | color: var(--blue); 215 | } 216 | progress[value]::-webkit-progress-bar { 217 | background-color: var(--text-light); 218 | } 219 | progress[value]::-webkit-progress-value{ 220 | background-color: var(--blue); 221 | } 222 | 223 | /* Table Elements */ 224 | table{ 225 | border-collapse: collapse; 226 | } 227 | table, 228 | table th, 229 | table td { 230 | border-bottom: 1px solid var(--text-light); 231 | padding:0.33em 0.66em; 232 | text-align: left; 233 | vertical-align: middle; 234 | } 235 | table[border="1"], 236 | table[border="1"] th, 237 | table[border="1"] td { 238 | border: 1px solid var(--text-light); 239 | } 240 | 241 | /* Utility classes */ 242 | .left{ 243 | float: left; 244 | } 245 | .right{ 246 | float: right; 247 | } 248 | .center{ 249 | text-align: center; 250 | } 251 | .clear{ 252 | clear: both; 253 | } 254 | .hide{ 255 | display: none; 256 | } 257 | .spacer{ 258 | display: block; 259 | height:1em; 260 | border:none; 261 | clear: both; 262 | } 263 | .wrap{ 264 | width: 100%; 265 | max-width: 40em; 266 | margin: auto; 267 | } 268 | .reset{ 269 | font: inherit; 270 | font-size: 100%; 271 | margin: 0; 272 | padding: 0; 273 | border: 0; 274 | text-decoration: none; 275 | } 276 | ol.reset, ul.reset { 277 | list-style: none; 278 | } -------------------------------------------------------------------------------- /static/styles/tufte.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";@font-face{font-family:et-book;src:url(et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot);src:url(et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix) format("embedded-opentype"),url(et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff) format("woff"),url(et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf) format("truetype"),url(et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:et-book;src:url(et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot);src:url(et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix) format("embedded-opentype"),url(et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff) format("woff"),url(et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf) format("truetype"),url(et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf) format("svg");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:et-book;src:url(et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot);src:url(et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix) format("embedded-opentype"),url(et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff) format("woff"),url(et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf) format("truetype"),url(et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf) format("svg");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:et-book-roman-old-style;src:url(et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot);src:url(et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix) format("embedded-opentype"),url(et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff) format("woff"),url(et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf) format("truetype"),url(et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbookromanosf) format("svg");font-weight:400;font-style:normal;font-display:swap}html{font-size:15px}body{width:87.5%;margin-left:auto;margin-right:auto;padding-left:12.5%;font-family:et-book,Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif;background-color:#fffff8;color:#111;max-width:1400px;counter-reset:sidenote-counter}@media (prefers-color-scheme:dark){body{background-color:#151515;color:#ddd}}h1{font-weight:400;margin-top:4rem;margin-bottom:1.5rem;font-size:3.2rem;line-height:1}h2{font-style:italic;font-weight:400;margin-top:2.1rem;margin-bottom:1.4rem;font-size:2.2rem;line-height:1}h3{font-style:italic;font-weight:400;font-size:1.7rem;margin-top:2rem;margin-bottom:1.4rem;line-height:1}hr{display:block;height:1px;width:55%;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}p.subtitle{font-style:italic;margin-top:1rem;margin-bottom:1rem;font-size:1.8rem;display:block;line-height:1}.numeral{font-family:et-book-roman-old-style}.danger{color:red}article{padding:5rem 0}section{padding-top:1rem;padding-bottom:1rem}dl,ol,p,ul{font-size:1.4rem;line-height:2rem}p{margin-top:1.4rem;margin-bottom:1.4rem;padding-right:0;vertical-align:baseline}div.epigraph{margin:5em 0}div.epigraph>blockquote{margin-top:3em;margin-bottom:3em}div.epigraph>blockquote,div.epigraph>blockquote>p{font-style:italic}div.epigraph>blockquote>footer{font-style:normal}div.epigraph>blockquote>footer>cite{font-style:italic}blockquote{font-size:1.4rem}blockquote p{width:55%;margin-right:40px}blockquote footer{width:55%;font-size:1.1rem;text-align:right}section>footer,section>p,section>table{width:55%}section>dl,section>ol,section>ul{width:50%;-webkit-padding-start:5%}dt:not(:first-child),li:not(:first-child){margin-top:.25rem}figure{padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;max-width:55%;-webkit-margin-start:0;-webkit-margin-end:0;margin:0 0 3em 0}figcaption{float:right;clear:right;margin-top:0;margin-bottom:0;font-size:1.1rem;line-height:1.6;vertical-align:baseline;position:relative;max-width:40%}figure.fullwidth figcaption{margin-right:24%}a:link,a:visited{color:inherit}.no-tufte-underline:link{background:unset;text-shadow:unset}.hover-tufte-underline:hover,.tufte-underline,a:link{text-decoration:none;background:-webkit-linear-gradient(#fffff8,#fffff8),-webkit-linear-gradient(#fffff8,#fffff8),-webkit-linear-gradient(currentColor,currentColor);background:linear-gradient(#fffff8,#fffff8),linear-gradient(#fffff8,#fffff8),linear-gradient(currentColor,currentColor);-webkit-background-size:.05em 1px,.05em 1px,1px 1px;-moz-background-size:.05em 1px,.05em 1px,1px 1px;background-size:.05em 1px,.05em 1px,1px 1px;background-repeat:no-repeat,no-repeat,repeat-x;text-shadow:.03em 0 #fffff8,-.03em 0 #fffff8,0 .03em #fffff8,0 -.03em #fffff8,.06em 0 #fffff8,-.06em 0 #fffff8,.09em 0 #fffff8,-.09em 0 #fffff8,.12em 0 #fffff8,-.12em 0 #fffff8,.15em 0 #fffff8,-.15em 0 #fffff8;background-position:0 93%,100% 93%,0 93%}@media screen and (-webkit-min-device-pixel-ratio:0){.hover-tufte-underline:hover,.tufte-underline,a:link{background-position-y:87%,87%,87%}}@media (prefers-color-scheme:dark){.hover-tufte-underline:hover,.tufte-underline,a:link{text-shadow:.03em 0 #151515,-.03em 0 #151515,0 .03em #151515,0 -.03em #151515,.06em 0 #151515,-.06em 0 #151515,.09em 0 #151515,-.09em 0 #151515,.12em 0 #151515,-.12em 0 #151515,.15em 0 #151515,-.15em 0 #151515}}a:link::-moz-selection,a:link::selection{text-shadow:.03em 0 #b4d5fe,-.03em 0 #b4d5fe,0 .03em #b4d5fe,0 -.03em #b4d5fe,.06em 0 #b4d5fe,-.06em 0 #b4d5fe,.09em 0 #b4d5fe,-.09em 0 #b4d5fe,.12em 0 #b4d5fe,-.12em 0 #b4d5fe,.15em 0 #b4d5fe,-.15em 0 #b4d5fe;background:#b4d5fe}img{max-width:100%}.marginnote,.sidenote{float:right;clear:right;margin-right:-60%;width:50%;margin-top:.3rem;margin-bottom:0;font-size:1.1rem;line-height:1.3;vertical-align:baseline;position:relative}.sidenote-number{counter-increment:sidenote-counter}.sidenote-number:after,.sidenote:before{font-family:et-book-roman-old-style;position:relative;vertical-align:baseline}.sidenote-number:after{content:counter(sidenote-counter);font-size:1rem;top:-.5rem;left:.1rem}.sidenote:before{content:counter(sidenote-counter) " ";font-size:1rem;top:-.5rem}blockquote .marginnote,blockquote .sidenote{margin-right:-82%;min-width:59%;text-align:left}div.fullwidth,table.fullwidth{width:100%}div.table-wrapper{overflow-x:auto;font-family:"Trebuchet MS","Gill Sans","Gill Sans MT",sans-serif}.sans{font-family:"Gill Sans","Gill Sans MT",Calibri,sans-serif;letter-spacing:.03em}code,pre>code{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:1rem;line-height:1.42;-webkit-text-size-adjust:100%}.sans>code{font-size:1.2rem}h1>code,h2>code,h3>code{font-size:.8em}.marginnote>code,.sidenote>code{font-size:1rem}pre>code{font-size:.9rem;width:52.5%;margin-left:2.5%;overflow-x:auto;display:block}pre.fullwidth>code{width:90%}.fullwidth{max-width:90%;clear:both}span.newthought{font-variant:small-caps;font-size:1.2em}input.margin-toggle{display:none}label.sidenote-number{display:inline-block;max-height:2rem}label.margin-toggle:not(.sidenote-number){display:none}.iframe-wrapper{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.iframe-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}@media (max-width:760px){body{width:84%;padding-left:8%;padding-right:8%}hr,section>footer,section>p,section>table{width:100%}pre>code{width:97%}section>dl,section>ol,section>ul{width:90%}figure{max-width:90%}figcaption,figure.fullwidth figcaption{margin-right:0;max-width:none}blockquote{margin-left:1.5em;margin-right:0}blockquote footer,blockquote p{width:100%}label.margin-toggle:not(.sidenote-number){display:inline}.marginnote,.sidenote{display:none}.margin-toggle:checked+.marginnote,.margin-toggle:checked+.sidenote{display:block;float:left;left:1rem;clear:both;width:95%;margin:1rem 2.5%;vertical-align:baseline;position:relative}label{cursor:pointer}div.table-wrapper,table{width:85%}img{width:100%}} 2 | -------------------------------------------------------------------------------- /static/styles/writ.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Writ v1.0.4 3 | * 4 | * Copyright © 2015, Curtis McEnroe 5 | * 6 | * https://cmcenroe.me/writ/LICENSE (ISC) 7 | */ 8 | 9 | /* Fonts, sizes & vertical rhythm */ 10 | 11 | html { 12 | font-family: Palatino, Georgia, Lucida Bright, Book Antiqua, serif; 13 | font-size: 16px; 14 | line-height: 1.5rem; 15 | } 16 | 17 | code, pre, samp, kbd { 18 | font-family: Consolas, Liberation Mono, Menlo, Courier, monospace; 19 | font-size: 0.833rem; 20 | } 21 | 22 | kbd { font-weight: bold; } 23 | h1, h2, h3, h4, h5, h6, th { font-weight: normal; } 24 | 25 | /* Minor third */ 26 | h1 { font-size: 2.488em; } 27 | h2 { font-size: 2.074em; } 28 | h3 { font-size: 1.728em; } 29 | h4 { font-size: 1.44em; } 30 | h5 { font-size: 1.2em; } 31 | h6 { font-size: 1em; } 32 | small { font-size: 0.833em; } 33 | 34 | h1, h2, h3 { line-height: 3rem; } 35 | 36 | p, ul, ol, dl, table, blockquote, pre, h1, h2, h3, h4, h5, h6 { 37 | margin: 1.5rem 0 0; 38 | } 39 | ul ul, ol ol, ul ol, ol ul { margin: 0; } 40 | 41 | hr { 42 | margin: 0; 43 | border: none; 44 | padding: 1.5rem 0 0; 45 | } 46 | 47 | /* Accounting for borders */ 48 | table { 49 | line-height: calc(1.5rem - 1px); 50 | margin-bottom: -1px; 51 | } 52 | pre { 53 | margin-top: calc(1.5rem - 1px); 54 | margin-bottom: -1px; 55 | } 56 | 57 | /* Colors */ 58 | 59 | body { color: #222; } 60 | code, pre, samp, kbd { color: #111; } 61 | a, header nav a:visited, a code { color: #00e; } 62 | a:visited, a:visited code { color: #60b; } 63 | mark { color: inherit; } 64 | 65 | code, pre, samp, thead, tfoot { background-color: rgba(0, 0, 0, 0.05); } 66 | mark { background-color: #fe0; } 67 | 68 | main aside, blockquote, ins { border: solid rgba(0, 0, 0, 0.05); } 69 | pre, code, samp { border: solid rgba(0, 0, 0, 0.1); } 70 | th, td { border: solid #dbdbdb; } 71 | 72 | /* Layout */ 73 | 74 | body { margin: 1.5rem 1ch; } 75 | 76 | body > header { text-align: center; } 77 | 78 | main, body > footer { 79 | display: block; /* Just in case */ 80 | max-width: 78ch; 81 | margin: auto; 82 | } 83 | 84 | main figure, main aside { 85 | float: right; 86 | margin: 1.5rem 0 0 1ch; 87 | } 88 | 89 | main aside { 90 | max-width: 26ch; 91 | border-width: 0 0 0 0.5ch; 92 | padding: 0 0 0 0.5ch; 93 | } 94 | 95 | /* Copy blocks */ 96 | 97 | blockquote { 98 | margin-right: 3ch; 99 | margin-left: 1.5ch; 100 | border-width: 0 0 0 0.5ch; 101 | padding: 0 0 0 1ch; 102 | } 103 | 104 | pre { 105 | border-width: 1px; 106 | border-radius: 2px; 107 | padding: 0 0.5ch; 108 | overflow-x: auto; 109 | } 110 | pre code { 111 | border: none; 112 | padding: 0; 113 | background-color: transparent; 114 | white-space: inherit; 115 | } 116 | 117 | img { max-width: 100%; } 118 | 119 | /* Lists */ 120 | 121 | ul, ol, dd { padding: 0 0 0 3ch; } 122 | dd { margin: 0; } 123 | 124 | ul > li { list-style-type: disc; } 125 | li ul > li { list-style-type: circle; } 126 | li li ul > li { list-style-type: square; } 127 | 128 | ol > li { list-style-type: decimal; } 129 | li ol > li { list-style-type: lower-roman; } 130 | li li ol > li { list-style-type: lower-alpha; } 131 | 132 | nav ul { 133 | padding: 0; 134 | list-style-type: none; 135 | } 136 | nav ul li { 137 | display: inline; 138 | padding-left: 1ch; 139 | white-space: nowrap; 140 | } 141 | nav ul li:first-child { padding-left: 0; } 142 | 143 | /* Tables */ 144 | 145 | table { 146 | width: 100%; 147 | border-collapse: collapse; 148 | overflow-x: auto; 149 | } 150 | 151 | th, td { 152 | border-width: 1px; 153 | padding: 0 0.5ch; 154 | } 155 | 156 | /* Copy inline */ 157 | 158 | a { text-decoration: none; } 159 | 160 | sup, sub { 161 | font-size: 0.75em; 162 | line-height: 1em; 163 | } 164 | 165 | ins { 166 | border-width: 1px; 167 | padding: 1px; 168 | text-decoration: none; 169 | } 170 | 171 | mark { 172 | padding: 1px; 173 | } 174 | 175 | code, samp { 176 | border-width: 1px; 177 | border-radius: 2px; 178 | padding: 0.1em 0.2em; 179 | white-space: nowrap; 180 | } -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Compare Classless CSS frameworks 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Welcome

12 |

I was struggling to make a simple page I was building look decent. 13 | I knew there were stylesheets just used 'semantic html' (like Tufte) and didn't require any special className 14 | (i.e <button class="btn-primary">a button</button>), however I was struggling to find them. 15 |

16 |
I should know this, but I'm looking for a simple CSS stylesheet that would replace the default user agent 17 | and make it look half decent. Google-fu is failing me, all I can find is resets and full frameworks. :\\ 18 |
— Twitter: 19 | 20 |

Once I found examples of 'class-less CSS', it was a bit of a pain to find them and compare all the different 21 | examples. Hence this page.

22 | 23 |

This page is designed to collate all the CSS frameworks into one place and let you compare and contrast them.

24 | 25 |

Here is the list of class-less CSS frameworks that you can checkout:

26 | 27 | 31 | 32 |

If you have a framework you would like include, create PR against frameworks.ts

34 | 35 |

Check out my other site.

36 |
37 | 38 |

This page is rendered using ${frameworks[currentFramework].name}.

39 |

Some of the entries are taken from the layout from stylize. 41 |

42 | 43 | 44 |

Typography:

45 |

This is a H1 heading

46 |

This is a H2 heading

47 |

This is a H3 heading

48 |

This is a H4 heading

49 |
This is a H5 heading
50 |
This is a H6 heading
51 |

This is a paragraph of text. It's my paragraph. I like it a lot.

52 |
53 | This is a Strong / Bold text 54 |
55 | This is an Emphasized / Italic text 56 |
57 | This is a Marked / Highlighted text 58 |
59 | This is a Small text 60 |
61 | This is a Deleted text 62 |
63 | This is a Underlined / Inserted text 64 |
65 | This is a Subscript text 66 |
67 | This is a Superscript text 68 |
69 | 
This is a preformatted text.
70 |
This is a Blockquote.
71 | This is a sample output. 72 |
73 | This is the <code> & kbd 74 |
75 |

Links & navigation:

76 | 83 |
84 |
85 | Normal link 86 |
87 |

Lists:

88 |
    89 |
  • Unordered list item 1
    • 90 |
  • Unordered list item 2
    • 91 |
      92 |
    • Unordered list item 3
      • 93 |
    94 |
  • Unordered list item 4
    • 95 |
  • Unordered list item 5
    • 96 |
97 |
    98 |
  1. Ordered list item 1
    2. 99 |
  2. Ordered list item 2
    3. 100 |
      101 |
    1. Ordered list item 3
      2. 102 |
    103 |
  3. Ordered list item 4
    4. 104 |
  4. Ordered list item 5
    5. 105 |
106 |
107 |

Form:

108 |
109 | This is a legend on fieldset 110 |
111 |
112 | 113 | 114 |
115 | 116 | 123 |
124 | 125 | 126 |
127 | 128 | 129 | 130 |
131 | 132 | 133 | 134 |
135 | 136 |
137 | 138 |
139 |
140 |
141 | 142 | Anchor role=button 143 | 144 | 145 |
146 | 147 | 148 |
149 |

Table:

150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 |
#NameUsernameLocation
1Vasanth@vsnthvChennai, India
2John@johnUSA
3Chan@chanHong Kong
180 |

Table with border=1

181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 |
#NameUsernameLocation
1Vasanth@vsnthvChennai, India
2John@johnUSA
3Chan@chanHong Kong
211 | 212 | 213 | 214 | --------------------------------------------------------------------------------