etoiledebethleem/website
5
1
Fork 1
Code Issues 6 Pull requests 1 Projects 1 Releases Packages Activity Actions

feat(landing): a little better landing

Browse source
This commit is contained in:
Matthieu Bessat 2024-01-11 08:56:39 +01:00
parent 6e5b7cb7b5
commit 70a8884495
5 changed files with 32 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/images/activites/visite_28_fev_2023_randonneurs.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 MiB

19
assets/sass/general.scss
View file

@ -174,4 +174,23 @@ img {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
padding-top: 1rem;
}
figure {
display: flex;
justify-content: center;
flex-direction: column;
}
.layout-two-spaced {
display: flex;
justify-content: space-between;
padding: 1.5rem 0;
}
@media (max-width: $md-breakpoint) {
.layout-two-spaced {
display: block;
}
} }

5
assets/sass/landing.scss
View file

@ -266,6 +266,11 @@
.history-component__content { .history-component__content {
} }
.history-carousel {
background: rgba(1, 1, 1, 0.05);
}
.history-container { .history-container {
.double-horizontal-image-container { .double-horizontal-image-container {
display: grid; display: grid;

6
assets/sass/page_container.scss
View file

@ -39,10 +39,12 @@
@media (max-width: $sm-breakpoint) { @media (max-width: $sm-breakpoint) {
.page-container { .page-container {
width: 100%; width: 100%;
padding: 0 .8rem; padding-left: .8rem;
padding-right: .8rem;
} }
.page-full { .page-full {
padding: 0 .8rem; padding-left: .8rem;
padding-right: .8rem;
} }
} }

8
layouts/index.html
View file

@ -18,7 +18,7 @@
<div class="accent-separator"> <div class="accent-separator">
</div> </div>
<div class="page-container" style="padding: 2rem 0; display: flex; justify-content: space-between"> <div class="page-container layout-two-spaced">
<p>Campagne d'adhésion 2024, nous avons besoin de vous !</p> <p>Campagne d'adhésion 2024, nous avons besoin de vous !</p>
<a href="/adhesion" class="button">Adhérer !</a> <a href="/adhesion" class="button">Adhérer !</a>
</div> </div>
@ -41,7 +41,7 @@
<div class="page-container"> <div class="page-container">
<h2>La chapelle au fil du temps</h2> <h2>La chapelle au fil du temps</h2>
</div> </div>
<div class="carousel" aria-label="Histoire de la chapelle"> <div class="carousel history-carousel" aria-label="Histoire de la chapelle">
<ol class="carousel__viewport"> <ol class="carousel__viewport">
<li id="history__slide0" tabindex="0" class="carousel__slide" data-slide-index="0"> <li id="history__slide0" tabindex="0" class="carousel__slide" data-slide-index="0">
@ -229,13 +229,13 @@
<p> <p>
</div> </div>
<div class="image-container"> <div class="image-container">
{{ $image := resources.Get "images/assemblee_constitutive_ensemble.jpg" }} {{ $image := resources.Get "images/activites/visite_28_fev_2023_randonneurs.jpg" }}
<figure class="slide-image image-with-caption"> <figure class="slide-image image-with-caption">
<img <img
alt="Photo de groupe de personnes impliqués dans l'association" alt="Photo de groupe de personnes impliqués dans l'association"
src="{{ $image.RelPermalink }}" src="{{ $image.RelPermalink }}"
/> />
<figcaption>L'assemblée générale fondatrice de 2022</figcaption> <figcaption>Visite de la chapelle par des randonneurs</figcaption>
</figure> </figure>
</div> </div>
</div> </div>