Release 2.1.2

I think the menu-part was missing in downloads.html.twig:

{% block menu %}
  {% include 'partials/sidebar_right.html.twig' %}
{% endblock %}

CHANGELOG.md

@@ -1,3 +1,115 @@
+# v2.1.2
+## 03/13/2025
+
+1.  [](#improved)
+    * Upgraded Glightbox library to version 3.3.0 
+
+# v2.1.1
+## 02/16/2025
+
+1.  [](#improved)
+    * Updated `parials/taxonomylist.html.twig` to support latest updates in that plugin
+  
+# v2.1.0
+## 01/24/2025
+
+1.  [](#new)
+    * New demo page for download template
+2.  [](#bugfix)
+    * Fixed z-index property in dropdown menu ([https://github.com/pmoreno-rodriguez/grav-theme-future2021/issues/61](https://github.com/pmoreno-rodriguez/grav-theme-future2021/issues/61))
+  
+# v2.0.0
+## 08/14/2024
+
+1.  [](#new)
+    * New styles for buttons and boxes
+    * New Box, Buttons and Flex shortcodes
+2.  [](#improved)
+    * Updated Shortcodes demo page
+3.  [](#bugfix)
+    * Fixed invalid value in `itemtype` field in gallery template
+  
+# v1.4.0
+## 07/16/2024
+
+1.  [](#new)
+    * Removed the `custom.js` and `custom.css` files from the theme, to avoid overwriting user customizations with the release of new versions. These files are now loaded, if they exist in the theme's `assets/css` or `assets/js` folder, using the `onTwigSiteVariables` function within `future2021.php` and can be enabled from the theme settings.
+2.  [](#improved)
+    * Fixed the escaping of an html string in the metadata description
+    * Integrated "Back to Top" button code in main.js
+  
+# v1.3.3
+## 05/15/2024
+
+1.  [](#improved)
+    * Updated `taxonomylist` partial template to latest changes of [taxonomylist plugin](https://github.com/getgrav/grav-plugin-taxonomylist/releases/tag/1.3.6)
+  
+# v1.3.2
+## 03/19/2024
+
+1.  [](#bugfix)
+    * Fixed missing block menu in the right sidebar in the downloads template (thanks [mjz68](https://github.com/mjz68))
+
+# v1.3.1
+## 03/17/2024
+
+1.  [](#new)
+    * New Dutch language (thanks [Gilles van Eeden](https://github.com/gigago))
+
+# v1.3.0
+## 03/04/2024
+
+1.  [](#new)
+    * New Downloads template
+2.  [](#improved)
+    * Updated README
+    * Updated translations
+    * Updated styles
+    * Updated author info in theme blueprints
+    * Removed partial Privacy template for contact form
+    * Updated contact demo page
+  
+# 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
+
+1.  [](#new)
+    * Added option to display image logo in header
+2.  [](#improved)
+    * Updated CSS styles
+    * Updated translations
+  
+# 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
+
+1.  [](#new)
+    * Added option to load Google fonts from local folder.
+    * New captions on hover for portfolio images.
+2.  [](#improved)
+    * Updated translations
+    * Updated CSS styles
+    * Redefined macros for navigation and page toc plugin
+3.  [](#bugfix)
+    * Fixed sort filter error when taxonomy is empty 
+  
 # v1.2.1
 ## 09/28/2023
 

README.md

@@ -72,9 +72,11 @@ Future2021 comes with a few default options that can be set site-wide.  These op
 ```yaml
 production-mode: true         # In production mode, only minified CSS is used. When disabled, nested CSS are enabled
 sidebar:                      # Enable/Disable sidebar in non-editable pages such as simplesearch results, offline, etc.
+google_fonts_local:           # Option to load Google Fonts from the theme or from Google servers.
 favicon:                      # Choosse your own favicon
 custom_logo:                  # A custom logo rather than the default (see below)  
 custom_logo_mobile:           # A custom logo to use for mobile navigation
+type_logo_header:             # Choose how the logo is displayed in header. Options: Image, Text or Both
 slogan:                       # Custom text for slogan
 menu_langswitcher:            # Enable/Disable langswitcher icon in menu (langswitcher plugin needed)
 menu_search:                  # Enable/Disable search icon in menu (simplesearch plugin needed)
@@ -133,9 +135,19 @@ Alternatively, you can you use the drag-n-drop "Custom Logo" field in the Future
 | dragToleranceY | number | `65` | Used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag). |
 | dragAutoSnap | boolean | `false` | If true the slide will automatically change to prev/next or close if dragToleranceX or dragToleranceY is reached, otherwise it will wait till the mouse is released. |
 | preload | boolean | `true` | Enable or disable preloading. |
+
+# Downloads template
+
+Future2021 theme includes a simple template to manage downloads of files uploaded to a page. These files are automatically found and processed by Grav using `page.media.all` and displayed in a table with four columns: name, size, modification date and download button.
+
 # Demo page
 
-[http://future.juanvillen.es/](http://future.juanvillen.es/)
+[https://future2021.pmdesign.dev](https://future2021.pmdesign.dev)
+
+# Documentation 
+
+You can read extra documentation of Future2021 Theme at [https://pmoreno-rodriguez.github.io/#/./gravthemes/future2021/index](https://pmoreno-rodriguez.github.io/#/./gravthemes/future2021/index). This is [Spanish document site for Future2021 Theme](https://pmdesign.dev/temas/future2021)
+
 # Future plans
 
 - Create a Flex Directory for authors and avatars.

_demo/pages/05.contact/04._contact-us/contact.md

@@ -52,8 +52,10 @@ form:
             rows: 10
         -
             name: privacy
-            type: privacy
+            type: checkbox
-            label: 'Privacy policy'
+            markdown: true
+            label: 'Accept our <a href="privacy">Privacy policy</a>'
+            outerclasses: col-12
             validate:
                 required: true
                 message: 'You must agree to the privacy policy'
@@ -61,7 +63,7 @@ form:
         -
             type: submit
             value: Enviar
-            outerclasses: form-field
+            outerclasses: col-12
             classes: 'button primary'
     process:
         save:

_demo/pages/06.readme/default.md

@@ -138,7 +138,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.

_demo/pages/07.privacy/default.md

@@ -45,7 +45,7 @@ For the purposes of this Privacy Policy:
 
 *   **Usage Data** refers to data collected automatically, either generated by the use of the Service or from the Service infrastructure itself (for example, the duration of a page visit).
 
-*   **Website** refers to Editorial Grav Theme, accessible from [http://future.juanvillen.es](http://future.juanvillen.es)
+*   **Website** refers to Editorial Grav Theme, accessible from [https://future2021.pmdesign.dev](https://future2021.pmdesign.dev)
 
 *   **You** means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.
 
@@ -211,4 +211,4 @@ You are advised to review this Privacy Policy periodically for any changes. Chan
 
 If you have any questions about this Privacy Policy, You can contact us:
 
-*   By visiting this page on our website: [http://future.juanvillen.es](http://future.juanvillen.es)
+*   By visiting this page on our website: [https://future2021.pmdesign.dev](https://future2021.pmdesign.dev)

_demo/pages/08.shortcodes/default.md

@@ -0,0 +1,226 @@
+---
+title: Shortcodes
+show_pageimage: true
+image_width: 1000
+image_height: 300
+show_sidebar: true
+---
+
+## Box Shortcode
+
+### Usage
+
+Wrap some content block in [raw]`[sc-box]`[/raw] tags.  The [raw]`[sc-box]`[/raw] shortcode has some optional parameters:
+    
+* `heading` - The heading for box
+* `color` - `primary`, `secondary`, `success`, `warning` and `info`. 
+* `class` - `alt` (this class remove border from box). 
+
+An example of the Box shortcode is as follows:
+    
+[raw]
+```markdown
+[sc-box color="primary" heading="Primary Box Shortcode"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
+[/sc-box]
+[sc-box color="secondary" heading="Secondary Box Shortcode"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
+[/sc-box]
+[sc-box color="success" heading="Success Box Shortcode"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
+[/sc-box]
+[sc-box color="info" heading="Info Box Shortcode"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
+[/sc-box]
+[sc-box color="warning" heading="Warning Box Shortcode"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
+[/sc-box]
+[sc-box color="danger" heading="Danger Box Shortcode"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
+[/sc-box]
+```
+[/raw]
+
+#### Example
+    
+[sc-box color="primary" heading="Primary Box Shortcode"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
+[/sc-box]
+[sc-box color="secondary" heading="Secondary Box Shortcode"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
+[/sc-box]
+[sc-box color="success" heading="Success Box Shortcode"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
+[/sc-box]
+[sc-box color="info" heading="Info Box Shortcode"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
+[/sc-box]
+[sc-box color="warning" heading="Warning Box Shortcode"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
+[/sc-box]
+[sc-box color="danger" heading="Danger Box Shortcode"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
+[/sc-box]
+
+## Buttons Shortcode
+    
+### Usage
+
+Wrap some buttons in [raw]`[sc-buttons]`[/raw] tags.  The [raw]`[sc-buttons]`[/raw] has the parameter `ulclass` with the following values:  `stacked`, `special` or`fit`
+    
+The `[sc-button]` shortcode that defines each _button_ has the following parameters:
+    
+* `class`- custom classes for button
+* `type` - `primary`, `secondary`, `success`, `info`, `warning` or `danger`. 
+* `size` - `small`, `medium`or `large`
+* `url`- The button url
+* `target`- The target of url
+
+An example of the Buttons shortcode is as follows:
+
+[raw]
+```markdown
+[sc-buttons]
+    [sc-button type="primary"  url="#"]Primary[/sc-button]
+    [sc-button type="secondary" url="#"]Secondary[/sc-button]
+    [sc-button type="success" url="#"]Success[/sc-button]
+    [sc-button type="info" url="#"]Info[/sc-button]
+    [sc-button type="warning" url="#"]Warning[/sc-button]
+    [sc-button type="danger" url="#"]Danger[/sc-button]
+[/sc-buttons]
+[sc-buttons]
+    [sc-button type="primary" size="small"  url="#"]Primary[/sc-button]
+    [sc-button type="secondary" size="small"   url="#"]Secondary[/sc-button]
+    [sc-button type="success" size="small"   url="#"]Success[/sc-button]
+    [sc-button type="info" size="small" url="#"]Info[/sc-button]
+    [sc-button type="warning" size="small" url="#"]Warning[/sc-button]
+    [sc-button type="danger" size="small" url="#"]Danger[/sc-button]
+[/sc-buttons]
+[sc-buttons ulclass="special"]
+    [sc-button type="primary" size="small"  url="#"]Primary[/sc-button]
+    [sc-button type="secondary" size="small"   url="#"]Secondary[/sc-button]
+[/sc-buttons]
+[sc-buttons ulclass="stacked"]
+    [sc-button type="primary" size="small"  url="#"]Primary[/sc-button]
+    [sc-button type="secondary" size="small"   url="#"]Secondary[/sc-button]
+[/sc-buttons]
+[sc-buttons ulclass="fit"]
+    [sc-button type="primary" size="small"  url="#"]Primary[/sc-button]
+    [sc-button type="secondary" size="small"   url="#"]Secondary[/sc-button]
+[/sc-buttons]
+```
+[/raw]
+
+#### Example
+    
+[sc-buttons]
+    [sc-button type="primary"  url="#"]Primary[/sc-button]
+    [sc-button type="secondary" url="#"]Secondary[/sc-button]
+    [sc-button type="success" url="#"]Success[/sc-button]
+    [sc-button type="info" url="#"]Info[/sc-button]
+    [sc-button type="warning" url="#"]Warning[/sc-button]
+    [sc-button type="danger" url="#"]Danger[/sc-button]
+[/sc-buttons]
+[sc-buttons]
+    [sc-button type="primary" size="small"  url="#"]Primary[/sc-button]
+    [sc-button type="secondary" size="small"   url="#"]Secondary[/sc-button]
+    [sc-button type="success" size="small"   url="#"]Success[/sc-button]
+    [sc-button type="info" size="small" url="#"]Info[/sc-button]
+    [sc-button type="warning" size="small" url="#"]Warning[/sc-button]
+    [sc-button type="danger" size="small" url="#"]Danger[/sc-button]
+[/sc-buttons]
+[sc-buttons ulclass="special"]
+    [sc-button type="primary" size="small"  url="#"]Primary[/sc-button]
+    [sc-button type="secondary" size="small"   url="#"]Secondary[/sc-button]
+[/sc-buttons]
+[sc-buttons ulclass="stacked"]
+    [sc-button type="primary" size="small"  url="#"]Primary[/sc-button]
+    [sc-button type="secondary" size="small"   url="#"]Secondary[/sc-button]
+[/sc-buttons]
+[sc-buttons ulclass="fit"]
+    [sc-button type="primary disable" size="small"  url="#"]Primary[/sc-button]
+    [sc-button type="secondary" size="small"   url="#"]Secondary[/sc-button]
+[/sc-buttons]
+
+## Flex Shortcode
+    
+### Usage
+
+Use the [raw]`[sc-flex]`[/raw] shortcode to set the number of columns that best render your content and layout. The [raw]`[sc-flex]`[/raw] has the following parameters: 
+    * `class`- Row classes from Editorial theme (space separated): `gtr-uniform`, `gtr-0`, `gtr-25`, `gtr-50`, `gtr-150`, `gtr-200`, `aln-between`, `aln-around`, `aln-evenly`, `aln-left`, `aln-center`, `aln-right`, `aln-top`, `aln-bottom` and `aln-middle` . 
+    
+The [raw]`[column]`[/raw] shortcode that defines each to the individual columns (e.g., .col-4 col-12-medium),  has the following parameters:
+    
+* `class`- Column classes  from Editorial theme (space separated), indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use col-4. To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint : `xsmall`, `small`, `medium`, `large` and `xlarge`.
+
+An example of the Flex row shortcode is as follows:
+    
+[raw]
+```markdown
+[sc-flex class="gtr-50"]
+[column class="col-3 col-12-medium"]
+[sc-box color="primary" heading="Primary"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.
+[/sc-box]
+[/column]
+    
+[column class="col-3 col-12-medium"]
+[sc-box color="secondary" heading="Secondary"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.
+[/sc-box]
+[/column]
+    
+[column class="col-3 col-12-medium"]
+[sc-box color="success" heading="Success"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.
+[/sc-box]
+[/column]
+    
+[column class="col-3 col-12-medium"]
+[sc-buttons  ulclass="stacked fit"]
+    [sc-button type="primary"  url="#"]Primary[/sc-button]
+    [sc-button type="secondary" url="#"]Secondary[/sc-button]
+    [sc-button type="success" url="#"]Success[/sc-button]
+    [sc-button type="info" url="#"]Info[/sc-button]
+    [sc-button type="warning" url="#"]Warning[/sc-button]
+    [sc-button type="danger" url="#"]Danger[/sc-button]
+[/sc-buttons]
+[/column]
+    
+[/sc-flex]
+```
+[/raw]
+
+#### Example
+    
+[sc-flex class="gtr-50"]
+[column class="col-3 col-12-medium"]
+[sc-box color="primary" heading="Primary"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.
+[/sc-box]
+[/column]
+    
+[column class="col-3 col-12-medium"]
+[sc-box color="secondary" heading="Secondary"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.
+[/sc-box]
+[/column]
+    
+[column class="col-3 col-12-medium"]
+[sc-box color="success" heading="Success"]
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.
+[/sc-box]
+[/column]
+    
+[column class="col-3 col-12-medium"]
+[sc-buttons ulclass="stacked fit"]
+    [sc-button type="primary"  url="#"]Primary[/sc-button]
+    [sc-button type="secondary" url="#"]Secondary[/sc-button]
+    [sc-button type="success" url="#"]Success[/sc-button]
+    [sc-button type="info" url="#"]Info[/sc-button]
+    [sc-button type="warning" url="#"]Warning[/sc-button]
+    [sc-button type="danger" url="#"]Danger[/sc-button]
+[/sc-buttons]
+[/column]
+    
+[/sc-flex]

_demo/pages/09.downloads/downloads.md

@@ -0,0 +1,9 @@
+---
+title: Downloads
+show_pageimage: false
+image_width: 1000
+image_height: 300
+media_order: 'pic01.jpg,pic02.jpg,pic03.jpg,pic04.jpg,pic05.jpg,pic06.jpg,pic07.jpg,pic08.jpg,pic09.jpg,pic10.jpg'
+show_sidebar: true
+---
+

assets/css/custom.css

@@ -1 +0,0 @@
-/* Custom CSS */

assets/css/google-fonts-local.css

@@ -0,0 +1,261 @@
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Raleway';
+    font-style: normal;
+    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 {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    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 {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    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 {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    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 {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: url(../fonts/sourcesanspro-22-greek-400.woff2) format('woff2');
+    unicode-range: U+0370-03FF;
+    font-display: swap;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    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 {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    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 {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    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 {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    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 {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    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 {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    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 {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 700;
+    src: url(../fonts/sourcesanspro-22-greek-700.woff2) format('woff2');
+    unicode-range: U+0370-03FF;
+    font-display: swap;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    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 {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    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 {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    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

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

assets/css/main.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900");
 /*
 	Future Imperfect by HTML5 UP
 	html5up.net | @ajlkn
@@ -80,7 +79,7 @@ body {
 
 @media screen and (max-width: 480px) {
   html, body {
-    min-width: 320px;
+    min-width: auto;
   }
 }
 html {
@@ -288,6 +287,15 @@ hr.major {
 .row.gtr-uniform > * > :last-child {
   margin-bottom: 0;
 }
+.row.aln-between {
+  justify-content: space-between;
+}
+.row.aln-around {
+  justify-content: space-around;
+}
+.row.aln-evenly {
+  justify-content: space-evenly;
+}
 .row.aln-left {
   justify-content: flex-start;
 }
@@ -472,6 +480,15 @@ hr.major {
   .row.gtr-uniform > * > :last-child {
     margin-bottom: 0;
   }
+  .row.aln-between {
+    justify-content: space-between;
+  }
+  .row.aln-around {
+    justify-content: space-around;
+  }
+  .row.aln-evenly {
+    justify-content: space-evenly;
+  }
   .row.aln-left {
     justify-content: flex-start;
   }
@@ -657,6 +674,15 @@ hr.major {
   .row.gtr-uniform > * > :last-child {
     margin-bottom: 0;
   }
+  .row.aln-between {
+    justify-content: space-between;
+  }
+  .row.aln-around {
+    justify-content: space-around;
+  }
+  .row.aln-evenly {
+    justify-content: space-evenly;
+  }
   .row.aln-left {
     justify-content: flex-start;
   }
@@ -842,6 +868,15 @@ hr.major {
   .row.gtr-uniform > * > :last-child {
     margin-bottom: 0;
   }
+  .row.aln-between {
+    justify-content: space-between;
+  }
+  .row.aln-around {
+    justify-content: space-around;
+  }
+  .row.aln-evenly {
+    justify-content: space-evenly;
+  }
   .row.aln-left {
     justify-content: flex-start;
   }
@@ -1027,6 +1062,15 @@ hr.major {
   .row.gtr-uniform > * > :last-child {
     margin-bottom: 0;
   }
+  .row.aln-between {
+    justify-content: space-between;
+  }
+  .row.aln-around {
+    justify-content: space-around;
+  }
+  .row.aln-evenly {
+    justify-content: space-evenly;
+  }
   .row.aln-left {
     justify-content: flex-start;
   }
@@ -1212,6 +1256,15 @@ hr.major {
   .row.gtr-uniform > * > :last-child {
     margin-bottom: 0;
   }
+  .row.aln-between {
+    justify-content: space-between;
+  }
+  .row.aln-around {
+    justify-content: space-around;
+  }
+  .row.aln-evenly {
+    justify-content: space-evenly;
+  }
   .row.aln-left {
     justify-content: flex-start;
   }
@@ -1453,6 +1506,54 @@ hr.major {
   margin-bottom: 0;
   padding: 0.5em;
 }
+.box.primary {
+  background-color: #ba2e5d;
+  box-shadow: none;
+  color: #ffffff !important;
+}
+.box.primary h1, .box.primary h2, .box.primary h3, .box.primary h4, .box.primary h5, .box.primary h6 {
+  color: #ffffff !important;
+}
+.box.secondary {
+  background-color: #6c757d;
+  box-shadow: none;
+  color: #f4f4f4 !important;
+}
+.box.secondary h1, .box.secondary h2, .box.secondary h3, .box.secondary h4, .box.secondary h5, .box.secondary h6 {
+  color: #f4f4f4 !important;
+}
+.box.success {
+  background-color: #48c774;
+  box-shadow: none;
+  color: #f4f4f4 !important;
+}
+.box.success h1, .box.success h2, .box.success h3, .box.success h4, .box.success h5, .box.success h6 {
+  color: #f4f4f4 !important;
+}
+.box.info {
+  background-color: #209cee;
+  box-shadow: none;
+  color: #f4f4f4 !important;
+}
+.box.info h1, .box.info h2, .box.info h3, .box.info h4, .box.info h5, .box.info h6 {
+  color: #f4f4f4 !important;
+}
+.box.warning {
+  background-color: #ffdd57;
+  box-shadow: none;
+  color: #3c3b3b !important;
+}
+.box.warning h1, .box.warning h2, .box.warning h3, .box.warning h4, .box.warning h5, .box.warning h6 {
+  color: #3c3b3b !important;
+}
+.box.danger {
+  background-color: #ff3860;
+  box-shadow: none;
+  color: #f4f4f4 !important;
+}
+.box.danger h1, .box.danger h2, .box.danger h3, .box.danger h4, .box.danger h5, .box.danger h6 {
+  color: #f4f4f4 !important;
+}
 .box.alt {
   border: 0;
   border-radius: 0;
@@ -1556,6 +1657,144 @@ button.small,
 .button.small {
   font-size: 0.5em;
 }
+input[type=submit].primary,
+input[type=reset].primary,
+input[type=button].primary,
+button.primary,
+.button.primary {
+  background-color: #ba2e5d;
+  box-shadow: none;
+  color: #ffffff !important;
+}
+input[type=submit].primary:hover,
+input[type=reset].primary:hover,
+input[type=button].primary:hover,
+button.primary:hover,
+.button.primary:hover {
+  background-color: #c63163;
+}
+input[type=submit].primary:active,
+input[type=reset].primary:active,
+input[type=button].primary:active,
+button.primary:active,
+.button.primary:active {
+  background-color: #ae2b57;
+}
+input[type=submit].secondary,
+input[type=reset].secondary,
+input[type=button].secondary,
+button.secondary,
+.button.secondary {
+  background-color: #6c757d;
+  box-shadow: none;
+  color: #ffffff !important;
+}
+input[type=submit].secondary:hover,
+input[type=reset].secondary:hover,
+input[type=button].secondary:hover,
+button.secondary:hover,
+.button.secondary:hover {
+  background-color: #737d85;
+}
+input[type=submit].secondary:active,
+input[type=reset].secondary:active,
+input[type=button].secondary:active,
+button.secondary:active,
+.button.secondary:active {
+  background-color: #656d75;
+}
+input[type=submit].success,
+input[type=reset].success,
+input[type=button].success,
+button.success,
+.button.success {
+  background-color: #48c774;
+  box-shadow: none;
+  color: #ffffff !important;
+}
+input[type=submit].success:hover,
+input[type=reset].success:hover,
+input[type=button].success:hover,
+button.success:hover,
+.button.success:hover {
+  background-color: #54cb7d;
+}
+input[type=submit].success:active,
+input[type=reset].success:active,
+input[type=button].success:active,
+button.success:active,
+.button.success:active {
+  background-color: #3cc36b;
+}
+input[type=submit].info,
+input[type=reset].info,
+input[type=button].info,
+button.info,
+.button.info {
+  background-color: #209cee;
+  box-shadow: none;
+  color: #ffffff !important;
+}
+input[type=submit].info:hover,
+input[type=reset].info:hover,
+input[type=button].info:hover,
+button.info:hover,
+.button.info:hover {
+  background-color: #2ea2ef;
+}
+input[type=submit].info:active,
+input[type=reset].info:active,
+input[type=button].info:active,
+button.info:active,
+.button.info:active {
+  background-color: #1296ed;
+}
+input[type=submit].warning,
+input[type=reset].warning,
+input[type=button].warning,
+button.warning,
+.button.warning {
+  background-color: #ffdd57;
+  box-shadow: none;
+  color: #3c3b3b !important;
+}
+input[type=submit].warning:hover,
+input[type=reset].warning:hover,
+input[type=button].warning:hover,
+button.warning:hover,
+.button.warning:hover {
+  background-color: #ffe066;
+}
+input[type=submit].warning:active,
+input[type=reset].warning:active,
+input[type=button].warning:active,
+button.warning:active,
+.button.warning:active {
+  background-color: #ffda48;
+}
+input[type=submit].danger,
+input[type=reset].danger,
+input[type=button].danger,
+button.danger,
+.button.danger {
+  background-color: #ff3860;
+  box-shadow: none;
+  color: #ffffff !important;
+}
+input[type=submit].danger:hover,
+input[type=reset].danger:hover,
+input[type=button].danger:hover,
+button.danger:hover,
+.button.danger:hover {
+  background-color: #ff476c;
+}
+input[type=submit].danger:active,
+input[type=reset].danger:active,
+input[type=button].danger:active,
+button.danger:active,
+.button.danger:active {
+  background-color: #ff2954;
+}
 input[type=submit].disabled, input[type=submit]:disabled,
 input[type=reset].disabled,
 input[type=reset]:disabled,
@@ -1965,6 +2204,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;
@@ -2036,7 +2286,6 @@ ul.actions.fit.stacked {
     -ms-flex-shrink: 1;
     flex-shrink: 1;
     padding: 1em 0 0 0;
-    text-align: center;
     width: 100%;
   }
   ul.actions:not(.fixed) li > * {
@@ -2402,7 +2651,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;
@@ -2471,7 +2720,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;
@@ -2543,6 +2792,7 @@ header p {
 table {
   margin: 0 0 2em 0;
   width: 100%;
+  word-break: break-word;
 }
 table tbody tr {
   border: solid 1px rgba(160, 160, 160, 0.3);
@@ -2589,24 +2839,135 @@ table.alt tfoot {
   border-top: 0;
 }
 
+/* Styles for responsive tables */
+@media screen and (max-width: 736px) {
+  .responsive table {
+    width: 100%;
+  }
+  .responsive thead {
+    display: none;
+  }
+  .responsive tr:nth-of-type(2n) {
+    background-color: inherit;
+  }
+  .responsive tr td:first-child {
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .responsive tbody td {
+    display: block;
+    text-align: center;
+  }
+  .responsive tbody td:before {
+    content: attr(data-th);
+    display: block;
+    text-align: center;
+  }
+}
+
 /* Portofolio */
-.portfolio_item .image {
+.portfolio_container {
+  padding: 1em 0;
+  float: left;
+  width: 50%;
+}
+.portfolio_container .title {
+  color: #1a1a1a;
+  text-align: center;
+  margin-bottom: 10px;
+}
+@media screen and (max-width: 736px) {
+  .portfolio_container .portfolio_container {
+    display: block;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 1680px) {
+  .portfolio_container .portfolio_container {
+    width: 33.33333%;
+  }
+}
+
+.portfolio_content {
+  position: relative;
+  margin: 1em;
   overflow: hidden;
-  width: 100%;
-  border-radius: 10px;
 }
-.portfolio_item .image img {
+.portfolio_content a {
-  -moz-transition: -moz-transform 0.2s ease-out;
+  border: unset;
-  -webkit-transition: -webkit-transform 0.2s ease-out;
+  margin-bottom: 0;
-  -ms-transition: -ms-transform 0.2s ease-out;
-  transition: transform 0.2s ease-out;
-  width: 100%;
 }
-.portfolio_item .image:hover img {
+.portfolio_content .portfolio_content-overlay {
-  -moz-transform: scale(1.05);
+  background: rgba(0, 0, 0, 0.7);
-  -webkit-transform: scale(1.05);
+  position: absolute;
-  -ms-transform: scale(1.05);
+  height: calc(100% - 0.5em);
-  transform: scale(1.05);
+  width: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  opacity: 0;
+  -webkit-transition: all 0.4s ease-in-out 0s;
+  -moz-transition: all 0.4s ease-in-out 0s;
+  transition: all 0.4s ease-in-out 0s;
+  border-radius: 0.375em;
+}
+.portfolio_content:hover .portfolio_content-overlay {
+  opacity: 1;
+}
+.portfolio_content:hover .portfolio_content-details {
+  top: 50%;
+  left: 50%;
+  opacity: 1;
+}
+
+.portfolio_content-image {
+  width: 100%;
+  border-radius: 0.375em;
+}
+
+.portfolio_content-details {
+  position: absolute;
+  text-align: center;
+  padding-left: 1em;
+  padding-right: 1em;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  opacity: 0;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  -webkit-transition: all 0.3s ease-in-out 0s;
+  -moz-transition: all 0.3s ease-in-out 0s;
+  transition: all 0.3s ease-in-out 0s;
+}
+.portfolio_content-details h3 {
+  color: #fff;
+  font-weight: 500;
+  letter-spacing: 0.15em;
+  margin-bottom: 0.5em;
+  text-transform: uppercase;
+}
+.portfolio_content-details p {
+  color: #fff;
+  font-size: 0.8em;
+}
+
+.fadeIn-bottom {
+  top: 80%;
+}
+
+.fadeIn-top {
+  top: 20%;
+}
+
+.fadeIn-left {
+  left: 20%;
+}
+
+.fadeIn-right {
+  left: 80%;
 }
 
 /* Banner */
@@ -2711,11 +3072,13 @@ table.alt tfoot {
   font-size: inherit;
   letter-spacing: 0em;
   line-height: inherit;
-  margin-top: 1em;
+  margin: 1em 0;
   text-transform: initial;
+  padding: 0 1em;
 }
 #features header h3 {
   margin-top: 0em;
+  padding: 0 1em;
 }
 
 /* Logo */
@@ -2734,6 +3097,11 @@ table.alt tfoot {
   text-decoration: none;
   border-bottom: 0;
 }
+#header .logo a .logo-img {
+  padding: 0.25em 0 !important;
+  vertical-align: middle;
+  height: 3em;
+}
 @media screen and (max-width: 736px) {
   #header .logo {
     font-size: 1em;
@@ -2776,6 +3144,7 @@ table.alt tfoot {
   line-height: normal;
   background-color: rgb(230, 230, 230);
   box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15) !important;
+  z-index: 10002;
 }
 #header .dropdown li ul li a {
   font-family: "Raleway", Helvetica, sans-serif;
@@ -2855,14 +3224,19 @@ ul.menulink > li > ul {
   list-style: none;
   font-family: "Raleway", Helvetica, sans-serif;
   padding: 0.1em 0 0 0;
-  margin: 0em;
   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 {
@@ -2870,21 +3244,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 * {
@@ -2897,48 +3262,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 */
@@ -2990,7 +3315,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;
@@ -3009,7 +3334,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;
@@ -3454,6 +3779,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);
@@ -3499,3 +3832,31 @@ CSS Styles for Page Toc Plugin
   position: sticky;
   top: 3.5em;
 }
+
+/*
+Future2021
+Grav Theme by Pedro Moreno
+
+CSS Styles for Langswitcher Plugin 
+*/
+#menu li.langswitcher {
+  margin-left: 0em !important;
+}
+
+#header .main ul li.langswitcher {
+  margin-left: 0em !important;
+}
+
+#header .main ul li.langswitcher > a {
+  text-decoration: none;
+  border-bottom: 0;
+  color: #838383;
+  text-indent: 0em;
+  text-align: center;
+}
+
+@media screen and (max-width: 736px) {
+  #header .main ul li.langswitcher {
+    display: none;
+  }
+}

assets/css/misc.css

@@ -37,22 +37,6 @@
     visibility: visible;
   }
 
-/* Styles for Langswitcher plugin */
-
-#header .main ul li.langswitcher {
-  margin-left: 0em !important;
-}
-#header .main ul li.langswitcher > a {
-      text-decoration: none;
-      border-bottom: 0;
-      color: #838383;
-      text-indent: 0em;
-      text-align: center;}
-
-@media screen and (max-width: 736px) {
-    #header .main ul li.langswitcher {
-      display: none; } }
-
 /* Styles to show Font Awesome 5 Free in shortcode core notices */
 
 .sc-notice > div:before {

assets/js/custom.js

@@ -1,14 +0,0 @@
-var btn = $('#back-to-top');
-
-$(window).scroll(function() {
-  if ($(window).scrollTop() > 300) {
-    btn.addClass('show');
-  } else {
-    btn.removeClass('show');
-  }
-});
-
-btn.on('click', function(e) {
-  e.preventDefault();
-  $('html, body').animate({scrollTop:0}, '300');
-});

assets/js/main.js

@@ -92,4 +92,21 @@
 				$intro.prependTo($sidebar);
 			});
 		
+	// Backt to top
+	
+		var btn = $('#back-to-top');
+
+		$(window).scroll(function() {
+			if ($(window).scrollTop() > 300) {
+			btn.addClass('show');
+			} else {
+			btn.removeClass('show');
+			}
+		});
+		
+		btn.on('click', function(e) {
+			e.preventDefault();
+			$('html, body').animate({scrollTop:0}, '300');
+		});
+
 })(jQuery);

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/_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%;
@@ -73,7 +85,6 @@
 					@include vendor('flex-grow', '1');
 					@include vendor('flex-shrink', '1');
 					padding: (_size(element-margin) * 0.5) 0 0 0;
-					text-align: center;
 					width: 100%;
 
 					> * {

assets/sass/components/_box.scss

@@ -18,6 +18,67 @@
 			padding: 0.5em;
 		}
 
+		&.primary {
+			background-color: _palette(accent);
+			box-shadow: none;
+			color: _palette(bg) !important;
+
+			h1,h2,h3,h4,h5,h6 {
+				color: _palette(bg) !important;
+			}
+		}
+
+		&.secondary {
+			background-color: _palette(secondary);
+			box-shadow: none;
+			color: _palette(bg-alt) !important;
+
+			h1,h2,h3,h4,h5,h6 {
+				color: _palette(bg-alt) !important;
+			}
+			
+		}
+
+		&.success {
+			background-color: _palette(success);
+			box-shadow: none;
+			color: _palette(bg-alt) !important;
+
+			h1,h2,h3,h4,h5,h6 {
+				color: _palette(bg-alt) !important;
+			}
+		}
+
+		&.info {
+			background-color: _palette(info);
+			box-shadow: none;
+			color: _palette(bg-alt) !important;
+
+			h1,h2,h3,h4,h5,h6 {
+				color: _palette(bg-alt) !important;
+			}
+		}
+
+		&.warning {
+			background-color: _palette(warning);
+			box-shadow: none;
+			color: _palette(fg-bold) !important;
+
+			h1,h2,h3,h4,h5,h6 {
+				color: _palette(fg-bold) !important;
+			}
+		}
+
+		&.danger {
+			background-color: _palette(danger);
+			box-shadow: none;
+			color: _palette(bg-alt) !important;
+
+			h1,h2,h3,h4,h5,h6 {
+				color: _palette(bg-alt) !important;
+			}
+		}
+
 		&.alt {
 			border: 0;
 			border-radius: 0;

assets/sass/components/_button.scss

@@ -71,7 +71,88 @@
 		&.small {
 			font-size: 0.5em;
 		}
+		&.primary {
+			background-color: _palette(accent);
+			box-shadow: none;
+			color: _palette(bg) !important;
 
+			&:hover {
+				background-color: lighten(_palette(accent), 3);
+			}
+
+			&:active {
+				background-color: darken(_palette(accent), 3);
+			}
+		}
+
+		&.secondary {
+			background-color: _palette(secondary);
+			box-shadow: none;
+			color: _palette(bg) !important;
+
+			&:hover {
+				background-color: lighten(_palette(secondary), 3);
+			}
+
+			&:active {
+				background-color: darken(_palette(secondary), 3);
+			}
+		}
+		&.success {
+			background-color: _palette(success);
+			box-shadow: none;
+			color: _palette(bg) !important;
+
+			&:hover {
+				background-color: lighten(_palette(success), 3);
+			}
+
+			&:active {
+				background-color: darken(_palette(success), 3);
+			}
+		}
+
+		&.info {
+			background-color: _palette(info);
+			box-shadow: none;
+			color: _palette(bg) !important;
+
+			&:hover {
+				background-color: lighten(_palette(info), 3);
+			}
+
+			&:active {
+				background-color: darken(_palette(info), 3);
+			}
+		}
+
+		&.warning {
+			background-color: _palette(warning);
+			box-shadow: none;
+			color: _palette(fg-bold) !important;
+
+			&:hover {
+				background-color: lighten(_palette(warning), 3);
+			}
+
+			&:active {
+				background-color: darken(_palette(warning), 3);
+			}
+		}
+
+		&.danger {
+			background-color: _palette(danger);
+			box-shadow: none;
+			color: _palette(bg) !important;
+
+			&:hover {
+				background-color: lighten(_palette(danger), 3);
+			}
+
+			&:active {
+				background-color: darken(_palette(danger), 3);
+			}
+		}
 		&.disabled,
 		&:disabled {
 			@include vendor('pointer-events', 'none');

assets/sass/components/_dropdownmenu.scss

@@ -33,7 +33,7 @@
                 line-height: normal;
                 background-color: _palette(bg-dropdown);
                 box-shadow: 0 0.05rem 1rem _palette(border-dropdown) !important;
-                
+                z-index: _misc(z-index-base) + 2;
                 li {
                     
                     a {

assets/sass/components/_features.scss

@@ -9,11 +9,13 @@
                 font-size: inherit;
                 letter-spacing: _font(no-kerning);
                 line-height: inherit;
-                margin-top: 1em;
+                margin: 1em 0;
                 text-transform: initial;
+                padding: 0 1em;
             }
             h3 {
                 margin-top: 0em;
+                padding: 0 1em;
             }
         }
                     

assets/sass/components/_logo.scss

@@ -14,8 +14,15 @@
             letter-spacing: 0.25em;
             text-decoration: none;
             border-bottom: 0;
+
+            .logo-img {
+                padding: 0.25em 0 !important;
+                vertical-align: middle;
+                height: 3em;
+            }
         }
         
+
     @include breakpoint('<=small') {
     font-size: 1em;
     }

assets/sass/components/_portfolio.scss

@@ -1,25 +1,114 @@
 
 /* Portofolio */
 
-	.portfolio_item {
+.portfolio_container{
+    padding: 1em 0;
+    float: left;
+    width: 50%;
+
+    .title{
+        color: #1a1a1a;
+        text-align: center;
+        margin-bottom: 10px;
+    }
+
+    @include breakpoint('<=small') {
+        .portfolio_container{
+            display: block;
+            width: 100%;
+        }
+    }
+    @include breakpoint('<=xlarge') {
+        .portfolio_container{
+            width: 33.33333%;
+        }
+    }
+}
 
 
+.portfolio_content {
+    position: relative;
+    margin: 1em;
+    overflow: hidden;
 
-		.image {
+    a {
-			overflow: hidden;
+        border: unset;
-			width: 100%;
+        margin-bottom: 0;
-			border-radius:10px;
+    }
 
+    .portfolio_content-overlay {
+        background: rgba(0,0,0,0.7);
+        position: absolute;
+        height: calc(100% - 0.5em);
+        width: 100%;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        opacity: 0;
+        -webkit-transition: all 0.4s ease-in-out 0s;
+        -moz-transition: all 0.4s ease-in-out 0s;
+        transition: all 0.4s ease-in-out 0s;
+        border-radius: 0.375em;
+    }
+    &:hover {
+        .portfolio_content-overlay{
+            opacity: 1;
+        }
+        .portfolio_content-details{
+            top: 50%;
+            left: 50%;
+            opacity: 1;
+        }
+    }
+}
 
-			img {
+.portfolio_content-image{
-				@include vendor('transition', 'transform #{_duration(transition)} ease-out');
+    width: 100%;
-				width: 100%;
+    border-radius: 0.375em;
-			}
+}
 
-			&:hover {
+.portfolio_content-details {
-				img {
+    position: absolute;
-					@include vendor('transform', 'scale(1.05)');
+    text-align: center;
-				}
+    padding-left: 1em;
-			}
+    padding-right: 1em;
-		}
+    width: 100%;
-	}
+    top: 50%;
+    left: 50%;
+    opacity: 0;
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    -webkit-transition: all 0.3s ease-in-out 0s;
+    -moz-transition: all 0.3s ease-in-out 0s;
+    transition: all 0.3s ease-in-out 0s;
+
+    h3 {
+        color: #fff;
+        font-weight: 500;
+        letter-spacing: 0.15em;
+        margin-bottom: 0.5em;
+        text-transform: uppercase;
+    }
+
+    p {
+        color: #fff;
+        font-size: 0.8em;
+    }
+}
+
+.fadeIn-bottom{
+    top: 80%;
+}
+.fadeIn-top{
+top: 20%;
+}
+
+.fadeIn-left{
+left: 20%;
+}
+
+.fadeIn-right{
+left: 80%;
+}

assets/sass/components/_sidebarmenu.scss

@@ -20,32 +20,30 @@ ul.menulink > li > ul
     list-style: none;
     font-family: _font(family-heading);
     padding: 0.1em 0 0 0;
-    margin: 0em;
     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 +55,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;
 }

assets/sass/components/_table.scss

@@ -14,6 +14,7 @@
 	table {
 		margin: 0 0 _size(element-margin) 0;
 		width: 100%;
+		word-break: break-word;
 
 		tbody {
 			tr {
@@ -79,3 +80,33 @@
 			}
 		}
 	}
+
+/* Styles for responsive tables */
+	
+.responsive {
+
+	@include breakpoint('<=small') {
+		table {
+			width:100%;
+		}
+		thead {
+			display: none;
+		}
+		tr:nth-of-type(2n) {
+			background-color: inherit;
+		}
+		tr td:first-child {
+			background: _palette(bg-alt);
+			font-weight:_font(weight-bold);
+		}
+		tbody td {
+			display: block;
+			text-align:center;
+		}
+		tbody td:before {
+			content: attr(data-th);
+			display: block;
+			text-align: center;
+		}
+	}
+}

assets/sass/grav-plugins/_langswitcher.scss

@@ -0,0 +1,24 @@
+/*
+Future2021
+Grav Theme by Pedro Moreno
+
+CSS Styles for Langswitcher Plugin 
+*/
+
+#menu  li.langswitcher {
+    margin-left: 0em !important;
+}
+
+#header .main ul li.langswitcher {
+    margin-left: 0em !important;
+  }
+#header .main ul li.langswitcher > a {
+    text-decoration: none;
+    border-bottom: 0;
+    color: #838383;
+    text-indent: 0em;
+    text-align: center;}
+
+@media screen and (max-width: 736px) {
+    #header .main ul li.langswitcher {
+    display: none; } }

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;

assets/sass/libs/_breakpoints.scss

@@ -4,7 +4,7 @@
 
 	/// Breakpoints.
 	/// @var {list}
-	$breakpoints: () !global;
+	//$breakpoints: () !global;
 
 // Mixins.
 

assets/sass/libs/_html-grid.scss

@@ -1,16 +1,19 @@
 // html-grid.scss v1.0 | @ajlkn | MIT licensed */
 
+@use 'sass:math';
+
 // Mixins.
 
 	/// Initializes the current element as an HTML grid.
 	/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
 	/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
+
 	@mixin html-grid($gutters: 1.5em, $suffix: '') {
 
 		// Initialize.
 			$cols: 12;
 			$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
-			$unit: calc(100% / $cols);
+			$unit: math.div(100%, $cols);
 
 			// Suffixes.
 				$suffixes: null;
@@ -60,6 +63,15 @@
 				}
 
 			// Alignment.
+				&.aln-between {
+					justify-content: space-between;
+				}
+				&.aln-around {
+					justify-content: space-around;
+				}
+				&.aln-evenly {
+					justify-content: space-evenly;
+				}
 				&.aln-left {
 					justify-content: flex-start;
 				}

assets/sass/libs/_vars.scss

@@ -45,5 +45,10 @@ $palette: (
 		border-bg:					rgba(160,160,160,0.075),
 		border-alt:					rgba(160,160,160,0.65),
 		border-dropdown:			rgba(0, 0, 0, 0.15),
-		accent:						#ba2e5d
+		accent:						#ba2e5d,
+		secondary:					#6c757d,
+		success: 					#48c774,
+		info:	 					#209cee,
+		warning: 					#ffdd57,
+		danger:						#ff3860
 	);

assets/sass/main.scss

@@ -4,7 +4,7 @@
 @import 'libs/vendor';
 @import 'libs/breakpoints';
 @import 'libs/html-grid';
-@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');
 
 /*
 	Future Imperfect by HTML5 UP
@@ -67,3 +67,4 @@
 // Grav Plugins.
 	
 	@import 'grav-plugins/page-toc.scss';
+	@import 'grav-plugins/langswitcher';

blueprints.yaml

@@ -1,15 +1,15 @@
 name: Future 2021
 slug: future2021
 type: theme
-version: 1.2.1
+version: 2.1.2
 description: Grav Future Imperfect by HTML5 UP (Version 2021)
 icon:  microchip
 author:
   name: Pedro Moreno
-  email: webmaster@juanvillen.es
+  email: pmoreno@pmdesign.dev
   url: 
 homepage: https://github.com/pmoreno-rodriguez/grav-theme-future2021
-demo: http://future.juanvillen.es
+demo: https://future2021.pmdesign.dev
 keywords: future imperfect, html5up, theme, core, modern, fast, responsive, html5, css3
 bugs: https://github.com/pmoreno-rodriguez/grav-theme-future2021/issues
 license: CC-BY-3.0
@@ -45,6 +45,17 @@ form:
       validate:
         type: bool
     
+    google_fonts_local:
+      type: toggle
+      label: FUTURE.ADMIN.THEME.GOOGLE_FONTS.LOCAL
+      highlight: 0
+      default: 0
+      options:
+          1: PLUGIN_ADMIN.ENABLED
+          0: PLUGIN_ADMIN.DISABLED
+      validate:
+          type: bool
+
     header_section:
       type: fieldset
       collapsible: true
@@ -84,10 +95,39 @@ form:
           accept:
             - image/*
         
+        type_logo_header:
+          type: radio
+          label: FUTURE.ADMIN.THEME.TYPE_LOGO_HEADER
+          help: FUTURE.ADMIN.THEME.TYPE_LOGO_HEADER_HELP
+          default: text
+          options:
+              image: FUTURE.ADMIN.THEME.TYPE_LOGO_HEADER_IMAGE
+              text: FUTURE.ADMIN.THEME.TYPE_LOGO_HEADER_TEXT
+              both: FUTURE.ADMIN.THEME.TYPE_LOGO_HEADER_BOTH
+
         slogan:
           type: text
           label: FUTURE.ADMIN.THEME.SLOGAN
         
+        custom_css:
+          type: toggle
+          label: FUTURE.ADMIN.THEME.CUSTOM_CSS
+          help: FUTURE.ADMIN.THEME.CUSTOM_CSS_HELP
+          highlight: 1
+          default: true
+          options:
+              1: Enabled
+              0: Disabled
+        custom_js:
+          type: toggle
+          label: FUTURE.ADMIN.THEME.CUSTOM_JS
+          help: FUTURE.ADMIN.THEME.CUSTOM_JS_HELP
+          highlight: 1
+          default: true
+          options:
+              1: Enabled
+              0: Disabled 
+        
         menu_options:
           type: section 
           title: FUTURE.ADMIN.THEME.MENU.TITLE

blueprints/portfolio.yaml

@@ -78,6 +78,21 @@ form:
             Effects_title:
               type: spacer
               title: FUTURE.ADMIN.PORTFOLIO.OPTIONS.EFFECTS_TITLE
+            header.overlay_hover_effect:
+              type: select
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.LABEL
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.HELP
+              default: fadeIn-bottom
+              size: medium
+              options:
+                fadeIn-bottom: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_BOTTOM
+                fadeIn-top: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_TOP
+                fadeIn-left: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_LEFT
+                fadeIn-right: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_RIGHT
+                fadeIn-top fadeIn-right: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_TOP_RIGHT
+                fadeIn-top fadeIn-left: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_TOP_LEFT
+                fadeIn-bottom fadeIn-right: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_BOTTOM_RIGHT
+                fadeIn-bottom fadeIn-left: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_BOTTOM_LEFT
             header.open_effect:
               type: select
               label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OPEN_EFFECT.LABEL

future2021.php

@@ -4,11 +4,39 @@ namespace Grav\Theme;
 use Grav\Common\Grav;
 use Grav\Common\Theme;
 
+/**
+ * Future2021 Theme
+ *
+ * Class Future2021
+ *
+ * @category Extensions
+ * @package  Grav\Theme
+ * @author   Pedro Moreno <https://github.com/pmoreno-rodriguez>
+ * @license  http://www.opensource.org/licenses/mit-license.html MIT License
+ * @link     https://github.com/pmoreno-rodriguez/grav-theme-future2021
+ */
+
+
 class Future2021 extends Theme
 {
-    public function onThemeInitialized()
+    public function onTwigSiteVariables ()
     {
+        $themeConfig = $this->config->get('themes.future2021');
 
+        // Add custom.css and custom.js assets if they exists
+
+        if (isset($themeConfig['custom_css']) && $themeConfig['custom_css'] && file_exists(__DIR__ . '/assets/css/custom.css')) {
+            $this->grav['assets']->addCss('theme://assets/css/custom.css', ['priority' => 5]);
+        }
+
+        if (isset($themeConfig['custom_js']) && $themeConfig['custom_js'] && file_exists(__DIR__ . '/assets/js/custom.js')) {
+            $this->grav['assets']->addJs('theme://assets/js/custom.js', ['group' => 'bottom', 'priority' => 15]);
+        }
+    }
+
+    public function onShortcodeHandlers()
+    {
+        $this->grav['shortcode']->registerAllShortcodes(__DIR__ . '/shortcodes');
     }
 
     // Add images to twig template paths to allow inclusion of SVG files

languages.yaml

@@ -10,7 +10,16 @@ en:
         CUSTOM_LOGO: Custom Logo
         CUSTOM_LOGO_DESCRIPTION: Will be used instead of default logo `theme://images/grav-logo.svg`
         CUSTOM_LOGO_MOBILE: Mobile Custom Logo
+        TYPE_LOGO_HEADER: 'Show logo/text in header'
+        TYPE_LOGO_HEADER_HELP: Choose how to display the logo in the header
+        TYPE_LOGO_HEADER_IMAGE: Image
+        TYPE_LOGO_HEADER_TEXT: Text
+        TYPE_LOGO_HEADER_BOTH: Both
         SLOGAN: Slogan
+        CUSTOM_CSS: Load Custom CSS
+        CUSTOM_CSS_HELP: Load custom CSS styles from theme://assets/css/custom.css
+        CUSTOM_JS: Load Custom JS
+        CUSTOM_JS_HELP: Load custom JS from theme://assets/css/custom.js
         MENU:
           TITLE: Top Menu Configuration
           LANGSWITCHER: Enable Langswitcher icon
@@ -24,6 +33,8 @@ en:
         BLOG_PAGE_HELP: The route to the blog page when working with blog sidebar
         SIDEBAR: Show sidebar on non-editable pages
         SIDEBAR_HELP: Show sidebar on pages like Offline, SimpleSearch Results, Error, etc.
+        GOOGLE_FONTS:
+          LOCAL: Use locally hosted Google Fonts
         MINIPOSTS: Show miniposts in sidebar
         MINIPOSTS_NUMBER: Miniposts number to show
         MINIPOSTS_NUMBER_DESCRIPTION: Number of miniposts that will be showed in sidebar
@@ -164,6 +175,17 @@ en:
           ACTIONS_TITLE: Actions
           STYLING_TITLE: Styling
           BEHAVIOR_TITLE: Behaviors
+          OVERLAY_HOVER_EFFECT:
+            LABEL: Overlay effect on hover
+            HELP: Set the hover effect when the mouse is over an image
+            FADEIN_BOTTOM: Fade in bottom
+            FADEIN_TOP: Fade in top
+            FADEIN_LEFT: Fade in left
+            FADEIN_RIGHT: Fade in right
+            FADEIN_TOP_RIGHT: Fade in top right
+            FADEIN_TOP_LEFT: Fade in top left
+            FADEIN_BOTTOM_RIGHT: Fade in bottom right
+            FADEIN_BOTTOM_LEFT: Fade in bottom left
           OPEN_EFFECT:
             LABEL: Open Effect
             ZOOM: Zoom
@@ -228,7 +250,12 @@ en:
       PAGINATION:
         PREVIOUS: Previous
         NEXT: Next
-
+    DOWNLOADS:
+      TH_NAME: Name
+      TH_SIZE: Size
+      TH_MODIFIED: Modified
+      TH_DOWNLOAD: Download
+      TD_BUTTON: Download
     SIDEBAR:
       SIMPLE_SEARCH:
         HEADLINE: Search
@@ -249,6 +276,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
@@ -268,7 +297,16 @@ de:
         CUSTOM_LOGO: Benutzerdefiniertes Logo
         CUSTOM_LOGO_DESCRIPTION: Dieses Logo wird anstelle des Standardlogos `theme://images/grav-logo.svg` verwendet
         CUSTOM_LOGO_MOBILE: Benutzerdefiniertes Logo für Mobilgeräte
+        TYPE_LOGO_HEADER: 'Logo/Text in der Kopfzeile anzeigen'
+        TYPE_LOGO_HEADER_HELP: Wählen Sie aus, wie das Logo in der Kopfzeile angezeigt werden soll
+        TYPE_LOGO_HEADER_IMAGE: Bild
+        TYPE_LOGO_HEADER_TEXT: Text
+        TYPE_LOGO_HEADER_BOTH: Beide
         SLOGAN: Motto
+        CUSTOM_CSS: Benutzerdefiniertes CSS laden
+        CUSTOM_CSS_HELP: Benutzerdefinierte CSS-Stile aus theme://assets/css/custom.css laden
+        CUSTOM_JS: Benutzerdefiniertes JS laden
+        CUSTOM_JS_HELP: Benutzerdefiniertes JS aus theme://assets/css/custom.js laden
         MENU:
           TITLE: Menü-Konfiguration
           LANGSWITCHER: Sprachauswahl aktivieren
@@ -282,6 +320,8 @@ de:
         BLOG_PAGE_HELP: Der Pfad zur Blog-Seite wenn die Blog-Seitenleiste aktiv ist
         SIDEBAR: Seitenleiste auf nicht bearbeitbaren Seiten anzeigen
         SIDEBAR_HELP: Seitenleiste auf Seiten wie Offline, SimpleSearch-Ergebnisse, Fehler usw. anzeigen.
+        GOOGLE_FONTS:
+          LOCAL: Verwenden Sie lokal gehostete Google Fonts
         MINIPOSTS: Miniposts in der Seitenleiste zeigen
         MINIPOSTS_NUMBER: Anzahl der anzuzeigenden Miniposts
         MINIPOSTS_NUMBER_DESCRIPTION: Anzahl der in der Seitenleiste anzuzeigenden Miniposts
@@ -419,6 +459,17 @@ de:
           ACTIONS_TITLE: Aktionen
           STYLING_TITLE: Aussehen
           BEHAVIOR_TITLE: Verhalten
+          OVERLAY_HOVER_EFFECT:
+            LABEL: Overlay-Effekt beim Hover
+            HELP: Legen Sie den Hover-Effekt fest, wenn sich die Maus über einem Bild befindet
+            FADEIN_BOTTOM: Unten einblenden
+            FADEIN_TOP: Oben einblenden
+            FADEIN_LEFT: Links einblenden
+            FADEIN_RIGHT: Rechts einblenden
+            FADEIN_TOP_RIGHT: Oben rechts einblenden
+            FADEIN_TOP_LEFT: Oben links einblenden
+            FADEIN_BOTTOM_RIGHT: Unten rechts einblenden
+            FADEIN_BOTTOM_LEFT: Unten links einblenden
           OPEN_EFFECT:
             LABEL: Effekt beim Öffnen
             ZOOM: zoomen
@@ -483,7 +534,12 @@ de:
       PAGINATION:
         PREVIOUS: Vorherige
         NEXT: Nächste
-
+    DOWNLOADS:
+       TH_NAME: Name
+       TH_SIZE: Größe
+       TH_MODIFIED: Geändert
+       TH_DOWNLOAD: Herunterladen
+       TD_BUTTON: Herunterladen
     SIDEBAR:
       SIMPLE_SEARCH:
         HEADLINE: Suche
@@ -504,6 +560,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
@@ -523,7 +581,16 @@ es:
         CUSTOM_LOGO: Logo personalizado
         CUSTOM_LOGO_DESCRIPTION: Este logo se usará en lugar del log por defecto `theme://images/grav-logo.svg`
         CUSTOM_LOGO_MOBILE: Logo personalizado para dispositivos móviles
+        TYPE_LOGO_HEADER: 'Mostrar logo/texto en el encabezado'
+        TYPE_LOGO_HEADER_HELP: Elige cómo quieres que aparezca el logo en el encabezado.
+        TYPE_LOGO_HEADER_IMAGE: Imagen
+        TYPE_LOGO_HEADER_TEXT: Texto
+        TYPE_LOGO_HEADER_BOTH: Ambos
         SLOGAN: Slogan
+        CUSTOM_CSS: Cargar CSS personalizado
+        CUSTOM_CSS_HELP: Carga los estilos CSS personalizados desde theme://assets/css/custom.css
+        CUSTOM_JS: Cargar JS personalizado
+        CUSTOM_JS_HELP: Carga JS personalizado desde theme://assets/css/custom.js
         MENU:
           TITLE: Configuración del Menú Superior
           LANGSWITCHER: Habilitar icono Idioma
@@ -537,6 +604,8 @@ es:
         BLOG_PAGE_HELP: Ruta de la página de Blog cuando funciona con el blog de barra lateral
         SIDEBAR: Mostrar barra lateral en página no editables
         SIDEBAR_HELP: Mostrar barra lateral en páginas como Offline, SimpleSearch Results, Error, etc.
+        GOOGLE_FONTS:
+          LOCAL: Usar fuentes de Google alojadas localmente
         MINIPOSTS: Activar Miniposts en la barra lateral
         MINIPOSTS_NUMBER: Número de miniposts a mostrar
         MINIPOSTS_NUMBER_DESCRIPTION: Número de miniposts que se mostrarán en la barra lateral
@@ -677,6 +746,17 @@ es:
           ACTIONS_TITLE: Acciones
           STYLING_TITLE: Estilos
           BEHAVIOR_TITLE: Comportamiento
+          OVERLAY_HOVER_EFFECT:
+            LABEL: Efecto de superposición al pasar el ratón
+            HELP: Establece el efecto de superposición cuando el ratón está sobre una imagen
+            FADEIN_BOTTOM: Fundido inferior
+            FADEIN_TOP: Fundido superior
+            FADEIN_LEFT: Fundido desde la izquierda
+            FADEIN_RIGHT: Fundido desde la derecha
+            FADEIN_TOP_RIGHT: Fundido superior derecha
+            FADEIN_TOP_LEFT: Fundido superior izquierda
+            FADEIN_BOTTOM_RIGHT: Fundido inferior derecha
+            FADEIN_BOTTOM_LEFT: Fundido inferior izquierda
           OPEN_EFFECT:
             LABEL: Efecto de apertura
             ZOOM: Zoom
@@ -741,7 +821,12 @@ es:
       PAGINATION:
         PREVIOUS: Anterior
         NEXT: Siguiente
-
+    DOWNLOADS:
+      TH_NAME: Nombre
+      TH_SIZE: Tamaño
+      TH_MODIFIED: Modificado
+      TH_DOWNLOAD: Descarga
+      TD_BUTTON: Descargar
     SIDEBAR:
       SIMPLE_SEARCH:
         HEADLINE: Buscar
@@ -762,9 +847,297 @@ 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ó
     MISC:
       SHARE_ON: Compartir en
       BACK_TO_TOP: Volver arriba 
+
+nl:
+  FUTURE:
+    ADMIN:
+      THEME:
+        DROPDOWN_MENU: Vervolgkeuzemenu
+        PRODUCTION_MODE: Productiemodus
+        PRODUCTION_MODE_HELP: 'Ingeschakeld: Future weergeven met minified CSS'
+        HEADER: Kop
+        FAVICON: Kies je eigen favicon
+        CUSTOM_LOGO: Aangepast logo
+        CUSTOM_LOGO_DESCRIPTION: Wordt gebruikt in plaats van het standaardlogo `theme://images/grav-logo.svg`
+        CUSTOM_LOGO_MOBILE: Aangepast logo voor mobile
+        TYPE_LOGO_HEADER: 'Logo/tekst weergeven in kop'
+        TYPE_LOGO_HEADER_HELP: Kies de weergave van het logo in de kop
+        TYPE_LOGO_HEADER_IMAGE: Afbeelding
+        TYPE_LOGO_HEADER_TEXT: Tekst
+        TYPE_LOGO_HEADER_BOTH: Beide
+        SLOGAN: Leuze
+        CUSTOM_CSS: Aangepaste CSS laden
+        CUSTOM_CSS_HELP: Laad aangepaste CSS-stijlen van theme://assets/css/custom.css
+        CUSTOM_JS: Aangepaste JS laden
+        CUSTOM_JS_HELP: Laad aangepaste JS van theme://assets/css/custom.js
+        MENU:
+          TITLE: Topmenuconfiguratie
+          LANGSWITCHER: Icoon taalkeuze inschakelen
+          LANGSWITCHER_HELP: Met de taalkeuzeplugin actief en meertaligheid ingesteld voor je website, kun je het taalkeuzeonderdeel in het topmenu in- of uitschakelen.
+          SEARCH: Icoon Zoeken inschakelen
+          SEARCH_HELP: Met de zoekplugin actief kun je het onderdeel Zoeken in het topmenu in- of uitschakelen.
+          LOGIN: Login-icoon inschakelen
+          LOGIN_HELP: Login-icoon in het hoofdmenu in- of uitschakelen om loginstatus weer te geven.
+        BLOG_DEFAULTS: Standaard webloginstellingen
+        BLOG_PAGE: Weblogpagina
+        BLOG_PAGE_HELP: De route naar de webblogpagina tijdens werken met de webblogzijbalk
+        SIDEBAR: Zijbalk tonen op niet-bewerkbare pagina's
+        SIDEBAR_HELP: Zijbalk tonen op pagina's zoals Offline, SimpleSearch resultaten, Foutmelding, etc.
+        GOOGLE_FONTS:
+          LOCAL: Lokaal geïnstalleerde Google Fonts gebruiken
+        MINIPOSTS: Miniposts in zijbalk tonen
+        MINIPOSTS_NUMBER: Aantal miniposts weergeven
+        MINIPOSTS_NUMBER_DESCRIPTION: Welk aantal miniposts weergeven in zijbalk
+        MINIPOSTS_CATEGORY: Miniposts categorie
+        MINIPOSTS_CATEGORY_DESCRIPTION: Stel naam in op minipostscategorie.<br />`Je moet deze naam toevoegen aan Opties->Taxonomie->Categorie`
+        RECENT_POSTS_ENABLED: Recente berichten tonen in zijbalk
+        RECENT_POSTS_NUMBER: Aantal recente berichten
+        RECENT_POSTS_NUMBER_DESCRIPTION: Welk aantal recente berichten weergeven in zijbalk
+        FOOTER: Paginavoet
+        FOOTER_TITLE: Titel paginavoet
+        FOOTER_DESCRIPTION: Beschrijving paginavoet
+        FOOTER_COPYRIGHT: Tekst copyright
+        FOOTER_BUTTON_TEXT: Knoptekst
+        FOOTER_BUTTON_URL: Knop-URL
+        FOOTER_SOCIAL_ENABLE: Iconen inschakelen
+        FOOTER_SOCIAL_STYLE: Icoonstijlen
+        FOOTER_SOCIAL_STYLE_DESCRIPTION: Zoek naar iconen op <a href="https://fontawesome.com/v5/search" target="_blank">https://fontawesome.com/v5/search</a>
+        FOOTER_SOCIAL_STYLE_REGULAR: Regulier
+        FOOTER_SOCIAL_STYLE_SOLID: Solide
+        FOOTER_SOCIAL_STYLE_BRANDS: Merken
+        FOOTER_SOCIAL_ICONS: Sociale Media-iconen
+        FOOTER_SOCIAL_ICONS_LIST: Lijst van iconen
+        FOOTER_SOCIAL_ICON_NAME: Sociaal medium naam
+        FOOTER_SOCIAL_ICON_URL: URL link naar sociale medium
+        FOOTER_SOCIAL_ICON_ICON: Icoon naar sociale medium
+        CUSTOM_MENU_TITLE: 'Aangepaste menuonderdelen'
+        CUSTOM_MENU_ENABLE: 'Aangepaste menuonderdelen inschakelen'
+        CUSTOM_MENU_ENABLE_HELP: 'Bepaalt of aangepaste menuonderdelen in het hoofdmenu worden weergegeven.'
+        CUSTOM_MENU_ITEM_TEXT: 'Tekst'
+        CUSTOM_MENU_ITEM_TEXT_DESCRIPTION: 'Tekstlabel voor menuonderdeel.'
+        CUSTOM_MENU_ITEM_ICON: 'Icoon'
+        CUSTOM_MENU_ITEM_ICON_DESCRIPTION: 'Font Awesome-icoon voor menuonderdeel.'
+        CUSTOM_MENU_ITEM_URL: 'URL'
+        CUSTOM_MENU_ITEM_URL_DESCRIPTION: 'URL voor menuonderdeel.'
+        CUSTOM_MENU_ITEM_TARGET: 'Doel'
+        CUSTOM_MENU_ITEM_TARGET_BLANK: 'In nieuw venster openen'
+        CUSTOM_MENU_ITEM_TARGET_PARENT: 'In bovenliggend venster openen'
+        CUSTOM_MENU_ITEM_TARGET_SELF: 'In huidige venster openen'
+        CUSTOM_MENU_ITEM_TARGET_TOP: 'In volledig applicatievenster openen'
+      DEFAULT:
+        HEADINGS_SECTION: Opties kopteksten
+        CONTENT: Inhoud
+        IMAGE_OPTIONS: Opties afbeeldingen
+        PRIMARY_IMAGE: 
+          LABEL: Primaire afbeelding
+          WIDTH: Breedte
+          HEIGHT: Hoogte
+        SHOW_PAGEIMAGE: Afbeelding weergeven
+        SHOW_PAGEIMAGE_HELP: Primaire afbeelding activeren indien gedefinieerd, anders de eerste media-afbeelding.
+        SHOW_SIDEBAR: Zijbalk weergeven
+        TOC_ENABLED: Inhoudsopgave activeren op grote pagina's.
+        TOC_ENABLED_HELP: Inhoudsopgave activeren op grote pagina's. Page TOC plugin moet geïnstalleerd zijn. 
+        BODY_CLASSES: 'Je kunt nieuwe css-klassen maken voor de body en die hier toevoegen.'
+      MODULAR:
+        BANNER:
+          BANNER_TAB: Banier
+          BANNER_SUBTITLE: Ondertitel
+          BANNER_BUTTON_TEXT: Knoptekst
+          BANNER_BUTTON_URL: Knop-URL
+          BANNER_IMAGE: Afbeelding
+          BANNER_IMAGE_DESCRIPTION: Kies een afbeelding
+        FEATURES:
+          FEATURES_TAB: Kenmerken
+          FEATURES_LAYOUT: Opmaak
+          FEATURES_LAYOUT_TWOCOLS: Medium   = 2 / 1 kolommen
+          FEATURES_LAYOUT_THREECOLS: Standaard  = 3 / 2 / 1 kolommen
+          FEATURES_HEADER: Kenmerken
+          FEATURES_IMAGE: Afbeelding
+          FEATURES_TITLE: Titel
+          FEATURES_TEXT: Tekst
+          FEATURES_BUTTON_TEXT: Knoptekst
+          FEATURES_BUTTON_URL: Knop-UrL
+          FEATURES_BUTTON_URL_TARGET: Open URL in een nieuw venster
+
+      BLOG:
+        BLOG_TAB: Weblog
+        BLOG_CONFIGURATION: Weblogconfiguratie
+        BLOG_ROUTE: Weblogroute
+        BLOG_ROUTE_HELP: De route naar de hoofdweblogpagina die de "Toon ..." configuratie bevat
+        BLOG_CONTENT_TITLE: Inhoudsdefinitie
+        BLOG_CONTENT_ITEMS: Onderdelen
+        BLOG_CONTENT_ITEMS_LIMIT: Maximaal aantal onderdelen
+        BLOG_CONTENT_ITEMS_ORDER_BY: Sorteren op
+        BLOG_CONTENT_ITEMS_ORDER_BY_DATE: Datum
+        BLOG_CONTENT_ITEMS_ORDER_BY_TITLE: Titel
+        BLOG_CONTENT_ITEMS_ORDER_BY_FOLDER: Folder
+        BLOG_CONTENT_ITEMS_ORDER_BY_DEFAULT: Verstekwaarde
+        BLOG_CONTENT_ITEMS_ORDER_DIR: Sorteren
+        BLOG_CONTENT_ITEMS_ORDER_DIR_ASC: Oplopend
+        BLOG_CONTENT_ITEMS_ORDER_DIR_DESC: Aflopend
+        BLOG_CONTENT_ITEMS_BREADCRUMBS: Broodkruimels tonen
+        BLOG_CONTENT_ITEMS_SHOWPAGINATION: Paginatie tonen
+        BLOG_CONTENT_ITEMS_PAGINATION: Paginatie
+        BLOG_CONTENT_ITEMS_URL_TAXONOMY_FILTERS: URL Taxonomiefilters
+        BLOG_CONTENT_SHAREICONS_TITLE: Sociale media-icoontjes
+        BLOG_CONTENT_SHAREICONS: Kies sociale media-icoontjes
+        BLOG_CONTENT_SHAREICONS_HELP: Kies welke sociale media icons you want to display on articles
+      ITEM:
+        ITEM_TAB: Weblogonderdeel
+        ITEM_OPTIONS: Opties
+        ITEM_SUMMARY: Samenvatting van onderdeel
+        ITEM_SUMMARY_ENABLED: Samenvatting ingeschakeld
+        ITEM_SUMMARY_FORMAT: Vorm samenvatting
+        ITEM_SUMMARY_FORMAT_SHORT: Gebruik het eerste scheidingsteken of de tekstomvang
+        ITEM_SUMMARY_FORMAT_LONG: Scheidingsteken wordt genegeerd
+        ITEM_SUMMARY_SIZE: Omvang
+        ITEM_SUMMARY_DELIMITER: Scheidingsteken
+        ITEM_ORDER: Volgorde onderdeel
+        ITEM_SUBTITLE: Ondertitel
+        ITEM_AVATAR: Avatar
+      PORTFOLIO:
+        TAB: Portfolio
+        TITLE: Afbeeldingen portfolio
+        LAYOUT: 
+          LABEL: Opmaak
+          TWOCOLS: Medium   = 2 / 1 kolommen
+          THREECOLS: Standard  = 3 / 2 / 1 kolommen
+        THUMB_WIDTH: Breedte miniatuur
+        THUMB_WIDTH_HELP: Stel breedte voor miniaturen in
+        THUMB_HEIGHT: Hoogte miniatuur
+        THUMB_HEIGHT_HELP: Stel hoogte voor miniaturen in
+        IMAGES: 
+          LABEL: Afbeeldingen
+          IMAGE: Afbeelding
+          IMAGE_TITLE: Titel
+          IMAGE_DESCRIPTION: Beschrijving
+          DESCPOSITION: 
+            LABEL: Positie beschrijving
+            HELP: Globale positionering beschrijving dia's, je kunt voor elke dia een specifieke positie instellen (beneden, boven, links, rechts)
+            BOTTOM: Beneden
+            TOP: Boven
+            LEFT: Links
+            RIGHT: Rechts
+          IMAGE_THUMB: Miniatuur
+        OPTIONS:
+          TAB: Portfolio Opties
+          EFFECTS_TITLE: Uiterlijk & effecten
+          ACTIONS_TITLE: Acties
+          STYLING_TITLE: Stijl
+          BEHAVIOR_TITLE: Gedragingen
+          OVERLAY_HOVER_EFFECT:
+            LABEL: Overlapeffect tijdens zweven
+            HELP: Overlapeffect inschakelen wanneer de aanwijzer boven een afbeelding zweeft.
+            FADEIN_BOTTOM: Fade in van beneden
+            FADEIN_TOP: Fade in van boven
+            FADEIN_LEFT: Fade in van links
+            FADEIN_RIGHT: Fade in van rechts
+            FADEIN_TOP_RIGHT: Fade in rechterbovenhoek
+            FADEIN_TOP_LEFT: Fade in linkerbovenhoek
+            FADEIN_BOTTOM_RIGHT: Fade in rechteronderhoek
+            FADEIN_BOTTOM_LEFT: Fade in linkeronderhoek
+          OPEN_EFFECT:
+            LABEL: Effect bij openen
+            ZOOM: Inzoomen
+            FADE: Fade in
+            NONE: None
+          CLOSE_EFFECT:
+            LABEL: Effect bij sluiten
+            ZOOM: Uitzoomen
+            FADE: Fade out
+            NONE: None
+          SLIDE_EFFECT:
+            LABEL: Dia-effect
+            SLIDE: Glijden
+            ZOOM: Inzoomen
+            FADE: Fade in
+            NONE: None
+          MORE_TEXT: Meer tekst
+          MORE_TEXT_HELP: Meer tekst voor beschrijvingen op mobiele apparaten.
+          MORE_TEXT_DEFAULT: Meer tekst
+          MORE_LENGTH: Meer tekstlengte
+          MORE_LENGTH_HELP: Aantal leestekens weergeven van de beschrijving, voordat de link Meer tekst wordt toegevoegd (alleen mobile). Indien 0 hele beschrijving weergeven.
+          CLOSE_BUTTON: Sluitknop
+          CLOSE_BUTTON_HELP: Sluitknop weergeven of verbergen.
+          TOUCH_NAVIGATION: Aanraaknavigatie
+          TOUCH_NAVIGATION_HELP: Aanraaknavigatie in- of uitschakelen (vegen)
+          TOUCH_AXIS: Aanraken volgt as
+          TOUCH_AXIS_HELP: Afbeelding volgt as bij vegen op mobile.
+          KEYBOARD: Toetsenbordnavigatie
+          KEYBOARD_HELP: Toetsenbordnavigatie in- of uitschakelen
+          CLOSE_OUTSIDE: Sluiten met klik buiten
+          CLOSE_OUTSIDE_HELP: Diavoorstelling sluiten bij klikken buiten de dia.
+          MORE_STARTAT: 'Beginnen op:'
+          MORE_STARTAT_HELP: Begin de diavoorstelling op de gedefinieerde index (0 is de eerste dia). Indien ongedefinieerd begin met de afbeelding, waarop is geklikt.
+          WIDTH: Breedte
+          WIDTH_HELP: 'Standaardbreedte voor inline-elementen en iframes. Je kunt een specifieke afmeting aangeven op elke dia. Gebruik elke gewenste eenheid, bijvoorbeeld 90% of 100vw voor volledige breedte.'
+          HEIGHT: Hoogte
+          HEIGHT_HELP: 'Standaardhoogte voor inline-elementen en iframes. Je kunt een specifieke afmeting aangeven op elke dia. Gebruik elke gewenste eenheid, bijvoorbeeld 90% of 100vw voor volledige hoogte. Bij inline-elementen kan de hoogte op auto worden ingesteld.'
+          LOOP: Herhalen
+          LOOP_HELP: Diavoorstelling herhalen
+          ZOOMABLE: Zoombaar
+          ZOOMABLE_HELP: Zoombaarheid in- of uitschakelen. Je kunt ook `data-zoomable="false"` aan individuele knooppunten toevoegen.
+          DRAGGABLE: Naar volgende of vorige dia slepen met de muis in- of uitschakelen (alleen afbeeldingen en andere inline inhoud). Je kunt ook `data-draggable="false"` aan individuele knooppunten toevoegen.
+          DRAGGABLE_X: Sleeptolerantie X
+          DRAGGABLE_X_HELP: Gevoeligheid slepen links-rechts. Het aantal pixels dat de gebruiker moet slepen, voordat de volgende dia wordt weergegeven.
+          DRAGGABLE_Y: Sleeptolerantie Y
+          DRAGGABLE_Y_HELP: Gevoeligheid slepen op en neer. Het aantal pixels dat de gebruiker moet slepen om de diavoorstelling te sluiten (op 0 instellen om verticaal slepen uit te schakelen).
+          DRAG_AUTO_SNAP: Slepen direct activeren
+          DRAG_AUTO_SNAP_HELP: Indien waar verspringt de diavoorstelling direct naar vorige of volgende dia of wordt de diavoorstelling gesloten, zodra Sleeptolerantie X of Sleeptolerantie Y is bereikt. Anders wordt gewacht op loslaten van de muisknop.
+          PRELOAD: Voorladen
+          PRELOAD_HELP: Voorladen in- of uitschakelen
+
+    BLOG:
+      LISTING_TITLE_CATEGORY: 'Berichten in categorie: '
+      LISTING_TITLE_TAG: 'Berichten met label: '
+      LISTING_TITLE_AUTHOR: 'Berichten geschreven door auteur: '
+      LISTING_TITLE_MONTH: 'Bericht van de maand: '
+      ITEM:
+        CONTINUE_READING: Verder lezen...
+        NEXT_POST: Volgend bericht
+        PREV_POST: Vorig bericht
+      PAGINATION:
+        PREVIOUS: Vorige
+        NEXT: Volgende
+    DOWNLOADS:
+      TH_NAME: Naam
+      TH_SIZE: Bestandsgrootte
+      TH_MODIFIED: Gewijzigd
+      TH_DOWNLOAD: Downloaden
+      TD_BUTTON: Downloaden
+    SIDEBAR:
+      SIMPLE_SEARCH:
+        HEADLINE: Zoeken
+      RELATED_POSTS:
+        HEADLINE: Gerelateerde berichten
+      RANDOM_ARTICLE:
+        HEADLINE: Willekeurig artikel
+        FEELING_LUCKY: Ik waag een gokje!
+      SOME_TEXT_WIDGET:
+        HEADLINE: Een tekstveld
+      TAGS:
+        HEADLINE: Labels
+      POPULAR_TAGS:
+        HEADLINE: Populaire labels
+      RECENT_POSTS:
+        HEADLINE: Recente berichten
+      ARCHIVES:
+        HEADLINE: Archieven
+      SYNDICATE:
+        HEADLINE: Samengevoegd
+      LANGSWITCHER:
+        HEADLINE: Taalkeuze
+    FEATURED: In de schijnwerpers
+    PRIVACY: Door dit formulier te gebruiken ga je akkoord met onze voorwaarden
+    FORM_SUMMARY: Samenvatting van wat je geschreven hebt
+    MISC:
+      SHARE_ON: Delen op
+      BACK_TO_TOP: Terug naar boven

shortcodes/BoxShortcode.php

@@ -0,0 +1,29 @@
+<?php
+
+/**
+* @author Pedro Moreno https://pmdesign.dev
+* @license Public Domain
+* @url https://github.com/pmoreno-rodriguez/grav-theme-future2021
+*/
+
+namespace Grav\Plugin\Shortcodes;
+
+use Thunder\Shortcode\Shortcode\ShortcodeInterface;
+
+class BoxShortcode extends Shortcode
+{
+    public function init()
+    {
+        $this->shortcode->getHandlers()->add('sc-box', function (ShortcodeInterface $sc) {
+
+            $output = $this->grav['twig']->processTemplate(
+                'partials/shortcodes/box.html.twig',
+                [
+                    'shortcode' => $sc,
+                ]
+            );
+
+            return $output;
+        });
+    }
+}

shortcodes/ButtonsShortcode.php

@@ -0,0 +1,72 @@
+<?php
+
+/**
+* @author Pedro Moreno https://pmdesign.dev
+* @license Public Domain
+* @url https://github.com/pmoreno-rodriguez/grav-theme-future2021
+*/
+
+namespace Grav\Plugin\Shortcodes;
+
+use Thunder\Shortcode\Shortcode\ShortcodeInterface;
+
+class ButtonsShortcode extends Shortcode
+{
+    public function init()
+    {
+        $this->shortcode->getHandlers()->add('sc-buttons', function (ShortcodeInterface $sc) {
+            $content = $sc->getContent();
+            $buttons = $this->parseContent($content);
+            $ulclass= $sc->getParameter('ulclass', $sc->getBbCode());
+
+            $output = '<ul class="actions '.$ulclass.'">';
+            foreach ($buttons as $button) {
+                $text = $button['content'] ?? 'Button'; // Get the button content
+                $class = $button['class'] ?? '';
+                $type = $button['type'] ?? 'default';
+                $size = $button['size'] ?? '';
+                $target = $button['target'] ?? '_self';
+                $url = $button['url'] ?? '#';
+
+                $buttonClass = 'button ' . $type . ' ' . $size . ' ' . $class;
+                $output .= '<li><a class="' . $buttonClass . '" href="' . $url . '" target="' . $target . '">' . $text . '</a></li>';
+            }
+            $output .= '</ul>';
+
+            return $output;
+        });
+    }
+
+    private function parseContent($content)
+    {
+        $buttons = [];
+
+        preg_match_all('/\[sc-button(.*?)\](.*?)\[\/sc-button\]/s', $content, $matches, PREG_SET_ORDER);
+
+        foreach ($matches as $match) {
+            $buttonParams = $this->parseButtonParams($match[1]);
+            $buttonParams['content'] = $match[2]; // Save the content in the parameters array
+            $buttons[] = $buttonParams;
+        }
+
+        return $buttons;
+    }
+
+    private function parseButtonParams($paramsString)
+    {
+        $params = [];
+
+        if (is_string($paramsString)) {
+            $matches = [];
+            preg_match_all('/(\w+)\s*=\s*(?:"([^"]*)"|\'([^\']*)\'|(\S+))/', $paramsString, $matches, PREG_SET_ORDER);
+
+            foreach ($matches as $match) {
+                $key = $match[1];
+                $value = $match[2] ?? $match[3] ?? $match[4];
+                $params[$key] = $value;
+            }
+        }
+
+        return $params;
+    }
+}

shortcodes/FlexShortcode.php

@@ -0,0 +1,43 @@
+<?php
+
+/**
+* @author Pedro Moreno https://pmdesign.dev
+* @license Public Domain
+* @url https://github.com/pmoreno-rodriguez/grav-theme-future2021
+*/
+
+namespace Grav\Plugin\Shortcodes;
+
+use Thunder\Shortcode\Shortcode\ShortcodeInterface;
+
+class FlexShortcode extends Shortcode
+{
+    public function init()
+    {
+        $this->shortcode->getHandlers()->add('sc-flex', function (ShortcodeInterface $sc) {
+
+            $hash = $this->shortcode->getId($sc);
+
+            $output = $this->twig->processTemplate(
+                'partials/shortcodes/flex.html.twig', // Twig template for shortcode
+                [
+                    'hash' => $hash,
+                    'section_id' => $sc->getParameter('id','features'), // ID for Section, 'features' is default
+                    'row_class' => 'row gtr-uniform' . $sc->getParameter('class', ''), // Concatenate 'row' with user-provided class
+                    'row_styles' => $sc->getParameter('style',''), // Define inline styles
+                    'columns' => $this->shortcode->getStates($hash),
+                ]
+            );
+
+            return $output;
+        });
+
+        $this->shortcode->getHandlers()->add('column', function (ShortcodeInterface $sc) {
+            // Add column to layout state using parent layout id
+            $hash = $this->shortcode->getId($sc->getParent());
+            $this->shortcode->setStates($hash, $sc);
+
+            return '';
+        });
+    }
+}

templates/components/page-toc.html.twig

@@ -1,16 +1,4 @@
-{% macro toc_loop(items) %}
+{% import 'macros/macros.html.twig' as toc_macros %}
-    {% for item in items %}
-        {% set class = loop.first ? 'first' : loop.last ? 'last' : null %}
-        <li {% if class %}class="{{ class }}"{% endif %}>
-            <a href="{{ item.uri }}">{{ item.label }}</a>
-            {% if item.children|length > 0 %}
-                <ul>
-                    {{ _self.toc_loop(item.children) }}
-                </ul>
-            {% endif %}
-        </li>
-    {% endfor %}
-{% endmacro %}
 
 {% if active or toc_config_var('active') %}
 <div class="page-toc">
@@ -18,7 +6,7 @@
     {% if table_of_contents is not empty %}
         <h3>{{ 'PLUGIN_PAGE_TOC.TABLE_OF_CONTENTS'|t }}</h3>
         <ul>
-            {{ _self.toc_loop(table_of_contents.children) }}
+            {{ toc_macros.toc_loop(table_of_contents.children) }}
         </ul>
     {% endif %}
 </div>

templates/downloads.html.twig

@@ -0,0 +1,59 @@
+{% extends 'partials/base.html.twig' %}
+
+{% block menu %}
+  {% include 'partials/sidebar_right.html.twig' %}
+{% endblock %}
+
+{% block content %}
+  <article class="post">
+    <header>
+      <div class="title">
+        <h1>{{ title }}</h1>
+        {% if subtitle %}
+          <p>{{ subtitle }}</p>
+        {% endif %}
+      </div>
+    </header>
+
+  {% if show_image and image %}
+      <span class="image featured">
+        {{ image.cropZoom(img_width, img_height).loading('lazy').attribute('decoding','async').html(title, title)|raw }}
+      </span>
+  {% endif %}
+
+    {{ page.content|raw }}
+
+    <table class="responsive">
+        <thead>
+            <tr>
+                <th><h3>{{ 'FUTURE.DOWNLOADS.TH_NAME'|t }}</h3></th>
+                <th><h3>{{ 'FUTURE.DOWNLOADS.TH_SIZE'|t }}</h3></th>
+                <th><h3>{{ 'FUTURE.DOWNLOADS.TH_MODIFIED'|t }}</h3></th>
+                <th><h3>{{ 'FUTURE.DOWNLOADS.TH_DOWNLOAD'|t }}</h3></th>
+            </tr>
+        </thead>
+        <tbody>
+        
+        {% for file in page.media.all %}
+            <tr>
+                {% include 'partials/download_item.html.twig' with {file: file} %}
+            </tr>
+        {% endfor %}
+        
+        </tbody>
+        </table>
+
+  </article>
+
+  {% if show_sidebar == false %}
+    <section id="footer" class="align-center">
+      {% include 'partials/sidebar-bits/footer.html.twig' %}
+    </section>
+  {% endif %}
+{% endblock %}
+
+{% block sidebar %}
+{% if show_sidebar == true %}
+  {% include 'partials/sidebar_left.html.twig' %}
+{% endif %}
+{% endblock %}

templates/forms/fields/privacy/privacy.html.twig

@@ -1,38 +0,0 @@
-{% extends "forms/field.html.twig" %}
-
-{% block label %}
-{% endblock %}
-
-{% block input %}
-  {% set id = field.id|default(field.name) ~ '-' ~ key %}
-
-  <div class="{{ form_field_wrapper_classes ?: 'form-input-wrapper' }} {{ field.size }} {{ field.wrapper_classes }}">
-    <input
-      {# required attribute structures #}
-      name="{{ (scope ~ field.name)|fieldName }}"
-      value="{{ field.value ?? '1' }}"
-      type="checkbox"
-      {% if value == field.value ?? '1' %} checked="checked" {% endif %}
-
-      {# input attribute structures #}
-      {% block input_attributes %}
-          id="{{ id|e }}"
-          {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
-          {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
-          {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
-          {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
-          {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
-          {% if required %}required="required"{% endif %}
-          {% if field.tabindex %}tabindex="{{ field.tabindex }}"{% endif %}
-      {% endblock %}
-    />
-    <label style="display:inline;" for="{{ id|e }}">
-      {% if field.markdown %}
-        {{ field.label|t|markdown(false) }}
-      {% else %}
-        {{field.label}}
-      {% endif %}
-      {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
-    </label>
-  </div>
-{% endblock %}

templates/macros/macros.html.twig

@@ -0,0 +1,40 @@
+{# MACRO FOR PAGE-TOC PLUGIN SUPPORT #}
+
+{% macro toc_loop(items) %}
+    {% import _self as toc_macros %}
+    {% for item in items %}
+        {% set class = loop.first ? 'first' : loop.last ? 'last' : null %}
+        <li {% if class %}class="{{ class }}"{% endif %}>
+            <a href="{{ item.uri }}">{{ item.label }}</a>
+            {% if item.children|length > 0 %}
+                <ul>
+                    {{ toc_macros.toc_loop(item.children) }}
+                </ul>
+            {% endif %}
+        </li>
+    {% endfor %}
+{% endmacro %}
+
+{# MACRO FOR TOP MENU NAVIGATION #}
+
+{% macro nav_loop(page) %}
+  {% import _self as nav_macros %}
+  {% for p in page.children.visible %}
+    {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
+    {% set has_visible_children = p.children.visible.count > 0 %}
+    <li>
+      <a href="{{ p.url }}" class="{{ active_page }}">
+        {% if p.header.icon %}
+            <i class="fa fa-{{ p.header.icon }}"></i>
+        {% endif %}
+        {{ p.menu }}
+        {% if has_visible_children %}&nbsp;<i class="fa fa-angle-down"></i>{% endif %}
+      </a>
+      {% if has_visible_children %}
+      <ul>
+        {{ nav_macros.nav_loop(p) }}
+      </ul>
+      {% endif %}
+    </li>
+  {% endfor %}
+{% endmacro %}

templates/macros/topmenu.html.twig

@@ -1,30 +0,0 @@
-{% macro nav_loop(page) %}
-  {% import _self as macros %}
-  {% for p in page.children.visible %}
-    {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
-    {% if p.children.visible.count > 0 %}
-      <li class="{{ current_page }}">
-        <a>
-          {% if p.header.icon %}
-            <i class="fa fa-{{ p.header.icon }}"></i>
-          {% endif %}
-          {{ p.menu }}
-            {% if p.routable ?? false %}&nbsp;<i class="fa fa-angle-down"></i>
-            {% endif %}
-        </a>
-        <ul>
-          {{ macros.nav_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>
-      </li>
-    {% endif %}
-  {% endfor %}
-{% endmacro %}

templates/partials/base.html.twig

@@ -1,8 +1,20 @@
+<!--
+  Future Imperfect by HTML5 UP
+  html5up.net | @ajlkn
+  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+
+  Ported to Grav by Pedro Moreno <https://github.com/pmoreno-rodriguez>
+  https://github.com/pmoreno-rodriguez/grav-theme-future2021
+-->
+
 {# Define global variables #}
 {% set theme_config = attribute(config.themes, config.system.pages.theme) %}
 {% set compress = theme_var('production-mode') ? '.min.css' : '.css' %}
 {% set favicon = theme_config.favicon ? theme_config.favicon|first : { type:'image/png', path: url('theme://images/favicon.png') } %}
 
+{# Set Google Fonts source - Local or Remote#}
+{% set google_fonts = theme_var('google_fonts_local') ? '-local.css' : '-remote.css' %}
+
 {# Set site language and datestamp for pages #}
 {% set lang = grav.language.getActive ?: grav.config.site.default_lang %}
 {% set datestamp = include('partials/page-bits/date.html.twig') %}
@@ -10,9 +22,15 @@
 {# 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.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) %}
 
@@ -38,6 +56,7 @@
       {% do assets.addCss('theme://assets/css/fontawesome-all.min.css',{'rel':'preload','as':'style','onload':'this.rel="stylesheet"'}) %}
       {% do assets.addCss('theme://assets/css/misc.css', 10) %}
       {% do assets.addCss('theme://assets/css/custom.css', 15) %}
+      {% do assets.addCss('theme://assets/css/google-fonts' ~ google_fonts, {'priority': 20}) %}
     {% endblock %}
 
     {% block javascripts %}
@@ -88,8 +107,3 @@
     </div>
   </body>
 </html>
-<!--
-  Future Imperfect by HTML5 UP
-  html5up.net | @ajlkn
-  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
--->

templates/partials/download_item.html.twig

@@ -0,0 +1,19 @@
+{% set datestamp = include('partials/page-bits/date.html.twig') %}
+{% set size = file.size/1024 %}
+{% set unit = "Kb" %}
+{% if size > 1023 %}
+    {% set size = size/1024 %}
+    {% set unit = "Mb" %}
+{% endif %}
+<td>
+    {{ file.filename|regex_replace(['/-/','/_/'], [' ',' ']) }}
+</td>
+<td>
+    {{ size|number_format(2, '.', ',') }}{{ unit }}
+</td>
+<td>
+    {{ datestamp }}
+</td>
+<td>
+    <a href="{{ file.url }}" class="button small" download>{{ 'FUTURE.DOWNLOADS.TD_BUTTON'|t }}</a>
+</td>

templates/partials/header.html.twig

@@ -1,12 +1,18 @@
-{# 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') %}
-
 <header id="header">
-  <div class="logo">
+    
-    <a href="{{ home_url }}">{{ site.title }}</a>
+    <div class="logo">
-  </div>
+      
+      <a href="{{ home_url }}" class="">
+       {% if logoImageHeader == 'image' %}
+        {% include 'partials/logo.html.twig' with {'logo_class': 'logo-img'} %}
+      {% elseif logoImageHeader == 'both' %}
+        {% include 'partials/logo.html.twig' with {'logo_class': 'logo-img'} %}{{ site.title }}
+      {% else %}
+        {{ site.title }}
+      {% endif %}
+      </a>
+    </div>
+  
   <nav class="dropdown">
     {% block header_navigation %}
       {% include 'partials/navigation.html.twig' %}

templates/partials/logo.html.twig

@@ -1,9 +1,7 @@
 {% set logo = theme_var('custom_logo_mobile') ?: theme_var('custom_logo') %}
-<a href="{{ home_url }}" class="logo" rel="nofollow" title="{{ site.title|raw }}">
   {% if logo %}
     {% set logo_file = (logo|first).name %}
-    <img src="{{ url('theme://images/logo/' ~ logo_file) }}" alt="{{ site.title|raw }}"/>
+    <img src="{{ url('theme://images/logo/' ~ logo_file) }}" alt="{{ site.title|raw }}" class="{{ logo_class }}"/>
   {% else %}
     {% include('@images/grav-logo.svg') %}
   {% endif %}
-</a>

templates/partials/metadata.html.twig

@@ -14,7 +14,7 @@
 <meta name="og:title" property="og:title" content="{{ page.title|raw }}" />
 {% endif %}
 {% if not page.metadata["og:description"] %}
-<meta name="og:description" property="og:description" content="{{ page.summary|striptags|truncate(150)|raw }}" />
+<meta name="og:description" property="og:description" content="{{ page.summary|striptags|e('html')|truncate(150)|raw }}" />
 {% endif %}
 {% if not page.metadata["og:type"] %}
 <meta name="og:type" property="og:type" content="article" />
@@ -41,7 +41,7 @@
 <meta name="twitter:title" property="twitter:title" content="{{ page.title|raw }}" />
 {% endif %}
 {% if not page.metadata["twitter:description"] %}
-<meta name="twitter:description" property="twitter:description" content="{{ page.summary|striptags|truncate(150)|raw }}" />
+<meta name="twitter:description" property="twitter:description" content="{{ page.summary|striptags|e('html')|truncate(150)|raw }}" />
 {% endif %}
 {% if not page.metadata["twitter:image"] and image %}
 <meta name="twitter:image" property="twitter:image" content="{{ uri.base ~ image.url|raw }}" />

templates/partials/navigation.html.twig

@@ -1,7 +1,7 @@
-{% import 'macros/topmenu.html.twig' as macros %}
+{% import 'macros/macros.html.twig' as nav_macros %}
 
 <ul>
-  {{ macros.nav_loop(pages) }}
+  {{ nav_macros.nav_loop(pages) }}
 
   {% if theme_var('custommenus.enabled') %}
     {% for mitem in theme_var('custommenu') %}

templates/partials/shortcodes/box.html.twig

@@ -0,0 +1,36 @@
+{#{% set boxStyle = shortcode.getParameter('style', '') %}#}
+{% set boxColor = shortcode.getParameter('color', 'primary') %}
+{% set boxHeading = shortcode.getParameter('heading', shortcode.getBbCode()) %}
+{% set boxLevel = shortcode.getParameter('level', '3') %}
+{% set boxImage = shortcode.getParameter('image', '') %}
+{% set boxImageAlt = shortcode.getParameter('alt', '') %}
+{% set boxImageTitle = shortcode.getParameter('title', '') %}
+
+{# Options for button in box #}
+{% set buttonLabel = shortcode.getParameter('button-label', '') %}
+{% set buttonUrl = shortcode.getParameter('button-url', '') %}
+{% set buttonTarget = shortcode.getParameter('button-target', 'self') %}
+{% set buttonClasses = shortcode.getParameter('button-classes', '') %}
+
+{# Get the relative path to the current page #}
+{% set pagePath = uri.route(true) %}
+{% set imagePath = pagePath ~ '/' ~ boxImage %}
+
+<article class="box {{ boxColor }}">
+    {% if boxImage %}
+        <span class="image fit">
+            <img src="{{ imagePath }}" alt="{{ boxImageAlt }}" title="{{ boxImageTitle }}"/>
+        </span>
+    {% endif %}
+    <header>
+        {% if boxHeading %}
+            <h{{ boxLevel }}>{{ boxHeading|raw }}</h{{ boxLevel }}>
+        {% endif %}
+            {{ shortcode.content|raw }}
+        {% if buttonLabel and buttonUrl %}
+            <p>
+                <a href="{{ buttonUrl }}" class="button {{ buttonClasses }}" target="_{{ buttonTarget }}">{{ buttonLabel }}</a>
+            </p>
+        {% endif %}
+    </header>
+</article>

templates/partials/shortcodes/flex.html.twig

@@ -0,0 +1,9 @@
+<section {% if section_id %} id="{{ section_id }}" {% endif %}>
+    <div class="{{ row_class }}" {% if row_styles %}style="{{ row_styles }}"{% endif %}>
+        {% for key, column in columns %}
+            <div class="{{ column.getParameter('class', 'col-4 col-6-medium col-12-small') }}">
+                {{ column.getContent()|raw }}
+            </div>
+        {% endfor %}
+    </div>
+</section>

templates/partials/sidebar-bits/intro.html.twig

@@ -1,6 +1,8 @@
 <!-- Intro -->
 <section id="intro">
+<a href="{{ home_url }}" class="logo" rel="nofollow" title="{{ site.title|raw }}">
 {% include 'partials/logo.html.twig' %}
+</a>
 <header>
     <h2>{{ site.title|e('html') }}</h2>
     <p>{{theme_config.slogan|raw}}</p>

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') %}
@@ -45,15 +33,3 @@
     {% 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 %}

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,34 +30,41 @@
   {% 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>
       {% include 'partials/relatedpages.html.twig' %}
     </div>
   {% endif %}
-  {% if config.plugins.taxonomylist.enabled %}
+  {% if config.plugins.taxonomylist.enabled and page.template == 'blog' %}
-  <!-- Taxonomy list -->
+    {% include 'partials/taxonomylist.html.twig' with {'base_url':new_base_url, 'taxonomy':'tag', children_only: true, of_page: page.blog} %}
-    <div>
-      <header>
-        <h3>{{ 'FUTURE.SIDEBAR.TAGS.HEADLINE'|t }}</h3>
-      </header>
-      {% include 'partials/taxonomylist.html.twig' with {'base_url':new_base_url, 'taxonomy':'tag'} %}
-    </div>
   {% 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">

templates/partials/taxonomylist.html.twig

@@ -1,12 +1,20 @@
-{% set taxlist = children_only is defined ? taxonomylist.getChildPagesTags() : taxonomylist.get() %}
+<!-- Taxonomy list -->
+{% set taxlist = children_only is defined ? taxonomylist.getChildPagesTags(of_page, children_only) : taxonomylist.get() %}
 
 {% if taxlist %}
-  <ul class="menulink">
+  <div class="sidebar-content">
-    <li>
+    <header>
-      {% for tax,value in taxlist[taxonomy]|sort %}
+      <h3>{{ 'FUTURE.SIDEBAR.TAGS.HEADLINE'|t }}</h3>
-        {% set active = uri.param(taxonomy) == tax? 'active' : '' %}
+    </header>
-        <a class="tags {{ active }}" rel="nofollow" href="{{ base_url }}/{{ taxonomy }}{{ config.system.param_sep }}{{ tax }}">{{ tax }}</a>
+    <ul class="menulink">
-      {% endfor %}
+      <li>
-    </li>
+        {% for tax,value in taxlist[taxonomy] %}
-  </ul>
+          {% if value is not empty %}
+          {% set active = uri.param(taxonomy) == tax? 'active' : '' %}
+          <a class="tags {{ active }}" rel="nofollow" href="{{ base_url }}/{{ taxonomy }}{{ config.system.param_sep }}{{ tax }}">{{ tax }}</a>
+          {% endif %}
+        {% endfor %}
+      </li>
+    </ul>
+  </div>
 {% endif %} 

templates/portfolio.html.twig

@@ -50,13 +50,19 @@
 					{% set item_image = page.media[item.image] %}
 					{% set item_title = item.title|raw %}
 					{% set item_desc = item.description|raw %}
-					{% set thumbnail = item_image.cropZoom(thumb_w, thumb_h).loading('lazy').attribute('decoding','async').attribute('itemprop','http://schema.org/image').html(item_title,item_title) %}
+					{% set thumbnail = item_image.cropZoom(thumb_w, thumb_h).loading('lazy').attribute('decoding','async').attribute('itemprop','http://schema.org/image').html(item_title,item_title,'portfolio_content-image') %}
-					<div class="{{columns}} portfolio_item">
+					<div class="{{columns}} portfolio_container" itemprop="associatedMedia" itemscope itemtype="http://schema.org/MediaObject">
-						<a href="{{item_image.url}}" class="glightbox" data-height="{{page.header.height}}" data-width="{{page.header.width}}" data-title="{{item_title}}" data-description="{{item_desc}}" data-desc-position="{{item.descPosition}}" data-zoomable="{{page.header.zoomable}}" data-draggable="{{page.header.draggable}}" data-type="image">
+						{# <h3 class="title">{{item_title}}</h3> #}
-						<span class="image fit">
+						<div class="portfolio_content">
-							{{ thumbnail|raw }}
+							<a href="{{item_image.url}}" class="glightbox" data-height="{{page.header.height}}" data-width="{{page.header.width}}" data-title="{{item_title}}" data-description="{{item_desc|raw}}" data-desc-position="{{item.descPosition}}" data-zoomable="{{page.header.zoomable}}" data-draggable="{{page.header.draggable}}" data-type="image">
-						</span>
+							<div class="portfolio_content-overlay"></div>
-						</a>
+								{{ thumbnail|raw }}
+							<div class="portfolio_content-details {{page.header.overlay_hover_effect}}">
+								<h3 class="portfolio_content-title">{{item_title}}</h3>
+								<p class="portfolio_content-text">{{item_desc|truncate(75)|raw}}</p>
+							</div>
+							</a>
+						</div>
 					</div>
 				{% endfor %}
 				</div>