script pour établir une bdd Ãà partir d'un tsv avec différent format - retour accueil
git clone git://bebou.netlib.re/laradb
Log | Files | Refs |
style.css (8985B)
1 :root{
2 --fond-A:white;
3 --fond-B:ivory;
4 --fond-C:ivory;
5 --noir:olive;
6 --accent:royalblue;
7 --corps:1rem;
8 --corps-L:2rem;
9 --indent:2rem;
10 --interligne:1.4rem;
11 --marker-size:.75rem;
12 --largeur-bordure-cellule:1px;
13 --largeur:16px;
14 --arrondi:5px;
15 --incertitude:.5;
16 --noi-width:10px;
17 --grad-width:1px
18 }
19
20 /* Type settings */
21 @font-face {
22 font-family: "Dot";
23 src: local("Dot"),
24 url("TimesDotRom.woff2") format("woff2"),
25 url("TimesDotRom.woff") format("woff");
26 }
27
28 @font-face {
29 font-family: "Dot-ita";
30 src: local("Dot-ita"),
31 url("TimesDot-Italic.woff2") format("woff2"),
32 url("TimesDot-Italic.woff") format("woff");
33 }
34
35
36
37 *{
38 font-family:Dot;
39 box-sizing:content-box;
40 font-size:var(--corps);
41 color:var(--noir);
42 line-height:var(--interligne)
43 }
44 #TABLEAU tr {box-sizing:border-box;}
45
46 thead td{text-align:left}
47 #TABLEAU tr {
48 cursor:pointer;
49 display:flex;
50 justify-content:flex-start;
51 }
52
53 #TABLEAU tr, #TABLEAU td {
54 background:var(--fond-B)
55 }
56 #TABLEAU tr:nth-of-type(2n+1) td, #TABLEAU tr:nth-of-type(2n+1):not(thead tr){
57 background:var(--fond-A);
58 }
59 #TABLEAU td { border-left:0px solid black;padding-left:0px}
60 #TABLEAU tr {display:flex;flex-wrap:nowrap;height:var(--interligne); column-gap:0px;}
61 #TABLEAU tr.show {height:auto}
62 #TABLEAU tr td{width:calc(var(--largeur) * 10)}
63 #TABLEAU tr td.numeros{width:calc(var(--largeur) * 4)}
64 #TABLEAU tr td:first-of-type{width:min(calc(var(--largeur) * 30), 100vw); position:sticky;margin-left:calc(var(--indent) * -1);left:0;top:0; z-index:1000; border-right:1px solid var(--noir); max-width:50vw;}
65 #TABLEAU tr {margin-left:min(0, calc(var(--largeur) * 30), 100vw); position:relative}
66 #TABLEAU td.start-date, #TABLEAU td.end-date{width:11ch; content:attr('data-date')}
67 #TABLEAU td.number-of-issues {width:5ch}
68 #TIMELINE, #TABLEAU {
69 display:grid;
70 max-width:100vw;
71 overflow:scroll;
72 position:relative;
73 bottom:0;
74 height:calc(100vh - var(--interligne) * 4);
75 }
76
77 #TABLEAU td.start-date {margin-left:4ch;}
78 #TABLEAU tr.show {display:flex;flex-direction:column;flex-wrap:wrap;position:sticky;left:0; width:100vw}
79 #TABLEAU tbody tr td { text-overflow: " (…)"; white-space: nowrap;
80 overflow: hidden;}
81
82 #TABLEAU tr.show td:first-of-type{
83 border-right:none;
84 }
85 #TABLEAU tr.show td:not(:first-of-type){
86 margin-left:var(--indent);
87 width:min(100%, 960px) !important;
88 border-left:none;
89 max-width:calc(100% - var(--indent) * 3);
90 white-space:normal
91 /*border-top:1px solid black*/
92 }
93 tr:not(.show) td.start-date, tr:not(.show) td.end-date, tr:not(.show) td.number-of-issues {text-align:right}
94
95 #TABLEAU tr:not(.show) td:not(:first-of-type) {padding: 0 5px}
96 #TABLEAU tr.show td {}
97 tr.show td::before {opacity:var(--incertitude)}
98 tr.show td.title::before {content:""}
99 tr.show td.start-date::before {content:"start date : "}
100 tr.show td.end-date::before {content:"end date : "}
101 tr.show td.number-of-issues::before {content:"number of issues : "}
102 tr.show td.city::before {content:"city : "}
103 tr.show td.country::before {content:"country : "}
104 tr.show td.language::before {content:"language : "}
105 tr.show td.full-title::before {content:"full title : "}
106 tr.show td.type::before {content:"type : "}
107 tr.show td.format::before {content:"format : "}
108 tr.show td.frequency::before {content:"frequency : "}
109 tr.show td.creators::before {content:"creators : "}
110 tr.show td.editor-in-chief::before {content:"editor in chief : "}
111 tr.show td.publisher::before {content:"publisher : "}
112 tr.show td.sources::before {content:"sources : "}
113 tr.show td.related-works::before {content:"related works : "}
114 tr.show td.comments::before {content:"comments : "}
115
116 body {margin: 0; min-height:100vh;overflow-x:hidden}
117 tr{width:100%;padding:0}
118 thead {position:sticky;top:0; z-index:1000000000000; }
119 #TIMELINE thead tr td:not(:first-of-type) {
120 background:var(--fond-A) !important;
121 }
122 #TABLEAU thead tr td{
123 }
124
125 /*
126 .titre {width:calc(var(--largeur) * 1)}
127 .periodicite {width:calc(var(--largeur) * 1)}
128 .debut {width:calc(var(--largeur) * 2)}
129 .fin {width:calc(var(--largeur) * 2)}
130 .numeros {width:calc(var(--largeur) * 1)}
131 .format {width:calc(var(--largeur) * 2)}
132 .ville {width:calc(var(--largeur) * 2)}
133 .pays {width:calc(var(--largeur) * 2)}
134 .sources {width:calc(var(--largeur) * 2)}
135 .travaux-lies {width:calc(var(--largeur) * 2)}
136 */
137 .rectangle {
138 padding:0 !important;
139 }
140 .rectangle div {
141 border-left:10px solid var(--accent);
142 z-index:1000;
143 background-color: var(--accent); height:100%; min-height: var(--interligne); position: relative;
144
145 scale:0.27 1.05;
146 transform-origin:left center;
147 }
148
149 .legende {position:fixed;bottom:var(--interligne);right:var(--interligne); z-index:10; display:none;
150 background:var(--fond-C);
151 border:1px solid var(--noir); border-radius:var(--arrondi);
152 padding:var(--corps);
153 }
154 sup{line-height:var(--interligne)}
155 sup::before{content:' '}
156 .unsure, sup {opacity:var(--incertitude)}
157 nav {max-width:100%;background:var(--fond-A);margin:0 var(--indent);
158 position:relative;
159 z-index:1000}
160 #map {display:block;height:100vh;
161 background: var(--fond-A);
162 outline: 0;
163 }
164 .leaflet-popup-content-wrapper {border-radius:0}
165 .pin:hover {background-color:var(--noir) !important}
166 .pin:hover {z-index:1000000}
167 .pin {
168 cursor:pointer;
169 background-color: var(--accent);
170 width: var(--marker-size);
171 height: var(--marker-size);
172 display: block;
173 position: relative;
174 border-radius:100%;
175 position:relative
176 }
177 .pin section {
178 left:50%;
179 transform:translateX(-50%);
180 background:var(--fond-A);
181 width:fit-content;
182 position:absolute;
183 display:none;
184 top:10px;
185 border-radius:5px;
186 }
187 .pin section p {
188 padding:0px 5px;
189 text-indent:0;
190 white-space:nowrap;
191 }
192 .pin section p:nth-of-type(even){
193 background:var(--fond-C)}
194 .pin:hover section {
195 border:1px solid var(--noir);
196 display:inline
197 }
198 .pin p {margin:0;}
199
200 #TIMELINE tr td:first-of-type{
201
202
203 }
204 #TIMELINE tr {
205
206 display:grid;
207 grid-template-columns:1fr 3fr;
208 }
209
210 .numbers-1-of-2 .number:nth-of-type(2n),
211 .numbers-1-of-4 .number:nth-of-type(4n-1),
212 .numbers-1-of-4 .number:nth-of-type(4n-2),
213 .numbers-1-of-4 .number:nth-of-type(4n-3) {display:none}
214
215 .numbers-1-of-2 {justify-content:space-between !important}
216 #TIMELINE .numbers {
217 z-index:10000;
218 position:relative;
219 display:flex;
220 justify-content:space-around;
221 padding-bottom:calc(var(--interligne) / 2);
222 text-align:center;
223 }
224 #TIMELINE .numbers div:not(#graduation) {
225
226 transform:rotate(0deg);
227 font-size:var(--corps) !important;
228 }
229 #graduation{
230 position:absolute;
231 width:100%;
232 border-top: 1px solid var(--accent);
233 height:calc(var(--interligne) / 2);
234 top:calc(var(--interligne) / 1);
235 }
236 #vertical-bar{
237 pointer-events:none;
238 position:fixed;
239 bottom:0;
240 height:calc(100vh);
241 border-left:1px solid var(--noir);
242 z-index:0;
243 }
244 #TIMELINE tbody tr, #TABLEAU tbody tr{
245 }
246 #TIMELINE tbody tr:hover,
247 #TABLEAU tr:hover
248 {
249 border-bottom:1px solid var(--noir) !important;
250 border-top:1px solid var(--noir) !important
251 }
252 #TABLEAU thead tr:hover{border-top:none !important}
253 section.large * {max-width:960px;margin:0;font-size:var(--corps-L); line-height:calc(var(--corps-L) * 1.2)}
254 section.large {margin:var(--interligne)}
255 section.large a {color:var(--accent)}
256 p:not(:first-of-type){text-indent:var(--indent)};
257
258
259 table {margin-bottom:var(--interligne);border-collapse:collapse}
260
261 footer {
262 display:none;
263 background:var(--fond-B);width:100%;height:var(--interligne);}
264
265 footer p {margin:0}
266
267 ::-moz-selection { /* Code for Firefox */
268 color: var(--fond-A);
269 background: var(--noir);
270 }
271
272 ::selection {
273 color: var(--fond-A);
274 background: var(--noir);
275 }
276
277 .large, #TABLEAU, #TIMELINE {
278 margin:0 var(--indent)
279 }
280
281 #TIMELINE {overflow-x:hidden}
282 .asc::after {content: "â–²"}
283 .desc::after {content: "â–¼"}
284 .asc::after,.desc::after {display:inline-block;font-size:calc(var(--corps) * .6);transform:translate(5px, calc(var(--corps) * -.15))
285 }
286
287 .small {
288 display: flex;
289 flex-wrap:wrap;
290 gap:10px;
291 margin: 0 var(--interligne);
292 padding-bottom:calc(var(--interligne) * 2 );
293 }
294 .small p {
295 min-width:min(400px, 100%);
296 max-width:min(500px, 100%);
297 list-style: none;
298 text-indent: 0;
299 margin:0;
300 }
301
302 .small ul{
303 list-style: none;
304 }
305
306 .underline{
307 text-decoration: underline;
308 }
309
310 a, .small a {color:var(--accent)}
311
312
313 .nav-main, .nav-sub {
314 display:grid;
315 grid-template-columns: 3fr 1fr 1fr 1fr;
316 background:var(--fond-A);
317 }
318
319 .nav-main a:first-of-type {grid-column:1}
320 .nav-main a:nth-of-type(2), .nav-sub a:nth-of-type(1) {grid-column:2}
321 .nav-main a:nth-of-type(3), .nav-sub a:nth-of-type(2) {grid-column:3}
322 .nav-main a:nth-of-type(4), .nav-sub a:nth-of-type(3) {grid-column:4}
323
324 nav a {color:var(--accent); width:fit-content;}
325 nav a:hover{opacity:1;}
326 a#active {color:var(--fond-A);background:var(--noir)}
327 .nav-main a:not(:first-of-type), .nav-sub a {color:var(--noir)}
328
329 nav:first-of-type{
330 padding-top:calc(var(--interligne) / 2);
331 }
332 nav:last-of-type {
333 border-bottom:1px solid var(--accent);
334 padding-bottom:calc(var(--interligne) / 2);
335 }
336 .wip {pointer-events:none; text-decoration:line-through; color:gray !important}