commit b46be6cacd3ecccab8ccfe0dae4ed89a2199d5fb Author: HackerNCoder hackerncoder@encryptionin.space Date: Sat Oct 2 20:08:46 2021 +0000
i #28: partial banner --- assets/static/css/bootstrap.css | 79 +++++++++++---------- assets/static/css/fonts/Corben/Corben-Bold.ttf | Bin 0 -> 123260 bytes assets/static/css/fonts/Corben/Corben.ttf | Bin 0 -> 34560 bytes .../css/images/home/png/yec-activist-light-en.png | Bin 0 -> 113486 bytes templates/banner.html | 45 ++++++------ templates/navbar.html | 1 + 6 files changed, 65 insertions(+), 60 deletions(-)
diff --git a/assets/static/css/bootstrap.css b/assets/static/css/bootstrap.css index 5efb48f..635500f 100644 --- a/assets/static/css/bootstrap.css +++ b/assets/static/css/bootstrap.css @@ -8058,9 +8058,13 @@ a.side-nav.active { background-color: #FFFFFF; }
@font-face { - font-family: WhiteonBlack; + font-family: Corben; /* by imagex-fonts.com */ - src: url("./fonts/WhiteonBlack/WhiteOnBlack.ttf"); } + src: url("./fonts/Corben/Corben.ttf"); } +@font-face { + font-family: CorbenBold; + /* by imagex-fonts.com */ + src: url("./fonts/Corben/Corben-Bold.ttf"); } @font-face { font-family: TerminalGrotesque; /* https://open-foundry.com/fonts/terminal_grotesque_open */ @@ -8070,51 +8074,58 @@ a.side-nav.active { padding-top: 0 !important; }
.banner { - background-color: #000000; + background-color: #D4DFDC; z-index: 100000000000000 !important; overflow-x: hidden; }
.footer__close { - height: 3rem; position: absolute; - right: 0; - top: 0; - width: 3rem; - margin-top: 0rem; - margin-right: -2rem; + right: 16px; + top: 16px; + width: 32px; + height: 32px; z-index: 1; font-weight: bolder; - visibility: inherit; } - -.tracking-surveillan { - color: white; - font-family: "WhiteonBlack", sans-serif; - font-size: 50px; - text-transform: uppercase; - font-synthesis: style; + visibility: inherit; + background-color: #FAF5DF; + border-radius: 6px; + color: #05161C !important; + font-size: 1.3em; + text-align: center; +} + +.banner-big-text { + color: #002140; + font-family: "CorbenBold"; + font-size: 40px; margin: 0; width: 70%; }
-.take-back-the-intern { - color: white; - font-family: "TerminalGrotesque", monospace; - font-size: 25px; +.banner-small-text { + color: #002140; + font-family: "Corben"; + font-size: 22px; margin: 10px 0; width: 70%; }
+.banner-img-style { + max-width: 100%; + position: relative; + bottom: 0%; +} + .rectangle { - background-image: url("./images/home/png/tape.png"); - color: black; - padding: 15px 40px 0px 15px; - font-size: 2em; - font-family: "TerminalGrotesque", sans-serif; + background-color: #EFB149; + color: #002140; + padding: 15.5px 24px; + font-size: 18px; + font-family: "Source Sans Pro", sans-serif; text-decoration: none; + border-radius: 100px; background-size: cover; font-weight: bold; }
.rectangle:hover { - background-image: url("./images/home/png/tape-purple.png"); - color: white; text-decoration: none; }
.match { @@ -8131,12 +8142,8 @@ a.side-nav.active { right: 0; left: 0; top: 0; - padding: 1.25rem 1.25rem 2rem; - width: 100%; - background-image: url("./images/home/png/use-tor.png"); - background-position: bottom 10% right 35%; - background-repeat: no-repeat; - background-size: contain; } + min-height: 360px; + width: 100%; }
.eoy-sr-only { height: 1px; @@ -8156,10 +8163,10 @@ a.side-nav.active { visibility: hidden; }
@media (max-width: 575px) { - .tracking-surveillan { + .banner-big-text { width: 100%; }
- .take-back-the-intern { + .banner-small-text { width: 100%; font-size: 2rem; }
diff --git a/assets/static/css/fonts/Corben/Corben-Bold.ttf b/assets/static/css/fonts/Corben/Corben-Bold.ttf new file mode 100644 index 0000000..7ceb4b7 Binary files /dev/null and b/assets/static/css/fonts/Corben/Corben-Bold.ttf differ diff --git a/assets/static/css/fonts/Corben/Corben.ttf b/assets/static/css/fonts/Corben/Corben.ttf new file mode 100644 index 0000000..80a5916 Binary files /dev/null and b/assets/static/css/fonts/Corben/Corben.ttf differ diff --git a/assets/static/css/images/home/png/yec-activist-light-en.png b/assets/static/css/images/home/png/yec-activist-light-en.png new file mode 100644 index 0000000..db68dfb Binary files /dev/null and b/assets/static/css/images/home/png/yec-activist-light-en.png differ diff --git a/templates/banner.html b/templates/banner.html index 707b91f..6360bf7 100644 --- a/templates/banner.html +++ b/templates/banner.html @@ -1,48 +1,45 @@ {% set locale = bag('alternatives', this.alt) %} -<div class="banner__containter banner align-middle d-flex justify-content-center p-0"> +<div class="banner__containter banner align-middle d-flex justify-content-center"> <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-md-12" id="banner-header" role="contentinfo"> - <div class="col-lg-3 col-md-2"></div> - <div class="col-lg-6 col-md-8"> - <div class="col-12 p-5 {{ locale.direction }}"> + <div class="eoy-banner row col-md-12 pt-5" id="banner-header" role="contentinfo"> + <div class="col-1 px-0"></div> + <div class="col-lg-5 col-md-5 col-11 px-0"> + <div class="col-12 pl-0 {{ locale.direction }}"> <div class="row"> - <h4 class="tracking-surveillan">{{ _('Use a Mask, Use Tor.') }}</h4><br> + <h4 class="banner-big-text">{{ _('Privacy is a human right') }}</h4><br> </div> <div class="row"> - {% if locale.direction == 'text-right' %} - <div class="col-8 order-1"> - {% else %} - <div class="col-8 order-0"> - {% endif %} - <h2 class="take-back-the-intern"> - {{ _('Resist the surveillance pandemic.') }} - </h2> - </div> - {% if locale.direction == 'text-right' %} - <div class="col-4 order-0"> - {% else %} - <div class="col-4 order-1"> - {% endif %} - </div> + <h2 class="banner-small-text"> + {{ _('Your donation will be matched by Friends of Tor, up to $150,000.') }} + </h2> + </div> + {% if locale.direction == 'text-right' %} + <div class="col-4 order-0"> + {% else %} + <div class="col-4 order-1"> + {% endif %} </div> <!-- <div class="row"> <div class="col-8 order-0 pb-3"> <a href="https://blog.torproject.org/friends-of-tor-match-2020" target="_blank" title="Friends of Tor" class="match">{{ _('Your donation will be matched by Friends of Tor, up to $100,000.') }}</a> </div> </div> --> - <div class="row"> + <div class="row py-3"> {% set link = bag('links', this.alt, 'donate') %} {% if link %} - <a class="rectangle" href="{{ link }}">{{ _('Donate Now') }}</a> + <a class="rectangle" href="{{ link }}">{{ _('Donate now') }}</a> {% else %} <a class="rectangle" href="https://torproject.org/donate/donate-usetor-hp1">{{ _('DONATE NOW') }}</a> {% endif %} </div> </div> </div> - <div class="col-lg-3 col-md-1"> + <div class="col-1 px-0"></div> + <div class="col-lg-4 col-md-4 col-10 px-0"> + <img class="banner-img-style" src="/static/css/images/home/png/yec-activist-light-en.png"> </div> + <div class="col-1 px-0"></div> </div> </div> diff --git a/templates/navbar.html b/templates/navbar.html index 204b6a2..6e561dc 100644 --- a/templates/navbar.html +++ b/templates/navbar.html @@ -1,3 +1,4 @@ +{% include 'banner.html' %} {% if not this.color %} <div class="container-fluid bg-primary"> <nav class="navbar no-background navbar-expand-lg navbar-dark bg-primary p-4">