colophon

Mon code CSS est le résultat de différentes influences, parmi lesquelles les plus importantes sont :

• les thèmes gaia disponibles pour GNU/Linux;
• le style pour LATEXs’intitulant Classic Thesis, de André Miede.

Ci-dessous se trouve le code CSS significatif utilisé pour ce site, que je ferai suivre d’un bref commentaire lorsque j'en aurai le temps. Il est à noter que ce code ne serait rien sans toute les informations que j’ai pu trouver sur internet :

1. @font-face
   
2. {
   
3. font-family: "Bauhaus Std";
   
4. src: url(../fonts/Bauhaus_Std/BauhausStd-Medium.otf);
   
5. }
   
6. @font-face
   
7. {
   
8. font-family: "Corbel";
   
9. src: url(../fonts/Corbel/corbel.ttf);
   
10. }
    
11. @font-face
    
12. {
    
13. font-family: "Friz Quadrata Std";
    
14. src: url(../fonts/Friz_Quadrata_Std/FrizQuadrataStd.otf);
    
15. }
    
16. @font-face
    
17. {
    
18. font-family: "Gill Sans Std";
    
19. src: url(../fonts/Gill_Sans_Std/GillSansStd.otf);
    
20. }
    
21. @font-face
    
22. {
    
23. font-family: "Heisei Maru Gothic Std";
    
24. src: url(../fonts/Heisei_Maru_Gothic_Std/HeiseiMaruGoStd-W4.otf);
    
25. }
    
26. @font-face
    
27. {
    
28. font-family: "Oregon LDO Vanishing";
    
29. src: url(../fonts/Oregon_LDO_Vanishing/OregonLDOVanishing.ttf);
    
30. }
    
31. @font-face
    
32. {
    
33. font-family:"Sony Sketch EF";
    
34. src: url(../fonts/Sony_Sketch/Sony_Sketch_EF.ttf);
    
35. }
    
36. body
    
37. {
    
38. background:transparent;
    
39. color:black;
    
40. background-attachment: fixed;
    
41. background-image:url(../images/Minimal.jpg) ;
    
42. -webkit-background-size: cover;
    
43. -moz-background-size: cover;
    
44. -o-background-size: cover;
    
45. background-size: cover;
    
46. margin-top: 5%;
    
47. margin-bottom: 5%;
    
48. margin-right:15%;
    
49. margin-left:15%;
    
50. height:30%;
    
51. width: 950px;
    
52. counter-reset:chapitre section table;
    
53. font-family: "Corbel";
    
54. font-variant-ligatures:historical-ligatures;
    
55. font-variant-numeric:oldstyle-nums;
    
56. hyphenate-limit-last:none;
    
57. -webkit-transition: all 0.7s ease-in-out;
    
58. -moz-transition: all 1s ease-in-out;
    
59. -o-transition: all 1s ease-in-out;
    
60. transition: all 1s ease-in-out;
    
61. }
    
62. 
    
63. header
    
64. {
    
65. margin-right:-12em;
    
66. }
    
67. 
    
68. p
    
69. {
    
70. text-align:justify;
    
71. width:95%;
    
72. }
    
73. 
    
74. #code
    
75. {
    
76. background:rgba(190,190,190,0.4) 0 repeat-y;
    
77. overflow:auto;
    
78. width:28em;
    
79. font-family:"Nimbus Sans",inconsolata, terminus, monospace;
    
80. list-style: decimal;
    
81. list-style-color: yellow;
    
82. }
    
83. 
    
84. #code:hover
    
85. {
    
86. width:35em;
    
87. background-color:rgba(190,190,190,0.8);
    
88. transition-property:width;
    
89. -moz-transition-duration: 0.5s;
    
90. -webkit-transition-duration: 0.5s;
    
91. -moz-transition-property: width; /* Firefox 4 */
    
92. -webkit-transition-property:width; /* Safari and Chrome */
    
93. -o-transition-property:width;
    
94. }
    
95. 
    
96. section
    
97. {
    
98. padding-right:11em;
    
99. padding-left:12em;
    
100. padding-bottom:2em;
     
101. }
     
102. 
     
103. ul
     
104. {
     
105. text-align:justify;
     
106. width:75%;
     
107. }
     
108. 
     
109. ul li
     
110. {
     
111. list-style-type:none;
     
112. text-align:justify;
     
113. }
     
114. 
     
115. section ul li a:hover
     
116. {
     
117. background:transparent;
     
118. transition:background 0s;
     
119. color:brown;
     
120. }
     
121. 
     
122. section ul li:before
     
123. {
     
124. content: "\2013 ";
     
125. }
     
126. 
     
127. section aside
     
128. {
     
129. background-color: #e6e6e6;
     
130. margin-left: 20em;
     
131. width: 4.5cm;
     
132. float: right;
     
133. clear: right;
     
134. text-align: left;
     
135. font-size: 0.9em;
     
136. }
     
