-43

.github/workflows/pages.yml

··· 1 1 - # Simple workflow for deploying static content to GitHub Pages 2 2 - name: Deploy to pages 3 3 - 4 4 - on: 5 5 - # Runs on pushes targeting the default branch 6 6 - push: 7 7 - branches: ["main"] 8 8 - 9 9 - # Allows you to run this workflow manually from the Actions tab 10 10 - workflow_dispatch: 11 11 - 12 12 - # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 13 - permissions: 14 14 - contents: read 15 15 - pages: write 16 16 - id-token: write 17 17 - 18 18 - # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 19 - # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 20 - concurrency: 21 21 - group: "pages" 22 22 - cancel-in-progress: false 23 23 - 24 24 - jobs: 25 25 - # Single deploy job since we're just deploying 26 26 - deploy: 27 27 - environment: 28 28 - name: github-pages 29 29 - url: ${{ steps.deployment.outputs.page_url }} 30 30 - runs-on: ubuntu-latest 31 31 - steps: 32 32 - - name: Checkout 33 33 - uses: actions/checkout@v4 34 34 - - name: Setup Pages 35 35 - uses: actions/configure-pages@v5 36 36 - - name: Upload artifact 37 37 - uses: actions/upload-pages-artifact@v3 38 38 - with: 39 39 - # Upload entire repository 40 40 - path: '.' 41 41 - - name: Deploy to GitHub Pages 42 42 - id: deployment 43 43 - uses: actions/deploy-pages@v4

+1

.gitignore

··· 1 1 + node_modules

-1

.npmignore

··· 1 1 - .github

.tangled/static/header-breadcrumb.png

This is a binary file and will not be displayed.

.tangled/static/header-traditional.png

This is a binary file and will not be displayed.

.tangled/static/preview-desktop-dark.png

This is a binary file and will not be displayed.

.tangled/static/preview-desktop-light.png

This is a binary file and will not be displayed.

.tangled/static/preview-mobile-dark.png

This is a binary file and will not be displayed.

.tangled/static/preview-mobile-light.png

This is a binary file and will not be displayed.

+32

.tangled/workflows/wisp-deploy.yaml

··· 1 1 + when: 2 2 + - event: ["push"] 3 3 + branch: ["main"] 4 4 + - event: ["manual"] 5 5 + 6 6 + engine: "nixery" 7 7 + 8 8 + clone: 9 9 + skip: false 10 10 + depth: 1 11 11 + submodules: false 12 12 + 13 13 + dependencies: 14 14 + nixpkgs: 15 15 + - coreutils 16 16 + - curl 17 17 + 18 18 + environment: 19 19 + SITE_PATH: "." 20 20 + SITE_NAME: "devcss.devins.page" 21 21 + WISP_HANDLE: "devins.page" 22 22 + 23 23 + steps: 24 24 + - name: deploy to wisp 25 25 + command: | 26 26 + curl https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-linux -o wisp-cli 27 27 + chmod +x wisp-cli 28 28 + ./wisp-cli deploy \ 29 29 + "$WISP_HANDLE" \ 30 30 + --path "$SITE_PATH" \ 31 31 + --site "$SITE_NAME" \ 32 32 + --password "$WISP_APP_PASSWORD"

+212 -29

README.md

··· 1 1 - # intergrav/dev.css 1 1 + # dev.css 2 2 + 3 3 + [](https://www.npmjs.com/package/@intergrav/dev.css) [](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [](https://discord.gg/m5tUgaM3uK) [](https://tangled.org/devins.page/dev.css) 4 4 + 5 5 + dev.css is a tiny, simple, classless CSS framework inspired by [new.css](https://newcss.net). It is designed to make any plain HTML file modern and responsive. The minified stylesheet weighs only **~5.5kb**. It also has some extra features, such as an optional sidebar and addons. 6 6 + 7 7 + You can find the website at <a href="https://devcss.devins.page">devcss.devins.page</a>, which contains a demo page. 8 8 + 9 9 + <details> 10 10 + <summary>Click to view preview</summary> 11 11 + <img src=".tangled/static/preview-desktop-light.png" alt="dev.css desktop demo, light mode"> 12 12 + <img src=".tangled/static/preview-desktop-dark.png" alt="dev.css desktop demo, dark mode"> 13 13 + <img height="748px" src=".tangled/static/preview-mobile-light.png" alt="dev.css mobile demo, light mode"> 14 14 + <img height="748px" src=".tangled/static/preview-mobile-dark.png" alt="dev.css mobile demo, dark mode"> 15 15 + </details> 16 16 + 17 17 + ## Who is this for? 18 18 + 19 19 + dev.css is a great choice for: 20 20 + 21 21 + - A simple blog 22 22 + - A simple "about me" website 23 23 + - Collecting your most used links 24 24 + - Prototyping your raw HTML 2 25 3 3 - [](https://www.npmjs.com/package/@intergrav/dev.css) [](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [](https://github.com/intergrav/dev.css) 26 26 + dev.css was not meant for very complex websites. Although, if you need something more complex, you could build from/modify this stylesheet for your website. An example of a site that uses dev.css is [SkywardMC's wiki](https://skywardmc.org). 27 27 + 28 28 + If you're using dev.css on your site, feel free to use this "powered by dev.css" badge if you want to promote the project: 4 29 5 5 - Extremely simple, small, classless CSS framework in the style of Vercel's Geist. Inspired by [xz/new.css](https://github.com/xz/new.css). 30 30 + ```html 31 31 + <a href="https://devcss.devins.page" 32 32 + ><img 33 33 + src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg" 34 34 + alt="powered by dev.css" 35 35 + /></a> 36 36 + ``` 6 37 7 7 - The minified stylesheet weighs only **~5kb** and can make any plain HTML file look clean and modern. 38 38 + <a href="https://devcss.devins.page"><img src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg" alt="powered by dev.css" /></a> 8 39 9 9 - It has a light and dark theme, and the header turns into a sidebar on wider displays so that you get more vertical space. 40 40 + ## Installing 10 41 11 11 - ## Importing 42 42 + ### HTML import 12 43 13 13 - In your HTML's `<head>` all you have to write is this, and you're done! (`.min` means to minify the file) 44 44 + To use dev.css in your HTML, simply add the following line to the `<head>` section of your HTML file: 14 45 15 46 ```html 16 16 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@2"> 47 47 + <link 48 48 + rel="stylesheet" 49 49 + href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4" 50 50 + /> 17 51 ``` 18 52 19 19 - I also recommend adding a font through [intergrav/fonts](https://github.com/intergrav/fonts). Geist or Inter work with dev.css out of the box. It will use the default system/browser san-serif fonts otherwise. 53 53 + ### `npm`, `pnpm`, etc 54 54 + 55 55 + Another way to install dev.css is to add the npm package to your project through your preferred package manager. This command adds the latest version to your project. 56 56 + 57 57 + ```sh 58 58 + npm add @intergrav/dev.css 59 59 + # or 60 60 + pnpm add @intergrav/dev.css 61 61 + ``` 62 62 + 63 63 + ### Importing fonts 64 64 + 65 65 + You can also load a font from [intergrav/fonts](https://tangled.org/devins.page/fonts) (or anywhere else) if you'd like a consistent font. Geist and Inter fonts work with dev.css out of the box, other fonts will require a theme to be used. If these fonts are not available, the default system/browser sans-serif and monospace fonts will be used, such as Microsoft's Segoe UI or Apple's San Francisco. 66 66 + 67 67 + ## Elements and Structure 68 68 + 69 69 + dev.css takes advantage of semantic HTML elements. Here are some guidelines on how to use them for the best results. 70 70 + 71 71 + ### Header 20 72 21 21 - ### Geist Font 73 73 + It's recommended that you add a header to your page. To add one, place a `<header>` tag at the top of your `<body>`. You can use an `<h1>` tag as your website's title. You can also add a `<p>` element as an optional short description of the site. 74 74 + 75 75 + If you want to add a traditional navigation element, you should lay out your `<nav>` element like this: 22 76 23 77 ```html 24 24 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"> 78 78 + <header> 79 79 + <h1>Website Title</h1> 80 80 + <p>An optional description of the website.</p> 81 81 + <nav> 82 82 + <ul> 83 83 + <li><a href="https://example.com">Demo</a></li> 84 84 + <li><a href="https://example.com">GitHub</a></li> 85 85 + <li><a href="https://example.com">npm</a></li> 86 86 + <li><a href="https://example.com">jsDelivr</a></li> 87 87 + </ul> 88 88 + </nav> 89 89 + </header> 25 90 ``` 91 91 + 92 92 +  93 93 + 94 94 + If you'd like, you could instead use [breadcrumb navigation](https://en.wikipedia.org/wiki/Breadcrumb_navigation). If you're using the header-oneline addon while doing this, it's recommended to remove all other elements in the header and move `<h1>` to `<main>`. 95 95 + 26 96 ```html 27 27 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css"> 97 97 + <header> 98 98 + <nav> 99 99 + <a href="../..">dev.css</a> / <a href="..">Blog</a> / Making a Website 100 100 + </nav> 101 101 + <h1>Making a Website</h1> 102 102 + <p>Making a basic website with dev.css.</p> 103 103 + </header> 28 104 ``` 29 105 30 30 - ### Inter Font 106 106 +  107 107 + 108 108 + ### Main 109 109 + 110 110 + For your main content, or the actual content of the page, it is heavily recommended that you wrap all of it in a `<main>` tag. Otherwise, certain features from dev.css may not work properly. It may also benefit search engine optimization. Here's an example: 31 111 32 112 ```html 33 33 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css"> 113 113 + <main> 114 114 + <h1>Page 1</h1> 115 115 + <p>Welcome to my website's first page! This is an example.</p> 116 116 + </main> 34 117 ``` 35 118 36 36 - ## Elements 119 119 + ### Sidebar 120 120 + 121 121 + Optionally, you can add a sidebar to your page for pretty much anything you'd like. A good usage for this could be, for example, complex navigation on a docs website, where you wouldn't be able to fit it all into the header. The sidebar will sort normally with the rest of the content on smaller screens. To make a sidebar, place an `<aside>` tag, and then it's also recommended to put an `<article>` inside if you want a background. You must put it above the `<main>` content. You can have up to two sidebars per page - the second one will appear on the right side. You can also make a sidebar collapsible by wrapping it's contents in a `<details>` tag - adding the `open` attribute will make it open by default. Here's an example: 37 122 38 38 - dev.css takes advantage of semantic HTML elements. Here are some guidelines on how these should be used for the best results. 123 123 + ```html 124 124 + <aside> 125 125 + <article> 126 126 + <details open> 127 127 + <summary>Sidebar</summary> 128 128 + <nav> 129 129 + <ul> 130 130 + <li><a href="https://example.com">Page 1</a></li> 131 131 + <li> 132 132 + <a href="https://example.com">Page 2</a> 133 133 + <ul> 134 134 + <li><a href="https://example.com">Page 2.1</a></li> 135 135 + <li><a href="https://example.com">Page 2.2</a></li> 136 136 + </ul> 137 137 + </li> 138 138 + <li><a href="https://example.com">Page 3</a></li> 139 139 + <li><a href="https://example.com">Page 4</a></li> 140 140 + </ul> 141 141 + </nav> 142 142 + </details> 143 143 + </article> 144 144 + </aside> 145 145 + ``` 39 146 40 40 - ### Header 147 147 + ### Footer 41 148 42 42 - Use the `<header>` tag to create a large header for your page. Only use this at the very top of your `<body>`, or else it may look wonky. 149 149 + Optionally, you can add a footer to your page. This could include copyright information, what the website was built with, it's source link, anything really. To make a footer, place a `<footer>` tag at the bottom of your `<body>`. It also formats the nav element in the same way that the header does. 43 150 44 44 - For the title, the header should contain an `<h1>` tag. You can also add an `<h4>` tag before the `<h1>` tag if you want to show extra information. 151 151 + ### Final Structure 45 152 46 46 - If you need a navigation bar, you can add a `<nav>` with `<a>` links inside it. dev.css will automatically add dividing bullet points between or before the `<a>` tags, depending on whether the user is in topbar or sidebar mode. In sidebar mode, the navigation bar will lay out into separate lines. 153 153 + In the end, this is what your page structure should look like if you decide to add everything: 47 154 48 48 - Optionally, you could add a `<p>` tag after the `<h1>` tag if you want to give a description of the page the user is currently on. 155 155 + ```html 156 156 + <html> 157 157 + <head> 158 158 + ... 159 159 + </head> 160 160 + <body> 161 161 + <header>...</header> 162 162 + <aside>...</aside> 163 163 + <main>...</main> 164 164 + <footer>...</footer> 165 165 + </body> 166 166 + </html> 167 167 + ``` 49 168 50 169 ### Text 51 170 52 52 - Wrap all body text in `<p>` tags, unless it's the sole child of another element. If you want to write quotes, you can use the `<blockquote>` tag. To highlight text, wrap it in the `<mark>` tag. Want to show code? Use `<code>` for short inline code. Use `<pre>` for code blocks. Use `<kbd>` for keyboard input. 171 171 + Wrap all body text in `<p>` tags, unless it's the sole child of another element. Use the `<blockquote>` tag for quotes. To highlight text, wrap it in the `<mark>` tag. For code, use `<code>` for short inline code snippets and wrap that with `<pre>` for code blocks. Use `<kbd>` for keyboard input. 53 172 54 173 ### Button 55 174 56 56 - For a link button, you can wrap the button in an `<a>` tag. Here's a code example: 175 175 + To create a link button, wrap the button in an `<a>` tag. Here's an example: 57 176 58 177 ```html 59 178 <a href="https://example.com"> 60 60 - <button>Click me!</button> 179 179 + <button>Click me!</button> 61 180 </a> 62 181 ``` 63 182 64 183 ### Details 65 184 66 66 - The `<details>` element can make a toggle-able dropdown without using any JavaScript. Here's a code example: 185 185 + The `<details>` element can be used to create a toggle-able dropdown without using any JavaScript. Here's an example: 67 186 68 187 ```html 69 188 <details> 70 70 - <summary>Click me!</summary> 71 71 - <p>Lorem ipsum dolor sit amet.</p> 189 189 + <summary>Click me!</summary> 190 190 + <p>Lorem ipsum dolor sit amet.</p> 72 191 </details> 73 192 ``` 74 193 ··· 76 195 77 196 To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/). 78 197 198 198 + ## Addons 199 199 + 200 200 + dev.css provides a basic set of styles. Addons are small CSS or JS snippets that can be used to adjust or add functionality to dev.css based on your needs. Here are the built-in addons. 201 201 + 202 202 + ### `header-oneline.css` 203 203 + 204 204 + This addon makes the header much more compact on narrow viewports. To use, add the following line after the `dev.css` import: 205 205 + 206 206 + ```html 207 207 + <link 208 208 + rel="stylesheet" 209 209 + href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-oneline.min.css" 210 210 + /> 211 211 + ``` 212 212 + 213 213 + ### `header-sticky.css` 214 214 + 215 215 + This addon makes the header sticky, always staying at the top of the screen. Note that this addon is recommended for small headers, as it may affect the usability of your site if the header is large and takes up a lot of space. If using with `header-oneline.css`, place this after. To use, add the following line after the `dev.css` import: 216 216 + 217 217 + ```html 218 218 + <link 219 219 + rel="stylesheet" 220 220 + href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-sticky.min.css" 221 221 + /> 222 222 + ``` 223 223 + 224 224 + ### `scroll-to-top.js` 225 225 + 226 226 + This addon creates a small "scroll to top" button in the bottom right corner of your website when the user scrolls down. The button uses the default dev.css button style. The button is slightly opaque so that you can see it but it doesn't block the view. To use this addon, add the following line after the `dev.css` import: 227 227 + 228 228 + ```html 229 229 + <script 230 230 + src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/scroll-to-top.min.js" 231 231 + defer 232 232 + ></script> 233 233 + ``` 234 234 + 235 235 + ### `responsive-sidebar.js` 236 236 + 237 237 + This addon automatically opens and closes `<details>` elements inside sidebars at the 82rem breakpoint. This prevents sidebars from looking awkward on wide screens and improves usability on small screens. To use this addon, add the following line after the `dev.css` import: 238 238 + 239 239 + ```html 240 240 + <script 241 241 + src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/responsive-sidebar.min.js" 242 242 + defer 243 243 + ></script> 244 244 + ``` 245 245 + 79 246 ## Themes 80 247 81 81 - You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. You can also copy the `boilerplate.css` and make a theme yourself. Simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, put this after your main stylesheet: 248 248 + dev.css supports custom colors and fonts through themes. You can find some pre-made themes in the `/theme` folder. To use a theme, simply apply it after the dev.css stylesheet. There are night and day themes, a set of Catppuccin themes, and a terminal theme. For example, to apply the terminal theme, add the following line after the `dev.css` import: 249 249 + 82 250 ```html 83 83 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@2/theme/terminal.min.css"> 251 251 + <link 252 252 + rel="stylesheet" 253 253 + href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/theme/terminal.user.min.css" 254 254 + /> 84 255 ``` 256 256 + 257 257 + If you are creating your own theme, see the `boilerplate.user.css` file. 258 258 + 259 259 + ### Userstyles 260 260 + 261 261 + The built-in themes can also be installed to your userstyle manager, such as Stylus. That theme will override any website using dev.css. To install one, open the theme's file in your browser. 262 262 + 263 263 + ## Credits 264 264 + 265 265 + - [xz/new.css](https://github.com/xz/new.css) being a major inspiration for this project 266 266 + - Vercel's [Geist](https://vercel.com/geist/introduction) design system 267 267 + - [Catppuccin](https://github.com/catppuccin) for the colors used in the Catppuccin themes

