diff options
| author |  Leon Sandøy <[email protected]> | 2019-04-11 23:51:02 +0200 |
|---|---|---|
| committer | Leon Sandøy <[email protected]> | 2019-04-11 23:51:02 +0200 |
| commit | 6ede600cefd9ff249e0a087a96b8e0fde50a5657 (patch) | |
| tree | 661b17234bbd08b7ec3a00281c3816f72e9cec12 /pydis_site/templates/base | |
| parent | Make the pipeline green as grass. (diff) | |
New landing page. Not quite done yet. This probably should've been more than one commit.
Diffstat (limited to 'pydis_site/templates/base')
| -rw-r--r-- | pydis_site/templates/base/base.html | 1 | ||||
| -rw-r--r-- | pydis_site/templates/base/footer.html | 2 | ||||
| -rw-r--r-- | pydis_site/templates/base/navbar.html | 110 |
3 files changed, 67 insertions, 46 deletions
diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html index 5b124ded..fecf60cc 100644 --- a/pydis_site/templates/base/base.html +++ b/pydis_site/templates/base/base.html @@ -21,6 +21,7 @@ crossorigin="anonymous" > + <link rel="stylesheet" href="{% static "css/base/base.css" %}"> {% block head %}{% endblock %} </head> <body> diff --git a/pydis_site/templates/base/footer.html b/pydis_site/templates/base/footer.html index ff868160..90f06f3c 100644 --- a/pydis_site/templates/base/footer.html +++ b/pydis_site/templates/base/footer.html @@ -1,7 +1,7 @@ <footer class="footer has-background-dark has-text-light"> <div class="content has-text-centered"> <p> - © 2019 Python Discord | Built with Django and Bulma + Built with <a href="https://www.djangoproject.com/"><span id="django-logo">django</span></a> and <a href="https://bulma.io"><span id="bulma-logo">Bulma</span></a> <br/> © {% now "Y" %} <span id="pydis-text">Python Discord</span> </p> </div> </footer> diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 73e3917a..f9f576df 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -1,60 +1,80 @@ {% load extra_filters %} {% load static %} -{% comment %} -This template is responsible for rendering the main navigation on each page that uses it. -It requires two arguments to be set in the include: +<nav class="navbar is-primary" role="navigation" aria-label="main navigation"> + <div class="navbar-brand"> -* `dropdown` (bool): True to render the dropdowns included, False to omit them -* `icon_weight` (str): Either "fas", "far" or "fal" to correspond with Font-Awesome's weight classes. - This will not affect branding icons, which have the "fab" class. -* use_logo (bool): True to render the navbar with the site logo on the left side, False to use an - icon with text instead + <a class="navbar-item is-large has-left-margin-1 has-no-highlight" href="#"> + <img src="{% static "images/navbar/pydis_banner_no_square.svg" %}" alt="Python Discord logo"/> + </a> -For example, to use light icons and no dropdowns, you could use the following in your template: + <!-- The navbar "burger" which appears when rendered on screens that can't fit the entire nav --> + <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar_menu"> + <span aria-hidden="true"></span> + <span aria-hidden="true"></span> + <span aria-hidden="true"></span> + </a> + </div> -{% include "base/navbar.html" with icon_weight="fal" dropdowns=False %} + {# Content on the right side of the navbar #} + <div class="navbar-menu is-paddingless" id="navbar_menu"> + <div class="navbar-end"> + {# Wiki #} + <a class="navbar-item" href="#"> + <span class="icon is-size-4 is-medium"><i class="fas fa-book"></i></span> + <span> Wiki</span> + </a> -This template is based on the navbar template found here: - https://github.com/gdude2002/gserv.me/blob/20f491836342925dc67b08e1bd0ea2ed29610da8/base/templates/base/navbar.html + {# Reddit #} + <a class="navbar-item" href="#"> + <span class="icon is-size-4 is-medium"><i class="fab fa-reddit-alien"></i></span> + <span> Reddit</span> + </a> -{% endcomment %} + {# Patreon #} + <a class="navbar-item" href="#"> + <span class="icon is-size-4 is-medium"><i class="fab fa-patreon"></i></span> + <span> Patreon</span> + </a> -<nav class="navbar is-primary" role="navigation" aria-label="main navigation"> - <div class="container"> - <div class="navbar-brand"> - {% if use_logo %} - <a class="navbar-item" href="{% url "home.index" %}"> - <img src="{% static 'images/logo_site_banner.svg' %}" class="navbar-brand navbar-icon" alt="Python Discord"> - </a> - {% else %} - <a - {% if active_item and request.path == "/" %} - class="navbar-item is-active" - {% else %} - class="navbar-item" - {% endif %} - href="{% url "home.index" %}" - > - - <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-home"></i></span> - <span class="is-hidden-touch"> Home</span> - </a> - {% endif %} + {# YouTube #} + <a class="navbar-item" href="#"> + <span class="icon is-size-4 is-medium"><i class="fab fa-youtube"></i></span> + <span> YouTube</span> + </a> - <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar_menu"> - <span aria-hidden="true"></span> - <span aria-hidden="true"></span> - <span aria-hidden="true"></span> + {# RedBubble #} + <a class="navbar-item" href="#"> + <span class="icon is-size-4 is-medium"><i class="fas fa-tshirt"></i></span> + <span> RedBubble</span> </a> - </div> - <div class="navbar-menu is-paddingless" id="navbar_menu"> - <div class="navbar-start"> - {# Content on the left side of the navbar #} - </div> - <div class="navbar-end"> - {# Content on the right sside of the navbar #} + + {# More #} + <div class="navbar-item has-dropdown is-hoverable has-left-margin-1"> + <a class="navbar-link"> + More + </a> + <div class="navbar-dropdown"> + <a class="navbar-item"> + About + </a> + <a class="navbar-item"> + Jobs + </a> + <a class="navbar-item"> + Contact + </a> + <hr class="navbar-divider"> + <a class="navbar-item"> + Report an issue + </a> + </div> </div> </div> + + {# Join us on Discord! #} + <a class="navbar-item is-fullsize has-no-highlight has-left-margin-1" href="#"> + <img class="is-hidden-touch" src="{% static "images/navbar/navbar_discordjoin.svg" %}" alt="Join us on Discord!"/> + </a> </div> </nav> |