hq/setto.basspistol.com
hq/setto.basspistol.com
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix cookie to be cool not missleading

Browse source
This commit is contained in:
Set Sakrecoer 2021-06-24 09:01:08 +02:00
parent 314f4e3176
commit e411d468ab
2 changed files with 24 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
_includes/cookie-consent.html
View file

@ -2,12 +2,18 @@
<div id="cookie-notice">
<p>
We only use cookies if you consent to it. They don't contain any identifiable info: they just let us know if you enjoyed this enough to come back.
<br /><a href="#" id="cookie-notice-decline">Click here</a> if you want this to go away without cookies.
I only use cookies if you consent to it, or if you give me your nickname so I can remember you next time you come by.
<br />These cookies are all placed by my crew: Basspistol. No big tech involved.
<br />Read more about <a href="/cookies/"> how {{ site.title }} use cookies</a>
</p>
<button class="button yes"
id="cookie-notice-accept">Ok</button>
<button class="button no" id="cookie-notice-decline">
Nah
</button>
<button class="button yes" id="cookie-notice-accept">
Ok
</button>
</div>

30
_sass/_cookies.scss
View file

@ -28,9 +28,10 @@
text-align: center;
margin: 40px 40px 20px 40px;
}
.yes {
margin: 20px 40px 40px 40px;
.yes, .no {
margin: 20px 40px 0px 40px;
}
}
button {
border: none;
@ -39,25 +40,22 @@
}
}
.yes {
flex: 0 0 250px;
.yes, .no {
flex: 0 0 100px;
-moz-transition: all var(--anim-speed) ease-in-out;
-webkit-transition: all var(--anim-speed) ease-in-out;
-ms-transition: all var(--anim-speed) ease-in-out;
transition: all var(--anim-speed) ease-in-out;
text-align: center;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: linear-gradient(228deg, var(--accent1-alt), var(--accent2-alt));
background-origin: padding-box;
background-clip: border-box;
background-size: 400% 400%;
-webkit-animation: backgroundBlink 2s ease infinite;
-moz-animation: backgroundBlink 2s ease infinite;
animation: backgroundBlink 2s ease infinite;
margin: 40px 40px 40px 20px;
margin: 40px 40px 40px 10px;
}
.yes {
background-image: unset;
background-color: var(--accent1) !important;
}
.no {
background-image: unset;
background-color: #f00 !important;
}
.yes:hover {
// color: #000 !important;