├── .gitignore ├── favicon.ico ├── _assets ├── day.png ├── og.png ├── night.png └── terminal.png ├── README.md ├── theme ├── night.css ├── boilerplate.css ├── terminal.css ├── night.html └── terminal.html ├── now.json ├── 404.html ├── themes.html ├── usage ├── index.html └── elements.html ├── index.html ├── lite.css ├── new.min.css ├── demo.html ├── new.css ├── legacy └── index.html └── all.html /.gitignore: -------------------------------------------------------------------------------- 1 | .vercel -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xz/new.css-site/HEAD/favicon.ico -------------------------------------------------------------------------------- /_assets/day.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xz/new.css-site/HEAD/_assets/day.png -------------------------------------------------------------------------------- /_assets/og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xz/new.css-site/HEAD/_assets/og.png -------------------------------------------------------------------------------- /_assets/night.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xz/new.css-site/HEAD/_assets/night.png -------------------------------------------------------------------------------- /_assets/terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xz/new.css-site/HEAD/_assets/terminal.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # new.css Site 2 | 3 | The website for the repo [xz/new.css](https://github.com/xz/new.css). 4 | -------------------------------------------------------------------------------- /theme/night.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --nc-tx-1: #ffffff; 3 | --nc-tx-2: #eeeeee; 4 | --nc-bg-1: #000000; 5 | --nc-bg-2: #111111; 6 | --nc-bg-3: #222222; 7 | --nc-lk-1: #3291FF; 8 | --nc-lk-2: #0070F3; 9 | --nc-lk-tx: #FFFFFF; 10 | --nc-ac-1: #7928CA; 11 | --nc-ac-tx: #FFFFFF; 12 | } -------------------------------------------------------------------------------- /theme/boilerplate.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --nc-font-sans: sans-serif; 3 | --nc-font-mono: monospace; 4 | --nc-tx-1: #000000; 5 | --nc-tx-2: #1A1A1A; 6 | --nc-bg-1: #FFFFFF; 7 | --nc-bg-2: #F6F8FA; 8 | --nc-bg-3: #E5E7EB; 9 | --nc-lk-1: #0070F3; 10 | --nc-lk-2: #0366D6; 11 | --nc-lk-tx: #FFFFFF; 12 | --nc-ac-1: #79FFE1; 13 | --nc-ac-tx: #000000; 14 | } -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "cleanUrls": true, 4 | "trailingSlash": true, 5 | "redirects": [ 6 | { "source": "/old.css", "destination": "https://newcss.net/new.min.css" }, 7 | { "source": "/user", "destination": "/api/user", "permanent": false }, 8 | { "source": "/view-source", "destination": "https://github.com/zeit/now" } 9 | ] 10 | } -------------------------------------------------------------------------------- /theme/terminal.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.xz.style/serve/fira-code.css"); 2 | 3 | :root { 4 | --nc-font-sans: 'Fira Code', monospace; 5 | --nc-font-mono: 'Fira Code', monospace; 6 | --nc-tx-1: #FFFFFF; 7 | --nc-tx-2: #EEEEEE; 8 | --nc-bg-1: #000000; 9 | --nc-bg-2: #002700; 10 | --nc-bg-3: #005800; 11 | --nc-lk-1: #00FF00; 12 | --nc-lk-2: #00c200; 13 | --nc-lk-tx: #000000; 14 | --nc-ac-1: #00FF00; 15 | --nc-ac-tx: #000000; 16 | } -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 404 - new.css 7 | 8 | 9 | 10 | 11 |

404

12 |

The page you're looking for could not be found. Maybe try returning to the homepage.

13 |

Sure you're in the right place? Please open an issue on GitHub here.

14 | -------------------------------------------------------------------------------- /themes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | new.css 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

new.css

20 | 28 |
29 | 30 |

Themes

31 | 32 |

Themes can change any of the colors or fonts used by new.css.

33 | 34 |

For information on making your own theme, visit the GitHub page. A full theme customization guide is in the works and coming soon.

35 | 36 |
37 | 38 |

Pre-made Themes

39 | 40 |

Here are two extra themes with CDN links. Feel free to use or edit them!

