fix(landing): various style corrections and add credit
This commit is contained in:
parent
bdffe13bab
commit
090c1b220f
9 changed files with 142 additions and 82 deletions
|
|
@ -90,10 +90,6 @@
|
|||
.article__summary {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.article__readmore {
|
||||
border: 1px solid white;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ $xs-breakpoint: 400px;
|
|||
// #A5A692
|
||||
// #BFB78F
|
||||
$background: #025E73; // primary
|
||||
$background-secondary: #BFB78F;
|
||||
$background-secondary: #7592A8;
|
||||
$secondary: #011F26;
|
||||
$tertiary: #A5A692;
|
||||
$accent: #F2A71B;
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue