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 color-scheme: light dark;
19 --sc-font: system-ui, sans-serif;
20 --sc-font-mono:
21 ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
22 "DejaVu Sans Mono", monospace;
23 --sc-line-height: 1.5; /* set to 'revert' to use default */
24 --sc-max-width: 48rem; /* set to 'revert' to remove limit */
25
26 /* unsafe variables - not recommended to customize, may be removed or changed in the future */
27 --sc-emphasizebd: rgba(0, 0, 0, 0.2);
28 --sc-emphasizebg: rgba(0, 0, 0, 0.1);
29}
30
31@supports (color: light-dark(white, black)) {
32 :root {
33 --sc-emphasizebd: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
34 --sc-emphasizebg: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
35 }
36}
37
38/* 2. typography */
39
40html {
41 font-family: var(--sc-font);
42 line-height: var(--sc-line-height);
43 tab-size: 4;
44}
45
46body {
47 max-width: var(--sc-max-width);
48 margin-left: auto;
49 margin-right: auto;
50 padding-left: 1rem;
51 padding-right: 1rem;
52}
53
54code,
55kbd,
56samp,
57pre {
58 font-family: var(--sc-font-mono);
59 font-size: 0.9rem;
60}
61
62/* 3. elements */
63
64img {
65 max-width: 100%;
66}
67
68table {
69 border-collapse: collapse;
70}
71
72th,
73td {
74 border: 1px solid var(--sc-emphasizebd);
75 padding: 0.25rem 0.5rem;
76}
77
78thead tr,
79tbody tr:nth-child(even) {
80 background-color: var(--sc-emphasizebg);
81}
82
83:not(pre) > code,
84:not(pre) > samp,
85:not(pre) > kbd,
86pre {
87 background-color: var(--sc-emphasizebg);
88}
89
90pre {
91 overflow-x: auto;
92 max-width: 100%;
93 padding: 0.5rem;
94}
95
96blockquote {
97 border-left: 0.25rem solid var(--sc-emphasizebd);
98 background-color: var(--sc-emphasizebg);
99 padding-left: 1rem;
100 margin-left: 0;
101 margin-right: 0;
102}
103
104header nav ul,
105footer nav ul {
106 display: flex;
107 flex-wrap: wrap;
108 list-style: none;
109 padding: 0;
110}
111
112header nav ul li,
113footer nav ul li {
114 display: flex;
115}
116
117header nav ul li:not(:first-child)::before,
118footer nav ul li:not(:first-child)::before {
119 content: "•";
120 margin: 0 0.25rem;
121}
122
123/* 4. remove max-width when printing */
124
125@media print {
126 body {
127 max-width: revert;
128 }
129}