feat: travail design avec damien

README.md

@@ -27,4 +27,5 @@
 - [ ] Meilleur thème
 - [ ] Meilleur home page
 - [ ] Ajout du reste d'actus de la page fb
+- [ ] Ajouter les pdfs directement dans git. (eh oui git c'est meme pour les gros fichiers^^)
 

assets/sass/article.scss

@@ -11,5 +11,4 @@
 }
 
 .article {
-    line-height: 1.8rem;
 }

assets/sass/button.scss

@@ -0,0 +1,32 @@
+.button {
+    background-color: $accent;
+    color: white;
+    padding: 1rem 2rem;
+    min-width: 10rem;
+    font-size: 1.2rem;
+    border: 0;
+    border-radius: 2px;
+}
+
+
+.burger {
+    width: 100px;
+    height: 100px;
+    border: 1px solid red;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    .bar {
+        width: 100%;
+        border-top: 6px solid rgba(1, 1, 1, 0.9);
+    }
+    .bar1 {
+
+    }
+    .bar2 {
+
+    }
+    .bar3 {
+
+    }
+}

assets/sass/footer.scss

@@ -12,7 +12,7 @@ body {
 }
 
 .site-footer {
-    border-top: .5rem solid #eeeeee;
+    border-top: .3rem solid $accent;
     margin-top: 1rem;
     padding-top: 2rem;
     padding-bottom: 4rem;
@@ -29,6 +29,29 @@ body {
     }
 }
 
+.site-footer__title {
+    @extends .serif-font;
+}
+
 .site-footer__content {
+    display: flex;
+    justify-content: space-between;
+}
+.site-footer__links {
+    a {
+        margin-right: .5rem;
+    }
+}
+
+@media (max-width: $md-breakpoint) {
+    .site-footer__content {
+        display: flex;
+        justify-content: start;
+        flex-direction: column;
+    }
+    .site-footer__title {
+    }
+    .site-footer__links {
         
     }
+}

assets/sass/general.scss

@@ -1,33 +1,59 @@
+ @import url('https://fonts.googleapis.com/css2?family=Bona+Nova:wght@400;700&family=Poppins:wght@300;500&family=Roboto+Condensed&display=swap');
+
+.serif-font {
+     font-family: 'Bona Nova', serif;
+ }
+
 body {
     // font-family: 'Trebuchet MS', Tahoma,sans-serif;
     // font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-    font-family: "Open Sans","Segoe UI",HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
+    // font-family: "Open Sans","Segoe UI",HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: 'Roboto Condensed', sans-serif;
+    font-weight: 300;
     margin: 0;
+    font-size: 18px;
+    line-height: 1.6;
 }
 
 * {
     box-sizing: border-box;
 }
 
