Files
Colormatic-Library-Sandbox/sandbox/templates/base.html
2025-05-20 21:27:20 -07:00

82 lines
4.1 KiB
HTML

<!DOCTYPE html>{% load cms_tags i18n menu_tags sekizai_tags static %}{% spaceless %}
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html data-bs-theme="dark" lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:'rtl,ltr,auto' }}">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="icon" type="image/x-icon" href="{% static 'colormatic_logo.svg' %}">
{% block meta %}
<meta name="description" content="{% page_attribute "meta_description" %}"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="{{ request.current_page.get_page_title|escape }}"/>
<meta property="og:description" content="{% page_attribute meta_description %}"/>
{% endblock meta %}
{% block canonical_url %}
<link rel="canonical" href="{{ request.build_absolute_uri|urlencode:":/&?" }}"/>
<meta property="og:url" content="{{ request.build_absolute_uri|urlencode:"&?" }}"/>
{% endblock canonical_url %}
{% block fb_meta %}{% endblock %}
<title>{% block title %}{{ request.current_page.get_page_title|striptags }}{% endblock %}</title>
{% block base_css %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
{% endblock base_css %}
{% endspaceless %}{% render_block 'css' %}{% spaceless %}
{% block page_head %}{% endblock %}
</head>
<body {% block body_attrs %}{% endblock %}>
{% endspaceless %}{% cms_toolbar %}{% block navbar %}
<nav class="navbar {% block navbar_options %}navbar-expand-lg{% endblock %}">
<div class="container">
<a class="navbar-brand" href="/"><img class="logo" width="30" src="{% static 'colormatic_logo.svg' %}" alt="Colormatic Logo">{% block brand %}{% endblock %}</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">{% block menubar %}{% show_menu 0 100 100 100 'bootstrap5/menu.html' %}{% endblock %}</ul>
{% block searchbar %}{% endblock %}
</div>
</div>
</nav>
{% endblock navbar %}
{% block content %}
<section>
{% placeholder "Page Content" %}
</section>
{% endblock content %}{% spaceless %}
{% block base_js %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
{% endblock base_js %}
{% endspaceless %}{% render_block 'js' %}{% spaceless %}
{% block end_js %}
<script>
/*/
* Automatically set dark theme
*
* This code will detect when the OS's color scheme changes
* and will update accordingly.
/*/
let isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDarkMode) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDarkMode) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
} else {
document.documentElement.removeAttribute('data-bs-theme');
}
});
</script>
{% endblock end_js %}
{% block bottom_css %}{% endblock %}
</body>
</html>{% endspaceless %}