41 | 42 |

Night

43 | 44 |

Night theme is enabled by default if your browser is set to prefer dark themes. Using the theme link below makes it use night theme regardless.

45 | 46 | <link rel="stylesheet" href="https://newcss.net/theme/night.css"> 47 | 48 |

Preview at newcss.net/theme/night/

49 | 50 |

Night theme

51 | 52 |

Terminal

53 | 54 | <link rel="stylesheet" href="https://newcss.net/theme/terminal.css"> 55 | 56 |

Preview at newcss.net/theme/terminal/

57 | 58 |

Terminal theme

59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /usage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Usage - new.css 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

new.css

20 | 28 |
29 | 30 |

Usage

31 | 32 |

Here's how to start using new.css in under 5 minutes.

33 | 34 |
35 | 36 |

1. Create an HTML document

37 | 38 |

In your favorite text/code editor, create a new HTML document. It can be as simple as this-

39 | 40 | 
41 | <!DOCTYPE html>
42 | <html lang="en">
43 | <head>
44 |     <meta charset="UTF-8">
45 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
46 |     <title>Document</title>
47 | </head>
48 | <body>
49 |     <h1>Hello, world</h1>
50 | </body>
51 | </html>
52 | 53 |
54 | 55 |

2. Add the new.css stylesheet

56 | 57 |

Just before the end of your <head>, add this code.

58 | 59 | 
60 | <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
61 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
62 |
63 | 64 |
65 | 66 |

3. Add content

67 | 68 |

Here's the fun part. Write your semantic HTML and watch it turn into a modern and responsive site!

69 | 70 |

3.1 - Tip

71 | 72 |

Use the <header> element at the top of your <body> to create a header. Here's what it should look like-

73 | 74 | default new.css theme showing the header element 75 | 76 |
77 |
78 |
79 | 80 |

Have any questions or run into an issue? I'm here to help. Feel free to open an issue on GitHub here, or join the community Discord here.

81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /usage/elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Elements - new.css 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

new.css

20 | 28 |
29 | 30 |

Elements

31 | 32 |

new.css takes advantage of semantic HTML elements. Here are some guidelines on how these should be used for the best results.

33 | 34 |
35 | 36 |

Table of Contents

37 | 40 | 41 |
42 | 43 |

Body

44 | 45 |

Use the <header> tag to create a large header for your page. Only use this at the very top of your <body>!

46 | 47 |
48 | 49 |

Buttons

50 | 51 |

For a link button, wrap the button in an <a> tag. For example-

52 | 53 | 
 54 | <a href="https://example.com">
 55 |   <button>Click me!</button>
 56 | </a>
57 | 58 |
59 | 60 |

Code

61 | 62 |

Use <code> for short inline code.

63 | 64 |

Use <pre> for code blocks.

65 | 66 |
These two shouldn't be nested, but if they are, the child element will clear it's own style and match the parent.
67 | 68 |

Use <kbd> for keyboard input. For example, ALT + F4

69 | 70 |
71 | 72 |

Details

73 | 74 |

The <details> element can make a toggle-able dropdown without any JavaScript. Here's an example-

75 | 76 |
77 | Click me! 78 |

Lorem ipsum dolor sit amet.

79 |
80 | 81 |

Here's the code-

82 | 83 | 
 84 | <details>
 85 |   <summary>Click me!</summary>
 86 |   <p>Lorem ipsum dolor sit amet.</p>
 87 | </details>    
 88 |
89 | 90 |
91 | 92 |

Text

93 | 94 |

Wrap all body text in <p> tags, unless it's the sole child of another element. Here are examples-

95 | 96 | 
 97 | <blockquote>
 98 |   Hello, world!
 99 | </blockquote>
100 |
101 | 102 | 
103 | <blockquote>
104 |   <p>Hello, world!</p>
105 |   <button>Click me!</button>
106 | </blockquote>
107 |
108 | 109 | 
110 | <ul>
111 |   <li>Hello, world!</li>
112 |   <li>
113 |     <p>Line 1</p>
114 |     <img src="https://example.com/image.png">
115 |   </li>
116 | </ul>
117 |
118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | new.css 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

