merged with main

/

.gitignore

@@ -1,3 +1,5 @@
+_off
+_codenotes.txt
 originalPHPfiles/
 FoundationPress/
 .DS_Store
@@ -11,3 +13,13 @@ config.yml
 packaged/
 wpcs/
 vendor/
+codesniffer.ruleset.xml
+composer.json
+composer.lock
+config-default.yml
+config.yml
+gulpfile.babel.js
+package.json
+package-lock.json
+phpunit.xml.dist
+webpack.config.js

README-archive.md

@@ -1,7 +0,0 @@
-# arcHIVE-wordpress-theme
-
-will be build on top of [Foundation](https://get.foundation) and using the clean theme starter [FoundationPress]https://github.com/olefredrik/FoundationPress)
-
-starting with html template first
-
-template updated

README-foundation.md

@@ -0,0 +1,178 @@
+# arcHIVE-wordpress-theme
+
+will be build on top of [Foundation](https://get.foundation) and using the clean theme starter [FoundationPress]https://github.com/olefredrik/FoundationPress)
+
+starting with html template first
+
+# FoundationPress
+
+[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/olefredrik/foundationpress?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+[![GitHub version](https://badge.fury.io/gh/olefredrik%2Ffoundationpress.svg)](https://github.com/olefredrik/FoundationPress/releases)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+This is a starter-theme for WordPress based on Zurb's [Foundation for Sites 6](https://foundation.zurb.com/sites.html), the most advanced responsive (mobile-first) framework in the world. The purpose of FoundationPress, is to act as a small and handy toolbox that contains the essentials needed to build any design. FoundationPress is meant to be a starting point, not the final product.
+
+Please fork, copy, modify, delete, share or do whatever you like with this.
+
+All contributions are welcome!
+
+## Requirements
+
+**This project requires [Node.js](http://nodejs.org) v6.x.x 11.6.x to be installed on your machine.** Please be aware that you might encounter problems with the installation if you are using the most current Node version (bleeding edge) with all the latest features.
+
+FoundationPress uses [Sass](http://Sass-lang.com/) (CSS with superpowers). In short, Sass is a CSS pre-processor that allows you to write styles more effectively and tidy.
+
+The Sass is compiled using libsass, which requires the GCC to be installed on your machine. Windows users can install it through [MinGW](http://www.mingw.org/), and Mac users can install it through the [Xcode Command-line Tools](http://osxdaily.com/2014/02/12/install-command-line-tools-mac-os-x/).
+
+If you have not worked with a Sass-based workflow before, I would recommend reading [FoundationPress for beginners](https://foundationpress.olefredrik.com/posts/tutorials/foundationpress-for-beginners), a short blog post that explains what you need to know.
+
+## Quickstart
+
+### 1. Clone the repository and install with npm
+```bash
+$ cd my-wordpress-folder/wp-content/themes/
+$ git clone https://github.com/olefredrik/FoundationPress.git
+$ cd FoundationPress
+$ npm install
+```
+
+### 2. Configuration
+
+#### YAML config file
+FoundationPress includes a `config-default.yml` file. To make changes to the configuration, make a copy of `config-default.yml` and name it `config.yml` and make changes to that file. The `config.yml` file is ignored by git so that each environment can use a different configuration with the same git repo.
+
+At the start of the build process a check is done to see if a `config.yml` file exists. If `config.yml` exists, the configuration will be loaded from `config.yml`. If `config.yml` does not exist, `config-default.yml` will be used as a fallback.
+
+#### Browsersync setup
+If you want to take advantage of [Browsersync](https://www.browsersync.io/) (automatic browser refresh when a file is saved), simply open your `config.yml` file after creating it in the previous step, and put your local dev-server address and port (e.g http://localhost:8888) in the `url` property under the `BROWSERSYNC` object.
+
+#### Static asset hashing / cache breaker
+If you want to make sure your users see the latest changes after re-deploying your theme, you can enable static asset hashing. In your `config.yml`, set ``REVISIONING: true;``. Hashing will work on the ``npm run build`` and ``npm run dev`` commands. It will not be applied on the start command with browsersync. This is by design.  Hashing will only change if there are actual changes in the files.
+
+### 3. Get started
+
+```bash
+$ npm start
+```
+
+### 4. Compile assets for production
+
+When building for production, the CSS and JS will be minified. To minify the assets in your `/dist` folder, run
+
+```bash
+$ npm run build
+```
+
+#### To create a .zip file of your theme, run:
+
+```
+$ npm run package
+```
+
+Running this command will build and minify the theme's assets and place a .zip archive of the theme in the `packaged` directory. This excludes the developer files/directories from your theme like `/node_modules`, `/src`, etc. to keep the theme lightweight for transferring the theme to a staging or production server.
+
+### Project structure
+
+In the `/src` folder you will find the working files for all your assets. Every time you make a change to a file that is watched by Gulp, the output will be saved to the `/dist` folder. The contents of this folder is the compiled code that you should not touch (unless you have a good reason for it).
+
+The `/page-templates` folder contains templates that can be selected in the Pages section of the WordPress admin panel. To create a new page-template, simply create a new file in this folder and make sure to give it a template name.
+
+I guess the rest is quite self explanatory. Feel free to ask if you feel stuck.
+
+### Styles and Sass Compilation
+
+ * `style.css`: Do not worry about this file. (For some reason) it's required by WordPress. All styling are handled in the Sass files described below
+
+ * `src/assets/scss/app.scss`: Make imports for all your styles here
+ * `src/assets/scss/global/*.scss`: Global settings
+ * `src/assets/scss/components/*.scss`: Buttons etc.
+ * `src/assets/scss/modules/*.scss`: Topbar, footer etc.
+ * `src/assets/scss/templates/*.scss`: Page template styling
+
+ * `dist/assets/css/app.css`: This file is loaded in the `<head>` section of your document, and contains the compiled styles for your project.
+
+If you're new to Sass, please note that you need to have Gulp running in the background (``npm start``), for any changes in your scss files to be compiled to `app.css`.
+
+### JavaScript Compilation
+
+All JavaScript files, including Foundation's modules, are imported through the `src/assets/js/app.js` file. The files are imported using module dependency with [webpack](https://webpack.js.org/) as the module bundler.
+
+If you're unfamiliar with modules and module bundling, check out [this resource for node style require/exports](http://openmymind.net/2012/2/3/Node-Require-and-Exports/) and [this resource to understand ES6 modules](http://exploringjs.com/es6/ch_modules.html).
+
+Foundation modules are loaded in the `src/assets/js/app.js` file. By default all components are loaded. You can also pick and choose which modules to include. Just follow the instructions in the file.
+
+If you need to output additional JavaScript files separate from `app.js`, do the following:
+* Create new `custom.js` file in `src/assets/js/`. If you will be using jQuery, add `import $ from 'jquery';` at the top of the file.
+* In `config.yml`, add `src/assets/js/custom.js` to `PATHS.entries`.
+* Build (`npm start`)
+* You will now have a `custom.js` file outputted to the `dist/assets/js/` directory.
+
+## Demo
+
+* [Clean FoundationPress install](http://foundationpress.olefredrik.com/)
+* [FoundationPress Kitchen Sink - see every single element in action](http://foundationpress.olefredrik.com/kitchen-sink/)
+
+## Local Development
+We recommend using one of the following setups for local WordPress development:
+
+* [MAMP](https://www.mamp.info/en/) (macOS)
+* [WAMP](http://www.wampserver.com/en/download-wampserver-64bits/) (Windows)
+* [LAMP](https://www.linux.com/learn/easy-lamp-server-installation) (Linux)
+* [Local](https://local.getflywheel.com/) (macOS/Windows)
+* [VVV (Varying Vagrant Vagrants)](https://github.com/Varying-Vagrant-Vagrants/VVV) (Vagrant Box)
+* [Trellis](https://roots.io/trellis/)
+
+
+## Tutorials
+
+* [FoundationPress for beginners](https://foundationpress.olefredrik.com/posts/tutorials/foundationpress-for-beginners/)
+* [Responsive images in WordPress with Interchange](http://rachievee.com/responsive-images-in-wordpress/)
+* [Learn to use the _settings file to change almost every aspect of a Foundation site](http://zurb.com/university/lessons/66)
+* [Other lessons from Zurb University](http://zurb.com/university/past-lessons)
+
+## Documentation
+
+* [Zurb Foundation Docs](http://foundation.zurb.com/docs/)
+* [WordPress Codex](http://codex.wordpress.org/)
+
+## Showcase
+
+* [Harvard Center for Green Buildings and Cities](http://www.harvardcgbc.org/)
+* [The New Tropic](http://thenewtropic.com/)
+* [Parent-Child Home Program](http://www.parent-child.org/)
+* [Hip and Healthy](http://hipandhealthy.com/)
+* [Franchise Career Advisors](http://franchisecareeradvisors.com/)
+* [Maren Schmidt](http://marenschmidt.com/)
+* [Finnerodja](http://www.finnerodja.se/)
+* [WP Diamonds](http://www.wpdiamonds.com/)
+* [Storm Arts](http://stormarts.fi/)
+* [ProfitGym](http://profitgym.nl/)
+* [Agritur Piasina](http://www.agriturpiasina.it/)
+* [Byington Vineyard & Winery](https://byington.com/)
+* [Show And Tell](http://www.showandtelluk.com/)
+* [Wahl + Case](https://www.wahlandcase.com/)
+* [Morgridge Institute for Research](https://morgridge.org)
+* [Impeach Trump Now](https://impeachdonaldtrumpnow.org/)
+* [La revanche des sites](https://www.la-revanche-des-sites.fr/)
+* [Dyami Wilson](https://dyamiwilson.com)
+* [Madico Solutions](https://madico.com)
+
+>Credit goes to all the brilliant designers and developers out there. Have **you** made a site that should be on this list? [Please let me know](https://twitter.com/olefredrik)
+
+## Contributing
+#### Here are ways to get involved:
+
+1. [Star](https://github.com/olefredrik/FoundationPress/stargazers) the project!
+2. Answer questions that come through [GitHub issues](https://github.com/olefredrik/FoundationPress/issues)
+3. Report a bug that you find
+4. Share a theme you've built on top of FoundationPress
+5. [Tweet](https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Ffoundationpress.olefredrik.com%2F&text=Check%20out%20FoundationPress%2C%20the%20ultimate%20%23WordPress%20starter-theme%20built%20on%20%23Foundation%206&tw_p=tweetbutton&url=http%3A%2F%2Ffoundationpress.olefredrik.com&via=olefredrik) and [blog](http://www.justinfriebel.com/my-first-experience-with-foundationpress-a-wordpress-starter-theme-106/) your experience of FoundationPress.
+
+#### Pull Requests
+
+Pull requests are highly appreciated. Please follow these guidelines:
+
+1. Solve a problem. Features are great, but even better is cleaning-up and fixing issues in the code that you discover
+2. Make sure that your code is bug-free and does not introduce new bugs
+3. Create a [pull request](https://help.github.com/articles/creating-a-pull-request)
+4. Verify that all the Travis-CI build checks have passed

README.md

@@ -4,175 +4,4 @@ will be build on top of [Foundation](https://get.foundation) and using the clean
 
 starting with html template first
 
-# FoundationPress
-
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/olefredrik/foundationpress?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-[![GitHub version](https://badge.fury.io/gh/olefredrik%2Ffoundationpress.svg)](https://github.com/olefredrik/FoundationPress/releases)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-
-This is a starter-theme for WordPress based on Zurb's [Foundation for Sites 6](https://foundation.zurb.com/sites.html), the most advanced responsive (mobile-first) framework in the world. The purpose of FoundationPress, is to act as a small and handy toolbox that contains the essentials needed to build any design. FoundationPress is meant to be a starting point, not the final product.
-
-Please fork, copy, modify, delete, share or do whatever you like with this.
-
-All contributions are welcome!
-
-## Requirements
-
-**This project requires [Node.js](http://nodejs.org) v6.x.x 11.6.x to be installed on your machine.** Please be aware that you might encounter problems with the installation if you are using the most current Node version (bleeding edge) with all the latest features.
-
-FoundationPress uses [Sass](http://Sass-lang.com/) (CSS with superpowers). In short, Sass is a CSS pre-processor that allows you to write styles more effectively and tidy.
-
-The Sass is compiled using libsass, which requires the GCC to be installed on your machine. Windows users can install it through [MinGW](http://www.mingw.org/), and Mac users can install it through the [Xcode Command-line Tools](http://osxdaily.com/2014/02/12/install-command-line-tools-mac-os-x/).
-
-If you have not worked with a Sass-based workflow before, I would recommend reading [FoundationPress for beginners](https://foundationpress.olefredrik.com/posts/tutorials/foundationpress-for-beginners), a short blog post that explains what you need to know.
-
-## Quickstart
-
-### 1. Clone the repository and install with npm
-```bash
-$ cd my-wordpress-folder/wp-content/themes/
-$ git clone https://github.com/olefredrik/FoundationPress.git
-$ cd FoundationPress
-$ npm install
-```
-
-### 2. Configuration
-
-#### YAML config file
-FoundationPress includes a `config-default.yml` file. To make changes to the configuration, make a copy of `config-default.yml` and name it `config.yml` and make changes to that file. The `config.yml` file is ignored by git so that each environment can use a different configuration with the same git repo.
-
-At the start of the build process a check is done to see if a `config.yml` file exists. If `config.yml` exists, the configuration will be loaded from `config.yml`. If `config.yml` does not exist, `config-default.yml` will be used as a fallback.
-
-#### Browsersync setup
-If you want to take advantage of [Browsersync](https://www.browsersync.io/) (automatic browser refresh when a file is saved), simply open your `config.yml` file after creating it in the previous step, and put your local dev-server address and port (e.g http://localhost:8888) in the `url` property under the `BROWSERSYNC` object.
-
-#### Static asset hashing / cache breaker
-If you want to make sure your users see the latest changes after re-deploying your theme, you can enable static asset hashing. In your `config.yml`, set ``REVISIONING: true;``. Hashing will work on the ``npm run build`` and ``npm run dev`` commands. It will not be applied on the start command with browsersync. This is by design.  Hashing will only change if there are actual changes in the files.
-
-### 3. Get started
-
-```bash
-$ npm start
-```
-
-### 4. Compile assets for production
-
-When building for production, the CSS and JS will be minified. To minify the assets in your `/dist` folder, run
-
-```bash
-$ npm run build
-```
-
-#### To create a .zip file of your theme, run:
-
-```
-$ npm run package
-```
-
-Running this command will build and minify the theme's assets and place a .zip archive of the theme in the `packaged` directory. This excludes the developer files/directories from your theme like `/node_modules`, `/src`, etc. to keep the theme lightweight for transferring the theme to a staging or production server.
-
-### Project structure
-
-In the `/src` folder you will find the working files for all your assets. Every time you make a change to a file that is watched by Gulp, the output will be saved to the `/dist` folder. The contents of this folder is the compiled code that you should not touch (unless you have a good reason for it).
-
-The `/page-templates` folder contains templates that can be selected in the Pages section of the WordPress admin panel. To create a new page-template, simply create a new file in this folder and make sure to give it a template name.
-
-I guess the rest is quite self explanatory. Feel free to ask if you feel stuck.
-
-### Styles and Sass Compilation
-
- * `style.css`: Do not worry about this file. (For some reason) it's required by WordPress. All styling are handled in the Sass files described below
-
- * `src/assets/scss/app.scss`: Make imports for all your styles here
- * `src/assets/scss/global/*.scss`: Global settings
- * `src/assets/scss/components/*.scss`: Buttons etc.
- * `src/assets/scss/modules/*.scss`: Topbar, footer etc.
- * `src/assets/scss/templates/*.scss`: Page template styling
-
- * `dist/assets/css/app.css`: This file is loaded in the `<head>` section of your document, and contains the compiled styles for your project.
-
-If you're new to Sass, please note that you need to have Gulp running in the background (``npm start``), for any changes in your scss files to be compiled to `app.css`.
-
-### JavaScript Compilation
-
-All JavaScript files, including Foundation's modules, are imported through the `src/assets/js/app.js` file. The files are imported using module dependency with [webpack](https://webpack.js.org/) as the module bundler.
-
-If you're unfamiliar with modules and module bundling, check out [this resource for node style require/exports](http://openmymind.net/2012/2/3/Node-Require-and-Exports/) and [this resource to understand ES6 modules](http://exploringjs.com/es6/ch_modules.html).
-
-Foundation modules are loaded in the `src/assets/js/app.js` file. By default all components are loaded. You can also pick and choose which modules to include. Just follow the instructions in the file.
-
-If you need to output additional JavaScript files separate from `app.js`, do the following:
-* Create new `custom.js` file in `src/assets/js/`. If you will be using jQuery, add `import $ from 'jquery';` at the top of the file.
-* In `config.yml`, add `src/assets/js/custom.js` to `PATHS.entries`.
-* Build (`npm start`)
-* You will now have a `custom.js` file outputted to the `dist/assets/js/` directory.
-
-## Demo
-
-* [Clean FoundationPress install](http://foundationpress.olefredrik.com/)
-* [FoundationPress Kitchen Sink - see every single element in action](http://foundationpress.olefredrik.com/kitchen-sink/)
-
-## Local Development
-We recommend using one of the following setups for local WordPress development:
-
-* [MAMP](https://www.mamp.info/en/) (macOS)
-* [WAMP](http://www.wampserver.com/en/download-wampserver-64bits/) (Windows)
-* [LAMP](https://www.linux.com/learn/easy-lamp-server-installation) (Linux)
-* [Local](https://local.getflywheel.com/) (macOS/Windows)
-* [VVV (Varying Vagrant Vagrants)](https://github.com/Varying-Vagrant-Vagrants/VVV) (Vagrant Box)
-* [Trellis](https://roots.io/trellis/)
-
-
-## Tutorials
-
-* [FoundationPress for beginners](https://foundationpress.olefredrik.com/posts/tutorials/foundationpress-for-beginners/)
-* [Responsive images in WordPress with Interchange](http://rachievee.com/responsive-images-in-wordpress/)
-* [Learn to use the _settings file to change almost every aspect of a Foundation site](http://zurb.com/university/lessons/66)
-* [Other lessons from Zurb University](http://zurb.com/university/past-lessons)
-
-## Documentation
-
-* [Zurb Foundation Docs](http://foundation.zurb.com/docs/)
-* [WordPress Codex](http://codex.wordpress.org/)
-
-## Showcase
-
-* [Harvard Center for Green Buildings and Cities](http://www.harvardcgbc.org/)
-* [The New Tropic](http://thenewtropic.com/)
-* [Parent-Child Home Program](http://www.parent-child.org/)
-* [Hip and Healthy](http://hipandhealthy.com/)
-* [Franchise Career Advisors](http://franchisecareeradvisors.com/)
-* [Maren Schmidt](http://marenschmidt.com/)
-* [Finnerodja](http://www.finnerodja.se/)
-* [WP Diamonds](http://www.wpdiamonds.com/)
-* [Storm Arts](http://stormarts.fi/)
-* [ProfitGym](http://profitgym.nl/)
-* [Agritur Piasina](http://www.agriturpiasina.it/)
-* [Byington Vineyard & Winery](https://byington.com/)
-* [Show And Tell](http://www.showandtelluk.com/)
-* [Wahl + Case](https://www.wahlandcase.com/)
-* [Morgridge Institute for Research](https://morgridge.org)
-* [Impeach Trump Now](https://impeachdonaldtrumpnow.org/)
-* [La revanche des sites](https://www.la-revanche-des-sites.fr/)
-* [Dyami Wilson](https://dyamiwilson.com)
-* [Madico Solutions](https://madico.com)
-
->Credit goes to all the brilliant designers and developers out there. Have **you** made a site that should be on this list? [Please let me know](https://twitter.com/olefredrik)
-
-## Contributing
-#### Here are ways to get involved:
-
-1. [Star](https://github.com/olefredrik/FoundationPress/stargazers) the project!
-2. Answer questions that come through [GitHub issues](https://github.com/olefredrik/FoundationPress/issues)
-3. Report a bug that you find
-4. Share a theme you've built on top of FoundationPress
-5. [Tweet](https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Ffoundationpress.olefredrik.com%2F&text=Check%20out%20FoundationPress%2C%20the%20ultimate%20%23WordPress%20starter-theme%20built%20on%20%23Foundation%206&tw_p=tweetbutton&url=http%3A%2F%2Ffoundationpress.olefredrik.com&via=olefredrik) and [blog](http://www.justinfriebel.com/my-first-experience-with-foundationpress-a-wordpress-starter-theme-106/) your experience of FoundationPress.
-
-#### Pull Requests
-
-Pull requests are highly appreciated. Please follow these guidelines:
-
-1. Solve a problem. Features are great, but even better is cleaning-up and fixing issues in the code that you discover
-2. Make sure that your code is bug-free and does not introduce new bugs
-3. Create a [pull request](https://help.github.com/articles/creating-a-pull-request)
-4. Verify that all the Travis-CI build checks have passed
+template updated

announcement.php

@@ -1,19 +0,0 @@
-<?php
-/**
- * The breaking div containing the main widget area
- *
- * @package arcHIVE-theme
- * @since arcHIVE-theme 1.0.0
- */
-
-?>
-<section class="hero secondary">
-   <main class="slides">
-    <?php dynamic_sidebar( 'announcement-widgets' ); ?>
-   </main>
-  <aside>
-    <nav>
-      <?php //inser menu hero here; ?>
-    </nav>
-  </aside>
-</section>

archive.php

@@ -17,38 +17,86 @@
 
 get_header(); ?>
 
-      <div class="main-container">
-      	<div class="main-grid">
-      		<main class="main-content">
-      		<?php if ( have_posts() ) : ?>
+<?php
+if ( is_post_type_archive ( 'archive_resource' ) || is_tax( 'archive_resource_category' ) || is_tax( 'archive_resource_tag' ) ) :
+  get_template_part( 'template-parts/announcement', 'resources' );
+else:
+  get_template_part( 'template-parts/announcement', '' );
+endif;
+?>
 
-      			<?php /* Start the Loop */ ?>
-      			<?php while ( have_posts() ) : the_post(); ?>
-      				<?php get_template_part( 'template-parts/content', get_post_format() ); ?>
-      			<?php endwhile; ?>
+  <article>
+    <main>
+      <?php
+      // https://codex.wordpress.org/Conditional_Tags
+      if ( is_post_type_archive ( 'archive_resource' ) ) :
+        //https://developer.wordpress.org/reference/functions/get_template_part/#comment-4130
+        //get_template_part( 'template-parts/section', 'resources', array( 'post_per_page' => '10' ) );
+        get_template_part( 'template-parts/archive', 'resources');
+      elseif ( is_category( 'news' ) ):
+        $thiscategoryname = esc_html( get_the_category()[0]->name );
+        get_template_part( 'template-parts/archive', 'categoryposts', array( 'category_name' => $thiscategoryname,'post_per_page' => '6' ) );
+      elseif ( is_category( '' ) ):
+        $thiscategoryname = esc_html( get_the_category()[0]->name );
+        get_template_part( 'template-parts/archive', 'categoryposts', array( 'category_name' => $thiscategoryname,'post_per_page' => '6' ) );
+      else :
+      ?>
 
-      			<?php else : ?>
-      				<?php get_template_part( 'template-parts/content', 'none' ); ?>
-      
-      			<?php endif; // End have_posts() check. ?>
-      
-      			<?php /* Display navigation to next/previous pages when applicable */ ?>
-      			<?php
-      			if ( function_exists( 'foundationpress_pagination' ) ) :
-      				foundationpress_pagination();
-      			elseif ( is_paged() ) :
-      			?>
-      				<nav id="post-nav">
-      					<div class="post-previous"><?php next_posts_link( __( '&larr; Older posts', 'foundationpress' ) ); ?></div>
-      					<div class="post-next"><?php previous_posts_link( __( 'Newer posts &rarr;', 'foundationpress' ) ); ?></div>
-      				</nav>
-      			<?php endif; ?>
-      
-      		</main>
-      		<?php //get_sidebar(); ?>
-      
-      	</div>
-      </div>
+      <section class="search-results-content">
+        <header>
+          <h4>search results for:</h4>
+          <h2>
+            <span class="search-query-terms">
+              <?php echo get_search_query( ); ?>
+            </h2>
+          </header>
 
 
+          <main class="">
+            <?php if ( have_posts() ) : ?>
+            <?php while ( have_posts() ) : the_post(); ?>
+            <article class="">
+              <?php if ( has_post_thumbnail() ) :?>
+                <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+                  <figure style="background-image: url(<?php echo get_the_post_thumbnail_url();?>);">
+                  </figure>
+                </a>
+              <?php else :?>
+                <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+                  <figure style="background-image: url(<?php echo catch_post_first_image();?>);">
+                  </figure>
+                </a>
+              <?php endif;?>
+              <h5 class="date">
+                <?php //the_date('d.m.Y');?>
+              </h5>
+              <h3 class="entry-title">
+                <a href="<?php the_permalink(); ?>" rel="bookmark">
+                  <?php the_title(); ?>
+                </a>
+              </h3>
+                <section class="excerpt post-excerpt">
+                  <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+                    <?php the_excerpt() ?>
+                </a>
+              </section>
+            </article>
+            <?php endwhile;//end of the loop ?>
+          </main>
+          <?php //pagination here ?>
+          <aside>
+            <nav>
+              <!--a href="" class="button hollow">see more news</a-->
+            </nav>
+          </aside>
+        <?php else : //if no post in query ?>
+          <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
+        <?php endif; ?>
+
+
+      <?php
+      endif;//end if is archive_resource
+      ?>
+    </main>
+  </article>
 <?php get_footer();

category-news.php

@@ -1,27 +0,0 @@
-<?php
-/**
- * The template for displaying archive pages
- *
- * Used to display archive-type pages if nothing more specific matches a query.
- * For example, puts together date-based pages if no date.php file exists.
- *
- * If you'd like to further customize these archive views, you may create a
- * new template file for each one. For example, tag.php (Tag archives),
- * category.php (Category archives), author.php (Author archives), etc.
- *
- * @link https://codex.wordpress.org/Template_Hierarchy
- *
- * @package arcHIVE-theme
- * @since arcHIVE-theme 1.0.0
- */
-
-get_header(); ?>
-
-  <article>
-    <main>
-      <?php get_template_part( 'template-parts/section', 'news' ); ?>
-    </main>
-  </article>
-
-
-<?php get_footer();

dist/assets/images/demo/customizable.svg

@@ -1 +1,54 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="270" height="270" xml:space="preserve"><style>.st1{fill:none;stroke:#3f5d69;stroke-width:.5069;stroke-miterlimit:10}.st2{fill:#4f5764}</style><g opacity=".2"><path class="st1" d="M15.4 124.2l118.5 124.2 74.9-214.2-193.4 90"/><path class="st1" d="M220.2 158.5L137.4 17.4l111.4 98.2-29.4 45.6"/><path class="st1" d="M248.8 115.6l-233.4 8.6 37-68.6 85-38.2"/><circle class="st2" cx="248.8" cy="115.6" r="4.1"/><circle class="st2" cx="15.4" cy="124.2" r="4.6"/><circle class="st2" cx="137.4" cy="17.4" r="4.1"/><circle class="st2" cx="52.4" cy="55.6" r="3.3"/><circle class="st2" cx="133.9" cy="248.4" r="3.8"/><circle class="st2" cx="208.8" cy="34.2" r="4.7"/><circle class="st2" cx="219.4" cy="161.2" r="5.3"/></g><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="126.354" y1="93.257" x2="138.747" y2="93.257"><stop offset="0" stop-color="#4f5764"/><stop offset=".668" stop-color="#293942"/><stop offset="1" stop-color="#111c21"/></linearGradient><path fill="url(#SVGID_1_)" d="M126.4 80.3h12.4v26h-12.4z"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="96.795" y1="187.505" x2="114.252" y2="97.101"><stop offset="0" stop-color="#d0d1d3"/><stop offset=".522" stop-color="#cdd2d1"/><stop offset=".994" stop-color="#f2f2f2"/></linearGradient><path fill="url(#SVGID_2_)" d="M97.4 97.1h16.2v90.6H97.4z"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="80.999" y1="93.257" x2="126.354" y2="93.257"><stop offset="0" stop-color="#4f5764"/><stop offset=".668" stop-color="#293942"/><stop offset="1" stop-color="#111c21"/></linearGradient><path fill="url(#SVGID_3_)" d="M81 85.4h45.4v15.7H81z"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="145.871" y1="185.065" x2="190.581" y2="87.234"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path d="M181.1 81.2l-2 .9v10.7l-8.6 5.7-7.6-5.7V82.2l-1.4-.7-8.1 11.6v12.3l9.5 8.5v73.8h16.3v-74.2l9.8-8.9V93.2l-7.9-12zm-9.9 101.2c-1.7 0-3-1.4-3-3 0-1.7 1.4-3 3-3 1.7 0 3 1.4 3 3s-1.3 3-3 3z" fill="url(#SVGID_4_)"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="270px" height="270px" viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{fill:none;stroke:#3F5D69;stroke-width:0.5069;stroke-miterlimit:10;}
+	.st2{fill:#4F5764;}
+	.st3{fill:url(#SVGID_1_);}
+	.st4{fill:url(#SVGID_2_);}
+	.st5{fill:url(#SVGID_3_);}
+	.st6{fill:url(#SVGID_4_);}
+</style>
+<g class="st0">
+	<polyline class="st1" points="15.4,124.2 133.9,248.4 208.8,34.2 15.4,124.2 	"/>
+	<polyline class="st1" points="220.2,158.5 137.4,17.4 248.8,115.6 219.4,161.2 	"/>
+	<polyline class="st1" points="248.8,115.6 15.4,124.2 52.4,55.6 137.4,17.4 	"/>
+	<g>
+		<circle class="st2" cx="248.8" cy="115.6" r="4.1"/>
+		<circle class="st2" cx="15.4" cy="124.2" r="4.6"/>
+		<circle class="st2" cx="137.4" cy="17.4" r="4.1"/>
+		<circle class="st2" cx="52.4" cy="55.6" r="3.3"/>
+		<circle class="st2" cx="133.9" cy="248.4" r="3.8"/>
+		<circle class="st2" cx="208.8" cy="34.2" r="4.7"/>
+		<circle class="st2" cx="219.4" cy="161.2" r="5.3"/>
+	</g>
+</g>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="126.3543" y1="93.2575" x2="138.7467" y2="93.2575">
+		<stop  offset="0" style="stop-color:#4F5764"/>
+		<stop  offset="0.6682" style="stop-color:#293942"/>
+		<stop  offset="1" style="stop-color:#111C21"/>
+	</linearGradient>
+	<rect x="126.4" y="80.3" class="st3" width="12.4" height="26"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="96.7949" y1="187.5047" x2="114.2522" y2="97.1009">
+		<stop  offset="0" style="stop-color:#D0D1D3"/>
+		<stop  offset="0.5225" style="stop-color:#CDD2D1"/>
+		<stop  offset="0.994" style="stop-color:#F2F2F2"/>
+	</linearGradient>
+	<rect x="97.4" y="97.1" class="st4" width="16.2" height="90.6"/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="80.9993" y1="93.2569" x2="126.3543" y2="93.2569">
+		<stop  offset="0" style="stop-color:#4F5764"/>
+		<stop  offset="0.6682" style="stop-color:#293942"/>
+		<stop  offset="1" style="stop-color:#111C21"/>
+	</linearGradient>
+	<rect x="81" y="85.4" class="st5" width="45.4" height="15.7"/>
+	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="145.8713" y1="185.0645" x2="190.5812" y2="87.2338">
+		<stop  offset="0" style="stop-color:#3D96D2"/>
+		<stop  offset="1" style="stop-color:#069FB0"/>
+	</linearGradient>
+	<path class="st6" d="M181.1,81.2l-2,0.9v10.7l-8.6,5.7l-7.6-5.7V82.2l-1.4-0.7l-8.1,11.6v12.3l9.5,8.5v73.8h16.3v-74.2l9.8-8.9
+		V93.2L181.1,81.2z M171.2,182.4c-1.7,0-3-1.4-3-3c0-1.7,1.4-3,3-3c1.7,0,3,1.4,3,3C174.2,181,172.9,182.4,171.2,182.4z"/>
+</g>
+</svg>

dist/assets/images/demo/professional.svg

@@ -1 +1,139 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="270" height="270" xml:space="preserve"><style>.st1{fill:none;stroke:#26373e;stroke-width:.6356;stroke-miterlimit:10}.st2{fill:#4f5764}</style><g opacity=".16"><path class="st1" d="M14.5 191.2l222.9 23.7-80.9-203.3-142 176.1L49.4 38.9l213.9 134.3-153.6 82.6L8.7 77.7"/><path class="st1" d="M49.4 38.9l107.1-27.3 106.8 161.6"/><circle class="st2" cx="49.4" cy="38.9" r="5.1"/><circle class="st2" cx="156.5" cy="11.6" r="5.1"/><circle class="st2" cx="263.3" cy="173.2" r="5.7"/><circle class="st2" cx="237.4" cy="214.9" r="5.1"/><circle class="st2" cx="109.7" cy="255.8" r="4.8"/><circle class="st2" cx="8.7" cy="77.7" r="5.9"/><circle class="st2" cx="14.5" cy="187.7" r="6.7"/></g><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="89.847" y1="134.696" x2="163.246" y2="134.696"><stop offset="0" stop-color="#4f5764"/><stop offset=".668" stop-color="#293942"/><stop offset="1" stop-color="#111c21"/></linearGradient><path fill="url(#SVGID_1_)" d="M89.8 81.4h73.4V188H89.8z"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="90.633" y1="179.444" x2="156.17" y2="81.795"><stop offset="0" stop-color="#d0d1d3"/><stop offset=".496" stop-color="#cdd2d1"/><stop offset=".994" stop-color="#f2f2f2"/></linearGradient><path fill="url(#SVGID_2_)" d="M89.8 81.4h66.6v99.2H89.8z"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="172.326" y1="178.44" x2="190.02" y2="114.214"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_3_)" d="M186.2 180.6h-10.5v-66.9l5.2-12.9 5.3 12.9z"/><path d="M111.3 132.4v-17.8h12.6v3.3h-8.8v3.7h8.6v3.3h-8.6v7.4h-3.8zm14.4-8.8c0-5.4 3-9.2 8.3-9.2 2.2 0 4 .7 5.3 1.8l-1.7 2.9c-1-.9-2-1.4-3.5-1.4-2.6 0-4.5 2.2-4.5 5v.4c.8-1.2 2.6-2.3 4.6-2.3 3.2 0 6.1 2 6.1 5.8 0 3.5-2.8 6.1-6.8 6.1-5.5.1-7.8-4.1-7.8-9.1zm10.7 3.2c0-1.9-1.6-2.7-3.3-2.7-1.3 0-2.6.6-3.5 1.7.2 1.7 1.1 3.6 3.6 3.6 2 0 3.2-1.4 3.2-2.6z" fill="#fff"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="83.621" y1="91.602" x2="95.586" y2="91.602"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_4_)" d="M83.6 89.4h12v4.4h-12z"/><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="83.621" y1="100.461" x2="95.586" y2="100.461"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_5_)" d="M83.6 98.2h12v4.4h-12z"/><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="83.621" y1="127.039" x2="95.586" y2="127.039"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_6_)" d="M83.6 124.8h12v4.4h-12z"/><linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="83.621" y1="135.899" x2="95.586" y2="135.899"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_7_)" d="M83.6 133.7h12v4.4h-12z"/><linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="83.621" y1="162.477" x2="95.586" y2="162.477"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_8_)" d="M83.6 160.3h12v4.4h-12z"/><linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="83.621" y1="171.337" x2="95.586" y2="171.337"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_9_)" d="M83.6 169.1h12v4.4h-12z"/><linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="83.621" y1="109.32" x2="95.586" y2="109.32"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_10_)" d="M83.6 107.1h12v4.4h-12z"/><linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="83.621" y1="118.18" x2="95.586" y2="118.18"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_11_)" d="M83.6 116h12v4.4h-12z"/><linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="83.621" y1="144.758" x2="95.586" y2="144.758"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_12_)" d="M83.6 142.5h12v4.4h-12z"/><linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="83.621" y1="153.618" x2="95.586" y2="153.618"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_13_)" d="M83.6 151.4h12v4.4h-12z"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="270px" height="270px" viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.16;}
+	.st1{fill:none;stroke:#26373E;stroke-width:0.6356;stroke-miterlimit:10;}
+	.st2{fill:#4F5764;}
+	.st3{fill:url(#SVGID_1_);}
+	.st4{fill:url(#SVGID_2_);}
+	.st5{fill:url(#SVGID_3_);}
+	.st6{fill:url(#SVGID_4_);}
+	.st7{fill:url(#SVGID_5_);}
+	.st8{fill:url(#SVGID_6_);}
+	.st9{fill:#FFFFFF;}
+	.st10{fill:url(#SVGID_7_);}
+	.st11{fill:url(#SVGID_8_);}
+	.st12{fill:url(#SVGID_9_);}
+	.st13{fill:url(#SVGID_10_);}
+	.st14{fill:url(#SVGID_11_);}
+	.st15{fill:url(#SVGID_12_);}
+	.st16{fill:url(#SVGID_13_);}
+	.st17{fill:url(#SVGID_14_);}
+	.st18{fill:url(#SVGID_15_);}
+	.st19{fill:url(#SVGID_16_);}
+</style>
+<g class="st0">
+	<polyline class="st1" points="14.5,191.2 237.4,214.9 156.5,11.6 14.5,187.7 49.4,38.9 263.3,173.2 109.7,255.8 8.7,77.7 	"/>
+	<polyline class="st1" points="49.4,38.9 156.5,11.6 263.3,173.2 	"/>
+	<g>
+		<circle class="st2" cx="49.4" cy="38.9" r="5.1"/>
+		<circle class="st2" cx="156.5" cy="11.6" r="5.1"/>
+		<circle class="st2" cx="263.3" cy="173.2" r="5.7"/>
+		<circle class="st2" cx="237.4" cy="214.9" r="5.1"/>
+		<circle class="st2" cx="109.7" cy="255.8" r="4.8"/>
+		<circle class="st2" cx="8.7" cy="77.7" r="5.9"/>
+		<circle class="st2" cx="14.5" cy="187.7" r="6.7"/>
+	</g>
+</g>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="89.8471" y1="134.6955" x2="163.2465" y2="134.6955">
+		<stop  offset="0" style="stop-color:#4F5764"/>
+		<stop  offset="0.6682" style="stop-color:#293942"/>
+		<stop  offset="1" style="stop-color:#111C21"/>
+	</linearGradient>
+	<rect x="89.8" y="81.4" class="st3" width="73.4" height="106.6"/>
+	<g>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="90.6335" y1="179.444" x2="156.1698" y2="81.7949">
+			<stop  offset="0" style="stop-color:#D0D1D3"/>
+			<stop  offset="0.4956" style="stop-color:#CDD2D1"/>
+			<stop  offset="0.994" style="stop-color:#F2F2F2"/>
+		</linearGradient>
+		<rect x="89.8" y="81.4" class="st4" width="66.6" height="99.2"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="172.3255" y1="178.4396" x2="190.0203" y2="114.214">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<polygon class="st5" points="186.2,180.6 175.7,180.6 175.7,113.7 180.9,100.8 186.2,113.7 		"/>
+	</g>
+	<g>
+		<path class="st9" d="M111.3,132.4v-17.8h12.6v3.3h-8.8v3.7h8.6v3.3h-8.6v7.4H111.3z"/>
+		<path class="st9" d="M125.7,123.6c0-5.4,3-9.2,8.3-9.2c2.2,0,4,0.7,5.3,1.8l-1.7,2.9c-1-0.9-2-1.4-3.5-1.4c-2.6,0-4.5,2.2-4.5,5
+			c0,0.1,0,0.2,0,0.4c0.8-1.2,2.6-2.3,4.6-2.3c3.2,0,6.1,2,6.1,5.8c0,3.5-2.8,6.1-6.8,6.1C128,132.8,125.7,128.6,125.7,123.6z
+			 M136.4,126.8c0-1.9-1.6-2.7-3.3-2.7c-1.3,0-2.6,0.6-3.5,1.7c0.2,1.7,1.1,3.6,3.6,3.6C135.2,129.4,136.4,128,136.4,126.8z"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="91.6015" x2="95.586" y2="91.6015">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="89.4" class="st6" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="100.4609" x2="95.586" y2="100.4609">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="98.2" class="st7" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="127.0393" x2="95.586" y2="127.0393">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="124.8" class="st8" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="135.8988" x2="95.586" y2="135.8988">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="133.7" class="st10" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="162.4771" x2="95.586" y2="162.4771">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="160.3" class="st11" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="171.3366" x2="95.586" y2="171.3366">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="169.1" class="st12" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="109.3204" x2="95.586" y2="109.3204">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="107.1" class="st13" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="118.1799" x2="95.586" y2="118.1799">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="116" class="st14" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="144.7582" x2="95.586" y2="144.7582">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="142.5" class="st15" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="153.6177" x2="95.586" y2="153.6177">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="151.4" class="st16" width="12" height="4.4"/>
+	</g>
+</g>
+</svg>

dist/assets/images/demo/responsive.svg

@@ -1 +1,75 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="270" height="270" xml:space="preserve"><style>.st1{fill:none;stroke:#3f5d69;stroke-width:.5134;stroke-miterlimit:10}.st2{fill:#4f5764}</style><g opacity=".2"><path class="st1" d="M91.2 27.9l159.4 88.4-236.9.8 194.5-63m-26.7 173.1l77.2-44.3-251.4-3.7 171.9 49.6"/><path class="st1" d="M7.3 179.2L91.2 27.9l117 26.2 50.5 128.8"/><circle class="st2" cx="7.3" cy="179.2" r="4.1"/><circle class="st2" cx="91.2" cy="27.9" r="4.6"/><circle class="st2" cx="258.7" cy="182.9" r="4.1"/><circle class="st2" cx="208.2" cy="54.1" r="3.3"/><circle class="st2" cx="250.6" cy="116.3" r="3.9"/><circle class="st2" cx="13.7" cy="117.1" r="4.7"/><circle class="st2" cx="179.2" cy="228.8" r="5.4"/></g><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="127.172" y1="187.377" x2="152.018" y2="156.89"><stop offset="0" stop-color="#d0d1d3"/><stop offset=".522" stop-color="#cdd2d1"/><stop offset=".994" stop-color="#f2f2f2"/></linearGradient><path fill="url(#SVGID_1_)" d="M145.4 169.2v-14.7h-11.5v14.7h-21.4v5.7h54.4v-5.7z"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="85.1" y1="118.486" x2="194.29" y2="118.486"><stop offset="0" stop-color="#d0d1d3"/><stop offset=".522" stop-color="#cdd2d1"/><stop offset=".994" stop-color="#f2f2f2"/></linearGradient><path fill="url(#SVGID_2_)" d="M85.1 80.7h109.2v75.6H85.1z"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="91.138" y1="149.882" x2="188.794" y2="86.74"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_3_)" d="M89.9 86.4h99.6v64.1H89.9z"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="58.898" y1="153.359" x2="119.288" y2="153.359"><stop offset="0" stop-color="#4f5764"/><stop offset=".668" stop-color="#293942"/><stop offset="1" stop-color="#111c21"/></linearGradient><path fill="url(#SVGID_4_)" d="M58.9 114.3h60.4v78H58.9z"/><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="63.337" y1="184.134" x2="114.438" y2="121.431"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_5_)" d="M63.9 121.7h50.4v61.6H63.9z"/><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="180.405" y1="159.832" x2="210.41" y2="159.832"><stop offset="0" stop-color="#4f5764"/><stop offset=".668" stop-color="#293942"/><stop offset="1" stop-color="#111c21"/></linearGradient><path fill="url(#SVGID_6_)" d="M180.4 137.3h30v45.1h-30z"/><linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="184.97" y1="174.527" x2="206.619" y2="142.202"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path fill="url(#SVGID_7_)" d="M184.9 143.5h21v30.9h-21z"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="270px" height="270px" viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{fill:none;stroke:#3F5D69;stroke-width:0.5134;stroke-miterlimit:10;}
+	.st2{fill:#4F5764;}
+	.st3{fill:url(#SVGID_1_);}
+	.st4{fill:url(#SVGID_2_);}
+	.st5{fill:url(#SVGID_3_);}
+	.st6{fill:url(#SVGID_4_);}
+	.st7{fill:url(#SVGID_5_);}
+	.st8{fill:url(#SVGID_6_);}
+	.st9{fill:url(#SVGID_7_);}
+</style>
+<g class="st0">
+	<polyline class="st1" points="91.2,27.9 250.6,116.3 13.7,117.1 208.2,54.1 	"/>
+	<polyline class="st1" points="181.5,227.2 258.7,182.9 7.3,179.2 179.2,228.8 	"/>
+	<polyline class="st1" points="7.3,179.2 91.2,27.9 208.2,54.1 258.7,182.9 	"/>
+	<g>
+		<circle class="st2" cx="7.3" cy="179.2" r="4.1"/>
+		<circle class="st2" cx="91.2" cy="27.9" r="4.6"/>
+		<circle class="st2" cx="258.7" cy="182.9" r="4.1"/>
+		<circle class="st2" cx="208.2" cy="54.1" r="3.3"/>
+		<circle class="st2" cx="250.6" cy="116.3" r="3.9"/>
+		<circle class="st2" cx="13.7" cy="117.1" r="4.7"/>
+		<circle class="st2" cx="179.2" cy="228.8" r="5.4"/>
+	</g>
+</g>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="127.1718" y1="187.3774" x2="152.0181" y2="156.8904">
+		<stop  offset="0" style="stop-color:#D0D1D3"/>
+		<stop  offset="0.5225" style="stop-color:#CDD2D1"/>
+		<stop  offset="0.994" style="stop-color:#F2F2F2"/>
+	</linearGradient>
+	<polygon class="st3" points="145.4,169.2 145.4,154.5 133.9,154.5 133.9,169.2 112.5,169.2 112.5,174.9 166.9,174.9 166.9,169.2 	
+		"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="85.0996" y1="118.4856" x2="194.2902" y2="118.4856">
+		<stop  offset="0" style="stop-color:#D0D1D3"/>
+		<stop  offset="0.5225" style="stop-color:#CDD2D1"/>
+		<stop  offset="0.994" style="stop-color:#F2F2F2"/>
+	</linearGradient>
+	<rect x="85.1" y="80.7" class="st4" width="109.2" height="75.6"/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="91.1375" y1="149.8817" x2="188.7937" y2="86.7396">
+		<stop  offset="0" style="stop-color:#3D96D2"/>
+		<stop  offset="1" style="stop-color:#069FB0"/>
+	</linearGradient>
+	<rect x="89.9" y="86.4" class="st5" width="99.6" height="64.1"/>
+	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="58.8981" y1="153.359" x2="119.2881" y2="153.359">
+		<stop  offset="0" style="stop-color:#4F5764"/>
+		<stop  offset="0.6682" style="stop-color:#293942"/>
+		<stop  offset="1" style="stop-color:#111C21"/>
+	</linearGradient>
+	<rect x="58.9" y="114.3" class="st6" width="60.4" height="78"/>
+	<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="63.3368" y1="184.134" x2="114.438" y2="121.4314">
+		<stop  offset="0" style="stop-color:#3D96D2"/>
+		<stop  offset="1" style="stop-color:#069FB0"/>
+	</linearGradient>
+	<rect x="63.9" y="121.7" class="st7" width="50.4" height="61.6"/>
+	<g>
+		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="180.4045" y1="159.832" x2="210.4102" y2="159.832">
+			<stop  offset="0" style="stop-color:#4F5764"/>
+			<stop  offset="0.6682" style="stop-color:#293942"/>
+			<stop  offset="1" style="stop-color:#111C21"/>
+		</linearGradient>
+		<rect x="180.4" y="137.3" class="st8" width="30" height="45.1"/>
+		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="184.9704" y1="174.5269" x2="206.6195" y2="142.2015">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="184.9" y="143.5" class="st9" width="21" height="30.9"/>
+	</g>
+</g>
+</svg>

dist/assets/images/demo/semantic.svg

@@ -1 +1,47 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="270" height="270" xml:space="preserve"><style>.st1{fill:none;stroke:#3f5d69;stroke-width:.5162;stroke-miterlimit:10}.st2{fill:#4f5764}</style><g opacity=".2"><path class="st1" d="M171 16.5l-162.5 86 151.6 134.1 13.4-218.8 90.9 134.1-184.7 89.2L248 86.7 90.2 25.6l-71 160.6"/><path class="st1" d="M264.4 151.9l-104.3 84.7-80.4 4.5-60.5-54.9-10.7-83.7"/><circle class="st2" cx="264.4" cy="151.9" r="4.1"/><circle class="st2" cx="160.1" cy="236.6" r="4.1"/><circle class="st2" cx="79.7" cy="241.1" r="4.6"/><circle class="st2" cx="8.5" cy="102.5" r="4.1"/><circle class="st2" cx="19.2" cy="186.2" r="3.4"/><circle class="st2" cx="248" cy="86.7" r="3.9"/><circle class="st2" cx="90.2" cy="25.6" r="4.8"/><circle class="st2" cx="173.5" cy="17.8" r="5.4"/></g><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50.958" y1="135.136" x2="104.538" y2="135.136"><stop offset="0" stop-color="#4f5764"/><stop offset=".668" stop-color="#293942"/><stop offset="1" stop-color="#111c21"/></linearGradient><path d="M51 140.7v-11.1l53.6-23.9V117L62 135.3l42.6 18v11.3L51 140.7z" fill="url(#SVGID_1_)"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="112.512" y1="135" x2="156.683" y2="135"><stop offset="0" stop-color="#3d96d2"/><stop offset="1" stop-color="#069fb0"/></linearGradient><path d="M112.5 185.8l33.1-101.5h11.1l-33.1 101.5h-11.1z" fill="url(#SVGID_2_)"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="165.462" y1="135.136" x2="219.042" y2="135.136"><stop offset="0" stop-color="#4f5764"/><stop offset=".668" stop-color="#293942"/><stop offset="1" stop-color="#111c21"/></linearGradient><path d="M165.5 164.6v-11.3l42.6-18-42.6-18.3v-11.3l53.6 23.9v11.1l-53.6 23.9z" fill="url(#SVGID_3_)"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="270px" height="270px" viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{fill:none;stroke:#3F5D69;stroke-width:0.5162;stroke-miterlimit:10;}
+	.st2{fill:#4F5764;}
+	.st3{fill:url(#SVGID_1_);}
+	.st4{fill:url(#SVGID_2_);}
+	.st5{fill:url(#SVGID_3_);}
+</style>
+<g class="st0">
+	<polyline class="st1" points="171,16.5 8.5,102.5 160.1,236.6 173.5,17.8 264.4,151.9 79.7,241.1 248,86.7 90.2,25.6 19.2,186.2 	
+		"/>
+	<polyline class="st1" points="264.4,151.9 160.1,236.6 79.7,241.1 19.2,186.2 8.5,102.5 	"/>
+	<g>
+		<circle class="st2" cx="264.4" cy="151.9" r="4.1"/>
+		<circle class="st2" cx="160.1" cy="236.6" r="4.1"/>
+		<circle class="st2" cx="79.7" cy="241.1" r="4.6"/>
+		<circle class="st2" cx="8.5" cy="102.5" r="4.1"/>
+		<circle class="st2" cx="19.2" cy="186.2" r="3.4"/>
+		<circle class="st2" cx="248" cy="86.7" r="3.9"/>
+		<circle class="st2" cx="90.2" cy="25.6" r="4.8"/>
+		<circle class="st2" cx="173.5" cy="17.8" r="5.4"/>
+	</g>
+</g>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50.9584" y1="135.1361" x2="104.5381" y2="135.1361">
+		<stop  offset="0" style="stop-color:#4F5764"/>
+		<stop  offset="0.6682" style="stop-color:#293942"/>
+		<stop  offset="1" style="stop-color:#111C21"/>
+	</linearGradient>
+	<path class="st3" d="M51,140.7v-11.1l53.6-23.9V117l-42.6,18.3l42.6,18v11.3L51,140.7z"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="112.5123" y1="135" x2="156.683" y2="135">
+		<stop  offset="0" style="stop-color:#3D96D2"/>
+		<stop  offset="1" style="stop-color:#069FB0"/>
+	</linearGradient>
+	<path class="st4" d="M112.5,185.8l33.1-101.5h11.1l-33.1,101.5H112.5z"/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="165.4619" y1="135.1361" x2="219.0416" y2="135.1361">
+		<stop  offset="0" style="stop-color:#4F5764"/>
+		<stop  offset="0.6682" style="stop-color:#293942"/>
+		<stop  offset="1" style="stop-color:#111C21"/>
+	</linearGradient>
+	<path class="st5" d="M165.5,164.6v-11.3l42.6-18L165.5,117v-11.3l53.6,23.9v11.1L165.5,164.6z"/>
+</g>
+</svg>

dist/assets/img/ARC-HIVE-logo.svg

@@ -1 +1,45 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="865.627" height="355.04"><g fill="#231f20"><path d="M10 177.519c.613 43.461 17.79 84.706 48.37 116.148 30.591 31.453 71.263 49.656 114.52 51.254 36.563 1.333 71.753-8.833 101.79-29.45l.475-.288c1.97-1.052 3.58-1.995 5.05-2.958l60.071-45.342c25.368-16.722 56.503-25.2 92.537-25.2 36.036 0 67.17 8.478 92.539 25.2l.261.182 59.81 45.16c1.482.97 3.117 1.927 5.132 3l.476.288c30.034 20.588 65.221 30.756 101.764 29.388 43.244-1.612 83.901-19.818 114.481-51.268 30.565-31.432 47.736-72.668 48.353-116.114-.617-43.447-17.788-84.682-48.353-116.115-30.58-31.45-71.237-49.657-114.481-51.268-36.538-1.361-71.731 8.801-101.764 29.387l-.475.289c-2.013 1.072-3.65 2.028-5.133 3l-60.071 45.343c-25.368 16.721-56.501 25.2-92.539 25.2-36.036 0-67.169-8.479-92.537-25.2l-.26-.184-59.812-45.159c-1.465-.96-3.075-1.903-5.05-2.956l-.474-.29c-30.035-20.615-65.23-30.798-101.79-29.449-43.257 1.598-83.929 19.8-114.52 51.254C27.79 92.81 10.612 134.057 10 177.519zM179.323 355.04c-2.263 0-4.528-.041-6.802-.127-45.84-1.692-88.926-20.968-121.32-54.275C18.818 267.344.635 223.65 0 177.6l5.92-.081-5.92-.082C.635 131.388 18.818 87.692 51.2 54.4 83.596 21.092 126.68 1.817 172.522.124c38.624-1.421 75.822 9.305 107.59 31.041 2.2 1.183 4.026 2.262 5.729 3.384l.26.184 59.812 45.159c23.683 15.57 52.917 23.463 86.901 23.463 33.983 0 63.22-7.895 86.903-23.462l60.072-45.344c1.721-1.136 3.576-2.229 5.819-3.432C617.373 9.413 654.569-1.3 693.167.143c45.826 1.708 88.898 20.988 121.28 54.289 32.368 33.29 50.544 76.975 51.182 123.012l-5.446.075 5.446.074c-.638 46.038-18.814 89.724-51.182 123.012-32.382 33.3-75.454 52.582-121.28 54.288-38.63 1.445-75.795-9.27-107.56-30.974-2.244-1.202-4.098-2.296-5.819-3.43l-.261-.184-59.812-45.16c-23.684-15.569-52.92-23.462-86.902-23.462s-63.217 7.893-86.901 23.462l-60.073 45.344c-1.706 1.126-3.532 2.203-5.728 3.383-29.9 20.457-64.61 31.168-100.788 31.168"/><path d="M109.833 186.181l-8.585-23.946-3.388-10.731h-.339l-3.162 10.505-8.811 24.172zm3.615 9.827H82.047l-7.117 19.543H62.505L90.631 141h14.459l28.126 74.55h-12.764l-7.004-19.542m51.059-20.332h17.396c9.826 0 14.57-3.952 14.57-12.199 0-8.246-4.744-12.198-14.57-12.198h-17.396zm16.04 10.053h-16.04v29.822h-11.974V141h30.386c16.04 0 26.093 8.359 26.093 22.364 0 10.732-5.875 18.073-15.815 21.01l20.219 31.177h-13.892l-18.977-29.822m84.269 30.95c-21.575 0-35.13-14.683-35.13-38.403 0-23.721 13.669-38.407 35.017-38.407 14.797 0 25.302 6.214 29.821 18.3l-11.41 5.083c-2.937-8.81-8.471-12.877-17.734-12.877-13.893 0-23.043 10.166-23.043 27.901 0 17.619 8.472 27.899 22.591 27.899 9.488 0 16.379-4.744 19.204-14.232l11.52 3.84c-4.63 13.666-16.265 20.896-30.836 20.896M607.987 141v74.55h-12.199v-32.53h-36.823v32.532h-12.088V141h12.088v31.627h36.823V141h12.199m36.94 74.55H632.84V141h12.086v74.55m58.174 0h-14.12L661.307 141h12.877l17.395 49.587 4.517 14.798 4.519-14.685L718.01 141h12.764L703.1 215.55m99.517-10.391v10.392h-55.573V141h53.992v10.392h-41.905v21.461h32.756v10.166H759.13v22.14h43.486"/></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg2"
+   xml:space="preserve"
+   width="865.62665"
+   height="355.04001"
+   viewBox="0 0 865.62665 355.04001"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs6" /><g
+     id="g10"
+     transform="matrix(1.3333333,0,0,-1.3333333,0,355.04)"><g
+       id="g12"
+       transform="scale(0.1)"><path
+         d="M 75,1331.41 C 79.5977,1005.45 208.422,696.109 437.77,460.301 667.211,224.398 972.246,87.8789 1296.67,75.8906 1570.9,65.8984 1834.82,142.141 2060.1,296.77 l 3.56,2.16 c 14.78,7.89 26.85,14.961 37.88,22.179 l 450.53,340.071 c 190.26,125.41 423.77,189 694.03,189 270.27,0 503.77,-63.59 694.04,-189 l 1.96,-1.371 448.57,-338.7 c 11.12,-7.277 23.38,-14.449 38.49,-22.5 l 3.57,-2.16 c 225.26,-154.41 489.16,-230.6677 763.23,-220.4099 324.33,12.0898 629.26,148.6409 858.61,384.5119 229.24,235.738 358.02,545.009 362.65,870.859 -4.63,325.85 -133.41,635.11 -362.65,870.86 -229.35,235.87 -534.28,372.43 -858.61,384.51 -274.03,10.21 -537.98,-66.01 -763.23,-220.4 l -3.56,-2.17 c -15.1,-8.04 -27.37,-15.21 -38.5,-22.5 l -450.53,-340.07 c -190.26,-125.41 -423.76,-189 -694.04,-189 -270.27,0 -503.77,63.59 -694.03,189 l -1.95,1.38 -448.59,338.69 c -10.99,7.2 -23.06,14.27 -37.87,22.17 l -3.56,2.17 c -225.26,154.62 -489.23,230.99 -763.43,220.87 -324.424,-11.98 -629.459,-148.5 -858.9,-384.4 C 208.422,1966.72 79.5977,1657.37 75,1331.41 Z M 1344.92,0 c -16.97,0 -33.96,0.308594 -51.01,0.949219 C 950.105,13.6406 626.961,158.211 384.004,408.012 141.137,657.719 4.76172,985.43 0,1330.8 l 44.3984,0.61 L 0,1332.02 c 4.76172,345.37 141.137,673.09 384.004,922.79 242.957,249.8 566.101,394.36 909.906,407.06 289.68,10.66 568.66,-69.79 806.92,-232.81 16.5,-8.87 30.2,-16.96 42.97,-25.38 l 1.95,-1.38 448.59,-338.69 c 177.62,-116.77 396.88,-175.97 651.76,-175.97 254.87,0 474.15,59.21 651.77,175.96 l 450.54,340.08 c 12.91,8.52 26.82,16.72 43.64,25.74 238.25,162.78 517.22,243.13 806.7,232.31 343.7,-12.81 666.74,-157.41 909.6,-407.17 242.76,-249.67 379.08,-577.31 383.87,-922.59 l -40.85,-0.56 40.85,-0.56 C 6487.43,985.57 6351.11,657.922 6108.35,408.262 5865.49,158.512 5542.45,13.8984 5198.75,1.10156 4909.03,-9.73828 4630.29,70.6289 4392.05,233.41 c -16.83,9.012 -30.73,17.219 -43.64,25.719 l -1.96,1.383 -448.59,338.707 C 3720.23,715.98 3500.96,775.18 3246.1,775.18 c -254.87,0 -474.13,-59.2 -651.76,-175.969 L 2143.79,259.129 C 2131,250.691 2117.3,242.609 2100.83,233.762 1876.58,80.332 1616.26,0 1344.92,0"
+         style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path14" /><path
+         d="m 823.75,1266.44 -64.387,179.6 -25.41,80.48 h -2.543 l -23.719,-78.79 -66.082,-181.29 z m 27.109,-73.7 H 615.352 l -53.375,-146.57 h -93.188 l 210.945,559.13 h 108.438 l 210.945,-559.13 h -95.73 l -52.528,146.57"
+         style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path16" /><path
+         d="m 1233.8,1345.23 h 130.47 c 73.7,0 109.28,29.64 109.28,91.49 0,61.85 -35.58,91.49 -109.28,91.49 H 1233.8 Z m 120.3,-75.4 H 1233.8 V 1046.17 H 1144 v 559.13 h 227.89 c 120.3,0 195.7,-62.69 195.7,-167.73 0,-80.49 -44.06,-135.55 -118.61,-157.58 l 151.64,-233.82 h -104.19 l -142.33,223.66"
+         style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path18" /><path
+         d="m 1986.12,1037.71 c -161.81,0 -263.47,110.12 -263.47,288.02 0,177.91 102.51,288.05 262.62,288.05 110.98,0 189.77,-46.6 223.66,-137.25 l -85.57,-38.12 c -22.03,66.08 -63.54,96.58 -133.01,96.58 -104.2,0 -172.82,-76.25 -172.82,-209.26 0,-132.14 63.54,-209.24 169.43,-209.24 71.16,0 122.84,35.58 144.03,106.74 l 86.4,-28.8 c -34.73,-102.5 -121.99,-156.72 -231.27,-156.72"
+         style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path20" /><path
+         d="m 4559.9,1605.3 v -559.13 h -91.49 v 243.99 h -276.17 v -243.99 h -90.66 v 559.13 h 90.66 v -237.2 h 276.17 v 237.2 h 91.49"
+         style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path22" /><path
+         d="m 4836.95,1046.17 h -90.64 v 559.13 h 90.64 v -559.13"
+         style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path24" /><path
+         d="m 5273.25,1046.17 h -105.9 L 4959.8,1605.3 h 96.58 l 130.46,-371.9 33.88,-110.99 33.89,110.14 130.47,372.75 h 95.73 l -207.56,-559.13"
+         style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path26" /><path
+         d="m 6019.63,1124.11 v -77.94 h -416.8 v 559.13 h 404.94 v -77.94 H 5693.48 V 1366.4 h 245.67 v -76.24 h -245.67 v -166.05 h 326.15"
+         style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path28" /></g></g></svg>

dist/assets/js/lib/foundation-explicit-pieces.js

@@ -0,0 +1,83 @@
+import $ from 'jquery';
+
+import { Foundation } from 'foundation-sites/js/foundation.core';
+import * as CoreUtils from 'foundation-sites/js/foundation.core.utils';
+import { Box } from 'foundation-sites/js/foundation.util.box'
+import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
+import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
+import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
+import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
+import { Nest } from 'foundation-sites/js/foundation.util.nest';
+import { Timer } from 'foundation-sites/js/foundation.util.timer';
+import { Touch } from 'foundation-sites/js/foundation.util.touch';
+import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
+import { Abide } from 'foundation-sites/js/foundation.abide';
+import { Accordion } from 'foundation-sites/js/foundation.accordion';
+import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu';
+import { Drilldown } from 'foundation-sites/js/foundation.drilldown';
+import { Dropdown } from 'foundation-sites/js/foundation.dropdown';
+import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu';
+import { Equalizer } from 'foundation-sites/js/foundation.equalizer';
+import { Interchange } from 'foundation-sites/js/foundation.interchange';
+import { Magellan } from 'foundation-sites/js/foundation.magellan';
+import { OffCanvas } from 'foundation-sites/js/foundation.offcanvas';
+import { Orbit } from 'foundation-sites/js/foundation.orbit';
+import { ResponsiveMenu } from 'foundation-sites/js/foundation.responsiveMenu';
+import { ResponsiveToggle } from 'foundation-sites/js/foundation.responsiveToggle';
+import { Reveal } from 'foundation-sites/js/foundation.reveal';
+import { Slider } from 'foundation-sites/js/foundation.slider';
+import { SmoothScroll } from 'foundation-sites/js/foundation.smoothScroll';
+import { Sticky } from 'foundation-sites/js/foundation.sticky';
+import { Tabs } from 'foundation-sites/js/foundation.tabs';
+import { Toggler } from 'foundation-sites/js/foundation.toggler';
+import { Tooltip } from 'foundation-sites/js/foundation.tooltip';
+import { ResponsiveAccordionTabs } from 'foundation-sites/js/foundation.responsiveAccordionTabs';
+
+Foundation.addToJquery($);
+
+// Add Foundation Utils to Foundation global namespace for backwards
+// compatibility.
+Foundation.rtl = CoreUtils.rtl;
+Foundation.GetYoDigits = CoreUtils.GetYoDigits;
+Foundation.transitionend = CoreUtils.transitionend;
+Foundation.RegExpEscape = CoreUtils.RegExpEscape;
+Foundation.onLoad = CoreUtils.onLoad;
+
+Foundation.Box = Box;
+Foundation.onImagesLoaded = onImagesLoaded;
+Foundation.Keyboard = Keyboard;
+Foundation.MediaQuery = MediaQuery;
+Foundation.Motion = Motion;
+Foundation.Move = Move;
+Foundation.Nest = Nest;
+Foundation.Timer = Timer;
+
+// Touch and Triggers previously were almost purely sede effect driven,
+// so no need to add it to Foundation, just init them.
+Touch.init($);
+Triggers.init($, Foundation);
+MediaQuery._init();
+
+Foundation.plugin(Abide, 'Abide');
+Foundation.plugin(Accordion, 'Accordion');
+Foundation.plugin(AccordionMenu, 'AccordionMenu');
+Foundation.plugin(Drilldown, 'Drilldown');
+Foundation.plugin(Dropdown, 'Dropdown');
+Foundation.plugin(DropdownMenu, 'DropdownMenu');
+Foundation.plugin(Equalizer, 'Equalizer');
+Foundation.plugin(Interchange, 'Interchange');
+Foundation.plugin(Magellan, 'Magellan');
+Foundation.plugin(OffCanvas, 'OffCanvas');
+Foundation.plugin(Orbit, 'Orbit');
+Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
+Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
+Foundation.plugin(Reveal, 'Reveal');
+Foundation.plugin(Slider, 'Slider');
+Foundation.plugin(SmoothScroll, 'SmoothScroll');
+Foundation.plugin(Sticky, 'Sticky');
+Foundation.plugin(Tabs, 'Tabs');
+Foundation.plugin(Toggler, 'Toggler');
+Foundation.plugin(Tooltip, 'Tooltip');
+Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
+
+export { Foundation };

dist/assets/scss/_settings.scss

@@ -0,0 +1,909 @@
+//  Foundation for Sites Settings
+//  -----------------------------
+//
+//  Table of Contents:
+//
+//   1. Global
+//   2. Breakpoints
+//   3. The Grid
+//   4. Base Typography
+//   5. Typography Helpers
+//   6. Abide
+//   7. Accordion
+//   8. Accordion Menu
+//   9. Badge
+//  10. Breadcrumbs
+//  11. Button
+//  12. Button Group
+//  13. Callout
+//  14. Card
+//  15. Close Button
+//  16. Drilldown
+//  17. Dropdown
+//  18. Dropdown Menu
+//  19. Flexbox Utilities
+//  20. Forms
+//  21. Label
+//  22. Media Object
+//  23. Menu
+//  24. Meter
+//  25. Off-canvas
+//  26. Orbit
+//  27. Pagination
+//  28. Progress Bar
+//  29. Prototype Arrow
+//  30. Prototype Border-Box
+//  31. Prototype Border-None
+//  32. Prototype Bordered
+//  33. Prototype Display
+//  34. Prototype Font-Styling
+//  35. Prototype List-Style-Type
+//  36. Prototype Overflow
+//  37. Prototype Position
+//  38. Prototype Rounded
+//  39. Prototype Separator
+//  40. Prototype Shadow
+//  41. Prototype Sizing
+//  42. Prototype Spacing
+//  43. Prototype Text-Decoration
+//  44. Prototype Text-Transformation
+//  45. Prototype Text-Utilities
+//  46. Responsive Embed
+//  47. Reveal
+//  48. Slider
+//  49. Switch
+//  50. Table
+//  51. Tabs
+//  52. Thumbnail
+//  53. Title Bar
+//  54. Tooltip
+//  55. Top Bar
+//  56. Xy Grid
+
+@import 'util/util';
+
+
+// 0. arcHIVE specific styles
+// ---------
+// global project styles
+@import "global/colors";
+@import "global/typography";
+
+// 1. Global
+// ---------
+
+$global-font-size:100%;
+$global-width: 100vw;
+$global-lineheight: 1.5;
+
+$foundation-palette: (
+  primary: $hyperlink-blue,
+  secondary: $desert-red,
+  success: $acid-green,
+  warning: $bloody-red,
+  alert: $bloody-red,
+);
+$light-gray: #e6e6e6;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$body-background: $white;
+$body-font-color: $black;
+$body-font-family: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+$body-antialiased: true;
+$global-margin: 2rem;
+$global-padding: 1rem;
+$global-position: 1rem;
+$global-weight-normal: normal;
+$global-weight-bold: bold;
+$global-radius: 0;
+$global-radius-archive: 2rem;
+$global-menu-padding: 0.7rem 1rem;
+$global-menu-nested-margin: 1rem;
+$global-text-direction: ltr;
+$global-flexbox: true;
+$global-prototype-breakpoints: false;
+$global-button-cursor: auto;
+$global-color-pick-contrast-tolerance: 0;
+$print-transparent-backgrounds: true;
+$print-hrefs: true;
+
+@include add-foundation-colors;
+
+// 2. Breakpoints
+// --------------
+
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px,
+);
+$breakpoints-hidpi: (
+  hidpi-1: 1,
+  hidpi-1-5: 1.5,
+  hidpi-2: 2,
+  retina: 2,
+  hidpi-3: 3
+);
+$print-breakpoint: large;
+$breakpoint-classes: (small medium large);
+
+// 3. The Grid
+// -----------
+
+$grid-row-width: $global-width;
+$grid-column-count: 12;
+$grid-column-gutter: (
+  small: 20px,
+  medium: 30px,
+);
+$grid-column-align-edge: true;
+$grid-column-alias: 'columns';
+$block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+$header-font-family: $body-font-family;
+$header-font-weight: $global-weight-normal;
+$header-font-style: normal;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$header-color: inherit;
+$header-lineheight: 1.4;
+$header-margin-bottom: 0.5rem;
+$header-styles: (
+  small: (
+    'h1': ('font-size': 36),
+    'h2': ('font-size': 30),
+    'h3': ('font-size': 23),
+    'h4': ('font-size': 18),
+    'h5': ('font-size': 17),
+    'h6': ('font-size': 16),
+  ),
+  medium: (
+    'h1': ('font-size': 58),
+    'h2': ('font-size': 52),
+    'h3': ('font-size': 40),
+    'h4': ('font-size': 25),
+    'h5': ('font-size': 20),
+    'h6': ('font-size': 16),
+  ),
+);
+$header-text-rendering: optimizeLegibility;
+$small-font-size: 80%;
+$header-small-font-color: $dark-gray;
+$paragraph-lineheight: 1.6;
+$paragraph-margin-bottom: 1rem;
+$paragraph-text-rendering: optimizeLegibility;
+$enable-code-inline: true;
+$anchor-color: $primary-color;
+$anchor-color-hover: $primary-color;//scale-color($anchor-color, $lightness: -14%);
+$anchor-color-alt: scale-color($anchor-color, $lightness: 50%);
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
+$hr-width: $global-width;
+$hr-border: 1px solid $medium-gray;
+$hr-margin: rem-calc(20) auto;
+$list-lineheight: $paragraph-lineheight;
+$list-margin-bottom: $paragraph-margin-bottom;
+$list-style-type: disc;
+$list-style-position: outside;
+$list-side-margin: 1.25rem;
+$list-nested-side-margin: 1.25rem;
+$defnlist-margin-bottom: 1rem;
+$defnlist-term-weight: $global-weight-bold;
+$defnlist-term-margin-bottom: 0.3rem;
+$blockquote-color: $dark-gray;
+$blockquote-padding: rem-calc(9 20 0 19);
+$blockquote-border: 1px solid $medium-gray;
+$enable-cite-block: true;
+$keystroke-font: $font-family-monospace;
+$keystroke-color: $black;
+$keystroke-background: $light-gray;
+$keystroke-padding: rem-calc(2 4 0);
+$keystroke-radius: $global-radius;
+$abbr-underline: 1px dotted $black;
+
+// 5. Typography Helpers
+// ---------------------
+
+$lead-font-size: $global-font-size * 1.25;
+$lead-lineheight: 1.6;
+$subheader-lineheight: 1.4;
+$subheader-color: $dark-gray;
+$subheader-font-weight: $global-weight-normal;
+$subheader-margin-top: 0.2rem;
+$subheader-margin-bottom: 0.5rem;
+$stat-font-size: 2.5rem;
+$cite-color: $dark-gray;
+$cite-font-size: rem-calc(13);
+$cite-pseudo-content: '\2014 \0020';
+$code-color: $black;
+$code-font-family: $font-family-monospace;
+$code-font-weight: $global-weight-normal;
+$code-background: $light-gray;
+$code-border: 1px solid $medium-gray;
+$code-padding: rem-calc(2 5 1);
+$code-block-padding: 1rem;
+$code-block-margin-bottom: 1.5rem;
+
+// 6. Abide
+// --------
+
+$abide-inputs: true;
+$abide-labels: true;
+$input-background-invalid: get-color(alert);
+$form-label-color-invalid: get-color(alert);
+$input-error-color: get-color(alert);
+$input-error-font-size: rem-calc(12);
+$input-error-font-weight: $global-weight-bold;
+
+// 7. Accordion
+// ------------
+
+$accordion-background: $white;
+$accordion-plusminus: true;
+$accordion-plus-content: '\002B';
+$accordion-minus-content: '\2013';
+$accordion-title-font-size: rem-calc(12);
+$accordion-item-color: $body-font-color;
+$accordion-item-background-hover: none;
+$accordion-item-padding: $global-padding*1.5 0;
+$accordion-content-background: $white;
+$accordion-content-border: none;
+$accordion-content-color: $body-font-color;
+$accordion-content-padding: $global-padding*1.5 0;
+
+// 8. Accordion Menu
+// -----------------
+
+$accordionmenu-padding: $global-menu-padding;
+$accordionmenu-nested-margin: $global-menu-nested-margin;
+$accordionmenu-submenu-padding: $accordionmenu-padding;
+$accordionmenu-arrows: true;
+$accordionmenu-arrow-color: $primary-color;
+$accordionmenu-item-background: null;
+$accordionmenu-border: null;
+$accordionmenu-submenu-toggle-background: null;
+$accordion-submenu-toggle-border: $accordionmenu-border;
+$accordionmenu-submenu-toggle-width: 40px;
+$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
+$accordionmenu-arrow-size: 6px;
+
+// 9. Badge
+// --------
+
+$badge-background: $primary-color;
+$badge-color: $white;
+$badge-color-alt: $black;
+$badge-palette: $foundation-palette;
+$badge-padding: 0.3em;
+$badge-minwidth: 2.1em;
+$badge-font-size: 0.6rem;
+
+// 10. Breadcrumbs
+// ---------------
+
+$breadcrumbs-margin: 0 0 $global-margin 0;
+$breadcrumbs-item-font-size: rem-calc(11);
+$breadcrumbs-item-color: $primary-color;
+$breadcrumbs-item-color-current: $black;
+$breadcrumbs-item-color-disabled: $medium-gray;
+$breadcrumbs-item-margin: 0.75rem;
+$breadcrumbs-item-uppercase: true;
+$breadcrumbs-item-separator: true;
+$breadcrumbs-item-separator-item: '/';
+$breadcrumbs-item-separator-item-rtl: '\\';
+$breadcrumbs-item-separator-color: $medium-gray;
+
+// 11. Button
+// ----------
+
+$button-font-family: inherit;
+$button-font-weight: null;
+$button-font-variant: all-petite-caps;
+$button-padding: $global-padding $global-padding*3;
+$button-margin: 0;
+$button-fill: solid;
+$button-background: $primary-color;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-color: $white;
+$button-color-alt: $black;
+$button-radius: $global-radius-archive;
+$button-border: 1px solid transparent;
+$button-hollow-border-width: 2px;
+$button-sizes: (
+  tiny: 0.6rem,
+  small: 0.75rem,
+  default: 1.2rem,
+  large: 1.5rem,
+);
+$button-palette: $foundation-palette;
+$button-opacity-disabled: 0.25;
+$button-background-hover-lightness: -20%;
+$button-hollow-hover-lightness: -50%;
+$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+$button-responsive-expanded: false;
+
+// 12. Button Group
+// ----------------
+
+$buttongroup-margin: 1rem;
+$buttongroup-spacing: 1px;
+$buttongroup-child-selector: '.button';
+$buttongroup-expand-max: 6;
+$buttongroup-radius-on-each: true;
+
+// 13. Callout
+// -----------
+
+$callout-background: $white;
+$callout-background-fade: 85%;
+$callout-border: 1px solid rgba($black, 0.25);
+$callout-margin: 0 0 1rem 0;
+$callout-sizes: (
+  small: 0.5rem,
+  default: 1rem,
+  large: 3rem,
+);
+$callout-font-color: $body-font-color;
+$callout-font-color-alt: $body-background;
+$callout-radius: $global-radius;
+$callout-link-tint: 30%;
+
+// 14. Card
+// --------
+
+$card-background: unset;
+$card-font-color: $body-font-color;
+$card-divider-background: $light-gray;
+$card-border: none;
+$card-shadow: none;
+$card-border-radius: $global-radius;
+$card-padding: $global-padding*4;
+$card-margin-bottom: $global-margin*2;
+
+// 15. Close Button
+// ----------------
+
+$closebutton-position: right top;
+$closebutton-z-index: 10;
+$closebutton-default-size: medium;
+$closebutton-offset-horizontal: (
+  small: 0.66rem,
+  medium: 1rem,
+);
+$closebutton-offset-vertical: (
+  small: 0.33em,
+  medium: 0.5rem,
+);
+$closebutton-size: (
+  small: 1.5em,
+  medium: 2em,
+);
+$closebutton-lineheight: 1;
+$closebutton-color: $dark-gray;
+$closebutton-color-hover: $black;
+
+// 16. Drilldown
+// -------------
+
+$drilldown-transition: transform 0.15s linear;
+$drilldown-arrows: true;
+$drilldown-padding: $global-menu-padding;
+$drilldown-nested-margin: 0;
+$drilldown-background: $white;
+$drilldown-submenu-padding: $drilldown-padding;
+$drilldown-submenu-background: $white;
+$drilldown-arrow-color: $primary-color;
+$drilldown-arrow-size: 6px;
+
+// 17. Dropdown
+// ------------
+
+$dropdown-padding: 1rem;
+$dropdown-background: $body-background;
+$dropdown-border: none;//1px solid $medium-gray;
+$dropdown-font-size: 1rem;
+$dropdown-width: 100%;
+$dropdown-radius: $global-radius;
+$dropdown-sizes: (
+  tiny: 100px,
+  small: 200px,
+  large: 400px,
+);
+
+// 18. Dropdown Menu
+// -----------------
+
+$dropdownmenu-arrows: true;
+$dropdownmenu-arrow-color: $body-font-color;//$anchor-color;
+$dropdownmenu-arrow-size: 6px;
+$dropdownmenu-arrow-padding: 1.5rem;
+$dropdownmenu-min-width: 100%;//200px;
+$dropdownmenu-background: null;
+$dropdownmenu-submenu-background: $dropdown-background;
+$dropdownmenu-padding: $global-menu-padding;
+$dropdownmenu-nested-margin: 0;
+$dropdownmenu-submenu-padding: $dropdownmenu-padding;
+$dropdownmenu-border: none; //1px solid $medium-gray;
+$dropdown-menu-item-color-active: get-color(primary);
+$dropdown-menu-item-background-active: transparent;
+
+// 19. Flexbox Utilities
+// ---------------------
+
+$flex-source-ordering-count: 6;
+$flexbox-responsive-breakpoints: true;
+
+// 20. Forms
+// ---------
+
+$fieldset-border: 1px solid $medium-gray;
+$fieldset-padding: rem-calc(20);
+$fieldset-margin: rem-calc(18 0);
+$legend-padding: rem-calc(0 3);
+$form-spacing: rem-calc(16);
+$helptext-color: $black;
+$helptext-font-size: rem-calc(13);
+$helptext-font-style: italic;
+$input-prefix-color: $black;
+$input-prefix-background: $light-gray;
+$input-prefix-border: 1px solid $medium-gray;
+$input-prefix-padding: 1rem;
+$form-label-color: $black;
+$form-label-font-size: rem-calc(14);
+$form-label-font-weight: $global-weight-normal;
+$form-label-line-height: 1.8;
+$select-background: $white;
+$select-triangle-color: $dark-gray;
+$select-radius: $global-radius;
+$input-color: $black;
+$input-placeholder-color: scale-color($primary-color, $lightness: 35%);//$medium-gray;
+$input-font-family: inherit;
+$input-font-size: rem-calc(16);
+$input-font-weight: $global-weight-normal;
+$input-line-height: $global-lineheight;
+$input-background: scale-color($primary-color, $lightness: 95%);
+$input-background-focus:  scale-color($primary-color, $lightness: 85%);
+$input-background-disabled: $light-gray;
+$input-border: 1px solid $input-background;
+$input-border-focus: 1px solid $input-background-focus;
+$input-padding: $form-spacing / 2;
+$input-shadow: none;// inset 0 1px 2px rgba($black, 0.1);
+$input-shadow-focus: none; //0 0 5px $medium-gray;
+$input-cursor-disabled: not-allowed;
+$input-transition: none;//box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-number-spinners: true;
+$input-radius: $global-radius;
+$form-button-radius: $global-radius;
+
+// 21. Label
+// ---------
+
+$label-background: $primary-color;
+$label-color: $white;
+$label-color-alt: $black;
+$label-palette: $foundation-palette;
+$label-font-size: 0.8rem;
+$label-padding: 0.33333rem 0.5rem;
+$label-radius: $global-radius;
+
+// 22. Media Object
+// ----------------
+
+$mediaobject-margin-bottom: $global-margin;
+$mediaobject-section-padding: $global-padding;
+$mediaobject-image-width-stacked: 100%;
+
+// 23. Menu
+// --------
+
+$menu-margin: 0;
+$menu-nested-margin: $global-menu-nested-margin;
+$menu-items-padding: $global-menu-padding;
+$menu-simple-margin: 1rem;
+$menu-item-color: $black;
+$menu-item-color-active: $anchor-color;
+$menu-item-color-alt-active: $black;
+$menu-item-background-active: $white;
+$menu-icon-spacing: 0.25rem;
+$menu-state-back-compat: true;
+$menu-centered-back-compat: true;
+$menu-icons-back-compat: true;
+$menu-anchor-color: $black;
+$menu-anchor-color-hover: $anchor-color;
+// 24. Meter
+// ---------
+
+$meter-height: 1rem;
+$meter-radius: $global-radius;
+$meter-background: $medium-gray;
+$meter-fill-good: $success-color;
+$meter-fill-medium: $warning-color;
+$meter-fill-bad: $alert-color;
+
+// 25. Off-canvas
+// --------------
+
+$offcanvas-sizes: (
+  small: 250px,
+);
+$offcanvas-vertical-sizes: (
+  small: 250px,
+);
+$offcanvas-background: $light-gray;
+$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+$offcanvas-inner-shadow-size: 20px;
+$offcanvas-inner-shadow-color: rgba($black, 0.25);
+$offcanvas-overlay-zindex: 11;
+$offcanvas-push-zindex: 12;
+$offcanvas-overlap-zindex: 13;
+$offcanvas-reveal-zindex: 12;
+$offcanvas-transition-length: 0.5s;
+$offcanvas-transition-timing: ease;
+$offcanvas-fixed-reveal: true;
+$offcanvas-exit-background: rgba($white, 0.25);
+$maincontent-class: 'off-canvas-content';
+
+// 26. Orbit
+// ---------
+
+$orbit-bullet-background: $medium-gray;
+$orbit-bullet-background-active: $dark-gray;
+$orbit-bullet-diameter: 1.2rem;
+$orbit-bullet-margin: 0.1rem;
+$orbit-bullet-margin-top: 0.8rem;
+$orbit-bullet-margin-bottom: 0.8rem;
+$orbit-caption-background: rgba($black, 0.5);
+$orbit-caption-padding: 1rem;
+$orbit-control-background-hover: rgba($black, 0.5);
+$orbit-control-padding: 1rem;
+$orbit-control-zindex: 10;
+
+// 27. Pagination
+// --------------
+
+$pagination-font-size: rem-calc(14);
+$pagination-margin-bottom: $global-margin;
+$pagination-item-color: $black;
+$pagination-item-padding: rem-calc(3 10);
+$pagination-item-spacing: rem-calc(1);
+$pagination-radius: $global-radius;
+$pagination-item-background-hover: $light-gray;
+$pagination-item-background-current: $primary-color;
+$pagination-item-color-current: $white;
+$pagination-item-color-disabled: $medium-gray;
+$pagination-ellipsis-color: $black;
+$pagination-mobile-items: false;
+$pagination-mobile-current-item: false;
+$pagination-arrows: true;
+$pagination-arrow-previous: '\00AB';
+$pagination-arrow-next: '\00BB';
+
+// 28. Progress Bar
+// ----------------
+
+$progress-height: 1rem;
+$progress-background: $medium-gray;
+$progress-margin-bottom: $global-margin;
+$progress-meter-background: $primary-color;
+$progress-radius: $global-radius;
+
+// 29. Prototype Arrow
+// -------------------
+
+$prototype-arrow-directions: (
+  down,
+  up,
+  right,
+  left
+);
+$prototype-arrow-size: 0.4375rem;
+$prototype-arrow-color: $black;
+
+// 30. Prototype Border-Box
+// ------------------------
+
+$prototype-border-box-breakpoints: $global-prototype-breakpoints;
+
+// 31. Prototype Border-None
+// -------------------------
+
+$prototype-border-none-breakpoints: $global-prototype-breakpoints;
+
+// 32. Prototype Bordered
+// ----------------------
+
+$prototype-bordered-breakpoints: $global-prototype-breakpoints;
+$prototype-border-width: rem-calc(1);
+$prototype-border-type: solid;
+$prototype-border-color: $medium-gray;
+
+// 33. Prototype Display
+// ---------------------
+
+$prototype-display-breakpoints: $global-prototype-breakpoints;
+$prototype-display: (
+  inline,
+  inline-block,
+  block,
+  table,
+  table-cell
+);
+
+// 34. Prototype Font-Styling
+// --------------------------
+
+$prototype-font-breakpoints: $global-prototype-breakpoints;
+$prototype-wide-letter-spacing: rem-calc(4);
+$prototype-font-normal: $global-weight-normal;
+$prototype-font-bold: $global-weight-bold;
+
+// 35. Prototype List-Style-Type
+// -----------------------------
+
+$prototype-list-breakpoints: $global-prototype-breakpoints;
+$prototype-style-type-unordered: (
+  disc,
+  circle,
+  square
+);
+$prototype-style-type-ordered: (
+  decimal,
+  lower-alpha,
+  lower-latin,
+  lower-roman,
+  upper-alpha,
+  upper-latin,
+  upper-roman
+);
+
+// 36. Prototype Overflow
+// ----------------------
+
+$prototype-overflow-breakpoints: $global-prototype-breakpoints;
+$prototype-overflow: (
+  visible,
+  hidden,
+  scroll
+);
+
+// 37. Prototype Position
+// ----------------------
+
+$prototype-position-breakpoints: $global-prototype-breakpoints;
+$prototype-position: (
+  static,
+  relative,
+  absolute,
+  fixed
+);
+$prototype-position-z-index: 975;
+
+// 38. Prototype Rounded
+// ---------------------
+
+$prototype-rounded-breakpoints: $global-prototype-breakpoints;
+$prototype-border-radius: rem-calc(3);
+
+// 39. Prototype Separator
+// -----------------------
+
+$prototype-separator-breakpoints: $global-prototype-breakpoints;
+$prototype-separator-align: center;
+$prototype-separator-height: rem-calc(2);
+$prototype-separator-width: 3rem;
+$prototype-separator-background: $primary-color;
+$prototype-separator-margin-top: $global-margin;
+
+// 40. Prototype Shadow
+// --------------------
+
+$prototype-shadow-breakpoints: $global-prototype-breakpoints;
+$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
+                       0 2px 10px 0 rgba(0,0,0,.12);
+
+// 41. Prototype Sizing
+// --------------------
+
+$prototype-sizing-breakpoints: $global-prototype-breakpoints;
+$prototype-sizing: (
+  width,
+  height
+);
+$prototype-sizes: (
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
+);
+
+// 42. Prototype Spacing
+// ---------------------
+
+$prototype-spacing-breakpoints: $global-prototype-breakpoints;
+$prototype-spacers-count: 3;
+
+// 43. Prototype Text-Decoration
+// -----------------------------
+
+$prototype-decoration-breakpoints: $global-prototype-breakpoints;
+$prototype-text-decoration: (
+  overline,
+  underline,
+  line-through,
+);
+
+// 44. Prototype Text-Transformation
+// ---------------------------------
+
+$prototype-transformation-breakpoints: $global-prototype-breakpoints;
+$prototype-text-transformation: (
+  lowercase,
+  uppercase,
+  capitalize
+);
+
+// 45. Prototype Text-Utilities
+// ----------------------------
+
+$prototype-utilities-breakpoints: $global-prototype-breakpoints;
+$prototype-text-overflow: ellipsis;
+
+// 46. Responsive Embed
+// --------------------
+
+$responsive-embed-margin-bottom: rem-calc(16);
+$responsive-embed-ratios: (
+  default: 16 by 9,
+  standard: 4 by 3,
+  widescreen: 16 by 9,
+  classicfilm: 3 by 2,
+);
+
+// 47. Reveal
+// ----------
+
+$reveal-background: $white;
+$reveal-width: 600px;
+$reveal-max-width: $global-width;
+$reveal-padding: $global-padding;
+$reveal-border: 1px solid $medium-gray;
+$reveal-radius: $global-radius;
+$reveal-zindex: 1005;
+$reveal-overlay-background: rgba($black, 0.45);
+
+// 48. Slider
+// ----------
+
+$slider-width-vertical: 0.5rem;
+$slider-transition: all 0.2s ease-in-out;
+$slider-height: 0.5rem;
+$slider-background: $light-gray;
+$slider-fill-background: $medium-gray;
+$slider-handle-height: 1.4rem;
+$slider-handle-width: 1.4rem;
+$slider-handle-background: $primary-color;
+$slider-opacity-disabled: 0.25;
+$slider-radius: $global-radius;
+
+// 49. Switch
+// ----------
+
+$switch-background: $medium-gray;
+$switch-background-active: $primary-color;
+$switch-height: 2rem;
+$switch-height-tiny: 1.5rem;
+$switch-height-small: 1.75rem;
+$switch-height-large: 2.5rem;
+$switch-radius: $global-radius;
+$switch-margin: $global-margin;
+$switch-paddle-background: $white;
+$switch-paddle-offset: 0.25rem;
+$switch-paddle-radius: $global-radius;
+$switch-paddle-transition: all 0.25s ease-out;
+$switch-opacity-disabled: .5;
+$switch-cursor-disabled: not-allowed;
+
+// 50. Table
+// ---------
+
+$table-background: $white;
+$table-color-scale: 5%;
+$table-border: 1px solid smart-scale($table-background, $table-color-scale);
+$table-padding: rem-calc(8 10 10);
+$table-hover-scale: 2%;
+$table-row-hover: darken($table-background, $table-hover-scale);
+$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-is-striped: true;
+$table-striped-background: smart-scale($table-background, $table-color-scale);
+$table-stripe: even;
+$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-row-hover: darken($table-head-background, $table-hover-scale);
+$table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
+$table-head-font-color: $body-font-color;
+$table-foot-font-color: $body-font-color;
+$show-header-for-stacked: false;
+$table-stack-breakpoint: medium;
+
+// 51. Tabs
+// --------
+
+$tab-margin: 0;
+$tab-background: $white;
+$tab-color: $primary-color;
+$tab-background-active: $light-gray;
+$tab-active-color: $primary-color;
+$tab-item-font-size: rem-calc(12);
+$tab-item-background-hover: $white;
+$tab-item-padding: 1.25rem 1.5rem;
+$tab-content-background: $white;
+$tab-content-border: $light-gray;
+$tab-content-color: $body-font-color;
+$tab-content-padding: 1rem;
+
+// 52. Thumbnail
+// -------------
+
+$thumbnail-border: 4px solid $white;
+$thumbnail-margin-bottom: $global-margin;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+
+// 53. Title Bar
+// -------------
+
+$titlebar-background: $white;
+$titlebar-color: $black;
+$titlebar-padding: 0.5rem;
+$titlebar-text-font-weight: bold;
+$titlebar-icon-color: $black;
+$titlebar-icon-color-hover: $medium-gray;
+$titlebar-icon-spacing: 0.25rem;
+
+// 54. Tooltip
+// -----------
+
+$has-tip-cursor: help;
+$has-tip-font-weight: $global-weight-bold;
+$has-tip-border-bottom: dotted 1px $dark-gray;
+$tooltip-background-color: $black;
+$tooltip-color: $white;
+$tooltip-padding: 0.75rem;
+$tooltip-max-width: 10rem;
+$tooltip-font-size: $small-font-size;
+$tooltip-pip-width: 0.75rem;
+$tooltip-pip-height: $tooltip-pip-width * 0.866;
+$tooltip-radius: $global-radius;
+
+// 55. Top Bar
+// -----------
+
+$topbar-padding: 0.5rem;
+$topbar-background: $light-gray;
+$topbar-submenu-background: $topbar-background;
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
+$topbar-input-width: 200px;
+$topbar-unstack-breakpoint: medium;
+
+// 56. Xy Grid
+// -----------
+
+$xy-grid: true;
+$grid-container: $global-width;
+$grid-columns: 12;
+$grid-margin-gutters: (
+  small: 20px,
+  medium: 30px
+);
+$grid-padding-gutters: $grid-margin-gutters;
+$grid-container-padding: $grid-padding-gutters;
+$grid-container-max: $global-width;
+$xy-block-grid-max: 8;

dist/assets/scss/app.scss

@@ -0,0 +1,115 @@
+@charset 'utf-8';
+
+// foundation styles
+@import 'settings';
+@import 'foundation';
+@import 'motion-ui';
+
+// Global styles
+@include foundation-global-styles;
+@include foundation-forms;
+@include foundation-typography;
+
+// Grids (choose one)
+@include foundation-xy-grid-classes;
+// @include foundation-grid;
+// @include foundation-flex-grid;
+
+// Generic components
+@include foundation-button;
+@include foundation-button-group;
+@include foundation-close-button;
+@include foundation-label;
+//@include foundation-progress-bar;
+//@include foundation-slider;
+//@include foundation-switch;
+@include foundation-table;
+// Basic components
+// @include foundation-badge;
+// @include foundation-breadcrumbs;
+@include foundation-callout;
+@include foundation-card;
+@include foundation-dropdown;
+@include foundation-pagination;
+@include foundation-tooltip;
+
+// Containers
+@include foundation-accordion;
+@include foundation-media-object;
+//@include foundation-orbit;
+@include foundation-responsive-embed;
+@include foundation-tabs;
+@include foundation-thumbnail;
+// Menu-based containers
+@include foundation-menu;
+@include foundation-menu-icon;
+@include foundation-accordion-menu;
+@include foundation-drilldown-menu;
+@include foundation-dropdown-menu;
+
+// Layout components
+@include foundation-off-canvas;
+@include foundation-reveal;
+@include foundation-sticky;
+@include foundation-title-bar;
+@include foundation-top-bar;
+
+// Helpers
+@include foundation-float-classes;
+@include foundation-flex-classes;
+@include foundation-visibility-classes;
+// @include foundation-prototype-classes;
+
+// Motion UI
+@include motion-ui-transitions;
+@include motion-ui-animations;
+
+// arcHIVE styles
+
+// global project styles
+
+@import "global/wp-overrides"; //errors
+@import "global/wp-admin";  //errors
+@import "global/typography";
+@import "global/gutenberg";
+@import "global/colors";
+@import "global/branding";
+@import "global/accessibility";
+
+// Modules
+@import "modules/navigation";
+@import "modules/header";
+@import "modules/footer";
+//@import "modules/editor-syle";
+@import "modules/content";
+
+// Componentes
+@import "components/links";
+@import "components/featured-image";
+@import "components/dividers";
+@import "components/cards";
+@import "components/buttons";
+@import "components/accordion";
+@import "components/forms";
+
+
+// Templates
+//@import "templates/front";
+
+// Vendors
+//
+// fontawesome as shown here:
+// https://stackoverflow.com/questions/49195144/add-font-awesome-to-gulp-project-correctly#51491927
+// 1. install fortawesome
+// npm install --save-dev @fortawesome/fontawesome-free
+// 2. uncomment these lines
+@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
+@import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands";
+@import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular";
+@import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid";
+@import "../../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";
+// 3. add this to gulp
+// gulp.task('icons', function() {
+//    return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
+//        .pipe(gulp.dest(dist+'/assets/webfonts/'));
+//  });

dist/assets/scss/components/_accordion.scss

@@ -0,0 +1,14 @@
+.accordion-item {
+  border-bottom: 1px solid $body-font-color;
+}
+.accordion-title {
+  ul,ol {
+    list-style: none;
+    @include xy-grid;
+  }
+  li {
+    display:inline;
+    @include xy-cell(3);
+    text-align:left;
+  }
+}

dist/assets/scss/components/_buttons.scss

@@ -0,0 +1,109 @@
+// wordpress
+
+.wpcf7-form-control[type="submit"] {
+  @extend .button;
+  min-width: unset;
+}
+
+.post-next,.post-previous {
+  a {
+    @extend button;
+    @extend .hollow;
+  }
+}
+
+// untill here wordpress
+button {
+  @extend .button;
+}
+button,.button {
+  &.small{
+    padding: $global-padding*0.5 $global-padding*1.5;
+  }
+  &.tiny{
+    padding: $global-padding*0.3 $global-padding*1.1;
+  }
+  &:not(.large,.small,.tiny){
+  }
+  &.primary {
+    color: $white;
+  }
+  &.success {
+    border-color: $success-color;
+  }
+  &.alert {
+    border-color: $alert-color;
+    color: $white;
+    &:hover{
+      color:$white;
+    }
+  }
+  &.secondary {
+    border-color: $secondary-color;
+  }
+  &.inactive {
+    color: $light-gray;
+    border-color: $light-gray;
+    cursor: not-allowed ;
+    &:hover {
+      background-color: unset;
+    }
+  }
+}
+.hero {
+  button,.button {
+    min-width: 20vw;
+    padding: $global-padding*0.3 $global-padding*2;
+    color: $button-color-alt;
+    font-size: $global-font-size*1.3;
+    border-color: $button-color-alt;
+    border-radius: $global-radius-archive*2;
+    &:hover{
+      color: $anchor-color;
+      border-color: $anchor-color;
+    }
+  }
+  &.hero-middle,&.hero-last,&.hero-announcement{
+    :not(.search-form),:not(.search){
+      button,.button {
+        font-size: $global-font-size;
+        border-color: $white;
+        padding: $global-padding $global-padding*2;
+        min-width: unset;
+        &:hover{
+          color: scale-color($anchor-color, $lightness: 90%);
+          background-color: scale-color($white, $alpha: -60%);
+        }
+      }
+    }
+  }
+}
+
+.search {
+  .button {
+    border-color: $primary-color;
+  }
+  button.appear{
+    min-width: unset;
+    background-color: $primary-color;
+    color: $white;
+    border-radius:$global-radius-archive;
+    border: none;
+  }
+}
+.load_more {
+  button,.button {
+    font-size: $global-font-size;
+  }
+}
+.end_of_page_button {
+  @extend .button;
+  display: flex;
+  margin:  $global-margin auto;
+  font-size: $global-font-size;
+}
+.accordion-item.is-active {
+  & button, & .button {
+    background-color: $input-background;
+  }
+}

dist/assets/scss/components/_cards.scss

@@ -0,0 +1,3 @@
+.card {
+  padding: $global-padding;
+}

dist/assets/scss/components/_dividers.scss

@@ -0,0 +1,4 @@
+.dotted {
+  border-style: dashed;
+  margin: 2rem 0;
+}

dist/assets/scss/components/_featured-image.scss

@@ -0,0 +1,14 @@
+.featured-hero {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: rem-calc(100);
+
+  @include breakpoint(medium) {
+    height: rem-calc(200);
+  }
+
+  @include breakpoint(xlarge) {
+    height: rem-calc(400);
+  }
+}

dist/assets/scss/components/_forms.scss

@@ -0,0 +1,141 @@
+//search block size in content
+article,aside,.omekas-entry-content {
+  .search,.widget_search{
+    @include xy-grid();
+    .input-group,.search-form {
+      @include breakpoint(small){
+        @include xy-cell (12);
+        margin-left: auto;
+        margin-right: auto;
+      }
+      @include breakpoint(medium){
+        @include xy-cell (6);
+        margin-left: auto;
+        margin-right: auto;
+      }
+      @include breakpoint(large){
+        @include xy-cell (4);
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+}
+// search elements
+.search {
+  .input-group {
+    position: relative;
+    border-radius: $global-padding*4;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    .appear {
+      right: 0;
+      position: absolute;
+      height: 100%;
+      padding: $global-padding*0.3 $global-padding;
+    }
+  }
+  .input-group * {
+    margin: 0;
+  }
+  .button {
+    // border-color: $primary-color;
+    border: none;
+  }
+  .appear {
+    display:none;
+  }
+  input {
+    border-radius: $global-radius-archive;
+    &:active {
+      border-color: $primary-color;
+      background-color: $input-background-focus;
+    }
+    &:focus,&:focus-within{
+      border-color: $input-background;
+      background-color: $input-background;
+    }
+    &:not(:placeholder-shown) {
+      border:none;
+      background-color: $input-background-focus;
+      position: relative;
+      padding-right: $global-padding * 9;
+      + .appear {
+        display: block;
+        background-color: scale-color($input-background-focus, $lightness: -20%);
+        z-index: 2;
+        &:hover {
+          color: $white;
+          background-color: $primary-color;
+        }
+      }
+    }
+  }
+  .hollow {
+    border-color: $primary-color;
+    color: $primary-color;
+    &:after {
+    }
+    &::placeholder {
+      color: scale-color($primary-color, $lightness: -20%);
+    }
+    &:hover {
+      background-color: scale-color($primary-color, $lightness: 95%);
+    }
+    &:active {
+      background-color: scale-color($primary-color, $lightness: 85%);
+    }
+  }
+  &-form {
+    @extend .search;
+    position: relative;
+    min-width: 40vw;
+    input:not(:placeholder-shown) {
+      padding: $global-padding/2 $global-padding;
+    }
+    .search-submit {
+      @extend .button;
+      padding: $global-padding*0.7 $global-padding !important;
+      display:none;
+    }
+    .search-field {
+      &:active,&:focus,&:not(:placeholder-shown) {
+        padding-right: $global-padding * 8;
+      }
+    }
+    label {
+      width:100%;
+      &:active,&:focus,&:focus-within,&:hover {
+        + .search-submit {
+          display: inline;
+          position: absolute;
+          right: 0;
+          width: auto;
+          min-width: unset;
+          background-color: scale-color($input-background-focus, $lightness: -20%);
+        }
+      }
+    }
+  }
+}
+// wordpress
+
+.hero {
+  .search-form {
+    input[type="submit"]{
+      color: $white;
+    }
+  }
+}
+
+// contact form 7
+//
+
+[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'],
+textarea {
+border: none;
+}
+.wpcf7-list-item {
+  width: 100%;
+}

dist/assets/scss/components/_links.scss

@@ -0,0 +1,8 @@
+// Apply outline styles only when input method is keyboard
+// remove :focus style via What Input using progressive enhancement
+// so :focus isn't left broken if JavaScript fails
+
+[data-whatinput="mouse"] a:focus, button:focus
+[data-whatinput="touch"] a:focus, button:focus {
+  outline: none;
+}

dist/assets/scss/editor.scss

@@ -0,0 +1,86 @@
+/*!
+ * Gutenberg Editor Styles
+ */
+
+/** === Includes === */
+
+// @charset 'utf-8';
+//
+// @import 'settings';
+// @import 'foundation';
+//
+// @include foundation-typography;
+// @include foundation-button;
+// @include foundation-table;
+
+
+/** === Content Width === */
+.wp-block {
+	// width: calc(100vw - (2 * 10));
+	// @each $breakpoint, $size in $grid-margin-gutters {
+	//
+	// 	@include breakpoint($breakpoint) {
+	// 		width: calc(100vw - ($size));
+	// 	}
+	//
+	// }
+}
+
+/** === Base Typography === */
+body {
+	// font-size: $global-font-size;
+	// font-family: $body-font-family;
+	// color: $body-font-color;
+}
+
+/** === Post Title === */
+.editor-post-title__block .editor-post-title__input{
+  // @extend h1;
+}
+
+/** === Button === */
+.wp-block-button {
+
+	// add general foundation button styling to button in editor
+	.wp-block-button__link {
+		// @extend .button;
+	}
+
+	// add special styling for squared buttons
+	&.is-style-squared .wp-block-button__link {
+		// border-radius: 0;
+	}
+
+	// add outline styles
+	&.is-style-outline .wp-block-button__link{
+		// @extend .hollow;
+	}
+
+	// set transparent background to block for outline button
+	&.is-style-outline,
+	&.is-style-outline:hover,
+	&.is-style-outline:focus,
+	&.is-style-outline:active {
+		// background: transparent;
+	}
+}
+
+/** === File === */
+.wp-block-file__button{
+	// @include button();
+}
+
+/** === Pullquote === */
+.wp-block-paragraph.has-background{
+	// padding: rem-calc(20px 30px);
+}
+
+/** === Table === */
+.wp-block-table td{
+	// border: none;
+}
+
+/** === Latest Posts grid view === */
+.wp-block-latest-posts.is-grid{
+	// list-style: none;
+}

dist/assets/scss/global/_accessibility.scss

@@ -0,0 +1,29 @@
+// Text meant only for screen readers. Addresses part of theme-check issue #840.
+// https://github.com/Automattic/_s/blob/master/style.css
+.screen-reader-text {
+  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+}
+
+.screen-reader-text:focus {
+  background-color: #f1f1f1;
+  border-radius: 3px;
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+  clip: auto !important;
+  color: #21759b;
+  display: block;
+  font-size: 14px;
+  font-size: 0.875rem;
+  font-weight: bold;
+  height: auto;
+  left: 5px;
+  line-height: normal;
+  padding: 15px 23px 14px;
+  text-decoration: none;
+  top: 5px;
+  width: auto;
+  z-index: 100000; // Above WP toolbar.
+}

dist/assets/scss/global/_branding.scss

@@ -0,0 +1,29 @@
+.brand-logo,.site-brand {
+  .site-name,.site-description {
+     display: none;
+  }
+  &::before {
+    content: '';
+    display:inline-block;
+    // margin-top:-$global-padding;
+    width: 100%;
+    height: $global-padding*5;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  &.archive{
+    &::before {
+      max-width: 10rem;
+      background-image: url('../img/ARC-HIVE-logo.svg');
+    }
+  }
+  &.eu{
+    &::before {
+      max-width: 15rem;
+      //background-image: url('../img/eu_flag_creative_europe_co_funded_black_right.svg');
+      background-image: url('../img/eu_flag_creative_europe_co_funded_left.svg');
+      //background-image: url('../img/rechts_co-funded-by-the-creative-europe-media-programme-of-the-european-union-flag.png');
+    }
+  }
+}

dist/assets/scss/global/_colors.scss

@@ -0,0 +1,12 @@
+$stone-grey: #CCCCCC;
+$acid-green: #69E344;
+$bubblegum-pink: #F096F9;
+$desert-red: #D75930;
+$mustard-yellow: #F5C042;
+$beach-blue: #5CC8D1;
+$hyperlink-blue: #0000DD;
+$bloody-red: #D32D1F;
+$mid-grey: #808080;
+$antracite-grey: #333333;
+$forest-green: #1E6041;
+$raspberry-purple: #54367B;

dist/assets/scss/global/_gutenberg.scss

@@ -0,0 +1,65 @@
+/*
+Frontend styles for gutenberg blocks
+*/
+
+/** === Base Color Palatte === */
+@each $color, $code in $foundation-palette {
+
+  .has-#{$color}-background-color {
+      // background-color: $code;
+  }
+
+  .has-#{$color}-color {
+      // color: $code;
+  }
+}
+
+/** === Button === */
+.wp-block-button {
+
+	// add general foundation button styling
+	.wp-block-button__link {
+		// @extend .button;
+    @each $color, $code in $foundation-palette {
+
+      &.has-#{$color}-background-color {
+          // background-color: $code;
+      }
+
+      &.has-#{$color}-color {
+          // color: $code;
+      }
+    }
+	}
+
+	// add special styling for squared buttons
+	&.is-style-squared .wp-block-button__link {
+		// border-radius: 0;
+	}
+
+	// add outline styles
+	&.is-style-outline .wp-block-button__link{
+		// @extend .hollow;
+	}
+
+	// set transparent background to block for outline button
+	&.is-style-outline,
+	&.is-style-outline:hover,
+	&.is-style-outline:focus,
+	&.is-style-outline:active {
+    // background: transparent;
+    .wp-block-button__link{
+      // background: transparent;
+    }
+	}
+}
+
+/** === File === */
+.wp-block-file .wp-block-file__button{
+  // @include button();
+}
+
+/** === Image === */
+.wp-block-image {
+  // margin: 0;
+}

dist/assets/scss/global/_typography.scss

@@ -0,0 +1,21 @@
+@font-face {
+    font-family: 'worksans-medium';
+    src: url('../fonts/WorkSans-Medium.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'worksans-mediumitalic';
+    src: url('../fonts/WorkSans-MediumItalic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@mixin font-worksans-medium {
+  font-face: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-weight: normal;
+}
+@mixin font-worksans-mediumitalic {
+  font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-weight: normal;
+}

dist/assets/scss/global/_wp-admin.scss

@@ -0,0 +1,23 @@
+// Fix the issue where the WP admin-bar overlaps the mobile menu
+#wpadminbar {
+  position: fixed !important;
+}
+
+// Make sure that the WP admin-bar does not overlap Foundation components
+body.admin-bar {
+  // Offset sticky top bar
+  &.f-topbar-fixed {
+    .sticky.fixed {
+      margin-top: rem-calc(32);
+    }
+  }
+  // Offset mobile off-canvas menu
+  &.offcanvas {
+    .off-canvas.is-open {
+      top: rem-calc(46);
+      @include breakpoint(small) {
+        top: rem-calc(32);
+      }
+    }
+  }
+}

dist/assets/scss/global/_wp-overrides.scss

@@ -0,0 +1,57 @@
+//.wp-caption > figcaption {
+//  max-width: 100%;
+//  font-size: 0.8rem;
+//  color: #999;
+//  padding: 0.25rem 0;
+//}
+//
+//p.wp-caption-text{
+//  font-size:90%;
+//  color: #666;
+//  padding:rem-calc(10) 0;
+//}
+//
+//.alignleft {
+//  float: left;
+//  padding-right: 1rem;
+//  margin: 0;
+//}
+//
+//.alignright {
+//  float: right;
+//  padding-left: 1rem;
+//  margin: 0;
+//}
+//
+//.aligncenter {
+//  display: block;
+//  margin-left: auto;
+//  margin-right: auto;
+//}
+//
+//.gallery {
+//  @include xy-grid;
+//  @include xy-gutters($negative: true);
+//  @for $i from 1 through 9 {
+//    &.gallery-columns-#{$i} {
+//      @include xy-grid-layout(2, '.gallery-item', true);
+//    }
+//    @include breakpoint(medium){
+//      &.gallery-columns-#{$i} {
+//        @include xy-grid-layout(4, '.gallery-item', true, (small: 30px));
+//      }
+//    }
+//    @include breakpoint(large) {
+//      &.gallery-columns-#{$i} {
+//        @include xy-grid-layout($i, '.gallery-item', true, (small: 30px));
+//      }
+//    }
+//  }
+//  .gallery-icon > a {
+//    @include thumbnail;
+//    @include thumbnail-link;
+//  }
+//  .gallery-icon > img {
+//    @include thumbnail;
+//  }
+//}

dist/assets/scss/modules/_content.scss

@@ -0,0 +1,463 @@
+// general styles
+//----------------
+//
+// mods on fonts and typography
+// not in foundation variables
+// -----------------------------
+
+h1,h2,h3,h4,h5,h6,
+.h1,.h2,.h3,.h4,.h4,.h5,.h6,
+button,.button,
+header nav,
+
+
+h1,h2,h3,h4,h5,h6,
+.h1,.h2,.h3,.h4,.h4,.h5,.h6 {
+  font-variant:all-small-caps;
+  a {
+    color: $body-font-color;
+  }
+}
+.excerpt,.post-excerpt{
+  a {
+    color: $body-font-color;
+    &:hover {
+      p {
+        color: $anchor-color;
+      }
+    }
+  }
+}
+
+//
+// main block
+//--------------
+
+
+main {
+  article {
+    @include xy-grid;
+    header {
+      @include xy-cell(12);
+      .entry-title {
+        width: 100%;
+        text-align: center;
+      }
+    }
+    section {
+      // padding: $global-padding $global-padding*2;
+    }
+    .entry-content,.omekas-entry-content {
+      @include breakpoint(small){
+        @include xy-cell(12);
+        padding: $global-padding*2 $global-padding/2 ;
+        margin:0 auto;
+      }
+      @include breakpoint(medium){
+        @include xy-cell(12);
+        padding: $global-padding*2 $global-padding*3;
+        max-width: 60rem;
+        margin:0 auto;
+        p {
+          // font-size: $global-font-size*1.0;
+          line-height: $paragraph-lineheight*1.1;
+        }
+      }
+      @include breakpoint(xxlarge){
+        // @include xy-cell(12);
+        // padding: $global-padding*2 $global-padding*3;
+        // margin: 0 auto;
+        max-width: 70rem;
+        p {
+          font-size: $global-font-size*1.2;
+          line-height: $paragraph-lineheight*1.15;
+        }
+      }
+    }
+  }
+  aside {
+    @include xy-grid;
+    nav {
+      @include xy-cell(12);
+      display:flex;
+      align-content: center;
+      justify-content: center;
+      padding-bottom: $global-padding * 2;
+    }
+  }
+}
+
+//
+// category view, news,  search results
+//--------------
+
+.category-posts,.archive-posts,.search-results-content{
+  @include xy-grid;
+  header {
+    @include breakpoint(small){
+      @include xy-cell(12);
+      @include flex;
+      @include flex-align(center,top);
+      flex-direction: column;
+      align-items: center;
+      padding-top: $global-padding*3;
+    }
+    @include breakpoint(medium){
+    }
+  }
+  main,aside {
+    @include breakpoint(small){
+      @include xy-cell(12);
+      @include flex;
+      @include flex-align(center,top);
+      padding-top: $global-padding*3;
+    }
+    @include breakpoint(medium){
+    }
+  }
+  main {
+    @include xy-grid;
+    article{
+      text-align:center;
+      @include card-container();
+      @include breakpoint(small){
+        @include xy-cell(12);
+      }
+      @include breakpoint(medium){
+        @include xy-cell(6);
+      }
+      @include breakpoint(large){
+        @include xy-cell(4);
+      }
+      figure {
+        @include breakpoint(small){
+          @include xy-cell(12);
+          height: 58vw;
+          max-width: 100%;
+          overflow: hidden;
+          background-image: url('../img/ARC-HIVE-logo.svg');
+          background-color: rgb(240,240,240);
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: cover;
+        }
+        @include breakpoint(medium){
+          height: 28vw;
+        }
+        @include breakpoint(large){
+          height: 20vw;
+        }
+      }
+      .date {
+        height: 1rem;
+        padding-top: $global-padding*2;
+      }
+      .entry-title {
+        padding-top: $global-padding*2;
+        line-height: 0.7;
+        font-size: $global-font-size*1.5;
+      }
+    }
+  }
+  aside {
+    @include breakpoint(small){
+      padding-top:0;
+      padding-bottom: $global-padding*3;
+    }
+    @include breakpoint(medium){
+      padding-top: $global-padding*3;
+      padding-bottom: 0;
+
+    }
+  }
+  &.resources,&.search-results-content,&.tax-archive_resource_category,&.tax-archive_resource_tag {
+    @include xy-grid;
+    header,main,aside {
+    }
+    main {
+      article{
+        @include breakpoint(small){
+          @include xy-cell(12);
+        }
+        @include breakpoint(medium){
+          @include xy-cell(1 of 3);
+        }
+        @include breakpoint(large){
+          @include xy-cell(1 of 5);
+        }
+      }
+      figure {
+        @include breakpoint(small){
+        }
+        @include breakpoint(medium){
+          height: 18vw;
+        }
+        @include breakpoint(large){
+          height: 10vw;
+        }
+      }
+    }
+  }
+}
+.search-results {
+  article {
+    main {
+      .search-results-content {
+        h1,h2,h3,h4,h5,h6 {
+          display: block;
+        }
+      }
+    }
+  }
+}
+// end category view, news,  search results
+
+
+//
+// collections category
+//--------------
+
+.collections-list {
+  @include xy-grid;
+  header,main,aside {
+    @include xy-cell(12);
+    @include flex;
+    @include flex-align(center,top);
+    padding: $global-padding*3 0;
+  }
+  header {
+    border-top: 1px solid $body-font-color;
+    padding: $global-padding*4 0;
+  }
+  main {
+    @include xy-grid;
+    article{
+      text-align:center;
+      @include card-container();
+      @include breakpoint(small){
+        @include xy-cell();
+      }
+      @include breakpoint(medium){
+      }
+      @include breakpoint(large){
+      }
+    }
+  }
+  aside {
+  }
+}
+// end collections category
+
+//
+// partners
+//---------------------
+
+.partners {
+  .entry-content {
+    max-width: unset;
+    p {
+      padding-left: 30vw;
+      padding-bottom: 2rem;
+      margin-bottom: 2rem;
+      &:after {
+        content: '';
+        display: inline-block;
+        border-bottom: 1px solid $body-font-color;
+        width: 100vw;
+        position: absolute;
+        left: 0;
+        padding-top: 2rem;
+      }
+    }
+    .alignleft {
+      margin: 0;
+      padding: 0;
+    }
+    .wp-block-image {
+      margin: 0;
+    }
+  }
+}
+
+//
+// hero
+// for big announcemnts
+//---------------------
+
+
+.hero {
+  .slides {
+    @include xy-grid();
+    // border-top: 2px solid $primary-color;
+    .slide {
+      @include xy-grid;
+      &.widget {
+        display: flex;
+        align-content: center;
+        justify-content: center;
+      }
+      @include breakpoint(small){
+        width: 100vw;
+        margin: 0;
+        &.widget_text p {
+          padding: $global-padding * 2;
+        }
+        &.widget_media_image {
+          overflow: hidden;
+          img {
+            width:100%;
+          }
+        }
+      }
+      @include breakpoint(medium){
+        &.widget_text p{
+          max-width: 50rem;
+          margin:auto;
+          padding: $global-padding * 2;
+        }
+      }
+      @include breakpoint(large){
+        width: 50%;
+        padding: 0;
+        margin: 0;
+        overflow:hidden;
+        // button,.button {
+        //   @include flex;
+        //   @include flex-align (center,middle);
+        // }
+        &.widget_text p{
+          font-size: $global-font-size*1.2;
+          padding: $global-padding * 2;
+        }
+      }
+      @include breakpoint(xlarge){
+        &.widget_text p{
+          font-size: $global-font-size*1.3;
+          padding: $global-padding*3;
+        }
+      }
+      @include breakpoint(xxlarge){
+        &.widget_text p{
+          font-size: $global-font-size*1.6;
+          padding: $global-padding*3;
+        }
+      }
+      color: $white;
+
+      .logo {
+        @include breakpoint(medium){
+          max-width: 80%;
+        }
+      }
+    }
+    &.primary{
+      .slide:nth-child(odd) {
+        background-color: $primary-color;
+        font-variant: all-small-caps;
+        * {
+          color: $white;
+        }
+      }
+    }
+    &.secondary {
+      .slide,.slide:nth-child(odd) {
+        background-color: $white;
+      }
+    }
+    &.announcement {
+      .slide {
+        width: 100%;
+      }
+      .widget_media_image {
+        height: 10rem;
+      }
+    }
+    &.announcement.top {
+    }
+    &.announcement.middle {
+      border-top: none;
+      margin-top: $global-margin*2;
+      display: flex;
+      align-content: center;
+      justify-content: center;
+      .widget_nav_menu,.widget_tag_cloud {
+        width: auto;
+        overflow: visible;
+      }
+    }
+    &.top.secondary {
+      align-content: center;
+      justify-content: center;
+      ul {
+        margin: 2rem 0;
+      }
+    }
+  }
+  aside {
+    @include xy-grid();
+    // background-color: $secondary-color;
+    .slides {
+      width: 100%;
+      .slide {
+        width: 100%;
+        // &:nth-child(odd) {
+        //   background-color: $secondary-color;
+        // }
+      }
+    }
+    nav {
+      @include xy-cell(auto);
+      @include flex;
+      @include flex-align(spaced,middle);
+      min-height: 6rem;
+      padding: $global-padding 0 ;
+      a {
+        color: $body-font-color;
+      }
+      .button {
+        justify-content:center;
+      }
+    }
+  }
+  &.hero-main {
+    aside {
+      background-color: $secondary-color;
+      .slides {
+        .slide {
+          &:nth-child(odd) {
+            background-color: $secondary-color;
+          }
+        }
+      }
+    }
+  }
+  &.hero-middle{
+    .slides {
+      background-color: $forest-green;
+      * {
+        color: $white;
+      }
+    }
+  }
+  &.hero-last{
+    .slides {
+      background-color: $raspberry-purple;
+      * {
+        color: $white;
+      }
+    }
+  }
+  &.hero-announcement {
+  }
+  //hero secondary
+  &.secondary {
+    border-top: none;
+    background-color: $secondary-color;
+    .slide{
+      figure {
+        background-color: unset;
+      }
+    }
+  }
+}
+//end hero

dist/assets/scss/modules/_editor-style.scss

@@ -0,0 +1,5 @@
+body#tinymce{
+  height: auto; // Fix editor style bug
+  max-width: $grid-row-width; // Give the editor a max-width
+  padding: rem-calc(20) !important;
+}

dist/assets/scss/modules/_footer.scss

@@ -0,0 +1,79 @@
+footer {
+  background-color: $secondary-color;
+  a {
+    color: $body-font-color;
+    &:hover {
+      color: $primary-color;
+    }
+  }
+  h1,h2,h3,h4,h5,h6,
+  .h1,.h2,.h3,.h4,.h5,.h6,
+  p,ul,ol,li {
+    margin: 0;
+  }
+  ul,ol {
+    list-style: none;
+    li {
+      float:left;
+      padding-right: $global-padding;
+    }
+  }
+  .clear.clearfix {
+    width: 100%;
+  }
+  .logo {
+  }
+  .site-brand,.brand-logo {
+    &.archive{
+      &::before {
+        margin-top:unset;
+      }
+    }
+    &.eu {
+      &::before {
+        margin-top:unset;
+        max-width:100%;
+        max-height: 4rem;
+      }
+    }
+  }
+  .copyright,.legal-credits {
+    font-size: $global-font-size*0.8;
+  }
+  .subsection {
+    @include breakpoint(small) {
+       @include xy-grid;
+       @include flex;
+       @include flex-align(left,bottom);
+       border-top: 1px solid black;
+       padding: $global-padding;
+       font-size: $global-font-size * 0.8;
+       &:first-child {
+         //padding-top: $global-padding*3;
+       }
+       .co-founded {
+         text-align:right;
+       }
+     }
+     @include breakpoint(medium) {
+       font-size: $global-font-size;
+     }
+     aside {
+       @include breakpoint(small) {
+         @include xy-cell(12);
+       }
+       @include breakpoint(medium) {
+         @include xy-cell(3);
+       }
+      &.double {
+       @include breakpoint(small) {
+         @include xy-cell(12);
+       }
+       @include breakpoint(medium) {
+         @include xy-cell(6);
+       }
+      }
+    }
+  }
+ }
+

dist/assets/scss/modules/_header.scss

@@ -0,0 +1,75 @@
+
+  header {
+    @include xy-grid();
+    @include xy-gutters(0);
+    main {
+      @include breakpoint(small){
+        @include xy-cell(12);
+        @include flex-align(center, middle);
+        padding: $global-padding $global-padding;
+        min-width: 14rem;
+        text-align: center;
+      }
+      @include breakpoint(large){
+        @include xy-cell(shrink);
+        @include flex-align(left, middle);
+        text-align: unset;
+      }
+    }
+    nav {
+      @include breakpoint(small){
+        @include xy-cell(12);
+        @include flex;
+        @include flex-align(center, middle);
+        padding-bottom: $global-padding*2;
+        a, button {
+          color: $black;
+          &:hover {
+            color: $anchor-color;
+          }
+        }
+        menu {
+          margin: 0;
+          padding: 0;
+          .menu {
+            &.dropdown {
+              justify-content:center;
+              li,.button {
+                min-width: unset;
+                margin:0;
+                padding:0;
+                font-size: $global-font-size*0.9;//$header-menu-font-size;
+              }
+              .button {
+                margin-left: $global-margin;
+                background-color:$input-background;
+              }
+              .is-dropdown-submenu {
+                font-size: $dropdown-font-size * 0.95;
+                min-width: 10rem;
+                box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
+              }
+            }
+          }
+        }
+      }
+      @include breakpoint(large) {
+        @include xy-cell(auto);
+        @include flex;
+        @include flex-align(right, middle);
+        padding-bottom: 0;//$global-padding;
+        menu {
+          margin: inherit;
+          padding: inherit;
+          .menu {
+            &.dropdown {
+              justify-content: end;
+              li,.button {
+                font-size: $global-font-size*1.4;//$header-menu-font-size;
+              }
+            }
+          }
+        }
+      }
+    }
+  }

dist/assets/scss/modules/_navigation.scss

@@ -0,0 +1,169 @@
+.widget_nav_menu {
+    .menu-resources-menu-container {
+      position: relative;
+      margin-right: $global-margin;
+    }
+    ul.menu {
+      list-style: none;
+      text-align: left;
+      li {
+        position: relative;
+        margin-right: $global-margin/2;
+      }
+      a {
+        display:block;
+        color: $black;
+        justify-content: left !important;
+      }
+      .is-active > a {
+        background: unset;
+        color: scale-color($anchor-color, $saturation: -50%, $lightness: 50%)
+      }
+      width:auto;
+      li.menu-item-has-children {
+        > a {
+          &:after {
+            display:block;
+            width:0;
+            height:0;
+            border:inset 6px;
+            content:'';
+            border-bottom-width:0;
+            border-top-style:solid;
+            border-color: $anchor-color-alt transparent transparent transparent;
+            margin-top: 0px;
+            margin-left: 5px;
+            position: absolute;
+            right: 0;
+            top: 42%;
+          }
+        }
+        ul.sub-menu {
+          list-style: none;
+          background-color: scale-color($anchor-color, $lightness: 98%);
+          position: absolute;
+          left:0%;
+          top:0;
+          margin:0;
+          padding:0;
+          width: auto;
+          visibility:hidden;
+          opacity:0;
+          transition: transform 0.5s;
+          transform: translateY(-$global-padding);
+          li.menu-item-has-children {
+            > a {
+              &:after {
+                position: absolute;
+                right: 0;
+                margin-left: 10px;
+                margin-right: 2px;
+                border-bottom-width: 6px;
+                border-right-width: 0;
+                border-right-style:solid;
+                border-color: transparent transparent transparent $anchor-color-alt;
+              }
+            }
+          }
+        }
+        &:hover {
+          > a {
+            color: scale-color($anchor-color, $lightness: 50%);
+            &:after {
+              color: scale-color($anchor-color, $lightness: 50%);
+            }
+          }
+          > ul.sub-menu {
+            top:100%;
+            visibility: visible;
+            opacity: 1;
+            transform: translateY(0px);
+            &:hover {
+              background-color: scale-color($anchor-color, $lightness: 98%);
+            }
+            ul.sub-menu {
+              top: 0%;
+              left: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+.widget_tag_cloud {
+    position: relative;
+    overflow: visible;
+    margin-left: $global-margin;
+    $tags-background-color: scale-color($anchor-color, $lightness: 95%);
+    a {
+      display: inline;
+      color: $black;
+      &:before, &:after {
+        display: inline-block;
+      }
+    }
+    h6 {
+      visibility: hidden;
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    &:before {
+      content: '#tags';
+      color: $primary-color;
+      background-color:  $tags-background-color;
+      padding:$global-padding/4 $global-padding/2;
+    }
+    &:hover{
+      .tagcloud {
+        top: 1.6rem;
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0px);
+        background-color: scale-color($tags-background-color, $alpha: -100%);
+        @include breakpoint(small){
+          width: 80vw;
+          right: -1rem;
+          text-align: right;
+        }
+        @include breakpoint(medium){
+          width: 90vw;
+          right: -15vw;
+          text-align: center;
+        }
+        @include breakpoint(large){
+          width: 90vw;
+          right: -25vw;
+        }
+
+      }
+    }
+    .tagcloud {
+      position: absolute;
+      visibility:hidden;
+      opacity:0;
+      transition: transform 0.5s,background-color 0.5s;
+      transform: translateY(-$global-padding);
+      background-color: $tags-background-color;
+      padding: $global-padding;
+      a {
+        display: inline-block !important;
+        background-color: $tags-background-color;
+        padding:$global-padding/4 $global-padding/2;
+        font-size: $global-font-size * 0.7 !important;
+        &:before {
+          content: '#';
+          display: inline-block;
+        }
+        &:hover {
+          color: $anchor-color;
+        }
+      }
+    }
+  }
+@include breakpoint(small){
+}
+@include breakpoint(medium){
+}
+@include breakpoint(large){
+}

dist/assets/scss/templates/_front.scss

@@ -0,0 +1,201 @@
+// Page header
+.front-hero {
+  .marketing {
+    @include xy-grid-container(55rem);
+    @include xy-grid;
+  }
+
+  @include breakpoint(small) {
+    background: url('../images/demo/hero-bg-foundation-6-small.svg') bottom center;
+    background-size: cover;
+    background-position: bottom;
+    padding: rem-calc(65%) 0;
+    margin: 0 0 rem-calc(32);
+    height: auto;
+    position: relative;
+    text-align: left;
+  }
+
+  @include breakpoint(medium) {
+    background: url('../images/demo/hero-bg-foundation-6-large.svg') bottom center;
+    background-size: cover;
+    background-position: center;
+    height: rem-calc(685);
+    margin: 0 0 rem-calc(72);
+  }
+
+  .watch {
+    @include breakpoint(small) {
+      @include xy-cell(7);
+    }
+
+    @include breakpoint(medium) {
+      @include xy-cell(12);
+    }
+
+    a {
+      color: #B4C9D1;
+      cursor: pointer;
+      font-weight: 400;
+      margin-right: rem-calc(20);
+    }
+
+    a:hover {
+      color: #fff;
+    }
+
+    #stargazers {
+      :before {
+        content: "\f09b";
+        font-family: FontAwesome;
+        font-style: normal;
+        font-weight: normal;
+        text-decoration: inherit;
+        color: #B4C9D1;
+        margin-right: rem-calc(8);
+      }
+    }
+
+    #twitter {
+      :before {
+        content: "\f099";
+        font-family: FontAwesome;
+        font-style: normal;
+        font-weight: normal;
+        text-decoration: inherit;
+        color: #B4C9D1;
+        margin-right: rem-calc(8);
+      }
+    }
+
+  }
+
+  .tagline {
+    @include breakpoint(small) {
+      @include xy-cell(8);
+    }
+
+    @include breakpoint(medium) {
+      @include xy-cell(5);
+      padding-top: 6rem;
+    }
+  }
+
+  h1 {
+    color: #fff;
+    font-weight: 500;
+
+    @include breakpoint(small) {
+      font-size: 2.2rem;
+    }
+
+    @include breakpoint(medium) {
+      font-size: 2.875rem;
+    }
+  }
+
+  h4 {
+    color: #fefefe;
+    font-weight: 300;
+    font-size: 1.3125rem;
+  }
+
+  .download {
+    margin-top: rem-calc(20);
+  }
+}
+
+// Intro
+.intro {
+  @include xy-grid-container;
+  @include xy-grid;
+
+  .fp-intro {
+    @include breakpoint(small) {
+      @include xy-cell(12);
+    }
+
+    @include breakpoint(medium) {
+      @include xy-cell(10);
+      @include xy-cell-offset(1);
+
+      h2 {
+        font-weight: 300;
+        margin-bottom: 1.5rem;
+      }
+
+      h4 {
+        font-size: 1.125rem;
+        line-height: 1.6;
+        color: #777;
+        margin-bottom: 2rem;
+      }
+    }
+  }
+}
+
+// Section divider
+.section-divider {
+  @include xy-grid-container;
+  @include xy-grid;
+
+  hr {
+    @include xy-cell(12);
+    @extend .dotted;
+    box-sizing: border-box;
+  }
+}
+
+// Benefits
+.benefits {
+  @include xy-grid-container;
+  @include xy-grid;
+  text-align: center;
+
+  header {
+    @include xy-cell(12);
+
+    h2 {
+      font-weight: 300;
+    }
+
+    h4 {
+      font-size: 1.125rem;
+      line-height: 1.6;
+      color: #777;
+    }
+  }
+
+  .semantic,
+  .responsive,
+  .customizable,
+  .professional {
+    @include breakpoint(small) {
+      @include xy-cell(12);
+    }
+
+    @include breakpoint(medium) {
+      @include xy-cell(3);
+    }
+
+    img {
+      padding: 1.25rem;
+      margin: 1rem auto 0 auto;
+    }
+
+    h3 {
+      color: #0a0a0a;
+      font-weight: 300;
+      font-size: 1.75rem;
+    }
+
+    p {
+      font-size: 0.9375rem;
+    }
+  }
+
+  .why-foundation {
+    @include xy-cell(12);
+    margin-top: 4rem;
+  }
+}

dist/assets/scss/templates/_kitchen-sink.scss

@@ -0,0 +1,84 @@
+.kitchen-sink-header {
+  @include xy-cell(12);
+}
+
+
+.kitchen-sink-components {
+  hr {
+    margin: 3rem 0;
+  }
+
+  @include breakpoint(small) {
+    @include xy-cell(12);
+  }
+
+  @include breakpoint(large) {
+    @include xy-cell(9);
+  }
+}
+
+.kitchen-sink-nav {
+  @include breakpoint(small) {
+    display: none;
+  }
+
+  @include breakpoint(large) {
+    @include xy-cell(3);
+    display: block;
+    float: right;
+
+    .docs-sub-menu {
+      font-size: 0.85rem;
+      margin-top: 1rem;
+    }
+
+    .docs-menu-title {
+      text-transform: uppercase;
+      font-size: 0.75rem;
+      color: $dark-gray;
+      font-weight: bold;
+      line-height: 1;
+      padding-left: 0.9rem;
+      margin-bottom: 0.5rem;
+      border-top: 1px solid $medium-gray;
+      margin-top: 1rem;
+      padding-top: 1.5rem;
+    }
+
+    .docs-toc {
+      width: 100%;
+      padding-left: 4rem;
+      padding-right: 1rem;
+    }
+
+    .docs-toc .active {
+      background: #2199e8;
+      color: white;
+    }
+
+    .docs-toc .docs-sub-menu:first-child .docs-menu-title {
+      margin-top: 0;
+      border-top: 0;
+      padding-top: 0;
+    }
+  }
+}
+
+.kitchen-sink-grid {
+  .grid-x {
+    background: #d6ecfa;
+    font-size: 12px;
+    line-height: 2rem;
+    margin-bottom: 1.5rem;
+    
+    .cell,:nth-child(odd) {
+      background: #7bc1ef;
+      color: #0a0a0a;
+    }
+
+    .cell:nth-child(even) {
+      background: #1779ba;
+      color: #fefefe;
+    }
+  }
+}

functions.php

@@ -26,10 +26,8 @@ require_once( 'library/class-foundationpress-comments.php' );
 /** Register all navigation menus */
 require_once( 'library/navigation.php' );
 
-/** Add menu walkers for top-bar and off-canvas */
-require_once( 'library/class-foundationpress-top-bar-walker.php' );
-//require_once( 'library/class-foundationpress-mobile-walker.php' );
-require_once( 'library/class-foundationpress-home-hero-walker.php' );
+/** Add menu walkers */
+require_once( 'library/class-foundationpress-menu-walkers.php' );
 
 /** Create widget areas in sidebar and footer */
 require_once( 'library/widget-areas.php' );

gulpfile.babel.js

@@ -134,7 +134,8 @@ function sass() {
     // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
   ].filter(Boolean);
 
-//  return gulp.src('src/assets/scss/app.scss')
+  //return gulp.src('src/assets/scss/app.scss')
+  //  if need editor for CMS backend uncoment below coment above
   //  we need editor.scss for the wordpress editor styles
   return gulp.src(['src/assets/scss/app.scss','src/assets/scss/editor.scss'])
     .pipe($.sourcemaps.init())
@@ -187,6 +188,8 @@ function javascript() {
 
 // Copy images to the "dist" folder
 // In production, the images are compressed
+function compressimages() {
+}
 function images() {
   return gulp.src('src/assets/images/**/*')
     .pipe($.if(PRODUCTION, $.imagemin([
@@ -264,33 +267,36 @@ gulp.task('phpcbf', function () {
   .pipe(gulp.dest('.'));
 });
 
+// NOT needed in Wordpress
 // Start a server with BrowserSync to preview the site in
-function server(done) {
-  browser.init({
-    server: PATHS.dist, port: PORT
-  }, done);
-}
+//function server(done) {
+//  browser.init({
+//    server: PATHS.dist, port: PORT
+//  }, done);
+//}
 
 
+// NOT needed in Wordpress
 // Reload the browser with BrowserSync
-function reload(done) {
-  browser.reload();
-  done();
-}
+//function reload(done) {
+//  browser.reload();
+//  done();
+//}
 
 // Watch for changes to static assets, pages, Sass, and JavaScript
 function watch() {
   gulp.watch(PATHS.assets, copy);
-//  gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
   gulp.watch('src/assets/scss/**/*.scss', sass)
     .on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
     .on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
-  gulp.watch('src/assets/images/**/*').on('all', gulp.series(images, browser.reload));
-  gulp.watch('src/assets/img/**/*').on('all', gulp.series(img, browser.reload));
+//  gulp.watch('src/assets/images/**/*').on('all', gulp.series(images, browser.reload));
+//  gulp.watch('src/assets/img/**/*').on('all', gulp.series(img, browser.reload));
+  gulp.watch('src/assets/{images,img}/**/*').on('all', gulp.series(images, browser.reload));
   gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
-  gulp.watch('**/*.php', reload)
-    .on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
-    .on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
+//  gulp.watch('**/*.php', reload)
+//    .on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
+//    .on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
+//  gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
 //  gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
 //  gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
 //  gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
@@ -301,10 +307,13 @@ function watch() {
 // Build the "dist" folder by running all of the below tasks
 gulp.task('build',
   gulp.series(clean, gulp.parallel(javascript, images, img, copy), sass));
+  //gulp.series(clean, gulp.parallel(javascript, images, copy), sass));
 
 // Build the site, run the server, and watch for file changes
 gulp.task('default',
-  gulp.series('build', server, watch));
+  //gulp.series('build', server, watch));
+  //no need of server, just watch
+  gulp.series('build', watch));
 
 // Package task
 gulp.task('package',

library/class-foundationpress-home-hero-walker.php

@@ -1,20 +0,0 @@
-<?php
-/**
- * Customize the output of menus for Home Hero bottom bar
- *
- * @package arcHIVE-theme
- * @since arcHIVE-theme 1.0.0
- */
-
-/**
- * Big thanks to Brett Mason (https://github.com/brettsmason) for the awesome walker
- */
-
-if ( ! class_exists( 'Foundationpress_Home_Hero_Bar_Walker' ) ) :
-	class Foundationpress_Home_Hero_Bar_Walker extends Walker_Nav_Menu {
-		function start_lvl( &$output, $depth = 0, $args = array() ) {
-			$indent  = str_repeat( "\t", $depth );
-			$output .= "\n$indent<ul class=\"menu\">\n";
-		}
-	}
-endif;

library/class-foundationpress-menu-walkers.php

@@ -0,0 +1,73 @@
+<?php
+/**
+ * Customize the output of menus
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+/**
+ * Big thanks to Brett Mason (https://github.com/brettsmason) for the awesome walker
+ */
+
+/**
+ * Customize the output of menus for Foundation mobile walker
+ */
+
+//if ( ! class_exists( 'Foundationpress_Mobile_Walker' ) ) :
+//	class Foundationpress_Mobile_Walker extends Walker_Nav_Menu {
+//		function start_lvl( &$output, $depth = 0, $args = array() ) {
+//			$indent  = str_repeat( "\t", $depth );
+//			$output .= "\n$indent<ul class=\"vertical nested menu\">\n";
+//		}
+//	}
+//endif;
+
+/**
+ * Customize the output of menus for Foundation top bar
+ */
+
+if ( ! class_exists( 'Foundationpress_Top_Bar_Walker' ) ) :
+	class Foundationpress_Top_Bar_Walker extends Walker_Nav_Menu {
+		function start_lvl( &$output, $depth = 0, $args = array() ) {
+			$indent  = str_repeat( "\t", $depth );
+			$output .= "\n$indent<ul class=\"dropdown menu vertical\" data-toggle>\n";
+		}
+	}
+endif;
+/**
+ * Customize the output of menus for Home Hero bottom bar
+ */
+
+if ( ! class_exists( 'Foundationpress_Home_Hero_Bar_Walker' ) ) :
+	class Foundationpress_Home_Hero_Bar_Walker extends Walker_Nav_Menu {
+		function start_lvl( &$output, $depth = 0, $args = array() ) {
+			$indent  = str_repeat( "\t", $depth );
+			$output .= "\n$indent<ul class=\"menu\">\n";
+		}
+	}
+endif;
+
+/**
+ * Customize the output of menus for Home Hero middle bottom bar
+ */
+if ( ! class_exists( 'Foundationpress_Home_Hero_Middle_Bar_Walker' ) ) :
+	class Foundationpress_Home_Hero_Middle_Bar_Walker extends Walker_Nav_Menu {
+		function start_lvl( &$output, $depth = 0, $args = array() ) {
+			$indent  = str_repeat( "\t", $depth );
+			$output .= "\n$indent<ul class=\"menu\">\n";
+		}
+	}
+endif;
+
+/**
+ * Customize the output of menus for Home Hero Last bottom bar
+ */
+if ( ! class_exists( 'Foundationpress_Home_Hero_Last_Bar_Walker' ) ) :
+	class Foundationpress_Home_Hero_Last_Bar_Walker extends Walker_Nav_Menu {
+		function start_lvl( &$output, $depth = 0, $args = array() ) {
+			$indent  = str_repeat( "\t", $depth );
+			$output .= "\n$indent<ul class=\"menu\">\n";
+		}
+	}
+endif;

library/class-foundationpress-mobile-walker.php

@@ -1,20 +0,0 @@
-<?php
-/**
- * Customize the output of menus for Foundation mobile walker
- *
- * @package arcHIVE-theme
- * @since arcHIVE-theme 1.0.0
- */
-
-/**
- * Big thanks to Brett Mason (https://github.com/brettsmason) for the awesome walker
- */
-
-if ( ! class_exists( 'Foundationpress_Mobile_Walker' ) ) :
-	class Foundationpress_Mobile_Walker extends Walker_Nav_Menu {
-		function start_lvl( &$output, $depth = 0, $args = array() ) {
-			$indent  = str_repeat( "\t", $depth );
-			$output .= "\n$indent<ul class=\"vertical nested menu\">\n";
-		}
-	}
-endif;

library/class-foundationpress-top-bar-walker.php

@@ -1,20 +0,0 @@
-<?php
-/**
- * Customize the output of menus for Foundation top bar
- *
- * @package arcHIVE-theme
- * @since arcHIVE-theme 1.0.0
- */
-
-/**
- * Big thanks to Brett Mason (https://github.com/brettsmason) for the awesome walker
- */
-
-if ( ! class_exists( 'Foundationpress_Top_Bar_Walker' ) ) :
-	class Foundationpress_Top_Bar_Walker extends Walker_Nav_Menu {
-		function start_lvl( &$output, $depth = 0, $args = array() ) {
-			$indent  = str_repeat( "\t", $depth );
-			$output .= "\n$indent<ul class=\"dropdown menu vertical\" data-toggle>\n";
-		}
-	}
-endif;

library/enqueue-scripts.php

@@ -42,7 +42,9 @@ if ( ! function_exists( 'foundationpress_scripts' ) ) :
 
 		// Enqueue the main Stylesheet.
 		//wp_enqueue_style( 'main-stylesheet', get_stylesheet_directory_uri() . '/dist/assets/css/' . foundationpress_asset_path( 'app.css' ), array(), '2.10.4', 'all' );
-		wp_enqueue_style( 'main-stylesheet', get_stylesheet_directory_uri() . '/dist/assets/css/' . foundationpress_asset_path( 'app.css' ), array(), filemtime(get_stylesheet_directory_uri() . '/dist/assets/css/' . foundationpress_asset_path( 'app.css' )), 'all' );
+		// wp_enqueue_style( 'main-stylesheet', get_stylesheet_directory_uri() . '/dist/assets/css/' . foundationpress_asset_path( 'app.css' ), array(), filemtime(get_stylesheet_directory_uri() . '/dist/assets/css/' . foundationpress_asset_path( 'app.css' )), 'all' );
+		// https://developer.wordpress.org/reference/functions/wp_enqueue_style/#comment-2056
+		wp_enqueue_style( 'main-stylesheet', get_stylesheet_directory_uri() . '/dist/assets/css/' . foundationpress_asset_path( 'app.css' ), array(), filemtime(get_stylesheet_directory_uri() . '/dist/assets/css/' . foundationpress_asset_path( 'app.css' )), false );
 
 		// Deregister the jquery version bundled with WordPress.
 		wp_deregister_script( 'jquery' );

library/navigation.php

@@ -10,8 +10,10 @@
 register_nav_menus(
 	array(
 		'top-bar-r'  => esc_html__( 'Right Top Bar', 'foundationpress' ),
+		'home-hero-bar' => esc_html__( 'Home Hero Bar', 'foundationpress' ),
+		'home-hero-middle-bar' => esc_html__( 'Home Hero Middle Bar', 'foundationpress' ),
+		'home-hero-last-bar' => esc_html__( 'Home Hero Last Bar', 'foundationpress' ),
 //		'mobile-nav' => esc_html__( 'Mobile', 'foundationpress' ),
-		'home-hero-bar' => esc_html__( 'Home Hero bar', 'foundationpress' ),
 	)
 );
 
@@ -26,8 +28,8 @@ if ( ! function_exists( 'foundationpress_top_bar_r' ) ) {
 		wp_nav_menu(
 			array(
 				'container'      => false,
-				'menu_class'     => 'menu',
-				'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
+				'menu_class'     => 'dropdown menu',
+				'items_wrap'     => '<ul id="%1$s" class="%2$s" data-dropdown-menu>%3$s</ul>',
 				'theme_location' => 'top-bar-r',
 				'depth'          => 3,
 				'fallback_cb'    => false,
@@ -38,6 +40,72 @@ if ( ! function_exists( 'foundationpress_top_bar_r' ) ) {
 }
 
 
+
+
+/**
+ * Desktop navigation - Home Hero bottom bar
+ *
+ * @link http://codex.wordpress.org/Function_Reference/wp_nav_menu
+ */
+if ( ! function_exists( 'foundationpress_home_hero_bar' ) ) {
+	function foundationpress_home_hero_bar() {
+		wp_nav_menu(
+			array(
+				'container'      => 'nav', // include the nav container
+				'menu_class'     => 'menu button hollow',
+				'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
+				'theme_location' => 'home-hero-bar',
+				'depth'          => 3,
+				'fallback_cb'    => false,
+				'walker'         => new Foundationpress_Home_Hero_Bar_Walker(),
+			)
+		);
+	}
+}
+
+
+/**
+ * Desktop navigation - Home Hero middle bottom bar
+ *
+ * @link http://codex.wordpress.org/Function_Reference/wp_nav_menu
+ */
+if ( ! function_exists( 'foundationpress_home_hero_middle_bar' ) ) {
+	function foundationpress_home_hero_middle_bar() {
+		wp_nav_menu(
+			array(
+				'container'      => 'nav',//true, // include the nav container
+				'menu_class'     => 'menu button hollow',
+				'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
+				'theme_location' => 'home-hero-middle-bar',
+				'depth'          => 3,
+				'fallback_cb'    => false,
+				'walker'         => new Foundationpress_Home_Hero_Middle_Bar_Walker(),
+			)
+		);
+	}
+}
+
+/**
+ * Desktop navigation - Home Hero Last bottom bar
+ *
+ * @link http://codex.wordpress.org/Function_Reference/wp_nav_menu
+ */
+if ( ! function_exists( 'foundationpress_home_hero_last_bar' ) ) {
+	function foundationpress_home_hero_last_bar() {
+		wp_nav_menu(
+			array(
+				'container'      => 'nav',//true, // include the nav container
+				'menu_class'     => 'menu button hollow',
+				'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
+				'theme_location' => 'home-hero-last-bar',
+				'depth'          => 3,
+				'fallback_cb'    => false,
+				'walker'         => new Foundationpress_Home_Hero_Last_Bar_Walker(),
+			)
+		);
+	}
+}
+
 /**
  * Mobile navigation - topbar (default) or offcanvas
  */
@@ -58,29 +126,6 @@ if ( ! function_exists( 'foundationpress_top_bar_r' ) ) {
 //}
 
 
-
-/**
- * Desktop navigation - Home Hero bottom bar
- *
- * @link http://codex.wordpress.org/Function_Reference/wp_nav_menu
- */
-if ( ! function_exists( 'foundationpress_home_hero_bar' ) ) {
-	function foundationpress_home_hero_bar() {
-		wp_nav_menu(
-			array(
-				'container'      => false,
-				'menu_class'     => 'menu button hollow',
-				'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
-				'theme_location' => 'home-hero-bar',
-				'depth'          => 3,
-				'fallback_cb'    => false,
-				'walker'         => new Foundationpress_Home_Hero_Bar_Walker(),
-			)
-		);
-	}
-}
-
-
 /**
  * Add support for buttons in the top-bar menu:
  * 1) In WordPress admin, go to Apperance -> Menus.

library/theme-support.php

@@ -31,6 +31,11 @@ if ( ! function_exists( 'foundationpress_theme_support' ) ) :
 		// Add post thumbnail support: http://codex.wordpress.org/Post_Thumbnails
 		add_theme_support( 'post-thumbnails' );
 		
+		// Add custom logo support
+		// https://developer.wordpress.org/themes/functionality/custom-logo/
+		add_theme_support( 'custom-logo' );
+
+
 		// RSS thingy
 		add_theme_support( 'automatic-feed-links' );
 

library/widget-areas.php

@@ -6,14 +6,55 @@
  * @since arcHIVE-theme 1.0.0
  */
 
-if ( ! function_exists( 'foundationpress_sidebar_widgets' ) ) :
-	function foundationpress_sidebar_widgets() {
+if ( ! function_exists( 'arcHIVE_sidebar_widgets' ) ) :
+	function arcHIVE_sidebar_widgets() {
 	 register_sidebar(
 			array(
-				'id'            => 'home-announcement-widgets',
-				'name'          => __( 'Home Announcement widgets', 'foundationpress' ),
-				'description'   => __( 'Drag widgets to this Home page container.', 'foundationpress' ),
-				'before_widget' => '<section id="%1$s" class="widget slide %2$s">',
+				'id'            => 'home-announcement-widgets-top-primary',
+				'name'          => __( 'Home Announcement Top Primary area', 'foundationpress' ),
+				'description'   => __( 'Drag widgets to this Home page container that will show at the top of the home page.', 'foundationpress' ),
+				'before_sidebar'=> '<main class="slides top primary">',
+				'after_sidebar' => '</main>',
+				'before_widget' => '<section id="%1$s" class="widget slide home-announcement %2$s">',
+				'after_widget'  => '</section>',
+				'before_title'  => '<h6>',
+				'after_title'   => '</h6>',
+			)
+		);
+	 register_sidebar(
+			array(
+				'id'            => 'home-announcement-widgets-top-secondary',
+				'name'          => __( 'Home Announcement Top Secondary area', 'foundationpress' ),
+				'description'   => __( 'Drag widgets to this Home page container that will show at the top of the home page on the secondary area.', 'foundationpress' ),
+				'before_sidebar'=> '<main class="slides top secondary">',
+				'after_sidebar' => '</main>',
+				'before_widget' => '<section id="%1$s" class="widget home-announcement %2$s">',
+				'after_widget'  => '</section>',
+				'before_title'  => '<h6>',
+				'after_title'   => '</h6>',
+			)
+		);
+	 register_sidebar(
+			array(
+				'id'            => 'home-announcement-middle-widgets',
+				'name'          => __( 'Home Announcement Middle', 'foundationpress' ),
+				'description'   => __( 'Drag widgets to this Home page container that will show in the middle of the home page.', 'foundationpress' ),
+				'before_sidebar'=> '<main class="slides middle">',
+				'after_sidebar' => '</main>',
+				'before_widget' => '<section id="%1$s" class="widget slide home-middle-announcement %2$s">',
+				'after_widget'  => '</section>',
+				'before_title'  => '<h6>',
+				'after_title'   => '</h6>',
+			)
+		);
+	 register_sidebar(
+			array(
+				'id'            => 'home-announcement-bottom-widgets',
+				'name'          => __( 'Home Announcement Bottom', 'foundationpress' ),
+				'description'   => __( 'Drag widgets to this Home page container that will show at the bottom of the home page.', 'foundationpress' ),
+				'before_sidebar'=> '<main class="slides bottom">',
+				'after_sidebar' => '</main>',
+				'before_widget' => '<section id="%1$s" class="widget slide home-bottom-announcement %2$s">',
 				'after_widget'  => '</section>',
 				'before_title'  => '<h6>',
 				'after_title'   => '</h6>',
@@ -22,14 +63,42 @@ if ( ! function_exists( 'foundationpress_sidebar_widgets' ) ) :
 		register_sidebar(
 			array(
 				'id'            => 'announcement-widgets',
-				'name'          => __( 'Announcement widgets', 'foundationpress' ),
+				'name'          => __( 'Announcement', 'foundationpress' ),
 				'description'   => __( 'Drag widgets to this announcement container.', 'foundationpress' ),
+				'before_sidebar'=> '<main class="slides announcement">',
+				'after_sidebar' => '</main>',
 				'before_widget' => '<section id="%1$s" class="widget slide %2$s">',
 				'after_widget'  => '</section>',
 				'before_title'  => '<h6>',
 				'after_title'   => '</h6>',
 			)
 		);
+		register_sidebar(
+			array(
+				'id'            => 'announcement-resources-top-widgets',
+				'name'          => __( 'Resources Announcement top', 'foundationpress' ),
+				'description'   => __( 'Drag widgets to this announcement container to be displayed in Resources primary area.', 'foundationpress' ),
+				'before_sidebar'=> '<main class="slides announcement top">',
+				'after_sidebar' => '</main>',
+				'before_widget' => '<section id="%1$s" class="widget slide top %2$s">',
+				'after_widget'  => '</section>',
+				'before_title'  => '<h6>',
+				'after_title'   => '</h6>',
+			)
+		);
+		register_sidebar(
+			array(
+				'id'            => 'announcement-resources-middle-widgets',
+				'name'          => __( 'Resources Announcement middle', 'foundationpress' ),
+				'description'   => __( 'Drag widgets to this announcement container to be displayed in Resources secondary area.', 'foundationpress' ),
+				'before_sidebar'=> '<main class="slides announcement middle">',
+				'after_sidebar' => '</main>',
+				'before_widget' => '<section id="%1$s" class="widget slide middle %2$s">',
+				'after_widget'  => '</section>',
+				'before_title'  => '<h6>',
+				'after_title'   => '</h6>',
+			)
+		);
 
 		register_sidebar(
 			array(
@@ -44,5 +113,5 @@ if ( ! function_exists( 'foundationpress_sidebar_widgets' ) ) :
 		);
 	}
 
-	add_action( 'widgets_init', 'foundationpress_sidebar_widgets' );
+	add_action( 'widgets_init', 'arcHIVE_sidebar_widgets' );
 endif;

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "archive-wp-theme",
+  "name": "arcHIVE-wp-theme",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -3456,9 +3456,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001218",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001218.tgz",
-      "integrity": "sha512-0ASydOWSy3bB88FbDpJSTt+PfDwnMqrym3yRZfqG8EXSQ06OZhF+q5wgYP/EN+jJMERItNcDQUqMyNjzZ+r5+Q==",
+      "version": "1.0.30001332",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz",
+      "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==",
       "dev": true
     },
     "caseless": {

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "archive-wp-theme",
+  "name": "arcHIVE-wp-theme",
   "title": "arcHIVEwordpressTheme",
   "version": "1.0.0",
   "description": "arcHIVE theme is a design by Oficina De Disseny converted into HTML5, CSS and PHP by vitrubio.net for Hangar.org",
   "homepage": "https://arc-hive.zone",
-  "license": "MIT",
+  "license": "GPL v3",
   "main": "gulpfile.babel.js",
   "scripts": {
     "start": "gulp",

page-templates/front.php

@@ -6,11 +6,29 @@ get_header(); ?>
 
 
 
-	<?php get_template_part( 'template-parts/home', 'announcement' ); ?>
+	<?php get_template_part( 'template-parts/home', 'announcement-main' ); ?>
 
 	<article>
-    <main>
-	    <?php get_template_part( 'template-parts/section', 'news' ); ?>
+		<main>
+    <?php
+    //https://developer.wordpress.org/reference/functions/get_template_part/#comment-4130
+			get_template_part( 'template-parts/section', 'categoryposts', array('category_name' => 'news', 'post_per_page' => '3' ) );
+     ?>
 		</main>
-  </article>
+	</article>
+
+	<?php get_template_part( 'template-parts/home', 'announcement-middle' ); ?>
+
+	<article>
+		<main>
+    <?php
+    //https://developer.wordpress.org/reference/functions/get_template_part/#comment-4130
+			get_template_part( 'template-parts/section', 'categoryposts', array('category_name' => 'featured-artworks', 'post_per_page' => '3' ) );
+     ?>
+		</main>
+	</article>
+
+
+	<?php get_template_part( 'template-parts/home', 'announcement-bottom' ); ?>
+
 <?php get_footer();

search.php

@@ -0,0 +1,75 @@
+<?php
+/**
+ * The search template file
+ *
+ * This is the most generic template file in a WordPress theme
+ * and one of the two required files for a theme (the other being style.css).
+ * It is used to display a page when nothing more specific matches a query.
+ * e.g., it puts together the home page when no home.php file exists.
+ *
+ * Learn more: {@link https://codex.wordpress.org/Template_Hierarchy}
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+get_header(); ?>
+
+<?php get_template_part( 'template-parts/announcement' ); ?>
+
+  <article>
+    <main>
+      <section class="search-results-content">
+        <header>
+          <h4>search results for:</h4>
+          <h2>
+            <span class="search-query-terms">
+              <?php echo get_search_query( ); ?>
+            </h2>
+          </header>
+
+
+          <main class="">
+            <?php if ( have_posts() ) : ?>
+            <?php while ( have_posts() ) : the_post(); ?>
+            <article class="">
+              <?php if ( has_post_thumbnail() ) :?>
+                <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+                  <figure style="background-image: url(<?php echo get_the_post_thumbnail_url();?>);">
+                  </figure>
+                </a>
+              <?php else :?>
+                <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+                  <figure style="background-image: url(<?php echo catch_post_first_image();?>);">
+                  </figure>
+                </a>
+              <?php endif;?>
+              <h5 class="date">
+                <?php //the_date('d.m.Y');?>
+              </h5>
+              <h3 class="entry-title">
+                <a href="<?php the_permalink(); ?>" rel="bookmark">
+                  <?php the_title(); ?>
+                </a>
+              </h3>
+                <section class="excerpt post-excerpt">
+                  <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+                    <?php the_excerpt() ?>
+                </a>
+              </section>
+            </article>
+            <?php endwhile;//end of the loop ?>
+          </main>
+          <?php //pagination here ?>
+          <aside>
+            <nav>
+              <!--a href="" class="button hollow">see more news</a-->
+            </nav>
+          </aside>
+        <?php else : //if no post in query ?>
+          <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
+        <?php endif; ?>
+
+    </main>
+  </article>
+<?php get_footer();

single-archive_resource.php

@@ -0,0 +1,74 @@
+<?php
+/**
+ * The main template file
+ *
+ * This is the most generic template file in a WordPress theme
+ * and one of the two required files for a theme (the other being style.css).
+ * It is used to display a page when nothing more specific matches a query.
+ * e.g., it puts together the home page when no home.php file exists.
+ *
+ * Learn more: {@link https://codex.wordpress.org/Template_Hierarchy}
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+get_header(); ?>
+
+  <article>
+    <main>
+		<?php if ( have_posts() ) : ?>
+
+			<?php /* Start the Loop */ ?>
+			<?php while ( have_posts() ) : the_post(); ?>
+				<?php //get_template_part( 'template-parts/content', get_post_format() ); ?>
+
+        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+          <header>
+        	<?php
+            //https://developer.wordpress.org/reference/functions/permalink_anchor/
+            if ( is_single() ) {
+              permalink_anchor();
+        			the_title( '<h1 class="entry-title">', '</h1>' );
+        		} else {
+              permalink_anchor();
+        			the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
+        		}
+        	?>
+        		<?php //foundationpress_entry_meta(); ?>
+        	</header>
+        	<div class="entry-content">
+        		<?php the_content(); ?>
+        		<?php edit_post_link( __( '(Edit)', 'foundationpress' ), '<span class="edit-link">', '</span>' ); ?>
+        	</div>
+        </article>
+
+
+			<?php endwhile; ?>
+
+			<?php else : ?>
+				<?php get_template_part( 'template-parts/content', 'none' ); ?>
+
+			<?php endif; // End have_posts() check. ?>
+
+      <aside>
+        <nav>
+          <a class="button hollow" href="<?php  echo get_post_type_archive_link( 'archive_resource' ) ?>">back to resources</a>
+        </nav>
+        <?php /* Display navigation to next/previous pages when applicable */ ?>
+        <?php
+        if ( function_exists( 'foundationpress_pagination' ) ) :
+          foundationpress_pagination();
+          elseif ( is_paged() ) :
+            ?>
+            <nav id="post-nav">
+              <div class="post-previous"><?php next_posts_link( __( '&larr; Older posts', 'foundationpress' ) ); ?></div>
+              <div class="post-next"><?php previous_posts_link( __( 'Newer posts &rarr;', 'foundationpress' ) ); ?></div>
+            </nav>
+          <?php endif; ?>
+        </aside>
+
+		</main>
+		<?php //get_template_part( 'template-parts/announcement' ); ?>
+
+<?php get_footer();

src/assets/scss/_settings.scss

@@ -181,6 +181,7 @@ $paragraph-text-rendering: optimizeLegibility;
 $enable-code-inline: true;
 $anchor-color: $primary-color;
 $anchor-color-hover: $primary-color;//scale-color($anchor-color, $lightness: -14%);
+$anchor-color-alt: scale-color($anchor-color, $lightness: 50%);
 $anchor-text-decoration: none;
 $anchor-text-decoration-hover: none;
 $hr-width: $global-width;
@@ -405,9 +406,9 @@ $drilldown-arrow-size: 6px;
 
 $dropdown-padding: 1rem;
 $dropdown-background: $body-background;
-$dropdown-border: 1px solid $medium-gray;
+$dropdown-border: none;//1px solid $medium-gray;
 $dropdown-font-size: 1rem;
-$dropdown-width: 300px;
+$dropdown-width: 100%;
 $dropdown-radius: $global-radius;
 $dropdown-sizes: (
   tiny: 100px,
@@ -419,16 +420,16 @@ $dropdown-sizes: (
 // -----------------
 
 $dropdownmenu-arrows: true;
-$dropdownmenu-arrow-color: $anchor-color;
+$dropdownmenu-arrow-color: $body-font-color;//$anchor-color;
 $dropdownmenu-arrow-size: 6px;
 $dropdownmenu-arrow-padding: 1.5rem;
-$dropdownmenu-min-width: 200px;
+$dropdownmenu-min-width: 100%;//200px;
 $dropdownmenu-background: null;
-$dropdownmenu-submenu-background: $white;
+$dropdownmenu-submenu-background: $dropdown-background;
 $dropdownmenu-padding: $global-menu-padding;
 $dropdownmenu-nested-margin: 0;
 $dropdownmenu-submenu-padding: $dropdownmenu-padding;
-$dropdownmenu-border: 1px solid $medium-gray;
+$dropdownmenu-border: none; //1px solid $medium-gray;
 $dropdown-menu-item-color-active: get-color(primary);
 $dropdown-menu-item-background-active: transparent;
 
@@ -461,21 +462,21 @@ $select-background: $white;
 $select-triangle-color: $dark-gray;
 $select-radius: $global-radius;
 $input-color: $black;
-$input-placeholder-color: $medium-gray;
+$input-placeholder-color: scale-color($primary-color, $lightness: 35%);//$medium-gray;
 $input-font-family: inherit;
 $input-font-size: rem-calc(16);
 $input-font-weight: $global-weight-normal;
 $input-line-height: $global-lineheight;
-$input-background: $white;
-$input-background-focus: $white;
+$input-background: scale-color($primary-color, $lightness: 95%);
+$input-background-focus:  scale-color($primary-color, $lightness: 85%);
 $input-background-disabled: $light-gray;
-$input-border: 1px solid $medium-gray;
-$input-border-focus: 1px solid $dark-gray;
+$input-border: 1px solid $input-background;
+$input-border-focus: 1px solid $input-background-focus;
 $input-padding: $form-spacing / 2;
-$input-shadow: inset 0 1px 2px rgba($black, 0.1);
-$input-shadow-focus: 0 0 5px $medium-gray;
+$input-shadow: none;// inset 0 1px 2px rgba($black, 0.1);
+$input-shadow-focus: none; //0 0 5px $medium-gray;
 $input-cursor-disabled: not-allowed;
-$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-transition: none;//box-shadow 0.5s, border-color 0.25s ease-in-out;
 $input-number-spinners: true;
 $input-radius: $global-radius;
 $form-button-radius: $global-radius;
@@ -906,4 +907,3 @@ $grid-padding-gutters: $grid-margin-gutters;
 $grid-container-padding: $grid-padding-gutters;
 $grid-container-max: $global-width;
 $xy-block-grid-max: 8;
-

src/assets/scss/app.scss

@@ -25,8 +25,8 @@
 //@include foundation-switch;
 @include foundation-table;
 // Basic components
-@include foundation-badge;
-@include foundation-breadcrumbs;
+// @include foundation-badge;
+// @include foundation-breadcrumbs;
 @include foundation-callout;
 @include foundation-card;
 @include foundation-dropdown;
@@ -90,6 +90,7 @@
 @import "components/cards";
 @import "components/buttons";
 @import "components/accordion";
+@import "components/forms";
 
 
 // Templates

src/assets/scss/components/_accordion.scss

@@ -4,8 +4,6 @@
 .accordion-title {
   ul,ol {
     list-style: none;
-    //@include flex;
-    //@include flex-align(justify,middle);
     @include xy-grid;
   }
   li {

src/assets/scss/components/_buttons.scss

@@ -1,5 +1,54 @@
+// wordpress
+
+.wpcf7-form-control[type="submit"] {
+  @extend .button;
+  min-width: unset;
+}
+
+.post-next,.post-previous {
+  a {
+    @extend button;
+    @extend .hollow;
+  }
+}
+
+// untill here wordpress
+button {
+  @extend .button;
+}
 button,.button {
-    min-width: 20rem;
+  &.small{
+    padding: $global-padding*0.5 $global-padding*1.5;
+  }
+  &.tiny{
+    padding: $global-padding*0.3 $global-padding*1.1;
+  }
+  &:not(.large,.small,.tiny){
+  }
+  &.primary {
+    color: $white;
+  }
+  &.success {
+    border-color: $success-color;
+  }
+  &.alert {
+    border-color: $alert-color;
+    color: $white;
+    &:hover{
+      color:$white;
+    }
+  }
+  &.secondary {
+    border-color: $secondary-color;
+  }
+  &.inactive {
+    color: $light-gray;
+    border-color: $light-gray;
+    cursor: not-allowed ;
+    &:hover {
+      background-color: unset;
+    }
+  }
 }
 .hero {
   button,.button {
@@ -8,11 +57,53 @@ button,.button {
     color: $button-color-alt;
     font-size: $global-font-size*1.3;
     border-color: $button-color-alt;
-    border-radius: 4rem;
-//    margin: $global-margin*2 0;
+    border-radius: $global-radius-archive*2;
     &:hover{
       color: $anchor-color;
       border-color: $anchor-color;
     }
   }
+  &.hero-middle,&.hero-last,&.hero-announcement{
+    :not(.search-form),:not(.search){
+      button,.button {
+        font-size: $global-font-size;
+        border-color: $white;
+        padding: $global-padding $global-padding*2;
+        min-width: unset;
+        &:hover{
+          color: scale-color($anchor-color, $lightness: 90%);
+          background-color: scale-color($white, $alpha: -60%);
+        }
+      }
+    }
+  }
+}
+
+.search {
+  .button {
+    border-color: $primary-color;
+  }
+  button.appear{
+    min-width: unset;
+    background-color: $primary-color;
+    color: $white;
+    border-radius:$global-radius-archive;
+    border: none;
+  }
+}
+.load_more {
+  button,.button {
+    font-size: $global-font-size;
+  }
+}
+.end_of_page_button {
+  @extend .button;
+  display: flex;
+  margin:  $global-margin auto;
+  font-size: $global-font-size;
+}
+.accordion-item.is-active {
+  & button, & .button {
+    background-color: $input-background;
+  }
 }

src/assets/scss/components/_forms.scss

@@ -0,0 +1,141 @@
+//search block size in content
+article,aside,.omekas-entry-content {
+  .search,.widget_search{
+    @include xy-grid();
+    .input-group,.search-form {
+      @include breakpoint(small){
+        @include xy-cell (12);
+        margin-left: auto;
+        margin-right: auto;
+      }
+      @include breakpoint(medium){
+        @include xy-cell (6);
+        margin-left: auto;
+        margin-right: auto;
+      }
+      @include breakpoint(large){
+        @include xy-cell (4);
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+}
+// search elements
+.search {
+  .input-group {
+    position: relative;
+    border-radius: $global-padding*4;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    .appear {
+      right: 0;
+      position: absolute;
+      height: 100%;
+      padding: $global-padding*0.3 $global-padding;
+    }
+  }
+  .input-group * {
+    margin: 0;
+  }
+  .button {
+    // border-color: $primary-color;
+    border: none;
+  }
+  .appear {
+    display:none;
+  }
+  input {
+    border-radius: $global-radius-archive;
+    &:active {
+      border-color: $primary-color;
+      background-color: $input-background-focus;
+    }
+    &:focus,&:focus-within{
+      border-color: $input-background;
+      background-color: $input-background;
+    }
+    &:not(:placeholder-shown) {
+      border:none;
+      background-color: $input-background-focus;
+      position: relative;
+      padding-right: $global-padding * 9;
+      + .appear {
+        display: block;
+        background-color: scale-color($input-background-focus, $lightness: -20%);
+        z-index: 2;
+        &:hover {
+          color: $white;
+          background-color: $primary-color;
+        }
+      }
+    }
+  }
+  .hollow {
+    border-color: $primary-color;
+    color: $primary-color;
+    &:after {
+    }
+    &::placeholder {
+      color: scale-color($primary-color, $lightness: -20%);
+    }
+    &:hover {
+      background-color: scale-color($primary-color, $lightness: 95%);
+    }
+    &:active {
+      background-color: scale-color($primary-color, $lightness: 85%);
+    }
+  }
+  &-form {
+    @extend .search;
+    position: relative;
+    min-width: 40vw;
+    input:not(:placeholder-shown) {
+      padding: $global-padding/2 $global-padding;
+    }
+    .search-submit {
+      @extend .button;
+      padding: $global-padding*0.7 $global-padding !important;
+      display:none;
+    }
+    .search-field {
+      &:active,&:focus,&:not(:placeholder-shown) {
+        padding-right: $global-padding * 8;
+      }
+    }
+    label {
+      width:100%;
+      &:active,&:focus,&:focus-within,&:hover {
+        + .search-submit {
+          display: inline;
+          position: absolute;
+          right: 0;
+          width: auto;
+          min-width: unset;
+          background-color: scale-color($input-background-focus, $lightness: -20%);
+        }
+      }
+    }
+  }
+}
+// wordpress
+
+.hero {
+  .search-form {
+    input[type="submit"]{
+      color: $white;
+    }
+  }
+}
+
+// contact form 7
+//
+
+[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'],
+textarea {
+border: none;
+}
+.wpcf7-list-item {
+  width: 100%;
+}

src/assets/scss/editor.scss

@@ -4,38 +4,38 @@
 
 /** === Includes === */
 
-@charset 'utf-8';
-
-@import 'settings';
-@import 'foundation';
-
-@include foundation-typography;
-@include foundation-button;
-@include foundation-table;
+// @charset 'utf-8';
+//
+// @import 'settings';
+// @import 'foundation';
+//
+// @include foundation-typography;
+// @include foundation-button;
+// @include foundation-table;
 
 
 /** === Content Width === */
 .wp-block {
-	width: calc(100vw - (2 * 10));
-	@each $breakpoint, $size in $grid-margin-gutters {
-
-		@include breakpoint($breakpoint) {
-			width: calc(100vw - ($size));
-		}
-
-	}
+	// width: calc(100vw - (2 * 10));
+	// @each $breakpoint, $size in $grid-margin-gutters {
+	//
+	// 	@include breakpoint($breakpoint) {
+	// 		width: calc(100vw - ($size));
+	// 	}
+	//
+	// }
 }
 
 /** === Base Typography === */
 body {
-	font-size: $global-font-size;
-	font-family: $body-font-family;
-	color: $body-font-color;
+	// font-size: $global-font-size;
+	// font-family: $body-font-family;
+	// color: $body-font-color;
 }
 
 /** === Post Title === */
 .editor-post-title__block .editor-post-title__input{
-  @extend h1;
+  // @extend h1;
 }
 
 /** === Button === */
@@ -43,17 +43,17 @@ body {
 
 	// add general foundation button styling to button in editor
 	.wp-block-button__link {
-		@extend .button;
+		// @extend .button;
 	}
 
 	// add special styling for squared buttons
 	&.is-style-squared .wp-block-button__link {
-		border-radius: 0;
+		// border-radius: 0;
 	}
 
 	// add outline styles
 	&.is-style-outline .wp-block-button__link{
-		@extend .hollow;
+		// @extend .hollow;
 	}
 
 	// set transparent background to block for outline button
@@ -61,26 +61,26 @@ body {
 	&.is-style-outline:hover,
 	&.is-style-outline:focus,
 	&.is-style-outline:active {
-		background: transparent;
+		// background: transparent;
 	}
 }
 
 /** === File === */
 .wp-block-file__button{
-	@include button();
+	// @include button();
 }
 
 /** === Pullquote === */
 .wp-block-paragraph.has-background{
-	padding: rem-calc(20px 30px);
+	// padding: rem-calc(20px 30px);
 }
 
 /** === Table === */
 .wp-block-table td{
-	border: none;
+	// border: none;
 }
 
 /** === Latest Posts grid view === */
 .wp-block-latest-posts.is-grid{
-	list-style: none;
+	// list-style: none;
 }

src/assets/scss/global/_branding.scss

@@ -5,7 +5,7 @@
   &::before {
     content: '';
     display:inline-block;
-    margin-top:-$global-padding;
+    // margin-top:-$global-padding;
     width: 100%;
     height: $global-padding*5;
     background-size: contain;

src/assets/scss/global/_gutenberg.scss

@@ -6,11 +6,11 @@ Frontend styles for gutenberg blocks
 @each $color, $code in $foundation-palette {
 
   .has-#{$color}-background-color {
-      background-color: $code;
+      // background-color: $code;
   }
 
   .has-#{$color}-color {
-      color: $code;
+      // color: $code;
   }
 }
 
@@ -19,27 +19,27 @@ Frontend styles for gutenberg blocks
 
 	// add general foundation button styling
 	.wp-block-button__link {
-		@extend .button;
+		// @extend .button;
     @each $color, $code in $foundation-palette {
 
       &.has-#{$color}-background-color {
-          background-color: $code;
+          // background-color: $code;
       }
 
       &.has-#{$color}-color {
-          color: $code;
+          // color: $code;
       }
     }
 	}
 
 	// add special styling for squared buttons
 	&.is-style-squared .wp-block-button__link {
-		border-radius: 0;
+		// border-radius: 0;
 	}
 
 	// add outline styles
 	&.is-style-outline .wp-block-button__link{
-		@extend .hollow;
+		// @extend .hollow;
 	}
 
 	// set transparent background to block for outline button
@@ -56,5 +56,10 @@ Frontend styles for gutenberg blocks
 
 /** === File === */
 .wp-block-file .wp-block-file__button{
-  @include button();
+  // @include button();
+}
+
+/** === Image === */
+.wp-block-image {
+  // margin: 0;
 }

src/assets/scss/global/_typography.scss

@@ -19,26 +19,3 @@
   font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   font-weight: normal;
 }
-
-
-//
-// mods on fonts and typography 
-// not in foundation variables
-// -----------------------------
-
-//h1,h2,h3,h4,h5,h6,
-//.h1,.h2,.h3,.h4,.h4,.h5,.h6,
-//button,.button,
-//header nav,
-//.hero .claim
-//{
-//  font-variant:all-small-caps;
-//}
-//
-//
-//h1,h2,h3,h4,h5,h6,
-//.h1,.h2,.h3,.h4,.h4,.h5,.h6 {
-//  a {
-//    color: $black;
-//  }
-//}

src/assets/scss/modules/_content.scss

@@ -1,190 +1,256 @@
-  //content {
+// general styles
+//----------------
+//
+// mods on fonts and typography
+// not in foundation variables
+// -----------------------------
 
-    // general styles
-    //----------------
-    //
-    // mods on fonts and typography 
-    // not in foundation variables
-    // -----------------------------
-    
-    h1,h2,h3,h4,h5,h6,
-    .h1,.h2,.h3,.h4,.h4,.h5,.h6,
-    button,.button,
-    header nav,
+h1,h2,h3,h4,h5,h6,
+.h1,.h2,.h3,.h4,.h4,.h5,.h6,
+button,.button,
+header nav,
 
 
-    h1,h2,h3,h4,h5,h6,
-    .h1,.h2,.h3,.h4,.h4,.h5,.h6 {
-            font-variant:all-small-caps;
-      a {
-        color: $body-font-color;
+h1,h2,h3,h4,h5,h6,
+.h1,.h2,.h3,.h4,.h4,.h5,.h6 {
+  font-variant:all-small-caps;
+  a {
+    color: $body-font-color;
+  }
+}
+.excerpt,.post-excerpt{
+  a {
+    color: $body-font-color;
+    &:hover {
+      p {
+        color: $anchor-color;
       }
     }
-    .excerpt,.post-excerpt{
-      a {
-       color: $body-font-color;
-       &:hover {
-         p {
-           color: $anchor-color;
-         }
-       }
+  }
+}
+
+//
+// main block
+//--------------
+
+
+main {
+  article {
+    @include xy-grid;
+    header {
+      @include xy-cell(12);
+      .entry-title {
+        width: 100%;
+        text-align: center;
       }
     }
-    
-    //
-    // main block
-    //--------------
-
-
-    main {
-      article {
-        @include xy-grid;
-        header {
-          @include xy-cell(12);
-          .entry-title {
-            width: 100%;
-            text-align: center;
-          }
-        }
-        .entry-content {
-          @include breakpoint(small){
-            @include xy-cell(12);
-            padding: $global-padding*2 ;
-            margin:0 auto;
-          }
-          @include breakpoint(medium){
-            @include xy-cell(12);
-            padding: $global-padding*2 $global-padding*3;
-            max-width: 50rem;
-            margin:0 auto;
-          }
-          @include breakpoint(xlarge){
-            @include xy-cell(12);
-            max-width: 50rem;
-            padding: $global-padding*2 $global-padding*3;
-            font-size: $global-font-size*1.2;
-            margin: 0 auto;
-          }
-        }
-      }
+    section {
+      // padding: $global-padding $global-padding*2;
     }
-
-
-    //
-    // news category
-    //--------------
-    
-    .news,.news-category {
-      @include xy-grid;
-      header,main,aside {
-        @include breakpoint(small){
-          padding-top: 0;
-          @include xy-cell(12);
-          @include flex;
-          @include flex-align(center,top);
-        }
-        @include breakpoint(small){
-            padding-top: $global-padding*3;
-        }
-      }
-      main {
-        //@include xy-cell(12);
-        @include xy-grid;
-        article{
-          text-align:center;
-          @include card-container();
-          @include breakpoint(small){
-            @include xy-cell(12);
-          }
-          @include breakpoint(medium){
-            @include xy-cell(6);
-          }
-          @include breakpoint(large){
-            @include xy-cell(4);
-          }
-          figure {
-            @include breakpoint(small){
-              @include xy-cell(12);
-              height: 58vw;
-              max-width: 100%;
-              overflow: hidden;
-              background-position: center;
-              background-repeat: no-repeat;
-              background-size: cover;
-            }
-            @include breakpoint(medium){
-              height: 28vw;
-            }
-            @include breakpoint(large){
-              height: 20vw;
-            }
-          }
-          .date {
-            height: 1rem;
-            padding-top: $global-padding*2;
-          }
-          .entry-title {
-             padding-top: $global-padding*2;
-             line-height: 0.7;
-             font-size: $global-font-size*1.5;
-          }
-          
-        }
-      }
-      aside {
-            @include breakpoint(small){
-              padding-top:0;
-              padding-bottom: $global-padding*3;
-            }
-            @include breakpoint(medium){
-              padding-top:$global-padding*3;
-              padding-bottom: 0;
-
-            }
-      }
-    }
-    // end news category
-
-
-    //
-    // collections category
-    //--------------
-    
-    .collections-list {
-      @include xy-grid;
-      header,main,aside {
+    .entry-content,.omekas-entry-content {
+      @include breakpoint(small){
         @include xy-cell(12);
-        @include flex;
-        @include flex-align(center,top);
-        padding: $global-padding*3 0;
+        padding: $global-padding*2 $global-padding/2 ;
+        margin:0 auto;
       }
-      header {
-        border-top: 1px solid $body-font-color;
-        padding: $global-padding*4 0;
-      }
-      main {
-        @include xy-grid;
-        article{
-          text-align:center;
-          @include card-container();
-          @include breakpoint(small){
-            @include xy-cell();
-          }
-          @include breakpoint(medium){
-          }
-          @include breakpoint(large){
-          }
+      @include breakpoint(medium){
+        @include xy-cell(12);
+        padding: $global-padding*2 $global-padding*3;
+        max-width: 60rem;
+        margin:0 auto;
+        p {
+          // font-size: $global-font-size*1.0;
+          line-height: $paragraph-lineheight*1.1;
         }
       }
-      aside {
+      @include breakpoint(xxlarge){
+        // @include xy-cell(12);
+        // padding: $global-padding*2 $global-padding*3;
+        // margin: 0 auto;
+        max-width: 70rem;
+        p {
+          font-size: $global-font-size*1.2;
+          line-height: $paragraph-lineheight*1.15;
+        }
       }
     }
-    // end news category
+  }
+  aside {
+    @include xy-grid;
+    nav {
+      @include xy-cell(12);
+      display:flex;
+      align-content: center;
+      justify-content: center;
+      padding-bottom: $global-padding * 2;
+    }
+  }
+}
 
-    //
-    // partners 
-    // for big announcemnts
-    //---------------------
+//
+// category view, news,  search results
+//--------------
+
+.category-posts,.archive-posts,.search-results-content{
+  @include xy-grid;
+  header {
+    @include breakpoint(small){
+      @include xy-cell(12);
+      @include flex;
+      @include flex-align(center,top);
+      flex-direction: column;
+      align-items: center;
+      padding-top: $global-padding*3;
+    }
+    @include breakpoint(medium){
+    }
+  }
+  main,aside {
+    @include breakpoint(small){
+      @include xy-cell(12);
+      @include flex;
+      @include flex-align(center,top);
+      padding-top: $global-padding*3;
+    }
+    @include breakpoint(medium){
+    }
+  }
+  main {
+    @include xy-grid;
+    article{
+      text-align:center;
+      @include card-container();
+      @include breakpoint(small){
+        @include xy-cell(12);
+      }
+      @include breakpoint(medium){
+        @include xy-cell(6);
+      }
+      @include breakpoint(large){
+        @include xy-cell(4);
+      }
+      figure {
+        @include breakpoint(small){
+          @include xy-cell(12);
+          height: 58vw;
+          max-width: 100%;
+          overflow: hidden;
+          background-image: url('../img/ARC-HIVE-logo.svg');
+          background-color: rgb(240,240,240);
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: cover;
+        }
+        @include breakpoint(medium){
+          height: 28vw;
+        }
+        @include breakpoint(large){
+          height: 20vw;
+        }
+      }
+      .date {
+        height: 1rem;
+        padding-top: $global-padding*2;
+      }
+      .entry-title {
+        padding-top: $global-padding*2;
+        line-height: 0.7;
+        font-size: $global-font-size*1.5;
+      }
+    }
+  }
+  aside {
+    @include breakpoint(small){
+      padding-top:0;
+      padding-bottom: $global-padding*3;
+    }
+    @include breakpoint(medium){
+      padding-top: $global-padding*3;
+      padding-bottom: 0;
+
+    }
+  }
+  &.resources,&.search-results-content,&.tax-archive_resource_category,&.tax-archive_resource_tag {
+    @include xy-grid;
+    header,main,aside {
+    }
+    main {
+      article{
+        @include breakpoint(small){
+          @include xy-cell(12);
+        }
+        @include breakpoint(medium){
+          @include xy-cell(1 of 3);
+        }
+        @include breakpoint(large){
+          @include xy-cell(1 of 5);
+        }
+      }
+      figure {
+        @include breakpoint(small){
+        }
+        @include breakpoint(medium){
+          height: 18vw;
+        }
+        @include breakpoint(large){
+          height: 10vw;
+        }
+      }
+    }
+  }
+}
+.search-results {
+  article {
+    main {
+      .search-results-content {
+        h1,h2,h3,h4,h5,h6 {
+          display: block;
+        }
+      }
+    }
+  }
+}
+// end category view, news,  search results
+
+
+//
+// collections category
+//--------------
+
+.collections-list {
+  @include xy-grid;
+  header,main,aside {
+    @include xy-cell(12);
+    @include flex;
+    @include flex-align(center,top);
+    padding: $global-padding*3 0;
+  }
+  header {
+    border-top: 1px solid $body-font-color;
+    padding: $global-padding*4 0;
+  }
+  main {
+    @include xy-grid;
+    article{
+      text-align:center;
+      @include card-container();
+      @include breakpoint(small){
+        @include xy-cell();
+      }
+      @include breakpoint(medium){
+      }
+      @include breakpoint(large){
+      }
+    }
+  }
+  aside {
+  }
+}
+// end collections category
+
+//
+// partners
+//---------------------
 
 .partners {
   .entry-content {
@@ -210,109 +276,188 @@
     .wp-block-image {
       margin: 0;
     }
-   }
- }
+  }
+}
 
-    //
-    // hero
-    // for big announcemnts
-    //---------------------
+//
+// hero
+// for big announcemnts
+//---------------------
 
 
-  .hero {
-    border-top: 2px solid $primary-color;
-    .slides {
-      @include xy-grid();
-      .slide {
-        @include xy-grid;
-        @include breakpoint(small){
-          width: 100vw;
-          margin: 0;
-          .textwidget {
-            padding: $global-padding * 2; 
-          }
+.hero {
+  .slides {
+    @include xy-grid();
+    // border-top: 2px solid $primary-color;
+    .slide {
+      @include xy-grid;
+      &.widget {
+        display: flex;
+        align-content: center;
+        justify-content: center;
+      }
+      @include breakpoint(small){
+        width: 100vw;
+        margin: 0;
+        &.widget_text p {
+          padding: $global-padding * 2;
         }
-        @include breakpoint(medium){
-          .textwidget {
-            max-width: 50rem;
-            margin:auto;
-            padding: $global-padding * 2; 
-            font-size: $global-font-size*1.3;
-          }
-        }
-        @include breakpoint(large){
-          width: 50%;
-          height: calc((50vw*9)/16);
-          padding: 0;
-          margin: 0;
-          overflow:hidden;
-          a {
-            @include flex;
-            @include flex-align (center,middle);
-          }
+        &.widget_media_image {
+          overflow: hidden;
           img {
-          //  max-width: unset !important;
-            height: 100% !important;
-          }
-          .textwidget {
-            font-size: $global-font-size*1.2;
-            padding: $global-padding * 2; 
+            width:100%;
           }
         }
-        @include breakpoint(xlarge){
-          .textwidget {
-            font-size: $global-font-size*1.3;
-            padding: $global-padding*3; 
-          }
+      }
+      @include breakpoint(medium){
+        &.widget_text p{
+          max-width: 50rem;
+          margin:auto;
+          padding: $global-padding * 2;
         }
-        @include breakpoint(xxlarge){
-          .textwidget {
-            font-size: $global-font-size*1.6;
-            padding: $global-padding*3; 
-          }
+      }
+      @include breakpoint(large){
+        width: 50%;
+        padding: 0;
+        margin: 0;
+        overflow:hidden;
+        // button,.button {
+        //   @include flex;
+        //   @include flex-align (center,middle);
+        // }
+        &.widget_text p{
+          font-size: $global-font-size*1.2;
+          padding: $global-padding * 2;
         }
-        &:first-child {
-            background-color: $primary-color;
-            font-variant:all-small-caps;
+      }
+      @include breakpoint(xlarge){
+        &.widget_text p{
+          font-size: $global-font-size*1.3;
+          padding: $global-padding*3;
         }
-        color: $white;
+      }
+      @include breakpoint(xxlarge){
+        &.widget_text p{
+          font-size: $global-font-size*1.6;
+          padding: $global-padding*3;
+        }
+      }
+      color: $white;
 
-        .logo {
-          @include breakpoint(medium){
-            max-width: 80%;
-          }
+      .logo {
+        @include breakpoint(medium){
+          max-width: 80%;
         }
       }
     }
-    aside {
-      @include xy-grid();
-      background-color: $secondary-color;
-      nav {
-        @include xy-cell(auto);
-        @include flex;
-        @include flex-align(spaced,middle);
-        min-height: 6rem;
-        padding: $global-padding 0 ;
-        a {
-          color: $body-font-color;
-        }
-        .button {
-          justify-content:center;
+    &.primary{
+      .slide:nth-child(odd) {
+        background-color: $primary-color;
+        font-variant: all-small-caps;
+        * {
+          color: $white;
         }
       }
     }
-    //hero secondary
     &.secondary {
+      .slide,.slide:nth-child(odd) {
+        background-color: $white;
+      }
+    }
+    &.announcement {
+      .slide {
+        width: 100%;
+      }
+      .widget_media_image {
+        height: 10rem;
+      }
+    }
+    &.announcement.top {
+    }
+    &.announcement.middle {
       border-top: none;
+      margin-top: $global-margin*2;
+      display: flex;
+      align-content: center;
+      justify-content: center;
+      .widget_nav_menu,.widget_tag_cloud {
+        width: auto;
+        overflow: visible;
+      }
+    }
+    &.top.secondary {
+      align-content: center;
+      justify-content: center;
+      ul {
+        margin: 2rem 0;
+      }
+    }
+  }
+  aside {
+    @include xy-grid();
+    // background-color: $secondary-color;
+    .slides {
+      width: 100%;
+      .slide {
+        width: 100%;
+        // &:nth-child(odd) {
+        //   background-color: $secondary-color;
+        // }
+      }
+    }
+    nav {
+      @include xy-cell(auto);
+      @include flex;
+      @include flex-align(spaced,middle);
+      min-height: 6rem;
+      padding: $global-padding 0 ;
+      a {
+        color: $body-font-color;
+      }
+      .button {
+        justify-content:center;
+      }
+    }
+  }
+  &.hero-main {
+    aside {
       background-color: $secondary-color;
-      .slide{
-        figure {
-          background-color: unset;
+      .slides {
+        .slide {
+          &:nth-child(odd) {
+            background-color: $secondary-color;
+          }
         }
       }
     }
   }
-  //end hero
-
-//}
-// end content
+  &.hero-middle{
+    .slides {
+      background-color: $forest-green;
+      * {
+        color: $white;
+      }
+    }
+  }
+  &.hero-last{
+    .slides {
+      background-color: $raspberry-purple;
+      * {
+        color: $white;
+      }
+    }
+  }
+  &.hero-announcement {
+  }
+  //hero secondary
+  &.secondary {
+    border-top: none;
+    background-color: $secondary-color;
+    .slide{
+      figure {
+        background-color: unset;
+      }
+    }
+  }
+}
+//end hero

src/assets/scss/modules/_header.scss

@@ -6,11 +6,11 @@
       @include breakpoint(small){
         @include xy-cell(12);
         @include flex-align(center, middle);
-        padding: $global-padding*2 $global-padding;
+        padding: $global-padding $global-padding;
         min-width: 14rem;
         text-align: center;
       }
-      @include breakpoint(medium){
+      @include breakpoint(large){
         @include xy-cell(shrink);
         @include flex-align(left, middle);
         text-align: unset;
@@ -21,6 +21,7 @@
         @include xy-cell(12);
         @include flex;
         @include flex-align(center, middle);
+        padding-bottom: $global-padding*2;
         a, button {
           color: $black;
           &:hover {
@@ -30,19 +31,45 @@
         menu {
           margin: 0;
           padding: 0;
-          font-size: 0.8rem;
+          .menu {
+            &.dropdown {
+              justify-content:center;
+              li,.button {
+                min-width: unset;
+                margin:0;
+                padding:0;
+                font-size: $global-font-size*0.9;//$header-menu-font-size;
+              }
+              .button {
+                margin-left: $global-margin;
+                background-color:$input-background;
+              }
+              .is-dropdown-submenu {
+                font-size: $dropdown-font-size * 0.95;
+                min-width: 10rem;
+                box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
+              }
+            }
+          }
         }
       }
-      @include breakpoint(medium){
+      @include breakpoint(large) {
         @include xy-cell(auto);
         @include flex;
         @include flex-align(right, middle);
+        padding-bottom: 0;//$global-padding;
         menu {
           margin: inherit;
           padding: inherit;
-          font-size: $global-font-size*1.5;
+          .menu {
+            &.dropdown {
+              justify-content: end;
+              li,.button {
+                font-size: $global-font-size*1.4;//$header-menu-font-size;
+              }
+            }
+          }
         }
       }
     }
   }
-

src/assets/scss/modules/_navigation.scss

@@ -1 +1,169 @@
-// navigation scss
+.widget_nav_menu {
+    .menu-resources-menu-container {
+      position: relative;
+      margin-right: $global-margin;
+    }
+    ul.menu {
+      list-style: none;
+      text-align: left;
+      li {
+        position: relative;
+        margin-right: $global-margin/2;
+      }
+      a {
+        display:block;
+        color: $black;
+        justify-content: left !important;
+      }
+      .is-active > a {
+        background: unset;
+        color: scale-color($anchor-color, $saturation: -50%, $lightness: 50%)
+      }
+      width:auto;
+      li.menu-item-has-children {
+        > a {
+          &:after {
+            display:block;
+            width:0;
+            height:0;
+            border:inset 6px;
+            content:'';
+            border-bottom-width:0;
+            border-top-style:solid;
+            border-color: $anchor-color-alt transparent transparent transparent;
+            margin-top: 0px;
+            margin-left: 5px;
+            position: absolute;
+            right: 0;
+            top: 42%;
+          }
+        }
+        ul.sub-menu {
+          list-style: none;
+          background-color: scale-color($anchor-color, $lightness: 98%);
+          position: absolute;
+          left:0%;
+          top:0;
+          margin:0;
+          padding:0;
+          width: auto;
+          visibility:hidden;
+          opacity:0;
+          transition: transform 0.5s;
+          transform: translateY(-$global-padding);
+          li.menu-item-has-children {
+            > a {
+              &:after {
+                position: absolute;
+                right: 0;
+                margin-left: 10px;
+                margin-right: 2px;
+                border-bottom-width: 6px;
+                border-right-width: 0;
+                border-right-style:solid;
+                border-color: transparent transparent transparent $anchor-color-alt;
+              }
+            }
+          }
+        }
+        &:hover {
+          > a {
+            color: scale-color($anchor-color, $lightness: 50%);
+            &:after {
+              color: scale-color($anchor-color, $lightness: 50%);
+            }
+          }
+          > ul.sub-menu {
+            top:100%;
+            visibility: visible;
+            opacity: 1;
+            transform: translateY(0px);
+            &:hover {
+              background-color: scale-color($anchor-color, $lightness: 98%);
+            }
+            ul.sub-menu {
+              top: 0%;
+              left: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+.widget_tag_cloud {
+    position: relative;
+    overflow: visible;
+    margin-left: $global-margin;
+    $tags-background-color: scale-color($anchor-color, $lightness: 95%);
+    a {
+      display: inline;
+      color: $black;
+      &:before, &:after {
+        display: inline-block;
+      }
+    }
+    h6 {
+      visibility: hidden;
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    &:before {
+      content: '#tags';
+      color: $primary-color;
+      background-color:  $tags-background-color;
+      padding:$global-padding/4 $global-padding/2;
+    }
+    &:hover{
+      .tagcloud {
+        top: 1.6rem;
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0px);
+        background-color: scale-color($tags-background-color, $alpha: -100%);
+        @include breakpoint(small){
+          width: 80vw;
+          right: -1rem;
+          text-align: right;
+        }
+        @include breakpoint(medium){
+          width: 90vw;
+          right: -15vw;
+          text-align: center;
+        }
+        @include breakpoint(large){
+          width: 90vw;
+          right: -25vw;
+        }
+
+      }
+    }
+    .tagcloud {
+      position: absolute;
+      visibility:hidden;
+      opacity:0;
+      transition: transform 0.5s,background-color 0.5s;
+      transform: translateY(-$global-padding);
+      background-color: $tags-background-color;
+      padding: $global-padding;
+      a {
+        display: inline-block !important;
+        background-color: $tags-background-color;
+        padding:$global-padding/4 $global-padding/2;
+        font-size: $global-font-size * 0.7 !important;
+        &:before {
+          content: '#';
+          display: inline-block;
+        }
+        &:hover {
+          color: $anchor-color;
+        }
+      }
+    }
+  }
+@include breakpoint(small){
+}
+@include breakpoint(medium){
+}
+@include breakpoint(large){
+}

template-parts/announcement-resources.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * The breaking div containing the main widget area
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+?>
+<section class="hero hero-announcement resources">
+    <?php dynamic_sidebar( 'announcement-resources-top-widgets' ); ?>
+  <aside>
+    <?php dynamic_sidebar( 'announcement-resources-middle-widgets' ); ?>
+    <?php //insert menu here; ?>
+    <?php //foundationpress_announcement_bar(); ?>
+  </aside>
+</section>

template-parts/announcement.php

@@ -7,13 +7,10 @@
  */
 
 ?>
-<section class="hero secondary">
-   <main class="slides">
+<section class="hero hero-announcement">
     <?php dynamic_sidebar( 'announcement-widgets' ); ?>
-   </main>
   <aside>
-    <nav>
-      <?php //inser menu hero here; ?>
-    </nav>
+    <?php //insert menu here; ?>
+    <?php //foundationpress_announcement_bar(); ?>
   </aside>
 </section>

template-parts/archive-categoryposts.php

@@ -0,0 +1,90 @@
+<?php
+/**
+ * The section containing preview of news category posts
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+?>
+
+<?php
+  //https://developer.wordpress.org/reference/functions/get_template_part/#comment-4130
+  //  var_dump( $args ); //will display everythin imported from
+  //  get_template_part( 'template-parts/section', 'category', array('category_name' => 'news', 'post_per_page' => '3' ) );
+  $howmanyposts = $args['post_per_page'];
+  $thiscategory =  $args['category_name'];
+  $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
+  ?>
+
+<section class="category-posts <?php echo $thiscategory;?> ">
+  <header>
+    <h2>
+      <?php
+        if ( is_category() ):
+          single_cat_title();
+        else:
+          echo $thiscategory;
+        endif;
+      ?>
+    </h2>
+  </header>
+  <main class="">
+    <?php $the_query = new WP_Query(  array( 'category_name' => $thiscategory,  'posts_per_page' => $howmanyposts , 'paged' => $paged )  ); ?>
+    <?php if ( $the_query->have_posts() ) : ?>
+    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
+    <article class="">
+      <?php if ( has_post_thumbnail() ) :?>
+        <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+          <figure style="background-image: url(<?php echo get_the_post_thumbnail_url();?>);">
+          </figure>
+        </a>
+      <?php else :?>
+        <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+          <figure style="background-image: url(<?php echo catch_post_first_image();?>);">
+          </figure>
+        </a>
+      <?php endif;?>
+      <h5 class="date">
+        <?php
+        if ( is_category( 'news' ) ):
+          the_date('d.m.Y');
+        else:
+          the_date('Y');
+        endif;
+        ?>
+      </h5>
+      <h3 class="entry-title">
+        <a href="<?php the_permalink(); ?>" rel="bookmark">
+          <?php the_title(); ?>
+        </a>
+      </h3>
+        <section class="excerpt post-excerpt">
+          <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+            <?php the_excerpt() ?>
+        </a>
+      </section>
+    </article>
+    <?php endwhile;//end of the loop ?>
+  </main>
+    <?php wp_reset_postdata(); ?>
+    <?php else : //if no post in query ?>
+    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
+  </main>
+    <?php endif; ?>
+
+    <aside>
+      <?php //get_template_part( 'template-parts/navigation', 'prevnext' ); ?>
+      <nav>
+        <div class="post-previous"><?php previous_posts_link( __( 'Newer posts &rarr;', 'foundationpress' ) ); ?></div>
+        <div class="post-next"><?php next_posts_link( __( '&larr; Older posts', 'foundationpress' ) ); ?></div>
+        <?php
+        // button load more simple
+        // echo '<a  class="button hollow" href="' .  esc_url( get_category_link( get_cat_ID($thiscategory) ) ) . '">';
+        // echo 'load more ' ;
+        // echo $thiscategory;
+        // echo '</a>';
+        ?>
+      </nav>
+    </aside>
+</section>

template-parts/archive-resources.php

@@ -0,0 +1,74 @@
+<?php
+/**
+ * The archive containing preview of resources
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+?>
+
+
+<?php
+  //https://developer.wordpress.org/reference/functions/get_template_part/#comment-4130
+  //  var_dump( $args ); //will display everythin imported from
+  //  get_template_part( 'template-parts/section', 'category', array('category_name' => 'news', 'post_per_page' => '3' ) );
+  // $thiscustomposttype = get_post_type( get_the_ID() );
+  // $howmanyposts = $args['post_per_page'];
+  $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
+
+?>
+<section class="archive-posts resources">
+  <header>
+    <h2>
+     <?php
+        if ( is_post_type_archive() ):
+         post_type_archive_title();
+        endif;
+       ?>
+     </h2>
+  </header>
+  <main class="">
+    <?php $the_query = new WP_Query(  array( 'post_type' => get_post_type( get_the_ID() ),  'posts_per_page' => '10' , 'paged' => $paged )  ); ?>
+    <?php if ( $the_query->have_posts() ) : ?>
+    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
+    <article class="">
+      <?php if ( has_post_thumbnail() ) :?>
+        <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+          <figure style="background-image: url(<?php echo get_the_post_thumbnail_url();?>);">
+          </figure>
+        </a>
+      <?php else :?>
+        <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+          <figure style="background-image: url(<?php echo catch_post_first_image();?>);">
+          </figure>
+        </a>
+      <?php endif;?>
+      <h5 class="date">
+        <?php the_date('Y');?>
+      </h5>
+      <h3 class="entry-title">
+        <a href="<?php the_permalink(); ?>" rel="bookmark">
+          <?php the_title(); ?>
+        </a>
+      </h3>
+        <section class="excerpt post-excerpt">
+          <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+            <?php the_excerpt() ?>
+        </a>
+      </section>
+    </article>
+    <?php endwhile;//end of the loop ?>
+    <?php //pagination here ?>
+    <?php wp_reset_postdata(); ?>
+    <?php else : //if no post in query ?>
+    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
+    <?php endif; ?>
+  </main>
+  <aside>
+    <nav>
+      <div class="post-previous"><?php previous_posts_link( __( 'Newer posts &rarr;', 'foundationpress' ) ); ?></div>
+      <div class="post-next"><?php next_posts_link( __( '&larr; Older posts', 'foundationpress' ) ); ?></div>
+    </nav>
+  </aside>
+</section>

template-parts/content-page.php

@@ -11,7 +11,11 @@
 
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<header>
-		<h1 class="entry-title"><?php the_title(); ?></h1>
+		<h1 class="entry-title">
+      <?php //https://developer.wordpress.org/reference/functions/permalink_anchor/;?>
+			<?php permalink_anchor(); ?>
+      <?php the_title(); ?>
+    </h1>
 	</header>
 	<div class="entry-content">
 		<?php the_content(); ?>

template-parts/content.php

@@ -12,13 +12,14 @@
 
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<header>
-	<?php
-		if ( is_single() ) {
-			the_title( '<h1 class="entry-title">', '</h1>' );
-		} else {
-			the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
-		}
-	?>
+    <?php
+      //https://developer.wordpress.org/reference/functions/permalink_anchor/
+    	if ( is_single() ) {
+    		permalink_anchor();the_title( '<h1 class="entry-title">', '</h1>' );
+    	} else {
+    		permalink_anchor();the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
+    	}
+    ?>
 		<?php //foundationpress_entry_meta(); ?>
 	</header>
 	<div class="entry-content">

template-parts/home-announcement-bottom.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * The breaking div containing the last main widget area
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+?>
+<section class="hero hero-last">
+   <!--main class="slides"-->
+    <?php dynamic_sidebar( 'home-announcement-bottom-widgets' ); ?>
+   <!--/main-->
+  <aside>
+      <?php foundationpress_home_hero_last_bar(); ?>
+  </aside>
+</section>

template-parts/home-announcement-main.php

@@ -0,0 +1,19 @@
+<?php
+/**
+ * The breaking div containing the main widget area
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+?>
+<section class="hero hero-main">
+   <!--main class="slides"-->
+    <?php dynamic_sidebar( 'home-announcement-widgets' ); ?>
+    <?php dynamic_sidebar( 'home-announcement-widgets-top-primary' ); ?>
+   <!--/main-->
+  <aside>
+    <?php dynamic_sidebar( 'home-announcement-widgets-top-secondary' ); ?>
+      <?php //foundationpress_home_hero_bar(); ?>
+  </aside>
+</section>

template-parts/home-announcement-middle.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * The breaking div containing the middle main widget area
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+?>
+<section class="hero hero-middle">
+    <?php dynamic_sidebar( 'home-announcement-middle-widgets' ); ?>
+  <aside>
+      <?php foundationpress_home_hero_middle_bar(); ?>
+  </aside>
+</section>

template-parts/home-announcement.php

@@ -1,19 +0,0 @@
-<?php
-/**
- * The breaking div containing the main widget area
- *
- * @package arcHIVE-theme
- * @since arcHIVE-theme 1.0.0
- */
-
-?>
-<section class="hero">
-   <main class="slides">
-    <?php dynamic_sidebar( 'home-announcement-widgets' ); ?>
-   </main>
-  <aside>
-    <nav>
-      <?php foundationpress_home_hero_bar(); ?>
-    </nav>
-  </aside>
-</section>

template-parts/navigation-prevnext.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * Display navigation to next previous pages when applicable
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+?>
+<?php
+ ?>
+
+    <nav>
+      <?php //pagination here ?>
+        <?php if ( is_category() ): ?>
+          <?php
+          // button load more simple
+            //echo '<a  class="button hollow" href="' . echo esc_url( get_category_link(  ) ) . '">';
+             echo '<a  class="button hollow" href="">';
+               echo 'load more ' ;
+               echo single_cat_title();
+            echo '</a>';
+          ?>
+
+        <?php else: ?>
+          <?php
+          // button load more simple
+             echo '<a  class="button hollow" href="' .  esc_url( get_category_link( get_cat_ID($thiscategory) ) ) . '">';
+               echo 'load more ' ;
+               echo $thiscategory;
+            echo '</a>';
+          ?>
+        <?php endif; ?>
+        <?php //END pagination ?>
+    </nav>

template-parts/section-categoryposts.php

@@ -0,0 +1,88 @@
+<?php
+/**
+ * The section containing preview of news category posts
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+?>
+
+<?php
+  //https://developer.wordpress.org/reference/functions/get_template_part/#comment-4130
+  //  var_dump( $args ); //will display everythin imported from
+  //  get_template_part( 'template-parts/section', 'category', array('category_name' => 'news', 'post_per_page' => '3' ) );
+  $howmanyposts = $args['post_per_page'];
+  $thiscategory =  $args['category_name'];
+
+  ?>
+
+<section class="category-posts <?php echo $thiscategory;?> ">
+  <header>
+    <h2>
+      <?php
+        if ( is_category() ):
+          single_cat_title();
+        else:
+          echo $thiscategory;
+        endif;
+      ?>
+    </h2>
+  </header>
+  <main class="">
+    <?php $the_query = new WP_Query(  array( 'category_name' => $thiscategory,  'posts_per_page' => $howmanyposts )  ); ?>
+    <?php if ( $the_query->have_posts() ) : ?>
+    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
+    <article class="">
+      <?php if ( has_post_thumbnail() ) :?>
+        <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+          <figure style="background-image: url(<?php echo get_the_post_thumbnail_url();?>);">
+          </figure>
+        </a>
+      <?php else :?>
+        <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+          <figure style="background-image: url(<?php echo catch_post_first_image();?>);">
+          </figure>
+        </a>
+      <?php endif;?>
+      <h5 class="date">
+        <?php
+        if ( is_category( 'news' ) ):
+          the_date('d.m.Y');
+        else:
+          the_date('Y');
+        endif;
+        ?>
+      </h5>
+      <h3 class="entry-title">
+        <a href="<?php the_permalink(); ?>" rel="bookmark">
+          <?php the_title(); ?>
+        </a>
+      </h3>
+        <section class="excerpt post-excerpt">
+          <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
+            <?php the_excerpt() ?>
+        </a>
+      </section>
+    </article>
+    <?php endwhile;//end of the loop ?>
+  </main>
+    <?php wp_reset_postdata(); ?>
+    <?php else : //if no post in query ?>
+    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
+  </main>
+    <?php endif; ?>
+
+    <aside>
+      <?php //get_template_part( 'template-parts/navigation', 'prevnext' ); ?>
+      <nav>
+        <?php
+        // button load more simple
+        echo '<a  class="button hollow" href="' .  esc_url( get_category_link( get_cat_ID($thiscategory) ) ) . '">';
+        echo 'load more ' ;
+        echo $thiscategory;
+        echo '</a>';
+        ?>
+      </nav>
+    </aside>
+</section>

template-parts/section-resources.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * The section containing preview of news category posts
+ * The section containing preview of resources
  *
  * @package arcHIVE-theme
  * @since arcHIVE-theme 1.0.0
@@ -8,16 +8,30 @@
 
 ?>
 
-<section class="news">
+
+<?php
+  //https://developer.wordpress.org/reference/functions/get_template_part/#comment-4130
+  //  var_dump( $args ); //will display everythin imported from
+  //  get_template_part( 'template-parts/section', 'category', array('category_name' => 'news', 'post_per_page' => '3' ) );
+  $thiscustomposttype = get_post_type( get_the_ID() );
+  $howmanyposts = $args['post_per_page'];
+?>
+<section class="archive-posts resources">
   <header>
-    <h2> News</h2>
+    <h2>
+     <?php
+       // if ( is_post_type_archive() ):
+         post_type_archive_title();
+       // else:
+       //   echo $thiscustomposttype;
+       // endif;
+       ?>
+     </h2>
   </header>
   <main class="">
-    <?php $the_query = new WP_Query(  array( 'category_name' => 'news',  'posts_per_page' => 6 )  ); ?>
+    <?php $the_query = new WP_Query(  array( 'post_type' => $thiscustomposttype,  'posts_per_page' => $howmanyposts )  ); ?>
     <?php if ( $the_query->have_posts() ) : ?>
-    <?php //the loop ?>
     <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
-    <?php //content here ?>
     <article class="">
       <?php if ( has_post_thumbnail() ) :?>
         <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
@@ -31,7 +45,7 @@
         </a>
       <?php endif;?>
       <h5 class="date">
-        <?php //the_date('d.m.Y');?>
+        <?php the_date('Y');?>
       </h5>
       <h3 class="entry-title">
         <a href="<?php the_permalink(); ?>" rel="bookmark">
@@ -44,14 +58,12 @@
         </a>
       </section>
     </article>
-    <?php endwhile; ?>
-    <?php // end of the loop ?>
+    <?php endwhile;//end of the loop ?>
     <?php //pagination here ?>
     <?php wp_reset_postdata(); ?>
-<?php else : ?>
+    <?php else : //if no post in query ?>
     <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
-<?php endif; ?>
-
+    <?php endif; ?>
   </main>
   <aside>
     <nav>
@@ -59,4 +71,3 @@
     </nav>
   </aside>
 </section>
-