Un site pour la promotion de catium - retour accueil
git clone git://bebou.netlib.re/site-catium
Log | Files | Refs | README |
style.css (4941B)
1 /*
2 Cette CSS a été écrite initialement par Derek Salmon (Pikselkraft) pour Katzele
3 Puis adaptée par Guillaume Porte en 2024 pour Estrades
4 Et améliorée par Timothée Goguely à l’automne 2024
5
6 - https://www.pikselkraft.com/
7 - http://katzele.netlib.re/
8 - https://estrades.huma-num.fr/
9 */
10
11
12 :root {
13
14 /* Fonts */
15 --font-system: Helvetica, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
16
17 /*
18 @TODO font base 18px
19 ** Typo scale base 16px
20 * Ratio = Quinte (1.5)
21 */
22 --ratio: 1.5;
23 --space-xs: calc(var(--space-base) / var(--ratio)); /* 7.111px */
24 --space-sm: calc(var(--space-base) / 1.5); /* 10.667px */
25 --space-base: 1.2rem; /* 16px */
26 --space-lg: calc(var(--space-base) * var(--ratio)); /* 24px */
27 --space-xl: calc(var(--space-lg) * var(--ratio)); /* 36px */
28 --space-2xl: calc(var(--space-xl) * var(--ratio)); /* 54px */
29 --space-3xl: calc(var(--space-2xl) * var(--ratio)); /* 81px */
30 --space-4xl: calc(var(--space-3xl) * var(--ratio)); /* 121.5px */
31
32 /* COLORS */
33 --black: #2f383e;
34 --white: #fefffe;
35 --grey: #444444;
36 --lightgrey: #999999;
37 --verylightgrey: #fefefe;
38 --green: #68715E;
39 --yellow: #fffeee;
40 --blue: #2F7598;
41 --red: #cc0000;
42
43 /* LAYOUT */
44 --gutter: min(1.5rem, 5vw);
45 --wrapper-max-width: 50rem; /* 800px */
46
47 }
48
49 html, body {
50 margin: 0;
51 padding: 0;
52 height: 100%;
53 }
54
55 html {
56 -webkit-font-smoothing: antialiased;
57 -moz-osx-font-smoothing: grayscale;
58 scroll-behavior: smooth;
59 font-size: 100%; /* 16 pixels par défaut en moyenne */
60 }
61
62 :target {
63 scroll-margin-top: 100px; /* permet aux ancres de ne pas se retrouvées sous le header fixed */
64 }
65
66 body {
67 font-family: var(--font-system); /* Utilisation d'une font système */
68 font-weight: 400;
69 line-height: 1.56;
70 text-rendering: optimizeSpeed;
71 background-color: var(--verylightgrey);
72 }
73
74 body,
75 .container {
76 padding: 0 var(--gutter);
77 }
78
79 #wrapper {
80 min-height: 100%;
81 width: 100%;
82 max-width: var(--wrapper-max-width);
83 position: relative;
84 margin: auto;
85 }
86
87 #wrapper img {
88 max-width: 100%;
89 display: block;
90 margin: auto;
91 margin-bottom: 3rem;
92 }
93
94 /*TYPO*/
95
96 a { color: var(--blue) }
97 a:hover { color: var(--grey) }
98
99 /*TITLES*/
100
101 h1, h2, h3, h4, h5 {
102 position: relative;
103 font-weight: bold;
104 }
105
106 h1, h2, h3 {
107 padding: 0;
108 color: var(--grey);
109 max-width: max-content;
110 }
111
112 h1, .h1-like {
113 font-size: var(--space-2xl, 3.375rem);
114 line-height: 1.14;
115 }
116
117 h2, .h2-like {
118 font-size: var(--space-xl, 2.25rem);
119 line-height: 1.54;
120 }
121
122 h3, .h3-like {
123 font-size: var(--space-lg, 1.5rem);
124 line-height: 1.3333;
125 }
126
127 /*Selection*/
128
129 ::selection {
130 color: var(--yellow);
131 background-color: var(--green);
132 }
133
134 /*TABLE*/
135
136 tbody tr:nth-child(even), th {
137 background-color: var(--grey);
138 }
139
140
141 /*BODY*/
142
143 /*HEADER*/
144
145 header {
146 position: fixed;
147 top: 0;
148 left: 0;
149 right: 0;
150 z-index: 1000;
151 background-color: var(--verylightgrey);
152 }
153
154 #logo {
155 font-size: var(--space-2xl);
156 font-weight: bold;
157 line-height: 0;
158 display: inline-block;
159 }
160
161 #logo img {
162 width: var(--space-2xl)
163 }
164
165 #nom {
166 border-right-style: solid;
167 border-right-width: 0.1em;
168 padding-right: 1em;
169 }
170
171 nav#menu {
172 display: block;
173 max-width: var(--wrapper-max-width);
174 margin: 0 auto;
175 padding: 1rem var(--gutter);
176 border-bottom: 1px solid var(--lightgrey);
177 }
178
179 nav#menu ul {
180 padding: 0;
181 margin: 0;
182 list-style: none;
183 display: flex;
184 flex-wrap: wrap;
185 }
186
187 nav#menu ul li{
188 display: inline-block;
189 margin-right: var(--space-base);
190 }
191
192 nav#menu ul li a {
193 font-size: var(--space-base);
194 color: var(--grey);
195 font-weight: bold;
196 text-decoration: none;
197 }
198
199 nav#menu ul li a:hover {
200 font-size: var(--space-base);
201 color: var(--lightgrey);
202 font-weight: bold;
203 text-decoration: none;
204 }
205
206
207 /* MAIN */
208 main{
209 padding: 100px 0;
210 }
211
212
213 /* FOOTER */
214
215
216 footer {
217 border-top: 1px solid var(--lightgrey);
218 padding: var(--space-lg);
219 text-align: center;
220 font-size: 90%;
221 }
222
223 /*@TODO un pattern + interaction design -> univers Katzele*/
224
225 blockquote {
226 border-left: solid 4px var(--grey);
227 padding-left: 28px;
228 color: var(--black);
229 }
230
231 /*PRE*/
232
233 pre {
234 padding: 1rem 2rem;
235 width: fit-content;
236 max-width: 100%;
237 tab-size: 2;
238 white-space: pre-wrap;
239 background: var(--black);
240 color: var(--white);
241 }
242
243 /*Link Blank */
244 .blank[target="_blank"]:after {
245 content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
246 display: inline-block;
247 width: 0.5rem;
248 margin: 0 3px 0 5px;
249 }
250
251 /* Mentions légales */
252
253
254 #mentions-legales img {
255 height: var(--space-2xl);
256 margin-left: 0;
257 margin-right: 0;
258 display: inline-block;
259 text-align: center;
260 }
261
262 #mentions-legales img:not(:last-child) {
263 margin-right: var(--space-2xl);
264 }