fix: sticky content nav, news list, adhesions

This commit is contained in:
Matthieu Bessat 2024-03-10 17:33:41 +01:00
parent aa8564f60a
commit 8324974b98
15 changed files with 152 additions and 62 deletions

View file

@ -178,7 +178,7 @@
} }
.adhesion-choice { .adhesion-choices {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
column-gap: .5rem; column-gap: .5rem;
@ -188,12 +188,12 @@
} }
} }
.adhesion-choice__item { .adhesion-choices__item {
border: 1px solid gray; border: 1px solid gray;
text-align: center; text-align: center;
} }
.adhesion-choice__item { .adhesion-choices__item {
&:hover, &:focus { &:hover, &:focus {
background: transparent !important; background: transparent !important;
box-shadow: inset 0 0 10px $accent-dark; box-shadow: inset 0 0 10px $accent-dark;
@ -204,7 +204,7 @@
} }
} }
.adhesion-choice__item__icon { .adhesion-choices__item__icon {
margin-bottom: 1rem; margin-bottom: 1rem;
svg { svg {
padding: .8rem; padding: .8rem;
@ -213,5 +213,15 @@
} }
} }
.adhesion-choice__item { @media (max-width: $md-breakpoint) {
.adhesion-choices {
display: block;
.adhesion-choices__item {
width: 100%;
margin-bottom: 1rem;
}
.adhesion-choices__item:last-child {
margin-bottom: 0;
}
}
} }

View file

