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

feat: travail design avec damien

Browse source
This commit is contained in:
Matthieu Bessat 2023-04-01 00:14:22 +02:00
parent d369147c20
commit 6f34c7fc55
19 changed files with 278 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

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

1
assets/animations/lottieflow-menu-nav-06-000000-easey.json Normal file
View file

File diff suppressed because one or more lines are too long

BIN
assets/cover/cover_v2_01.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 299 KiB

1
assets/sass/article.scss
View file

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

32
assets/sass/button.scss Normal file
View file

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

29
assets/sass/footer.scss
View file

@ -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__content {
.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 {
}
}

40
assets/sass/general.scss
View file

@ -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 {
font-size: 1.1rem;
h1, h2, h3, .title {
font-family: 'Bona Nova', serif;
}
h1 {
font-size: 1.75rem;
font-size: 3rem;
color: $secondary;
}
h2 {
font-size: 1.4rem;
color: $primary;
font-size: 1.75rem;
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;
}
}

3
assets/sass/header.scss
View file

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

57
assets/sass/landing.scss Normal file
View file

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

15
assets/sass/main.scss
View file

@ -5,9 +5,15 @@ $sm-breakpoint: 900px;
$xs-breakpoint: 400px;
$background: #4f607a;
$primary: darken(#ffb500, 5%);
$secondary: #f15a24;
// #011F26
// #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';

5
assets/sass/sections.scss Normal file
View file

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

13
content/_index.md
View file

@ -2,11 +2,7 @@
title: Accueil
---
<div style="display: flex; justify-content: center; font-size: 1.3em; border: 1px dashed gray; padding: 1rem;">
🚧   Site en construction...   🚧
</div>
# Reconstruison pierre après pierre...
## Reconstruisons 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.

14
content/a-propos-du-site/index.md
View file

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

2
content/association/assemblee-constitutive.md
View file

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

27
layouts/association/list.html Normal file
View file

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

46
layouts/index.html
View file

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

10
layouts/partials/footer.html
View file

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

15
layouts/partials/header.html
View file

@ -8,13 +8,20 @@
/>
</a>
<nav class="site-header__nav">
<a href="/actualites"><b>Actualité</b></a>.
<a href="/association"><b>L'association</b></a>.
<a href="/histoires"><b>Histoire</b></a>.
<a href="/images"><b>Gallerie</b></a>.
<a href="/actualites">Actualités</a>.
<a href="/association">L'association</a>.
<a href="/histoires">Histoire</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>

2
static/logo.svg
View file

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

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9 KiB