Un générateur de site statique - retour accueil
git clone git://bebou.netlib.re/catium
Log | Files | Refs | README |
style.css (3846B)
1 :root {
2
3 /* Fonts */
4 --font-system: Arial, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
5
6 /*
7 @TODO font base 18px
8 ** Typo scale base 16px
9 * Ratio = Quinte (1.5)
10 */
11 --ratio: 1.5;
12 --space-xs: calc(var(--space-base) / var(--ratio)); /* 7.111px */
13 --space-sm: calc(var(--space-base) / 1.5); /* 10.667px */
14 --space-base: 1rem; /* 16px */
15 --space-lg: calc(var(--space-base) * var(--ratio)); /* 24px */
16 --space-xl: calc(var(--space-lg) * var(--ratio)); /* 36px */
17 --space-2xl: calc(var(--space-xl) * var(--ratio)); /* 54px */
18 --space-3xl: calc(var(--space-2xl) * var(--ratio)); /* 81px */
19 --space-4xl: calc(var(--space-3xl) * var(--ratio)); /* 121.5px */
20
21 /* COLORS */
22 --black: #2f383e;
23 --white: #fefffe;
24 --grey: #edead5;
25 --green: #68715E;
26 --yellow: #fdf6e3;
27 --blue: #2F7598;
28 }
29
30 html {
31 -webkit-font-smoothing: antialiased;
32 --moz-osx-font-smoothing: grayscale;
33 scroll-behavior: smooth;
34 font-size: 100%; /* 16 pixels par défaut en moyenne */
35 }
36
37 body {
38 padding: 0 0.5rem;
39 min-height: 100vh;
40 font-family: var(--font-system); /* Utilisation d'une font système */
41 font-weight: 400;
42 line-height: 1.56;
43 text-rendering: optimizeSpeed;
44 background-color: var(--yellow);
45 }
46
47 body > * { max-width: 820px; }
48
49 @media screen and (min-width: 90em) {
50 body > * { max-width: 940px; }
51 }
52
53 /*TYPO*/
54
55 a { color: var(--blue); }
56 a:hover { color: var(--green); }
57
58 /*TITLES*/
59
60 h1, h2, h3, h4, h5 {
61 position: relative;
62 font-weight: bold;
63 }
64
65 h1, h2, h3 {
66 padding: 0 0.75rem;
67 background-color: var(--grey);
68 max-width: max-content;
69 }
70
71 h1, .h1-like {
72 font-size: var(--space-2xl, 3.375rem);
73 line-height: 1.44;
74 }
75
76 h2, .h2-like {
77 font-size: var(--space-xl, 2.25rem);
78 line-height: 1.54;
79 letter-spacing: 0.13px;
80 }
81
82 h3, .h3-like {
83 font-size: var(--space-lg, 1.5rem);
84 line-height: 1.3333;
85 letter-spacing: 0.1px;
86 }
87
88 /*Selection*/
89
90 ::selection {
91 color: var(--yellow);
92 background-color: var(--green);
93 }
94
95 /*A11y*/
96
97 a.skip-main {
98 left:-999px;
99 position:absolute;
100 top:auto;
101 width:1px;
102 height:1px;
103 overflow:hidden;
104 z-index:-999;
105 }
106
107 a.skip-main:focus, a.skip-main:active {
108 color: var(--white);
109 background-color: var(--black);
110 left: auto;
111 top: auto;
112 width: 100%;
113 max-width: 100%;
114 height: auto;
115 overflow:auto;
116 padding:3px;
117 border-radius: 10px;
118 border:2px solid var(--blue);
119 text-align:center;
120 font-size:1.2em;
121 z-index:999;
122 }
123
124 /*TABLE*/
125
126 tbody tr:nth-child(even), th {
127 background-color: var(--grey);
128 }
129
130 /*HEADER*/
131
132 header {
133 padding-left: 1rem;
134 color: var(--blue);
135 }
136
137 .logo {
138 font-size: var(--space-2xl);
139 font-weight: bold;
140 line-height: 0;
141 }
142
143 nav ul {
144 padding: 0;
145 list-style: none;
146 }
147
148 nav ul li a {
149 font-size: var(--space-lg);
150 font-weight: bold;
151 }
152
153 /*BODY*/
154
155 /*@TODO un pattern + interaction design -> univers Katzele*/
156
157 blockquote {
158 border-left: solid 4px var(--grey);
159 padding-left: 28px;
160 color: var(--black);
161 }
162
163 /*PRE*/
164
165 pre {
166 padding: 1rem 2rem;
167 width: max-content;
168 max-width: 100%;
169 tab-size: 2;
170 white-space: pre-wrap;
171 background: var(--black);
172 color: var(--white);
173 }
174
175 /*LAYOUTS*/
176
177 body,
178 .container { padding: 1rem }
179
180 @media screen and (min-width: 60em) {
181 body,
182 .container { padding: 1rem var(--space-2xl); }
183 }
184
185 /*Link Blank */
186 .blank[target="_blank"]:after {
187 content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
188 display: inline-block;
189 width: 0.5rem;
190 margin: 0 3px 0 5px;
191 }
192
193 /*LIMITE à 200 lignes*/