+21

addon/header-oneline.css

··· 1 1 + /* header-oneline for dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */ 2 2 + /* about: makes the header much more compact by sorting horizontally, good with header-sticky addon */ 3 3 + /* note: will hide most elements in header other than img, h1-6, nav, and button */ 4 4 + 5 5 + header * { 6 6 + font-size: 1rem; 7 7 + line-height: 1; 8 8 + margin: 0; 9 9 + padding: 0; 10 10 + margin-bottom: 0 !important; 11 11 + } 12 12 + 13 13 + header { 14 14 + display: flex; 15 15 + gap: 1rem; 16 16 + padding: 0.75rem calc(50vw - 50%); 17 17 + } 18 18 + 19 19 + header > *:not(img, h1, h2, h3, h4, h5, h6, nav, button) { 20 20 + display: none; 21 21 + }

+18

addon/header-sticky.css

··· 1 1 + /* header-sticky for dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */ 2 2 + /* about: makes the header sticky (when vh>24rem/vw>16rem). useful if the user needs to access nav often */ 3 3 + /* note: large sticky headers are bad for usability. too large? try header-oneline addon */ 4 4 + 5 5 + @media only screen and (min-height: 24rem) and (min-width: 16rem) { 6 6 + header { 7 7 + position: sticky; 8 8 + top: 0; 9 9 + z-index: 1000; 10 10 + background-color: var(--dc-bg-2); 11 11 + } 12 12 + @supports (backdrop-filter: blur(24px)) { 13 13 + header { 14 14 + backdrop-filter: blur(24px); 15 15 + background: none; 16 16 + } 17 17 + } 18 18 + }

+10

addon/responsive-sidebar.js

··· 1 1 + /* responsive-sidebar for dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */ 2 2 + /* about: auto open/close `aside details` at 82rem breakpoint. prevents sidebar from looking awkward on wide screens, improves usability on small screens */ 3 3 + 4 4 + const mediaQuery = matchMedia("(min-width: 82rem)"); 5 5 + const toggleDetails = (matches) => 6 6 + document 7 7 + .querySelectorAll("aside details") 8 8 + .forEach((details) => details.toggleAttribute("open", matches)); 9 9 + toggleDetails(mediaQuery.matches); 10 10 + mediaQuery.addEventListener("change", (event) => toggleDetails(event.matches));

+25

addon/scroll-to-top.js

··· 1 1 + /* scroll-to-top for dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */ 2 2 + /* about: shows a "scroll to top" button in the bottom right corner of the screen when scrolling */ 3 3 + 4 4 + const scrollToTopButton = document.createElement("button"); 5 5 + scrollToTopButton.textContent = "▲"; 6 6 + Object.assign(scrollToTopButton.style, { 7 7 + transition: "0.25s", 8 8 + opacity: "0", 9 9 + padding: "0", 10 10 + position: "fixed", 11 11 + bottom: "1rem", 12 12 + right: "1rem", 13 13 + width: "2.5rem", 14 14 + height: "2.5rem", 15 15 + "border-radius": "1.25rem", 16 16 + }); 17 17 + document.body.appendChild(scrollToTopButton); 18 18 + 19 19 + window.addEventListener("scroll", () => { 20 20 + scrollToTopButton.style.opacity = window.scrollY > 0 ? "0.5" : "0"; 21 21 + }); 22 22 + 23 23 + scrollToTopButton.addEventListener("click", () => { 24 24 + window.scrollTo({ top: 0, behavior: "smooth" }); 25 25 + });

+16

badge.svg

