@intergrav/dev.css 3.1.1 → 3.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +122 -122
- package/addon/header-sidebar.css +35 -35
- package/dev.css +488 -488
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,122 +1,122 @@
|
|
|
1
|
-
# intergrav/dev.css
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@intergrav/dev.css) [](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [](https://github.com/intergrav/dev.css)
|
|
4
|
-
|
|
5
|
-
Tiny, simple, classless CSS framework in the style of Vercel's [Geist](https://vercel.com/geist) design system. Inspired by [xz/new.css](https://github.com/xz/new.css).
|
|
6
|
-
|
|
7
|
-
The minified stylesheet weighs only **~4.8kb** and can make any plain HTML file look clean and modern. It also has a light and dark theme.
|
|
8
|
-
|
|
9
|
-
<details>
|
|
10
|
-
<summary>Preview</summary>
|
|
11
|
-
|
|
12
|
-
<img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-light.png" alt="dev.css desktop demo, light mode">
|
|
13
|
-
<img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-dark.png" alt="dev.css desktop demo, dark mode">
|
|
14
|
-
<img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-light.png" alt="dev.css mobile demo, dark mode">
|
|
15
|
-
<img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-dark.png" alt="dev.css mobile demo, dark mode">
|
|
16
|
-
|
|
17
|
-
</details>
|
|
18
|
-
|
|
19
|
-
## Importing
|
|
20
|
-
|
|
21
|
-
In your HTML's `<head>` all you have to write is this, and you're done! (`.min` means to minify the file)
|
|
22
|
-
|
|
23
|
-
```html
|
|
24
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3">
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
I also recommend adding a font through [intergrav/fonts](https://github.com/intergrav/fonts). Geist or Inter work with dev.css out of the box. It will use the default system/browser san-serif fonts if those are not available.
|
|
28
|
-
|
|
29
|
-
### Geist Font
|
|
30
|
-
|
|
31
|
-
```html
|
|
32
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css">
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
Recommended monospace variant:
|
|
36
|
-
|
|
37
|
-
```html
|
|
38
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css">
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### Inter Font
|
|
42
|
-
|
|
43
|
-
```html
|
|
44
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css">
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
## Elements
|
|
48
|
-
|
|
49
|
-
dev.css takes advantage of semantic HTML elements. Here are some guidelines on how these should be used for the best results.
|
|
50
|
-
|
|
51
|
-
### Header
|
|
52
|
-
|
|
53
|
-
Use the `<header>` tag to create a large header for your page. Only use this at the very top of your `<body>`, or else it may look wonky.
|
|
54
|
-
|
|
55
|
-
For the title, the header should contain an `<h1>` tag. You can also add an `<h4>` tag before the `<h1>` tag if you want to show extra information.
|
|
56
|
-
|
|
57
|
-
If you need a navigation bar, you can add a `<nav>` with `<a>` links inside
|
|
58
|
-
|
|
59
|
-
Optionally, you could add a `<p>` tag after the `<h1>` tag if you want to give a description of the page the user is currently on.
|
|
60
|
-
|
|
61
|
-
### Footer
|
|
62
|
-
|
|
63
|
-
Optionally, use the `<footer>` tag to create a footer for your page. Only use this at the bottom of your `<body>`, or else it may look wonky. You can add whatever content in here that you'd like.
|
|
64
|
-
|
|
65
|
-
### Text
|
|
66
|
-
|
|
67
|
-
Wrap all body text in `<p>` tags, unless it's the sole child of another element. If you want to write quotes, you can use the `<blockquote>` tag. To highlight text, wrap it in the `<mark>` tag. Want to show code? Use `<code>` for short inline code. Use `<pre>` for code blocks. Use `<kbd>` for keyboard input.
|
|
68
|
-
|
|
69
|
-
### Button
|
|
70
|
-
|
|
71
|
-
For a link button, you can wrap the button in an `<a>` tag. Here's a code example:
|
|
72
|
-
|
|
73
|
-
```html
|
|
74
|
-
<a href="https://example.com">
|
|
75
|
-
<button>Click me!</button>
|
|
76
|
-
</a>
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
### Details
|
|
80
|
-
|
|
81
|
-
The `<details>` element can make a toggle-able dropdown without using any JavaScript. Here's a code example:
|
|
82
|
-
|
|
83
|
-
```html
|
|
84
|
-
<details>
|
|
85
|
-
<summary>Click me!</summary>
|
|
86
|
-
<p>Lorem ipsum dolor sit amet.</p>
|
|
87
|
-
</details>
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
### More
|
|
91
|
-
|
|
92
|
-
To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
|
|
93
|
-
|
|
94
|
-
## Addons
|
|
95
|
-
|
|
96
|
-
dev.css at the minimum is very basic. Addons are small CSS snippets that adjust or add on to the functionality of dev.css, based on what you want for your users. Examples include turning the header into a sidebar, or making the header sticky. If you are adding an addon, it must be added **after** the main dev.css file. You might also need order them in a specific way to make it work. Here are a few built-in addons.
|
|
97
|
-
|
|
98
|
-
### `header-sticky.css`
|
|
99
|
-
|
|
100
|
-
This makes the header sticky - always at the top of the screen. Keep in mind that I do not recommend using this if your header is large, as it could affect usability of your site since it'll always be onscreen and will take up a lot of space. Only use it if your header is small, e.g. only contains a one-line `<h1>` and `<nav>`.
|
|
101
|
-
|
|
102
|
-
```html
|
|
103
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css">
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
### `header-sidebar.css`
|
|
107
|
-
|
|
108
|
-
This turns the header into a sidebar on displays that are wide enough to support it. It will list the navigation out vertically in this mode. It will responsively turn back into the default state if the viewport is too thin to contain everything. If you are using this with `header-sticky.css`, be sure to add it **after** that rather than before. To import it, add this line after `dev.css`:
|
|
109
|
-
|
|
110
|
-
```html
|
|
111
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
## Themes
|
|
115
|
-
|
|
116
|
-
You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. To use a theme, simply apply it after the dev.css stylesheet. I provide a terminal-like theme, night and day themes, and a set of Catppuccin themes. For example, to apply the terminal theme, place this after your main stylesheet:
|
|
117
|
-
|
|
118
|
-
```html
|
|
119
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
If you're making a theme, I highly recommend using the `boilerplate-auto.css` template rather than the `boilerplate.css` template for accessibility reasons.
|
|
1
|
+
# intergrav/dev.css
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@intergrav/dev.css) [](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [](https://github.com/intergrav/dev.css)
|
|
4
|
+
|
|
5
|
+
Tiny, simple, classless CSS framework in the style of Vercel's [Geist](https://vercel.com/geist) design system. Inspired by [xz/new.css](https://github.com/xz/new.css).
|
|
6
|
+
|
|
7
|
+
The minified stylesheet weighs only **~4.8kb** and can make any plain HTML file look clean and modern. It also has a light and dark theme.
|
|
8
|
+
|
|
9
|
+
<details>
|
|
10
|
+
<summary>Preview</summary>
|
|
11
|
+
|
|
12
|
+
<img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-light.png" alt="dev.css desktop demo, light mode">
|
|
13
|
+
<img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-dark.png" alt="dev.css desktop demo, dark mode">
|
|
14
|
+
<img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-light.png" alt="dev.css mobile demo, dark mode">
|
|
15
|
+
<img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-dark.png" alt="dev.css mobile demo, dark mode">
|
|
16
|
+
|
|
17
|
+
</details>
|
|
18
|
+
|
|
19
|
+
## Importing
|
|
20
|
+
|
|
21
|
+
In your HTML's `<head>` all you have to write is this, and you're done! (`.min` means to minify the file)
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3">
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
I also recommend adding a font through [intergrav/fonts](https://github.com/intergrav/fonts). Geist or Inter work with dev.css out of the box. It will use the default system/browser san-serif fonts if those are not available.
|
|
28
|
+
|
|
29
|
+
### Geist Font
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css">
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Recommended monospace variant:
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css">
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Inter Font
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css">
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Elements
|
|
48
|
+
|
|
49
|
+
dev.css takes advantage of semantic HTML elements. Here are some guidelines on how these should be used for the best results.
|
|
50
|
+
|
|
51
|
+
### Header
|
|
52
|
+
|
|
53
|
+
Use the `<header>` tag to create a large header for your page. Only use this at the very top of your `<body>`, or else it may look wonky.
|
|
54
|
+
|
|
55
|
+
For the title, the header should contain an `<h1>` tag. You can also add an `<h4>` tag before the `<h1>` tag if you want to show extra information.
|
|
56
|
+
|
|
57
|
+
If you need a navigation bar, you can add a `<nav>` with a `<ul>` that has `<li>` items with `<a>` links inside them. See the `demo.html` for an example. dev.css will automatically lay these out horizontally, with dividing bullet points between them. If you are using the `header-sidebar.css` addon, these items will lay out vertically when in sidebar mode.
|
|
58
|
+
|
|
59
|
+
Optionally, you could add a `<p>` tag after the `<h1>` tag if you want to give a description of the page the user is currently on.
|
|
60
|
+
|
|
61
|
+
### Footer
|
|
62
|
+
|
|
63
|
+
Optionally, use the `<footer>` tag to create a footer for your page. Only use this at the bottom of your `<body>`, or else it may look wonky. You can add whatever content in here that you'd like.
|
|
64
|
+
|
|
65
|
+
### Text
|
|
66
|
+
|
|
67
|
+
Wrap all body text in `<p>` tags, unless it's the sole child of another element. If you want to write quotes, you can use the `<blockquote>` tag. To highlight text, wrap it in the `<mark>` tag. Want to show code? Use `<code>` for short inline code. Use `<pre>` for code blocks. Use `<kbd>` for keyboard input.
|
|
68
|
+
|
|
69
|
+
### Button
|
|
70
|
+
|
|
71
|
+
For a link button, you can wrap the button in an `<a>` tag. Here's a code example:
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<a href="https://example.com">
|
|
75
|
+
<button>Click me!</button>
|
|
76
|
+
</a>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Details
|
|
80
|
+
|
|
81
|
+
The `<details>` element can make a toggle-able dropdown without using any JavaScript. Here's a code example:
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<details>
|
|
85
|
+
<summary>Click me!</summary>
|
|
86
|
+
<p>Lorem ipsum dolor sit amet.</p>
|
|
87
|
+
</details>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### More
|
|
91
|
+
|
|
92
|
+
To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
|
|
93
|
+
|
|
94
|
+
## Addons
|
|
95
|
+
|
|
96
|
+
dev.css at the minimum is very basic. Addons are small CSS snippets that adjust or add on to the functionality of dev.css, based on what you want for your users. Examples include turning the header into a sidebar, or making the header sticky. If you are adding an addon, it must be added **after** the main dev.css file. You might also need order them in a specific way to make it work. Here are a few built-in addons.
|
|
97
|
+
|
|
98
|
+
### `header-sticky.css`
|
|
99
|
+
|
|
100
|
+
This makes the header sticky - always at the top of the screen. Keep in mind that I do not recommend using this if your header is large, as it could affect usability of your site since it'll always be onscreen and will take up a lot of space. Only use it if your header is small, e.g. only contains a one-line `<h1>` and `<nav>`.
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css">
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### `header-sidebar.css`
|
|
107
|
+
|
|
108
|
+
This turns the header into a sidebar on displays that are wide enough to support it. It will list the navigation out vertically in this mode. It will responsively turn back into the default state if the viewport is too thin to contain everything. If you are using this with `header-sticky.css`, be sure to add it **after** that rather than before. To import it, add this line after `dev.css`:
|
|
109
|
+
|
|
110
|
+
```html
|
|
111
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Themes
|
|
115
|
+
|
|
116
|
+
You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. To use a theme, simply apply it after the dev.css stylesheet. I provide a terminal-like theme, night and day themes, and a set of Catppuccin themes. For example, to apply the terminal theme, place this after your main stylesheet:
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
If you're making a theme, I highly recommend using the `boilerplate-auto.css` template rather than the `boilerplate.css` template for accessibility reasons.
|
package/addon/header-sidebar.css
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
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 addon, be sure to include this after it */
|
|
4
|
-
|
|
5
|
-
@media (min-width: calc((48rem + 4rem) + ((16rem)*2))) {
|
|
6
|
-
header {
|
|
7
|
-
all: unset;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
header {
|
|
11
|
-
padding: 3rem 2rem;
|
|
12
|
-
padding-right: 0;
|
|
13
|
-
position: fixed;
|
|
14
|
-
top: 0;
|
|
15
|
-
left: calc(50% - ((48rem + 4rem) / 2) - (16rem));
|
|
16
|
-
width: 16rem;
|
|
17
|
-
height: calc(100% - 6rem);
|
|
18
|
-
overflow-y: auto;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
header nav ul {
|
|
22
|
-
padding-left: 1rem;
|
|
23
|
-
border-top: 1px solid var(--dc-bg-3);
|
|
24
|
-
padding-top: 1rem;
|
|
25
|
-
margin-top: 1rem;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
header nav ul li {
|
|
29
|
-
display: list-item;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
header nav ul li:not(:first-child)::before {
|
|
33
|
-
content: unset;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
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 addon, be sure to include this after it */
|
|
4
|
+
|
|
5
|
+
@media (min-width: calc((48rem + 4rem) + ((16rem)*2))) {
|
|
6
|
+
header {
|
|
7
|
+
all: unset;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
header {
|
|
11
|
+
padding: 3rem 2rem;
|
|
12
|
+
padding-right: 0;
|
|
13
|
+
position: fixed;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: calc(50% - ((48rem + 4rem) / 2) - (16rem));
|
|
16
|
+
width: 16rem;
|
|
17
|
+
height: calc(100% - 6rem);
|
|
18
|
+
overflow-y: auto;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
header nav ul {
|
|
22
|
+
padding-left: 1rem;
|
|
23
|
+
border-top: 1px solid var(--dc-bg-3);
|
|
24
|
+
padding-top: 1rem;
|
|
25
|
+
margin-top: 1rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
header nav ul li {
|
|
29
|
+
display: list-item;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
header nav ul li:not(:first-child)::before {
|
|
33
|
+
content: unset;
|
|
34
|
+
}
|
|
35
|
+
}
|
package/dev.css
CHANGED
|
@@ -1,488 +1,488 @@
|
|
|
1
|
-
/* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
-
/* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */
|
|
3
|
-
|
|
4
|
-
/* table of contents
|
|
5
|
-
1. configuration
|
|
6
|
-
2. dark mode handling
|
|
7
|
-
3. css reset
|
|
8
|
-
4. margins for most elements
|
|
9
|
-
5. font family
|
|
10
|
-
6. body and selection styling
|
|
11
|
-
7. typography
|
|
12
|
-
8. blockquotes
|
|
13
|
-
9. header
|
|
14
|
-
10. footer
|
|
15
|
-
11. buttons and inputs
|
|
16
|
-
12. code and keyboards
|
|
17
|
-
13. details
|
|
18
|
-
14. description lists
|
|
19
|
-
15. horizontal rules
|
|
20
|
-
16. fieldsets
|
|
21
|
-
17. tables
|
|
22
|
-
18. lists
|
|
23
|
-
*/
|
|
24
|
-
|
|
25
|
-
/* 1. configuration */
|
|
26
|
-
:root {
|
|
27
|
-
/* font families */
|
|
28
|
-
--dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
|
|
29
|
-
"Segoe UI", sans-serif;
|
|
30
|
-
--dc-font-mono: "Geist Mono", monospace;
|
|
31
|
-
|
|
32
|
-
/* light colors */
|
|
33
|
-
--dc-tx-1: #000000;
|
|
34
|
-
--dc-tx-2: #1a1a1a;
|
|
35
|
-
--dc-bg-1: #fafafa;
|
|
36
|
-
--dc-bg-2: #fff;
|
|
37
|
-
--dc-bg-3: #ebebeb;
|
|
38
|
-
--dc-lk-1: #0068d6;
|
|
39
|
-
--dc-lkb-1: #0072f5;
|
|
40
|
-
--dc-lkb-2: #0062d1;
|
|
41
|
-
--dc-lkb-tx: #ededed;
|
|
42
|
-
--dc-ac-1: #8e4ec6;
|
|
43
|
-
--dc-ac-tx: #ededed;
|
|
44
|
-
|
|
45
|
-
/* dark colors */
|
|
46
|
-
--dc-d-tx-1: #ededed;
|
|
47
|
-
--dc-d-tx-2: #a1a1a1;
|
|
48
|
-
--dc-d-bg-1: #000;
|
|
49
|
-
--dc-d-bg-2: #0a0a0a;
|
|
50
|
-
--dc-d-bg-3: #2e2e2e;
|
|
51
|
-
--dc-d-lk-1: #52a8ff;
|
|
52
|
-
--dc-d-lkb-1: #0072f5;
|
|
53
|
-
--dc-d-lkb-2: #0062d1;
|
|
54
|
-
--dc-d-lkb-tx: #ededed;
|
|
55
|
-
--dc-d-ac-1: #8e4ec6;
|
|
56
|
-
--dc-d-ac-tx: #ededed;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
/* 2. dark mode handling */
|
|
60
|
-
@media (prefers-color-scheme: dark) {
|
|
61
|
-
:root {
|
|
62
|
-
--dc-tx-1: var(--dc-d-tx-1);
|
|
63
|
-
--dc-tx-2: var(--dc-d-tx-2);
|
|
64
|
-
--dc-bg-1: var(--dc-d-bg-1);
|
|
65
|
-
--dc-bg-2: var(--dc-d-bg-2);
|
|
66
|
-
--dc-bg-3: var(--dc-d-bg-3);
|
|
67
|
-
--dc-lk-1: var(--dc-d-lk-1);
|
|
68
|
-
--dc-lkb-1: var(--dc-d-lkb-1);
|
|
69
|
-
--dc-lkb-2: var(--dc-d-lkb-2);
|
|
70
|
-
--dc-lkb-tx: var(--dc-d-lkb-tx);
|
|
71
|
-
--dc-ac-1: var(--dc-d-ac-1);
|
|
72
|
-
--dc-ac-tx: var(--dc-d-ac-tx);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
/* 3. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
|
|
77
|
-
*,
|
|
78
|
-
*::before,
|
|
79
|
-
*::after {
|
|
80
|
-
box-sizing: border-box;
|
|
81
|
-
margin: 0;
|
|
82
|
-
word-break: break-word;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
body {
|
|
86
|
-
line-height: 1.5;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
img,
|
|
90
|
-
picture,
|
|
91
|
-
video,
|
|
92
|
-
canvas,
|
|
93
|
-
svg {
|
|
94
|
-
display: block;
|
|
95
|
-
max-width: 100%;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
input,
|
|
99
|
-
button,
|
|
100
|
-
textarea,
|
|
101
|
-
select {
|
|
102
|
-
font: inherit;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
#root,
|
|
106
|
-
#__next {
|
|
107
|
-
isolation: isolate;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
/* 4. margins for most elements */
|
|
111
|
-
address,
|
|
112
|
-
area,
|
|
113
|
-
article,
|
|
114
|
-
aside,
|
|
115
|
-
audio,
|
|
116
|
-
blockquote,
|
|
117
|
-
datalist,
|
|
118
|
-
details,
|
|
119
|
-
dl,
|
|
120
|
-
fieldset,
|
|
121
|
-
figure,
|
|
122
|
-
form,
|
|
123
|
-
input,
|
|
124
|
-
iframe,
|
|
125
|
-
img,
|
|
126
|
-
meter,
|
|
127
|
-
nav,
|
|
128
|
-
ol,
|
|
129
|
-
optgroup,
|
|
130
|
-
option,
|
|
131
|
-
output,
|
|
132
|
-
p,
|
|
133
|
-
pre,
|
|
134
|
-
progress,
|
|
135
|
-
ruby,
|
|
136
|
-
section,
|
|
137
|
-
table,
|
|
138
|
-
textarea,
|
|
139
|
-
ul,
|
|
140
|
-
video {
|
|
141
|
-
margin-bottom: 1rem;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
/* 5. font family */
|
|
145
|
-
html {
|
|
146
|
-
font-family: var(--dc-font-sans);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
code,
|
|
150
|
-
pre,
|
|
151
|
-
kbd,
|
|
152
|
-
samp {
|
|
153
|
-
font-family: var(--dc-font-mono);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
/* 6. body and selection styling */
|
|
157
|
-
body {
|
|
158
|
-
margin: 0 auto;
|
|
159
|
-
max-width: 48rem;
|
|
160
|
-
padding: 2rem;
|
|
161
|
-
background: var(--dc-bg-1);
|
|
162
|
-
color: var(--dc-tx-2);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
::selection {
|
|
166
|
-
background: var(--dc-ac-1);
|
|
167
|
-
color: var(--dc-ac-tx);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
/* 7. typography */
|
|
171
|
-
h1,
|
|
172
|
-
h2,
|
|
173
|
-
h3,
|
|
174
|
-
h4,
|
|
175
|
-
h5,
|
|
176
|
-
h6 {
|
|
177
|
-
line-height: 1;
|
|
178
|
-
color: var(--dc-tx-1);
|
|
179
|
-
padding-top: 1rem;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
h1,
|
|
183
|
-
h2,
|
|
184
|
-
h3 {
|
|
185
|
-
padding-bottom: 0.25rem;
|
|
186
|
-
margin-bottom: 0.5rem;
|
|
187
|
-
border-bottom: 1px solid var(--dc-bg-3);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
h4,
|
|
191
|
-
h5,
|
|
192
|
-
h6 {
|
|
193
|
-
margin-bottom: 0.25rem;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
a {
|
|
197
|
-
color: var(--dc-lk-1);
|
|
198
|
-
text-decoration: none;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
a:hover {
|
|
202
|
-
text-decoration: underline;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
mark {
|
|
206
|
-
padding: 0.125rem 0.25rem;
|
|
207
|
-
background: var(--dc-ac-1);
|
|
208
|
-
color: var(--dc-ac-tx);
|
|
209
|
-
border-radius: 0.25rem;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
/* 8. blockquotes */
|
|
213
|
-
blockquote {
|
|
214
|
-
padding: 1.25rem;
|
|
215
|
-
background: var(--dc-bg-2);
|
|
216
|
-
border: 1px solid var(--dc-bg-3);
|
|
217
|
-
border-left: 5px solid var(--dc-bg-3);
|
|
218
|
-
border-radius: 0.25rem;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
blockquote *:last-child {
|
|
222
|
-
padding-bottom: 0;
|
|
223
|
-
margin-bottom: 0;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
/* 9. header */
|
|
227
|
-
header {
|
|
228
|
-
background: var(--dc-bg-2);
|
|
229
|
-
border-bottom: 1px solid var(--dc-bg-3);
|
|
230
|
-
padding: 0.5rem calc(50vw - 50%);
|
|
231
|
-
margin: -2rem calc(50% - 50vw) 2rem;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
header * {
|
|
235
|
-
padding-top: 0rem;
|
|
236
|
-
padding-bottom: 0rem;
|
|
237
|
-
margin-top: 0.25rem;
|
|
238
|
-
margin-bottom: 0.25rem;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
header h1,
|
|
242
|
-
header h2,
|
|
243
|
-
header h3 {
|
|
244
|
-
border-bottom: 0;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
header h1 {
|
|
248
|
-
font-size: 1.6rem;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
header h2 {
|
|
252
|
-
font-size: 1.4rem;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
header h3 {
|
|
256
|
-
font-size: 1.2rem;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
header h4 {
|
|
260
|
-
font-size: 1rem;
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
header h5 {
|
|
264
|
-
font-size: 0.9rem;
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
header p {
|
|
268
|
-
font-size: 1rem;
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
header nav {
|
|
272
|
-
font-size: 0.9rem;
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
header h6 {
|
|
276
|
-
font-size: 0.8rem;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
header nav ul {
|
|
280
|
-
padding: 0;
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
header nav ul li {
|
|
284
|
-
display: inline-block;
|
|
285
|
-
margin: 0;
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
header nav ul li:not(:first-child)::before {
|
|
289
|
-
content: "• ";
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
/* 10. footer */
|
|
293
|
-
footer {
|
|
294
|
-
border-top: 1px solid var(--dc-bg-3);
|
|
295
|
-
padding: 0.5rem calc(50vw - 50%);
|
|
296
|
-
margin: 2rem calc(50% - 50vw) -2rem;
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
footer * {
|
|
300
|
-
padding-top: 0rem;
|
|
301
|
-
padding-bottom: 0rem;
|
|
302
|
-
margin-top: 0.25rem;
|
|
303
|
-
margin-bottom: 0.25rem;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
footer h1,
|
|
307
|
-
footer h2,
|
|
308
|
-
footer h3 {
|
|
309
|
-
border-bottom: 0;
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
/* 11. buttons and inputs */
|
|
313
|
-
a button,
|
|
314
|
-
button,
|
|
315
|
-
input[type="submit"],
|
|
316
|
-
input[type="reset"],
|
|
317
|
-
input[type="button"] {
|
|
318
|
-
display: inline-block;
|
|
319
|
-
padding: 0.25rem 0.75rem;
|
|
320
|
-
text-align: center;
|
|
321
|
-
text-decoration: none;
|
|
322
|
-
white-space: nowrap;
|
|
323
|
-
background: var(--dc-lkb-1);
|
|
324
|
-
color: var(--dc-lkb-tx);
|
|
325
|
-
border: 0;
|
|
326
|
-
border-radius: 0.25rem;
|
|
327
|
-
box-sizing: border-box;
|
|
328
|
-
cursor: pointer;
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
a button[disabled],
|
|
332
|
-
button[disabled],
|
|
333
|
-
input[type="submit"][disabled],
|
|
334
|
-
input[type="reset"][disabled],
|
|
335
|
-
input[type="button"][disabled] {
|
|
336
|
-
cursor: not-allowed;
|
|
337
|
-
opacity: 0.5;
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
.button:focus,
|
|
341
|
-
.button:enabled:hover,
|
|
342
|
-
button:focus,
|
|
343
|
-
button:enabled:hover,
|
|
344
|
-
input[type="submit"]:focus,
|
|
345
|
-
input[type="submit"]:enabled:hover,
|
|
346
|
-
input[type="reset"]:focus,
|
|
347
|
-
input[type="reset"]:enabled:hover,
|
|
348
|
-
input[type="button"]:focus,
|
|
349
|
-
input[type="button"]:enabled:hover {
|
|
350
|
-
background: var(--dc-lkb-2);
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
textarea,
|
|
354
|
-
select,
|
|
355
|
-
input {
|
|
356
|
-
padding: 0.25rem 0.5rem;
|
|
357
|
-
margin-bottom: 0.5rem;
|
|
358
|
-
background: var(--dc-bg-2);
|
|
359
|
-
color: var(--dc-tx-2);
|
|
360
|
-
border: 1px solid var(--dc-bg-3);
|
|
361
|
-
border-radius: 0.25rem;
|
|
362
|
-
box-shadow: none;
|
|
363
|
-
box-sizing: border-box;
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
textarea {
|
|
367
|
-
max-width: 100%;
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
/* 12. code and keyboards */
|
|
371
|
-
code,
|
|
372
|
-
samp,
|
|
373
|
-
kbd,
|
|
374
|
-
pre {
|
|
375
|
-
background: var(--dc-bg-2);
|
|
376
|
-
border: 1px solid var(--dc-bg-3);
|
|
377
|
-
border-radius: 0.25rem;
|
|
378
|
-
padding: 0.125rem 0.25rem;
|
|
379
|
-
font-size: 0.9rem;
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
kbd {
|
|
383
|
-
border-bottom: 3px solid var(--dc-bg-3);
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
pre {
|
|
387
|
-
padding: 1rem 1.5rem;
|
|
388
|
-
max-width: 100%;
|
|
389
|
-
overflow: auto;
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
/* 13. details */
|
|
393
|
-
details {
|
|
394
|
-
padding: 0.5rem 1rem;
|
|
395
|
-
background: var(--dc-bg-2);
|
|
396
|
-
border: 1px solid var(--dc-bg-3);
|
|
397
|
-
border-radius: 0.25rem;
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
summary {
|
|
401
|
-
cursor: pointer;
|
|
402
|
-
font-weight: bold;
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
details[open] summary {
|
|
406
|
-
margin-bottom: 0.5rem;
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
details[open] > *:first-child {
|
|
410
|
-
margin-top: 0;
|
|
411
|
-
padding-top: 0;
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
details[open] > *:last-child {
|
|
415
|
-
margin-bottom: 0;
|
|
416
|
-
padding-bottom: 0;
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
/* 14. description lists */
|
|
420
|
-
dt {
|
|
421
|
-
font-weight: bold;
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
dd::before {
|
|
425
|
-
content: "→ ";
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
/* 15. horizontal rules */
|
|
429
|
-
hr {
|
|
430
|
-
border: 0;
|
|
431
|
-
border-bottom: 1px solid var(--dc-bg-3);
|
|
432
|
-
margin: 1rem auto;
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
/* 16. fieldsets */
|
|
436
|
-
fieldset {
|
|
437
|
-
margin-top: 1rem;
|
|
438
|
-
padding: 2rem;
|
|
439
|
-
border: 1px solid var(--dc-bg-3);
|
|
440
|
-
border-radius: 0.25rem;
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
legend {
|
|
444
|
-
padding: auto 0.5rem;
|
|
445
|
-
}
|
|
446
|
-
|
|
447
|
-
/* 17. tables */
|
|
448
|
-
table {
|
|
449
|
-
border-collapse: collapse;
|
|
450
|
-
width: 100%;
|
|
451
|
-
}
|
|
452
|
-
|
|
453
|
-
td,
|
|
454
|
-
th {
|
|
455
|
-
border: 1px solid var(--dc-bg-3);
|
|
456
|
-
text-align: left;
|
|
457
|
-
padding: 0.5rem;
|
|
458
|
-
}
|
|
459
|
-
|
|
460
|
-
th {
|
|
461
|
-
background: var(--dc-bg-2);
|
|
462
|
-
}
|
|
463
|
-
|
|
464
|
-
tr:nth-child(even) {
|
|
465
|
-
background: var(--dc-bg-2);
|
|
466
|
-
}
|
|
467
|
-
|
|
468
|
-
table caption {
|
|
469
|
-
font-weight: bold;
|
|
470
|
-
margin-bottom: 0.5rem;
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
/* 18. lists */
|
|
474
|
-
ol,
|
|
475
|
-
ul {
|
|
476
|
-
padding-left: 2rem;
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
li {
|
|
480
|
-
margin-top: 0.4rem;
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
ul ul,
|
|
484
|
-
ol ul,
|
|
485
|
-
ul ol,
|
|
486
|
-
ol ol {
|
|
487
|
-
margin-bottom: 0;
|
|
488
|
-
}
|
|
1
|
+
/* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */
|
|
3
|
+
|
|
4
|
+
/* table of contents
|
|
5
|
+
1. configuration
|
|
6
|
+
2. dark mode handling
|
|
7
|
+
3. css reset
|
|
8
|
+
4. margins for most elements
|
|
9
|
+
5. font family
|
|
10
|
+
6. body and selection styling
|
|
11
|
+
7. typography
|
|
12
|
+
8. blockquotes
|
|
13
|
+
9. header
|
|
14
|
+
10. footer
|
|
15
|
+
11. buttons and inputs
|
|
16
|
+
12. code and keyboards
|
|
17
|
+
13. details
|
|
18
|
+
14. description lists
|
|
19
|
+
15. horizontal rules
|
|
20
|
+
16. fieldsets
|
|
21
|
+
17. tables
|
|
22
|
+
18. lists
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
/* 1. configuration */
|
|
26
|
+
:root {
|
|
27
|
+
/* font families */
|
|
28
|
+
--dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
|
|
29
|
+
"Segoe UI", sans-serif;
|
|
30
|
+
--dc-font-mono: "Geist Mono", monospace;
|
|
31
|
+
|
|
32
|
+
/* light colors */
|
|
33
|
+
--dc-tx-1: #000000;
|
|
34
|
+
--dc-tx-2: #1a1a1a;
|
|
35
|
+
--dc-bg-1: #fafafa;
|
|
36
|
+
--dc-bg-2: #fff;
|
|
37
|
+
--dc-bg-3: #ebebeb;
|
|
38
|
+
--dc-lk-1: #0068d6;
|
|
39
|
+
--dc-lkb-1: #0072f5;
|
|
40
|
+
--dc-lkb-2: #0062d1;
|
|
41
|
+
--dc-lkb-tx: #ededed;
|
|
42
|
+
--dc-ac-1: #8e4ec6;
|
|
43
|
+
--dc-ac-tx: #ededed;
|
|
44
|
+
|
|
45
|
+
/* dark colors */
|
|
46
|
+
--dc-d-tx-1: #ededed;
|
|
47
|
+
--dc-d-tx-2: #a1a1a1;
|
|
48
|
+
--dc-d-bg-1: #000;
|
|
49
|
+
--dc-d-bg-2: #0a0a0a;
|
|
50
|
+
--dc-d-bg-3: #2e2e2e;
|
|
51
|
+
--dc-d-lk-1: #52a8ff;
|
|
52
|
+
--dc-d-lkb-1: #0072f5;
|
|
53
|
+
--dc-d-lkb-2: #0062d1;
|
|
54
|
+
--dc-d-lkb-tx: #ededed;
|
|
55
|
+
--dc-d-ac-1: #8e4ec6;
|
|
56
|
+
--dc-d-ac-tx: #ededed;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* 2. dark mode handling */
|
|
60
|
+
@media (prefers-color-scheme: dark) {
|
|
61
|
+
:root {
|
|
62
|
+
--dc-tx-1: var(--dc-d-tx-1);
|
|
63
|
+
--dc-tx-2: var(--dc-d-tx-2);
|
|
64
|
+
--dc-bg-1: var(--dc-d-bg-1);
|
|
65
|
+
--dc-bg-2: var(--dc-d-bg-2);
|
|
66
|
+
--dc-bg-3: var(--dc-d-bg-3);
|
|
67
|
+
--dc-lk-1: var(--dc-d-lk-1);
|
|
68
|
+
--dc-lkb-1: var(--dc-d-lkb-1);
|
|
69
|
+
--dc-lkb-2: var(--dc-d-lkb-2);
|
|
70
|
+
--dc-lkb-tx: var(--dc-d-lkb-tx);
|
|
71
|
+
--dc-ac-1: var(--dc-d-ac-1);
|
|
72
|
+
--dc-ac-tx: var(--dc-d-ac-tx);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* 3. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
|
|
77
|
+
*,
|
|
78
|
+
*::before,
|
|
79
|
+
*::after {
|
|
80
|
+
box-sizing: border-box;
|
|
81
|
+
margin: 0;
|
|
82
|
+
word-break: break-word;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
body {
|
|
86
|
+
line-height: 1.5;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
img,
|
|
90
|
+
picture,
|
|
91
|
+
video,
|
|
92
|
+
canvas,
|
|
93
|
+
svg {
|
|
94
|
+
display: block;
|
|
95
|
+
max-width: 100%;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
input,
|
|
99
|
+
button,
|
|
100
|
+
textarea,
|
|
101
|
+
select {
|
|
102
|
+
font: inherit;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
#root,
|
|
106
|
+
#__next {
|
|
107
|
+
isolation: isolate;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* 4. margins for most elements */
|
|
111
|
+
address,
|
|
112
|
+
area,
|
|
113
|
+
article,
|
|
114
|
+
aside,
|
|
115
|
+
audio,
|
|
116
|
+
blockquote,
|
|
117
|
+
datalist,
|
|
118
|
+
details,
|
|
119
|
+
dl,
|
|
120
|
+
fieldset,
|
|
121
|
+
figure,
|
|
122
|
+
form,
|
|
123
|
+
input,
|
|
124
|
+
iframe,
|
|
125
|
+
img,
|
|
126
|
+
meter,
|
|
127
|
+
nav,
|
|
128
|
+
ol,
|
|
129
|
+
optgroup,
|
|
130
|
+
option,
|
|
131
|
+
output,
|
|
132
|
+
p,
|
|
133
|
+
pre,
|
|
134
|
+
progress,
|
|
135
|
+
ruby,
|
|
136
|
+
section,
|
|
137
|
+
table,
|
|
138
|
+
textarea,
|
|
139
|
+
ul,
|
|
140
|
+
video {
|
|
141
|
+
margin-bottom: 1rem;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* 5. font family */
|
|
145
|
+
html {
|
|
146
|
+
font-family: var(--dc-font-sans);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
code,
|
|
150
|
+
pre,
|
|
151
|
+
kbd,
|
|
152
|
+
samp {
|
|
153
|
+
font-family: var(--dc-font-mono);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* 6. body and selection styling */
|
|
157
|
+
body {
|
|
158
|
+
margin: 0 auto;
|
|
159
|
+
max-width: 48rem;
|
|
160
|
+
padding: 2rem;
|
|
161
|
+
background: var(--dc-bg-1);
|
|
162
|
+
color: var(--dc-tx-2);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
::selection {
|
|
166
|
+
background: var(--dc-ac-1);
|
|
167
|
+
color: var(--dc-ac-tx);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* 7. typography */
|
|
171
|
+
h1,
|
|
172
|
+
h2,
|
|
173
|
+
h3,
|
|
174
|
+
h4,
|
|
175
|
+
h5,
|
|
176
|
+
h6 {
|
|
177
|
+
line-height: 1;
|
|
178
|
+
color: var(--dc-tx-1);
|
|
179
|
+
padding-top: 1rem;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
h1,
|
|
183
|
+
h2,
|
|
184
|
+
h3 {
|
|
185
|
+
padding-bottom: 0.25rem;
|
|
186
|
+
margin-bottom: 0.5rem;
|
|
187
|
+
border-bottom: 1px solid var(--dc-bg-3);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
h4,
|
|
191
|
+
h5,
|
|
192
|
+
h6 {
|
|
193
|
+
margin-bottom: 0.25rem;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
a {
|
|
197
|
+
color: var(--dc-lk-1);
|
|
198
|
+
text-decoration: none;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
a:hover {
|
|
202
|
+
text-decoration: underline;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
mark {
|
|
206
|
+
padding: 0.125rem 0.25rem;
|
|
207
|
+
background: var(--dc-ac-1);
|
|
208
|
+
color: var(--dc-ac-tx);
|
|
209
|
+
border-radius: 0.25rem;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
/* 8. blockquotes */
|
|
213
|
+
blockquote {
|
|
214
|
+
padding: 1.25rem;
|
|
215
|
+
background: var(--dc-bg-2);
|
|
216
|
+
border: 1px solid var(--dc-bg-3);
|
|
217
|
+
border-left: 5px solid var(--dc-bg-3);
|
|
218
|
+
border-radius: 0.25rem;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
blockquote *:last-child {
|
|
222
|
+
padding-bottom: 0;
|
|
223
|
+
margin-bottom: 0;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
/* 9. header */
|
|
227
|
+
header {
|
|
228
|
+
background: var(--dc-bg-2);
|
|
229
|
+
border-bottom: 1px solid var(--dc-bg-3);
|
|
230
|
+
padding: 0.5rem calc(50vw - 50%);
|
|
231
|
+
margin: -2rem calc(50% - 50vw) 2rem;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
header * {
|
|
235
|
+
padding-top: 0rem;
|
|
236
|
+
padding-bottom: 0rem;
|
|
237
|
+
margin-top: 0.25rem;
|
|
238
|
+
margin-bottom: 0.25rem;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
header h1,
|
|
242
|
+
header h2,
|
|
243
|
+
header h3 {
|
|
244
|
+
border-bottom: 0;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
header h1 {
|
|
248
|
+
font-size: 1.6rem;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
header h2 {
|
|
252
|
+
font-size: 1.4rem;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
header h3 {
|
|
256
|
+
font-size: 1.2rem;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
header h4 {
|
|
260
|
+
font-size: 1rem;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
header h5 {
|
|
264
|
+
font-size: 0.9rem;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
header p {
|
|
268
|
+
font-size: 1rem;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
header nav {
|
|
272
|
+
font-size: 0.9rem;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
header h6 {
|
|
276
|
+
font-size: 0.8rem;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
header nav ul {
|
|
280
|
+
padding: 0;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
header nav ul li {
|
|
284
|
+
display: inline-block;
|
|
285
|
+
margin: 0;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
header nav ul li:not(:first-child)::before {
|
|
289
|
+
content: "• ";
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/* 10. footer */
|
|
293
|
+
footer {
|
|
294
|
+
border-top: 1px solid var(--dc-bg-3);
|
|
295
|
+
padding: 0.5rem calc(50vw - 50%);
|
|
296
|
+
margin: 2rem calc(50% - 50vw) -2rem;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
footer * {
|
|
300
|
+
padding-top: 0rem;
|
|
301
|
+
padding-bottom: 0rem;
|
|
302
|
+
margin-top: 0.25rem;
|
|
303
|
+
margin-bottom: 0.25rem;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
footer h1,
|
|
307
|
+
footer h2,
|
|
308
|
+
footer h3 {
|
|
309
|
+
border-bottom: 0;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/* 11. buttons and inputs */
|
|
313
|
+
a button,
|
|
314
|
+
button,
|
|
315
|
+
input[type="submit"],
|
|
316
|
+
input[type="reset"],
|
|
317
|
+
input[type="button"] {
|
|
318
|
+
display: inline-block;
|
|
319
|
+
padding: 0.25rem 0.75rem;
|
|
320
|
+
text-align: center;
|
|
321
|
+
text-decoration: none;
|
|
322
|
+
white-space: nowrap;
|
|
323
|
+
background: var(--dc-lkb-1);
|
|
324
|
+
color: var(--dc-lkb-tx);
|
|
325
|
+
border: 0;
|
|
326
|
+
border-radius: 0.25rem;
|
|
327
|
+
box-sizing: border-box;
|
|
328
|
+
cursor: pointer;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
a button[disabled],
|
|
332
|
+
button[disabled],
|
|
333
|
+
input[type="submit"][disabled],
|
|
334
|
+
input[type="reset"][disabled],
|
|
335
|
+
input[type="button"][disabled] {
|
|
336
|
+
cursor: not-allowed;
|
|
337
|
+
opacity: 0.5;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.button:focus,
|
|
341
|
+
.button:enabled:hover,
|
|
342
|
+
button:focus,
|
|
343
|
+
button:enabled:hover,
|
|
344
|
+
input[type="submit"]:focus,
|
|
345
|
+
input[type="submit"]:enabled:hover,
|
|
346
|
+
input[type="reset"]:focus,
|
|
347
|
+
input[type="reset"]:enabled:hover,
|
|
348
|
+
input[type="button"]:focus,
|
|
349
|
+
input[type="button"]:enabled:hover {
|
|
350
|
+
background: var(--dc-lkb-2);
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
textarea,
|
|
354
|
+
select,
|
|
355
|
+
input {
|
|
356
|
+
padding: 0.25rem 0.5rem;
|
|
357
|
+
margin-bottom: 0.5rem;
|
|
358
|
+
background: var(--dc-bg-2);
|
|
359
|
+
color: var(--dc-tx-2);
|
|
360
|
+
border: 1px solid var(--dc-bg-3);
|
|
361
|
+
border-radius: 0.25rem;
|
|
362
|
+
box-shadow: none;
|
|
363
|
+
box-sizing: border-box;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
textarea {
|
|
367
|
+
max-width: 100%;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
/* 12. code and keyboards */
|
|
371
|
+
code,
|
|
372
|
+
samp,
|
|
373
|
+
kbd,
|
|
374
|
+
pre {
|
|
375
|
+
background: var(--dc-bg-2);
|
|
376
|
+
border: 1px solid var(--dc-bg-3);
|
|
377
|
+
border-radius: 0.25rem;
|
|
378
|
+
padding: 0.125rem 0.25rem;
|
|
379
|
+
font-size: 0.9rem;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
kbd {
|
|
383
|
+
border-bottom: 3px solid var(--dc-bg-3);
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
pre {
|
|
387
|
+
padding: 1rem 1.5rem;
|
|
388
|
+
max-width: 100%;
|
|
389
|
+
overflow: auto;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
/* 13. details */
|
|
393
|
+
details {
|
|
394
|
+
padding: 0.5rem 1rem;
|
|
395
|
+
background: var(--dc-bg-2);
|
|
396
|
+
border: 1px solid var(--dc-bg-3);
|
|
397
|
+
border-radius: 0.25rem;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
summary {
|
|
401
|
+
cursor: pointer;
|
|
402
|
+
font-weight: bold;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
details[open] summary {
|
|
406
|
+
margin-bottom: 0.5rem;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
details[open] > *:first-child {
|
|
410
|
+
margin-top: 0;
|
|
411
|
+
padding-top: 0;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
details[open] > *:last-child {
|
|
415
|
+
margin-bottom: 0;
|
|
416
|
+
padding-bottom: 0;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
/* 14. description lists */
|
|
420
|
+
dt {
|
|
421
|
+
font-weight: bold;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
dd::before {
|
|
425
|
+
content: "→ ";
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
/* 15. horizontal rules */
|
|
429
|
+
hr {
|
|
430
|
+
border: 0;
|
|
431
|
+
border-bottom: 1px solid var(--dc-bg-3);
|
|
432
|
+
margin: 1rem auto;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
/* 16. fieldsets */
|
|
436
|
+
fieldset {
|
|
437
|
+
margin-top: 1rem;
|
|
438
|
+
padding: 2rem;
|
|
439
|
+
border: 1px solid var(--dc-bg-3);
|
|
440
|
+
border-radius: 0.25rem;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
legend {
|
|
444
|
+
padding: auto 0.5rem;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
/* 17. tables */
|
|
448
|
+
table {
|
|
449
|
+
border-collapse: collapse;
|
|
450
|
+
width: 100%;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
td,
|
|
454
|
+
th {
|
|
455
|
+
border: 1px solid var(--dc-bg-3);
|
|
456
|
+
text-align: left;
|
|
457
|
+
padding: 0.5rem;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
th {
|
|
461
|
+
background: var(--dc-bg-2);
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
tr:nth-child(even) {
|
|
465
|
+
background: var(--dc-bg-2);
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
table caption {
|
|
469
|
+
font-weight: bold;
|
|
470
|
+
margin-bottom: 0.5rem;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
/* 18. lists */
|
|
474
|
+
ol,
|
|
475
|
+
ul {
|
|
476
|
+
padding-left: 2rem;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
li {
|
|
480
|
+
margin-top: 0.4rem;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
ul ul,
|
|
484
|
+
ol ul,
|
|
485
|
+
ul ol,
|
|
486
|
+
ol ol {
|
|
487
|
+
margin-bottom: 0;
|
|
488
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@intergrav/dev.css",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.2",
|
|
4
4
|
"description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system",
|
|
5
5
|
"author": "intergrav <intergrav@proton.me> (https://intergrav.xyz)",
|
|
6
6
|
"license": "MIT",
|