-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

.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"

+180 -31

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://github.com/intergrav/dev.css) 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 - Tiny, simple, classless CSS framework inspired by Vercel's [Geist](https://vercel.com/geist) design system. It is designed to make any plain HTML file look clean and modern. The minified stylesheet weighs only **~4.8kb** and includes both light and dark themes. 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. 6 8 7 9 <details> 8 10 <summary>Click to view preview</summary> 9 9 - <img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-light.png" alt="dev.css desktop demo, light mode"> 10 10 - <img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-dark.png" alt="dev.css desktop demo, dark mode"> 11 11 - <img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-light.png" alt="dev.css mobile demo, dark mode"> 12 12 - <img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-dark.png" alt="dev.css mobile demo, dark mode"> 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"> 13 15 </details> 14 16 15 15 - ## Importing 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 25 25 + 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: 29 29 + 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 + ``` 37 37 + 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> 39 39 + 40 40 + ## Installing 41 41 + 42 42 + ### HTML import 16 43 17 44 To use dev.css in your HTML, simply add the following line to the `<head>` section of your HTML file: 18 45 19 46 ```html 20 20 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3"> 47 47 + <link 48 48 + rel="stylesheet" 49 49 + href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4" 50 50 + /> 21 51 ``` 22 52 23 23 - You can also add a font from [intergrav/fonts](https://github.com/intergrav/fonts#readme) to improve the experience, however it will increase the website download size. 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. 53 53 + ### `npm`, `pnpm`, etc 24 54 25 25 - ## Elements 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 26 68 27 69 dev.css takes advantage of semantic HTML elements. Here are some guidelines on how to use them for the best results. 28 70 29 71 ### Header 30 72 31 31 - Use the `<header>` tag to create a large header for your page. Place it at the very top of your `<body>`. For the title, use an `<h1>` tag. You can also add an optional `<h4>` tag before the `<h1>` tag to provide extra information. 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: 76 76 + 77 77 + ```html 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> 90 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 + 96 96 + ```html 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> 104 104 + ``` 105 105 + 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: 111 111 + 112 112 + ```html 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> 117 117 + ``` 32 118 33 33 - If you need a navigation bar, add a `<nav>` element with a `<ul>` that contains `<li>` items with `<a>` links. dev.css will automatically lay out the navigation items horizontally, with dividing bullet points between them. If you are using the `header-sidebar.css` addon, the navigation items will be laid out vertically when in sidebar mode. 119 119 + ### Sidebar 34 120 35 35 - Optionally, you can add a `<p>` tag after the `<h1>` tag to provide a description of the current page. 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: 122 122 + 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 + ``` 36 146 37 147 ### Footer 38 148 39 39 - Optionally, use the `<footer>` tag to create a footer for your page. Place it at the bottom of your `<body>`. You can add any content you like inside the footer. 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. 150 150 + 151 151 + ### Final Structure 152 152 + 153 153 + In the end, this is what your page structure should look like if you decide to add everything: 154 154 + 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 + ``` 40 168 41 169 ### Text 42 170 ··· 71 199 72 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. 73 201 74 74 - ### `header-sticky.css` 202 202 + ### `header-oneline.css` 75 203 76 76 - 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. To use this addon, add the following line after the `dev.css` import: 204 204 + This addon makes the header much more compact on narrow viewports. To use, add the following line after the `dev.css` import: 77 205 78 206 ```html 79 79 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css"> 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 + /> 80 211 ``` 81 212 82 82 - ### `header-oneline.css` 213 213 + ### `header-sticky.css` 83 214 84 84 - This addon lays everything out in the header horizontally. This is ideal if you don't have much in your header and you want it to be more compact. It works great with `header-sticky.css`. I do not recommend adding `<p>` or more than one `<nav>` element in the header if you're using this. To use this addon, add the following line after the `dev.css` import: 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: 85 216 86 217 ```html 87 87 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-oneline.min.css"> 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 + /> 88 222 ``` 89 223 90 90 - ### `header-sidebar.css` 224 224 + ### `scroll-to-top.js` 91 225 92 92 - This addon turns the header into a sidebar on wide displays. The navigation items are listed vertically in this mode. The sidebar will responsively switch back to the default state if the viewport is too narrow to contain everything. If you are using this addon with `header-sticky.css` or `header-oneline.css`, make sure to import it **after** those. To use this addon, add the following line after the `dev.css` import: 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: 93 227 94 228 ```html 95 95 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css"> 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> 96 233 ``` 97 234 98 98 - ### `scroll-to-top.js` 235 235 + ### `responsive-sidebar.js` 99 236 100 100 - 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: 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: 101 238 102 239 ```html 103 103 - <script src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/scroll-to-top.min.js" defer></script> 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> 104 244 ``` 105 245 106 246 ## Themes 107 247 108 108 - 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 themes inspired by terminals, night and day themes, and a set of Catppuccin themes. For example, to apply the terminal theme, add the following line after the `dev.css` import: 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: 109 249 110 250 ```html 111 111 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/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 + /> 112 255 ``` 113 256 114 114 - If you are creating a custom theme, it is recommended to use the `boilerplate-auto.css` template for better accessibility. 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. 115 262 116 263 ## Credits 117 264 118 118 - - [xz/new.css](https://github.com/xz/new.css) is the main inspiration for this project 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