··· 1 1 + <svg width="88" height="31" viewBox="0 0 88 31" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 2 + <g clip-path="url(#clip0_19_2)"> 3 3 + <rect width="88" height="31" rx="4" fill="black"/> 4 4 + <path d="M16.203 6.64H17.643L17.663 7.45C17.8163 7.15 18.0296 6.92 18.303 6.76C18.583 6.6 18.8996 6.52 19.253 6.52C19.7396 6.52 20.153 6.64333 20.493 6.89C20.833 7.13 21.0863 7.46333 21.253 7.89C21.4263 8.31 21.513 8.78667 21.513 9.32C21.513 9.85333 21.4263 10.3333 21.253 10.76C21.0796 11.18 20.823 11.5133 20.483 11.76C20.143 12 19.7296 12.12 19.243 12.12C18.9096 12.12 18.6063 12.0433 18.333 11.89C18.0596 11.7367 17.8496 11.5267 17.703 11.26V13.5H16.203V6.64ZM18.833 10.97C19.1863 10.97 19.463 10.8233 19.663 10.53C19.8696 10.23 19.973 9.82667 19.973 9.32C19.973 8.81333 19.8696 8.41333 19.663 8.12C19.463 7.82 19.1863 7.67 18.833 7.67C18.4796 7.67 18.203 7.81333 18.003 8.1C17.803 8.38 17.703 8.78667 17.703 9.32C17.703 9.85333 17.7996 10.2633 17.993 10.55C18.193 10.83 18.473 10.97 18.833 10.97ZM24.9323 12.12C24.3923 12.12 23.9156 12.0067 23.5023 11.78C23.0889 11.5467 22.7689 11.22 22.5423 10.8C22.3223 10.3733 22.2123 9.88 22.2123 9.32C22.2123 8.76 22.3256 8.27 22.5523 7.85C22.7789 7.42333 23.0956 7.09667 23.5023 6.87C23.9156 6.63667 24.3923 6.52 24.9323 6.52C25.4723 6.52 25.9456 6.63667 26.3523 6.87C26.7656 7.09667 27.0856 7.42333 27.3123 7.85C27.5389 8.27 27.6523 8.76 27.6523 9.32C27.6523 9.88 27.5389 10.3733 27.3123 10.8C27.0923 11.22 26.7756 11.5467 26.3623 11.78C25.9489 12.0067 25.4723 12.12 24.9323 12.12ZM24.9323 10.97C25.3056 10.97 25.5923 10.8267 25.7923 10.54C25.9989 10.2467 26.1023 9.84 26.1023 9.32C26.1023 8.8 25.9989 8.39667 25.7923 8.11C25.5923 7.81667 25.3056 7.67 24.9323 7.67C24.5589 7.67 24.2689 7.81667 24.0623 8.11C23.8556 8.39667 23.7523 8.8 23.7523 9.32C23.7523 9.84 23.8556 10.2467 24.0623 10.54C24.2689 10.8267 24.5589 10.97 24.9323 10.97ZM27.96 6.64H29.47L30.4 10.27L31.38 6.64H32.61L33.6 10.27L34.53 6.64H36.04L34.45 12H32.99L32 8.65L31.01 12H29.56L27.96 6.64ZM39.0627 12.12C38.5227 12.12 38.0493 12.0067 37.6427 11.78C37.236 11.5467 36.9193 11.22 36.6927 10.8C36.4727 10.3733 36.3627 9.88 36.3627 9.32C36.3627 8.76 36.4727 8.27 36.6927 7.85C36.9127 7.42333 37.226 7.09667 37.6327 6.87C38.0393 6.63667 38.5127 6.52 39.0527 6.52C39.5793 6.52 40.0393 6.63667 40.4327 6.87C40.8327 7.10333 41.1393 7.44 41.3527 7.88C41.566 8.31333 41.6727 8.82667 41.6727 9.42V9.72H37.9127C37.926 10.1333 38.036 10.4467 38.2427 10.66C38.4493 10.8733 38.7327 10.98 39.0927 10.98C39.6127 10.98 39.946 10.7633 40.0927 10.33L41.6027 10.42C41.456 10.9533 41.156 11.37 40.7027 11.67C40.256 11.97 39.7093 12.12 39.0627 12.12ZM40.1427 8.8C40.1227 8.42 40.016 8.13 39.8227 7.93C39.6293 7.73 39.3727 7.63 39.0527 7.63C38.7393 7.63 38.4793 7.73333 38.2727 7.94C38.0727 8.14667 37.9527 8.43333 37.9127 8.8H40.1427ZM42.6385 6.64H44.0585L44.0885 7.72C44.1952 7.34 44.3518 7.06667 44.5585 6.9C44.7652 6.72667 45.0352 6.64 45.3685 6.64H45.8585V7.88H45.3685C44.9418 7.88 44.6285 7.96667 44.4285 8.14C44.2352 8.31333 44.1385 8.59667 44.1385 8.99V12H42.6385V6.64ZM48.965 12.12C48.425 12.12 47.9517 12.0067 47.545 11.78C47.1383 11.5467 46.8217 11.22 46.595 10.8C46.375 10.3733 46.265 9.88 46.265 9.32C46.265 8.76 46.375 8.27 46.595 7.85C46.815 7.42333 47.1283 7.09667 47.535 6.87C47.9417 6.63667 48.415 6.52 48.955 6.52C49.4817 6.52 49.9417 6.63667 50.335 6.87C50.735 7.10333 51.0417 7.44 51.255 7.88C51.4683 8.31333 51.575 8.82667 51.575 9.42V9.72H47.815C47.8283 10.1333 47.9383 10.4467 48.145 10.66C48.3517 10.8733 48.635 10.98 48.995 10.98C49.515 10.98 49.8483 10.7633 49.995 10.33L51.505 10.42C51.3583 10.9533 51.0583 11.37 50.605 11.67C50.1583 11.97 49.6117 12.12 48.965 12.12ZM50.045 8.8C50.025 8.42 49.9183 8.13 49.725 7.93C49.5317 7.73 49.275 7.63 48.955 7.63C48.6417 7.63 48.3817 7.73333 48.175 7.94C47.975 8.14667 47.855 8.43333 47.815 8.8H50.045ZM54.4706 12.12C54.024 12.12 53.634 12.0067 53.3006 11.78C52.974 11.5533 52.7206 11.23 52.5406 10.81C52.3673 10.3833 52.2806 9.88667 52.2806 9.32C52.2806 8.75333 52.3706 8.26 52.5506 7.84C52.7306 7.42 52.984 7.09667 53.3106 6.87C53.644 6.63667 54.0306 6.52 54.4706 6.52C54.8506 6.52 55.1806 6.59667 55.4606 6.75C55.7406 6.90333 55.9506 7.12 56.0906 7.4V4.9H57.5906V12H56.1506L56.1206 11.21C55.974 11.4967 55.754 11.72 55.4606 11.88C55.174 12.04 54.844 12.12 54.4706 12.12ZM54.9706 10.97C55.3306 10.97 55.6073 10.83 55.8006 10.55C55.994 10.27 56.0906 9.86 56.0906 9.32C56.0906 8.78 55.994 8.37 55.8006 8.09C55.6073 7.81 55.3306 7.67 54.9706 7.67C54.6173 7.67 54.3373 7.82 54.1306 8.12C53.924 8.41333 53.8206 8.81333 53.8206 9.32C53.8206 9.82 53.924 10.22 54.1306 10.52C54.344 10.82 54.624 10.97 54.9706 10.97ZM64.2634 12.12C63.8901 12.12 63.5634 12.0433 63.2834 11.89C63.0101 11.73 62.7968 11.5033 62.6434 11.21L62.6134 12H61.1834V4.9H62.6834V7.4C62.8301 7.14 63.0401 6.93 63.3134 6.77C63.5934 6.60333 63.9101 6.52 64.2634 6.52C64.7101 6.52 65.1001 6.63667 65.4334 6.87C65.7734 7.09667 66.0334 7.42333 66.2134 7.85C66.4001 8.27 66.4934 8.76 66.4934 9.32C66.4934 9.88 66.4001 10.3733 66.2134 10.8C66.0334 11.22 65.7734 11.5467 65.4334 11.78C65.1001 12.0067 64.7101 12.12 64.2634 12.12ZM63.8434 10.97C64.1834 10.97 64.4534 10.8233 64.6534 10.53C64.8534 10.2367 64.9534 9.83333 64.9534 9.32C64.9534 8.80667 64.8534 8.40333 64.6534 8.11C64.4601 7.81667 64.1934 7.67 63.8534 7.67C63.4868 7.67 63.2001 7.81667 62.9934 8.11C62.7868 8.39667 62.6834 8.8 62.6834 9.32C62.6834 9.83333 62.7834 10.2367 62.9834 10.53C63.1901 10.8233 63.4768 10.97 63.8434 10.97ZM67.6979 12.38H68.4079C68.5746 12.38 68.6979 12.3567 68.7779 12.31C68.8579 12.2633 68.9246 12.1733 68.9779 12.04L69.0979 11.73H68.6879L66.7979 6.64H68.3379L69.5579 10.33L70.7179 6.64H72.2479L70.1879 12.51C70.0612 12.8633 69.8846 13.1167 69.6579 13.27C69.4379 13.4233 69.1246 13.5 68.7179 13.5H67.6979V12.38Z" fill="#A1A1A1"/> 5 5 + <path d="M18.1671 25.192C17.4524 25.192 16.8284 25.0107 16.2951 24.648C15.7724 24.2853 15.3671 23.768 15.0791 23.096C14.8017 22.4133 14.6631 21.6187 14.6631 20.712C14.6631 19.8053 14.8071 19.016 15.0951 18.344C15.3831 17.672 15.7884 17.1547 16.3111 16.792C16.8444 16.4187 17.4631 16.232 18.1671 16.232C18.7751 16.232 19.3031 16.3547 19.7511 16.6C20.1991 16.8453 20.5351 17.192 20.7591 17.64V13.64H23.1591V25H20.8551L20.8071 23.736C20.5724 24.1947 20.2204 24.552 19.7511 24.808C19.2924 25.064 18.7644 25.192 18.1671 25.192ZM18.9671 23.352C19.5431 23.352 19.9857 23.128 20.2951 22.68C20.6044 22.232 20.7591 21.576 20.7591 20.712C20.7591 19.848 20.6044 19.192 20.2951 18.744C19.9857 18.296 19.5431 18.072 18.9671 18.072C18.4017 18.072 17.9537 18.312 17.6231 18.792C17.2924 19.2613 17.1271 19.9013 17.1271 20.712C17.1271 21.512 17.2924 22.152 17.6231 22.632C17.9644 23.112 18.4124 23.352 18.9671 23.352Z" fill="#E5484D"/> 6 6 + <path d="M29.0924 25.192C28.2284 25.192 27.4711 25.0107 26.8204 24.648C26.1698 24.2747 25.6631 23.752 25.3004 23.08C24.9484 22.3973 24.7724 21.608 24.7724 20.712C24.7724 19.816 24.9484 19.032 25.3004 18.36C25.6524 17.6773 26.1538 17.1547 26.8044 16.792C27.4551 16.4187 28.2124 16.232 29.0764 16.232C29.9191 16.232 30.6551 16.4187 31.2844 16.792C31.9244 17.1653 32.4151 17.704 32.7564 18.408C33.0978 19.1013 33.2684 19.9227 33.2684 20.872V21.352H27.2524C27.2738 22.0133 27.4498 22.5147 27.7804 22.856C28.1111 23.1973 28.5644 23.368 29.1404 23.368C29.9724 23.368 30.5058 23.0213 30.7404 22.328L33.1564 22.472C32.9218 23.3253 32.4418 23.992 31.7164 24.472C31.0018 24.952 30.1271 25.192 29.0924 25.192ZM30.8204 19.88C30.7884 19.272 30.6178 18.808 30.3084 18.488C29.9991 18.168 29.5884 18.008 29.0764 18.008C28.5751 18.008 28.1591 18.1733 27.8284 18.504C27.5084 18.8347 27.3164 19.2933 27.2524 19.88H30.8204Z" fill="#45A557"/> 7 7 + <path d="M33.7657 16.424H36.2777L38.3097 22.584L40.3417 16.424H42.8377L39.7017 25H36.9017L33.7657 16.424Z" fill="#0072F5"/> 8 8 + <path d="M42.9756 22.552H45.5676V25H42.9756V22.552ZM51.1713 25.192C50.2966 25.192 49.5286 25.0107 48.8673 24.648C48.2166 24.2747 47.71 23.752 47.3473 23.08C46.9953 22.3973 46.8193 21.608 46.8193 20.712C46.8193 19.816 46.9953 19.032 47.3473 18.36C47.71 17.6773 48.2166 17.1547 48.8673 16.792C49.5286 16.4187 50.2966 16.232 51.1713 16.232C52.3233 16.232 53.278 16.5307 54.0353 17.128C54.7926 17.7253 55.2353 18.5467 55.3633 19.592L52.8833 19.704C52.8086 19.1813 52.6166 18.7813 52.3073 18.504C52.0086 18.2267 51.63 18.088 51.1713 18.088C50.574 18.088 50.11 18.3173 49.7793 18.776C49.4486 19.2347 49.2833 19.88 49.2833 20.712C49.2833 21.544 49.4486 22.1947 49.7793 22.664C50.11 23.1227 50.574 23.352 51.1713 23.352C51.6513 23.352 52.0406 23.208 52.3393 22.92C52.638 22.632 52.8193 22.2053 52.8833 21.64L55.3633 21.736C55.246 22.792 54.8086 23.6347 54.0513 24.264C53.294 24.8827 52.334 25.192 51.1713 25.192ZM60.4157 25.192C59.1357 25.192 58.1437 24.9307 57.4397 24.408C56.7464 23.8747 56.3677 23.1707 56.3037 22.296L58.7357 22.216C58.885 23.0693 59.4504 23.496 60.4317 23.496C60.869 23.496 61.205 23.4267 61.4397 23.288C61.6744 23.1387 61.7917 22.9253 61.7917 22.648C61.7917 22.456 61.7437 22.3013 61.6477 22.184C61.5624 22.0667 61.3917 21.9653 61.1357 21.88C60.8904 21.784 60.5277 21.6987 60.0477 21.624C59.141 21.4747 58.4317 21.2933 57.9197 21.08C57.4077 20.856 57.045 20.5787 56.8317 20.248C56.6184 19.9173 56.5117 19.496 56.5117 18.984C56.5117 18.1413 56.837 17.4747 57.4877 16.984C58.1384 16.4827 59.0824 16.232 60.3197 16.232C61.4824 16.232 62.389 16.4987 63.0397 17.032C63.701 17.5653 64.085 18.28 64.1917 19.176L61.7917 19.272C61.7384 18.8453 61.5784 18.5147 61.3117 18.28C61.0557 18.0453 60.7144 17.928 60.2877 17.928C59.8717 17.928 59.5464 18.0133 59.3117 18.184C59.0877 18.3547 58.9757 18.5893 58.9757 18.888C58.9757 19.1973 59.093 19.432 59.3277 19.592C59.5624 19.7413 59.9784 19.8587 60.5757 19.944C61.493 20.072 62.2184 20.248 62.7517 20.472C63.285 20.696 63.669 20.9787 63.9037 21.32C64.1384 21.6613 64.2557 22.088 64.2557 22.6C64.2557 23.4213 63.9144 24.0613 63.2317 24.52C62.549 24.968 61.6104 25.192 60.4157 25.192ZM69.4938 25.192C68.2138 25.192 67.2218 24.9307 66.5178 24.408C65.8245 23.8747 65.4458 23.1707 65.3818 22.296L67.8138 22.216C67.9631 23.0693 68.5285 23.496 69.5098 23.496C69.9471 23.496 70.2831 23.4267 70.5178 23.288C70.7525 23.1387 70.8698 22.9253 70.8698 22.648C70.8698 22.456 70.8218 22.3013 70.7258 22.184C70.6405 22.0667 70.4698 21.9653 70.2138 21.88C69.9685 21.784 69.6058 21.6987 69.1258 21.624C68.2191 21.4747 67.5098 21.2933 66.9978 21.08C66.4858 20.856 66.1231 20.5787 65.9098 20.248C65.6965 19.9173 65.5898 19.496 65.5898 18.984C65.5898 18.1413 65.9151 17.4747 66.5658 16.984C67.2165 16.4827 68.1605 16.232 69.3978 16.232C70.5605 16.232 71.4671 16.4987 72.1178 17.032C72.7791 17.5653 73.1631 18.28 73.2698 19.176L70.8698 19.272C70.8165 18.8453 70.6565 18.5147 70.3898 18.28C70.1338 18.0453 69.7925 17.928 69.3658 17.928C68.9498 17.928 68.6245 18.0133 68.3898 18.184C68.1658 18.3547 68.0538 18.5893 68.0538 18.888C68.0538 19.1973 68.1711 19.432 68.4058 19.592C68.6405 19.7413 69.0565 19.8587 69.6538 19.944C70.5711 20.072 71.2965 20.248 71.8298 20.472C72.3631 20.696 72.7471 20.9787 72.9818 21.32C73.2165 21.6613 73.3338 22.088 73.3338 22.6C73.3338 23.4213 72.9925 24.0613 72.3098 24.52C71.6271 24.968 70.6885 25.192 69.4938 25.192Z" fill="white"/> 9 9 + </g> 10 10 + <rect x="0.5" y="0.5" width="87" height="30" rx="3.5" stroke="#2E2E2E" stroke-linejoin="round"/> 11 11 + <defs> 12 12 + <clipPath id="clip0_19_2"> 13 13 + <rect width="88" height="31" rx="4" fill="white"/> 14 14 + </clipPath> 15 15 + </defs> 16 16 + </svg>

+15

bun.lock

