tiny, simple, classless CSS framework inspired by new.css devcss.devins.page
framework lightweight css classless stylesheet

feat: dev.css v4 redesign

still a work-in-progress, current changes include
- major redesign and cleanup
- themes now work as userstyles so you can add them to your manager to override any dev.css site's theme
- improved readme

to do:
- finish dev.css-docs and move demo to that site
- update dev.css preview images

+1014 -830
.github/static/header-breadcrumb.png

This is a binary file and will not be displayed.

.github/static/header-traditional.png

This is a binary file and will not be displayed.

+130 -26
README.md
··· 2 2 3 3 [![NPM Version](https://img.shields.io/npm/v/@intergrav/dev.css)](https://www.npmjs.com/package/@intergrav/dev.css) [![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/@intergrav/dev.css)](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [![Discord](https://img.shields.io/discord/1262738186338308126?logo=discord&logoColor=%23fff&color=%235865F2)](https://discord.gg/m5tUgaM3uK) [![GitHub Repo stars](https://img.shields.io/github/stars/intergrav/dev.css)](https://github.com/intergrav/dev.css) 4 4 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 + dev.css is a 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 **~5.9kb** and includes both light and dark themes. 6 6 7 7 <details> 8 8 <summary>Click to view preview</summary> ··· 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"> 13 13 </details> 14 14 15 + ## Who is this for? 16 + 17 + dev.css is a great choice for: 18 + 19 + - A simple blog 20 + - A simple "about me" website 21 + - Collecting your most used links 22 + - Prototyping your raw HTML 23 + 24 + dev.css was not meant for very complex websites. 25 + 26 + An example of a site that uses dev.css is [SkywardMC's wiki](https://skywardmc.org). 27 + 15 28 ## Importing 16 29 17 30 To use dev.css in your HTML, simply add the following line to the `<head>` section of your HTML file: 18 31 19 32 ```html 20 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3"> 33 + <link 34 + rel="stylesheet" 35 + href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4" 36 + /> 21 37 ``` 22 38 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. 39 + You can also load a font from [intergrav/fonts](https://github.com/intergrav/fonts#readme) (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. 24 40 25 - ## Elements 41 + ## Elements and Structure 26 42 27 43 dev.css takes advantage of semantic HTML elements. Here are some guidelines on how to use them for the best results. 28 44 29 45 ### Header 30 46 31 - Use the `<header>` tag to create a large header for your page. Place it at the very top of your `<body>`. You can use an `<h1>` tag for your website title, and another `<h1>` tag outside of the header for the page title. 47 + 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. 32 48 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. 49 + If you want to add a traditional navigation element, you should lay out your `<nav>` element like this: 34 50 35 - Optionally, you can add a `<p>` tag after the `<h1>` tag to provide a description of the current page. 51 + ```html 52 + <header> 53 + <h1>Website Title</h1> 54 + <p>An optional description of the website.</p> 55 + <nav> 56 + <ul> 57 + <li><a href="https://example.com">Demo</a></li> 58 + <li><a href="https://example.com">GitHub</a></li> 59 + <li><a href="https://example.com">npm</a></li> 60 + <li><a href="https://example.com">jsDelivr</a></li> 61 + </ul> 62 + </nav> 63 + </header> 64 + ``` 65 + 66 + ![Example of a header using traditional navigation](.github/static/header-traditional.png) 67 + 68 + 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>`. 69 + 70 + ```html 71 + <header> 72 + <nav> 73 + <a href="../..">dev.css</a> / <a href="..">Blog</a> / Making a Website 74 + </nav> 75 + <h1>Making a Website</h1> 76 + <p>Making a basic website with dev.css.</p> 77 + </header> 78 + ``` 79 + 80 + ![Example of a header using breadcrumb navigation](.github/static/header-breadcrumb.png) 81 + 82 + ### Main 83 + 84 + 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: 85 + 86 + ```html 87 + <main> 88 + <h1>Page 1</h1> 89 + <p>Welcome to my website's first page! This is an example.</p> 90 + </main> 91 + ``` 92 + 93 + ### Sidebar 94 + 95 + 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 header, place an `<aside>` tag. You must put it above the `<main>` content. Here's an example: 96 + 97 + ```html 98 + <aside> 99 + <h1>Sidebar</h1> 100 + <nav> 101 + <ul> 102 + <li><a href="https://example.com">Page 1</a></li> 103 + <li> 104 + <a href="https://example.com">Page 2</a> 105 + <ul> 106 + <li><a href="https://example.com">Page 2.1</a></li> 107 + <li><a href="https://example.com">Page 2.2</a></li> 108 + </ul> 109 + </li> 110 + <li><a href="https://example.com">Page 3</a></li> 111 + <li><a href="https://example.com">Page 4</a></li> 112 + </ul> 113 + </nav> 114 + </aside> 115 + ``` 36 116 37 117 ### Footer 38 118 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. 119 + 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. 120 + 121 + ### Final Structure 122 + 123 + In the end, this is what your page structure should look like if you decide to add everything: 124 + 125 + ```html 126 + <html> 127 + <head> 128 + ... 129 + </head> 130 + <body> 131 + <header>...</header> 132 + <aside>...</aside> 133 + <main>...</main> 134 + <footer>...</footer> 135 + </body> 136 + </html> 137 + ``` 40 138 41 139 ### Text 42 140 ··· 71 169 72 170 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 171 74 - ### `header-sticky.css` 75 - 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: 77 - 78 - ```html 79 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css"> 80 - ``` 81 - 82 172 ### `header-oneline.css` 83 173 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: 174 + This addon makes the header much more compact on narrow viewports. To use, add the following line after the `dev.css` import: 85 175 86 176 ```html 87 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-oneline.min.css"> 177 + <link 178 + rel="stylesheet" 179 + href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-oneline.min.css" 180 + /> 88 181 ``` 89 182 90 - ### `header-sidebar.css` 183 + ### `header-sticky.css` 91 184 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: 185 + 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: 93 186 94 187 ```html 95 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css"> 188 + <link 189 + rel="stylesheet" 190 + href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-sticky.min.css" 191 + /> 96 192 ``` 97 193 98 194 ### `scroll-to-top.js` ··· 100 196 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: 101 197 102 198 ```html 103 - <script src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/scroll-to-top.min.js" defer></script> 199 + <script 200 + src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/scroll-to-top.min.js" 201 + defer 202 + ></script> 104 203 ``` 105 204 106 205 ## Themes 107 206 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: 207 + 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 208 110 209 ```html 111 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css"> 210 + <link 211 + rel="stylesheet" 212 + href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/theme/terminal.user.min.css" 213 + /> 112 214 ``` 113 215 114 - If you are creating a custom theme, it is recommended to use the `boilerplate-auto.css` template for better accessibility. 216 + If you are creating your own theme, it is recommended to use the `boilerplate-auto.css` rather than the `boilerplate.css` template for better accessibility. 115 217 116 218 ## Credits 117 219 118 - - [xz/new.css](https://github.com/xz/new.css) is the main inspiration for this project 220 + - [xz/new.css](https://github.com/xz/new.css) being a major inspiration for this project 221 + - Vercel's [Geist](https://vercel.com/geist/introduction) design system 222 + - [Catppuccin](https://github.com/catppuccin) for the colors used in the Catppuccin themes
+14 -42
addon/header-oneline.css
··· 1 - /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 - /* about: everything in the header on one line, works well with addon/header-sticky.css */ 3 - /* warn: if using with the header-sidebar addon, be sure to include this before it */ 4 - /* warn: i do not recommend using this if you have p or multiple nav elements in header */ 5 - 6 - header { 7 - align-items: center; 8 - display: flex; 9 - } 10 - 11 - header h1, 12 - header h2, 13 - header h3, 14 - header h4, 15 - header h5, 16 - header h6 { 17 - white-space: nowrap; 18 - } 1 + /* header-oneline for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */ 2 + /* about: makes the header much more compact by sorting horizontally, good with header-sticky addon */ 3 + /* note: will hide most elements in header other than img, h1-6, nav, and button */ 19 4 20 5 header * { 6 + font-size: 1rem; 7 + line-height: 1; 21 8 margin: 0; 22 - line-height: 1.5; 23 - } 24 - 25 - header h1, 26 - header p { 27 - margin-right: 1rem; 28 - } 29 - 30 - header h2, 31 - header h3, 32 - header h4, 33 - header h5, 34 - header h6 { 35 - color: var(--dc-tx-2); 36 - font-weight: normal; 9 + padding: 0; 10 + margin-bottom: 0 !important; 37 11 } 38 12 39 - header h2::after, 40 - header h3::after, 41 - header h4::after, 42 - header h5::after, 43 - header h6::after { 44 - content: "/"; 13 + header { 14 + display: flex; 15 + gap: 1rem; 16 + padding: 0.75rem calc(50vw - 50%); 17 + margin: 0 calc(50% - 50vw) 0; 45 18 } 46 19 47 - /* make sure that all header elements have same font size */ 48 - header * { 49 - font-size: 1rem !important; 20 + header > *:not(img, h1, h2, h3, h4, h5, h6, nav, button) { 21 + display: none; 50 22 }
-97
addon/header-sidebar.css
··· 1 - /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 - /* about: turns the header into a sidebar if the viewport is wide enough */ 3 - /* warn: if using with the header-sticky or header-oneline addon, be sure to include this after it */ 4 - 5 - @media (min-width: 84rem) { 6 - header { 7 - all: unset; 8 - } 9 - 10 - header * { 11 - margin-top: 0; 12 - margin-bottom: 0.25rem; 13 - } 14 - 15 - header { 16 - padding: 3rem 2rem; 17 - padding-right: 0; 18 - position: fixed; 19 - top: 0; 20 - left: calc(50% - ((48rem + 4rem) / 2) - (16rem)); 21 - width: 16rem; 22 - height: calc(100% - 6rem); 23 - overflow-y: auto; 24 - } 25 - 26 - header nav ul { 27 - padding-left: 1rem; 28 - border-top: 1px solid var(--dc-bg-3); 29 - padding-top: 1rem; 30 - margin-top: 0.75rem; 31 - } 32 - 33 - header nav ul li { 34 - display: list-item; 35 - } 36 - 37 - header nav ul li:not(:first-child)::before { 38 - content: unset; 39 - } 40 - 41 - /* hacky: reset stuff to default incase you are using header-oneline.css */ 42 - h1 { 43 - font-size: 2rem !important; 44 - } 45 - 46 - h2 { 47 - font-size: 1.5rem !important; 48 - } 49 - 50 - h3 { 51 - font-size: 1.17rem !important; 52 - } 53 - 54 - h4, 55 - p, 56 - a { 57 - font-size: 1rem !important; 58 - } 59 - 60 - h5 { 61 - font-size: 0.83rem !important; 62 - } 63 - 64 - h6 { 65 - font-size: 0.67rem !important; 66 - } 67 - 68 - header nav { 69 - font-size: 1rem !important; 70 - } 71 - 72 - header h2 header h3, 73 - header h4, 74 - header h5, 75 - header h6 { 76 - color: var(--dc-tx-1); 77 - font-weight: bold; 78 - } 79 - 80 - header h1, 81 - header h2, 82 - header h3, 83 - header h4, 84 - header h5, 85 - header h6 { 86 - white-space: normal; 87 - line-height: 1; 88 - } 89 - 90 - header h2::after, 91 - header h3::after, 92 - header h4::after, 93 - header h5::after, 94 - header h6::after { 95 - content: unset; 96 - } 97 - }
+15 -7
addon/header-sticky.css
··· 1 - /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 - /* about: makes the header sticky, always at the top of the screen */ 3 - /* warn: if using with the header-sidebar addon, be sure to include this before it */ 4 - /* warn: i do not recommend using this if your header is large. may affect usability */ 1 + /* header-sticky for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */ 2 + /* about: makes the header sticky (when vh>24rem/vw>16rem). useful if the user needs to access nav often */ 3 + /* note: large sticky headers are bad for usability. too large? try header-oneline addon */ 5 4 6 - header { 7 - position: sticky; 8 - top: 0; 5 + @media only screen and (min-height: 24rem) and (min-width: 16rem) { 6 + header { 7 + position: sticky; 8 + top: 0; 9 + background-color: var(--dc-bg-2); 10 + } 11 + @supports (backdrop-filter: blur(24px)) { 12 + header { 13 + backdrop-filter: blur(24px); 14 + background: none; 15 + } 16 + } 9 17 }
+2 -1
addon/scroll-to-top.js
··· 1 - /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 1 + /* scroll-to-top for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/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 + "border-radius": "1.25rem", 15 16 }); 16 17 document.body.appendChild(scrollToTopButton); 17 18
+279 -221
demo.html
··· 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 + <link rel="stylesheet" href="theme/terminal.user.css" /> 8 9 <link 9 10 rel="stylesheet" 10 11 href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css" ··· 18 19 <body> 19 20 <header> 20 21 <h1>dev.css</h1> 21 - <p>This is the demo page for dev.css.</p> 22 + <p>Optional short summary of the page.</p> 22 23 <nav> 23 24 <ul> 24 25 <li><a href="demo">Demo</a></li> ··· 35 36 </nav> 36 37 </header> 37 38 38 - <h1>Demo</h1> 39 - <p> 40 - This is the demo page for dev.css, a classless, lightweight, and accessible CSS framework! 41 - </p> 42 - <h2>Heading 2</h2> 43 - <p> 44 - This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing 45 - elit. 46 - </p> 47 - <h3>Heading 3</h3> 48 - <p> 49 - This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing 50 - elit. 51 - </p> 52 - <h4>Heading 4</h4> 53 - <p> 54 - This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing 55 - elit. 56 - </p> 57 - <h5>Heading 5</h5> 58 - <p> 59 - This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing 60 - elit. 61 - </p> 62 - <h6>Heading 6</h6> 63 - <p> 64 - This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing 65 - elit. 66 - </p> 39 + <aside> 40 + <h1>Sidebar</h1> 41 + <p> 42 + Optional sidebar that you can use for pretty much anything. See the 43 + README for more information. 44 + </p> 45 + <ul> 46 + <li><a href="">Page 1</a></li> 47 + <li><a href="">Page 2</a></li> 48 + <li><a href="">Page 3</a></li> 49 + <li> 50 + <a href="">Page 4</a> 51 + <ul> 52 + <li><a href="">Page 4.1</a></li> 53 + </ul> 54 + </li> 55 + <li> 56 + <a href="">Page 5</a> 57 + <ul> 58 + <li><a href="">Page 5.1</a></li> 59 + <li><a href="">Page 5.2</a></li> 60 + </ul> 61 + </li> 62 + <li><a href="">Page 6</a></li> 63 + </ul> 64 + </aside> 67 65 68 - <br /> 69 - <hr /> 70 - <br /> 66 + <main> 67 + <h1>Demo</h1> 68 + <p> 69 + This is the demo page for dev.css, a classless, lightweight, and 70 + accessible CSS framework! Lorem ipsum odor amet, consectetuer adipiscing 71 + elit. Hac suscipit magnis a, duis sollicitudin imperdiet. 72 + </p> 73 + <h2>Heading 2</h2> 74 + <p> 75 + Lorem ipsum odor amet, consectetuer adipiscing elit. Hac suscipit magnis 76 + a, duis sollicitudin imperdiet. Aliquam inceptos quis semper libero 77 + gravida purus dui posuere lacinia. Aliquet erat torquent auctor leo 78 + habitasse feugiat iaculis pharetra. Dignissim ridiculus gravida dictumst 79 + donec iaculis. 80 + </p> 81 + <h3>Heading 3</h3> 82 + <p> 83 + Sed tortor congue mauris molestie per facilisi vulputate. Quam aenean 84 + mollis dui sollicitudin; per pretium mattis. Dis luctus vestibulum proin 85 + id neque porta. Vehicula sapien aenean tellus inceptos lectus facilisis 86 + viverra. Lacinia habitasse convallis diam elit lobortis luctus. 87 + </p> 88 + <h4>Heading 4</h4> 89 + <p> 90 + Mattis per parturient convallis tempor nec posuere imperdiet. Natoque 91 + dolor enim tempus bibendum ligula facilisis ipsum interdum. Netus 92 + maximus laoreet adipiscing enim phasellus. Luctus nunc at egestas 93 + torquent porttitor nostra aliquam tempus. 94 + </p> 95 + <h5>Heading 5</h5> 96 + <p> 97 + Erat interdum etiam condimentum, nullam odio ex maximus vel. Rhoncus 98 + suspendisse vestibulum aptent amet torquent class suscipit ultrices 99 + viverra. 100 + </p> 101 + <h6>Heading 6</h6> 102 + <p> 103 + Mattis primis lacus ac metus sollicitudin consequat bibendum luctus. 104 + Ridiculus dignissim tortor viverra posuere cras curabitur. 105 + </p> 71 106 72 - <blockquote> 73 - This entire page was made with dev.css. You can view the source 74 - <a href="https://github.com/intergrav/dev.css/blob/main/demo.html">here</a 75 - >. 76 - </blockquote> 107 + <br /> 108 + <hr /> 109 + <br /> 77 110 78 - <br /> 79 - <hr /> 80 - <br /> 111 + <blockquote> 112 + This entire page was made with just dev.css and basic HTML. You can view 113 + the source 114 + <a href="https://github.com/intergrav/dev.css/blob/main/demo.html" 115 + >here</a 116 + >. 117 + </blockquote> 81 118 82 - <p> 83 - Lorem <mark>ipsum</mark> dolor sit amet 84 - <strong>consectetur</strong> adipisicing elit. Aut 85 - <i>harum molestias</i> labore amet possimus 86 - <s>exercitationem aperiam</s> earum, doloribus 87 - <u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae 88 - quisquam. <a href="#">Voluptatibus, officiis laudantium?</a> 89 - </p> 119 + <br /> 120 + <hr /> 121 + <br /> 90 122 91 - <p> 92 - Lorem ipsum dolor sit amet consectetur adipisicing elit. 93 - <code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate odit 94 - repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias 95 - debitis eveniet totam minima vel. 96 - </p> 123 + <p> 124 + Lorem <mark>ipsum</mark> dolor sit amet 125 + <strong>consectetur</strong> adipisicing elit. Aut 126 + <i>harum molestias</i> labore amet possimus 127 + <s>exercitationem aperiam</s> earum, doloribus 128 + <u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae 129 + quisquam. <a href="#">Voluptatibus, officiis laudantium?</a> 130 + </p> 97 131 98 - <ul> 99 - <li>List item</li> 100 - <li>List item</li> 101 - <li>List item</li> 102 - <li>List item</li> 103 - </ul> 132 + <p> 133 + Lorem ipsum dolor sit amet consectetur adipisicing elit. 134 + <code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate 135 + odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, 136 + alias debitis eveniet totam minima vel. 137 + </p> 138 + 139 + <ul> 140 + <li>List item</li> 141 + <li>List item</li> 142 + <li>List item</li> 143 + <li>List item</li> 144 + </ul> 104 145 105 - <ol> 106 - <li>Step 1</li> 107 - <li>Step 2</li> 108 - <li>????</li> 109 - <li>Profit!</li> 110 - </ol> 146 + <ol> 147 + <li>Step 1</li> 148 + <li>Step 2</li> 149 + <li>????</li> 150 + <li>Profit!</li> 151 + </ol> 111 152 112 - <dl> 113 - <dt>Web</dt> 114 - <dd>The part of the Internet that contains websites and web pages</dd> 115 - <dt>HTML</dt> 116 - <dd>A markup language for creating web pages</dd> 117 - <dt>CSS</dt> 118 - <dd>A technology to make HTML look better</dd> 119 - </dl> 153 + <dl> 154 + <dt>Web</dt> 155 + <dd>The part of the Internet that contains websites and web pages</dd> 156 + <dt>HTML</dt> 157 + <dd>A markup language for creating web pages</dd> 158 + <dt>CSS</dt> 159 + <dd>A technology to make HTML look better</dd> 160 + </dl> 120 161 121 - <blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden"> 122 - If you think privacy is unimportant for you because you have nothing to 123 - hide, you might as well say free speech is unimportant for you because you 124 - have nothing useful to say. 125 - <br /> 126 - <br /> 127 - – Edward Snowden 128 - </blockquote> 162 + <blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden"> 163 + If you think privacy is unimportant for you because you have nothing to 164 + hide, you might as well say free speech is unimportant for you because 165 + you have nothing useful to say. 166 + <br /> 167 + <br /> 168 + – Edward Snowden 169 + </blockquote> 129 170 130 - <pre><code>&#x3C;!DOCTYPE html&#x3E; 171 + <pre><code>&#x3C;!DOCTYPE html&#x3E; 131 172 &#x3C;html&#x3E; 132 173 &#x3C;head&#x3E; 133 174 &#x3C;title&#x3E;Hello World&#x3C;/title&#x3E; ··· 137 178 &#x3C;/body&#x3E; 138 179 &#x3C;/html&#x3E;</code></pre> 139 180 140 - <br /> 141 - <hr /> 142 - <br /> 181 + <br /> 182 + <hr /> 183 + <br /> 143 184 144 - <details> 145 - <summary>Click me!</summary> 146 - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 147 - </details> 185 + <details> 186 + <summary>Click me!</summary> 187 + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 188 + </details> 148 189 149 - <br /> 150 - <hr /> 151 - <br /> 190 + <br /> 191 + <hr /> 192 + <br /> 152 193 153 - <table> 154 - <caption> 155 - Ho-kago Tea Time 156 - </caption> 157 - <thead> 158 - <tr> 159 - <th>Name</th> 160 - <th>Instrument</th> 161 - </tr> 162 - </thead> 163 - <tbody> 164 - <tr> 165 - <td>Yui Hirasawa</td> 166 - <td>Lead Guitar</td> 167 - </tr> 168 - <tr> 169 - <td>Mio Akiyama</td> 170 - <td>Bass</td> 171 - </tr> 172 - <tr> 173 - <td>Ritsu Tainaka</td> 174 - <td>Drums</td> 175 - </tr> 176 - <tr> 177 - <td>Tsumugi Kotobuki</td> 178 - <td>Keyboard</td> 179 - </tr> 180 - <tr> 181 - <td>Azusa Nakano</td> 182 - <td>Rhythm Guitar</td> 183 - </tr> 184 - </tbody> 185 - <tfoot> 186 - <tr> 187 - <th>Name</th> 188 - <th>Instrument</th> 189 - </tr> 190 - </tfoot> 191 - </table> 194 + <article> 195 + <h1>Article element</h1> 196 + <p>This is an article element by itself.</p> 197 + </article> 192 198 193 - <br /> 194 - <hr /> 195 - <br /> 199 + <article> 200 + <h1>Article element</h1> 201 + <p>This is an article element with other nested elements.</p> 202 + <article> 203 + <h2>Article 1</h2> 204 + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 205 + </article> 206 + <article> 207 + <h2>Article 2</h2> 208 + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 209 + </article> 210 + <details> 211 + <summary>Click me!</summary> 212 + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 213 + </details> 214 + </article> 196 215 197 - <form> 198 - <p> 199 - <em> 200 - This is not a real form and does not submit or save any information. 201 - </em> 202 - </p> 203 - <p> 204 - <label>First name</label><br /> 205 - <input type="text" name="first_name" /> 206 - </p> 207 - <p> 208 - <label>Last name</label><br /> 209 - <input type="text" name="last_name" /> 210 - </p> 211 - <p> 212 - <label>Gender</label><br /> 213 - <label> 214 - <input type="radio" name="gender" value="Male" /> 215 - Male 216 - </label> 217 - <br /> 218 - <label> 219 - <input type="radio" name="gender" value="Female" /> 220 - Female 221 - </label> 222 - <br /> 223 - <label> 224 - <input type="radio" name="gender" value="other-none-na" /> 225 - Non-binary 226 - </label> 227 - </p> 228 - <p> 229 - <label>Email</label><br /> 230 - <input type="email" name="email" required="" /> 231 - </p> 232 - <p> 233 - <label>Phone number</label><br /> 234 - <input type="tel" name="phone" /> 235 - </p> 236 - <p> 237 - <label>Password</label><br /> 238 - <input type="password" name="password" /> 239 - </p> 240 - <p> 241 - <label>Country</label><br /> 242 - <select> 243 - <option>China</option> 244 - <option>India</option> 245 - <option>United States</option> 246 - <option>Indonesia</option> 247 - <option>Brazil</option> 248 - </select> 249 - </p> 250 - <p> 251 - <label>Comments</label><br /> 252 - <textarea></textarea> 253 - </p> 254 - <p> 255 - <label> 256 - <input type="checkbox" value="terms" /> 257 - I agree to the <a>terms and conditions</a> 258 - </label> 259 - </p> 260 - <p> 261 - <button>Sign up</button> 262 - <button type="reset">Reset form</button> 263 - <button disabled="disabled">Disabled</button> 264 - </p> 265 - </form> 216 + <br /> 217 + <hr /> 218 + <br /> 266 219 267 - <br /> 268 - <hr /> 269 - <br /> 220 + <table> 221 + <caption> 222 + Ho-kago Tea Time 223 + </caption> 224 + <thead> 225 + <tr> 226 + <th>Name</th> 227 + <th>Instrument</th> 228 + </tr> 229 + </thead> 230 + <tbody> 231 + <tr> 232 + <td>Yui Hirasawa</td> 233 + <td>Lead Guitar</td> 234 + </tr> 235 + <tr> 236 + <td>Mio Akiyama</td> 237 + <td>Bass</td> 238 + </tr> 239 + <tr> 240 + <td>Ritsu Tainaka</td> 241 + <td>Drums</td> 242 + </tr> 243 + <tr> 244 + <td>Tsumugi Kotobuki</td> 245 + <td>Keyboard</td> 246 + </tr> 247 + <tr> 248 + <td>Azusa Nakano</td> 249 + <td>Rhythm Guitar</td> 250 + </tr> 251 + </tbody> 252 + <tfoot> 253 + <tr> 254 + <th>Name</th> 255 + <th>Instrument</th> 256 + </tr> 257 + </tfoot> 258 + </table> 270 259 271 - <img 272 - src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg" 273 - alt="Mt. Fuji" 274 - /> 260 + <br /> 261 + <hr /> 262 + <br /> 263 + 264 + <form> 265 + <p> 266 + <em> 267 + This is not a real form and does not submit or save any information. 268 + </em> 269 + </p> 270 + <p> 271 + <label>First name</label><br /> 272 + <input type="text" name="first_name" /> 273 + </p> 274 + <p> 275 + <label>Last name</label><br /> 276 + <input type="text" name="last_name" /> 277 + </p> 278 + <p> 279 + <label>Gender</label><br /> 280 + <label> 281 + <input type="radio" name="gender" value="Male" /> 282 + Male 283 + </label> 284 + <br /> 285 + <label> 286 + <input type="radio" name="gender" value="Female" /> 287 + Female 288 + </label> 289 + <br /> 290 + <label> 291 + <input type="radio" name="gender" value="other-none-na" /> 292 + Non-binary 293 + </label> 294 + </p> 295 + <p> 296 + <label>Email</label><br /> 297 + <input type="email" name="email" required="" /> 298 + </p> 299 + <p> 300 + <label>Phone number</label><br /> 301 + <input type="tel" name="phone" /> 302 + </p> 303 + <p> 304 + <label>Password</label><br /> 305 + <input type="password" name="password" /> 306 + </p> 307 + <p> 308 + <label>Country</label><br /> 309 + <select> 310 + <option>China</option> 311 + <option>India</option> 312 + <option>United States</option> 313 + <option>Indonesia</option> 314 + <option>Brazil</option> 315 + </select> 316 + </p> 317 + <p> 318 + <label>Comments</label><br /> 319 + <textarea></textarea> 320 + </p> 321 + <p> 322 + <label> 323 + <input type="checkbox" value="terms" /> 324 + I agree to the <a>terms and conditions</a> 325 + </label> 326 + </p> 327 + <p> 328 + <button>Sign up</button> 329 + <button type="reset">Reset form</button> 330 + <button disabled="disabled">Disabled</button> 331 + </p> 332 + </form> 275 333 276 - <p> 277 - Inline image: 278 - <a href="#" 279 - ><img 280 - src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg" 281 - width="50" 282 - alt="Mt. Fuji" 283 - /></a> 284 - </p> 334 + <br /> 335 + <hr /> 336 + <br /> 337 + 338 + <img 339 + src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg" 340 + alt="Mt. Fuji" 341 + /> 342 + </main> 285 343 286 344 <footer> 287 345 <p>This is an optional footer.</p>
+222 -144
dev.css
··· 1 - /* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 1 + /* dev.css v4, a lightweight 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 */ 3 3 4 + /* todo for v4 release 5 + - finish dev.css-docs and move demo to that site 6 + - update dev.css preview images 7 + */ 8 + 4 9 /* table of contents 5 - 1. default configuration 6 - 2. dark mode handling 7 - 3. root color scheme 10 + 1. configurable variables 11 + 2. dark mode variables 12 + 3. color scheme 8 13 4. css reset 9 14 5. margins for most elements 10 - 6. font family 11 - 7. body and selection styling 12 - 8. typography 13 - 9. blockquotes 14 - 10. header 15 - 11. footer 16 - 12. buttons and inputs 17 - 13. code and keyboards 18 - 14. details 19 - 15. description lists 20 - 16. horizontal rules 21 - 17. fieldsets 22 - 18. tables 23 - 19. lists 15 + 6. typography 16 + 7. document 17 + 8. header 18 + 9. footer 19 + 10. blockquotes 20 + 11. buttons and inputs 21 + 12. code and keyboards 22 + 13. details 23 + 14. description lists 24 + 15. horizontal rules 25 + 16. fieldsets 26 + 17. tables 27 + 18. lists 24 28 */ 25 29 26 - /* 1. default configuration */ 30 + /* 1. configurable variables */ 31 + /* adjustable by you! see ./theme/boilerplate-auto.css */ 27 32 :root { 28 33 /* font families */ 29 - --dc-font-sans: "Geist", "Inter", system-ui, -apple-system, BlinkMacSystemFont, 30 - "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", 31 - sans-serif; 32 - --dc-font-mono: "Geist Mono", ui-monospace, Consolas, Monaco, "Ubuntu Mono", 33 - "Liberation Mono", "Courier New", Courier, monospace; 34 + --dc-font: "Geist", "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, 35 + sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 36 + --dc-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas, 37 + "Liberation Mono", Menlo, monospace; 34 38 35 39 /* light colors */ 36 - --dc-cs: light; 37 - --dc-tx-1: #000000; 38 - --dc-tx-2: #1a1a1a; 39 - --dc-bg-1: #fafafa; 40 - --dc-bg-2: #fff; 41 - --dc-bg-3: #ebebeb; 42 - --dc-lk-1: #0068d6; 43 - --dc-lkb-1: #0072f5; 44 - --dc-lkb-2: #0062d1; 45 - --dc-lkb-tx: #ededed; 46 - --dc-ac-1: #8e4ec6; 47 - --dc-ac-tx: #ededed; 40 + --dc-cs: light; /* light/dark scrollbars, inputs, etc */ 41 + --dc-tx-1: #171717; /* primary text */ 42 + --dc-tx-2: #666; /* secondary text */ 43 + --dc-bg-1: #fff; /* primary background */ 44 + --dc-bg-2: #fafafa; /* secondary background */ 45 + --dc-bg-3: #ebebeb; /* border */ 46 + --dc-lk-1: #005ff2; /* link text */ 47 + --dc-lkb-1: #006bff; /* link button */ 48 + --dc-lkb-2: #0059ec; /* link button hover */ 49 + --dc-lkb-tx: #fff; /* text over link button */ 50 + --dc-ac-1: #a000f8; /* accent color */ 51 + --dc-ac-tx: #fff; /* text over accent color */ 48 52 49 53 /* dark colors */ 50 54 --dc-d-cs: dark; 51 55 --dc-d-tx-1: #ededed; 52 56 --dc-d-tx-2: #a1a1a1; 53 - --dc-d-bg-1: #000; 54 - --dc-d-bg-2: #0a0a0a; 57 + --dc-d-bg-1: #0a0a0a; 58 + --dc-d-bg-2: #000; 55 59 --dc-d-bg-3: #2e2e2e; 56 - --dc-d-lk-1: #52a8ff; 57 - --dc-d-lkb-1: #0072f5; 58 - --dc-d-lkb-2: #0062d1; 59 - --dc-d-lkb-tx: #ededed; 60 - --dc-d-ac-1: #8e4ec6; 61 - --dc-d-ac-tx: #ededed; 60 + --dc-d-lk-1: #47a8ff; 61 + --dc-d-lkb-1: #006efe; 62 + --dc-d-lkb-2: #005be7; 63 + --dc-d-lkb-tx: #fff; 64 + --dc-d-ac-1: #9440d5; 65 + --dc-d-ac-tx: #fff; 62 66 } 63 67 64 - /* 2. dark mode handling */ 68 + /* 2. dark mode variables */ 69 + /* adjusts variables if the user's browser prefers dark mode */ 65 70 @media (prefers-color-scheme: dark) { 66 71 :root { 67 72 --dc-cs: var(--dc-d-cs); ··· 79 84 } 80 85 } 81 86 82 - /* 3. root color scheme */ 87 + /* 3. color scheme */ 88 + /* adjusts browser color scheme based on variable */ 83 89 :root { 84 90 color-scheme: only var(--dc-cs); 85 91 } 86 92 87 - /* 4. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */ 93 + /* 4. css reset */ 94 + /* modified from https://www.joshwcomeau.com/css/custom-css-reset */ 95 + 88 96 *, 89 97 *::before, 90 98 *::after { 91 99 box-sizing: border-box; 92 100 margin: 0; 93 - word-break: break-word; 94 - } 95 - 96 - body { 97 - line-height: 1.5; 98 101 } 99 102 100 103 img, ··· 113 116 font: inherit; 114 117 } 115 118 119 + p, 120 + h1, 121 + h2, 122 + h3, 123 + h4, 124 + h5, 125 + h6 { 126 + overflow-wrap: break-word; 127 + } 128 + 129 + p { 130 + text-wrap: pretty; 131 + } 132 + h1, 133 + h2, 134 + h3, 135 + h4, 136 + h5, 137 + h6 { 138 + text-wrap: balance; 139 + } 140 + 116 141 #root, 117 142 #__next { 118 143 isolation: isolate; ··· 130 155 dl, 131 156 fieldset, 132 157 figure, 158 + footer, 133 159 form, 160 + hr, 134 161 input, 135 162 iframe, 136 163 img, 164 + main, 137 165 meter, 138 166 nav, 139 167 ol, ··· 152 180 margin-bottom: 1rem; 153 181 } 154 182 155 - /* 6. font family */ 156 - html { 157 - font-family: var(--dc-font-sans); 183 + /* 6. typography */ 184 + 185 + body { 186 + font-family: var(--dc-font); 187 + color: var(--dc-tx-2); 188 + line-height: 1.5; 158 189 } 159 190 160 191 code, ··· 162 193 kbd, 163 194 samp { 164 195 font-family: var(--dc-font-mono); 165 - } 166 - 167 - /* 7. body and selection styling */ 168 - body { 169 - margin: 0 auto; 170 - max-width: 48rem; 171 - padding: 2rem; 172 - background: var(--dc-bg-1); 173 - color: var(--dc-tx-2); 174 - overflow-wrap: break-word; 175 - overflow-x: hidden; 176 - } 177 - 178 - ::selection { 179 - background: var(--dc-ac-1); 180 - color: var(--dc-ac-tx); 181 - } 182 - 183 - /* 8. typography */ 184 - h1 { 185 - font-size: 2rem; 186 - } 187 - 188 - h2 { 189 - font-size: 1.5rem; 190 - } 191 - 192 - h3 { 193 - font-size: 1.17rem; 194 - } 195 - 196 - h4 { 197 - font-size: 1rem; 198 - } 199 - 200 - h5 { 201 - font-size: 0.83rem; 202 - } 203 - 204 - h6 { 205 - font-size: 0.67rem; 206 - } 207 - 208 - p, 209 - a { 210 - font-size: 1rem; 196 + font-size: 0.9rem; 211 197 } 212 198 213 199 h1, ··· 216 202 h4, 217 203 h5, 218 204 h6 { 219 - line-height: 1; 220 205 color: var(--dc-tx-1); 221 - padding-top: 1rem; 206 + line-height: 1; 207 + padding-top: 0.5rem; 222 208 } 223 209 224 210 h1, 225 211 h2, 226 212 h3 { 227 - padding-bottom: 0.25rem; 228 213 margin-bottom: 0.5rem; 214 + padding-bottom: 0.25rem; 229 215 border-bottom: 1px solid var(--dc-bg-3); 230 216 } 231 217 218 + article h1, 219 + article h2, 220 + article h3 { 221 + padding-bottom: none; 222 + border-bottom: none; 223 + } 224 + 232 225 h4, 233 226 h5, 234 227 h6 { ··· 245 238 } 246 239 247 240 mark { 241 + border-radius: 0.375rem; 248 242 padding: 0.125rem 0.25rem; 249 243 background: var(--dc-ac-1); 250 244 color: var(--dc-ac-tx); 251 - border-radius: 0.25rem; 252 245 } 253 246 254 - /* 9. blockquotes */ 255 - blockquote { 256 - padding: 1.25rem; 247 + ::selection { 248 + background: var(--dc-ac-1); 249 + color: var(--dc-ac-tx); 250 + } 251 + 252 + /* 7. document */ 253 + 254 + body { 255 + max-width: 48rem; 256 + margin: 0 auto; 257 + padding: 0 1rem; 257 258 background: var(--dc-bg-2); 259 + overflow-x: hidden; 260 + } 261 + 262 + main, 263 + aside { 264 + padding: 1.5rem; 265 + background: var(--dc-bg-1); 258 266 border: 1px solid var(--dc-bg-3); 259 - border-left: 5px solid var(--dc-bg-3); 260 267 border-radius: 0.25rem; 261 268 } 262 269 263 - blockquote *:last-child { 264 - padding-bottom: 0; 270 + article { 271 + padding: 1rem; 272 + background: var(--dc-bg-2); 273 + border: 1px solid var(--dc-bg-3); 274 + border-radius: 0.375rem; 275 + } 276 + 277 + article > *:last-child, 278 + aside > *:last-child, 279 + main > *:last-child { 265 280 margin-bottom: 0; 266 281 } 267 282 268 - /* 10. header - make sure header addons dont break when modifying */ 283 + @media only screen and (max-width: 48rem) { 284 + main { 285 + margin: -1rem; 286 + margin-bottom: 0rem; 287 + background: none; 288 + border: none; 289 + } 290 + 291 + aside { 292 + margin-top: 1rem; 293 + margin-bottom: 1rem; 294 + } 295 + 296 + header { 297 + background-color: var(--dc-bg-1); 298 + border-bottom: 1px solid var(--dc-bg-3); 299 + } 300 + } 301 + 302 + aside h1, 303 + aside h2, 304 + aside h3 { 305 + padding-bottom: 0; 306 + border-bottom: none; 307 + } 308 + 309 + @media only screen and (min-width: 82rem) { 310 + aside { 311 + position: absolute; 312 + left: calc(50% - ((48rem) / 2) - (16rem)); 313 + width: 16rem; 314 + overflow-y: auto; 315 + } 316 + } 317 + 318 + /* 8. header */ 319 + 269 320 header { 270 - background: var(--dc-bg-2); 271 - border-bottom: 1px solid var(--dc-bg-3); 272 - padding: 0.5rem calc(50vw - 50%); 273 - margin: -2rem calc(50% - 50vw) 2rem; 321 + padding: 1rem calc(50vw - 50%); 322 + margin: 0 calc(50% - 50vw) 0; 274 323 } 275 324 276 325 header * { 277 - padding-top: 0rem; 278 - padding-bottom: 0rem; 279 - margin-top: 0.25rem; 326 + padding: 0; 327 + margin: 0; 328 + } 329 + 330 + header > *:not(:last-child) { 280 331 margin-bottom: 0.25rem; 281 332 } 282 333 283 334 header h1, 284 335 header h2, 285 336 header h3 { 286 - border-bottom: 0; 337 + border-bottom: none; 338 + padding-bottom: 0; 287 339 } 288 340 289 341 header nav ul { ··· 299 351 content: "• "; 300 352 } 301 353 302 - /* 11. footer */ 303 - footer { 304 - border-top: 1px solid var(--dc-bg-3); 305 - padding-top: 0.5rem; 354 + @media only screen and (max-width: 48rem) { 355 + main, 356 + aside { 357 + padding: 1rem; 358 + } 359 + } 360 + 361 + /* 9. footer */ 362 + 363 + footer > *:last-child { 364 + margin-bottom: 0; 365 + } 366 + 367 + footer nav ul { 368 + padding: 0; 369 + } 370 + 371 + footer nav ul li { 372 + display: inline-block; 373 + margin: 0; 374 + } 375 + 376 + footer nav ul li:not(:first-child)::before { 377 + content: "• "; 378 + } 379 + 380 + /* 10. blockquotes */ 381 + blockquote { 382 + padding: 1.25rem; 383 + background: var(--dc-bg-2); 384 + border: 1px solid var(--dc-bg-3); 385 + border-left: 5px solid var(--dc-bg-3); 386 + border-radius: 0.375rem; 306 387 } 307 388 308 - footer h1, 309 - footer h2, 310 - footer h3 { 311 - border-bottom: 0; 389 + blockquote > *:last-child { 390 + padding-bottom: 0; 391 + margin-bottom: 0; 312 392 } 313 393 314 - /* 12. buttons and inputs */ 394 + /* 11. buttons and inputs */ 315 395 a button, 316 396 button, 317 397 input[type="submit"], ··· 325 405 background: var(--dc-lkb-1); 326 406 color: var(--dc-lkb-tx); 327 407 border: 0; 328 - border-radius: 0.25rem; 408 + border-radius: 0.375rem; 329 409 box-sizing: border-box; 330 410 cursor: pointer; 331 411 } ··· 360 440 background: var(--dc-bg-2); 361 441 color: var(--dc-tx-2); 362 442 border: 1px solid var(--dc-bg-3); 363 - border-radius: 0.25rem; 443 + border-radius: 0.375rem; 364 444 box-shadow: none; 365 445 box-sizing: border-box; 366 446 } ··· 374 454 accent-color: var(--dc-ac-1); 375 455 } 376 456 377 - /* 13. code and keyboards */ 457 + /* 12. code and keyboards */ 378 458 code, 379 459 samp, 380 460 kbd, 381 461 pre { 382 462 background: var(--dc-bg-2); 383 463 border: 1px solid var(--dc-bg-3); 384 - border-radius: 0.25rem; 464 + border-radius: 0.375rem; 385 465 padding: 0.125rem 0.25rem; 386 - font-size: 0.9rem; 387 466 tab-size: 2; 388 467 } 389 468 ··· 402 481 border: 0; 403 482 } 404 483 405 - /* 14. details */ 484 + /* 13. details */ 406 485 details { 407 486 padding: 0.5rem 1rem; 408 487 background: var(--dc-bg-2); 409 488 border: 1px solid var(--dc-bg-3); 410 - border-radius: 0.25rem; 489 + border-radius: 0.375rem; 411 490 } 412 491 413 492 summary { ··· 429 508 padding-bottom: 0; 430 509 } 431 510 432 - /* 15. description lists */ 511 + /* 14. description lists */ 433 512 dt { 434 513 font-weight: bold; 435 514 } ··· 438 517 content: "→ "; 439 518 } 440 519 441 - /* 16. horizontal rules */ 520 + /* 15. horizontal rules */ 442 521 hr { 443 522 border: 0; 444 - border-bottom: 1px solid var(--dc-bg-3); 445 - margin: 1rem auto; 523 + border-bottom: 2px solid var(--dc-bg-3); 446 524 } 447 525 448 - /* 17. fieldsets */ 526 + /* 16. fieldsets */ 449 527 fieldset { 450 528 margin-top: 1rem; 451 529 padding: 2rem; 452 530 border: 1px solid var(--dc-bg-3); 453 - border-radius: 0.25rem; 531 + border-radius: 0.375rem; 454 532 } 455 533 456 534 legend { 457 535 padding: auto 0.5rem; 458 536 } 459 537 460 - /* 18. tables */ 538 + /* 17. tables */ 461 539 table { 462 540 border-collapse: collapse; 463 541 width: 100%; ··· 483 561 margin-bottom: 0.5rem; 484 562 } 485 563 486 - /* 19. lists */ 564 + /* 18. lists */ 487 565 ol, 488 566 ul { 489 567 padding-left: 2rem;
+4 -5
package.json
··· 1 1 { 2 2 "name": "@intergrav/dev.css", 3 - "version": "3.6.2", 3 + "version": "4.0.0", 4 4 "description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system", 5 5 "keywords": [ 6 6 "css", ··· 13 13 "geist", 14 14 "open-source" 15 15 ], 16 - "homepage": "https://github.com/intergrav/dev.css#readme", 16 + "homepage": "https://devcss.devins.page", 17 17 "bugs": { 18 18 "url": "https://github.com/intergrav/dev.css/issues" 19 19 }, 20 20 "license": "MIT", 21 - "author": "intergrav <intergrav@proton.me> (https://intergrav.xyz)", 21 + "author": "intergrav <intergrav@proton.me> (https://devins.page)", 22 22 "files": [ 23 23 "theme", 24 - "addon", 25 - "demo.html" 24 + "addon" 26 25 ], 27 26 "main": "dev.css", 28 27 "repository": "github:intergrav/dev.css",
-54
theme/boilerplate-auto.css
··· 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 - /* about: a template that you can modify, but with an automatic light/dark mode */ 3 - /* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */ 4 - 5 - :root { 6 - /* font families */ 7 - --dc-font-sans: sans-serif; /* sans serif */ 8 - --dc-font-mono: monospace; /* monospace */ 9 - 10 - /* light colors */ 11 - --dc-cs: light; /* light/dark scrollbars, inputs, etc */ 12 - --dc-tx-1: #000000; /* primary text */ 13 - --dc-tx-2: #1a1a1a; /* secondary text */ 14 - --dc-bg-1: #fafafa; /* main background */ 15 - --dc-bg-2: #fff; /* secondary background */ 16 - --dc-bg-3: #ebebeb; /* outlines */ 17 - --dc-lk-1: #0068d6; /* link text */ 18 - --dc-lkb-1: #0072f5; /* link button background */ 19 - --dc-lkb-2: #0062d1; /* link button background (hover) */ 20 - --dc-lkb-tx: #ededed; /* link button text */ 21 - --dc-ac-1: #8e4ec6; /* accent color */ 22 - --dc-ac-tx: #ededed; /* accent color text */ 23 - 24 - /* dark colors */ 25 - --dc-d-cs: dark; 26 - --dc-d-tx-1: #ededed; 27 - --dc-d-tx-2: #a1a1a1; 28 - --dc-d-bg-1: #000; 29 - --dc-d-bg-2: #0a0a0a; 30 - --dc-d-bg-3: #2e2e2e; 31 - --dc-d-lk-1: #52a8ff; 32 - --dc-d-lkb-1: #0072f5; 33 - --dc-d-lkb-2: #0062d1; 34 - --dc-d-lkb-tx: #ededed; 35 - --dc-d-ac-1: #8e4ec6; 36 - --dc-d-ac-tx: #ededed; 37 - } 38 - 39 - @media (prefers-color-scheme: dark) { 40 - :root { 41 - --dc-cs: var(--dc-d-cs); 42 - --dc-tx-1: var(--dc-d-tx-1); 43 - --dc-tx-2: var(--dc-d-tx-2); 44 - --dc-bg-1: var(--dc-d-bg-1); 45 - --dc-bg-2: var(--dc-d-bg-2); 46 - --dc-bg-3: var(--dc-d-bg-3); 47 - --dc-lk-1: var(--dc-d-lk-1); 48 - --dc-lkb-1: var(--dc-d-lkb-1); 49 - --dc-lkb-2: var(--dc-d-lkb-2); 50 - --dc-lkb-tx: var(--dc-d-lkb-tx); 51 - --dc-ac-1: var(--dc-d-ac-1); 52 - --dc-ac-tx: var(--dc-d-ac-tx); 53 - } 54 - }
+63
theme/boilerplate-auto.user.css
··· 1 + /* ==userstyle== 2 + @name boilerplate-auto for dev.css 3 + @description a template that you can modify, but with two color schemes for light/dark mode. copied from dev.css defaults. you can remove lines that you want to keep as the dev.css default, such as the font lines 4 + @namespace author 5 + @version 1.0.0 6 + @author author <author@example.com> (https://example.com) 7 + @homepageURL https://example.com 8 + @supportURL https://example.com/issues 9 + @license MIT 10 + ==/userstyle== */ 11 + 12 + :root { 13 + /* font families */ 14 + --dc-font: "Geist", "Inter", system-ui, "Segoe UI", Roboto, Helvetica, 15 + Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 16 + --dc-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas, 17 + "Liberation Mono", Menlo, monospace; 18 + 19 + /* light colors */ 20 + --dc-cs: light; /* light/dark for scrollbars, inputs, etc */ 21 + --dc-tx-1: #171717; /* primary text */ 22 + --dc-tx-2: #666; /* secondary text */ 23 + --dc-bg-1: #fff; /* primary background */ 24 + --dc-bg-2: #fafafa; /* secondary background */ 25 + --dc-bg-3: #ebebeb; /* border */ 26 + --dc-lk-1: #005ff2; /* link text */ 27 + --dc-lkb-1: #006bff; /* link button */ 28 + --dc-lkb-2: #0059ec; /* link button hover */ 29 + --dc-lkb-tx: #fff; /* text over link button */ 30 + --dc-ac-1: #a000f8; /* accent color */ 31 + --dc-ac-tx: #fff; /* text over accent color */ 32 + 33 + /* dark colors */ 34 + --dc-d-cs: dark; 35 + --dc-d-tx-1: #ededed; 36 + --dc-d-tx-2: #a1a1a1; 37 + --dc-d-bg-1: #0a0a0a; 38 + --dc-d-bg-2: #000; 39 + --dc-d-bg-3: #2e2e2e; 40 + --dc-d-lk-1: #47a8ff; 41 + --dc-d-lkb-1: #006efe; 42 + --dc-d-lkb-2: #005be7; 43 + --dc-d-lkb-tx: #fff; 44 + --dc-d-ac-1: #9440d5; 45 + --dc-d-ac-tx: #fff; 46 + } 47 + 48 + @media (prefers-color-scheme: dark) { 49 + :root { 50 + --dc-cs: var(--dc-d-cs); 51 + --dc-tx-1: var(--dc-d-tx-1); 52 + --dc-tx-2: var(--dc-d-tx-2); 53 + --dc-bg-1: var(--dc-d-bg-1); 54 + --dc-bg-2: var(--dc-d-bg-2); 55 + --dc-bg-3: var(--dc-d-bg-3); 56 + --dc-lk-1: var(--dc-d-lk-1); 57 + --dc-lkb-1: var(--dc-d-lkb-1); 58 + --dc-lkb-2: var(--dc-d-lkb-2); 59 + --dc-lkb-tx: var(--dc-d-lkb-tx); 60 + --dc-ac-1: var(--dc-d-ac-1); 61 + --dc-ac-tx: var(--dc-d-ac-tx); 62 + } 63 + }
-23
theme/boilerplate.css
··· 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 - /* about: a template that you can modify */ 3 - /* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */ 4 - 5 - :root { 6 - /* font families */ 7 - --dc-font-sans: sans-serif; /* sans serif */ 8 - --dc-font-mono: monospace; /* monospace */ 9 - 10 - /* colors */ 11 - --dc-cs: light; /* light/dark scrollbars, inputs, etc */ 12 - --dc-tx-1: #000000; /* primary text */ 13 - --dc-tx-2: #1a1a1a; /* secondary text */ 14 - --dc-bg-1: #fafafa; /* main background */ 15 - --dc-bg-2: #fff; /* secondary background */ 16 - --dc-bg-3: #ebebeb; /* outlines */ 17 - --dc-lk-1: #0068d6; /* link text */ 18 - --dc-lkb-1: #0072f5; /* link button background */ 19 - --dc-lkb-2: #0062d1; /* link button background (hover) */ 20 - --dc-lkb-tx: #ededed; /* link button text */ 21 - --dc-ac-1: #8e4ec6; /* accent color */ 22 - --dc-ac-tx: #ededed; /* accent color text */ 23 - }
+32
theme/boilerplate.user.css
··· 1 + /* ==userstyle== 2 + @name boilerplate for dev.css 3 + @description a template that you can modify. copied from dev.css defaults. you can remove lines that you want to keep as the dev.css default, such as the font lines 4 + @namespace author 5 + @version 1.0.0 6 + @author author <author@example.com> (https://example.com) 7 + @homepageURL https://example.com 8 + @supportURL https://example.com/issues 9 + @license MIT 10 + ==/userstyle== */ 11 + 12 + :root { 13 + /* font families */ 14 + --dc-font: "Geist", "Inter", system-ui, "Segoe UI", Roboto, Helvetica, 15 + Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 16 + --dc-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas, 17 + "Liberation Mono", Menlo, monospace; 18 + 19 + /* light colors */ 20 + --dc-cs: light; /* light/dark for scrollbars, inputs, etc */ 21 + --dc-tx-1: #171717; /* primary text */ 22 + --dc-tx-2: #666; /* secondary text */ 23 + --dc-bg-1: #fff; /* primary background */ 24 + --dc-bg-2: #fafafa; /* secondary background */ 25 + --dc-bg-3: #ebebeb; /* border */ 26 + --dc-lk-1: #005ff2; /* link text */ 27 + --dc-lkb-1: #006bff; /* link button */ 28 + --dc-lkb-2: #0059ec; /* link button hover */ 29 + --dc-lkb-tx: #fff; /* text over link button */ 30 + --dc-ac-1: #a000f8; /* accent color */ 31 + --dc-ac-tx: #fff; /* text over accent color */ 32 + }
-50
theme/catppuccin-frappe.css
··· 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 - /* about: catppuccin's frappé color scheme - https://github.com/catppuccin */ 3 - /* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */ 4 - 5 - :root { 6 - /* light colors - latte */ 7 - --dc-cs: light; 8 - --dc-tx-1: #4c4f69; /* primary text | Text */ 9 - --dc-tx-2: #4c4f69; /* secondary text | Text */ 10 - --dc-bg-1: #e6e9ef; /* main background | Mantle */ 11 - --dc-bg-2: #eff1f5; /* secondary background | Base */ 12 - --dc-bg-3: #ccd0da; /* outlines | Surface0 */ 13 - --dc-lk-1: #1e66f5; /* link text | Blue */ 14 - --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */ 15 - --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */ 16 - --dc-lkb-tx: #4c4f69; /* link button text | Text */ 17 - --dc-ac-1: #8839ef; /* accent color | Mauve */ 18 - --dc-ac-tx: #eff1f5; /* accent color text | Base */ 19 - 20 - /* dark colors */ 21 - --dc-d-cs: dark; 22 - --dc-d-tx-1: #c6d0f5; /* primary text | Text */ 23 - --dc-d-tx-2: #c6d0f5; /* secondary text | Text */ 24 - --dc-d-bg-1: #292c3c; /* main background | Mantle */ 25 - --dc-d-bg-2: #303446; /* secondary background | Base */ 26 - --dc-d-bg-3: #414559; /* outlines | Surface0 */ 27 - --dc-d-lk-1: #8caaee; /* link text | Blue */ 28 - --dc-d-lkb-1: #51576d; /* link button background | Surface1 */ 29 - --dc-d-lkb-2: #414559; /* link button background (hover) | Surface0 */ 30 - --dc-d-lkb-tx: #c6d0f5; /* link button text | Text */ 31 - --dc-d-ac-1: #ca9ee6; /* accent color | Mauve */ 32 - --dc-d-ac-tx: #303446; /* accent color text | Base */ 33 - } 34 - 35 - @media (prefers-color-scheme: dark) { 36 - :root { 37 - --dc-cs: var(--dc-d-cs); 38 - --dc-tx-1: var(--dc-d-tx-1); 39 - --dc-tx-2: var(--dc-d-tx-2); 40 - --dc-bg-1: var(--dc-d-bg-1); 41 - --dc-bg-2: var(--dc-d-bg-2); 42 - --dc-bg-3: var(--dc-d-bg-3); 43 - --dc-lk-1: var(--dc-d-lk-1); 44 - --dc-lkb-1: var(--dc-d-lkb-1); 45 - --dc-lkb-2: var(--dc-d-lkb-2); 46 - --dc-lkb-tx: var(--dc-d-lkb-tx); 47 - --dc-ac-1: var(--dc-d-ac-1); 48 - --dc-ac-tx: var(--dc-d-ac-tx); 49 - } 50 - }
+56
theme/catppuccin-frappe.user.css
··· 1 + /* ==userstyle== 2 + @name catppuccin frappé and latte for dev.css 3 + @description dev.css theme based on catppuccin's frappé and latte colors - https://github.com/catppuccin 4 + @namespace intergrav 5 + @version 1.0.0 6 + @author intergrav <intergrav@proton.me> (https://github.com/intergrav) 7 + @homepageURL https://github.com/intergrav/dev.css 8 + @supportURL https://github.com/intergrav/dev.css/issues 9 + @license MIT 10 + ==/userstyle== */ 11 + 12 + :root { 13 + /* light colors - latte */ 14 + --dc-cs: light; 15 + --dc-tx-1: #4c4f69; /* primary text | Text */ 16 + --dc-tx-2: #4c4f69; /* secondary text | Text */ 17 + --dc-bg-1: #eff1f5; /* primary background | Base */ 18 + --dc-bg-2: #e6e9ef; /* secondary background | Mantle */ 19 + --dc-bg-3: #ccd0da; /* border | Surface0 */ 20 + --dc-lk-1: #1e66f5; /* link text | Blue */ 21 + --dc-lkb-1: #bcc0cc; /* link button | Surface1 */ 22 + --dc-lkb-2: #ccd0da; /* link button hover | Surface0 */ 23 + --dc-lkb-tx: #4c4f69; /* text over link button | Text */ 24 + --dc-ac-1: #8839ef; /* accent color | Mauve */ 25 + --dc-ac-tx: #eff1f5; /* text over accent color | Base */ 26 + 27 + --dc-d-cs: dark; 28 + --dc-d-tx-1: #c6d0f5; /* primary text | Text */ 29 + --dc-d-tx-2: #c6d0f5; /* secondary text | Text */ 30 + --dc-d-bg-1: #303446; /* primary background | Base */ 31 + --dc-d-bg-2: #292c3c; /* secondary background | Mantle */ 32 + --dc-d-bg-3: #414559; /* border | Surface0 */ 33 + --dc-d-lk-1: #8caaee; /* link text | Blue */ 34 + --dc-d-lkb-1: #51576d; /* link button | Surface1 */ 35 + --dc-d-lkb-2: #414559; /* link button hover | Surface0 */ 36 + --dc-d-lkb-tx: #c6d0f5; /* text over link button | Text */ 37 + --dc-d-ac-1: #ca9ee6; /* accent color | Mauve */ 38 + --dc-d-ac-tx: #303446; /* text over accent color | Base */ 39 + } 40 + 41 + @media (prefers-color-scheme: dark) { 42 + :root { 43 + --dc-cs: var(--dc-d-cs); 44 + --dc-tx-1: var(--dc-d-tx-1); 45 + --dc-tx-2: var(--dc-d-tx-2); 46 + --dc-bg-1: var(--dc-d-bg-1); 47 + --dc-bg-2: var(--dc-d-bg-2); 48 + --dc-bg-3: var(--dc-d-bg-3); 49 + --dc-lk-1: var(--dc-d-lk-1); 50 + --dc-lkb-1: var(--dc-d-lkb-1); 51 + --dc-lkb-2: var(--dc-d-lkb-2); 52 + --dc-lkb-tx: var(--dc-d-lkb-tx); 53 + --dc-ac-1: var(--dc-d-ac-1); 54 + --dc-ac-tx: var(--dc-d-ac-tx); 55 + } 56 + }
-50
theme/catppuccin-macchiato.css
··· 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 - /* about: catppuccin's macchiato color scheme - https://github.com/catppuccin */ 3 - /* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */ 4 - 5 - :root { 6 - /* light colors - latte */ 7 - --dc-cs: light; 8 - --dc-tx-1: #4c4f69; /* primary text | Text */ 9 - --dc-tx-2: #4c4f69; /* secondary text | Text */ 10 - --dc-bg-1: #e6e9ef; /* main background | Mantle */ 11 - --dc-bg-2: #eff1f5; /* secondary background | Base */ 12 - --dc-bg-3: #ccd0da; /* outlines | Surface0 */ 13 - --dc-lk-1: #1e66f5; /* link text | Blue */ 14 - --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */ 15 - --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */ 16 - --dc-lkb-tx: #4c4f69; /* link button text | Text */ 17 - --dc-ac-1: #8839ef; /* accent color | Mauve */ 18 - --dc-ac-tx: #eff1f5; /* accent color text | Base */ 19 - 20 - /* dark colors */ 21 - --dc-d-cs: dark; 22 - --dc-d-tx-1: #cad3f5; /* primary text | Text */ 23 - --dc-d-tx-2: #cad3f5; /* secondary text | Text */ 24 - --dc-d-bg-1: #1e2030; /* main background | Mantle */ 25 - --dc-d-bg-2: #24273a; /* secondary background | Base */ 26 - --dc-d-bg-3: #363a4f; /* outlines | Surface0 */ 27 - --dc-d-lk-1: #8aadf4; /* link text | Blue */ 28 - --dc-d-lkb-1: #494d64; /* link button background | Surface1 */ 29 - --dc-d-lkb-2: #363a4f; /* link button background (hover) | Surface0 */ 30 - --dc-d-lkb-tx: #cad3f5; /* link button text | Text */ 31 - --dc-d-ac-1: #c6a0f6; /* accent color | Mauve */ 32 - --dc-d-ac-tx: #24273a; /* accent color text | Base */ 33 - } 34 - 35 - @media (prefers-color-scheme: dark) { 36 - :root { 37 - --dc-cs: var(--dc-d-cs); 38 - --dc-tx-1: var(--dc-d-tx-1); 39 - --dc-tx-2: var(--dc-d-tx-2); 40 - --dc-bg-1: var(--dc-d-bg-1); 41 - --dc-bg-2: var(--dc-d-bg-2); 42 - --dc-bg-3: var(--dc-d-bg-3); 43 - --dc-lk-1: var(--dc-d-lk-1); 44 - --dc-lkb-1: var(--dc-d-lkb-1); 45 - --dc-lkb-2: var(--dc-d-lkb-2); 46 - --dc-lkb-tx: var(--dc-d-lkb-tx); 47 - --dc-ac-1: var(--dc-d-ac-1); 48 - --dc-ac-tx: var(--dc-d-ac-tx); 49 - } 50 - }
+57
theme/catppuccin-macchiato.user.css
··· 1 + /* ==userstyle== 2 + @name catppuccin macchiato and latte for dev.css 3 + @description dev.css theme based on catppuccin's macchiato and latte colors - https://github.com/catppuccin 4 + @namespace intergrav 5 + @version 1.0.0 6 + @author intergrav <intergrav@proton.me> (https://github.com/intergrav) 7 + @homepageURL https://github.com/intergrav/dev.css 8 + @supportURL https://github.com/intergrav/dev.css/issues 9 + @license MIT 10 + ==/userstyle== */ 11 + 12 + :root { 13 + /* light colors - latte */ 14 + --dc-cs: light; 15 + --dc-tx-1: #4c4f69; /* primary text | Text */ 16 + --dc-tx-2: #4c4f69; /* secondary text | Text */ 17 + --dc-bg-1: #eff1f5; /* primary background | Base */ 18 + --dc-bg-2: #e6e9ef; /* secondary background | Mantle */ 19 + --dc-bg-3: #ccd0da; /* border | Surface0 */ 20 + --dc-lk-1: #1e66f5; /* link text | Blue */ 21 + --dc-lkb-1: #bcc0cc; /* link button | Surface1 */ 22 + --dc-lkb-2: #ccd0da; /* link button hover | Surface0 */ 23 + --dc-lkb-tx: #4c4f69; /* text over link button | Text */ 24 + --dc-ac-1: #8839ef; /* accent color | Mauve */ 25 + --dc-ac-tx: #eff1f5; /* text over accent color | Base */ 26 + 27 + /* dark colors - macchiato */ 28 + --dc-d-cs: dark; 29 + --dc-d-tx-1: #cad3f5; /* primary text | Text */ 30 + --dc-d-tx-2: #cad3f5; /* secondary text | Text */ 31 + --dc-d-bg-1: #24273a; /* primary background | Base */ 32 + --dc-d-bg-2: #1e2030; /* secondary background | Mantle */ 33 + --dc-d-bg-3: #363a4f; /* border | Surface0 */ 34 + --dc-d-lk-1: #8aadf4; /* link text | Blue */ 35 + --dc-d-lkb-1: #494d64; /* link button | Surface1 */ 36 + --dc-d-lkb-2: #363a4f; /* link button hover | Surface0 */ 37 + --dc-d-lkb-tx: #cad3f5; /* text over link button | Text */ 38 + --dc-d-ac-1: #c6a0f6; /* accent color | Mauve */ 39 + --dc-d-ac-tx: #24273a; /* text over accent color | Base */ 40 + } 41 + 42 + @media (prefers-color-scheme: dark) { 43 + :root { 44 + --dc-cs: var(--dc-d-cs); 45 + --dc-tx-1: var(--dc-d-tx-1); 46 + --dc-tx-2: var(--dc-d-tx-2); 47 + --dc-bg-1: var(--dc-d-bg-1); 48 + --dc-bg-2: var(--dc-d-bg-2); 49 + --dc-bg-3: var(--dc-d-bg-3); 50 + --dc-lk-1: var(--dc-d-lk-1); 51 + --dc-lkb-1: var(--dc-d-lkb-1); 52 + --dc-lkb-2: var(--dc-d-lkb-2); 53 + --dc-lkb-tx: var(--dc-d-lkb-tx); 54 + --dc-ac-1: var(--dc-d-ac-1); 55 + --dc-ac-tx: var(--dc-d-ac-tx); 56 + } 57 + }
-50
theme/catppuccin-mocha.css
··· 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 - /* about: catppuccin's mocha color scheme - https://github.com/catppuccin */ 3 - /* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */ 4 - 5 - :root { 6 - /* light colors - latte */ 7 - --dc-cs: light; 8 - --dc-tx-1: #4c4f69; /* primary text | Text */ 9 - --dc-tx-2: #4c4f69; /* secondary text | Text */ 10 - --dc-bg-1: #e6e9ef; /* main background | Mantle */ 11 - --dc-bg-2: #eff1f5; /* secondary background | Base */ 12 - --dc-bg-3: #ccd0da; /* outlines | Surface0 */ 13 - --dc-lk-1: #1e66f5; /* link text | Blue */ 14 - --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */ 15 - --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */ 16 - --dc-lkb-tx: #4c4f69; /* link button text | Text */ 17 - --dc-ac-1: #8839ef; /* accent color | Mauve */ 18 - --dc-ac-tx: #eff1f5; /* accent color text | Base */ 19 - 20 - /* dark colors */ 21 - --dc-d-cs: dark; 22 - --dc-d-tx-1: #cdd6f4; /* primary text | Text */ 23 - --dc-d-tx-2: #cdd6f4; /* secondary text | Text */ 24 - --dc-d-bg-1: #181825; /* main background | Mantle */ 25 - --dc-d-bg-2: #1e1e2e; /* secondary background | Base */ 26 - --dc-d-bg-3: #313244; /* outlines | Surface0 */ 27 - --dc-d-lk-1: #89b4fa; /* link text | Blue */ 28 - --dc-d-lkb-1: #45475a; /* link button background | Surface1 */ 29 - --dc-d-lkb-2: #313244; /* link button background (hover) | Surface0 */ 30 - --dc-d-lkb-tx: #cdd6f4; /* link button text | Text */ 31 - --dc-d-ac-1: #cba6f7; /* accent color | Mauve */ 32 - --dc-d-ac-tx: #1e1e2e; /* accent color text | Base */ 33 - } 34 - 35 - @media (prefers-color-scheme: dark) { 36 - :root { 37 - --dc-cs: var(--dc-d-cs); 38 - --dc-tx-1: var(--dc-d-tx-1); 39 - --dc-tx-2: var(--dc-d-tx-2); 40 - --dc-bg-1: var(--dc-d-bg-1); 41 - --dc-bg-2: var(--dc-d-bg-2); 42 - --dc-bg-3: var(--dc-d-bg-3); 43 - --dc-lk-1: var(--dc-d-lk-1); 44 - --dc-lkb-1: var(--dc-d-lkb-1); 45 - --dc-lkb-2: var(--dc-d-lkb-2); 46 - --dc-lkb-tx: var(--dc-d-lkb-tx); 47 - --dc-ac-1: var(--dc-d-ac-1); 48 - --dc-ac-tx: var(--dc-d-ac-tx); 49 - } 50 - }
+57
theme/catppuccin-mocha.user.css
··· 1 + /* ==userstyle== 2 + @name catppuccin mocha and latte for dev.css 3 + @description dev.css theme based on catppuccin's mocha and latte colors - https://github.com/catppuccin 4 + @namespace intergrav 5 + @version 1.0.0 6 + @author intergrav <intergrav@proton.me> (https://github.com/intergrav) 7 + @homepageURL https://github.com/intergrav/dev.css 8 + @supportURL https://github.com/intergrav/dev.css/issues 9 + @license MIT 10 + ==/userstyle== */ 11 + 12 + :root { 13 + /* light colors - latte */ 14 + --dc-cs: light; 15 + --dc-tx-1: #4c4f69; /* primary text | Text */ 16 + --dc-tx-2: #4c4f69; /* secondary text | Text */ 17 + --dc-bg-1: #eff1f5; /* primary background | Base */ 18 + --dc-bg-2: #e6e9ef; /* secondary background | Mantle */ 19 + --dc-bg-3: #ccd0da; /* border | Surface0 */ 20 + --dc-lk-1: #1e66f5; /* link text | Blue */ 21 + --dc-lkb-1: #bcc0cc; /* link button | Surface1 */ 22 + --dc-lkb-2: #ccd0da; /* link button hover | Surface0 */ 23 + --dc-lkb-tx: #4c4f69; /* text over link button | Text */ 24 + --dc-ac-1: #8839ef; /* accent color | Mauve */ 25 + --dc-ac-tx: #eff1f5; /* text over accent color | Base */ 26 + 27 + /* dark colors - mocha */ 28 + --dc-d-cs: dark; 29 + --dc-d-tx-1: #cdd6f4; /* primary text | Text */ 30 + --dc-d-tx-2: #cdd6f4; /* secondary text | Text */ 31 + --dc-d-bg-1: #1e1e2e; /* primary background | Base */ 32 + --dc-d-bg-2: #181825; /* secondary background | Mantle */ 33 + --dc-d-bg-3: #313244; /* border | Surface0 */ 34 + --dc-d-lk-1: #89b4fa; /* link text | Blue */ 35 + --dc-d-lkb-1: #45475a; /* link button | Surface1 */ 36 + --dc-d-lkb-2: #313244; /* link button hover | Surface0 */ 37 + --dc-d-lkb-tx: #cdd6f4; /* text over link button | Text */ 38 + --dc-d-ac-1: #cba6f7; /* accent color | Mauve */ 39 + --dc-d-ac-tx: #1e1e2e; /* text over accent color | Base */ 40 + } 41 + 42 + @media (prefers-color-scheme: dark) { 43 + :root { 44 + --dc-cs: var(--dc-d-cs); 45 + --dc-tx-1: var(--dc-d-tx-1); 46 + --dc-tx-2: var(--dc-d-tx-2); 47 + --dc-bg-1: var(--dc-d-bg-1); 48 + --dc-bg-2: var(--dc-d-bg-2); 49 + --dc-bg-3: var(--dc-d-bg-3); 50 + --dc-lk-1: var(--dc-d-lk-1); 51 + --dc-lkb-1: var(--dc-d-lkb-1); 52 + --dc-lkb-2: var(--dc-d-lkb-2); 53 + --dc-lkb-tx: var(--dc-d-lkb-tx); 54 + --dc-ac-1: var(--dc-d-ac-1); 55 + --dc-ac-tx: var(--dc-d-ac-tx); 56 + } 57 + }
-18
theme/day.css
··· 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 - /* about: makes it always light, regardless of device setting */ 3 - 4 - :root { 5 - /* colors */ 6 - --dc-cs: light; 7 - --dc-tx-1: #000000; 8 - --dc-tx-2: #1a1a1a; 9 - --dc-bg-1: #fafafa; 10 - --dc-bg-2: #fff; 11 - --dc-bg-3: #ebebeb; 12 - --dc-lk-1: #0068d6; 13 - --dc-lkb-1: #0072f5; 14 - --dc-lkb-2: #0062d1; 15 - --dc-lkb-tx: #ededed; 16 - --dc-ac-1: #8e4ec6; 17 - --dc-ac-tx: #ededed; 18 - }
+26
theme/day.user.css
··· 1 + /* ==userstyle== 2 + @name day for dev.css 3 + @description dev.css theme that makes it always light mode regardless of device setting 4 + @namespace intergrav 5 + @version 1.0.0 6 + @author intergrav <intergrav@proton.me> (https://github.com/intergrav) 7 + @homepageURL https://github.com/intergrav/dev.css 8 + @supportURL https://github.com/intergrav/dev.css/issues 9 + @license MIT 10 + ==/userstyle== */ 11 + 12 + :root { 13 + /* colors */ 14 + --dc-cs: light; 15 + --dc-tx-1: #171717; 16 + --dc-tx-2: #666; 17 + --dc-bg-1: #fff; 18 + --dc-bg-2: #fafafa; 19 + --dc-bg-3: #ebebeb; 20 + --dc-lk-1: #005ff2; 21 + --dc-lkb-1: #006bff; 22 + --dc-lkb-2: #0059ec; 23 + --dc-lkb-tx: #fff; 24 + --dc-ac-1: #a000f8; 25 + --dc-ac-tx: #fff; 26 + }
-18
theme/night.css
··· 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 - /* about: makes it always dark, regardless of device setting */ 3 - 4 - :root { 5 - /* colors */ 6 - --dc-cs: dark; 7 - --dc-tx-1: #ededed; 8 - --dc-tx-2: #a1a1a1; 9 - --dc-bg-1: #000; 10 - --dc-bg-2: #ffffff0f; 11 - --dc-bg-3: #ffffff24; 12 - --dc-lk-1: #52a8ff; 13 - --dc-lkb-1: #0072f5; 14 - --dc-lkb-2: #0062d1; 15 - --dc-lkb-tx: #ededed; 16 - --dc-ac-1: #8e4ec6; 17 - --dc-ac-tx: #ededed; 18 - }
+26
theme/night.user.css
··· 1 + /* ==userstyle== 2 + @name night for dev.css 3 + @description dev.css theme that makes it always dark mode regardless of device setting 4 + @namespace intergrav 5 + @version 1.0.0 6 + @author intergrav <intergrav@proton.me> (https://github.com/intergrav) 7 + @homepageURL https://github.com/intergrav/dev.css 8 + @supportURL https://github.com/intergrav/dev.css/issues 9 + @license MIT 10 + ==/userstyle== */ 11 + 12 + :root { 13 + /* colors */ 14 + --dc-cs: dark; 15 + --dc-tx-1: #ededed; 16 + --dc-tx-2: #a1a1a1; 17 + --dc-bg-1: #0a0a0a; 18 + --dc-bg-2: #000; 19 + --dc-bg-3: #2e2e2e; 20 + --dc-lk-1: #47a8ff; 21 + --dc-lkb-1: #006efe; 22 + --dc-lkb-2: #005be7; 23 + --dc-lkb-tx: #fff; 24 + --dc-ac-1: #9440d5; 25 + --dc-ac-tx: #fff; 26 + }
-24
theme/terminal.css
··· 1 - /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 - /* about: has a similar look to a computer terminal */ 3 - 4 - @import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css"); 5 - 6 - :root { 7 - /* font families */ 8 - --dc-font-sans: "Geist Mono", monospace; 9 - --dc-font-mono: "Geist Mono", monospace; 10 - 11 - /* colors */ 12 - --dc-cs: dark; 13 - --dc-tx-1: #ffffff; 14 - --dc-tx-2: #eeeeee; 15 - --dc-bg-1: #000000; 16 - --dc-bg-2: #002700; 17 - --dc-bg-3: #005800; 18 - --dc-lk-1: #00ff00; 19 - --dc-lkb-1: #00ff00; 20 - --dc-lkb-2: #00d400; 21 - --dc-lkb-tx: #000000; 22 - --dc-ac-1: #00ff00; 23 - --dc-ac-tx: #000000; 24 - }
+31
theme/terminal.user.css
··· 1 + /* ==userstyle== 2 + @name terminal for dev.css 3 + @description dev.css theme that has a similar look to a computer terminal 4 + @namespace intergrav 5 + @version 1.0.0 6 + @author intergrav <intergrav@proton.me> (https://github.com/intergrav) 7 + @homepageURL https://github.com/intergrav/dev.css 8 + @supportURL https://github.com/intergrav/dev.css/issues 9 + @license MIT 10 + ==/userstyle== */ 11 + 12 + :root { 13 + /* font families */ 14 + --dc-font: var(--dc-font-mono); 15 + --dc-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas, 16 + "Liberation Mono", Menlo, monospace; 17 + 18 + /* colors */ 19 + --dc-cs: dark; 20 + --dc-tx-1: #ffffff; 21 + --dc-tx-2: #eeeeee; 22 + --dc-bg-1: #001a00; 23 + --dc-bg-2: #000; 24 + --dc-bg-3: #005800; 25 + --dc-lk-1: #00ff00; 26 + --dc-lkb-1: #00ff00; 27 + --dc-lkb-2: #00d400; 28 + --dc-lkb-tx: #000; 29 + --dc-ac-1: #00ff00; 30 + --dc-ac-tx: #000; 31 + }