new.css

20 | 28 |
29 | 30 |

Write modern websites using only HTML.

31 | 32 |
33 | 34 |
This site is made from vanilla HTML and the default new.css theme. View Source
35 | 36 |

new.css is a classless CSS framework to write modern websites using only HTML. It's ~4.5kb.

37 | 38 |

It's perfect for-

39 | 40 | 46 | 47 |

The web was made for semantic HTML—let's start using it.

48 | 49 |
50 | 51 |

Get Started

52 | 53 |

View the demo at /demo.

54 | 55 |

Set up new.css in under 5 minutes at /usage.

56 | 57 |

Learn about special semantic elements on /usage/elements.

58 | 59 |

Learn about custom themes on /themes.

60 | 61 |

new.css is fully open source at xz/new.css on GitHub.

62 | 63 |
64 | 65 |

Sponsors

66 | 67 | 71 | 72 |
73 | 74 |

Special Thanks

75 | 76 | 81 | 82 |
83 |
84 |
85 | 86 |

We collect totally anonymous basic analytics using Simple Analytics. View live analytics at simpleanalytics.com/newcss.net.

87 | 88 |
89 |
90 |
91 | 92 |

Powered by Vercel

93 | 94 | 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /lite.css: -------------------------------------------------------------------------------- 1 | :root{--nc-font-sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#000;--nc-tx-2:#1A1A1A;--nc-bg-1:#FFF;--nc-bg-2:#F6F8FA;--nc-bg-3:#E5E7EB;--nc-lk-1:#0070F3;--nc-lk-2:#0366D6;--nc-lk-tx:#FFF;--nc-ac-1:#79FFE1;--nc-ac-tx:#0C4047}@media (prefers-color-scheme: dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291FF;--nc-lk-2:#0070F3;--nc-lk-tx:#FFF;--nc-ac-1:#7928CA;--nc-ac-tx:#FFF}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,input,iframe,img,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}html,input,select,button{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}::selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}p{margin-bottom:1rem}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote :last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header > :first-child{margin-top:0;padding-top:0}header > :last-child{margin-bottom:0}a button,button,input[type="submit"],input[type="reset"],input[type="button"]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer;color:var(--nc-lk-tx)}a button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled]{cursor:default;opacity:.5;cursor:not-allowed}a button:focus,a button:hover,button:focus,button:hover,input[type="submit"]:focus,input[type="submit"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="button"]:focus,input[type="button"]:hover{background:var(--nc-lk-2)}code,pre,kbd,samp{font-family:var(--nc-font-mono)}code,samp,kbd,pre{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd::before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}textarea,select,input{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-2);border-radius:4px;box-shadow:none;box-sizing:border-box}textarea:focus,select:focus,input[type]:focus{border:1px solid var(--nc-bg-3);outline:0}img{max-width:100%} 2 | -------------------------------------------------------------------------------- /new.min.css: -------------------------------------------------------------------------------- 1 | @import "https://fonts.xz.style/serve/inter.css";:root{--nc-font-sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#000;--nc-tx-2:#1A1A1A;--nc-bg-1:#FFF;--nc-bg-2:#F6F8FA;--nc-bg-3:#E5E7EB;--nc-lk-1:#0070F3;--nc-lk-2:#0366D6;--nc-lk-tx:#FFF;--nc-ac-1:#79FFE1;--nc-ac-tx:#0C4047}@media (prefers-color-scheme: dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291FF;--nc-lk-2:#0070F3;--nc-lk-tx:#FFF;--nc-ac-1:#7928CA;--nc-ac-tx:#FFF}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,input,iframe,img,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}html,input,select,button{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}::selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}p{margin-bottom:1rem}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote :last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header > :first-child{margin-top:0;padding-top:0}header > :last-child{margin-bottom:0}a button,button,input[type="submit"],input[type="reset"],input[type="button"]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer;color:var(--nc-lk-tx)}a button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled]{cursor:default;opacity:.5;cursor:not-allowed}a button:focus,a button:hover,button:focus,button:hover,input[type="submit"]:focus,input[type="submit"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="button"]:focus,input[type="button"]:hover{background:var(--nc-lk-2)}code,pre,kbd,samp{font-family:var(--nc-font-mono)}code,samp,kbd,pre{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd::before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}textarea,select,input{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-2);border-radius:4px;box-shadow:none;box-sizing:border-box}textarea:focus,select:focus,input[type]:focus{border:1px solid var(--nc-bg-3);outline:0}img{max-width:100%} 2 | -------------------------------------------------------------------------------- /theme/night.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | new.css Night Theme 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

new.css Night Theme

15 |
16 | 17 |

Heading 1

18 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

19 |

Heading 2

20 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

21 |

Heading 3

22 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

23 |

Heading 4

24 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

25 |
Heading 5
26 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

27 |
Heading 6
28 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

29 | 30 |
31 |
32 |
33 | 34 |

35 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut harum 36 | molestias labore amet 37 | possimus exercitationem aperiam earum, doloribus nobis ducimus maiores quia voluptates quis omnis 38 | molestiae quisquam. Voluptatibus, officiis laudantium? 39 |

40 | 41 |

42 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic culpa, nobis doloremque veniam non, 43 | nihil 44 | cupiditate odit repellat est ALT + F4 expedita facilis. Fuga aspernatur, alias debitis eveniet totam 45 | minima vel. 46 |

47 | 48 | 54 | 55 |
    56 |
  1. Step 1
    2. 57 |
  2. Step 2
    3. 58 |
  3. ????
    4. 59 |
  4. PROFIT!!!
    5. 60 |
61 | 62 |
63 |
Web
64 |
The part of the Internet that contains websites and web pages
65 |
HTML
66 |
A markup language for creating web pages
67 |
CSS
68 |
A technology to make HTML look better
69 |
70 | 71 |
72 | If you think privacy is unimportant for you because you have nothing to hide, you might as well say free speech 73 | is unimportant for you because you have nothing useful to say.

– Edward Snowden 74 |
75 | 76 | 
 77 | <!DOCTYPE html>
 78 | <html>
 79 |     <head>
 80 |     <title>Hello World</title>
 81 |     </head>
 82 |     <body>
 83 |     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 84 |     </body>
 85 | </html>
86 | 87 |
88 |
89 |
90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 |
Ho-kago Tea Time
NameInstrument
NameInstrument
Yui HirasawaLead Guitar
Mio AkiyamaBass
Ritsu TainakaDrums
Tsumugi KotobukiKeyboard
Azusa NakanoRhythm Guitar
128 | 129 |
130 |
131 |
132 | 133 |
134 |

This is not a real form and does not submit or save any information.

135 |

136 |
137 | 138 |

139 |

140 |
141 | 142 |

143 |

144 |
145 | 149 |
150 | 154 |
155 | 159 |

160 |

161 |
162 | 163 |

164 |

165 |
166 | 167 |

168 |

169 |
170 | 171 |

172 |

173 |
174 | 181 |

182 |

183 |
184 | 185 |

186 |

187 | 191 |

192 |

193 | 194 | 195 | 196 |

197 |
198 | 199 |
200 |
201 |
202 | 203 | Mt. Fuji 204 | 205 | 206 | 207 | 208 | 209 | -------------------------------------------------------------------------------- /theme/terminal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | new.css Terminal Theme 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

new.css Terminal Theme

15 |
16 | 17 |

Heading 1

18 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

19 |

Heading 2

20 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

21 |

Heading 3

22 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

23 |

Heading 4

24 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

25 |
Heading 5
26 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

27 |
Heading 6
28 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

29 | 30 |
31 |
32 |
33 | 34 |

35 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut harum 36 | molestias labore amet 37 | possimus exercitationem aperiam earum, doloribus nobis ducimus maiores quia voluptates quis omnis 38 | molestiae quisquam. Voluptatibus, officiis laudantium? 39 |

40 | 41 |

42 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic culpa, nobis doloremque veniam non, 43 | nihil 44 | cupiditate odit repellat est ALT + F4 expedita facilis. Fuga aspernatur, alias debitis eveniet totam 45 | minima vel. 46 |

47 | 48 | 54 | 55 |
    56 |
  1. Step 1
    2. 57 |
  2. Step 2
    3. 58 |
  3. ????
    4. 59 |
  4. PROFIT!!!
    5. 60 |
61 | 62 |
63 |
Web
64 |
The part of the Internet that contains websites and web pages
65 |
HTML
66 |
A markup language for creating web pages
67 |
CSS
68 |
A technology to make HTML look better
69 |
70 | 71 |
72 | If you think privacy is unimportant for you because you have nothing to hide, you might as well say free speech 73 | is unimportant for you because you have nothing useful to say.

– Edward Snowden 74 |
75 | 76 | 
 77 | <!DOCTYPE html>
 78 | <html>
 79 |     <head>
 80 |     <title>Hello World</title>
 81 |     </head>
 82 |     <body>
 83 |     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 84 |     </body>
 85 | </html>
86 | 87 |
88 |
89 |
90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 |
Ho-kago Tea Time
NameInstrument
NameInstrument
Yui HirasawaLead Guitar
Mio AkiyamaBass
Ritsu TainakaDrums
Tsumugi KotobukiKeyboard
Azusa NakanoRhythm Guitar
128 | 129 |
130 |
131 |
132 | 133 |
134 |

This is not a real form and does not submit or save any information.

135 |

136 |
137 | 138 |

139 |

140 |
141 | 142 |

143 |

144 |
145 | 149 |
150 | 154 |
155 | 159 |

160 |

161 |
162 | 163 |

164 |

165 |
166 | 167 |

168 |

169 |
170 | 171 |

172 |

173 |
174 | 181 |

182 |

183 |
184 | 185 |

186 |

187 | 191 |

192 |

193 | 194 | 195 | 196 |

197 |
198 | 199 |
200 |
201 |
202 | 203 | Mt. Fuji 204 | 205 | 206 | 207 | 208 | 209 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | new.css Demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

new.css Demo

20 |
21 | 22 |

Heading 1

23 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

24 |

Heading 2

25 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

26 |

Heading 3

27 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

28 |

Heading 4

29 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

30 |
Heading 5
31 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

32 |
Heading 6
33 |

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

34 | 35 |
36 |
37 |
38 | 39 |

40 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut harum 41 | molestias labore amet 42 | possimus exercitationem aperiam earum, doloribus nobis ducimus maiores quia voluptates quis omnis 43 | molestiae quisquam. Voluptatibus, officiis laudantium? 44 |

45 | 46 |

47 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic culpa, nobis doloremque veniam non, 48 | nihil 49 | cupiditate odit repellat est ALT + F4 expedita facilis. Fuga aspernatur, alias debitis eveniet totam 50 | minima vel. 51 |

52 | 53 | 59 | 60 |
    61 |
  1. Step 1
    2. 62 |
  2. Step 2
    3. 63 |
  3. ????
    4. 64 |
  4. PROFIT!!!
    5. 65 |
66 | 67 |
68 |
Web
69 |
The part of the Internet that contains websites and web pages
70 |
HTML
71 |
A markup language for creating web pages
72 |
CSS
73 |
A technology to make HTML look better
74 |
75 | 76 |
77 | If you think privacy is unimportant for you because you have nothing to hide, you might as well say free speech 78 | is unimportant for you because you have nothing useful to say.

– Edward Snowden 79 |
80 | 81 | 
 82 | <!DOCTYPE html>
 83 | <html>
 84 |     <head>
 85 |     <title>Hello World</title>
 86 |     </head>
 87 |     <body>
 88 |     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 89 |     </body>
 90 | </html>
91 | 92 |
93 |
94 |
95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 |
Ho-kago Tea Time
NameInstrument
NameInstrument
Yui HirasawaLead Guitar
Mio AkiyamaBass
Ritsu TainakaDrums
Tsumugi KotobukiKeyboard
Azusa NakanoRhythm Guitar
133 | 134 |
135 |
136 |
137 | 138 |
139 |

This is not a real form and does not submit or save any information.

140 |

141 |
142 | 143 |

144 |

145 |
146 | 147 |

148 |

149 |
150 | 154 |
155 | 159 |
160 | 164 |

165 |

166 |
167 | 168 |

169 |

170 |
171 | 172 |

173 |

174 |
175 | 176 |

177 |

178 |
179 | 186 |

187 |

188 |
189 | 190 |

191 |

192 | 196 |

197 |

198 | 199 | 200 | 201 |

202 |
203 | 204 |
205 |
206 |
207 | 208 | Mt. Fuji 209 | 210 | 211 | 212 | 213 | 214 | -------------------------------------------------------------------------------- /new.css: -------------------------------------------------------------------------------- 1 | /* Import Inter font */ 2 | /* More info at https://github.com/xz/fonts */ 3 | @import url('https://fonts.xz.style/serve/inter.css'); 4 | 5 | :root { 6 | --nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 7 | --nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace; 8 | --nc-tx-1: #000000; 9 | --nc-tx-2: #1A1A1A; 10 | --nc-bg-1: #FFFFFF; 11 | --nc-bg-2: #F6F8FA; 12 | --nc-bg-3: #E5E7EB; 13 | --nc-lk-1: #0070F3; 14 | --nc-lk-2: #0366D6; 15 | --nc-lk-tx: #FFFFFF; 16 | --nc-ac-1: #79FFE1; 17 | --nc-ac-tx: #0C4047; 18 | } 19 | 20 | @media (prefers-color-scheme: dark) { 21 | :root { 22 | --nc-tx-1: #ffffff; 23 | --nc-tx-2: #eeeeee; 24 | --nc-bg-1: #000000; 25 | --nc-bg-2: #111111; 26 | --nc-bg-3: #222222; 27 | --nc-lk-1: #3291FF; 28 | --nc-lk-2: #0070F3; 29 | --nc-lk-tx: #FFFFFF; 30 | --nc-ac-1: #7928CA; 31 | --nc-ac-tx: #FFFFFF; 32 | } 33 | } 34 | 35 | * { 36 | /* Reset margins and padding */ 37 | margin: 0; 38 | padding: 0; 39 | } 40 | 41 | address, 42 | area, 43 | article, 44 | aside, 45 | audio, 46 | blockquote, 47 | datalist, 48 | details, 49 | dl, 50 | fieldset, 51 | figure, 52 | form, 53 | input, 54 | iframe, 55 | img, 56 | meter, 57 | nav, 58 | ol, 59 | optgroup, 60 | option, 61 | output, 62 | p, 63 | pre, 64 | progress, 65 | ruby, 66 | section, 67 | table, 68 | textarea, 69 | ul, 70 | video { 71 | /* Margins for most elements */ 72 | margin-bottom: 1rem; 73 | } 74 | 75 | html,input,select,button { 76 | /* Set body font family and some finicky elements */ 77 | font-family: var(--nc-font-sans); 78 | } 79 | 80 | body { 81 | /* Center body in page */ 82 | margin: 0 auto; 83 | max-width: 750px; 84 | padding: 2rem; 85 | border-radius: 6px; 86 | overflow-x: hidden; 87 | word-break: break-word; 88 | overflow-wrap: break-word; 89 | background: var(--nc-bg-1); 90 | 91 | /* Main body text */ 92 | color: var(--nc-tx-2); 93 | font-size: 1.03rem; 94 | line-height: 1.5; 95 | } 96 | 97 | ::selection { 98 | /* Set background color for selected text */ 99 | background: var(--nc-ac-1); 100 | color: var(--nc-ac-tx); 101 | } 102 | 103 | h1,h2,h3,h4,h5,h6 { 104 | line-height: 1; 105 | color: var(--nc-tx-1); 106 | padding-top: .875rem; 107 | } 108 | 109 | h1, 110 | h2, 111 | h3 { 112 | color: var(--nc-tx-1); 113 | padding-bottom: 2px; 114 | margin-bottom: 8px; 115 | border-bottom: 1px solid var(--nc-bg-2); 116 | } 117 | 118 | h4, 119 | h5, 120 | h6 { 121 | margin-bottom: .3rem; 122 | } 123 | 124 | h1 { 125 | font-size: 2.25rem; 126 | } 127 | 128 | h2 { 129 | font-size: 1.85rem; 130 | } 131 | 132 | h3 { 133 | font-size: 1.55rem; 134 | } 135 | 136 | h4 { 137 | font-size: 1.25rem; 138 | } 139 | 140 | h5 { 141 | font-size: 1rem; 142 | } 143 | 144 | h6 { 145 | font-size: .875rem; 146 | } 147 | 148 | a { 149 | color: var(--nc-lk-1); 150 | } 151 | 152 | a:hover { 153 | color: var(--nc-lk-2); 154 | } 155 | 156 | abbr:hover { 157 | /* Set the '?' cursor while hovering an abbreviation */ 158 | cursor: help; 159 | } 160 | 161 | blockquote { 162 | padding: 1.5rem; 163 | background: var(--nc-bg-2); 164 | border-left: 5px solid var(--nc-bg-3); 165 | } 166 | 167 | abbr { 168 | cursor: help; 169 | } 170 | 171 | blockquote *:last-child { 172 | padding-bottom: 0; 173 | margin-bottom: 0; 174 | } 175 | 176 | header { 177 | background: var(--nc-bg-2); 178 | border-bottom: 1px solid var(--nc-bg-3); 179 | padding: 2rem 1.5rem; 180 | 181 | /* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */ 182 | 183 | margin: -2rem calc(0px - (50vw - 50%)) 2rem; 184 | 185 | /* Shorthand for: 186 | 187 | margin-top: -2rem; 188 | margin-bottom: 2rem; 189 | 190 | margin-left: calc(0px - (50vw - 50%)); 191 | margin-right: calc(0px - (50vw - 50%)); */ 192 | 193 | padding-left: calc(50vw - 50%); 194 | padding-right: calc(50vw - 50%); 195 | } 196 | 197 | header h1, 198 | header h2, 199 | header h3 { 200 | padding-bottom: 0; 201 | border-bottom: 0; 202 | } 203 | 204 | header > *:first-child { 205 | margin-top: 0; 206 | padding-top: 0; 207 | } 208 | 209 | header > *:last-child { 210 | margin-bottom: 0; 211 | } 212 | 213 | a button, 214 | button, 215 | input[type="submit"], 216 | input[type="reset"], 217 | input[type="button"] { 218 | font-size: 1rem; 219 | display: inline-block; 220 | padding: 6px 12px; 221 | text-align: center; 222 | text-decoration: none; 223 | white-space: nowrap; 224 | background: var(--nc-lk-1); 225 | color: var(--nc-lk-tx); 226 | border: 0; 227 | border-radius: 4px; 228 | box-sizing: border-box; 229 | cursor: pointer; 230 | color: var(--nc-lk-tx); 231 | } 232 | 233 | a button[disabled], 234 | button[disabled], 235 | input[type="submit"][disabled], 236 | input[type="reset"][disabled], 237 | input[type="button"][disabled] { 238 | cursor: default; 239 | opacity: .5; 240 | 241 | /* Set the [X] cursor while hovering a disabled link */ 242 | cursor: not-allowed; 243 | } 244 | 245 | .button:focus, 246 | .button:hover, 247 | button:focus, 248 | button:hover, 249 | input[type="submit"]:focus, 250 | input[type="submit"]:hover, 251 | input[type="reset"]:focus, 252 | input[type="reset"]:hover, 253 | input[type="button"]:focus, 254 | input[type="button"]:hover { 255 | background: var(--nc-lk-2); 256 | } 257 | 258 | code, 259 | pre, 260 | kbd, 261 | samp { 262 | /* Set the font family for monospaced elements */ 263 | font-family: var(--nc-font-mono); 264 | } 265 | 266 | code, 267 | samp, 268 | kbd, 269 | pre { 270 | /* The main preformatted style. This is changed slightly across different cases. */ 271 | background: var(--nc-bg-2); 272 | border: 1px solid var(--nc-bg-3); 273 | border-radius: 4px; 274 | padding: 3px 6px; 275 | font-size: 0.9rem; 276 | } 277 | 278 | kbd { 279 | /* Makes the kbd element look like a keyboard key */ 280 | border-bottom: 3px solid var(--nc-bg-3); 281 | } 282 | 283 | pre { 284 | padding: 1rem 1.4rem; 285 | max-width: 100%; 286 | overflow: auto; 287 | } 288 | 289 | pre code { 290 | /* When is in a 
, reset it's formatting to blend in */
291 | 	background: inherit;
292 | 	font-size: inherit;
293 | 	color: inherit;
294 | 	border: 0;
295 | 	padding: 0;
296 | 	margin: 0;
297 | }
298 | 
299 | code pre {
300 | 	/* When 
 is in a , reset it's formatting to blend in */
301 | 	display: inline;
302 | 	background: inherit;
303 | 	font-size: inherit;
304 | 	color: inherit;
305 | 	border: 0;
306 | 	padding: 0;
307 | 	margin: 0;
308 | }
309 | 
310 | details {
311 | 	/* Make the 
 look more "clickable" */
312 | 	padding: .6rem 1rem;
313 | 	background: var(--nc-bg-2);
314 | 	border: 1px solid var(--nc-bg-3);
315 | 	border-radius: 4px;
316 | }
317 | 
318 | summary {
319 | 	/* Makes the  look more like a "clickable" link with the pointer cursor */
320 | 	cursor: pointer;
321 | 	font-weight: bold;
322 | }
323 | 
324 | details[open] {
325 | 	/* Adjust the 
 padding while open */
326 | 	padding-bottom: .75rem;
327 | }
328 | 
329 | details[open] summary {
330 | 	/* Adjust the 
 padding while open */
331 | 	margin-bottom: 6px;
332 | }
333 | 
334 | details[open]>*:last-child {
335 | 	/* Resets the bottom margin of the last element in the 
 while 
 is opened. This prevents double margins/paddings. */
336 | 	margin-bottom: 0;
337 | }
338 | 
339 | dt {
340 | 	font-weight: bold;
341 | }
342 | 
343 | dd::before {
344 | 	/* Add an arrow to data table definitions */
345 | 	content: '→ ';
346 | }
347 | 
348 | hr {
349 | 	/* Reset the border of the 
 separator, then set a better line */
350 | 	border: 0;
351 | 	border-bottom: 1px solid var(--nc-bg-3);
352 | 	margin: 1rem auto;
353 | }
354 | 
355 | fieldset {
356 | 	margin-top: 1rem;
357 | 	padding: 2rem;
358 | 	border: 1px solid var(--nc-bg-3);
359 | 	border-radius: 4px;
360 | }
361 | 
362 | legend {
363 | 	padding: auto .5rem;
364 | }
365 | 
366 | table {
367 | 	/* border-collapse sets the table's elements to share borders, rather than floating as separate "boxes". */
368 | 	border-collapse: collapse;
369 | 	width: 100%
370 | }
371 | 
372 | td,
373 | th {
374 | 	border: 1px solid var(--nc-bg-3);
375 | 	text-align: left;
376 | 	padding: .5rem;
377 | }
378 | 
379 | th {
380 | 	background: var(--nc-bg-2);
381 | }
382 | 
383 | tr:nth-child(even) {
384 | 	/* Set every other cell slightly darker. Improves readability. */
385 | 	background: var(--nc-bg-2);
386 | }
387 | 
388 | table caption {
389 | 	font-weight: bold;
390 | 	margin-bottom: .5rem;
391 | }
392 | 
393 | textarea {
394 | 	/* Don't let the 
557 |     
558 | 
559 |     

560 |       time
561 |       Unix time began .
562 |     

563 | 
564 |     

565 |       u
566 |       Lorem ipsum dolor sit amet.
567 |     

568 | 
569 |     

570 |       ul
571 |       
My shopping list:

572 |       
    
573 |         
  • Milk
    • 
574 |         
  • Bread
    • 
575 |         
  • Chocolate
    • 
576 |         
  • Flour
    • 
577 |       

578 |     

579 | 
580 |     

581 |       var
582 |       x + 26 = 68
x = 42
583 |     

584 | 
585 |     

586 |       video
587 |       
588 |     

589 |   
590 | 
591 | 


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