feat: animation landing page + style button + uniform ul header and footer

assets/sass/button.scss

@@ -1,10 +1,26 @@
 .button {
+    display: inline-block;
+    cursor: pointer;
     background-color: $accent;
     color: white;
-    padding: 1rem 2rem;
+    padding: 1rem 2.5rem;
+    font-weight: lighter;
+    text-transform: uppercase;
+    user-select: none;
     min-width: 10rem;
     font-size: 1.2rem;
     border: 0;
     border-radius: 2px;
+
+    transition: all 0.2s ease-in-out;
+
+    border: 1px solid transparent;
+    &:hover {
+        opacity: 0.8;
+        background-color: lighten($accent, 14%);
+        color: black;
+        border: 1px solid rgba(0.5, 0.5, 0.5, 0.3);
+        border-style: inset;
+    }
 }
 

assets/sass/footer.scss

@@ -1,14 +1,15 @@
 html {
     height: 100%;
 }
+
 body {
     min-height: 100%;
     display: flex;
     flex-direction: column;
 }
+
 .footer-push {
     flex-grow: 1;
-
 }
 
 .site-footer {
@@ -37,11 +38,9 @@ body {
     display: flex;
     justify-content: space-between;
 }
-.site-footer__links {
+
-    a {
+// .site-footer__links {
-        margin-right: .5rem;
+// }
-    }
-}
 
 @media (max-width: $md-breakpoint) {
     .site-footer__content {
@@ -49,9 +48,4 @@ body {
         justify-content: start;
         flex-direction: column;
     }
-    .site-footer__title {
-    }
-    .site-footer__links {
-        
-    }
 }

assets/sass/general.scss

@@ -26,6 +26,8 @@ h1, h2, h3, .title {
 h1 {
     font-size: 3rem;
     color: $secondary;
+    margin-top: 3rem;
+    margin-bottom: 1rem;
 }
 
 h2 {
@@ -34,7 +36,7 @@ h2 {
 }
 
 a {
-    color: $accent;
+    color: darken($accent, 6%);
 }
 
 a:hover {
@@ -42,18 +44,27 @@ a:hover {
 }
 
 
-
+.secondary-bg {
-.separation-section {
-     background-color: darken($background-secondary, 0%);
-     padding: 1.2rem 0;
-
      h2 {
          color: white;
      }
+     a {
+         color: white;
+     }
      color: white;
 
      .button {
-         background-color: white;
+         background-color: $background-secondary;
-         color: $accent;
+         color: white;
+         &:hover {
+             background-color: lighten($background-secondary, 14%);
          }
      }
+
+     background-color: darken($background-secondary, 15%);
+ }
+
+.separation-section {
+     margin-top: 3rem;
+     padding: 1.2rem 0;
+ }

assets/sass/header.scss

@@ -13,6 +13,19 @@ $header-height: 6rem;
     align-items: center;
 }
 
+.inline-menu-list {
+    display: flex;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    li {
+        margin-right: 1.5rem;
+    }
+    li:last-of-type {
+        margin-right: 0;
+    }
+}
+
 .site-header__nav {
     a {
         color: white;

assets/sass/landing.scss

@@ -3,6 +3,7 @@
     position: relative;
     min-height: 40rem;
 }
+
 .cover__back {
     position: absolute;
     height: 100%;
@@ -39,8 +40,18 @@
     background-color: rgba(14, 14, 14, 0.2);
 }
 
+@keyframes cover_title_in {
+    0% {
+        left: -10rem;
+    }
+    100% {
+        left: 0;
+    }
+}
+
 .cover__title-container {
-    // position: relative;
+    position: relative;
+    animation: cover_title_in 0.5s cubic-bezier(.39,.58,.57,1);
 }
 
 .cover__title {
@@ -68,3 +79,10 @@
     height: 0;
     border-bottom: .3rem solid $accent;
 }
+
+@media (min-width: $lg-breakpoint) {
+    .cover__back {
+        background-position-x: center;
+        background-position-y: -1.5rem;
+    }
+}

assets/sass/sections.scss

@@ -1,4 +1,6 @@
 .section-menu {
+    border: 1px solid #eee;
+    padding: 1rem 0;
     list-style-type: none;
     display: flex;
     justify-content: space-around;

content/_index.md

@@ -22,6 +22,3 @@ Chacun y met de son grain de sel pour partager des connaissances, des souvenirs
 
 L'acquisition du domaine forestier qui inclus la chapelle par Jean-Pierre Blondel en 2021 permet d'ouvrir les perspectives et lance la voie vers la création de l'association.
 
-
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

layouts/association/list.html

@@ -3,7 +3,7 @@
 		{{ $listtitle := .Title }}
 		
 		{{ with .Title }}<h1>{{ . }}</h1>{{ end }}
-		<ul class="section-menu">
+		<ul class="section-menu secondary-bg">
 		    {{ range .Pages }}
 		    <li>
 		        <div class="post-title">

layouts/index.html

@@ -22,7 +22,7 @@
     </div>
 
     <div class="page-container" style="margin-top: 2rem"> 
-        <button class="button">Adhérer !</button>
+        <a class="button">Adhérer !</a>
     </div>
 
 	<main class="page-container">
@@ -39,12 +39,12 @@
         */}}
 	</main>
 
-    <div class="card separation-section">
+    <div class="card separation-section secondary-bg">
-	<main class="page-container">
+        <div class="page-container">
-        <h2>The quick brown fox jumps over the lazy dog</h2>
+            <h2>Rejoignez nous dans notre aventure !</h2>
-        <button class="button">Adhérer !</button>
+            <a class="button">Adhérer !</a>
-	</main>
+        </div>
+    </div>
+	<div class="page-container">
 	</div>
-	<main class="page-container">
-	</main>
 {{ end }}

layouts/partials/footer.html

@@ -4,8 +4,10 @@
             <a href="/">{{ .Site.Title }}</a>.
         </div>
         <div class="site-footer__links">
-            <a href="/a-propos-du-site">A propos de ce site</a>
+            <ul class="inline-menu-list">
-            <a href="/contact">Nous contacter</a>
+                <li><a href="/a-propos-du-site">A propos de ce site</a></li>
+                <li><a href="/contact">Nous contacter</a></li>
+            </ul>
         </div>
     </div>
 </footer>

layouts/partials/header.html

@@ -8,13 +8,12 @@
             />
         </a>
         <nav class="site-header__nav desktop-nav">
-            <a href="/actualites">Actualités</a>.
+            <ul class="inline-menu-list">
-            <a href="/association">L'association</a>.
+                <li><a href="/actualites">Actualités</a></li>
-            <a href="/histoires">Histoire</a>.
+                <li><a href="/association">L'association</a></li>
-            <a href="/images">Gallerie</a>.
+                <li><a href="/histoires">Histoire</a></li>
-            {{ range .Site.Menus.main }}
+                <li><a href="/images">Gallerie</a></li>
-            <a href="{{ .URL | relURL }}"><b>{{ .Name }}</b></a>.
+            </ul>
-            {{ end }}
         </nav>
         <div class="burger-menu">
             <div class="burger-button-container">