diff --git a/assets/global.css b/assets/global.css index 5a3918a..3221585 100644 --- a/assets/global.css +++ b/assets/global.css @@ -50,3 +50,122 @@ body { .main-content { margin-top: 20px; } + +/* for cookie notice */ + +#cookies { + display: none; + width: 100%; + height: 70px; + padding-top: 30px; + position: absolute; + background: #ffffff; + border-bottom: 2px solid #fbeed5; + color: #c09853; + text-align: center; + bottom: 0; + left: 0; + z-index: 9999; +} + + #cookies > p { + margin: 0 0 10px 0; + font-weight: bold; +} + + #cookies > p a { + color: #00adb4; + text-decoration: none; +} + +#cookies.display { + display: block; + + /* Cross browser animation */ + -webkit-animation: cookies 1s 1; /* Chrome, Safari 5+ */ + -moz-animation: cookies 1s 1; /* Firefox 5-15 */ + -ms-animation: cookies 1s 1; /* IE9 */ + -o-animation: cookies 1s 1; /* Opera 12.00 */ + animation: cookies 1s 1; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */ +} + +@keyframes cookies { + 0% { + opacity: 0; + -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ + -moz-transform: translate3d(0,-100px,0); /* Firefox */ + -ms-transform: translate3d(0,-100px,0); /* IE9 */ + -o-transform: translate3d(0,-100px,0); /* Opera */ + transform: translate3d(0,-100px,0); + } + 100% { + opacity: 1; + -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ + -moz-transform: translate3d(0,0,0); /* Firefox */ + -ms-transform: translate3d(0,0,0); /* IE9 */ + -o-transform: translate3d(0,0,0); /* Opera */ + transform: translate3d(0,0,0); + } +} +@-webkit-keyframes cookies { + 0% { + -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ + -moz-transform: translate3d(0,-100px,0); /* Firefox */ + -ms-transform: translate3d(0,-100px,0); /* IE9 */ + -o-transform: translate3d(0,-100px,0); /* Opera */ + transform: translate3d(0,-100px,0); + } + 100% { + -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ + -moz-transform: translate3d(0,0,0); /* Firefox */ + -ms-transform: translate3d(0,0,0); /* IE9 */ + -o-transform: translate3d(0,0,0); /* Opera */ + transform: translate3d(0,0,0); + } +} +@-moz-keyframes cookies { + 0% { + -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ + -moz-transform: translate3d(0,-100px,0); /* Firefox */ + -ms-transform: translate3d(0,-100px,0); /* IE9 */ + -o-transform: translate3d(0,-100px,0); /* Opera */ + transform: translate3d(0,-100px,0); + } + 100% { + -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ + -moz-transform: translate3d(0,0,0); /* Firefox */ + -ms-transform: translate3d(0,0,0); /* IE9 */ + -o-transform: translate3d(0,0,0); /* Opera */ + transform: translate3d(0,0,0); + } +} +@-o-keyframes cookies { + 0% { + -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ + -moz-transform: translate3d(0,-100px,0); /* Firefox */ + -ms-transform: translate3d(0,-100px,0); /* IE9 */ + -o-transform: translate3d(0,-100px,0); /* Opera */ + transform: translate3d(0,-100px,0); + } + 100% { + -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ + -moz-transform: translate3d(0,0,0); /* Firefox */ + -ms-transform: translate3d(0,0,0); /* IE9 */ + -o-transform: translate3d(0,0,0); /* Opera */ + transform: translate3d(0,0,0); + } +} + +.close-cookies { + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + -ms-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + + -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ + -moz-transform: translate3d(0,-100px,0); /* Firefox */ + -ms-transform: translate3d(0,-100px,0); /* IE9 */ + -o-transform: translate3d(0,-100px,0); /* Opera */ + transform: translate3d(0,-100px,0); +} diff --git a/assets/global.js b/assets/global.js index d1b34ee..53262f9 100644 --- a/assets/global.js +++ b/assets/global.js @@ -32,4 +32,12 @@ $(document).ready(function(){ $(drawer_item_link_query_selector + "/']").attr("aria-selected", "true"); }); }); + /* for cookie notice */ + $("#cookies").addClass("display"); + $(".source-code-link").animate({bottom: "+100px";}, 1000); + $("#close-cookies").click(function(){ + event.preventDefault(); + $("#cookies").addClass("close-cookies"); + $(".source-code-link").animate({bottom: "-100px";}, 1000); + }); }); diff --git a/page-inserts/cookie-notice.html b/page-inserts/cookie-notice.html new file mode 100644 index 0000000..576da85 --- /dev/null +++ b/page-inserts/cookie-notice.html @@ -0,0 +1,4 @@ +