mirror of
https://github.com/jfmcbrayer/brutaldon
synced 2025-01-11 06:28:08 +01:00
ff2754e33b
This *may* break browsers that support css media types but not javascript. This set appears to include dillo, evergreen browsers with js turned off. One thought on how to fix this is to set is-active on the menu by default, don't include the burger. Add the burger from javascript and remove is-active from the menu.
96 lines
3.5 KiB
HTML
96 lines
3.5 KiB
HTML
{% load static %}
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}brutaldon{% endblock %}</title>
|
|
{% if not fullbrutalism %}
|
|
<link rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
|
|
<link rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/fork-awesome@1.0.11/css/fork-awesome.min.css"
|
|
integrity="sha256-MGU/JUq/40CFrfxjXb5pZjpoZmxiP2KuICN5ElLFNd8="
|
|
crossorigin="anonymous">
|
|
<link rel="stylesheet" href="{% static "css/brutaldon.css" %}">
|
|
{% else %}
|
|
<link rel="stylesheet" href="{% static "css/fullbrutalism.css" %}" >
|
|
{% endif %}
|
|
<link rel="icon" href="{% static "images/brutaldon.png" %}" type="image/png">
|
|
</head>
|
|
<body>
|
|
{% block navbar %}
|
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item">
|
|
<img src="{% static "images/brutaldon.png" %}"
|
|
width="32" height="32" alt="Brutaldon">
|
|
</a>
|
|
<a role="button" class="navbar-burger" aria-label="menu"
|
|
aria-expanded="false" data-target="navMenu">
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a> <!-- navbar items, navbar burger... -->
|
|
</div>
|
|
<div class="navbar-menu" id="navMenu">
|
|
<!-- navbar start, navbar end -->
|
|
<div class="navbar-start">
|
|
<a href="{% url "home" %}" class="navbar-item">Home</a>
|
|
<a class="navbar-item" href="{% url "note" %}">Notifications</a>
|
|
<a class="navbar-item" href="{% url "local" %}">Local</a>
|
|
<a class="navbar-item" href="{% url "fed" %}">Federated</a>
|
|
</div>
|
|
<div class="navbar-end" >
|
|
<a class="navbar-item" href="{% url "settings" %}">Settings</a>
|
|
<a class="navbar-item" href="{% url "logout" %}">Log out</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
{% endblock %}
|
|
<section class="section">
|
|
<div class="container">
|
|
{% block content %}
|
|
<h1 class="title">
|
|
Title
|
|
</h1>
|
|
<p class="subtitle">
|
|
Brutaldon is totally a thing.
|
|
</p>
|
|
{% endblock %}
|
|
</div>
|
|
</section>
|
|
{% if not fullbrutalism %}
|
|
<script type="application/javascript">
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
// Get all "navbar-burger" elements
|
|
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
|
|
|
// Check if there are any navbar burgers
|
|
if ($navbarBurgers.length > 0) {
|
|
|
|
// Add a click event on each of them
|
|
$navbarBurgers.forEach(function ($el) {
|
|
$el.addEventListener('click', function () {
|
|
|
|
// Get the target from the "data-target" attribute
|
|
var target = $el.dataset.target;
|
|
var $target = document.getElementById(target);
|
|
|
|
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
|
|
$el.classList.toggle('is-active');
|
|
$target.classList.toggle('is-active');
|
|
|
|
});
|
|
});
|
|
}
|
|
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
|
|
</body>
|
|
</html>
|