commit a452ea9e315f72521e3b7999ad55ef681d707e80 Author: hiro <hiro@torproject.org> Date: Fri Oct 25 20:59:51 2019 +0200 Update lego for eoy campaing --- assets/static/css/eoy.css | 92 ++++++++++++++++++++++++++++++ assets/static/css/fonts/Kanit/kanit.woff2 | Bin 0 -> 18144 bytes templates/bottom_banner.html | 38 +++++++----- 3 files changed, 116 insertions(+), 14 deletions(-) diff --git a/assets/static/css/eoy.css b/assets/static/css/eoy.css new file mode 100644 index 0000000..6f52288 --- /dev/null +++ b/assets/static/css/eoy.css @@ -0,0 +1,92 @@ +@font-face { + font-family: Kanit; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('fonts/Kanit/kanit.woff2') format('woff2'); +} + +.banner { + background-color: #000000; + z-index: 100000000000000 !important; +} + +.banner__containter { + position: fixed; + right: 0; + left: 0; + bottom: 0; + padding: 1.25rem 1.25rem 2rem; + width: 100%; +} + +.footer__close { + height: 3rem; + position: absolute; + right: 0; + top: 0; + width: 3rem; + margin-top: 0rem; + margin-right: -2rem; + z-index: 1; + font-weight: bolder; + visibility: inherit; +} + +.take-back-monochrome-purple { + width: 533px; + height: 475px; +} + +.tracking-surveillan { + color: #2EF900 !important; + font-family: Source Code Pro; + font-size: 18px; + font-weight: 400; + line-height: 22px; + text-align: left; +} + +.take-back-the-intern { + color: #2FFF00; + font-family: Kanit; + font-size: 80px; + font-style: italic; + font-weight: 400; + line-height: 96px; + text-align: left; +} + +.give-today-and-mozi { + color: #FFFFFF; + font-family: Source Code Pro; + font-size: 14px; + font-weight: 400; + line-height: 17px; + text-align: left; +} + +.rectangle { + border: 3px solid #8A2BE2 !important; + color: #FFFFFF !important; +} + +.eoy-sr-only { + height: 1px; + left: -10000px; + overflow: hidden; + position: absolute; + top: auto; + width: 1px; +} + +#trigger { + position: absolute; + top: -9999px; + left: -9999px; +} + +#trigger:checked ~ #banner-header, .banner__containter > #trigger:checked, #trigger:checked + label { + display: none; + visibility: hidden; +} diff --git a/assets/static/css/fonts/Kanit/kanit.woff2 b/assets/static/css/fonts/Kanit/kanit.woff2 new file mode 100644 index 0000000..be356f0 Binary files /dev/null and b/assets/static/css/fonts/Kanit/kanit.woff2 differ diff --git a/templates/bottom_banner.html b/templates/bottom_banner.html index 94efb57..20a5dc2 100644 --- a/templates/bottom_banner.html +++ b/templates/bottom_banner.html @@ -1,19 +1,29 @@ -<div class="dcs-banner__containter"> - <input id="trigger" type="checkbox" title="Close banner" /><label for="trigger" class="dcs-footer__close">X</label> - <span class="dcs-sr-only">Close banner</span> - <div class="dcs-footer" id="dcs-banner-footer" role="contentinfo"> - <div class="dcs-footer__container"> - <a class="dcs-footer__logo" href="https://digital.globalclimatestrike.net/join/?source=digitalstrikebanner"> - <img src="{{ '/static/images/dcs-logo.png'|asseturl }}" alt="Digital Climate Strike logo" class="dcs-logo"> - </a> - <div class="dcs-footer__main"> - <p class="dcs-footer__body"> - Our website will join the Global #ClimateStrike on <time id="dcs-strike-date" datetime="2019-09-20">September 20</time>. Will you? - </p> - <div class="dcs-footer__action"> - <a type="button" class="dcs-button" href="https://digital.globalclimatestrike.net/join/?source=digitalstrikebanner"> Yes, I’m in. ➔ </a> +<div class="banner__containter banner align-middle d-flex justify-content-center p-5"> + <input id="trigger" type="checkbox" title="Close banner" /> + <label for="trigger" class="footer__close text-white">X</label> + <span class="eoy-sr-only text-white">Close banner</span> + <div class="eoy-banner row col-12" id="banner-header" role="contentinfo"> + <div class="col-2"></div> + <div class="col-8"> + <div class="col-12 row"> + <div class="col-9"> + <div class="row"> + <p class="tracking-surveillan">Tracking, surveillance, and censorship are widespread online.</p> + </div> + <div class="row"> + <p class="take-back-the-intern">TAKE BACK THE INTERNET WITH TOR</p> + </div> + <div class="row"> + <a class="btn-lg rectangle">DONATE NOW</a> + <p class="give-today-and-mozi ml-5">Give today, and Mozilla will match your donation.</p> + </div> + </div> + <div class="col-3"> + <img src="{{ '/static/images/home/png/take-back@3x.png'|asseturl }}" alt="{{ _("Take Back The Internet") }}" /> </div> </div> </div> + <div class="col-2"> + </div> </div> </div>