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

This commit is contained in:
Matthieu Bessat 2023-04-10 21:55:40 +02:00
parent a63ce4c28c
commit b2e075a2cf
11 changed files with 94 additions and 42 deletions

View file

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

View file

@ -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 {
margin-right: .5rem;
}
}
// .site-footer__links {
// }
@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 {
}
}

View file

@ -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 {
}
.separation-section {
background-color: darken($background-secondary, 0%);
padding: 1.2rem 0;
.secondary-bg {
h2 {
color: white;
}
a {
color: white;
}
color: white;
.button {
background-color: white;
color: $accent;
background-color: $background-secondary;
color: white;
&:hover {
background-color: lighten($background-secondary, 14%);
}
}
background-color: darken($background-secondary, 15%);
}
.separation-section {
margin-top: 3rem;
padding: 1.2rem 0;
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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">
<main class="page-container">
<h2>The quick brown fox jumps over the lazy dog</h2>
<button class="button">Adhérer !</button>
</main>
<div class="card separation-section secondary-bg">
<div class="page-container">
<h2>Rejoignez nous dans notre aventure !</h2>
<a class="button">Adhérer !</a>
</div>
</div>
<div class="page-container">
</div>
<main class="page-container">
</main>
{{ end }}

View file

@ -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>
<a href="/contact">Nous contacter</a>
<ul class="inline-menu-list">
<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>

View file

@ -8,13 +8,12 @@
/>
</a>
<nav class="site-header__nav desktop-nav">
<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 }}
<ul class="inline-menu-list">
<li><a href="/actualites">Actualités</a></li>
<li><a href="/association">L'association</a></li>
<li><a href="/histoires">Histoire</a></li>
<li><a href="/images">Gallerie</a></li>
</ul>
</nav>
<div class="burger-menu">
<div class="burger-button-container">