mirror of
https://github.com/GuerillaStudio/compteur-de-greve.git
synced 2024-12-18 05:41:56 +00:00
Style fixes for counter
This commit is contained in:
parent
d016b85609
commit
4d5e15a3d4
3 changed files with 22 additions and 2 deletions
|
@ -16,7 +16,7 @@ $notif-error: $color-red;
|
||||||
// -------------------------------------------------------------
|
// -------------------------------------------------------------
|
||||||
|
|
||||||
.notif {
|
.notif {
|
||||||
padding: 2rem;
|
z-index: 1;
|
||||||
padding: 2rem 3rem;
|
padding: 2rem 3rem;
|
||||||
border: 0.2rem solid currentcolor;
|
border: 0.2rem solid currentcolor;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
|
@ -54,9 +54,25 @@ $notif-error: $color-red;
|
||||||
|
|
||||||
// Special
|
// 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 {
|
.notif--successPlusOne {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
animation: success-shake 1s linear both;
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -49,6 +49,10 @@ $banner-padding: clamp(2.5rem, 5vw, 7rem);
|
||||||
|
|
||||||
.banner-layout {
|
.banner-layout {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
max-width: $container;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto;
|
||||||
grid-template-columns: minmax(min-content, 55%) minmax(min-content, 45%);
|
grid-template-columns: minmax(min-content, 55%) minmax(min-content, 45%);
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
row-gap: $banner-padding;
|
row-gap: $banner-padding;
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
.counter-strikeeeee-lol {
|
.counter-strikeeeee-lol {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 0.25em;
|
margin-top: 0.25em;
|
||||||
margin-bottom: 20%;
|
margin-bottom: 15%;
|
||||||
color: $color-purple-1;
|
color: $color-purple-1;
|
||||||
font-size: 4.8rem;
|
font-size: 4.8rem;
|
||||||
font-size: clamp(2rem, 2.3vw, 4.8rem);
|
font-size: clamp(2rem, 2.3vw, 4.8rem);
|
||||||
|
|
Loading…
Reference in a new issue