diff --git a/src/css/2-components/_notifications.scss b/src/css/2-components/_notifications.scss index a24bf9a..a25946d 100755 --- a/src/css/2-components/_notifications.scss +++ b/src/css/2-components/_notifications.scss @@ -16,7 +16,7 @@ $notif-error: $color-red; // ------------------------------------------------------------- .notif { - padding: 2rem; + z-index: 1; padding: 2rem 3rem; border: 0.2rem solid currentcolor; font-size: 1.6rem; @@ -54,9 +54,25 @@ $notif-error: $color-red; // Special // -------------------------------------------------------------- +@keyframes success-shake { + 0%, + 100% { transform: rotate(0deg); transform-origin: 50% 50%; } + 10% { transform: rotate(8deg); } + + 20%, + 40%, + 60% { transform: rotate(-10deg); } + + 30%, + 50%, + 70% { transform: rotate(10deg); } + 80% { transform: rotate(-8deg); } + 90% { transform: rotate(8deg); } +} .notif--successPlusOne { position: relative; + animation: success-shake 1s linear both; transform: scale(1.1); } diff --git a/src/css/4-modules/_banner.scss b/src/css/4-modules/_banner.scss index a852975..ce964b5 100644 --- a/src/css/4-modules/_banner.scss +++ b/src/css/4-modules/_banner.scss @@ -49,6 +49,10 @@ $banner-padding: clamp(2.5rem, 5vw, 7rem); .banner-layout { display: grid; + width: 100%; + max-width: $container; + align-items: center; + margin: 0 auto; grid-template-columns: minmax(min-content, 55%) minmax(min-content, 45%); justify-items: center; row-gap: $banner-padding; diff --git a/src/css/5-pages/_counter.scss b/src/css/5-pages/_counter.scss index cec95a6..e92dcc3 100644 --- a/src/css/5-pages/_counter.scss +++ b/src/css/5-pages/_counter.scss @@ -25,7 +25,7 @@ .counter-strikeeeee-lol { display: inline-block; margin-top: 0.25em; - margin-bottom: 20%; + margin-bottom: 15%; color: $color-purple-1; font-size: 4.8rem; font-size: clamp(2rem, 2.3vw, 4.8rem);