commit 77fc882c7f54abb72c81d6fcd8c2fcc88e32781c Author: hiro <hiro@torproject.org> Date: Fri Sep 13 22:09:05 2019 +0200 Add climate strike campaign assets and styles --- assets/scss/_tor.scss | 4 +- .../static/css/digital-climate-strike/button.css | 44 +++++++++ assets/static/css/digital-climate-strike/close.css | 53 ++++++++++ .../static/css/digital-climate-strike/footer.css | 107 +++++++++++++++++++++ .../css/digital-climate-strike/full-page.css | 83 ++++++++++++++++ .../static/css/digital-climate-strike/global.css | 61 ++++++++++++ assets/static/css/digital-climate-strike/logo.css | 19 ++++ assets/static/css/digital-climate-strike/main.css | 11 +++ .../static/css/digital-climate-strike/main.css.map | 7 ++ .../static/css/digital-climate-strike/sr-only.css | 8 ++ .../webfonts/greve-800-web.eot | Bin 0 -> 42122 bytes .../webfonts/greve-800-web.otf | Bin 0 -> 39612 bytes .../webfonts/greve-800-web.woff | Bin 0 -> 22792 bytes .../webfonts/greve-800-web.woff2 | Bin 0 -> 17764 bytes .../webfonts/greve-narrow-800.otf | Bin 0 -> 35080 bytes .../webfonts/katwijk-mono-black-web.eot | Bin 0 -> 40776 bytes .../webfonts/katwijk-mono-black-web.otf | Bin 0 -> 17856 bytes .../webfonts/katwijk-mono-black-web.ttf | Bin 0 -> 40028 bytes .../webfonts/katwijk-mono-black-web.woff | Bin 0 -> 22958 bytes .../webfonts/katwijk-mono-black-web.woff2 | Bin 0 -> 18016 bytes .../webfonts/katwijk-mono-bold-web.eot | Bin 0 -> 40452 bytes .../webfonts/katwijk-mono-bold-web.otf | Bin 0 -> 17840 bytes .../webfonts/katwijk-mono-bold-web.ttf | Bin 0 -> 39948 bytes .../webfonts/katwijk-mono-bold-web.woff | Bin 0 -> 22769 bytes .../webfonts/katwijk-mono-bold-web.woff2 | Bin 0 -> 17832 bytes .../webfonts/katwijk-mono-light-web.eot | Bin 0 -> 39056 bytes .../webfonts/katwijk-mono-light-web.otf | Bin 0 -> 17668 bytes .../webfonts/katwijk-mono-light-web.ttf | Bin 0 -> 38308 bytes .../webfonts/katwijk-mono-light-web.woff | Bin 0 -> 22145 bytes .../webfonts/katwijk-mono-light-web.woff2 | Bin 0 -> 17340 bytes .../webfonts/katwijk-mono-regular-web.eot | Bin 0 -> 38836 bytes .../webfonts/katwijk-mono-regular-web.otf | Bin 0 -> 17692 bytes .../webfonts/katwijk-mono-regular-web.ttf | Bin 0 -> 38236 bytes .../webfonts/katwijk-mono-regular-web.woff | Bin 0 -> 22143 bytes .../webfonts/katwijk-mono-regular-web.woff2 | Bin 0 -> 17316 bytes assets/static/fonts/fonts | 1 + assets/static/js/js | 1 + templates/bottom_banner.html | 22 ++++- 38 files changed, 416 insertions(+), 5 deletions(-) diff --git a/assets/scss/_tor.scss b/assets/scss/_tor.scss index 0052d0d..cf18e0d 100644 --- a/assets/scss/_tor.scss +++ b/assets/scss/_tor.scss @@ -112,12 +112,12 @@ display: none; } -#https { +#https-only { display: none; } -#tor { +#tor-only { display: none; } diff --git a/assets/static/css/digital-climate-strike/button.css b/assets/static/css/digital-climate-strike/button.css new file mode 100644 index 0000000..07708e6 --- /dev/null +++ b/assets/static/css/digital-climate-strike/button.css @@ -0,0 +1,44 @@ +/* button */ + +.dcs-button { + background-color: var(--grey); + box-shadow: 0.3rem 0.3rem 0 var(--white); + color: var(--white); + display: inline-flex; + font: 400 1.5rem/1.5rem 'Greve', 'Impact', sans-serif; + letter-spacing: calc(0.07rem - 0.01rem); + padding: 1rem 2rem; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + border: 0; + cursor: pointer; + + &:hover, + &:focus { + background-color: var(--white); + box-shadow: 0.3rem 0.3rem 0 var(--black); + color: var(--black); + } + + &:focus { + outline: 2px dotted var(--black); + } +} + +.dcs-button__icon { + font-size: 1.5rem; + height: 100%; + display: inline-block; + padding-left: 0.5rem; + width: 1rem; +} + +@media (min-width: 900px) { + .dcs-button { + font-size: 1.75rem; + line-height: 1; + padding: 0.8rem 3rem; + } +} diff --git a/assets/static/css/digital-climate-strike/close.css b/assets/static/css/digital-climate-strike/close.css new file mode 100644 index 0000000..fa8ba7b --- /dev/null +++ b/assets/static/css/digital-climate-strike/close.css @@ -0,0 +1,53 @@ +/* close.css */ + +.dcs-close { + align-items: center; + justify-content: center; + cursor: pointer; + display: flex; + height: 100%; + max-height: 3rem; + max-width: 3rem; + position: relative; + width: 100%; + background-color: transparent; + padding: 0; + border: 0; + + &::before, + &::after { + background-color: rgba(0, 0, 0, 0.5); + content: ''; + height: 1.2rem; + position: absolute; + width: 2px; + } + + &::before { + transform: rotate(45deg); + } + + &::after { + transform: rotate(-45deg); + } + + &:hover, + &:focus { + &::before, + &::after { + background-color: rgba(0, 0, 0, 1); + } + } + + &:focus { + outline: 2px dotted var(--black); + } +} + +.dcs-close.dcs-full-page-close { + &::before, + &::after { + height: 2rem; + background-color: rgba(0, 0, 0, 1); + } +} diff --git a/assets/static/css/digital-climate-strike/footer.css b/assets/static/css/digital-climate-strike/footer.css new file mode 100644 index 0000000..a10e229 --- /dev/null +++ b/assets/static/css/digital-climate-strike/footer.css @@ -0,0 +1,107 @@ +/* footer */ + +.dcs-banner__containter { + position: fixed; + right: 0; + left: 0; + bottom: 0; + padding: 1.25rem 1.25rem 2rem; + width: 100%; +} + +.dcs-footer { + background-color: #4ee58b; + bottom: 0; + box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.2); + font-family: 'Katwijk Bold'; + left: 0; + padding: 1.25rem 1.25rem 2rem; + position: fixed; + right: 0; + width: 100%; +} + +.dcs-footer__close { + height: 3rem; + position: absolute; + right: 0; + top: 0; + width: 3rem; + margin-top: -4.5rem; + margin-right: -2rem; + z-index: 1; + font-weight: bolder; + visibility: inherit; +} + +.dcs-footer__container { + display: flex; + flex-wrap: nowrap; + margin: 0 auto; + max-width: 50rem; +} + +.dcs-footer__logo { + display: block; + flex: 0 0 15%; +} + +.dcs-footer__main { + flex: 0 0 70%; + margin-top: -.4rem; /* magic number: top text align to logo */ + margin: 0 1rem; +} + +.dcs-footer__body { + color: var(--grey); + font: normal .875rem/1rem 'Katwijk Bold', Courier, sans-serif; + max-width: 26rem; +} + +.dcs-footer__action { + margin: 1rem 0 0; +} + +#trigger { + position: absolute; + top: -9999px; + left: -9999px; +} + +#trigger:checked ~ #dcs-banner-footer, .dcs-banner__containter > #trigger:checked, #trigger:checked + label { + display: none; + visibility: hidden; +} + +/* Breakpoint */ + +@media(min-width: 900px) { + + .dcs-footer { + padding: 2rem; + } + + .dcs-footer__container { + max-width: 60rem; + } + + .dcs-footer__logo { + flex: 0 0 10%; + } + + .dcs-footer__main { + flex: 1; + display: flex; + } + + .dcs-footer__body { + font-size: 1.125rem; + line-height: 1.5rem; + max-width: none; + } + + .dcs-footer__action { + display: inline-block; + margin: 0 0 0 1rem; + } +} diff --git a/assets/static/css/digital-climate-strike/full-page.css b/assets/static/css/digital-climate-strike/full-page.css new file mode 100644 index 0000000..4fc643a --- /dev/null +++ b/assets/static/css/digital-climate-strike/full-page.css @@ -0,0 +1,83 @@ +/* Full page styles */ + +.dcs-full-page { + align-items: center; + background-color: var(--green); + bottom: 0; + color: var(--grey); + display: none; + justify-content: center; + left: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; + text-align: center; +} + +.dcs-full-page__container { + max-width: 40rem; +} + +.dcs-full-page__close { + display: none; /* The full page close button can be configured to display: 'flex'.*/ + height: 2.5rem; + position: absolute; + right: 0; + top: 0; + width: 2.5rem; +} + +.dcs-full-page__main { + padding: 1rem; +} + +.dcs-full-page__logo { + margin: 0 auto; + width: 5.7rem; + display: block; +} + +.dcs-full-page__body { + margin: 2.25rem auto 0; +} + +.dcs-full-page__body p { + font: normal 3.2rem/3.5rem 'Greve'; +} + +.dcs-full-page__action { + margin: 1.25rem auto 0; +} + +.dcs-full-page__footer { + bottom: 0; + font: 400 10px/13px 'Katwijk Bold', monospace; + left: 0; + position: absolute; + right: 0; + text-align: center; +} + +.dcs-full-page__footer small { + display: inline-block; + max-width: 15.6rem; + margin: 3rem auto; +} + +.dcs-website-name__prefix { + display: none; +} + +@media (min-width: 900px) { + .dcs-full-page__footer { + font-size: 0.875rem; + line-height: 1.4; + } +} + +@media (max-height: 600px) { + .dcs-full-page__body p { + font: normal 2.2rem/2.5rem 'Greve'; + } +} diff --git a/assets/static/css/digital-climate-strike/global.css b/assets/static/css/digital-climate-strike/global.css new file mode 100644 index 0000000..fe8a5df --- /dev/null +++ b/assets/static/css/digital-climate-strike/global.css @@ -0,0 +1,61 @@ +/* stylelint-disable */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + text-decoration: none; +} + +*::before, +*::after { + box-sizing: inherit; +} + +img { + max-width: 100%; +} + +/** + * Shared CSS custom properties + */ + +:root { + + /* Colors */ + --black: #000; + --green: #4ee58b; + --white: #fff; + --grey:#231F20; +} +/** +* Font Definitions +*/ + +@font-face { + font-family: "Greve"; + font-style: normal; + src: url('./webfonts/greve-800-web.woff2') format('woff2'), + url('./webfonts/greve-800-web.woff') format('woff'); +} + +@font-face { + font-family: "Katwijk Bold"; + font-style: normal; + src: url('./webfonts/katwijk-mono-bold-web.woff2') format('woff2'), + url('./webfonts/katwijk-mono-bold-web.woff') format('woff'), + url('./webfonts/katwijk-mono-bold-web.ttf') format('truetype'); +} + +/** + * Type scale + * Baseline body copy font is 16px = 1rem; + */ + +html, body { + color: var(--grey); + font-family: 'Katwijk', monospace; + font-size: 100%; /* 16px base font */ + font-weight: bold; +} +/* stylelint-enable */ + diff --git a/assets/static/css/digital-climate-strike/logo.css b/assets/static/css/digital-climate-strike/logo.css new file mode 100644 index 0000000..a623649 --- /dev/null +++ b/assets/static/css/digital-climate-strike/logo.css @@ -0,0 +1,19 @@ +/* logo.css */ + +.dcs-logo { + max-height: 5rem; +} + +.dcs-logo--med { + max-height: 10rem; +} + +@media(min-width: 900px) { + .dcs-logo { + max-height: 2.8rem; + } + + .dcs-logo--med { + max-height: 10rem; + } +} diff --git a/assets/static/css/digital-climate-strike/main.css b/assets/static/css/digital-climate-strike/main.css new file mode 100644 index 0000000..2166e13 --- /dev/null +++ b/assets/static/css/digital-climate-strike/main.css @@ -0,0 +1,11 @@ +@import url(./global.css); +/* Components */ +@import url(./button.css); +@import url(./close.css); +@import url(./logo.css); +@import url(./sr-only.css); +/* Views */ +@import url(./footer.css); +@import url(./full-page.css); + +/*# sourceMappingURL=main.css.map */ diff --git a/assets/static/css/digital-climate-strike/main.css.map b/assets/static/css/digital-climate-strike/main.css.map new file mode 100644 index 0000000..b6a1559 --- /dev/null +++ b/assets/static/css/digital-climate-strike/main.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAQ,gCAAqB;AAE7B,gBAAgB;AACR,gCAAqB;AACrB,+BAAoB;AACpB,8BAAmB;AACnB,iCAAsB;AAE9B,WAAW;AACH,gCAAqB;AACrB,mCAAwB", +"sources": ["main.scss"], +"names": [], +"file": "main.css" +} \ No newline at end of file diff --git a/assets/static/css/digital-climate-strike/sr-only.css b/assets/static/css/digital-climate-strike/sr-only.css new file mode 100644 index 0000000..b96f2aa --- /dev/null +++ b/assets/static/css/digital-climate-strike/sr-only.css @@ -0,0 +1,8 @@ +.dcs-sr-only { + height: 1px; + left: -10000px; + overflow: hidden; + position: absolute; + top: auto; + width: 1px; +} diff --git a/assets/static/css/digital-climate-strike/webfonts/greve-800-web.eot b/assets/static/css/digital-climate-strike/webfonts/greve-800-web.eot new file mode 100644 index 0000000..ddd4e61 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/greve-800-web.eot differ diff --git a/assets/static/css/digital-climate-strike/webfonts/greve-800-web.otf b/assets/static/css/digital-climate-strike/webfonts/greve-800-web.otf new file mode 100644 index 0000000..1b6d6fc Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/greve-800-web.otf differ diff --git a/assets/static/css/digital-climate-strike/webfonts/greve-800-web.woff b/assets/static/css/digital-climate-strike/webfonts/greve-800-web.woff new file mode 100644 index 0000000..bd7b1fe Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/greve-800-web.woff differ diff --git a/assets/static/css/digital-climate-strike/webfonts/greve-800-web.woff2 b/assets/static/css/digital-climate-strike/webfonts/greve-800-web.woff2 new file mode 100644 index 0000000..6051ae3 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/greve-800-web.woff2 differ diff --git a/assets/static/css/digital-climate-strike/webfonts/greve-narrow-800.otf b/assets/static/css/digital-climate-strike/webfonts/greve-narrow-800.otf new file mode 100644 index 0000000..feee4f7 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/greve-narrow-800.otf differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.eot b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.eot new file mode 100644 index 0000000..221a105 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.eot differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.otf b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.otf new file mode 100644 index 0000000..bb8feaa Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.otf differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.ttf b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.ttf new file mode 100644 index 0000000..73ef6f4 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.ttf differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.woff b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.woff new file mode 100644 index 0000000..af2c6f2 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.woff differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.woff2 b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.woff2 new file mode 100644 index 0000000..1ddcb46 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-black-web.woff2 differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.eot b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.eot new file mode 100644 index 0000000..b7f9ab7 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.eot differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.otf b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.otf new file mode 100644 index 0000000..9003f02 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.otf differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.ttf b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.ttf new file mode 100644 index 0000000..07cd9d4 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.ttf differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.woff b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.woff new file mode 100644 index 0000000..f8419af Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.woff differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.woff2 b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.woff2 new file mode 100644 index 0000000..750c463 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-bold-web.woff2 differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.eot b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.eot new file mode 100644 index 0000000..e2e404a Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.eot differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.otf b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.otf new file mode 100644 index 0000000..13cc620 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.otf differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.ttf b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.ttf new file mode 100644 index 0000000..eb3f2a2 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.ttf differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.woff b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.woff new file mode 100644 index 0000000..ef6f255 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.woff differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.woff2 b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.woff2 new file mode 100644 index 0000000..724d58c Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-light-web.woff2 differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.eot b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.eot new file mode 100644 index 0000000..f5f93e5 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.eot differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.otf b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.otf new file mode 100644 index 0000000..7950f39 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.otf differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.ttf b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.ttf new file mode 100644 index 0000000..68085c2 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.ttf differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.woff b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.woff new file mode 100644 index 0000000..7e1b854 Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.woff differ diff --git a/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.woff2 b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.woff2 new file mode 100644 index 0000000..bbaee3c Binary files /dev/null and b/assets/static/css/digital-climate-strike/webfonts/katwijk-mono-regular-web.woff2 differ diff --git a/assets/static/fonts/fonts b/assets/static/fonts/fonts new file mode 120000 index 0000000..6dafdaf --- /dev/null +++ b/assets/static/fonts/fonts @@ -0,0 +1 @@ +fonts \ No newline at end of file diff --git a/assets/static/js/js b/assets/static/js/js new file mode 120000 index 0000000..bc42fd6 --- /dev/null +++ b/assets/static/js/js @@ -0,0 +1 @@ +js \ No newline at end of file diff --git a/templates/bottom_banner.html b/templates/bottom_banner.html index ceb8c46..94efb57 100644 --- a/templates/bottom_banner.html +++ b/templates/bottom_banner.html @@ -1,3 +1,19 @@ -<nav class="navbar sticky-bottom navbar-light bg-light"> - <a class="navbar-brand" href="#">Sticky top</a> -</nav> +<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> + </div> + </div> + </div> +</div>