Fork the base twig template from quark.

(that was bound to happen sometime) We're also adding two tentative CSS fixes for the theme and language-selector plugin.

Fork the base twig template from quark.
(that was bound to happen sometime) We're also adding two tentative CSS fixes for the theme and language-selector plugin.
cab04241 · Administrator · d7764e0d · cab04241 · cab04241
Commit cab04241 authored Mar 19, 2019 by Administrator 💬
Show whitespace changes
Inline Side-by-side

Showing with 129 additions and 0 deletions

custom.css user/themes/textbook/css/custom.css +14 -0

base.html.twig user/themes/textbook/templates/partials/base.html.twig +115 -0

No files found.
--- a/user/themes/textbook/css/custom.css
+++ b/user/themes/textbook/css/custom.css

+/* Hotfix for https://github.com/getgrav/grav-theme-quark/issues/9 */
+section#header { z-index: 10; }
+
+/* Little patch for the language selector, to center it vertically. */
+/* Beta feature : may cause bugs. We'll see. */
+.language-selector {
+    -webkit-transform: initial !important;
+    -moz-transform: initial !important;
+    -o-transform: initial !important;
+    -ms-transform: initial !important;
+    transform: initial !important;
+}
+
 /* Ensures the footer stays on the bottom of the page */
 #page-wrapper {
    min-height: calc(100vh - 3rem);
 }

+/* Fixed height footer */
 #footer {
    height: 3rem;
 }

--- a/user/themes/textbook/templates/partials/base.html.twig
+++ b/user/themes/textbook/templates/partials/base.html.twig
+{% set body_classes = body_class(['header-fixed', 'header-animated', 'header-dark', 'header-transparent', 'sticky-footer']) %}
+{% set grid_size = theme_var('grid-size') %}
+{% set compress = theme_var('production-mode') ? '.min.css' : '.css' %}
+<!DOCTYPE html>
+<html lang="{{ grav.language.getActive ?: grav.config.site.default_lang }}">
+<head>
+{% block head %}
+    <meta charset="utf-8" />
+    <title>{% if header.title %}{{ header.title|e('html') }} | {% endif %}{{ site.title|e('html') }}</title>
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {% include 'partials/metadata.html.twig' %}
+
+    <link rel="icon" type="image/png" href="{{ url('theme://images/favicon.png') }}" />
+    <link rel="canonical" href="{{ page.url(true, true) }}" />
+
+    {% block stylesheets %}
+        {% do assets.addCss('theme://css-compiled/spectre'~compress) %}
+        {% if theme_var('spectre.exp') %}{% do assets.addCss('theme://css-compiled/spectre-exp'~compress)  %}{% endif %}
+        {% if theme_var('spectre.icons') %}{%  do assets.addCss('theme://css-compiled/spectre-icons'~compress) %}{% endif %}
+        {% do assets.addCss('theme://css-compiled/theme'~compress) %}
+        {% do assets.addCss('theme://css/custom.css') %}
+        {% do assets.addCss('theme://css/line-awesome.min.css') %}
+    {% endblock %}
+    {{ assets.css()|raw }}
+
+    {% block javascripts %}
+        {% do assets.addJs('jquery', 101) %}
+        {% do assets.addJs('theme://js/jquery.treemenu.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
+    {% endblock %}
+    {{ assets.js()|raw }}
+
+{% endblock head %}
+</head>
+<body id="top" class="{% block body_classes %}{{ body_classes }}{% endblock %}">
+    <div id="page-wrapper">
+    {% block header %}
+        <section id="header" class="section">
+            <section class="container {{ grid_size }}">
+                <nav class="navbar">
+                    <section class="navbar-section logo">
+                        {% include 'partials/logo.html.twig' %}
+                    </section>
+
+                    <section class="navbar-section">
+                        <div>{# Wrapper div to make centering vertically easy #}
+                        {% include 'partials/language-selector.html.twig' %}
+                        </div>
+                    </section>
+
+                    <section class="navbar-section desktop-menu">
+
+                        <nav class="dropmenu animated">
+                        {% block header_navigation %}
+                            {% include 'partials/navigation.html.twig' %}
+                        {% endblock %}
+                        </nav>
+
+                        {% if config.plugins.login.enabled and grav.user.username %}
+                            <span class="login-status-wrapper"><i class="fa fa-user"></i> {% include 'partials/login-status.html.twig' %}</span>
+                        {% endif %}
+
+                    </section>
+                </nav>
+            </section>
+        </section>
+        <div class="mobile-menu">
+            <div class="button_container" id="toggle">
+                <span class="top"></span>
+                <span class="middle"></span>
+                <span class="bottom"></span>
+            </div>
+        </div>
+    {% endblock %}
+
+    {% block hero %}{% endblock %}
+
+        <section id="start">
+        {% block body %}
+            <section id="body-wrapper" class="section">
+                <section class="container {{ grid_size }}">
+                    {% block messages %}
+                        {% include 'partials/messages.html.twig' ignore missing %}
+                    {% endblock %}
+                    {% block content %}{% endblock %}
+                </section>
+            </section>
+        {% endblock %}
+        </section>
+
+    </div>
+
+    {% block footer %}
+        {% include 'partials/footer.html.twig' %}
+    {% endblock %}
+    
+    <div class="mobile-container">
+        <div class="overlay" id="overlay">
+            <div class="mobile-logo">
+                {% include 'partials/logo.html.twig' with {mobile: true} %}
+            </div>
+            <nav class="overlay-menu">
+                {% include 'partials/navigation.html.twig' with {tree: true} %}
+            </nav>
+        </div>
+    </div>
+
+{% block bottom %}
+    {{ assets.js('bottom')|raw }}
+{% endblock %}
+
+</body>
+</html>