Ajout de données météo
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
@import "body.css";
|
||||
@import "links.css";
|
||||
@import "panel.css";
|
||||
@import "weather.css";
|
||||
@import "hero.css";
|
||||
@import "big-logo.css";
|
||||
@import "site-stats.css";
|
||||
|
||||
@@ -41,4 +41,12 @@
|
||||
|
||||
--grid-columns: 4;
|
||||
--width-card-min: 300px;
|
||||
}
|
||||
|
||||
--weather-gap: var(--gap-half);
|
||||
--weather-gap-large: var(--gap);
|
||||
--weather-icon-size: 92px;
|
||||
--weather-metric-min-width: 160px;
|
||||
--weather-metric-padding: var(--padding-half);
|
||||
--weather-badge-padding: 0.35rem 0.6rem;
|
||||
--weather-sources-margin: var(--gap-half);
|
||||
}
|
||||
|
||||
114
themes/42/assets/css/weather.css
Normal file
114
themes/42/assets/css/weather.css
Normal file
@@ -0,0 +1,114 @@
|
||||
.panel.weather {
|
||||
background: var(--weather-background);
|
||||
border: var(--weather-border);
|
||||
box-shadow: var(--weather-shadow);
|
||||
color: var(--weather-text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--weather-gap-large);
|
||||
}
|
||||
|
||||
.weather-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
gap: var(--weather-gap-large);
|
||||
}
|
||||
|
||||
.weather-icon {
|
||||
width: var(--weather-icon-size);
|
||||
height: var(--weather-icon-size);
|
||||
filter: var(--weather-icon-shadow);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.weather-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--weather-gap-half);
|
||||
}
|
||||
|
||||
.weather-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--weather-gap);
|
||||
}
|
||||
|
||||
.weather-values {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--weather-gap);
|
||||
}
|
||||
|
||||
.weather-values .weather-value:not(:first-child)::before {
|
||||
content: "•";
|
||||
color: var(--weather-text-muted);
|
||||
margin: 0 calc(var(--weather-gap) / 3);
|
||||
}
|
||||
|
||||
.weather-line + .weather-sources {
|
||||
margin-top: var(--weather-sources-margin, var(--weather-gap-half));
|
||||
}
|
||||
.weather-values + .weather-sources {
|
||||
margin-top: var(--weather-sources-margin, var(--weather-gap-half));
|
||||
}
|
||||
|
||||
.weather-date,
|
||||
.weather-value {
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
color: var(--weather-text);
|
||||
}
|
||||
|
||||
.weather-value {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--weather-gap-half) / 1.2);
|
||||
}
|
||||
|
||||
.weather-sources {
|
||||
display: flex;
|
||||
gap: var(--weather-gap);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.weather-source {
|
||||
padding: var(--weather-badge-padding);
|
||||
background: var(--weather-badge-bg);
|
||||
color: var(--weather-badge-text);
|
||||
border-radius: 999px;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.weather-wind {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--weather-gap-half);
|
||||
}
|
||||
|
||||
.weather-wind-arrow {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
fill: var(--weather-text);
|
||||
filter: var(--weather-icon-shadow);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.weather-top {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: var(--weather-gap);
|
||||
}
|
||||
|
||||
.weather-icon {
|
||||
width: calc(var(--weather-icon-size) * 0.85);
|
||||
height: calc(var(--weather-icon-size) * 0.85);
|
||||
}
|
||||
}
|
||||
98
themes/42/layouts/_partials/render/weather.html
Normal file
98
themes/42/layouts/_partials/render/weather.html
Normal file
@@ -0,0 +1,98 @@
|
||||
{{- $w := .Params.weather -}}
|
||||
{{- if or (not $w) (eq (len $w) 0) -}}
|
||||
{{- /* No weather data */ -}}
|
||||
{{- return -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $date := .Date -}}
|
||||
{{- $hour := (time $date).Hour -}}
|
||||
{{- $isNight := or (lt $hour 6) (ge $hour 18) -}}
|
||||
|
||||
{{- $precip := $w.precipitations -}}
|
||||
{{- $wind := $w.wind_speed -}}
|
||||
{{- $humidity := $w.humidity -}}
|
||||
{{- $illum := $w.illuminance -}}
|
||||
|
||||
{{- $icon := cond $isNight "clear-night.svg" "clear-day.svg" -}}
|
||||
{{- $labels := dict
|
||||
"clear-day.svg" "Grand soleil"
|
||||
"clear-night.svg" "Ciel dégagé"
|
||||
"partly-cloudy-day.svg" "Partiellement nuageux"
|
||||
"partly-cloudy-night.svg" "Partiellement nuageux"
|
||||
"cloudy.svg" "Nuageux"
|
||||
"drizzle.svg" "Bruine"
|
||||
"rain.svg" "Pluvieux"
|
||||
"snow.svg" "Neige"
|
||||
"thunderstorms-day.svg" "Orage"
|
||||
"fog.svg" "Brouillard"
|
||||
"wind.svg" "Vent fort"
|
||||
}}
|
||||
|
||||
{{- if $precip -}}
|
||||
{{- $icon = "rain.svg" -}}
|
||||
{{- else if and $wind (ge $wind 45) -}}
|
||||
{{- $icon = "wind.svg" -}}
|
||||
{{- else if and $humidity (ge $humidity 90) (or (not $illum) (lt $illum 80)) -}}
|
||||
{{- $icon = "fog.svg" -}}
|
||||
{{- else if and $humidity (ge $humidity 75) -}}
|
||||
{{- $icon = cond $isNight "partly-cloudy-night.svg" "cloudy.svg" -}}
|
||||
{{- else -}}
|
||||
{{- $icon = cond $isNight "clear-night.svg" "clear-day.svg" -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $sources := slice -}}
|
||||
{{- with $w.source -}}
|
||||
{{- if (reflect.IsSlice .) -}}
|
||||
{{- $sources = . -}}
|
||||
{{- else -}}
|
||||
{{- $sources = (slice .) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
<div class="panel weather">
|
||||
<div class="weather-top">
|
||||
{{- $label := index $labels $icon | default "Météo" -}}
|
||||
<img class="weather-icon" src="/icons/weather/{{ $icon }}" alt="{{ $label }}" title="{{ $label }}" loading="lazy" />
|
||||
<div class="weather-summary">
|
||||
<div class="weather-line">
|
||||
<span class="weather-date">{{ printf "%s — %s" (time.Format ":date_long" $date) (time.Format ":time_short" $date) }}</span>
|
||||
</div>
|
||||
<div class="weather-values">
|
||||
{{- with $w.temperature }}
|
||||
<span class="weather-value">{{ printf "%.1f" (mul . 1.0) }} °C</span>
|
||||
{{- end }}
|
||||
{{- with $w.humidity }}
|
||||
<span class="weather-value">{{ printf "%.0f" (mul . 1.0) }} %</span>
|
||||
{{- end }}
|
||||
{{- with $w.pressure }}
|
||||
<span class="weather-value">{{ printf "%.0f" (mul . 1.0) }} hPa</span>
|
||||
{{- end }}
|
||||
{{- with $w.illuminance }}
|
||||
<span class="weather-value">{{ printf "%.0f" (mul . 1.0) }} lx</span>
|
||||
{{- end }}
|
||||
{{- if or $w.wind_speed $w.wind_direction }}
|
||||
<span class="weather-value weather-wind">
|
||||
{{- if $w.wind_direction -}}
|
||||
{{- $rawDeg := mul $w.wind_direction 1.0 -}}
|
||||
{{- $arrowDeg := math.Mod (add $rawDeg 180) 360 -}}
|
||||
<svg class="weather-wind-arrow" viewBox="0 0 24 24" aria-hidden="true" style="transform: rotate({{ printf "%.0f" $arrowDeg }}deg);" title="{{ printf "%.0f°" $rawDeg }}">
|
||||
<path d="M12 3l-4 7h3v11h2V10h3z" />
|
||||
</svg>
|
||||
{{- end -}}
|
||||
{{- if $w.wind_speed -}}
|
||||
{{ printf "%.1f" (mul $w.wind_speed 1.0) }} km/h
|
||||
{{- end -}}
|
||||
</span>
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
{{- if gt (len $sources) 0 }}
|
||||
<div class="weather-sources">
|
||||
{{- range $sources }}
|
||||
<span class="weather-source">{{ . }}</span>
|
||||
{{- end }}
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,13 +26,19 @@
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
{{- with .Params.dossier }}
|
||||
<aside>
|
||||
<div class="panel">
|
||||
{{- partial "dossier-summary" . -}}
|
||||
{{- partial "dossier-summary" $ -}}
|
||||
</div>
|
||||
</aside>
|
||||
{{- end }}
|
||||
|
||||
{{- partial "asides/keywords.html" . }}
|
||||
|
||||
<aside>
|
||||
{{- partial "render/weather.html" . -}}
|
||||
</aside>
|
||||
</article>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user