+13 -42

addon/header-oneline.css

··· 1 1 - /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 2 - /* about: everything in the header on one line, works well with addon/header-sticky.css */ 3 3 - /* warn: if using with the header-sidebar addon, be sure to include this before it */ 4 4 - /* warn: i do not recommend using this if you have p or multiple nav elements in header */ 5 5 - 6 6 - header { 7 7 - align-items: center; 8 8 - display: flex; 9 9 - } 10 10 - 11 11 - header h1, 12 12 - header h2, 13 13 - header h3, 14 14 - header h4, 15 15 - header h5, 16 16 - header h6 { 17 17 - white-space: nowrap; 18 18 - } 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 */ 19 4 20 5 header * { 6 6 + font-size: 1rem; 7 7 + line-height: 1; 21 8 margin: 0; 22 22 - line-height: 1.5; 9 9 + padding: 0; 10 10 + margin-bottom: 0 !important; 23 11 } 24 12 25 25 - header h1, 26 26 - header p { 27 27 - margin-right: 1rem; 13 13 + header { 14 14 + display: flex; 15 15 + gap: 1rem; 16 16 + padding: 0.75rem calc(50vw - 50%); 28 17 } 29 18 30 30 - header h2, 31 31 - header h3, 32 32 - header h4, 33 33 - header h5, 34 34 - header h6 { 35 35 - color: var(--dc-tx-2); 36 36 - font-weight: normal; 37 37 - } 38 38 - 39 39 - header h2::after, 40 40 - header h3::after, 41 41 - header h4::after, 42 42 - header h5::after, 43 43 - header h6::after { 44 44 - content: "/"; 45 45 - } 46 46 - 47 47 - /* make sure that all header elements have same font size */ 48 48 - header * { 49 49 - font-size: 1rem !important; 19 19 + header > *:not(img, h1, h2, h3, h4, h5, h6, nav, button) { 20 20 + display: none; 50 21 }

-98

addon/header-sidebar.css

··· 1 1 - /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 2 - /* about: turns the header into a sidebar if the viewport is wide enough */ 3 3 - /* warn: if using with the header-sticky or header-oneline addon, be sure to include this after it */ 4 4 - 5 5 - @media (min-width: 84rem) { 6 6 - header { 7 7 - all: unset; 8 8 - } 9 9 - 10 10 - header * { 11 11 - margin-top: 0; 12 12 - margin-bottom: 0.25rem; 13 13 - } 14 14 - 15 15 - header { 16 16 - padding: 3rem 2rem; 17 17 - padding-right: 0; 18 18 - position: fixed; 19 19 - top: 0; 20 20 - left: calc(50% - ((48rem + 4rem) / 2) - (16rem)); 21 21 - width: 16rem; 22 22 - height: calc(100% - 6rem); 23 23 - overflow-y: auto; 24 24 - } 25 25 - 26 26 - header nav ul { 27 27 - padding-left: 1rem; 28 28 - border-top: 1px solid var(--dc-bg-3); 29 29 - padding-top: 1rem; 30 30 - margin-top: 0.75rem; 31 31 - } 32 32 - 33 33 - header nav ul li { 34 34 - display: list-item; 35 35 - } 36 36 - 37 37 - header nav ul li:not(:first-child)::before { 38 38 - content: unset; 39 39 - } 40 40 - 41 41 - /* hacky: reset font sizes to defaults */ 42 42 - h1 { 43 43 - font-size: 2rem !important; 44 44 - } 45 45 - 46 46 - h2 { 47 47 - font-size: 1.5rem !important; 48 48 - } 49 49 - 50 50 - h3 { 51 51 - font-size: 1.17rem !important; 52 52 - } 53 53 - 54 54 - h4, 55 55 - p, 56 56 - a { 57 57 - font-size: 1rem !important; 58 58 - } 59 59 - 60 60 - h5 { 61 61 - font-size: 0.83rem !important; 62 62 - } 63 63 - 64 64 - h6 { 65 65 - font-size: 0.67rem !important; 66 66 - } 67 67 - 68 68 - header nav { 69 69 - font-size: 1rem !important; 70 70 - } 71 71 - 72 72 - /* hacky: reset some other stuff to default incase you are using header-oneline.css */ 73 73 - header h2 header h3, 74 74 - header h4, 75 75 - header h5, 76 76 - header h6 { 77 77 - color: var(--dc-tx-1); 78 78 - font-weight: bold; 79 79 - } 80 80 - 81 81 - header h1, 82 82 - header h2, 83 83 - header h3, 84 84 - header h4, 85 85 - header h5, 86 86 - header h6 { 87 87 - white-space: normal; 88 88 - line-height: 1; 89 89 - } 90 90 - 91 91 - header h2::after, 92 92 - header h3::after, 93 93 - header h4::after, 94 94 - header h5::after, 95 95 - header h6::after { 96 96 - content: unset; 97 97 - } 98 98 - }

+16 -7

addon/header-sticky.css

··· 1 1 - /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 2 - /* about: makes the header sticky, always at the top of the screen */ 3 3 - /* warn: if using with the header-sidebar addon, be sure to include this before it */ 4 4 - /* warn: i do not recommend using this if your header is large. may affect usability */ 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 */ 5 4 6 6 - header { 7 7 - position: sticky; 8 8 - top: 0; 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 + } 9 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));

