Added langswitcher to mobile menu

CHANGELOG.md

@@ -1,3 +1,13 @@
+# v1.2.5
+## 01/08/2024
+
+1.  [](#new)
+    * New demo page url
+2.  [](#improved)
+    * Added language selector on mobile
+    * Added display swap when loading Google fonts
+    * Updated CSS Styles
+
 # v1.2.4
 ## 01/04/2024
 

README.md

@@ -136,7 +136,7 @@ Alternatively, you can you use the drag-n-drop "Custom Logo" field in the Future
 | preload | boolean | `true` | Enable or disable preloading. |
 # Demo page
 
-[http://future.juanvillen.es/](http://future.juanvillen.es/)
+[https://future2021.pmdesign.dev](https://future2021.pmdesign.dev)
 # Future plans
 
 - Create a Flex Directory for authors and avatars.

assets/css/google-fonts-local.css

@@ -5,6 +5,7 @@
     font-weight: 400;
     src: url(../fonts/raleway-29-cyrillic-ext-400.woff2) format('woff2');
     unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    font-display: swap;
   }
   /* cyrillic */
   @font-face {
@@ -13,6 +14,7 @@
     font-weight: 400;
     src: url(../fonts/raleway-29-cyrillic-400.woff2) format('woff2');
     unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+    font-display: swap;
   }
   /* vietnamese */
   @font-face {
@@ -21,6 +23,7 @@
     font-weight: 400;
     src: url(../fonts/raleway-29-vietnamese-400.woff2) format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+    font-display: swap;
   }
   /* latin-ext */
   @font-face {
@@ -29,6 +32,7 @@
     font-weight: 400;
     src: url(../fonts/raleway-29-latin-ext-400.woff2) format('woff2');
     unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    font-display: swap;
   }
   /* latin */
   @font-face {
@@ -37,6 +41,7 @@
     font-weight: 400;
     src: url(../fonts/raleway-29-latin-400.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    font-display: swap;
   }
   /* cyrillic-ext */
   @font-face {
@@ -45,6 +50,7 @@
     font-weight: 800;
     src: url(../fonts/raleway-29-cyrillic-ext-800.woff2) format('woff2');
     unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    font-display: swap;
   }
   /* cyrillic */
   @font-face {
@@ -53,6 +59,7 @@
     font-weight: 800;
     src: url(../fonts/raleway-29-cyrillic-800.woff2) format('woff2');
     unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+    font-display: swap;
   }
   /* vietnamese */
   @font-face {
@@ -61,6 +68,7 @@
     font-weight: 800;
     src: url(../fonts/raleway-29-vietnamese-800.woff2) format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+    font-display: swap;
   }
   /* latin-ext */
   @font-face {
@@ -69,6 +77,7 @@
     font-weight: 800;
     src: url(../fonts/raleway-29-latin-ext-800.woff2) format('woff2');
     unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    font-display: swap;
   }
   /* latin */
   @font-face {
@@ -77,6 +86,7 @@
     font-weight: 800;
     src: url(../fonts/raleway-29-latin-800.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    font-display: swap;
   }
   /* cyrillic-ext */
   @font-face {
@@ -85,6 +95,7 @@
     font-weight: 900;
     src: url(../fonts/raleway-29-cyrillic-ext-900.woff2) format('woff2');
     unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    font-display: swap;
   }
   /* cyrillic */
   @font-face {
@@ -93,6 +104,7 @@
     font-weight: 900;
     src: url(../fonts/raleway-29-cyrillic-900.woff2) format('woff2');
     unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+    font-display: swap;
   }
   /* vietnamese */
   @font-face {
@@ -101,6 +113,7 @@
     font-weight: 900;
     src: url(../fonts/raleway-29-vietnamese-900.woff2) format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+    font-display: swap;
   }
   /* latin-ext */
   @font-face {
@@ -109,6 +122,7 @@
     font-weight: 900;
     src: url(../fonts/raleway-29-latin-ext-900.woff2) format('woff2');
     unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    font-display: swap;
   }
   /* latin */
   @font-face {
@@ -117,6 +131,7 @@
     font-weight: 900;
     src: url(../fonts/raleway-29-latin-900.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    font-display: swap;
   }
   /* cyrillic-ext */
   @font-face {
@@ -125,6 +140,7 @@
     font-weight: 400;
     src: url(../fonts/sourcesanspro-22-cyrillic-ext-400.woff2) format('woff2');
     unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    font-display: swap;
   }
   /* cyrillic */
   @font-face {
@@ -133,6 +149,7 @@
     font-weight: 400;
     src: url(../fonts/sourcesanspro-22-cyrillic-400.woff2) format('woff2');
     unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+    font-display: swap;
   }
   /* greek-ext */
   @font-face {
@@ -141,6 +158,7 @@
     font-weight: 400;
     src: url(../fonts/sourcesanspro-22-greek-ext-400.woff2) format('woff2');
     unicode-range: U+1F00-1FFF;
+    font-display: swap;
   }
   /* greek */
   @font-face {
@@ -149,6 +167,7 @@
     font-weight: 400;
     src: url(../fonts/sourcesanspro-22-greek-400.woff2) format('woff2');
     unicode-range: U+0370-03FF;
+    font-display: swap;
   }
   /* vietnamese */
   @font-face {
@@ -157,6 +176,7 @@
     font-weight: 400;
     src: url(../fonts/raleway-29-vietnamese-400.woff2) format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+    font-display: swap;
   }
   /* latin-ext */
   @font-face {
@@ -165,6 +185,7 @@
     font-weight: 400;
     src: url(../fonts/sourcesanspro-22-latin-ext-400.woff2) format('woff2');
     unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    font-display: swap;
   }
   /* latin */
   @font-face {
@@ -173,6 +194,7 @@
     font-weight: 400;
     src: url(../fonts/sourcesanspro-22-latin-400.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    font-display: swap;
   }
   /* cyrillic-ext */
   @font-face {
@@ -181,6 +203,7 @@
     font-weight: 700;
     src: url(../fonts/sourcesanspro-22-cyrillic-ext-700.woff2) format('woff2');
     unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    font-display: swap;
   }
   /* cyrillic */
   @font-face {
@@ -189,6 +212,7 @@
     font-weight: 700;
     src: url(../fonts/sourcesanspro-22-cyrillic-700.woff2) format('woff2');
     unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+    font-display: swap;
   }
   /* greek-ext */
   @font-face {
@@ -197,6 +221,7 @@
     font-weight: 700;
     src: url(../fonts/sourcesanspro-22-greek-ext-700.woff2) format('woff2');
     unicode-range: U+1F00-1FFF;
+    font-display: swap;
   }
   /* greek */
   @font-face {
@@ -205,6 +230,7 @@
     font-weight: 700;
     src: url(../fonts/sourcesanspro-22-greek-700.woff2) format('woff2');
     unicode-range: U+0370-03FF;
+    font-display: swap;
   }
   /* vietnamese */
   @font-face {
@@ -213,6 +239,7 @@
     font-weight: 700;
     src: url(../fonts/sourcesanspro-22-vietnamese-700.woff2) format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+    font-display: swap;
   }
   /* latin-ext */
   @font-face {
@@ -221,6 +248,7 @@
     font-weight: 700;
     src: url(../fonts/sourcesanspro-22-latin-ext-700.woff2) format('woff2');
     unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    font-display: swap;
   }
   /* latin */
   @font-face {
@@ -229,4 +257,5 @@
     font-weight: 700;
     src: url(../fonts/sourcesanspro-22-latin-700.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    font-display: swap;
   }

assets/css/google-fonts-remote.css

@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900");
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900&display=swap");

assets/css/main.css

@@ -1964,6 +1964,17 @@ ul.actions li {
   padding: 0 0 0 1em;
   vertical-align: middle;
 }
+ul.actions.start {
+  -moz-justify-content: -moz-flex-start;
+  -webkit-justify-content: -webkit-flex-start;
+  -ms-justify-content: -ms-flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  margin-left: 0;
+}
+ul.actions.start li:first-child {
+  padding-left: 0;
+}
 ul.actions.special {
   -moz-justify-content: center;
   -webkit-justify-content: center;
@@ -3500,6 +3511,14 @@ body.single #footer {
   margin-top: 0;
   padding-top: 0;
 }
+#menu .sidebar-content.lang {
+  display: none;
+}
+@media screen and (max-width: 736px) {
+  #menu .sidebar-content.lang {
+    display: block;
+  }
+}
 body.is-menu-visible #menu {
   -moz-transform: translateX(0);
   -webkit-transform: translateX(0);

assets/sass/components/_actions.scss

@@ -18,6 +18,18 @@
 			vertical-align: middle;
 		}
 
+		&.start {
+			@include vendor('justify-content', 'flex-start');
+			width: 100%;
+			margin-left: 0;
+
+			li {
+				&:first-child {
+					padding-left: 0;
+				}
+			}
+		}
+
 		&.special {
 			@include vendor('justify-content', 'center');
 			width: 100%;

assets/sass/layout/_menu.scss

@@ -114,6 +114,16 @@
 			}
 		}
 
+		.sidebar-content.lang {
+			display: none;
+		}
+
+		@include breakpoint('<=small') {
+			.sidebar-content.lang {
+				display: block;
+			}
+		}
+
 		body.is-menu-visible & {
 			@include vendor('transform', 'translateX(0)');
 			visibility: visible;

blueprints.yaml

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

languages.yaml

@@ -267,6 +267,8 @@ en:
         HEADLINE: Archives
       SYNDICATE:
         HEADLINE: Syndicate
+      LANGSWITCHER:
+        HEADLINE: Langswitcher
     FEATURED: Featured
     PRIVACY: By using this form you agree our terms
     FORM_SUMMARY: Here is the summary of what you wrote to us
@@ -540,6 +542,8 @@ de:
         HEADLINE: Letzte Einträge
       SYNDICATE:
         HEADLINE: Verteilen
+      LANGSWITCHER:
+        HEADLINE: Langswitcher
     FEATURED: Hervorgehoben
     PRIVACY: Durch die Nutzung dieses Formulars stimmen Sie unseren Bedingungen zu
     FORM_SUMMARY: Hier ist die Zusammenfassung dessen, was Sie uns geschrieben haben
@@ -816,6 +820,8 @@ es:
         HEADLINE: Archivos
       SYNDICATE:
         HEADLINE: Distribuir
+      LANGSWITCHER:
+        HEADLINE: Cambiar idioma
     FEATURED: Destacados
     PRIVACY: Al usar este formulario estás de acuerdo con nuestra
     FORM_SUMMARY: Aquí está el resumen de lo que nos escribió

templates/partials/base.html.twig

@@ -13,6 +13,12 @@
 {# Define if sidebar is shown in the page #}
 {% set show_sidebar = header_var('show_sidebar')|defined(false) %}
 
+{# Configuration of header and sidebar buttons #}
+{% set icon_lang = theme_var('menu_langswitcher')|defined('false') %}
+{% set icon_search = theme_var('menu_search')|defined('false') %}
+{% set icon_login = theme_var('menu_login')|defined('false') %}
+{% set logoImageHeader = theme_var('type_logo_header')|defined('text') %}
+
 {# 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.avatarImage and (v.type == 'image' or v.type == 'vector'))|first %}

templates/partials/header.html.twig

@@ -1,8 +1,3 @@
-{# Configuration of navbar buttons #}
-{% set icon_lang = theme_var('menu_langswitcher')|defined('false') %}
-{% set icon_search = theme_var('menu_search')|defined('false') %}
-{% set icon_login = theme_var('menu_login')|defined('false') %}
-{% set logoImageHeader = theme_var('type_logo_header')|defined('text') %}
 <header id="header">
     
     <div class="logo">

templates/partials/sidebar_right.html.twig

@@ -9,7 +9,7 @@
 
 <section id="menu">
   <div style="padding: 1.5em;"><a class="close" href="#menu" title="Menu"></a></div>
-  {% if config.plugins.simplesearch.enabled %}
+  {% if config.plugins.simplesearch.enabled and icon_search %}
     <!-- Search -->
     <section>
       {% include 'partials/simplesearch_searchbox_sidebar.html.twig' %}
@@ -21,7 +21,7 @@
   </div>
   {% if config.plugins.archives.enabled and archives_data is not empty %}
     <!-- Archives -->
-    <div>
+    <div class="sidebar-content">
       <header>
         <h3>{{ 'FUTURE.SIDEBAR.ARCHIVES.HEADLINE'|t }}</h3>
       </header>
@@ -30,7 +30,7 @@
   {% endif %}
   {% if config.plugins.relatedpages.enabled and related_pages|length > 0 %}
   <!-- Related posts -->
-    <div>
+    <div class="sidebar-content">
       <header>
         <h3>{{ 'FUTURE.SIDEBAR.RELATED_POSTS.HEADLINE'|t }}</h3>
       </header>
@@ -41,7 +41,7 @@
     {% set taxlist = children_only is defined ? taxonomylist.getChildPagesTags() : taxonomylist.get() %}
     {% if taxlist %}
     <!-- Taxonomy list -->
-      <div>
+      <div class="sidebar-content">
         <header>
           <h3>{{ 'FUTURE.SIDEBAR.TAGS.HEADLINE'|t }}</h3>
         </header>
@@ -51,16 +51,29 @@
   {% endif %}
   {% if config.plugins.feed.enabled %}
   <!-- Syndicate -->
-    <div class="sidebar-content syndicate">
+    <div class="sidebar-content">
-        <h4>{{ 'FUTURE.SIDEBAR.SYNDICATE.HEADLINE'|t }}</h4>
+      <header>
-        <ul class="actions">
+        <h3>{{ 'FUTURE.SIDEBAR.SYNDICATE.HEADLINE'|t }}</h3>
+      </header>
+        <ul class="actions start">
         <li><a href="{{ feed_url }}.atom"><i class="fa fa-rss-square"></i> Atom 1.0</a></li>
         <li><a href="{{ feed_url }}.rss"><i class="fa fa-rss-square"></i> RSS</a></li>
         {% if config.plugins.feed.enable_json_feed %}<li><a href="{{ feed_url }}.json"><i class="fa fa-rss-square"></i> JSON</a></li>{% endif %}
         </ul>
     </div>
   {% endif %}
-  {% if config.plugins.login.enabled %}
+  {% if icon_lang and config.plugins.langswitcher.enabled and system.languages.supported is not null %}
+  <!-- Langswitcher -->
+  <div class="sidebar-content lang start">
+    <header>
+      <h3>{{ 'FUTURE.SIDEBAR.LANGSWITCHER.HEADLINE'|t }}</h3>
+    </header>
+    <ul class="actions start">
+      {% include 'partials/langswitcher.html.twig' %}
+    </ul>
+  </div>
+  {% endif %}
+  {% if config.plugins.login.enabled and icon_login%}
   <!-- Login button -->
     <div>
       <ul class="actions stacked">