Release 2.1.2

CHANGELOG.md

@@ -1,3 +1,43 @@
+# 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
 

_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/main.css

@@ -287,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;
 }
@@ -471,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;
   }
@@ -656,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;
   }
@@ -841,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;
   }
@@ -1026,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;
   }
@@ -1211,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;
   }
@@ -1452,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;
@@ -1555,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,
@@ -2832,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 */
@@ -2902,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;

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

@@ -91,5 +91,22 @@
 			breakpoints.on('>large', function() {
 				$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/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/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
 	);

blueprints.yaml

@@ -1,7 +1,7 @@
 name: Future 2021
 slug: future2021
 type: theme
-version: 1.3.3
+version: 2.1.2
 description: Grav Future Imperfect by HTML5 UP (Version 2021)
 icon:  microchip
 author:
@@ -109,6 +109,25 @@ form:
           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

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

@@ -16,6 +16,10 @@ en:
         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
@@ -299,6 +303,10 @@ de:
         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
@@ -579,6 +587,10 @@ es:
         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
@@ -862,6 +874,10 @@ nl:
         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

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/partials/base.html.twig

@@ -1,3 +1,12 @@
+<!--
+  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' %}
@@ -98,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/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/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/taxonomylist.html.twig

@@ -1,5 +1,5 @@
 <!-- Taxonomy list -->
-{% set taxlist = children_only is defined ? taxonomylist.getChildPagesTags(of_page) : taxonomylist.get() %}
+{% set taxlist = children_only is defined ? taxonomylist.getChildPagesTags(of_page, children_only) : taxonomylist.get() %}
 
 {% if taxlist %}
   <div class="sidebar-content">
@@ -17,4 +17,4 @@
       </li>
     </ul>
   </div>
-{% endif %} 
+{% endif %} 

templates/portfolio.html.twig

@@ -51,7 +51,7 @@
 					{% 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,'portfolio_content-image') %}
-					<div class="{{columns}} portfolio_container" itemprop="associatedMedia" itemscope itemtype="MediaObject">
+					<div class="{{columns}} portfolio_container" itemprop="associatedMedia" itemscope itemtype="http://schema.org/MediaObject">
 						{# <h3 class="title">{{item_title}}</h3> #}
 						<div class="portfolio_content">
 							<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">