Skip to content

Commit 42fbc82

Browse files
matamadiomatamadio
committed
Update global-hazard.md
1 parent 79d5bfa commit 42fbc82

File tree

1 file changed

+241
-14
lines changed

1 file changed

+241
-14
lines changed

‎docs/global-hazard.md‎

Lines changed: 241 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,244 @@ The most relevant datasets (updated, high resolution, scientific quality) repres
1111
Some hazards are modelled using a **probabilistic approach**, providing a set of scenarios linked to hazard frequency for the period of reference. For the current data availability, this is the case for floods, storm surges, cyclones, heatwaves, and wildfires.
1212
Others, such as landslides, use a **deterministic approach**, providing an individual map of hazard intensity or susceptibility.
1313

14-
```{table}
15-
:name: hzd_datasets
16-
:align: center
17-
:width: 75%
18-
19-
| [**GEOPHYSICAL**](hzd_gp-data.md) | [**HYDRO-METEOROLOGICAL**](hzd_hm-data.md) | [**ENVIRONMENTAL**](hzd_env-data.md) |
20-
| :---: | :---: | :---: |
21-
| [Earthquake<br>![Earthquake](images/hzd_icons/earthquake.png)](hzd_gp_eq)| [River floods<br>![River flood](images/hzd_icons/flood.png)](hzd_hm_fl) | [Air pollution<br>![Air pollution](images/hzd_icons/air-pollution.png)](hzd_env_ap) |
22-
| [Tsunami<br>![Tsunami](images/hzd_icons/tsunami.png)](hzd_gp_ts) | [Landslide<br>![Landslide](images/hzd_icons/landslide.png)](hzd_hm_ls) | |
23-
| [Volcanic activity<br>![Volcanic activity](images/hzd_icons/volcano.png)](hzd_gp_vo) | [Coastal flood<br>![Coastal flood](images/hzd_icons/storm-surge.png)](hzd_hm_ss) | |
24-
| | [Tropical cyclones<br>![Tropical cyclones](images/hzd_icons/wind.png)](hzd_hm_tc) | |
25-
| | [Drought<br>![Drought](images/hzd_icons/drought.png)](hzd_hm_dr) | |
26-
| | [Heat stress<br>![Heat stress](images/hzd_icons/heat-wave.png)](hzd_hm_hs) | |
27-
```
14+
<style>
15+
.hazard-table {
16+
width: 75%;
17+
margin: 2rem auto;
18+
border-collapse: collapse;
19+
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
20+
border-radius: 12px;
21+
overflow: hidden;
22+
background: white;
23+
}
24+
25+
.hazard-table th {
26+
color: white;
27+
padding: 1.5rem 1rem;
28+
text-align: center;
29+
font-size: 1.1rem;
30+
font-weight: 600;
31+
border: none;
32+
}
33+
34+
.hazard-table th:nth-child(1) {
35+
background: linear-gradient(to bottom, #8B4513 0%, #A0522D 100%);
36+
}
37+
38+
.hazard-table th:nth-child(2) {
39+
background: linear-gradient(to bottom, #4682B4 0%, #5693C4 100%);
40+
}
41+
42+
.hazard-table th:nth-child(3) {
43+
background: linear-gradient(to bottom, #228B22 0%, #32CD32 100%);
44+
}
45+
46+
.hazard-table th a {
47+
color: white;
48+
text-decoration: none;
49+
font-weight: 600;
50+
}
51+
52+
.hazard-table th a:hover {
53+
text-decoration: underline;
54+
}
55+
56+
.hazard-table td {
57+
padding: 1.5rem 1rem;
58+
text-align: center;
59+
vertical-align: middle;
60+
border: 1px solid #e8f4f8;
61+
background-color: #fafcfd;
62+
height: 120px;
63+
}
64+
65+
.hazard-table tr:nth-child(even) td {
66+
background-color: #f8fbfc;
67+
}
68+
69+
.hazard-item {
70+
display: flex;
71+
flex-direction: column;
72+
align-items: center;
73+
gap: 0.5rem;
74+
height: 100%;
75+
justify-content: center;
76+
}
77+
78+
.hazard-item a {
79+
color: #0b3860;
80+
text-decoration: none;
81+
font-weight: 500;
82+
display: flex;
83+
flex-direction: column;
84+
align-items: center;
85+
gap: 0.5rem;
86+
transition: all 0.2s ease;
87+
}
88+
89+
.hazard-item a:hover {
90+
color: #fe5f86;
91+
transform: translateY(-2px);
92+
}
93+
94+
.hazard-item img {
95+
width: 48px;
96+
height: 48px;
97+
object-fit: contain;
98+
}
99+
100+
.hazard-text {
101+
font-size: 0.9rem;
102+
line-height: 1.3;
103+
text-align: center;
104+
}
105+
106+
@media (max-width: 768px) {
107+
.hazard-table {
108+
width: 95%;
109+
font-size: 0.8rem;
110+
}
111+
112+
.hazard-table th,
113+
.hazard-table td {
114+
padding: 1rem 0.5rem;
115+
}
116+
117+
.hazard-item img {
118+
width: 40px;
119+
height: 40px;
120+
}
121+
}
122+
</style>
123+
124+
<table class="hazard-table">
125+
<thead>
126+
<tr>
127+
<th><a href="hzd_gp-data.md"><strong>GEOPHYSICAL</strong></a></th>
128+
<th><a href="hzd_hm-data.md"><strong>HYDRO-METEOROLOGICAL</strong></a></th>
129+
<th><a href="hzd_env-data.md"><strong>ENVIRONMENTAL</strong></a></th>
130+
</tr>
131+
</thead>
132+
<tbody>
133+
<tr>
134+
<td>
135+
<div class="hazard-item">
136+
<a href="hzd_gp_eq">
137+
<div class="hazard-text">Earthquake</div>
138+
139+
![Earthquake](images/hzd_icons/earthquake.png)
140+
141+
</a>
142+
</div>
143+
</td>
144+
<td>
145+
<div class="hazard-item">
146+
<a href="hzd_hm_fl">
147+
<div class="hazard-text">River floods</div>
148+
149+
![River flood](images/hzd_icons/flood.png)
150+
151+
</a>
152+
</div>
153+
</td>
154+
<td>
155+
<div class="hazard-item">
156+
<a href="hzd_env_ap">
157+
<div class="hazard-text">Air pollution</div>
158+
159+
![Air pollution](images/hzd_icons/air-pollution.png)
160+
161+
</a>
162+
</div>
163+
</td>
164+
</tr>
165+
<tr>
166+
<td>
167+
<div class="hazard-item">
168+
<a href="hzd_gp_ts">
169+
<div class="hazard-text">Tsunami</div>
170+
171+
![Tsunami](images/hzd_icons/tsunami.png)
172+
173+
</a>
174+
</div>
175+
</td>
176+
<td>
177+
<div class="hazard-item">
178+
<a href="hzd_hm_ls">
179+
<div class="hazard-text">Landslide</div>
180+
181+
![Landslide](images/hzd_icons/landslide.png)
182+
183+
</a>
184+
</div>
185+
</td>
186+
<td></td>
187+
</tr>
188+
<tr>
189+
<td>
190+
<div class="hazard-item">
191+
<a href="hzd_gp_vo">
192+
<div class="hazard-text">Volcanic activity</div>
193+
194+
![Volcanic activity](images/hzd_icons/volcano.png)
195+
196+
</a>
197+
</div>
198+
</td>
199+
<td>
200+
<div class="hazard-item">
201+
<a href="hzd_hm_ss">
202+
<div class="hazard-text">Coastal flood</div>
203+
204+
![Coastal flood](images/hzd_icons/storm-surge.png)
205+
206+
</a>
207+
</div>
208+
</td>
209+
<td></td>
210+
</tr>
211+
<tr>
212+
<td></td>
213+
<td>
214+
<div class="hazard-item">
215+
<a href="hzd_hm_tc">
216+
<div class="hazard-text">Tropical cyclones</div>
217+
218+
![Tropical cyclones](images/hzd_icons/wind.png)
219+
220+
</a>
221+
</div>
222+
</td>
223+
<td></td>
224+
</tr>
225+
<tr>
226+
<td></td>
227+
<td>
228+
<div class="hazard-item">
229+
<a href="hzd_hm_dr">
230+
<div class="hazard-text">Drought</div>
231+
232+
![Drought](images/hzd_icons/drought.png)
233+
234+
</a>
235+
</div>
236+
</td>
237+
<td></td>
238+
</tr>
239+
<tr>
240+
<td></td>
241+
<td>
242+
<div class="hazard-item">
243+
<a href="hzd_hm_hs">
244+
<div class="hazard-text">Heat stress</div>
245+
246+
![Heat stress](images/hzd_icons/heat-wave.png)
247+
248+
</a>
249+
</div>
250+
</td>
251+
<td></td>
252+
</tr>
253+
</tbody>
254+
</table>

0 commit comments

Comments
 (0)