Prevent horizontal scroll in small devices.

CHANGELOG.md

@@ -1,3 +1,12 @@
+# v1.2.3
+## 11/26/2023
+
+1.  [](#improved)
+    * Updated CSS styles
+    * Macros redefined for navigation (now, clickable parent menu items)
+2.  [](#bugfix)
+    * Fixed pimary image definition in base template
+  
 # v1.2.2
 ## 10/28/2023
 

assets/css/main.css

@@ -79,7 +79,7 @@ body {
 
 @media screen and (max-width: 480px) {
   html, body {
-    min-width: 320px;
+    min-width: auto;
   }
 }
 html {
@@ -2401,7 +2401,7 @@ ul.posts article header > :last-child {
     border-left: 0;
     border-right: 0;
     left: -3em;
-    width: calc(100% + (3em * 2));
+    width: calc(100% + 3em * 2);
   }
   .post > header {
     -moz-flex-direction: column;
@@ -2470,7 +2470,7 @@ ul.posts article header > :last-child {
     padding: 1.5em 1.5em 0.5em 1.5em;
     left: -1.5em;
     margin: 0 0 2em 0;
-    width: calc(100% + (1.5em * 2));
+    width: calc(100% + 1.5em * 2);
   }
   .post > header {
     padding: 3em 1.5em 0.5em 1.5em;
@@ -2939,14 +2939,20 @@ ul.menulink > li > ul {
   list-style: none;
   font-family: "Raleway", Helvetica, sans-serif;
   padding: 0.1em 0 0 0;
-  margin: 0em;
+  margin: 0 0 0 1em;
   line-height: 2.3em;
+  -webkit-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+  text-transform: uppercase;
+  font-weight: 600;
 }
 
 ul.menulink > li a.tags {
   border: dotted 1px rgba(119, 118, 118, 0.65);
   padding: 0.2em;
   font-size: 0.8em;
+  text-transform: uppercase;
+  font-weight: 400;
 }
 
 ul.menulink > li a:hover.tags {
@@ -2954,21 +2960,12 @@ ul.menulink > li a:hover.tags {
   color: #f4f4f4 !important;
 }
 
-ul.menulink > li > ul,
+ul.menulink > li > ul > li {
-ul.menulink > li a span {
   -webkit-transition: color 0.2s ease;
   transition: color 0.2s ease;
+  font-weight: 400;
+  text-transform: uppercase;
   font-size: 0.9em;
-  text-transform: uppercase;
-  font-weight: 400;
-}
-
-ul.menulink > li a span li {
-  -webkit-transition: color 0.2s ease;
-  transition: color 0.2s ease;
-  font-size: 0.8em;
-  font-weight: 400;
-  text-transform: uppercase;
 }
 
 ul.menulink > li * {
@@ -2981,48 +2978,8 @@ ul.menulink > li a:hover span {
 
 ul.subitem {
   display: block;
-}
+  margin: 0 0 0 0.5em;
-
+  padding-left: 0;
-ul.subitem > li > ul,
-ul.subitem > li a span {
-  -webkit-transition: color 0.2s ease;
-  transition: color 0.2s ease;
-  font-size: 0.9em;
-  font-weight: 400;
-  text-transform: capitalize;
-  margin-bottom: 0;
-}
-
-ul.subitem > li {
-  list-style-type: none;
-  margin-left: 0.4em;
-}
-
-ul.subitem_hide {
-  display: none;
-}
-
-ul.subitem_hide > li > ul,
-ul.subitem_hide > li a span {
-  -webkit-transition: color 0.2s ease;
-  transition: color 0.2s ease;
-  margin-bottom: 0;
-  font-weight: 400;
-  text-transform: capitalize;
-}
-
-ul.subitem_hide > li {
-  list-style-type: none;
-  margin-left: 0.4em;
-}
-
-.dropdown-btn {
-  cursor: pointer;
-}
-
-.fa-caret-down {
-  float: right;
-  padding-right: 8px;
 }
 
 /* CSS for Headings */
@@ -3074,7 +3031,7 @@ ul.subitem_hide > li {
     border-left: 0;
     border-right: 0;
     left: -3em;
-    width: calc(100% + (3em * 2));
+    width: calc(100% + 3em * 2);
   }
   .heading #breadcrumbs {
     margin: 0 0 2em 0;
@@ -3093,7 +3050,7 @@ ul.subitem_hide > li {
     padding: 1.5em 1.5em 0.5em 1.5em;
     left: -1.5em;
     margin: 0 0 2em 0;
-    width: calc(100% + (1.5em * 2));
+    width: calc(100% + 1.5em * 2);
   }
   .heading .title h2 {
     font-size: 1.1em;

assets/sass/base/_page.scss

@@ -19,7 +19,7 @@
 	// Ensures page width is always >=320px.
 		@include breakpoint('<=xsmall') {
 			html, body {
-				min-width: 320px;
+				min-width: auto;
 			}
 		}
 

assets/sass/components/_sidebarmenu.scss

@@ -20,32 +20,31 @@ ul.menulink > li > ul
     list-style: none;
     font-family: _font(family-heading);
     padding: 0.1em 0 0 0;
-    margin: 0em;
+    margin: 0 0 0 1em;
     line-height: 2.3em;
+    -webkit-transition: color 0.2s ease;
+    transition: color 0.2s ease;
+    text-transform: uppercase;
+    font-weight: _font(weight-medium);
 }
 ul.menulink > li a.tags {
     border: dotted 1px rgba(119, 118, 118, 0.65);
     padding: 0.2em;
     font-size: 0.8em;
+    text-transform: uppercase;
+    font-weight: _font(weight);
 }
 ul.menulink > li a:hover.tags  {
     background-color: _palette(accent);
     color: _palette(bg-alt) !important;
 }
-ul.menulink > li > ul,
+
-ul.menulink > li a span {
+ul.menulink > li > ul > li {
     -webkit-transition: color 0.2s ease;
     transition: color 0.2s ease;
+    font-weight: _font(weight);
+    text-transform: uppercase;
     font-size: 0.9em;
-    text-transform: uppercase;
-    font-weight: _font(weight);
-}
-ul.menulink > li a span li {
-    -webkit-transition: color 0.2s ease;
-    transition: color 0.2s ease;
-    font-size: 0.8em;
-    font-weight: _font(weight);
-    text-transform: uppercase;
 }
 
 ul.menulink > li * {
@@ -57,41 +56,6 @@ ul.menulink > li a:hover span {
 }
 ul.subitem {
     display:block;
-}
+    margin: 0 0 0 0.5em;
-ul.subitem > li > ul,
+    padding-left: 0;
-ul.subitem > li a span {
-    -webkit-transition: color 0.2s ease;
-    transition: color 0.2s ease;
-    font-size: 0.9em;
-    font-weight: _font(weight);
-    text-transform: capitalize;
-    margin-bottom: 0;
-}
-ul.subitem > li {
-    list-style-type: none;
-    margin-left: 0.4em;
-    }
-ul.subitem_hide {
-    display:none;
-}
-ul.subitem_hide > li > ul,
-ul.subitem_hide > li a span
-{
-
-    -webkit-transition: color 0.2s ease;
-    transition: color 0.2s ease;
-    margin-bottom: 0;
-    font-weight: _font(weight);
-    text-transform: capitalize;
-}
-ul.subitem_hide > li {
-    list-style-type: none;
-    margin-left: 0.4em;
-}
-.dropdown-btn {
-    cursor: pointer;
-}
-.fa-caret-down {
-    float: right;
-    padding-right: 8px;
 }

blueprints.yaml

@@ -1,7 +1,7 @@
 name: Future 2021
 slug: future2021
 type: theme
-version: 1.2.2
+version: 1.2.3
 description: Grav Future Imperfect by HTML5 UP (Version 2021)
 icon:  microchip
 author:

templates/macros/macros.html.twig

@@ -20,30 +20,21 @@
 {% macro nav_loop(page) %}
   {% import _self as nav_macros %}
   {% for p in page.children.visible %}
-    {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
+    {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
-    {% if p.children.visible.count > 0 %}
+    {% set has_visible_children = p.children.visible.count > 0 %}
-      <li class="{{ current_page }}">
+    <li>
-        <a>
+      <a href="{{ p.url }}" class="{{ active_page }}">
-          {% if p.header.icon %}
+        {% if p.header.icon %}
             <i class="fa fa-{{ p.header.icon }}"></i>
-          {% endif %}
+        {% endif %}
-          {{ p.menu }}
+        {{ p.menu }}
-            {% if p.routable ?? false %}&nbsp;<i class="fa fa-angle-down"></i>
+        {% if has_visible_children %}&nbsp;<i class="fa fa-angle-down"></i>{% endif %}
-            {% endif %}
+      </a>
-        </a>
+      {% if has_visible_children %}
-        <ul>
+      <ul>
-          {{ nav_macros.nav_loop(p) }}
+        {{ nav_macros.nav_loop(p) }}
-        </ul>
+      </ul>
-      </li>
+      {% endif %}
-    {% else %}
+    </li>
-      <li class="{{ current_page }}">
-        <a href="{{ p.url }}">
-          {% if p.header.icon %}
-            <i class="fa fa-{{ p.header.icon }}"></i>
-          {% endif %}
-          <span>{{ p.menu }}</span>
-        </a>
-      </li>
-    {% endif %}
   {% endfor %}
 {% endmacro %}

templates/partials/base.html.twig

@@ -15,7 +15,7 @@
 
 {# Define if the primary image and the attributes of width and height are shown #}
 {% set show_image = header_var('show_pageimage')|defined(true) %}
-{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v, k) => k != page.header.primaryImage and (v.type == 'image' or v.type == 'vector'))|first %}
+{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v, k) => k != page.header.avatarImage and (v.type == 'image' or v.type == 'vector'))|first %}
 {% set img_width = header_var('image_width')|default(1038) %}
 {% set img_height = header_var('image_height')|default(437) %}
 

templates/partials/sidebar_navigation.html.twig

@@ -1,34 +1,22 @@
 {% block menu_navigation %}
-  {% macro loop(page) %}
+{% macro loop(page) %}
-    {% for p in page.children.visible %}
+{% for p in page.children.visible %}
-      {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
+    {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
-      {% if p.children.visible.count > 0 %}
+    <li class="{{ current_page }}">
-        <li class="{{ current_page }}">
+        <a href="{{ p.url }}">
-          <a class="dropdown-btn">
             {% if p.header.icon %}
-              <i class="fa fa-{{ p.header.icon }}"></i>
+                <i class="fa fa-{{ p.header.icon }}"></i>
-            {% endif %}
-            <span>{{ p.menu }}
-              {% if p.routable ?? false %}&nbsp;<i class="fa fa-caret-down"></i>
-              {% endif %}
-            </span>
-          </a>
-          <ul class="subitem_hide">
-            {{ _self.loop(p) }}
-          </ul>
-        </li>
-      {% else %}
-        <li class="{{ current_page }}">
-          <a href="{{ p.url }}">
-            {% if p.header.icon %}
-              <i class="fa fa-{{ p.header.icon }}"></i>
             {% endif %}
             <span>{{ p.menu }}</span>
-          </a>
+        </a>
-        </li>
+        {% if p.children.visible.count > 0 %}
-      {% endif %}
+            <ul class="subitem">
-    {% endfor %}
+                {{ _self.loop(p) }}
-  {% endmacro %}
+            </ul>
+        {% endif %}
+    </li>
+{% endfor %}
+{% endmacro %}
   <ul class="menulink">
     {{ _self.loop(pages) }}
     {% if theme_var('custommenus.enabled') %}
@@ -44,16 +32,4 @@
       {% endfor %}
     {% endif %}
   </ul>
-{% endblock %}
-
-{% block javascripts %}
-<script>
-if ((window.innerWidth || document.documentElement.clientWidth) < 980){ 
-  /* Script for dropdown menu in sidebar */
-  $(".subitem_hide").hide(); /* this hides the list initially */
-      $(".dropdown-btn").click(function () {
-      $(this).next(".subitem_hide").slideToggle();
-  });
-  }
-</script>
 {% endblock %}