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

fix: sticky content nav, news list, adhesions

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

20
assets/sass/adhesion.scss
View file

@ -178,7 +178,7 @@
}
.adhesion-choice {
.adhesion-choices {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: .5rem;
@ -188,12 +188,12 @@
}
}
.adhesion-choice__item {
.adhesion-choices__item {
border: 1px solid gray;
text-align: center;
}
.adhesion-choice__item {
.adhesion-choices__item {
&:hover, &:focus {
background: transparent !important;
box-shadow: inset 0 0 10px $accent-dark;
@ -204,7 +204,7 @@
}
}
.adhesion-choice__item__icon {
.adhesion-choices__item__icon {
margin-bottom: 1rem;
svg {
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;
}
}
}

7
assets/sass/article.scss
View file

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

47
assets/sass/general.scss
View file

@ -187,3 +187,50 @@ figure {
.icon-facebook {
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;
}
}
}

12
assets/sass/header.scss
View file

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

2
assets/sass/landing.scss
View file

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

9
content/adhesion/_index.md
View file

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

2
content/association/_index.md
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.

5
content/association/activites.md
View file

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

5
content/association/bureau.md
View file

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

5
content/association/comissions.md
View file

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

2
layouts/actualites/list.html
View file

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

4
layouts/actualites/single.html
View file

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

31
layouts/adhesion/list.html
View file

@ -8,32 +8,51 @@
<main class="page-container">
{{ with .Title }}<h1>{{ . }}</h1>{{ end }}
<p>2 méthodes d'adhésions possibles :</p>
<div class="adhesion-choice">
<h2>Comment adhérer ?</h2>
<p style="text-indent: 0rem;">2 méthodes d'adhésions sont possibles :</p>
<div class="adhesion-choices">
<a
class="adhesion-choice__item button button-light"
class="adhesion-choices__item button button-light"
tabindex="0"
title="Adhérer sur Helloasso"
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") }}
</div>
<span>HelloAsso</span>
</a>
<a
class="adhesion-choice__item button button-light"
class="adhesion-choices__item button button-light"
tabindex="0"
title="Adhérer avec bulletin papier (PDF)"
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") }}
</div>
<span>Papier</span>
</a>
</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 }}
<div>
{{ with .Content }}<div>{{ . }}</div>{{ end }}

49
layouts/association/list.html
View file

@ -1,34 +1,25 @@
{{ define "main" }}
<div class="team-presentation">
<div class="team-item">
<div class="content-with-side-menu">
<main class="page-container">
{{ $listtitle := .Title }}
{{ with .Title }}<h1>{{ . }}</h1>{{ end }}
<nav class="sticky-nav">
<ul>
{{ range .Pages }}
<li>
<a href="{{ .RelPermalink }}">{{.Title }}</a>
</li>
{{ end }}
</ul>
</nav>
</div>
{{ if .Content }}
<div>
{{ with .Content }}<div>{{ . }}</div>{{ end }}
</div>
{{ end }}
</main>
</div>
<main class="page-container">
{{ $listtitle := .Title }}
{{ with .Title }}<h1>{{ . }}</h1>{{ end }}
<ul class="section-menu">
{{ range .Pages }}
<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>
{{ end }}
</div>
</li>
{{ end }}
</ul>
{{ if .Content }}
<div>
{{ with .Content }}<div>{{ . }}</div>{{ end }}
</div>
{{ end }}
</main>
{{ end }}

14
layouts/partials/header.html
View file

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