mirror of
https://github.com/boostorg/website-v2.git
synced 2026-02-27 17:42:08 +00:00
f009e91019
Hooked up light and dark mode to the nav. In addition to changing the content colors the logo is swapped based on mode.
113 lines
3.6 KiB
HTML
113 lines
3.6 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>{% block title %}{% endblock %}</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="{% block description %}{% endblock %}">
|
|
<meta name="keywords" content="{% block keywords %}{% endblock %}">
|
|
<meta name="author" content="{% block author %}{% endblock %}">
|
|
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
|
|
<!-- Google fonts for Cairo Medium and SemiBold -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
|
|
<script src="//unpkg.com/alpinejs" defer></script>
|
|
<script src="https://unpkg.com/htmx.org@1.8.5" integrity="sha384-7aHh9lqPYGYZ7sTHvzP1t3BAfLhYSTy9ArHdP3Xsr9/3TlGurYgcPBoFmXX2TX/w" crossorigin="anonymous"></script>
|
|
<!-- detect dark or light mode -->
|
|
<script src="{% static 'js/DetectMode.js' %}"></script>
|
|
{% block extra_head %}{% endblock %}
|
|
|
|
<style>
|
|
#lottie{
|
|
width:100%;
|
|
height:100%;
|
|
display:block;
|
|
overflow: hidden;
|
|
transform: translate3d(0,0,0);
|
|
text-align: center;
|
|
opacity: 1;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body x-init="() => {const m = localStorage.getItem('colorMode');
|
|
if (m !== 'dark' && m !== 'light') return;
|
|
mode = m;
|
|
}"
|
|
class="h-screen bg-stone/60 dark:bg-black font-cairo" {% block body_id %}{% endblock %}>
|
|
<div class="container mx-auto">
|
|
{% include "includes/_header.html" %}
|
|
|
|
|
|
<div class="w-full">
|
|
{% block messages %}{% include "partials/messages.html" %}{% endblock messages %}
|
|
</div>
|
|
|
|
{% comment %}body block is for use in forums{% endcomment %}
|
|
{% block forum_body %}{% endblock %}
|
|
|
|
<div class="md:px-11">
|
|
{% block content_wrapper %}
|
|
{% block subnav %}{% endblock %}
|
|
{% block content %}{% endblock %}
|
|
{% endblock %}
|
|
</div>
|
|
|
|
{% include "includes/_footer.html" %}
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
|
|
|
|
{% block footer_js %}{% endblock %}
|
|
|
|
<script>
|
|
var params = {
|
|
container: document.getElementById('icon-container'),
|
|
path: '{% static "animations/4dots.json" %}',
|
|
renderer: 'svg',
|
|
loop: true,
|
|
autoplay: true,
|
|
name: "4 Dots",
|
|
};
|
|
|
|
var mobileParams = {
|
|
container: document.getElementById('icon-container-mobile'),
|
|
path: '{% static "animations/4dots.json" %}',
|
|
renderer: 'svg',
|
|
loop: true,
|
|
autoplay: true,
|
|
name: "4 Dots",
|
|
};
|
|
|
|
var scene1Params = {
|
|
container: document.getElementById('scene01'),
|
|
path: '{% static "animations/Scene01/data.json" %}',
|
|
renderer: 'svg',
|
|
loop: true,
|
|
autoplay: true,
|
|
name: "4 Dots",
|
|
};
|
|
|
|
var scene3Params = {
|
|
container: document.getElementById('scene03'),
|
|
path: '{% static "animations/Scene03/data.json" %}',
|
|
renderer: 'svg',
|
|
loop: true,
|
|
autoplay: true,
|
|
name: "4 Dots",
|
|
};
|
|
|
|
anim = lottie.loadAnimation(params);
|
|
mobileAnim = lottie.loadAnimation(mobileParams);
|
|
anim2 = lottie.loadAnimation(scene1Params);
|
|
anim3 = lottie.loadAnimation(scene3Params);
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|