fix(landing): various style corrections and add credit

This commit is contained in:
Matthieu Bessat 2024-03-09 14:25:14 +01:00
parent 1e09fe04f4
commit d98bb13411
9 changed files with 142 additions and 82 deletions

View file

@ -90,10 +90,6 @@
.article__summary {
padding-bottom: 1rem;
}
.article__readmore {
border: 1px solid white;
}
}
&:hover {

View file

@ -24,15 +24,18 @@
}
}
.button-border {
.button.button-border {
border: 1px solid $accent-dark;
}
.button.button-transparent {
background-color: transparent;
background-color: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid white;
&:hover {
background-color: transparent;
opacity: 0.5;
color: white;
}
}

View file

@ -114,10 +114,13 @@ $height: 30rem;
z-index: 0;
.slide-image {
width: 100%;
padding: 0;
margin: 0;
img {
border-radius: 2px;
object-fit: cover;
max-height: 22rem;
}
figcaption {
font-size: .9rem;
@ -343,6 +346,8 @@ $height: 30rem;
img {
width: auto;
height: 100%;
max-height: initial !important;
object-fit: contain;
}
}
}

View file

@ -43,32 +43,6 @@ a:hover {
opacity: 0.8;
}
.secondary-bg {
h2 {
color: white;
}
a {
color: white;
}
color: white;
.button {
background-color: $background-secondary;
color: white;
&:hover {
background-color: lighten($background-secondary, 14%);
}
}
background-color: darken($background-secondary, 15%);
}
.separation-section {
margin-top: 3rem;
padding: 1.2rem 0;
}
.w-100 {
width: 100px;
}
@ -197,3 +171,19 @@ figure {
display: block;
}
}
.icon-twitter {
fill: lighten(#0C72B7, 20%) !important;
}
.icon-mastodon {
fill: lighten(#5C4CE2, 20%) !important;
}
.icon-youtube {
fill: lighten(#FF1A1A, 15%) !important;
}
.icon-facebook {
fill: lighten(#0866FF, 20%) !important;
}

View file

@ -91,6 +91,42 @@
}
}
.section-with-bg {
position: relative;
.section__bg {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100;
background-position-x: center;
background-size: cover;
}
}
.end-landing-section {
margin-top: 2rem;
margin-bottom: 1rem;
.section__content {
h2 {
color: white;
}
a {
color: white;
}
color: white;
background-color: rgba(darken($background, 10%), .4);
padding: 1.2rem 0;
position: relative;
z-index: 1;
}
.section__bg {
// avoir l'etoile dans le cadre sur desktop
background-position-y: 28%;
}
}
.news-section {
.side-icon {
left: -50px;
@ -137,9 +173,6 @@
display: block;
}
.cover__backdrop {
}
.landing__title {
font-weight: 2rem;
}
@ -152,11 +185,6 @@
@import 'landing/timeline.scss';
@media (max-width: $lg-breakpoint) {
.cover__back {
}
}
@media (min-width: $lg-breakpoint) {
.cover__back {
background-position-x: center;
@ -164,7 +192,6 @@
}
}
.compare-section {
.compare-items {
display: grid;
@ -322,11 +349,6 @@
}
}
.history-component__content {
}
.history-carousel {
background: rgba(1, 1, 1, 0.05);
}
@ -347,12 +369,23 @@
.organization-content {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2rem;
column-gap: 3rem;
padding-top: 2rem;
padding-bottom: 2rem;
img {
border-radius: 3px;
object-fit: cover;
height: 20rem;
}
}
.organization__image {
figure {
margin: 0;
}
figcaption {
margin-top: .6rem;
}
}
@ -360,13 +393,27 @@
.cover__back {
background-position-y: 0;
}
.history-container {
}
.side-icon {
display: none;
}
.cover__title {
font-size: 2.5rem;
}
.trailer-section {
.end-action-container {
justify-content: space-between;
.button {
padding: 1rem 2rem;
}
}
}
.organization-content {
display: flex;
flex-direction: column-reverse;
}
}
@media (min-width: $md-breakpoint) {

View file

@ -11,7 +11,7 @@ $xs-breakpoint: 400px;
// #A5A692
// #BFB78F
$background: #025E73; // primary
$background-secondary: #BFB78F;
$background-secondary: #7592A8;
$secondary: #011F26;
$tertiary: #A5A692;
$accent: #F2A71B;

View file

@ -12,6 +12,10 @@ Association loi 1901.
- Responsable technique du site web : Matthieu Bessat
- Siège : 7 allée des sources, Aubevoye, 27940 Le Val d'Hazey
## Crédits
- Page d'accueil : Photo de la chapelle vue du ciel, photographiée par [Francis Cormon](https://web.archive.org/web/20230314054530/http://www.photo-paramoteur.com/) depuis un paramoteur en 2008.
## Hébergement
Ce site web est auto-hébergé.
@ -32,4 +36,3 @@ Pour les curieux, ce site est réalisé avec [Hugo](https://gohugo.io/).
Vous pouvez trouver [le code source de ce site web sur ce dépot en ligne](https://forge.lefuturiste.fr/etoiledebethleem/website).

View file

@ -1,6 +1,7 @@
{{ define "main" }}
<div class="cover__container">
{{ $cover := (resources.Get (printf "%s" ("images/cover_1.jpg" | safeURL))) }}
{{ $cover = $cover.Resize "1920x" }}
<div class="cover__container">
{{ with $cover }}
<div class="cover__back" style="background-image: url('{{ .RelPermalink }}')">
<!-- For now we are not going to show a video -->
@ -119,7 +120,7 @@
<div>
<h3>Les Chartreux</h3>
<p>
Le cardinal fit don du domaine aux Chartreux d'Aubevoye. Chaque Noël, ils se rendèrent en procession à la lueure des torches pour célébrer la messe de minuit dans la crypte. Ils demandèrent au Cardinal de créer un détachement de la chartreuse à la chapelle.
Le cardinal fit don du domaine aux Chartreux d'Aubevoye. Chaque Noël, ils se rendaient en procession à la lueure des torches pour célébrer la messe de minuit dans la crypte. Ils demandèrent au Cardinal de créer un détachement de la chartreuse à la chapelle.
</p>
<p>
Ils s'occupèrent alors du domaine : les vignes des cotaux et la maintenance de la chapelle jusqu'à la révolution 1791 où ils furent chassés.
@ -229,6 +230,7 @@
</div>
<div class="image-container">
{{ $image := resources.Get "images/chapelle_2014_sud.jpg" }}
{{ $image := $image.Resize "800x" }}
<figure class="slide-image image-with-caption">
<img
alt="Chapelle en mauvaise état en hiver derrière les arbres."
@ -380,7 +382,7 @@
src="{{ $image.RelPermalink }}"
alt="Photo de groupe de personnes impliqués dans l'association"
/>
<figcaption>Assemblée constituante 2022</figcaption>
<figcaption>Les membres fondateurs à l'assemblée constituante</figcaption>
</figure>
</div>
<div class="organization__explain">
@ -557,16 +559,25 @@
</section>
</main>
<div class="separation-section secondary-bg">
<div class="section section-with-bg end-landing-section">
{{ with $cover }}
<div class="section__bg" style="background-image: url('{{ .RelPermalink }}')">
</div>
{{ end }}
<div class="section__content">
<div class="page-container">
<h2>Rejoignez nous dans notre aventure !</h2>
<p>Déjà plus de 80 membres !<p>
<a href="/adhesion" class="button">Adhérer !</a>
<p>
Déjà plus de 120 membres !
</p>
<div class="end-action-container">
<a href="/adhesion" class="button button-transparent">
Adhérer !
</a>
</div>
</div>
</div>
<div class="page-container">
</div>
{{ $js := resources.Get "scripts/carousel.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
<script defer src="{{ $js.Permalink }}"></script>

View file

@ -6,30 +6,35 @@
<div class="site-footer__links">
<ul class="site-footer-socials">
<li>
<a href="{{ .Site.Params.socials.peertube }}">
{{ partial "helpers/svg" (dict "path" "icons/peertube" "class" "site-footer-socials__logo") }}
<a href="{{ .Site.Params.socials.facebook }}" title="Page Facebook">
{{ partial "helpers/svg" (dict "path" "icons/facebook" "class" "site-footer-socials__logo icon-facebook") }}
</a>
</li>
<li>
<a href="{{ .Site.Params.socials.mastodon }}">
{{ partial "helpers/svg" (dict "path" "icons/mastodon" "class" "site-footer-socials__logo") }}
</a>
</li>
<li>
<a href="{{ .Site.Params.socials.facebook }}">
{{ partial "helpers/svg" (dict "path" "icons/facebook" "class" "site-footer-socials__logo") }}
</a>
</li>
<li>
<a href="{{ .Site.Params.socials.youtube }}">
{{ partial "helpers/svg" (dict "path" "icons/youtube" "class" "site-footer-socials__logo") }}
</a>
</li>
<li>
<a href="{{ .Site.Params.contact.helloasso }}">
<a href="{{ .Site.Params.contact.helloasso }}" title="Page HelloAsso">
{{ partial "helpers/svg" (dict "path" "icons/helloasso" "class" "site-footer-socials__logo") }}
</a>
</li>
<li>
<a href="{{ .Site.Params.socials.twitter }}" title="Fil Twitter/X">
{{ partial "helpers/svg" (dict "path" "icons/twitter" "class" "site-footer-socials__logo icon-twitter") }}
</a>
</li>
<li>
<a href="{{ .Site.Params.socials.youtube }}" title="Chaîne YouTube">
{{ partial "helpers/svg" (dict "path" "icons/youtube" "class" "site-footer-socials__logo icon-youtube") }}
</a>
</li>
<li>
<a href="{{ .Site.Params.socials.mastodon }}" title="Fil Mastodon">
{{ partial "helpers/svg" (dict "path" "icons/mastodon" "class" "site-footer-socials__logo icon-mastodon") }}
</a>
</li>
<li>
<a href="{{ .Site.Params.socials.peertube }}" title="Chaîne Peertube">
{{ partial "helpers/svg" (dict "path" "icons/peertube" "class" "site-footer-socials__logo") }}
</a>
</li>
</ul>
<ul class="inline-menu-list">
<li><a href="/association">Notre association</a></li>