+2 -1

addon/scroll-to-top.js

··· 1 1 - /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 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"); ··· 12 12 right: "1rem", 13 13 width: "2.5rem", 14 14 height: "2.5rem", 15 15 + "border-radius": "1.25rem", 15 16 }); 16 17 document.body.appendChild(scrollToTopButton); 17 18

+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 + }

-292

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

+201 -213

dev.css

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

+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>

+11 -7

package.json

··· 1 1 { 2 2 "name": "@intergrav/dev.css", 3 3 - "version": "3.5.0", 4 4 - "description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system", 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.", 5 6 "keywords": [ 6 7 "css", 7 8 "stylesheet", ··· 13 14 "geist", 14 15 "open-source" 15 16 ], 16 16 - "homepage": "https://github.com/intergrav/dev.css#readme", 17 17 + "homepage": "https://devcss.devins.page", 17 18 "bugs": { 18 18 - "url": "https://github.com/intergrav/dev.css/issues" 19 19 + "url": "https://tangled.org/devins.page/dev.css/issues" 19 20 }, 20 21 "license": "MIT", 21 21 - "author": "intergrav <intergrav@proton.me> (https://intergrav.xyz)", 22 22 "files": [ 23 23 "theme", 24 24 "addon", 25 25 - "demo.html" 25 25 + "badge.svg", 26 26 + "dev.css" 26 27 ], 27 28 "main": "dev.css", 28 28 - "repository": "github:intergrav/dev.css", 29 29 + "repository": "https://tangled.org/devins.page/dev.css", 29 30 "prettier": { 30 31 "useTabs": true 32 32 + }, 33 33 + "devDependencies": { 34 34 + "prettier": "^3.8.1" 31 35 } 32 36 }

-54

theme/boilerplate-auto.css

··· 1 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 2 - /* about: a template that you can modify, but with an automatic light/dark mode */ 3 3 - /* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */ 4 4 - 5 5 - :root { 6 6 - /* font families */ 7 7 - --dc-font-sans: sans-serif; /* sans serif */ 8 8 - --dc-font-mono: monospace; /* monospace */ 9 9 - 10 10 - /* light colors */ 11 11 - --dc-cs: light; /* light/dark scrollbars, inputs, etc */ 12 12 - --dc-tx-1: #000000; /* primary text */ 13 13 - --dc-tx-2: #1a1a1a; /* secondary text */ 14 14 - --dc-bg-1: #fafafa; /* main background */ 15 15 - --dc-bg-2: #fff; /* secondary background */ 16 16 - --dc-bg-3: #ebebeb; /* outlines */ 17 17 - --dc-lk-1: #0068d6; /* link text */ 18 18 - --dc-lkb-1: #0072f5; /* link button background */ 19 19 - --dc-lkb-2: #0062d1; /* link button background (hover) */ 20 20 - --dc-lkb-tx: #ededed; /* link button text */ 21 21 - --dc-ac-1: #8e4ec6; /* accent color */ 22 22 - --dc-ac-tx: #ededed; /* accent color text */ 23 23 - 24 24 - /* dark colors */ 25 25 - --dc-d-cs: dark; 26 26 - --dc-d-tx-1: #ededed; 27 27 - --dc-d-tx-2: #a1a1a1; 28 28 - --dc-d-bg-1: #000; 29 29 - --dc-d-bg-2: #0a0a0a; 30 30 - --dc-d-bg-3: #2e2e2e; 31 31 - --dc-d-lk-1: #52a8ff; 32 32 - --dc-d-lkb-1: #0072f5; 33 33 - --dc-d-lkb-2: #0062d1; 34 34 - --dc-d-lkb-tx: #ededed; 35 35 - --dc-d-ac-1: #8e4ec6; 36 36 - --dc-d-ac-tx: #ededed; 37 37 - } 38 38 - 39 39 - @media (prefers-color-scheme: dark) { 40 40 - :root { 41 41 - --dc-cs: var(--dc-d-cs); 42 42 - --dc-tx-1: var(--dc-d-tx-1); 43 43 - --dc-tx-2: var(--dc-d-tx-2); 44 44 - --dc-bg-1: var(--dc-d-bg-1); 45 45 - --dc-bg-2: var(--dc-d-bg-2); 46 46 - --dc-bg-3: var(--dc-d-bg-3); 47 47 - --dc-lk-1: var(--dc-d-lk-1); 48 48 - --dc-lkb-1: var(--dc-d-lkb-1); 49 49 - --dc-lkb-2: var(--dc-d-lkb-2); 50 50 - --dc-lkb-tx: var(--dc-d-lkb-tx); 51 51 - --dc-ac-1: var(--dc-d-ac-1); 52 52 - --dc-ac-tx: var(--dc-d-ac-tx); 53 53 - } 54 54 - }

-23

theme/boilerplate.css

··· 1 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 2 - /* about: a template that you can modify */ 3 3 - /* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */ 4 4 - 5 5 - :root { 6 6 - /* font families */ 7 7 - --dc-font-sans: sans-serif; /* sans serif */ 8 8 - --dc-font-mono: monospace; /* monospace */ 9 9 - 10 10 - /* colors */ 11 11 - --dc-cs: light; /* light/dark scrollbars, inputs, etc */ 12 12 - --dc-tx-1: #000000; /* primary text */ 13 13 - --dc-tx-2: #1a1a1a; /* secondary text */ 14 14 - --dc-bg-1: #fafafa; /* main background */ 15 15 - --dc-bg-2: #fff; /* secondary background */ 16 16 - --dc-bg-3: #ebebeb; /* outlines */ 17 17 - --dc-lk-1: #0068d6; /* link text */ 18 18 - --dc-lkb-1: #0072f5; /* link button background */ 19 19 - --dc-lkb-2: #0062d1; /* link button background (hover) */ 20 20 - --dc-lkb-tx: #ededed; /* link button text */ 21 21 - --dc-ac-1: #8e4ec6; /* accent color */ 22 22 - --dc-ac-tx: #ededed; /* accent color text */ 23 23 - }

+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 + }

-50

theme/catppuccin-frappe.css

··· 1 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 2 - /* about: catppuccin's frappé color scheme - https://github.com/catppuccin */ 3 3 - /* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */ 4 4 - 5 5 - :root { 6 6 - /* light colors - latte */ 7 7 - --dc-cs: light; 8 8 - --dc-tx-1: #4c4f69; /* primary text | Text */ 9 9 - --dc-tx-2: #4c4f69; /* secondary text | Text */ 10 10 - --dc-bg-1: #e6e9ef; /* main background | Mantle */ 11 11 - --dc-bg-2: #eff1f5; /* secondary background | Base */ 12 12 - --dc-bg-3: #ccd0da; /* outlines | Surface0 */ 13 13 - --dc-lk-1: #1e66f5; /* link text | Blue */ 14 14 - --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */ 15 15 - --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */ 16 16 - --dc-lkb-tx: #4c4f69; /* link button text | Text */ 17 17 - --dc-ac-1: #8839ef; /* accent color | Mauve */ 18 18 - --dc-ac-tx: #eff1f5; /* accent color text | Base */ 19 19 - 20 20 - /* dark colors */ 21 21 - --dc-d-cs: dark; 22 22 - --dc-d-tx-1: #c6d0f5; /* primary text | Text */ 23 23 - --dc-d-tx-2: #c6d0f5; /* secondary text | Text */ 24 24 - --dc-d-bg-1: #292c3c; /* main background | Mantle */ 25 25 - --dc-d-bg-2: #303446; /* secondary background | Base */ 26 26 - --dc-d-bg-3: #414559; /* outlines | Surface0 */ 27 27 - --dc-d-lk-1: #8caaee; /* link text | Blue */ 28 28 - --dc-d-lkb-1: #51576d; /* link button background | Surface1 */ 29 29 - --dc-d-lkb-2: #414559; /* link button background (hover) | Surface0 */ 30 30 - --dc-d-lkb-tx: #c6d0f5; /* link button text | Text */ 31 31 - --dc-d-ac-1: #ca9ee6; /* accent color | Mauve */ 32 32 - --dc-d-ac-tx: #303446; /* accent color text | Base */ 33 33 - } 34 34 - 35 35 - @media (prefers-color-scheme: dark) { 36 36 - :root { 37 37 - --dc-cs: var(--dc-d-cs); 38 38 - --dc-tx-1: var(--dc-d-tx-1); 39 39 - --dc-tx-2: var(--dc-d-tx-2); 40 40 - --dc-bg-1: var(--dc-d-bg-1); 41 41 - --dc-bg-2: var(--dc-d-bg-2); 42 42 - --dc-bg-3: var(--dc-d-bg-3); 43 43 - --dc-lk-1: var(--dc-d-lk-1); 44 44 - --dc-lkb-1: var(--dc-d-lkb-1); 45 45 - --dc-lkb-2: var(--dc-d-lkb-2); 46 46 - --dc-lkb-tx: var(--dc-d-lkb-tx); 47 47 - --dc-ac-1: var(--dc-d-ac-1); 48 48 - --dc-ac-tx: var(--dc-d-ac-tx); 49 49 - } 50 50 - }

+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 + }

-50

theme/catppuccin-macchiato.css

··· 1 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 2 - /* about: catppuccin's macchiato color scheme - https://github.com/catppuccin */ 3 3 - /* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */ 4 4 - 5 5 - :root { 6 6 - /* light colors - latte */ 7 7 - --dc-cs: light; 8 8 - --dc-tx-1: #4c4f69; /* primary text | Text */ 9 9 - --dc-tx-2: #4c4f69; /* secondary text | Text */ 10 10 - --dc-bg-1: #e6e9ef; /* main background | Mantle */ 11 11 - --dc-bg-2: #eff1f5; /* secondary background | Base */ 12 12 - --dc-bg-3: #ccd0da; /* outlines | Surface0 */ 13 13 - --dc-lk-1: #1e66f5; /* link text | Blue */ 14 14 - --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */ 15 15 - --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */ 16 16 - --dc-lkb-tx: #4c4f69; /* link button text | Text */ 17 17 - --dc-ac-1: #8839ef; /* accent color | Mauve */ 18 18 - --dc-ac-tx: #eff1f5; /* accent color text | Base */ 19 19 - 20 20 - /* dark colors */ 21 21 - --dc-d-cs: dark; 22 22 - --dc-d-tx-1: #cad3f5; /* primary text | Text */ 23 23 - --dc-d-tx-2: #cad3f5; /* secondary text | Text */ 24 24 - --dc-d-bg-1: #1e2030; /* main background | Mantle */ 25 25 - --dc-d-bg-2: #24273a; /* secondary background | Base */ 26 26 - --dc-d-bg-3: #363a4f; /* outlines | Surface0 */ 27 27 - --dc-d-lk-1: #8aadf4; /* link text | Blue */ 28 28 - --dc-d-lkb-1: #494d64; /* link button background | Surface1 */ 29 29 - --dc-d-lkb-2: #363a4f; /* link button background (hover) | Surface0 */ 30 30 - --dc-d-lkb-tx: #cad3f5; /* link button text | Text */ 31 31 - --dc-d-ac-1: #c6a0f6; /* accent color | Mauve */ 32 32 - --dc-d-ac-tx: #24273a; /* accent color text | Base */ 33 33 - } 34 34 - 35 35 - @media (prefers-color-scheme: dark) { 36 36 - :root { 37 37 - --dc-cs: var(--dc-d-cs); 38 38 - --dc-tx-1: var(--dc-d-tx-1); 39 39 - --dc-tx-2: var(--dc-d-tx-2); 40 40 - --dc-bg-1: var(--dc-d-bg-1); 41 41 - --dc-bg-2: var(--dc-d-bg-2); 42 42 - --dc-bg-3: var(--dc-d-bg-3); 43 43 - --dc-lk-1: var(--dc-d-lk-1); 44 44 - --dc-lkb-1: var(--dc-d-lkb-1); 45 45 - --dc-lkb-2: var(--dc-d-lkb-2); 46 46 - --dc-lkb-tx: var(--dc-d-lkb-tx); 47 47 - --dc-ac-1: var(--dc-d-ac-1); 48 48 - --dc-ac-tx: var(--dc-d-ac-tx); 49 49 - } 50 50 - }

+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 + }

-50

theme/catppuccin-mocha.css

··· 1 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 2 - /* about: catppuccin's mocha color scheme - https://github.com/catppuccin */ 3 3 - /* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */ 4 4 - 5 5 - :root { 6 6 - /* light colors - latte */ 7 7 - --dc-cs: light; 8 8 - --dc-tx-1: #4c4f69; /* primary text | Text */ 9 9 - --dc-tx-2: #4c4f69; /* secondary text | Text */ 10 10 - --dc-bg-1: #e6e9ef; /* main background | Mantle */ 11 11 - --dc-bg-2: #eff1f5; /* secondary background | Base */ 12 12 - --dc-bg-3: #ccd0da; /* outlines | Surface0 */ 13 13 - --dc-lk-1: #1e66f5; /* link text | Blue */ 14 14 - --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */ 15 15 - --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */ 16 16 - --dc-lkb-tx: #4c4f69; /* link button text | Text */ 17 17 - --dc-ac-1: #8839ef; /* accent color | Mauve */ 18 18 - --dc-ac-tx: #eff1f5; /* accent color text | Base */ 19 19 - 20 20 - /* dark colors */ 21 21 - --dc-d-cs: dark; 22 22 - --dc-d-tx-1: #cdd6f4; /* primary text | Text */ 23 23 - --dc-d-tx-2: #cdd6f4; /* secondary text | Text */ 24 24 - --dc-d-bg-1: #181825; /* main background | Mantle */ 25 25 - --dc-d-bg-2: #1e1e2e; /* secondary background | Base */ 26 26 - --dc-d-bg-3: #313244; /* outlines | Surface0 */ 27 27 - --dc-d-lk-1: #89b4fa; /* link text | Blue */ 28 28 - --dc-d-lkb-1: #45475a; /* link button background | Surface1 */ 29 29 - --dc-d-lkb-2: #313244; /* link button background (hover) | Surface0 */ 30 30 - --dc-d-lkb-tx: #cdd6f4; /* link button text | Text */ 31 31 - --dc-d-ac-1: #cba6f7; /* accent color | Mauve */ 32 32 - --dc-d-ac-tx: #1e1e2e; /* accent color text | Base */ 33 33 - } 34 34 - 35 35 - @media (prefers-color-scheme: dark) { 36 36 - :root { 37 37 - --dc-cs: var(--dc-d-cs); 38 38 - --dc-tx-1: var(--dc-d-tx-1); 39 39 - --dc-tx-2: var(--dc-d-tx-2); 40 40 - --dc-bg-1: var(--dc-d-bg-1); 41 41 - --dc-bg-2: var(--dc-d-bg-2); 42 42 - --dc-bg-3: var(--dc-d-bg-3); 43 43 - --dc-lk-1: var(--dc-d-lk-1); 44 44 - --dc-lkb-1: var(--dc-d-lkb-1); 45 45 - --dc-lkb-2: var(--dc-d-lkb-2); 46 46 - --dc-lkb-tx: var(--dc-d-lkb-tx); 47 47 - --dc-ac-1: var(--dc-d-ac-1); 48 48 - --dc-ac-tx: var(--dc-d-ac-tx); 49 49 - } 50 50 - }

+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 + }

-18

theme/day.css

··· 1 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 2 - /* about: makes it always light, regardless of device setting */ 3 3 - 4 4 - :root { 5 5 - /* colors */ 6 6 - --dc-cs: light; 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 - }

+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 + }

-18

theme/night.css

··· 1 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 2 - /* about: makes it always dark, regardless of device setting */ 3 3 - 4 4 - :root { 5 5 - /* colors */ 6 6 - --dc-cs: dark; 7 7 - --dc-tx-1: #ededed; 8 8 - --dc-tx-2: #a1a1a1; 9 9 - --dc-bg-1: #000; 10 10 - --dc-bg-2: #ffffff0f; 11 11 - --dc-bg-3: #ffffff24; 12 12 - --dc-lk-1: #52a8ff; 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 - }

+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 + }

-24

theme/terminal.css

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

+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 + }