slight enhancements for the user agent stylesheet
slightcss.devins.page
css
stylesheet
framework
lightweight
1/* slight.css |
2 minimal enhancements on top of the user agent stylesheet
3 provides a pleasant reading experience while relying mostly on native browser styles
4 can be used as a baseline for web projects or minimal websites/blogs
5*/
6
7/* toc |
8 1. variables
9 2. typography
10 3. elements
11 4. remove max-width when printing
12*/
13
14/* 1. variables */
15
16:root {
17 /* customizable variables - you may change these as you wish */
18 --sc-font: system-ui, sans-serif;
19 --sc-font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
20 Consolas, "DejaVu Sans Mono", monospace;
21 /* unsafe variables - not recommended to customize, may be removed or changed in the future */
22 color-scheme: light dark;
23 --sc-emphasizebd: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
24 --sc-emphasizebg: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
25}
26
27/* 2. typography */
28
29html {
30 font-family: var(--sc-font);
31 line-height: 1.5;
32 tab-size: 4;
33}
34
35body {
36 max-width: 48rem;
37 margin: auto;
38 padding: 1rem;
39}
40
41code,
42kbd,
43samp,
44pre {
45 font-family: var(--sc-font-mono);
46 font-size: 0.9rem;
47}
48
49/* 3. elements */
50
51table {
52 border-collapse: collapse;
53}
54
55th,
56td {
57 border: 1px solid var(--sc-emphasizebd);
58 padding: 0.25rem 0.5rem;
59}
60
61thead tr,
62tbody tr:nth-child(even) {
63 background-color: var(--sc-emphasizebg);
64}
65
66:not(pre) > code,
67:not(pre) > samp,
68:not(pre) > kbd,
69pre {
70 background-color: var(--sc-emphasizebg);
71}
72
73pre {
74 overflow-x: auto;
75 max-width: 100%;
76 padding: 0.5rem;
77}
78
79blockquote {
80 border-left: 4px solid var(--sc-emphasizebd);
81 padding-left: 1rem;
82 margin-left: 0;
83}
84
85header nav ul {
86 display: flex;
87 flex-wrap: wrap;
88 list-style: none;
89 padding: 0;
90}
91
92header nav ul li:not(:first-child)::before {
93 content: "•";
94 margin: 0 0.25em;
95}
96
97header nav ul li {
98 margin: 0;
99 display: flex;
100}
101
102/* 4. remove max-width when printing */
103@media print {
104 body {
105 max-width: revert;
106 }
107}