-article {
+h1, h2, h3, .title {
-    font-size: 1.1rem;
+    font-family: 'Bona Nova', serif;
 }
 
 h1 {
-    font-size: 1.75rem;
+    font-size: 3rem;
     color: $secondary;
 }
 
 h2 {
-    font-size: 1.4rem;
+    font-size: 1.75rem;
-    color: $primary;
+    color: $secondary;
 }
 
 a {
-    color: $primary;
+    color: $accent;
 }
+
 a:hover {
     opacity: 0.8;
 }
 
 
+
+.separation-section {
+     background-color: darken($background-secondary, 0%);
+     padding: 1.2rem 0;
+
+     h2 {
+         color: white;
+     }
+     color: white;
+
+     .button {
+         background-color: white;
+         color: $accent;
+     }
+ }

assets/sass/header.scss

@@ -1,8 +1,7 @@
-$header-height: 6.5rem;
+$header-height: 6rem;
 
 .site-header {
     background: $background;
-    margin-bottom: 1rem;
     color: white;
     height: $header-height;
 }

assets/sass/landing.scss

@@ -0,0 +1,57 @@
+.cover__container {
+    margin-top: 1px;
+    position: relative;
+    min-height: 40rem;
+}
+.cover__back {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-position-y: center;
+    z-index: 1;
+}
+
+.cover__content {
+    z-index: 10;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.cover__content .page-container {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding-bottom: 1em;
+}
+
+
+.cover__overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 2;
+    background-color: rgba(14, 14, 14, 0.2);
+}
+
+.cover__title {
+    font-weight: bold;
+    color: white;
+    font-size: 3em;
+    margin-bottom: 0.5em;
+}
+
+.landing__title {
+    font-weight: 2rem;
+}
+
+.accent-separator {
+    width: 100%;
+    height: 0;
+    border-bottom: .3rem solid $accent;
+}

assets/sass/main.scss

@@ -5,9 +5,15 @@ $sm-breakpoint: 900px;
 $xs-breakpoint: 400px;
 
 
-$background: #4f607a;
+
-$primary: darken(#ffb500, 5%);
+// #011F26
-$secondary: #f15a24;
+// #A5A692
+// #BFB78F
+$background: #025E73; // primary
+$background-secondary: #BFB78F;
+$secondary: #011F26;
+$tertiary: #A5A692;
+$accent: #F2A71B;
 
 .pagination-nav {
     margin-top: 1em;
@@ -16,13 +22,16 @@ $secondary: #f15a24;
 }
 
 @import 'general.scss';
+@import 'button.scss';
 @import 'page_container.scss';
 @import 'header.scss';
 @import 'news.scss';
+@import 'landing.scss';
 @import 'article.scss';
 @import 'gallery.scss';
 @import 'single_image.scss';
 @import 'footer.scss';
+@import 'sections.scss';
 
 // components
 @import 'tags.scss';

assets/sass/sections.scss

@@ -0,0 +1,5 @@
+.section-menu {
+    list-style-type: none;
+    display: flex;
+    justify-content: space-around;
+}

content/_index.md

@@ -2,11 +2,7 @@
 title: Accueil
 ---
 
-<div style="display: flex; justify-content: center; font-size: 1.3em; border: 1px dashed gray; padding: 1rem;">
+## Reconstruisons pierre après pierre...
-🚧    Site en construction...   🚧
-</div>
-
-# Reconstruison pierre après pierre...
 
 Aubevoye possède un souvenir de Terre Sainte unique en France et en Europe. Une reproduction exacte de le grotte de la nativité de Bethléem dans laquelle le Sauveur vint au monde.
 
@@ -18,9 +14,9 @@ A cet effet, il envoya deux fois son architecte en Palestine pour lever les plan
 
 De nos jours à partir des années 2000, la chapelle tombe malheureusement en ruines. Elle est régulièrement dégradée, pillée, vandalisée.
 
-**MAIS, l'espoir n'est pas vain !**
+## Mais, l'espoir n'est pas vain !
 
-En effet depuis 2020, 2021 la chapelle connait un regain d'attention de la part de passionés, de simple promeneurs ou d'habitants des environs.
+En effet depuis 2021, la chapelle connait un regain d'attention de la part de passionés, de simple promeneurs ou d'habitants des environs.
 La formation d'un groupe facebook s'en suit ce qui permet l'organisation d'une communauté et jette les bases d'une association autour de la chapelle.
 Chacun y met de son grain de sel pour partager des connaissances, des souvenirs autour de ce monument oublié.
 
@@ -28,5 +24,4 @@ L'acquisition du domaine forestier qui inclus la chapelle par Jean-Pierre Blonde
 
 
 
-
+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.
-

content/a-propos-du-site/index.md

@@ -1,6 +1,18 @@
 # A propos de ce site
 
+## Publication
+
+- Directeur de la publication : Damien Deplanque, Président
+- Webmestre : Matthieu Bessat
+
+N'hésitez pas à transmettre vos remarques par e-mail à [contact@etoiledebethleem.fr](mailto:contact@etoiledebethleem.fr)
+
 ## Technologies
 
-Pour les curieux, ce site est réalisé avec [Hugo](https://gohugo.io/)
+Pour les curieux, ce site est réalisé avec [Hugo](https://gohugo.io/).
+
+## Code source
+
+Vous pouvez trouver [le code source de ce site web sur ce dépot en ligne](https://forge.lefuturiste.fr/etoiledebethleem/website).
+
 

content/association/assemblee-constitutive.md

@@ -2,7 +2,7 @@
 title: L'assemblée générale constitutive
 ---
 
-L’Étoile de Bethléem Association des Amis de la chapelle de Bethléem d'Aubevoye, présente le procès verbal de l'Assemblée générale constitutive du 24 septembre 2022.
+L’Étoile de Bethléem - L'association des Amis de la chapelle de Bethléem d'Aubevoye, présente le procès verbal de l'Assemblée générale constitutive du 24 septembre 2022.
 
 ## Participants
 

layouts/association/list.html

@@ -0,0 +1,27 @@
+{{ define "main" }}
+	<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/index.html

@@ -1,5 +1,42 @@
 {{ define "main" }}
+
+    <div class="cover__container">
+        <div class="cover__back" style="background-image: url('https://share.lefuturiste.fr/u/2478737d-7e5e-42cd-8764-d0136ef83546/cover_v2_01.jpg')">
+        </div>
+        <div class="cover__overlay">
+        </div>
+        <div class="cover__content">
+            <div class="page-container">
+                <h1 class="cover__title">
+                    Sauvons la chapelle<br>
+                    de Bethléem !
+                </h1>
+            </div>
+        </div>
+    </div>
+    <div class="accent-separator">
+    </div>
+
+    <div class="big-animation" style="margin-top: 1em; margin-left: 1em">
+        <div class="burger">
+            <div class="bar-group bar1">
+                <div class="bar"></div>
+                <div class="bar"></div>
+                <div class="bar"></div>
+            </div>
+            <div class="bar-group bar2"></div>
+            <div class="bar-group bar3"></div>
+        </div>
+    </div>
+
+    <div class="page-container" style="margin-top: 2rem"> 
+        <button class="button">Adhérer !</button>
+    </div>
+
 	<main class="page-container">
+        <!-- <div style="display: flex; justify-content: center; font-size: 1.3em; border: 1px dashed gray; padding: 1rem;"> -->
+        <!-- 🚧    Site en construction...   🚧 -->
+        <!-- </div> -->
         {{ .Content }} 
         {{/*
 		{{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
@@ -9,4 +46,13 @@
 		{{ partial "pagination.html" . }}
         */}}
 	</main>
+
+    <div class="card separation-section">
+	<main class="page-container">
+        <h2>The quick brown fox jumps over the lazy dog</h2>
+        <button class="button">Adhérer !</button>
+	</main>
+    </div>
+	<main class="page-container">
+	</main>
 {{ end }}

layouts/partials/footer.html

@@ -1,7 +1,11 @@
 <footer class="site-footer">
     <div class="site-footer__content page-container">
-        <a href="/"><b>{{ .Site.Title }}</b></a>.
+        <div class="site-footer__title">
-        <a href="/a-propos-du-site">A propos de ce site</a>.
+            <a href="/">{{ .Site.Title }}</a>.
-        <a href="/contact">Nous contacter</a>.
+        </div>
+        <div class="site-footer__links">
+            <a href="/a-propos-du-site">A propos de ce site</a>
+            <a href="/contact">Nous contacter</a>
+        </div>
     </div>
 </footer>

layouts/partials/header.html

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

static/logo.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
     <defs>
         <style>
-        .a{fill:#4f607a;}.b{fill:#f15a24;}.c{opacity:0.3;}.d{fill:#ffb500;}.e{fill:#fff;}</style>
+        .a{opacity: 0;}.b{fill:#f15a24;}.c{opacity:0.3;}.d{fill:#ffb500;}.e{fill:#fff;}</style>
     </defs>
     <title>LOGO_BETHLEEM_V12</title>
     <rect class="a" width="800" height="800" />