feat: animation landing page + style button + uniform ul header and footer
This commit is contained in:
parent
a63ce4c28c
commit
b2e075a2cf
11 changed files with 94 additions and 42 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
.section-menu {
|
||||
border: 1px solid #eee;
|
||||
padding: 1rem 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue