From b2e075a2cf3253888401794e39734cf7d82d9684 Mon Sep 17 00:00:00 2001 From: Matthieu Bessat Date: Mon, 10 Apr 2023 21:55:40 +0200 Subject: [PATCH] feat: animation landing page + style button + uniform ul header and footer --- assets/sass/button.scss | 18 +++++++++++++++++- assets/sass/footer.scss | 16 +++++----------- assets/sass/general.scss | 27 +++++++++++++++++++-------- assets/sass/header.scss | 13 +++++++++++++ assets/sass/landing.scss | 20 +++++++++++++++++++- assets/sass/sections.scss | 2 ++ content/_index.md | 3 --- layouts/association/list.html | 2 +- layouts/index.html | 16 ++++++++-------- layouts/partials/footer.html | 6 ++++-- layouts/partials/header.html | 13 ++++++------- 11 files changed, 94 insertions(+), 42 deletions(-) diff --git a/assets/sass/button.scss b/assets/sass/button.scss index 9a627ec..1518c0a 100644 --- a/assets/sass/button.scss +++ b/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; + } } diff --git a/assets/sass/footer.scss b/assets/sass/footer.scss index 557efbe..4e5f4ad 100644 --- a/assets/sass/footer.scss +++ b/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 { - 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 { - - } } diff --git a/assets/sass/general.scss b/assets/sass/general.scss index 83ddd8e..c5ca53f 100644 --- a/assets/sass/general.scss +++ b/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 { } - -.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; } diff --git a/assets/sass/header.scss b/assets/sass/header.scss index 938ff0d..37ebdf4 100644 --- a/assets/sass/header.scss +++ b/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; diff --git a/assets/sass/landing.scss b/assets/sass/landing.scss index 6bd181d..1784fe5 100644 --- a/assets/sass/landing.scss +++ b/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; + } +} diff --git a/assets/sass/sections.scss b/assets/sass/sections.scss index dd86d20..798705c 100644 --- a/assets/sass/sections.scss +++ b/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; diff --git a/content/_index.md b/content/_index.md index 9f1bb33..c73425d 100644 --- a/content/_index.md +++ b/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. diff --git a/layouts/association/list.html b/layouts/association/list.html index da57d98..5475b8a 100644 --- a/layouts/association/list.html +++ b/layouts/association/list.html @@ -3,7 +3,7 @@ {{ $listtitle := .Title }} {{ with .Title }}

{{ . }}

{{ end }} -