137. 
     
138. div#border_transparent
     
139. {
     
140. background:rgba(208,207,209,0.6);
     
141. border:5%;
     
142. /*-webkit-border-radius: 1em 4em 1em 4em;*/
     
143. /*-moz-border-radius: 1em 4em 1em 4em;*/
     
144. /*border-radius: 1em 4em 1em 4em;*/
     
145. padding:3%;
     
146. }
     
147. 
     
148. header ul#navigation
     
149. {
     
150. font-family: "Bauhaus Std";
     
151. font-size:x-large;
     
152. font-variant:small-caps;
     
153. letter-spacing:0.3em;
     
154. text-align:center;
     
155. padding:1.5em;
     
156. }
     
157. 
     
158. ul#navigation li
     
159. {
     
160. padding: 1em;
     
161. display:inline;
     
162. list-style: none;
     
163. margin:0.5em;
     
164. }
     
165. 
     
166. header a
     
167. {
     
168. color: brown;
     
169. text-decoration: none;
     
170. border:none;
     
171. text-shadow:0 1px 0 #fff;
     
172. -webkit-transition: color 0.2s ease;
     
173. -moz-transition: color 0.2s ease;
     
174. -o-transition: color 0.2s ease;
     
175. 
     
176. }
     
177. 
     
178. header a:hover
     
179. {
     
180. opacity: 0.5;
     
181. color: rgba(255,255,255,0.3);
     
182. text-shadow: 2px 2px 0px rgba(177,51,51,0.8);
     
183. }
     
184. 
     
185. footer
     
186. {
     
187. font-family:"Bauhaus Std";
     
188. padding:1em;
     
189. text-shadow:0 1px 0 #fff;
     
190. font-variant: small-caps;
     
191. letter-spacing: 0.1em;
     
192. font-size: small;
     
193. }
     
194. 
     
195. footer p
     
196. {
     
197. text-align:left;
     
198. padding-right:11em;
     
199. padding-left:12em;
     
200. 
     
201. }
     
202. 
     
203. ol#code li:before
     
204. {
     
205. content : "|";
     
206. }
     
207. 
     
208. ol#table_of_content li
     
209. {
     
210. text-indent: 1em;
     
211. color :rgb(100,100,100);
     
212. text-shadow:0 1px 0 #fff;
     
213. }
     
214. 
     
215. li #h2
     
216. {
     
217. font-variant:small-caps;
     
218. letter-spacing:0.1;
     
219. }
     
220. 
     
221. ul#table_of_content li:before
     
222. {
     
223. content:"";
     
224. }
     
225. 
     
226. ul#table_of_content li
     
227. {
     
228. list-style:lower-latin;
     
229. }
     
230. 
     
231. #h3
     
232. {
     
233. list-style-position:outside;
     
234. text-indent:1em;
     
235. }
     
236. 
     
237. #h2
     
238. {
     
239. text-indent:2em;
     
240. }
     
241. 
     
242. a
     
243. {
     
244. color: rgb(8,83,26);
     
245. text-decoration: none;
     
246. }
     
247. 
     
248. a:hover
     
249. {
     
250. color:brown;
     
251. }
     
252. 
     
253. h1
     
254. {
     
255. font-family: "Bauhaus Std";
     
256. font-variant: small-caps;
     
257. letter-spacing:0.4em;
     
258. font-size: 300%;
     
259. color:brown;
     
260. text-align:center;
     
261. text-shadow:0 1px 0 #fff;
     
262. }
     
263. 
     
264. h2
     
265. {
     
266. color: grey;
     
267. font-family: "Friz Quadrata Std";
     
268. font-variant:small-caps;
     
269. letter-spacing: 0.1em;
     
270. text-shadow:0 1px 0 #fff;
     
271. padding-top:1.5em;
     
272. margin-bottom:-0.5em;
     
273. }
     
274. h3
     
275. {
     
276. font-family:"Friz Quadrata Std";
     
277. font-style: italic;
     
278. font-weight:normal;
     
279. text-shadow:0 1px 0 #fff;
     
280. }
     
281. h4
     
282. {
     
283. font-style: italic;
     
284. text-shadow:0 1px 0 #fff;
     
285. }
     
286. 
     
287. table span
     
288. {
     
289. text-transform: uppercase;
     
290. }
     
291. 
     
292. table
     
293. {
     
294. border-collapse:collapse;
     
295. text-align: left;
     
296. }
     
297. 
     
298. td.title_entry
     
299. {
     
300. font-family:"Gill Sans Std";
     
301. padding:1em;
     
302. margin:0.5em;
     
303. width:7em;
     
304. color :rgb(90,90,90);
     
305. letter-spacing:0.1em;
     
306. vertical-align:top;
     
307. text-shadow:0 1px 0 #fff;
     
308. font-variant:small-caps;
     
309. }
     
310. 
     
311. .japanese
     
312. {
     
313. font-family: "Heisei Maru Gothic Std";
     
314. font-size:small;
     
315. }
     
316. 
     
317. video
     
318. {
     
319. -moz-box-shadow: -20px -20px 20px white, 20px -20px 20px white, -20px 20px 20px white, 20px 20px 20px white;
     
320. -webkit-box-shadow: -20px -20px 20px white, 20px -20px 20px white, -20px 20px 20px white, 20px 20px 20px white;
     
321. box-shadow: -20px -20px 20px white, 20px -20px 20px white, -20px 20px 20px white, 20px 20px 20px white;
     
322. }
     
323. 
     
324. figure
     
325. {
     
326. /*margin-bottom:5em;*/
     
327. }
     
328. 
     
329. figcaption.light
     
330. {
     
331. font-family: "Oregon LDO Vanishing";
     
332. color:white;
     
333. background-image: -moz-linear-gradient(100% 100% 90deg, #e1e1e1, rgba(255, 255, 255, 0) );
     
334. background-image: -webkit-gradient(linear, 0% 0%, 0% 120%, from(rgba(255, 255, 255, 0)), to(#e1e1e1));
     
335. bottom:1.9em;
     
336. position:relative;
     
337. -moz-box-shadow: -20px 50px 50px white, 20px 50px 50px white;
     
338. -webkit-box-shadow: -20px 50px 50px white, 20px 50px 50px white;
     
339. box-shadow: -20px 50px 50px white, 20px 50px 50px white;
     
340. padding-bottom:1em;
     
341. }
     
342. figcaption.light a
     
343. {
     
344. text-shadow:text-shadow:5px 10px 10px #fff;
     
345. color:white;
     
346. }
     
347. 
     
348. figcaption.future
     
349. {
     
350. font-family:"Sony Sketch EF";
     
351. text-align:center;
     
352. }
     
353. 
     
354. figure.rotation
     
355. {
     
356. background: rgba(255,255,255,1);
     
357. border: 10px solid #fff;
     
358. -webkit-border-radius: 8px;
     
359. -moz-border-radius: 8px;
     
360. border-radius: 8px;
     
361. -webkit-box-shadow: 0 3px 10px #ccc;
     
362. -moz-box-shadow: 0 3px 10px #ccc;
     
363. box-shadow: 0 3px 10px #ccc;
     
364. }
     
365. 
     
366. figure.rotation img {
     
367. width: 100%;
     
368. -webkit-transition: all 0.7s ease-in-out;
     
369. -moz-transition: all 1s ease-in-out;
     
370. -o-transition: all 1s ease-in-out;
     
371. transition: all 1s ease-in-out;
     
372. }
     
373. 
     
374. figure.rotation img:hover
     
375. {
     
376. border: 10px solid #fff;
     
377. -webkit-border-radius: 8px;
     
378. -moz-border-radius: 8px;
     
379. border-radius: 8px;
     
380. -webkit-box-shadow: 0 3px 10px #ccc;
     
381. -moz-box-shadow: 0 3px 10px #ccc;
     
382. box-shadow: 0 3px 10px #ccc;
     
383. -moz-transform: scale(2) rotate(360deg);
     
384. -webkit-transform: scale(2) rotate(360deg);
     
385. -o-transform: scale(2) rotate(360deg);
     
386. transform: scale(2) rotate(360deg);
     
387. }
     
388. 
     
389. .img{
     
390. -moz-transition-duration: 0.5s;
     
391. -webkit-transition-duration: 0.5s;
     
392. -moz-box-shadow: -20px -20px 20px black, 20px -20px 20px black, -20px 20px 20px black, 20px 20px 20px black;
     
393. -webkit-box-shadow: -20px -20px 20px black, 20px -20px 20px black, -20px 20px 20px black, 20px 20px 20px black;
     
394. box-shadow: -20px -20px 10px black, 20px -20px 10px black, -20px 20px 10px black, 20px 20px 10px black;
     
395. }
     
396. 
     
397. .img:hover
     
398. {
     
399. -moz-transform:scale(1.5);
     
400. -webkit-transform:scale(1.5);
     
401. -moz-box-shadow:0px 0px 30px #ccc;
     
402. -webkit-box-shadow:0px 0px 30px #ccc;
     
403. 
     
404. }
     
405. 
     
406. .img .mask{
     
407. width: 34%;
     
408. background-color: rgb(0, 0, 0);
     
409. position: absolute;
     
410. height: 47%;
     
411. opacity:0.6;
     
412. cursor:pointer;
     
413. -moz-transition-duration:3s;
     
414. -webkit-transition-duration: 3s;
     
415. }
     
416. #img:hover .mask{
     
417. height:0%;
     
418. width:0%;
     
419. }
     
420. 
     
421. figcaption.trans_future
     
422. {
     
423. font-family:"Sony Sketch EF";
     
424. text-align:center;
     
425. background-color:rgba(255,255,255,0);
     
426. color:white;
     
427. }