fix: sticky content nav, news list, adhesions

assets/sass/adhesion.scss

@@ -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;
+        }
+    }
 }

assets/sass/article.scss

@@ -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 @@
     }
 
 }
-

assets/sass/general.scss

@@ -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;
+        }
+    }
+}

assets/sass/header.scss

@@ -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;

assets/sass/landing.scss

@@ -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);
     }

content/adhesion/_index.md

@@ -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

content/association/_index.md

@@ -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.
 
-
-

content/association/activites.md

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

content/association/bureau.md

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

content/association/comissions.md

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

layouts/actualites/list.html

@@ -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 }}

layouts/actualites/single.html

@@ -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 }}

layouts/adhesion/list.html

@@ -8,32 +8,51 @@
 	<main class="page-container">
 		{{ 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
-                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 }}

layouts/association/list.html

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

layouts/partials/header.html

@@ -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="/documentation">Documentation</a></li>
-                        <li><a href="/images">Galerie</a></li>
+                        <li><a href="/adhesion">Adhérer</a></li>
                     </ul>
                 </nav>
             </div>