@ -1,3 +1,4 @@
// in the context of reading the article
.article__date { .article__date {
font-style: italic; font-style: italic;
} }
@ -6,10 +7,14 @@
max-width: 100%; max-width: 100%;
img { img {
object-fit: contain;
aspect-ratio: 1;
max-height: 60vh;
max-width: 100%; max-width: 100%;
} }
} }
// card in list
.article-card { .article-card {
display: flex; display: flex;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
@ -108,6 +113,7 @@
float: right; float: right;
} }
@media (max-width: $sm-breakpoint) { @media (max-width: $sm-breakpoint) {
.prominent-article { .prominent-article {
.article__title { .article__title {
@ -123,4 +129,3 @@
} }
} }

View file

@ -187,3 +187,50 @@ figure {
.icon-facebook { .icon-facebook {
fill: lighten(#0866FF, 20%) !important; fill: lighten(#0866FF, 20%) !important;
} }
.content-with-side-menu {
// display: grid;
// grid-template-columns: 1fr 1fr 1fr 1fr;
// margin: 0 auto;
// width: 85%;
// display: grid;
// grid-template-columns: 20rem 1fr;
// column-gap: 3rem;
position: relative;
.side-menu__container {
position: sticky;
top: 7rem;
left: 5rem;
width: 25rem;
height: 0;
}
.side-menu {
}
}
.sticky-nav {
position: sticky;
top: 7rem;
background: white;
border: 1px solid black;
ul {
display: flex;
justify-content: space-between;
align-items: stretch;
list-style-type: none;
padding: 0;
margin: 0;
height: 100%;
li {
width: 100%;
margin: 0;
padding: .5rem 1rem;
border: 1px solid $background-secondary;
}
}
}

View file

@ -1,7 +1,3 @@
.after-header {
overflow-x: hidden;
}
$header-height: 6rem; $header-height: 6rem;
.site-header { .site-header {
@ -29,12 +25,20 @@ $header-height: 6rem;
margin: 0; margin: 0;
li { li {
margin-right: 1.5rem; margin-right: 1.5rem;
display: flex;
align-items: center;
} }
li:last-of-type { li:last-of-type {
margin-right: 0; margin-right: 0;
} }
} }
.membership-header-button {
font-size: 1rem;
padding: .5rem 2rem;
min-width: initial;
}
.site-header__nav { .site-header__nav {
a { a {
color: white; color: white;

View file

@ -267,6 +267,8 @@
} }
.landing-main { .landing-main {
overflow-x: hidden; // fix later
section:first-of-type { section:first-of-type {
border-top: 1px solid rgba(1, 1, 1, 0.2); border-top: 1px solid rgba(1, 1, 1, 0.2);
} }

View file

@ -5,12 +5,3 @@ featured_image:
src: ./images/default_logo.png src: ./images/default_logo.png
--- ---
## Pourquoi adhérer ?
à remplir depuis l'affiche adhérer de damien
## Comment adhérer ?
### Via Helloasso
### Par bulletin papier

View file

@ -25,5 +25,3 @@ Il est formé des membres du bureau et d'autres personnes volontaires.
2/3 des membres sont nommés par la famille des propriétaires du domaine. 2/3 des membres sont nommés par la famille des propriétaires du domaine.

View file

@ -0,0 +1,5 @@
---
title: Les activités de l'association
date: 2024-03-10
---

View file

@ -0,0 +1,5 @@
---
title: Le bureau
date: 2024-03-10
---

View file

@ -0,0 +1,5 @@
---
title: Les comissions
date: 2024-03-10
---

View file

@ -17,7 +17,7 @@
{{ if .Params.featured_image }} {{ if .Params.featured_image }}
{{ $featuredImage = .Resources.GetMatch (.Params.featured_image.src | safeURL) }} {{ $featuredImage = .Resources.GetMatch (.Params.featured_image.src | safeURL) }}
{{ end }} {{ end }}
{{ $featuredImage := $featuredImage.Resize "450x" }} {{ $featuredImage := $featuredImage.Fill "400x300 Center" }}
<figure> <figure>
<img alt="" src="{{ $featuredImage.RelPermalink }}" /> <img alt="" src="{{ $featuredImage.RelPermalink }}" />
{{ with .Params.featured_image.caption }} {{ with .Params.featured_image.caption }}

View file

@ -1,5 +1,5 @@
{{ define "main" }} {{ define "main" }}
<main class="page-container"> <main class="page-container read-article">
<article class="article"> <article class="article">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
@ -15,7 +15,7 @@
{{ if .Params.featured_image }} {{ if .Params.featured_image }}
{{ $featuredImage := .Resources.GetMatch (.Params.featured_image.src | safeURL) }} {{ $featuredImage := .Resources.GetMatch (.Params.featured_image.src | safeURL) }}
{{ if $featuredImage }} {{ if $featuredImage }}
{{ $featuredImage = $featuredImage.Resize "1000x" }} {{ $featuredImage = $featuredImage.Resize "900x" }}
<figure class="article__featured-image"> <figure class="article__featured-image">
<img alt="" src="{{ $featuredImage.RelPermalink }}" /> <img alt="" src="{{ $featuredImage.RelPermalink }}" />
{{ with .Params.featured_image.caption }} {{ with .Params.featured_image.caption }}

View file

@ -8,32 +8,51 @@
<main class="page-container"> <main class="page-container">
{{ with .Title }}<h1>{{ . }}</h1>{{ end }} {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
<p>2 méthodes d'adhésions possibles :</p> <h2>Comment adhérer ?</h2>
<div class="adhesion-choice"> <p style="text-indent: 0rem;">2 méthodes d'adhésions sont possibles :</p>
<div class="adhesion-choices">
<a <a
class="adhesion-choice__item button button-light" class="adhesion-choices__item button button-light"
tabindex="0" tabindex="0"
title="Adhérer sur Helloasso" title="Adhérer sur Helloasso"
href="{{ .Site.Params.contact.helloasso_adhesion }}" href="{{ .Site.Params.contact.helloasso_adhesion }}"
> >
<div class="adhesion-choice__item__icon"> <div class="adhesion-choices__item__icon">
{{ partial "helpers/svg" (dict "path" "icons/helloasso") }} {{ partial "helpers/svg" (dict "path" "icons/helloasso") }}
</div> </div>
<span>HelloAsso</span> <span>HelloAsso</span>
</a> </a>
<a <a
class="adhesion-choice__item button button-light" class="adhesion-choices__item button button-light"
tabindex="0" tabindex="0"
title="Adhérer avec bulletin papier (PDF)" title="Adhérer avec bulletin papier (PDF)"
href="{{ .Site.Params.contact.paper_adhesion }}" href="{{ .Site.Params.contact.paper_adhesion }}"
> >
<div class="adhesion-choice__item__icon"> <div class="adhesion-choices__item__icon">
{{ partial "helpers/svg" (dict "path" "icons/write") }} {{ partial "helpers/svg" (dict "path" "icons/write") }}
</div> </div>
<span>Papier</span> <span>Papier</span>
</a> </a>
</div> </div>
<h2>Pourquoi adhérer ?</h2>
<p>
Adhérer permet de participer aux activités internes de l'association, participer aux différentes commissions.
</p>
<p>
L'adhésion permet de prendre part aux assemblées générales de l'association : elle donne le droit de vote et le droit de candidater à un siège d'administrateur.
</p>
<h2>Les tarifs</h2>
<ul>
<li>Individuel</li>
<li>Individuel bienfaiteur</li>
<li>Couple</li>
<li>Couple bienfaiteur</li>
<li>Moral</li>
<li>Moral bienfaiteur</li>
</ul>
{{ if .Content }} {{ if .Content }}
<div> <div>
{{ with .Content }}<div>{{ . }}</div>{{ end }} {{ with .Content }}<div>{{ . }}</div>{{ end }}

View file

@ -1,27 +1,18 @@
{{ define "main" }} {{ define "main" }}
<div class="team-presentation"> <div class="content-with-side-menu">
<div class="team-item">
</div>
</div>
<main class="page-container"> <main class="page-container">
{{ $listtitle := .Title }} {{ $listtitle := .Title }}
{{ with .Title }}<h1>{{ . }}</h1>{{ end }} {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
<ul class="section-menu">
<nav class="sticky-nav">
<ul>
{{ range .Pages }} {{ range .Pages }}
<li> <li>
<div class="post-title">
{{ if eq $listtitle "Posts" }}
{{ .Date.Format "2006-01-02" }} <a href="{{ .RelPermalink }}">{{.Title }}</a>
{{ else }}
<a href="{{ .RelPermalink }}">{{.Title }}</a> <a href="{{ .RelPermalink }}">{{.Title }}</a>
{{ end }}
</div>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
</nav>
{{ if .Content }} {{ if .Content }}
<div> <div>
@ -29,6 +20,6 @@
</div> </div>
{{ end }} {{ end }}
</main> </main>
</div>
{{ end }} {{ end }}

View file

@ -9,7 +9,14 @@
<li><a href="/actualites">Actualités</a></li> <li><a href="/actualites">Actualités</a></li>
<li><a href="/association">L'association</a></li> <li><a href="/association">L'association</a></li>
<li><a href="/documentation">Documentation</a></li> <li><a href="/documentation">Documentation</a></li>
<li><a href="/adhesion">Adhérer</a></li> <li>
<a
href="/adhesion"
class="button button-transparent membership-header-button"
>
Adhérer
</a>
</li>
</ul> </ul>
{{ end }} {{ end }}
</nav> </nav>
@ -22,10 +29,11 @@
<div class="background">&nbsp;</div> <div class="background">&nbsp;</div>
<nav class="nav"> <nav class="nav">
<ul class="list"> <ul class="list">
<li><a href="/">Accueil</a></li>
<li><a href="/actualites">Actualités</a></li> <li><a href="/actualites">Actualités</a></li>
<li><a href="/association">L'association</a></li> <li><a href="/association">L'association</a></li>
<li><a href="/chapelle-crypte">La chapelle</a></li> <li><a href="/documentation">Documentation</a></li>
<li><a href="/images">Galerie</a></li> <li><a href="/adhesion">Adhérer</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>