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"> <div id="cookie-notice">
<p> <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. 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 /><a href="#" id="cookie-notice-decline">Click here</a> if you want this to go away without cookies. <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> <br />Read more about <a href="/cookies/"> how {{ site.title }} use cookies</a>
</p> </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> </div>

30
_sass/_cookies.scss
View file

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