Skip to content

Commit c3adc36

Browse files
joellesennejoellesenne
committed
Add a demo example
1 parent bbf148c commit c3adc36

File tree

4 files changed

+74
-68
lines changed

4 files changed

+74
-68
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
A modern CSS for your project
44

5+
[Demo](https://codepen.io/joellesenne/full/NPKEeNq)
6+
57
## Installation
68

79
```sh

‎modern.css‎

Lines changed: 69 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,75 @@
1+
@layer theme {
2+
@property --surface-1 {
3+
syntax: '<color>';
4+
inherits: false;
5+
initial-value: #d3e0e0;
6+
}
7+
@property --surface-2 {
8+
syntax: '<color>';
9+
inherits: false;
10+
initial-value: #2f324d;
11+
}
12+
@property --surface-3 {
13+
syntax: '<color>';
14+
inherits: false;
15+
initial-value: #414138;
16+
}
17+
@property --surface-4 {
18+
syntax: '<color>';
19+
inherits: false;
20+
initial-value: #008195;
21+
}
22+
@property --surface-5 {
23+
syntax: '<color>';
24+
inherits: false;
25+
initial-value: #006a7a;
26+
}
27+
@property --surface-6 {
28+
syntax: '<color>';
29+
inherits: false;
30+
initial-value: #77c0c0;
31+
}
32+
@property --surface-7 {
33+
syntax: '<color>';
34+
inherits: false;
35+
initial-value: #233665;
36+
}
137

2-
@property --surface-1 {
3-
syntax: '<color>';
4-
inherits: false;
5-
initial-value: #d3e0e0;
6-
}
7-
@property --surface-2 {
8-
syntax: '<color>';
9-
inherits: false;
10-
initial-value: #2f324d;
11-
}
12-
@property --surface-3 {
13-
syntax: '<color>';
14-
inherits: false;
15-
initial-value: #414138;
16-
}
17-
@property --surface-4 {
18-
syntax: '<color>';
19-
inherits: false;
20-
initial-value: #008195;
21-
}
22-
@property --surface-5 {
23-
syntax: '<color>';
24-
inherits: false;
25-
initial-value: #006a7a;
26-
}
27-
@property --surface-6 {
28-
syntax: '<color>';
29-
inherits: false;
30-
initial-value: #77c0c0;
31-
}
32-
@property --surface-7 {
33-
syntax: '<color>';
34-
inherits: false;
35-
initial-value: #233665;
36-
}
37-
38-
:root {
39-
color-scheme: dark light;
40-
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
41-
--font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
42-
--base-weight: 400;
43-
--base-grade: 0;
38+
:root {
39+
color-scheme: dark light;
40+
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
41+
--font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
42+
--base-weight: 400;
43+
--base-grade: 0;
4444

45-
/* Light theme */
46-
--light-surface: light-dark(var(--surface-2), var(--surface-1));
47-
--dark-surface: light-dark(var(--surface-1), var(--surface-2));
48-
--light-link: light-dark(var(--surface-4), var(--surface-5));
49-
--dark-link: light-dark(var(--surface-5), var(--surface-4));
50-
--light-line: light-dark(var(--surface-6), var(--surface-7));
51-
--dark-line: light-dark(var(--surface-7), var(--surface-6));
45+
/* Light theme */
46+
--light-surface: light-dark(var(--surface-2), var(--surface-1));
47+
--dark-surface: light-dark(var(--surface-1), var(--surface-2));
48+
--light-link: light-dark(var(--surface-4), var(--surface-5));
49+
--dark-link: light-dark(var(--surface-5), var(--surface-4));
50+
--light-line: light-dark(var(--surface-6), var(--surface-7));
51+
--dark-line: light-dark(var(--surface-7), var(--surface-6));
5252

53-
&:has(input[name="color-scheme"][value="light dark"]:checked) {
54-
color-scheme: light dark;
55-
}
56-
&:has(input[name="color-scheme"][value="light"]:checked) {
57-
color-scheme: light;
58-
}
59-
&:has(input[name="color-scheme"][value="dark"]:checked) {
60-
color-scheme: dark;
61-
}
62-
@supports (font-variation-settings: normal) {
63-
font-family: InterVariable, sans-serif;
64-
font-variation-settings:
65-
"wght" var(--base-weight),
66-
"GRAD" var(--base-grade)
53+
&:has(input[name="color-scheme"][value="light dark"]:checked) {
54+
color-scheme: light dark;
55+
}
56+
&:has(input[name="color-scheme"][value="light"]:checked) {
57+
color-scheme: light;
58+
}
59+
&:has(input[name="color-scheme"][value="dark"]:checked) {
60+
color-scheme: dark;
61+
}
62+
@supports (font-variation-settings: normal) {
63+
font-family: InterVariable, sans-serif;
64+
font-variation-settings:
65+
"wght" var(--base-weight),
66+
"GRAD" var(--base-grade)
6767
;
6868

69-
@media (prefers-contrast: more) { --base-weight: 700 }
70-
@media (prefers-contrast: less) { --base-weight: 200 }
71-
@media (prefers-color-scheme: dark) { --base-grade: -25 }
69+
@media (prefers-contrast: more) { --base-weight: 700 }
70+
@media (prefers-contrast: less) { --base-weight: 200 }
71+
@media (prefers-color-scheme: dark) { --base-grade: -25 }
72+
}
7273
}
7374
}
7475

@@ -78,6 +79,8 @@
7879
margin: 0;
7980
padding: 0;
8081
border: 0;
82+
transition: .1s cubic-bezier(.1,0,.9,1);
83+
transition-property: accent-color, background-color, color;
8184
@media (prefers-reduced-motion) {
8285
animation-duration: 0s !important;
8386
transition: none !important;
@@ -104,7 +107,6 @@
104107
word-break: break-word;
105108
overflow-wrap: break-word;
106109
-webkit-font-smoothing: antialiased;
107-
transition: color 0.4s, background-color;
108110
}
109111
address, area, article, aside, audio, blockquote, datalist, details, dl, div, fieldset, figure, form, input, iframe, img, meter, nav, ol, optgroup, option, output, p, pre, progress, ruby, section, table, textarea, ul, video {
110112
margin-bottom: 1rem;

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@joellesenne/modern.css",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"private": false,
55
"description": "A modern CSS for your project",
66
"keywords": [

‎test.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ <h4>Dark Mode Setting:</h4>
2424
<header>
2525
<h1>modern.css</h1>
2626
<p>A modern CSS for your project</p>
27+
<p><a href="https://github.com/joellesenne/modern.css" target="_blank" rel="noopener noreferrer">Code source</a></p>
2728
</header>
2829
<article>
2930
<section>
@@ -129,6 +130,7 @@ <h2>Code Example:</h2>
129130
<h2>Kbd example:</h2>
130131
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy <code>this code</code> (Windows).</p>
131132
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy <code>this code</code> (Mac OS).</p>
133+
<kbd><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd></kbd>
132134
<h2>Samp example:</h2>
133135
<p>Message from my computer:</p>
134136
<p><samp>File not found.<br>Press F1 to continue</samp></p>

0 commit comments

Comments
 (0)