··· 1 1 + { 2 2 + "lockfileVersion": 1, 3 3 + "configVersion": 1, 4 4 + "workspaces": { 5 5 + "": { 6 6 + "name": "@intergrav/dev.css", 7 7 + "devDependencies": { 8 8 + "prettier": "latest", 9 9 + }, 10 10 + }, 11 11 + }, 12 12 + "packages": { 13 13 + "prettier": ["prettier@3.8.1", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg=="], 14 14 + } 15 15 + }

-265

demo.html

··· 1 1 - <!DOCTYPE html> 2 2 - <html lang="en"> 3 3 - <head> 4 4 - <meta charset="UTF-8" /> 5 5 - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 6 - <title>dev.css Demo</title> 7 7 - <link 8 8 - rel="stylesheet" 9 9 - href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@2" 10 10 - /> 11 11 - <link 12 12 - rel="stylesheet" 13 13 - href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css" 14 14 - /> 15 15 - <link 16 16 - rel="stylesheet" 17 17 - href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css" 18 18 - /> 19 19 - </head> 20 20 - 21 21 - <body> 22 22 - <header> 23 23 - <h1>dev.css Demo</h1> 24 24 - <nav> 25 25 - <a href="">Home</a> 26 26 - <a href="">About</a> 27 27 - <a href="">Portfolio</a> 28 28 - <a href="">Awesome</a> 29 29 - <a href="">Sauce</a> 30 30 - </nav> 31 31 - </header> 32 32 - 33 33 - <h1>Heading 1</h1> 34 34 - <p> 35 35 - This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing 36 36 - elit. 37 37 - </p> 38 38 - <h2>Heading 2</h2> 39 39 - <p> 40 40 - This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing 41 41 - elit. 42 42 - </p> 43 43 - <h3>Heading 3</h3> 44 44 - <p> 45 45 - This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing 46 46 - elit. 47 47 - </p> 48 48 - <h4>Heading 4</h4> 49 49 - <p> 50 50 - This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing 51 51 - elit. 52 52 - </p> 53 53 - <h5>Heading 5</h5> 54 54 - <p> 55 55 - This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing 56 56 - elit. 57 57 - </p> 58 58 - <h6>Heading 6</h6> 59 59 - <p> 60 60 - This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing 61 61 - elit. 62 62 - </p> 63 63 - 64 64 - <br /> 65 65 - <hr /> 66 66 - <br /> 67 67 - 68 68 - <p> 69 69 - Lorem <mark>ipsum</mark> dolor sit amet 70 70 - <strong>consectetur</strong> adipisicing elit. Aut 71 71 - <i>harum molestias</i> labore amet possimus 72 72 - <s>exercitationem aperiam</s> earum, doloribus 73 73 - <u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae 74 74 - quisquam. <a href="#">Voluptatibus, officiis laudantium?</a> 75 75 - </p> 76 76 - 77 77 - <p> 78 78 - Lorem ipsum dolor sit amet consectetur adipisicing elit. 79 79 - <code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate odit 80 80 - repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias 81 81 - debitis eveniet totam minima vel. 82 82 - </p> 83 83 - 84 84 - <ul> 85 85 - <li>List item</li> 86 86 - <li>List item</li> 87 87 - <li>List item</li> 88 88 - <li>List item</li> 89 89 - </ul> 90 90 - 91 91 - <ol> 92 92 - <li>Step 1</li> 93 93 - <li>Step 2</li> 94 94 - <li>????</li> 95 95 - <li>Profit!</li> 96 96 - </ol> 97 97 - 98 98 - <dl> 99 99 - <dt>Web</dt> 100 100 - <dd>The part of the Internet that contains websites and web pages</dd> 101 101 - <dt>HTML</dt> 102 102 - <dd>A markup language for creating web pages</dd> 103 103 - <dt>CSS</dt> 104 104 - <dd>A technology to make HTML look better</dd> 105 105 - </dl> 106 106 - 107 107 - <blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden"> 108 108 - If you think privacy is unimportant for you because you have nothing to 109 109 - hide, you might as well say free speech is unimportant for you because you 110 110 - have nothing useful to say. 111 111 - <br /> 112 112 - <br /> 113 113 - – Edward Snowden 114 114 - </blockquote> 115 115 - 116 116 - <pre> 117 117 - &#x3C;!DOCTYPE html&#x3E; 118 118 - &#x3C;html&#x3E; 119 119 - &#x3C;head&#x3E; 120 120 - &#x3C;title&#x3E;Hello World&#x3C;/title&#x3E; 121 121 - &#x3C;/head&#x3E; 122 122 - &#x3C;body&#x3E; 123 123 - &#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#x3C;/p&#x3E; 124 124 - &#x3C;/body&#x3E; 125 125 - &#x3C;/html&#x3E;</pre 126 126 - > 127 127 - 128 128 - <br /> 129 129 - <hr /> 130 130 - <br /> 131 131 - 132 132 - <table> 133 133 - <caption> 134 134 - Ho-kago Tea Time 135 135 - </caption> 136 136 - <thead> 137 137 - <tr> 138 138 - <th>Name</th> 139 139 - <th>Instrument</th> 140 140 - </tr> 141 141 - </thead> 142 142 - <tbody> 143 143 - <tr> 144 144 - <td>Yui Hirasawa</td> 145 145 - <td>Lead Guitar</td> 146 146 - </tr> 147 147 - <tr> 148 148 - <td>Mio Akiyama</td> 149 149 - <td>Bass</td> 150 150 - </tr> 151 151 - <tr> 152 152 - <td>Ritsu Tainaka</td> 153 153 - <td>Drums</td> 154 154 - </tr> 155 155 - <tr> 156 156 - <td>Tsumugi Kotobuki</td> 157 157 - <td>Keyboard</td> 158 158 - </tr> 159 159 - <tr> 160 160 - <td>Azusa Nakano</td> 161 161 - <td>Rhythm Guitar</td> 162 162 - </tr> 163 163 - </tbody> 164 164 - <tfoot> 165 165 - <tr> 166 166 - <th>Name</th> 167 167 - <th>Instrument</th> 168 168 - </tr> 169 169 - </tfoot> 170 170 - </table> 171 171 - 172 172 - <br /> 173 173 - <hr /> 174 174 - <br /> 175 175 - 176 176 - <form> 177 177 - <p> 178 178 - <em> 179 179 - This is not a real form and does not submit or save any information. 180 180 - </em> 181 181 - </p> 182 182 - <p> 183 183 - <label>First name</label><br /> 184 184 - <input type="text" name="first_name" /> 185 185 - </p> 186 186 - <p> 187 187 - <label>Last name</label><br /> 188 188 - <input type="text" name="last_name" /> 189 189 - </p> 190 190 - <p> 191 191 - <label>Gender</label><br /> 192 192 - <label> 193 193 - <input type="radio" name="gender" value="Male" /> 194 194 - Male 195 195 - </label> 196 196 - <br /> 197 197 - <label> 198 198 - <input type="radio" name="gender" value="Female" /> 199 199 - Female 200 200 - </label> 201 201 - <br /> 202 202 - <label> 203 203 - <input type="radio" name="gender" value="other-none-na" /> 204 204 - Non-binary 205 205 - </label> 206 206 - </p> 207 207 - <p> 208 208 - <label>Email</label><br /> 209 209 - <input type="email" name="email" required="" /> 210 210 - </p> 211 211 - <p> 212 212 - <label>Phone number</label><br /> 213 213 - <input type="tel" name="phone" /> 214 214 - </p> 215 215 - <p> 216 216 - <label>Password</label><br /> 217 217 - <input type="password" name="password" /> 218 218 - </p> 219 219 - <p> 220 220 - <label>Country</label><br /> 221 221 - <select> 222 222 - <option>China</option> 223 223 - <option>India</option> 224 224 - <option>United States</option> 225 225 - <option>Indonesia</option> 226 226 - <option>Brazil</option> 227 227 - </select> 228 228 - </p> 229 229 - <p> 230 230 - <label>Comments</label><br /> 231 231 - <textarea></textarea> 232 232 - </p> 233 233 - <p> 234 234 - <label> 235 235 - <input type="checkbox" value="terms" /> 236 236 - I agree to the <a>terms and conditions</a> 237 237 - </label> 238 238 - </p> 239 239 - <p> 240 240 - <button>Sign up</button> 241 241 - <button type="reset">Reset form</button> 242 242 - <button disabled="disabled">Disabled</button> 243 243 - </p> 244 244 - </form> 245 245 - 246 246 - <br /> 247 247 - <hr /> 248 248 - <br /> 249 249 - 250 250 - <img 251 251 - src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg" 252 252 - alt="Mt. Fuji" 253 253 - /> 254 254 - 255 255 - <p> 256 256 - Inline image: 257 257 - <a href="#" 258 258 - ><img 259 259 - src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg" 260 260 - width="50" 261 261 - alt="Mt. Fuji" 262 262 - /></a> 263 263 - </p> 264 264 - </body> 265 265 - </html>

+322 -297

dev.css

··· 1 1 + /* dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */ 2 2 + /* about: tiny, simple, classless CSS framework inspired by new.css */ 3 3 + 4 4 + /* table of contents 5 5 + 1. configurable variables 6 6 + 2. color scheme 7 7 + 3. css reset 8 8 + 4. margins for most elements 9 9 + 5. typography 10 10 + 6. document 11 11 + 7. blockquotes 12 12 + 8. buttons and inputs 13 13 + 9. code and keyboards 14 14 + 10. details 15 15 + 11. description lists 16 16 + 12. horizontal rules 17 17 + 13. fieldsets 18 18 + 14. tables 19 19 + 15. lists 20 20 + */ 21 21 + 22 22 + /* 1. configurable variables */ 23 23 + /* adjustable by you! see ./theme/boilerplate.user.css */ 1 24 :root { 2 2 - /* Font families - Geist, Inter, Apple default (Gecko and Blink), Microsoft default, browser default */ 3 3 - --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, 4 4 - "Segoe UI", sans-serif; 5 5 - --dc-font-mono: "Geist Mono", monospace; 6 6 - /* Light colors */ 7 7 - --dc-tx-1: #000000; 8 8 - --dc-tx-2: #1a1a1a; 9 9 - --dc-bg-1: #fafafa; 10 10 - --dc-bg-2: #fff; 11 11 - --dc-bg-3: #ebebeb; 12 12 - --dc-lk-1: #0068d6; 13 13 - --dc-lkb-1: #0072f5; 14 14 - --dc-lkb-2: #0062d1; 15 15 - --dc-lkb-tx: #ededed; 16 16 - --dc-ac-1: #8e4ec6; 17 17 - --dc-ac-tx: #ededed; 18 18 - /* Dark colors */ 19 19 - --dc-d-tx-1: #ededed; 20 20 - --dc-d-tx-2: #a1a1a1; 21 21 - --dc-d-bg-1: #000; 22 22 - --dc-d-bg-2: #0a0a0a; 23 23 - --dc-d-bg-3: #2e2e2e; 24 24 - --dc-d-lk-1: #52a8ff; 25 25 - --dc-d-lkb-1: #0072f5; 26 26 - --dc-d-lkb-2: #0062d1; 27 27 - --dc-d-lkb-tx: #ededed; 28 28 - --dc-d-ac-1: #8e4ec6; 29 29 - --dc-d-ac-tx: #ededed; 25 25 + /* font families */ 26 26 + --dc-font: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; 27 27 + --dc-font-mono: 28 28 + "Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, 29 29 + Consolas, "DejaVu Sans Mono", monospace; 30 30 + 31 31 + /* light/dark colors */ 32 32 + --dc-cs: light dark; /* light and dark scrollbars, inputs, etc */ 33 33 + --dc-tx-1: light-dark(#171717, #ededed); /* primary text */ 34 34 + --dc-tx-2: light-dark(#666, #a1a1a1); /* secondary text */ 35 35 + --dc-bg-1: light-dark(#fff, #0a0a0a); /* primary background */ 36 36 + --dc-bg-2: light-dark(#fafafa, #000); /* secondary background */ 37 37 + --dc-bg-3: light-dark(#ebebeb, #2e2e2e); /* border */ 38 38 + --dc-lk-1: light-dark(#005ff2, #47a8ff); /* link text */ 39 39 + --dc-lkb-1: light-dark(#006bff, #006efe); /* link button */ 40 40 + --dc-lkb-2: light-dark(#0059ec, #005be7); /* link button hover */ 41 41 + --dc-lkb-tx: light-dark(#fff, #fff); /* text over link button */ 42 42 + --dc-ac-1: light-dark(#a000f8, #9440d5); /* accent color */ 43 43 + --dc-ac-tx: light-dark(#fff, #fff); /* text over accent color */ 44 44 + } 45 45 + 46 46 + /* 2. color scheme */ 47 47 + :root { 48 48 + color-scheme: var(--dc-cs); 49 49 + } 50 50 + 51 51 + /* 3. css reset */ 52 52 + /* modified from https://www.joshwcomeau.com/css/custom-css-reset */ 53 53 + *, 54 54 + *::before, 55 55 + *::after { 56 56 + box-sizing: border-box; 57 57 + margin: 0; 58 58 + } 59 59 + 60 60 + img, 61 61 + picture, 62 62 + video, 63 63 + canvas, 64 64 + svg { 65 65 + display: block; 66 66 + max-width: 100%; 67 67 + height: auto; 68 68 + } 69 69 + 70 70 + input, 71 71 + button, 72 72 + textarea, 73 73 + select { 74 74 + font: inherit; 75 75 + } 76 76 + 77 77 + p, 78 78 + h1, 79 79 + h2, 80 80 + h3, 81 81 + h4, 82 82 + h5, 83 83 + h6 { 84 84 + overflow-wrap: break-word; 85 85 + } 86 86 + 87 87 + p { 88 88 + text-wrap: pretty; 30 89 } 31 90 32 32 - @media (prefers-color-scheme: dark) { 33 33 - :root { 34 34 - --dc-tx-1: var(--dc-d-tx-1); 35 35 - --dc-tx-2: var(--dc-d-tx-2); 36 36 - --dc-bg-1: var(--dc-d-bg-1); 37 37 - --dc-bg-2: var(--dc-d-bg-2); 38 38 - --dc-bg-3: var(--dc-d-bg-3); 39 39 - --dc-lk-1: var(--dc-d-lk-1); 40 40 - --dc-lkb-1: var(--dc-d-lkb-1); 41 41 - --dc-lkb-2: var(--dc-d-lkb-2); 42 42 - --dc-lkb-tx: var(--dc-d-lkb-tx); 43 43 - --dc-ac-1: var(--dc-d-ac-1); 44 44 - --dc-ac-tx: var(--dc-d-ac-tx); 45 45 - } 91 91 + h1, 92 92 + h2, 93 93 + h3, 94 94 + h4, 95 95 + h5, 96 96 + h6 { 97 97 + text-wrap: balance; 46 98 } 47 99 48 48 - * { 49 49 - margin: 0; 50 50 - padding: 0; 100 100 + #root, 101 101 + #__next { 102 102 + isolation: isolate; 51 103 } 52 104 105 105 + /* 4. margins for most elements */ 53 106 address, 54 107 area, 55 108 article, 56 56 - aside, 57 109 audio, 58 110 blockquote, 59 111 datalist, ··· 61 113 dl, 62 114 fieldset, 63 115 figure, 116 116 + footer, 64 117 form, 118 118 + header, 119 119 + hr, 65 120 input, 66 121 iframe, 67 122 img, 123 123 + main, 68 124 meter, 69 125 nav, 70 126 ol, ··· 80 136 textarea, 81 137 ul, 82 138 video { 83 83 - margin-bottom: 1rem; 139 139 + margin-bottom: 1rem; 84 140 } 85 141 86 86 - html, 87 87 - input, 88 88 - select, 89 89 - button { 90 90 - font-family: var(--dc-font-sans); 91 91 - } 142 142 + /* 5. typography */ 92 143 93 144 body { 94 94 - margin: 0 auto; 95 95 - max-width: 750px; 96 96 - padding: 2rem; 97 97 - border-radius: 4px; 98 98 - overflow-x: hidden; 99 99 - word-break: break-word; 100 100 - overflow-wrap: break-word; 101 101 - background: var(--dc-bg-1); 102 102 - color: var(--dc-tx-2); 103 103 - font-size: 1.03rem; 104 104 - line-height: 1.5; 145 145 + font-family: var(--dc-font); 146 146 + color: var(--dc-tx-2); 147 147 + line-height: 1.5; 105 148 } 106 149 107 107 - ::selection { 108 108 - background: var(--dc-ac-1); 109 109 - color: var(--dc-ac-tx); 150 150 + code, 151 151 + pre, 152 152 + kbd, 153 153 + samp { 154 154 + font-family: var(--dc-font-mono); 155 155 + font-size: 0.9rem; 110 156 } 111 157 112 158 h1, ··· 115 161 h4, 116 162 h5, 117 163 h6 { 118 118 - line-height: 1; 119 119 - color: var(--dc-tx-1); 120 120 - padding-top: 0.875rem; 164 164 + color: var(--dc-tx-1); 165 165 + line-height: 1; 166 166 + padding-top: 0.5rem; 121 167 } 122 168 123 169 h1, 124 170 h2, 125 171 h3 { 126 126 - padding-bottom: 6px; 127 127 - margin-bottom: 8px; 128 128 - border-bottom: 1px solid var(--dc-bg-3); 172 172 + margin-bottom: 0.75rem; 173 173 + padding-bottom: 0.25rem; 174 174 + border-bottom: 1px solid var(--dc-bg-3); 175 175 + } 176 176 + 177 177 + article h1, 178 178 + article h2, 179 179 + article h3 { 180 180 + padding-bottom: 0; 181 181 + border-bottom: none; 129 182 } 130 183 131 184 h4, 132 185 h5, 133 186 h6 { 134 134 - margin-bottom: 0.3rem; 187 187 + margin-bottom: 0.5rem; 135 188 } 136 189 137 137 - h1 { 138 138 - font-size: 2.25rem; 190 190 + a { 191 191 + color: var(--dc-lk-1); 192 192 + text-decoration: none; 139 193 } 140 194 141 141 - h2 { 142 142 - font-size: 1.85rem; 195 195 + a:hover { 196 196 + text-decoration: underline; 143 197 } 144 198 145 145 - h3 { 146 146 - font-size: 1.55rem; 199 199 + @supports not (color: light-dark(#fff, #000)) { 200 200 + a { 201 201 + text-decoration: underline; 202 202 + } 147 203 } 148 204 149 149 - h4 { 150 150 - font-size: 1.25rem; 205 205 + mark { 206 206 + border-radius: 0.375rem; 207 207 + padding: 0.125rem 0.25rem; 208 208 + background: var(--dc-ac-1); 209 209 + color: var(--dc-ac-tx); 151 210 } 152 211 153 153 - h5 { 154 154 - font-size: 1rem; 212 212 + ::selection { 213 213 + background: var(--dc-ac-1); 214 214 + color: var(--dc-ac-tx); 155 215 } 156 216 157 157 - h6 { 158 158 - font-size: 0.875rem; 217 217 + /* 6. document */ 218 218 + body { 219 219 + max-width: 48rem; 220 220 + margin: 1rem auto 0; 221 221 + padding: 0 1rem; 222 222 + background: var(--dc-bg-2); 223 223 + overflow-x: hidden; 159 224 } 160 225 161 161 - a { 162 162 - color: var(--dc-lk-1); 163 163 - text-decoration: none; 226 226 + header { 227 227 + padding: 1rem calc(50vw - 50%); 228 228 + margin: 0 calc(50% - 50vw) 0; 229 229 + margin-top: -1rem; 164 230 } 165 231 166 166 - a:hover { 167 167 - text-decoration: underline; 232 232 + header * { 233 233 + padding: 0; 234 234 + margin: 0; 168 235 } 169 236 170 170 - abbr:hover { 171 171 - cursor: help; 237 237 + header > *:not(:last-child) { 238 238 + margin-bottom: 0.25rem; 172 239 } 173 240 174 174 - blockquote { 175 175 - padding: 1.5rem; 176 176 - background: var(--dc-bg-2); 177 177 - border: 1px solid var(--dc-bg-3); 178 178 - border-left: 6px solid var(--dc-bg-3); 179 179 - border-radius: 4px; 241 241 + header h1, 242 242 + header h2, 243 243 + header h3 { 244 244 + border-bottom: none; 245 245 + padding-bottom: 0; 180 246 } 181 247 182 182 - blockquote *:last-child { 183 183 - padding-bottom: 0; 248 248 + footer > *:last-child { 184 249 margin-bottom: 0; 185 250 } 186 251 187 187 - @media (max-width: 1424px) { 188 188 - header { 189 189 - background: var(--dc-bg-2); 190 190 - border-bottom: 1px solid var(--dc-bg-3); 191 191 - padding-top: 0.9rem; 192 192 - padding-bottom: 0.6rem; 193 193 - margin: -2rem calc(50% - 50vw) 2rem; 194 194 - padding-left: calc(50vw - 50%); 195 195 - padding-right: calc(50vw - 50%); 196 196 - } 252 252 + header nav ul, 253 253 + footer nav ul { 254 254 + display: flex; 255 255 + flex-wrap: wrap; 256 256 + list-style: none; 257 257 + padding: 0; 258 258 + } 197 259 198 198 - header nav a + a::before { 199 199 - content: "• "; 200 200 - color: var(--dc-tx-2); 201 201 - } 260 260 + header nav ul li, 261 261 + footer nav ul li { 262 262 + margin: 0; 263 263 + display: flex; 264 264 + } 202 265 203 203 - header h1 { 204 204 - font-size: 1.6rem; 205 205 - } 266 266 + header nav ul li:not(:first-child)::before, 267 267 + footer nav ul li:not(:first-child)::before { 268 268 + content: "•"; 269 269 + margin: 0 0.25em; 270 270 + } 206 271 207 207 - header h2 { 208 208 - font-size: 1.4rem; 209 209 - } 272 272 + main, 273 273 + article { 274 274 + padding: 1.5rem; 275 275 + background: var(--dc-bg-1); 276 276 + border: 1px solid var(--dc-bg-3); 277 277 + border-radius: 0.25rem; 278 278 + } 210 279 211 211 - header h3 { 212 212 - font-size: 1.2rem; 213 213 - } 280 280 + main article { 281 281 + background: var(--dc-bg-2); 282 282 + border-radius: 0.375rem; 283 283 + } 214 284 215 215 - header h4 { 216 216 - font-size: 1rem; 217 217 - } 285 285 + main > *:last-child, 286 286 + article > *:last-child { 287 287 + margin-bottom: 0; 288 288 + } 218 289 219 219 - header h5 { 220 220 - font-size: 0.9rem; 221 221 - } 290 290 + @media only screen and (max-width: 48rem) { 291 291 + main { 292 292 + margin: -1rem; 293 293 + background: none; 294 294 + border: none; 295 295 + } 222 296 223 223 - header p { 224 224 - font-size: 1rem; 225 225 - } 297 297 + header { 298 298 + background-color: var(--dc-bg-1); 299 299 + border-bottom: 1px solid var(--dc-bg-3); 300 300 + margin-bottom: 1rem; 301 301 + } 226 302 227 227 - header nav { 228 228 - font-size: 0.9rem; 229 229 - } 230 230 - 231 231 - header h6 { 232 232 - font-size: 0.8rem; 233 233 - } 303 303 + footer { 304 304 + margin-top: 1rem; 305 305 + padding-top: 1rem; 306 306 + border-top: 1px solid var(--dc-bg-3); 307 307 + } 234 308 235 235 - header * { 236 236 - padding-top: 0.15rem; 237 237 - padding-bottom: 0.15rem; 238 238 - margin-top: 0rem; 239 239 - margin-bottom: 0rem; 240 240 - } 309 309 + main, 310 310 + article { 311 311 + padding: 1rem; 312 312 + } 241 313 } 242 314 243 243 - @media (min-width: 1425px) { 244 244 - header { 245 245 - background: none; 246 246 - padding: 2rem 1.5rem; 247 247 - margin: 0; 248 248 - position: fixed; 249 249 - top: 0; 250 250 - left: calc(50% - 700px); 251 251 - width: 255px; 252 252 - height: 100%; 253 253 - } 315 315 + @media only screen and (min-width: 82rem) { 316 316 + aside { 317 317 + position: absolute; 318 318 + width: 16rem; 319 319 + } 254 320 255 255 - header nav { 256 256 - display: flex; 257 257 - flex-direction: column; 258 258 - } 321 321 + aside:nth-child(even) { 322 322 + left: calc(50% - ((48rem) / 2) - (16rem)); 323 323 + } 259 324 260 260 - header nav a::before { 261 261 - content: "• "; 262 262 - color: var(--dc-tx-2); 263 263 - } 264 264 - 265 265 - header * { 266 266 - padding-top: 0.25rem; 267 267 - padding-bottom: 0.25rem; 268 268 - margin-top: 0rem; 269 269 - margin-bottom: 0rem; 270 270 - } 325 325 + aside:nth-child(odd) { 326 326 + right: calc(50% - ((48rem) / 2) - (16rem)); 327 327 + } 271 328 } 272 329 273 273 - header h1, 274 274 - header h2, 275 275 - header h3, 276 276 - header h4, 277 277 - header h5, 278 278 - header h6 { 279 279 - border-bottom: 0; 330 330 + /* 7. blockquotes */ 331 331 + blockquote { 332 332 + padding: 1.25rem; 333 333 + background: var(--dc-bg-2); 334 334 + border: 1px solid var(--dc-bg-3); 335 335 + border-left: 5px solid var(--dc-bg-3); 336 336 + border-radius: 0.375rem; 280 337 } 281 338 282 282 - header > *:first-child { 283 283 - margin-top: 0; 284 284 - padding-top: 0; 339 339 + blockquote > *:last-child { 340 340 + padding-bottom: 0; 341 341 + margin-bottom: 0; 285 342 } 286 343 287 287 - header > *:last-child { 288 288 - margin-bottom: 0; 289 289 - padding-bottom: 0; 290 290 - } 291 291 - 344 344 + /* 8. buttons and inputs */ 292 345 a button, 293 346 button, 294 347 input[type="submit"], 295 348 input[type="reset"], 296 349 input[type="button"] { 297 297 - font-size: 1rem; 298 298 - display: inline-block; 299 299 - padding: 6px 12px; 300 300 - text-align: center; 301 301 - text-decoration: none; 302 302 - white-space: nowrap; 303 303 - background: var(--dc-lkb-1); 304 304 - color: var(--dc-lkb-tx); 305 305 - border: 0; 306 306 - border-radius: 4px; 307 307 - box-sizing: border-box; 308 308 - cursor: pointer; 350 350 + display: inline-block; 351 351 + padding: 0.25rem 0.75rem; 352 352 + text-align: center; 353 353 + text-decoration: none; 354 354 + white-space: nowrap; 355 355 + background: var(--dc-lkb-1); 356 356 + color: var(--dc-lkb-tx); 357 357 + border: 0; 358 358 + border-radius: 0.375rem; 359 359 + box-sizing: border-box; 360 360 + cursor: pointer; 309 361 } 310 362 311 363 a button[disabled], ··· 313 365 input[type="submit"][disabled], 314 366 input[type="reset"][disabled], 315 367 input[type="button"][disabled] { 316 316 - cursor: not-allowed; 317 317 - opacity: 0.5; 368 368 + cursor: not-allowed; 369 369 + opacity: 0.5; 318 370 } 319 371 320 372 .button:focus, ··· 327 379 input[type="reset"]:enabled:hover, 328 380 input[type="button"]:focus, 329 381 input[type="button"]:enabled:hover { 330 330 - background: var(--dc-lkb-2); 382 382 + background: var(--dc-lkb-2); 383 383 + } 384 384 + 385 385 + textarea, 386 386 + select, 387 387 + input { 388 388 + padding: 0.25rem 0.5rem; 389 389 + margin-bottom: 0.5rem; 390 390 + background: var(--dc-bg-2); 391 391 + color: var(--dc-tx-2); 392 392 + border: 1px solid var(--dc-bg-3); 393 393 + border-radius: 0.375rem; 394 394 + box-shadow: none; 395 395 + box-sizing: border-box; 331 396 } 332 397 333 333 - a img { 334 334 - margin-bottom: 0; 398 398 + textarea { 399 399 + max-width: 100%; 335 400 } 336 401 337 337 - code, 338 338 - pre, 339 339 - kbd, 340 340 - samp { 341 341 - font-family: var(--dc-font-mono); 402 402 + input, 403 403 + progress { 404 404 + accent-color: var(--dc-ac-1); 342 405 } 343 406 407 407 + /* 9. code and keyboards */ 344 408 code, 345 409 samp, 346 410 kbd, 347 411 pre { 348 348 - background: var(--dc-bg-2); 349 349 - border: 1px solid var(--dc-bg-3); 350 350 - border-radius: 4px; 351 351 - padding: 3px 6px; 352 352 - font-size: 0.9em; 412 412 + background: var(--dc-bg-2); 413 413 + border: 1px solid var(--dc-bg-3); 414 414 + border-radius: 0.375rem; 415 415 + padding: 0.125rem 0.25rem; 416 416 + tab-size: 2; 353 417 } 354 418 355 419 kbd { 356 356 - border-bottom: 3px solid var(--dc-bg-3); 420 420 + border-bottom: 3px solid var(--dc-bg-3); 357 421 } 358 422 359 423 pre { 360 360 - padding: 1rem 1.4rem; 361 361 - max-width: 100%; 362 362 - overflow: auto; 424 424 + padding: 1rem 1.5rem; 425 425 + max-width: 100%; 426 426 + overflow: auto; 363 427 } 364 428 365 429 pre code { 366 366 - background: inherit; 367 367 - font-size: inherit; 368 368 - color: inherit; 369 369 - border: 0; 370 370 - padding: 0; 371 371 - margin: 0; 430 430 + padding: 0; 431 431 + border: 0; 372 432 } 373 433 374 374 - code pre { 375 375 - display: inline; 376 376 - background: inherit; 377 377 - font-size: inherit; 378 378 - color: inherit; 379 379 - border: 0; 380 380 - padding: 0; 381 381 - margin: 0; 382 382 - } 383 383 - 384 384 - details { 385 385 - padding: 0.6rem 1rem; 386 386 - background: var(--dc-bg-2); 387 387 - border: 1px solid var(--dc-bg-3); 388 388 - border-radius: 4px; 434 434 + /* 10. details */ 435 435 + details:not(aside details) { 436 436 + padding: 0.5rem 1rem; 437 437 + background: var(--dc-bg-2); 438 438 + border: 1px solid var(--dc-bg-3); 439 439 + border-radius: 0.375rem; 389 440 } 390 441 391 442 summary { 392 392 - cursor: pointer; 393 393 - font-weight: bold; 443 443 + cursor: pointer; 444 444 + font-weight: bold; 394 445 } 395 446 396 396 - details[open] summary { 397 397 - margin-bottom: 8px; 447 447 + details[open] > summary { 448 448 + margin-bottom: 0.5rem; 398 449 } 399 450 400 451 details[open] > *:first-child { 401 401 - margin-top: 0; 402 402 - padding-top: 0; 452 452 + margin-top: 0; 403 453 } 404 454 405 455 details[open] > *:last-child { 406 406 - margin-bottom: 0; 407 407 - padding-bottom: 0; 456 456 + margin-bottom: 0; 408 457 } 409 458 459 459 + /* 11. description lists */ 410 460 dt { 411 411 - font-weight: bold; 461 461 + font-weight: bold; 412 462 } 413 463 414 464 dd::before { 415 415 - content: "→ "; 465 465 + content: "→ "; 416 466 } 417 467 468 468 + /* 12. horizontal rules */ 418 469 hr { 419 419 - border: 0; 420 420 - border-bottom: 1px solid var(--dc-bg-3); 421 421 - margin: 1rem auto; 470 470 + border: 0; 471 471 + border-bottom: 2px solid var(--dc-bg-3); 422 472 } 423 473 474 474 + /* 13. fieldsets */ 424 475 fieldset { 425 425 - margin-top: 1rem; 426 426 - padding: 2rem; 427 427 - border: 1px solid var(--dc-bg-3); 428 428 - border-radius: 4px; 476 476 + margin-top: 1rem; 477 477 + padding: 2rem; 478 478 + border: 1px solid var(--dc-bg-3); 479 479 + border-radius: 0.375rem; 429 480 } 430 481 431 482 legend { 432 432 - padding: auto 0.5rem; 483 483 + padding: auto 0.5rem; 433 484 } 434 485 486 486 + /* 14. tables */ 435 487 table { 436 436 - border-collapse: collapse; 437 437 - width: 100%; 488 488 + border-collapse: collapse; 489 489 + width: 100%; 438 490 } 439 491 440 492 td, 441 493 th { 442 442 - border: 1px solid var(--dc-bg-3); 443 443 - text-align: left; 444 444 - padding: 0.5rem; 494 494 + border: 1px solid var(--dc-bg-3); 495 495 + text-align: left; 496 496 + padding: 0.5rem; 445 497 } 446 498 447 499 th { 448 448 - background: var(--dc-bg-2); 500 500 + background: var(--dc-bg-2); 449 501 } 450 502 451 503 tr:nth-child(even) { 452 452 - background: var(--dc-bg-2); 504 504 + background: var(--dc-bg-2); 453 505 } 454 506 455 507 table caption { 456 456 - font-weight: bold; 457 457 - margin-bottom: 0.5rem; 458 458 - } 459 459 - 460 460 - textarea { 461 461 - max-width: 100%; 508 508 + font-weight: bold; 509 509 + margin-bottom: 0.5rem; 462 510 } 463 511 512 512 + /* 15. lists */ 464 513 ol, 465 514 ul { 466 466 - padding-left: 2rem; 515 515 + padding-left: 2rem; 467 516 } 468 517 469 518 li { 470 470 - margin-top: 0.4rem; 519 519 + margin-top: 0.4rem; 471 520 } 472 521 473 522 ul ul, 474 523 ol ul, 475 524 ul ol, 476 525 ol ol { 477 477 - margin-bottom: 0; 478 478 - } 479 479 - 480 480 - mark { 481 481 - padding: 3px 6px; 482 482 - background: var(--dc-ac-1); 483 483 - color: var(--dc-ac-tx); 484 484 - border-radius: 4px; 485 485 - } 486 486 - 487 487 - textarea, 488 488 - select, 489 489 - input { 490 490 - padding: 6px 12px; 491 491 - margin-bottom: 0.5rem; 492 492 - background: var(--dc-bg-2); 493 493 - color: var(--dc-tx-2); 494 494 - border: 1px solid var(--dc-bg-3); 495 495 - border-radius: 4px; 496 496 - box-shadow: none; 497 497 - box-sizing: border-box; 498 498 - } 499 499 - 500 500 - img { 501 501 - max-width: 100%; 526 526 + margin-bottom: 0; 502 527 }

+400

index.html

··· 1 1 + <!doctype html> 2 2 + <html lang="en"> 3 3 + <head> 4 4 + <meta charset="UTF-8" /> 5 5 + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 6 + <title>Home - dev.css</title> 7 7 + <meta name="title" content="dev.css" /> 8 8 + <meta 9 9 + name="description" 10 10 + content="dev.css is a lightweight, classless CSS framework" 11 11 + /> 12 12 + <meta 13 13 + name="keywords" 14 14 + content="css, web development, framework, lightweight, vercel, geist" 15 15 + /> 16 16 + <meta name="robots" content="index, follow" /> 17 17 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 18 18 + <meta name="language" content="English" /> 19 19 + <meta name="author" content="intergrav" /> 20 20 + <link rel="stylesheet" href="dev.css" /> 21 21 + <script src="addon/responsive-sidebar.js"></script> 22 22 + </head> 23 23 + 24 24 + <body> 25 25 + <header> 26 26 + <h1>dev.css</h1> 27 27 + <p>A lightweight, classless CSS framework.</p> 28 28 + <nav> 29 29 + <ul> 30 30 + <li><a href="https://tangled.org/devins.page/dev.css">git</a></li> 31 31 + <li> 32 32 + <a href="https://www.npmjs.com/package/@intergrav/dev.css">npm</a> 33 33 + </li> 34 34 + <li> 35 35 + <a href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css/" 36 36 + >jsDelivr</a 37 37 + > 38 38 + </li> 39 39 + </ul> 40 40 + </nav> 41 41 + </header> 42 42 + 43 43 + <aside> 44 44 + <details> 45 45 + <summary>Sidebar</summary> 46 46 + <p> 47 47 + Optional sidebar that you can use for pretty much anything. See the 48 48 + README on GitHub for more information. 49 49 + </p> 50 50 + <ul> 51 51 + <li><a href="https://example.org">Page 1</a></li> 52 52 + <li><a href="https://example.org">Page 2</a></li> 53 53 + <li><a href="https://example.org">Page 3</a></li> 54 54 + <li> 55 55 + <a href="https://example.org">Page 4</a> 56 56 + <ul> 57 57 + <li><a href="https://example.org">Page 4.1</a></li> 58 58 + </ul> 59 59 + </li> 60 60 + <li> 61 61 + <a href="https://example.org">Page 5</a> 62 62 + <ul> 63 63 + <li><a href="https://example.org">Page 5.1</a></li> 64 64 + <li><a href="https://example.org">Page 5.2</a></li> 65 65 + </ul> 66 66 + </li> 67 67 + <li><a href="https://example.org">Page 6</a></li> 68 68 + </ul> 69 69 + </details> 70 70 + </aside> 71 71 + 72 72 + <main> 73 73 + <section> 74 74 + <h1>Home</h1> 75 75 + <p> 76 76 + dev.css is a tiny, simple, classless CSS framework inspired by 77 77 + Vercel's 78 78 + <a href="https://vercel.com/geist">Geist</a> design system. It is 79 79 + designed to make any plain HTML file look clean and modern. The 80 80 + minified stylesheet weighs only <bold>~5.5kb</bold> and includes both 81 81 + light and dark themes. Scroll down for a demo. 82 82 + </p> 83 83 + <p> 84 84 + For installation instructions and much more information, see the 85 85 + <a href="https://tangled.org/devins.page/dev.css">README.</a> 86 86 + </p> 87 87 + <h2>Who is this for?</h2> 88 88 + <p>dev.css is a great choice for:</p> 89 89 + <ul> 90 90 + <li>A simple blog</li> 91 91 + <li>A simple "about me" website</li> 92 92 + <li>Collecting your most used links</li> 93 93 + <li>Prototyping your raw HTML</li> 94 94 + </ul> 95 95 + <p> 96 96 + dev.css was not meant for very complex websites. An example of a site 97 97 + that uses dev.css is 98 98 + <a href="https://skywardmc.org">SkywardMC's wiki</a>. This website was 99 99 + also entirely made with dev.css, of course. 100 100 + </p> 101 101 + <p> 102 102 + If you're using dev.css on your site, feel free to use this "powered 103 103 + by dev.css" badge if you want to promote the project: 104 104 + </p> 105 105 + <pre><code>&lt;a href=&quot;https://devcss.devins.page&quot;&gt;&lt;img src=&quot;https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg&quot; alt=&quot;powered by dev.css&quot;&gt;&lt;/a&gt;</code></pre> 106 106 + <a href="https://devcss.devins.page" 107 107 + ><img 108 108 + src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg" 109 109 + alt="powered by dev.css" 110 110 + /></a> 111 111 + </section> 112 112 + 113 113 + <section> 114 114 + <h1>Demo</h1> 115 115 + <p> 116 116 + Below is the demo for dev.css, a classless, lightweight, and 117 117 + accessible CSS framework! Lorem ipsum odor amet, consectetuer 118 118 + adipiscing elit. Hac suscipit magnis a, duis sollicitudin imperdiet. 119 119 + </p> 120 120 + <h2>Heading 2</h2> 121 121 + <p> 122 122 + Lorem ipsum odor amet, consectetuer adipiscing elit. Hac suscipit 123 123 + magnis a, duis sollicitudin imperdiet. Aliquam inceptos quis semper 124 124 + libero gravida purus dui posuere lacinia. Aliquet erat torquent auctor 125 125 + leo habitasse feugiat iaculis pharetra. Dignissim ridiculus gravida 126 126 + dictumst donec iaculis. 127 127 + </p> 128 128 + <h3>Heading 3</h3> 129 129 + <p> 130 130 + Sed tortor congue mauris molestie per facilisi vulputate. Quam aenean 131 131 + mollis dui sollicitudin; per pretium mattis. Dis luctus vestibulum 132 132 + proin id neque porta. Vehicula sapien aenean tellus inceptos lectus 133 133 + facilisis viverra. Lacinia habitasse convallis diam elit lobortis 134 134 + luctus. 135 135 + </p> 136 136 + <h4>Heading 4</h4> 137 137 + <p> 138 138 + Mattis per parturient convallis tempor nec posuere imperdiet. Natoque 139 139 + dolor enim tempus bibendum ligula facilisis ipsum interdum. Netus 140 140 + maximus laoreet adipiscing enim phasellus. Luctus nunc at egestas 141 141 + torquent porttitor nostra aliquam tempus. 142 142 + </p> 143 143 + <h5>Heading 5</h5> 144 144 + <p> 145 145 + Erat interdum etiam condimentum, nullam odio ex maximus vel. Rhoncus 146 146 + suspendisse vestibulum aptent amet torquent class suscipit ultrices 147 147 + viverra. 148 148 + </p> 149 149 + <h6>Heading 6</h6> 150 150 + <p> 151 151 + Mattis primis lacus ac metus sollicitudin consequat bibendum luctus. 152 152 + Ridiculus dignissim tortor viverra posuere cras curabitur. 153 153 + </p> 154 154 + 155 155 + <br /> 156 156 + <hr /> 157 157 + <br /> 158 158 + 159 159 + <blockquote> 160 160 + This entire page was made with just dev.css and basic HTML. You can 161 161 + view the source 162 162 + <a href="https://tangled.org/devins.page/dev.css/blob/main/index.html" 163 163 + >here</a 164 164 + >. 165 165 + </blockquote> 166 166 + 167 167 + <br /> 168 168 + <hr /> 169 169 + <br /> 170 170 + 171 171 + <p> 172 172 + Lorem <mark>ipsum</mark> dolor sit amet 173 173 + <strong>consectetur</strong> adipisicing elit. Aut 174 174 + <i>harum molestias</i> labore amet possimus 175 175 + <s>exercitationem aperiam</s> earum, doloribus 176 176 + <u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae 177 177 + quisquam. <a href="#">Voluptatibus, officiis laudantium?</a> 178 178 + </p> 179 179 + 180 180 + <p> 181 181 + Lorem ipsum dolor sit amet consectetur adipisicing elit. 182 182 + <code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate 183 183 + odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga 184 184 + aspernatur, alias debitis eveniet totam minima vel. 185 185 + </p> 186 186 + 187 187 + <ul> 188 188 + <li>List item</li> 189 189 + <li>List item</li> 190 190 + <li>List item</li> 191 191 + <li>List item</li> 192 192 + </ul> 193 193 + 194 194 + <ol> 195 195 + <li>Step 1</li> 196 196 + <li>Step 2</li> 197 197 + <li>????</li> 198 198 + <li>Profit!</li> 199 199 + </ol> 200 200 + 201 201 + <dl> 202 202 + <dt>Web</dt> 203 203 + <dd>The part of the Internet that contains websites and web pages</dd> 204 204 + <dt>HTML</dt> 205 205 + <dd>A markup language for creating web pages</dd> 206 206 + <dt>CSS</dt> 207 207 + <dd>A technology to make HTML look better</dd> 208 208 + </dl> 209 209 + 210 210 + <blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden"> 211 211 + If you think privacy is unimportant for you because you have nothing 212 212 + to hide, you might as well say free speech is unimportant for you 213 213 + because you have nothing useful to say. 214 214 + <br /> 215 215 + <br /> 216 216 + – Edward Snowden 217 217 + </blockquote> 218 218 + 219 219 + <pre><code>&#x3C;!DOCTYPE html&#x3E; 220 220 + &#x3C;html&#x3E; 221 221 + &#x3C;head&#x3E; 222 222 + &#x3C;title&#x3E;Hello World&#x3C;/title&#x3E; 223 223 + &#x3C;/head&#x3E; 224 224 + &#x3C;body&#x3E; 225 225 + &#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#x3C;/p&#x3E; 226 226 + &#x3C;/body&#x3E; 227 227 + &#x3C;/html&#x3E;</code></pre> 228 228 + 229 229 + <br /> 230 230 + <hr /> 231 231 + <br /> 232 232 + 233 233 + <details> 234 234 + <summary>Click me!</summary> 235 235 + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 236 236 + </details> 237 237 + 238 238 + <br /> 239 239 + <hr /> 240 240 + <br /> 241 241 + 242 242 + <article> 243 243 + <h1>Article element</h1> 244 244 + <p>This is an article element by itself.</p> 245 245 + </article> 246 246 + 247 247 + <article> 248 248 + <h1>Article element</h1> 249 249 + <p>This is an article element with other nested elements.</p> 250 250 + <article> 251 251 + <h2>Article 1</h2> 252 252 + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 253 253 + </article> 254 254 + <article> 255 255 + <h2>Article 2</h2> 256 256 + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 257 257 + </article> 258 258 + <details> 259 259 + <summary>Click me!</summary> 260 260 + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 261 261 + </details> 262 262 + </article> 263 263 + 264 264 + <br /> 265 265 + <hr /> 266 266 + <br /> 267 267 + 268 268 + <table> 269 269 + <caption> 270 270 + Table caption 271 271 + </caption> 272 272 + <thead> 273 273 + <tr> 274 274 + <th>Meal</th> 275 275 + <th>Time</th> 276 276 + </tr> 277 277 + </thead> 278 278 + <tbody> 279 279 + <tr> 280 280 + <td>Breakfast</td> 281 281 + <td>5-10 AM</td> 282 282 + </tr> 283 283 + <tr> 284 284 + <td>Lunch</td> 285 285 + <td>12-2 PM</td> 286 286 + </tr> 287 287 + <tr> 288 288 + <td>Dinner</td> 289 289 + <td>6-9 PM</td> 290 290 + </tr> 291 291 + </tbody> 292 292 + </table> 293 293 + 294 294 + <br /> 295 295 + <hr /> 296 296 + <br /> 297 297 + 298 298 + <form> 299 299 + <p> 300 300 + <em> 301 301 + This is not a real form and does not submit or save any 302 302 + information. 303 303 + </em> 304 304 + </p> 305 305 + <p> 306 306 + <label>First name</label><br /> 307 307 + <input type="text" name="first_name" /> 308 308 + </p> 309 309 + <p> 310 310 + <label>Last name</label><br /> 311 311 + <input type="text" name="last_name" /> 312 312 + </p> 313 313 + <p> 314 314 + <label>Number</label><br /> 315 315 + <label> 316 316 + <input type="radio" name="radiooptions" value="1" /> 317 317 + 1 318 318 + </label> 319 319 + <br /> 320 320 + <label> 321 321 + <input type="radio" name="radiooptions" value="2" /> 322 322 + 2 323 323 + </label> 324 324 + <br /> 325 325 + <label> 326 326 + <input type="radio" name="radiooptions" value="3" /> 327 327 + 3 328 328 + </label> 329 329 + </p> 330 330 + <p> 331 331 + <label>Email</label><br /> 332 332 + <input type="email" name="email" required="" /> 333 333 + </p> 334 334 + <p> 335 335 + <label>Phone number</label><br /> 336 336 + <input type="tel" name="phone" /> 337 337 + </p> 338 338 + <p> 339 339 + <label>Password</label><br /> 340 340 + <input type="password" name="password" /> 341 341 + </p> 342 342 + <p> 343 343 + <label>Country</label><br /> 344 344 + <select> 345 345 + <option>United States</option> 346 346 + <option>China</option> 347 347 + <option>India</option> 348 348 + <option>Indonesia</option> 349 349 + <option>Brazil</option> 350 350 + </select> 351 351 + </p> 352 352 + <p> 353 353 + <label>Comments</label><br /> 354 354 + <textarea></textarea> 355 355 + </p> 356 356 + <p> 357 357 + <label> 358 358 + <input type="checkbox" value="terms" /> 359 359 + I agree to the <a>terms and conditions</a> 360 360 + </label> 361 361 + </p> 362 362 + <p> 363 363 + <button>Sign up</button> 364 364 + <button type="reset">Reset form</button> 365 365 + <button disabled="disabled">Disabled</button> 366 366 + </p> 367 367 + </form> 368 368 + 369 369 + <br /> 370 370 + <hr /> 371 371 + <br /> 372 372 + 373 373 + <figure> 374 374 + <img 375 375 + alt="Apple and walnut orchards after a night of snowfall in Sangla in the Kinnaur district of the northern Indian state of Himachal Pradesh." 376 376 + src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Orchards_in_snow%2C_Sangla%2C_Himachal_Pradesh%2C_India.jpg/1024px-Orchards_in_snow%2C_Sangla%2C_Himachal_Pradesh%2C_India.jpg?20250409065119" 377 377 + /> 378 378 + <figcaption> 379 379 + Photo by 380 380 + <a 381 381 + href="https://commons.wikimedia.org/wiki/File:Orchards_in_snow,_Sangla,_Himachal_Pradesh,_India.jpg" 382 382 + >UnpetitproleX</a 383 383 + >, 384 384 + <a href="https://creativecommons.org/licenses/by-sa/4.0" 385 385 + >CC BY-SA 4.0</a 386 386 + >, via Wikimedia Commons 387 387 + </figcaption> 388 388 + </figure> 389 389 + </section> 390 390 + </main> 391 391 + 392 392 + <footer> 393 393 + <p> 394 394 + dev.css and this website was written by 395 395 + <a href="https://devins.page">intergrav</a>. Inspired by 396 396 + <a href="https://github.com/xz/new.css">new.css</a>. 397 397 + </p> 398 398 + </footer> 399 399 + </body> 400 400 + </html>

+35 -15

package.json

··· 1 1 { 2 2 - "name": "@intergrav/dev.css", 3 3 - "version": "2.0.2", 4 4 - "description": "Extremely simple, small, classless CSS framework in the style of Vercel's Geist design system. Fork of xz/new.css.", 5 5 - "main": "dev.css", 6 6 - "repository": { 7 7 - "type": "git", 8 8 - "url": "git+https://github.com/intergrav/dev.css.git" 9 9 - }, 10 10 - "author": "intergrav (intergrav@proton.me)", 11 11 - "license": "MIT", 12 12 - "bugs": { 13 13 - "url": "https://github.com/intergrav/dev.css/issues" 14 14 - }, 15 15 - "homepage": "https://github.com/intergrav/dev.css#readme" 16 16 - } 2 2 + "name": "@intergrav/dev.css", 3 3 + "version": "4.4.0", 4 4 + "author": "intergrav <devin@devins.page> (https://devins.page)", 5 5 + "description": "Tiny, simple, classless CSS framework inspired by new.css.", 6 6 + "keywords": [ 7 7 + "css", 8 8 + "stylesheet", 9 9 + "framework", 10 10 + "classless", 11 11 + "minimal", 12 12 + "lightweight", 13 13 + "vercel", 14 14 + "geist", 15 15 + "open-source" 16 16 + ], 17 17 + "homepage": "https://devcss.devins.page", 18 18 + "bugs": { 19 19 + "url": "https://tangled.org/devins.page/dev.css/issues" 20 20 + }, 21 21 + "license": "MIT", 22 22 + "files": [ 23 23 + "theme", 24 24 + "addon", 25 25 + "badge.svg", 26 26 + "dev.css" 27 27 + ], 28 28 + "main": "dev.css", 29 29 + "repository": "https://tangled.org/devins.page/dev.css", 30 30 + "prettier": { 31 31 + "useTabs": true 32 32 + }, 33 33 + "devDependencies": { 34 34 + "prettier": "^3.8.1" 35 35 + } 36 36 + }

-19

theme/boilerplate.css

··· 1 1 - /* This theme is a template that you can modify */ 2 2 - 3 3 - :root { 4 4 - /* Fonts */ 5 5 - --dc-font-sans: sans-serif; /* Sans Serif */ 6 6 - --dc-font-mono: monospace; /* Monospace */ 7 7 - /* Colors */ 8 8 - --dc-tx-1: #000000; /* Primary text */ 9 9 - --dc-tx-2: #1a1a1a; /* Secondary text */ 10 10 - --dc-bg-1: #fafafa; /* Main background */ 11 11 - --dc-bg-2: #fff; /* Secondary background */ 12 12 - --dc-bg-3: #ebebeb; /* Outlines */ 13 13 - --dc-lk-1: #0068d6; /* Link text */ 14 14 - --dc-lkb-1: #0072f5; /* Link button background */ 15 15 - --dc-lkb-2: #0062d1; /* Link button background (hover) */ 16 16 - --dc-lkb-tx: #ededed; /* Link button text */ 17 17 - --dc-ac-1: #8e4ec6; /* Accent color */ 18 18 - --dc-ac-tx: #ededed; /* Accent color text */ 19 19 - }

+32

theme/boilerplate.user.css

··· 1 1 + /* ==userstyle== 2 2 + @name boilerplate for dev.css 3 3 + @description a template that you can modify. copied from dev.css defaults. removing lines will revert to the dev.css default, for example the font lines 4 4 + @namespace author 5 5 + @version 1.0.0 6 6 + @author author <author@example.com> (https://example.com) 7 7 + @homepageURL https://example.com 8 8 + @supportURL https://example.com/issues 9 9 + @license MIT 10 10 + ==/userstyle== */ 11 11 + 12 12 + :root { 13 13 + /* font families */ 14 14 + --dc-font: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; 15 15 + --dc-font-mono: 16 16 + "Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, 17 17 + Consolas, "DejaVu Sans Mono", monospace; 18 18 + 19 19 + /* light/dark colors */ 20 20 + --dc-cs: light dark; /* light/dark scrollbars, inputs, etc */ 21 21 + --dc-tx-1: light-dark(#171717, #ededed); /* primary text */ 22 22 + --dc-tx-2: light-dark(#666, #a1a1a1); /* secondary text */ 23 23 + --dc-bg-1: light-dark(#fff, #0a0a0a); /* primary background */ 24 24 + --dc-bg-2: light-dark(#fafafa, #000); /* secondary background */ 25 25 + --dc-bg-3: light-dark(#ebebeb, #2e2e2e); /* border */ 26 26 + --dc-lk-1: light-dark(#005ff2, #47a8ff); /* link text */ 27 27 + --dc-lkb-1: light-dark(#006bff, #006efe); /* link button */ 28 28 + --dc-lkb-2: light-dark(#0059ec, #005be7); /* link button hover */ 29 29 + --dc-lkb-tx: light-dark(#fff, #fff); /* text over link button */ 30 30 + --dc-ac-1: light-dark(#a000f8, #9440d5); /* accent color */ 31 31 + --dc-ac-tx: light-dark(#fff, #fff); /* text over accent color */ 32 32 + }

+26

theme/catppuccin-frappe.user.css

··· 1 1 + /* ==userstyle== 2 2 + @name catppuccin frappé and latte for dev.css 3 3 + @description dev.css theme based on catppuccin's frappé and latte colors - https://github.com/catppuccin 4 4 + @namespace intergrav 5 5 + @version 1.0.0 6 6 + @author intergrav <intergrav@proton.me> (https://devins.page) 7 7 + @homepageURL https://devcss.devins.page 8 8 + @supportURL https://tangled.org/devins.page/dev.css/issues 9 9 + @license MIT 10 10 + ==/userstyle== */ 11 11 + 12 12 + :root { 13 13 + /* colors - latte and frappé */ 14 14 + --dc-cs: light dark; /* light/dark scrollbars, inputs, etc */ 15 15 + --dc-tx-1: light-dark(#4c4f69, #c6d0f5); /* primary text | Text */ 16 16 + --dc-tx-2: light-dark(#4c4f69, #c6d0f5); /* secondary text | Text */ 17 17 + --dc-bg-1: light-dark(#eff1f5, #303446); /* primary background | Base */ 18 18 + --dc-bg-2: light-dark(#e6e9ef, #292c3c); /* secondary background | Mantle */ 19 19 + --dc-bg-3: light-dark(#ccd0da, #414559); /* border | Surface0 */ 20 20 + --dc-lk-1: light-dark(#1e66f5, #8caaee); /* link text | Blue */ 21 21 + --dc-lkb-1: light-dark(#bcc0cc, #51576d); /* link button | Surface1 */ 22 22 + --dc-lkb-2: light-dark(#ccd0da, #414559); /* link button hover | Surface0 */ 23 23 + --dc-lkb-tx: light-dark(#4c4f69, #c6d0f5); /* text over link button | Text */ 24 24 + --dc-ac-1: light-dark(#8839ef, #ca9ee6); /* accent color | Mauve */ 25 25 + --dc-ac-tx: light-dark(#eff1f5, #303446); /* text over accent color | Base */ 26 26 + }

+26

theme/catppuccin-macchiato.user.css

··· 1 1 + /* ==userstyle== 2 2 + @name catppuccin macchiato and latte for dev.css 3 3 + @description dev.css theme based on catppuccin's macchiato and latte colors - https://github.com/catppuccin 4 4 + @namespace intergrav 5 5 + @version 1.0.0 6 6 + @author intergrav <intergrav@proton.me> (https://devins.page) 7 7 + @homepageURL https://devcss.devins.page 8 8 + @supportURL https://tangled.org/devins.page/dev.css/issues 9 9 + @license MIT 10 10 + ==/userstyle== */ 11 11 + 12 12 + :root { 13 13 + /* colors - latte and macchiato */ 14 14 + --dc-cs: light dark; /* light/dark scrollbars, inputs, etc */ 15 15 + --dc-tx-1: light-dark(#4c4f69, #cad3f5); /* primary text | Text */ 16 16 + --dc-tx-2: light-dark(#4c4f69, #cad3f5); /* secondary text | Text */ 17 17 + --dc-bg-1: light-dark(#eff1f5, #24273a); /* primary background | Base */ 18 18 + --dc-bg-2: light-dark(#e6e9ef, #1e2030); /* secondary background | Mantle */ 19 19 + --dc-bg-3: light-dark(#ccd0da, #363a4f); /* border | Surface0 */ 20 20 + --dc-lk-1: light-dark(#1e66f5, #8aadf4); /* link text | Blue */ 21 21 + --dc-lkb-1: light-dark(#bcc0cc, #494d64); /* link button | Surface1 */ 22 22 + --dc-lkb-2: light-dark(#ccd0da, #363a4f); /* link button hover | Surface0 */ 23 23 + --dc-lkb-tx: light-dark(#4c4f69, #cad3f5); /* text over link button | Text */ 24 24 + --dc-ac-1: light-dark(#8839ef, #c6a0f6); /* accent color | Mauve */ 25 25 + --dc-ac-tx: light-dark(#eff1f5, #24273a); /* text over accent color | Base */ 26 26 + }

+26

theme/catppuccin-mocha.user.css

··· 1 1 + /* ==userstyle== 2 2 + @name catppuccin mocha and latte for dev.css 3 3 + @description dev.css theme based on catppuccin's mocha and latte colors - https://github.com/catppuccin 4 4 + @namespace intergrav 5 5 + @version 1.0.0 6 6 + @author intergrav <intergrav@proton.me> (https://devins.page) 7 7 + @homepageURL https://devcss.devins.page 8 8 + @supportURL https://tangled.org/devins.page/dev.css/issues 9 9 + @license MIT 10 10 + ==/userstyle== */ 11 11 + 12 12 + :root { 13 13 + /* colors - latte and mocha */ 14 14 + --dc-cs: light dark; /* light/dark scrollbars, inputs, etc */ 15 15 + --dc-tx-1: light-dark(#4c4f69, #cdd6f4); /* primary text | Text */ 16 16 + --dc-tx-2: light-dark(#4c4f69, #cdd6f4); /* secondary text | Text */ 17 17 + --dc-bg-1: light-dark(#eff1f5, #1e1e2e); /* primary background | Base */ 18 18 + --dc-bg-2: light-dark(#e6e9ef, #181825); /* secondary background | Mantle */ 19 19 + --dc-bg-3: light-dark(#ccd0da, #313244); /* border | Surface0 */ 20 20 + --dc-lk-1: light-dark(#1e66f5, #89b4fa); /* link text | Blue */ 21 21 + --dc-lkb-1: light-dark(#bcc0cc, #45475a); /* link button | Surface1 */ 22 22 + --dc-lkb-2: light-dark(#ccd0da, #313244); /* link button hover | Surface0 */ 23 23 + --dc-lkb-tx: light-dark(#4c4f69, #cdd6f4); /* text over link button | Text */ 24 24 + --dc-ac-1: light-dark(#8839ef, #cba6f7); /* accent color | Mauve */ 25 25 + --dc-ac-tx: light-dark(#eff1f5, #1e1e2e); /* text over accent color | Base */ 26 26 + }

+26

theme/day.user.css

··· 1 1 + /* ==userstyle== 2 2 + @name day for dev.css 3 3 + @description dev.css theme that makes it always light mode regardless of device setting 4 4 + @namespace intergrav 5 5 + @version 1.0.0 6 6 + @author intergrav <intergrav@proton.me> (https://devins.page) 7 7 + @homepageURL https://devcss.devins.page 8 8 + @supportURL https://tangled.org/devins.page/dev.css/issues 9 9 + @license MIT 10 10 + ==/userstyle== */ 11 11 + 12 12 + :root { 13 13 + /* colors */ 14 14 + --dc-cs: light; 15 15 + --dc-tx-1: #171717; 16 16 + --dc-tx-2: #666; 17 17 + --dc-bg-1: #fff; 18 18 + --dc-bg-2: #fafafa; 19 19 + --dc-bg-3: #ebebeb; 20 20 + --dc-lk-1: #005ff2; 21 21 + --dc-lkb-1: #006bff; 22 22 + --dc-lkb-2: #0059ec; 23 23 + --dc-lkb-tx: #fff; 24 24 + --dc-ac-1: #a000f8; 25 25 + --dc-ac-tx: #fff; 26 26 + }

-16

theme/night.css

··· 1 1 - /* This theme will make it always dark, regardless of device setting */ 2 2 - 3 3 - :root { 4 4 - /* Colors */ 5 5 - --dc-tx-1: #ededed; 6 6 - --dc-tx-2: #a1a1a1; 7 7 - --dc-bg-1: #000; 8 8 - --dc-bg-2: #ffffff0f; 9 9 - --dc-bg-3: #ffffff24; 10 10 - --dc-lk-1: #52a8ff; 11 11 - --dc-lkb-1: #0072f5; 12 12 - --dc-lkb-2: #0062d1; 13 13 - --dc-lkb-tx: #ededed; 14 14 - --dc-ac-1: #8e4ec6; 15 15 - --dc-ac-tx: #ededed; 16 16 - }

+26

theme/night.user.css

··· 1 1 + /* ==userstyle== 2 2 + @name night for dev.css 3 3 + @description dev.css theme that makes it always dark mode regardless of device setting 4 4 + @namespace intergrav 5 5 + @version 1.0.0 6 6 + @author intergrav <intergrav@proton.me> (https://devins.page) 7 7 + @homepageURL https://devcss.devins.page 8 8 + @supportURL https://tangled.org/devins.page/dev.css/issues 9 9 + @license MIT 10 10 + ==/userstyle== */ 11 11 + 12 12 + :root { 13 13 + /* colors */ 14 14 + --dc-cs: dark; 15 15 + --dc-tx-1: #ededed; 16 16 + --dc-tx-2: #a1a1a1; 17 17 + --dc-bg-1: #0a0a0a; 18 18 + --dc-bg-2: #000; 19 19 + --dc-bg-3: #2e2e2e; 20 20 + --dc-lk-1: #47a8ff; 21 21 + --dc-lkb-1: #006efe; 22 22 + --dc-lkb-2: #005be7; 23 23 + --dc-lkb-tx: #fff; 24 24 + --dc-ac-1: #9440d5; 25 25 + --dc-ac-tx: #fff; 26 26 + }

-21

theme/terminal.css

··· 1 1 - /* This theme has a similar look to a computer terminal */ 2 2 - 3 3 - @import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css"); 4 4 - 5 5 - :root { 6 6 - /* Fonts */ 7 7 - --dc-font-sans: "Geist Mono", monospace; 8 8 - --dc-font-mono: "Geist Mono", monospace; 9 9 - /* Colors */ 10 10 - --dc-tx-1: #ffffff; 11 11 - --dc-tx-2: #eeeeee; 12 12 - --dc-bg-1: #000000; 13 13 - --dc-bg-2: #002700; 14 14 - --dc-bg-3: #005800; 15 15 - --dc-lk-1: #00ff00; 16 16 - --dc-lkb-1: #00ff00; 17 17 - --dc-lkb-2: #00d400; 18 18 - --dc-lkb-tx: #000000; 19 19 - --dc-ac-1: #00ff00; 20 20 - --dc-ac-tx: #000000; 21 21 - }

+29

theme/terminal.user.css

··· 1 1 + /* ==userstyle== 2 2 + @name terminal for dev.css 3 3 + @description dev.css theme that has a similar look to a computer terminal 4 4 + @namespace intergrav 5 5 + @version 1.0.0 6 6 + @author intergrav <intergrav@proton.me> (https://devins.page) 7 7 + @homepageURL https://devcss.devins.page 8 8 + @supportURL https://tangled.org/devins.page/dev.css/issues 9 9 + @license MIT 10 10 + ==/userstyle== */ 11 11 + 12 12 + :root { 13 13 + /* font families */ 14 14 + --dc-font: var(--dc-font-mono); 15 15 + 16 16 + /* colors */ 17 17 + --dc-cs: dark; 18 18 + --dc-tx-1: #ffffff; 19 19 + --dc-tx-2: #eeeeee; 20 20 + --dc-bg-1: #001a00; 21 21 + --dc-bg-2: #000; 22 22 + --dc-bg-3: #005800; 23 23 + --dc-lk-1: #00ff00; 24 24 + --dc-lkb-1: #00ff00; 25 25 + --dc-lkb-2: #00d400; 26 26 + --dc-lkb-tx: #000; 27 27 + --dc-ac-1: #00ff00; 28 28 + --dc-ac-tx: #000; 29 29 + }