first running template with heather, menus, hero, search and collections

asset/css/archive.css

@@ -1,6 +1,6 @@
 
 
-.archive-logo {
+/* .archive-logo {
   width: 80px;
 }
 .archive-page-title {
@@ -23,4 +23,4 @@
   cursor: pointer;
   text-transform: uppercase;
   border: double;
-}
+} */

asset/scss/_settings.scss

@@ -66,8 +66,8 @@
 // 0. arcHIVE specific styles
 // ---------
 // global project styles
-//@import "global/colors";
-//@import "global/typography";
+@import "global/colors";
+@import "global/typography";
 
 // 1. Global
 // ---------
@@ -108,9 +108,15 @@ $global-button-cursor: auto;
 $global-color-pick-contrast-tolerance: 0;
 $print-transparent-backgrounds: true;
 $print-hrefs: true;
-
 @include add-foundation-colors;
 
+// arc-hive globals
+// --------------
+$global-duration-archive: 0.3s; //duration of css transitions
+$global-bezier-archive: cubic-bezier(0, 0, 0.43, 1.49);
+$global-border-archive: 1px solid $body-font-color;
+
+
 // 2. Breakpoints
 // --------------
 
@@ -247,7 +253,7 @@ $accordion-background: $white;
 $accordion-plusminus: true;
 $accordion-plus-content: '\002B';
 $accordion-minus-content: '\2013';
-$accordion-title-font-size: rem-calc(12);
+$accordion-title-font-size: $global-font-size;//rem-calc(12);
 $accordion-item-color: $body-font-color;
 $accordion-item-background-hover: none;
 $accordion-item-padding: $global-padding*1.5 0;
@@ -305,20 +311,20 @@ $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-margin: $global-margin/4;
 $button-fill: solid;
-$button-background: $primary-color;
-$button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: $white;
+$button-background: $white;//$primary-color;
+$button-background-hover: scale-color($primary-color, $lightness: 95%);
+$button-color: $primary-color;//$white;
 $button-color-alt: $black;
 $button-radius: $global-radius-archive;
-$button-border: 1px solid transparent;
+$button-border: 2px solid $button-color;//1px solid transparent;
 $button-hollow-border-width: 2px;
 $button-sizes: (
-  tiny: 0.6rem,
-  small: 0.75rem,
-  default: 1.2rem,
-  large: 1.5rem,
+  tiny: 0.7rem,
+  small: 0.95rem,
+  default: 1.6rem,
+  large: 2.4rem,
 );
 $button-palette: $foundation-palette;
 $button-opacity-disabled: 0.25;
@@ -441,7 +447,7 @@ $flexbox-responsive-breakpoints: true;
 // 20. Forms
 // ---------
 
-$fieldset-border: 1px solid $medium-gray;
+$fieldset-border: none; //1px solid $medium-gray;
 $fieldset-padding: rem-calc(20);
 $fieldset-margin: rem-calc(18 0);
 $legend-padding: rem-calc(0 3);
@@ -450,32 +456,32 @@ $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-background: none; //$light-gray;
+$input-prefix-border: none; //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-triangle-color: $primary-color;
 $select-radius: $global-radius;
-$input-color: $black;
-$input-placeholder-color: $medium-gray;
+$input-color: $primary-color;
+$input-placeholder-color: scale-color($primary-color, $lightness: 60%);
 $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: none; //1px solid $medium-gray;
+$input-border-focus: none; // 1px solid $dark-gray;
 $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;
@@ -813,22 +819,22 @@ $switch-cursor-disabled: not-allowed;
 
 $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-border: none;//1px solid smart-scale($table-background, $table-color-scale);
+$table-padding: $global-padding*1.5 0;//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-is-striped: false;//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-background: $white;//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;
+$table-stack-breakpoint: small;
 
 // 51. Tabs
 // --------
@@ -886,7 +892,7 @@ $tooltip-radius: $global-radius;
 // -----------
 
 $topbar-padding: 0.5rem;
-$topbar-background: $light-gray;
+$topbar-background: $white;
 $topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
 $topbar-input-width: 200px;
@@ -906,4 +912,3 @@ $grid-padding-gutters: $grid-margin-gutters;
 $grid-container-padding: $grid-padding-gutters;
 $grid-container-max: $global-width;
 $xy-block-grid-max: 8;
-

asset/scss/components/_accordion.scss

@@ -0,0 +1,16 @@
+.accordion-item {
+  border-bottom: $global-border-archive;
+}
+.accordion-title {
+  ul,ol {
+    list-style: none;
+    //@include flex;
+    //@include flex-align(justify,middle);
+    @include xy-grid;
+  }
+  li {
+    display:inline;
+    @include xy-cell(3);
+    text-align:left;
+  }
+}

asset/scss/components/_buttons.scss

@@ -0,0 +1,47 @@
+button,.button {
+  &:not(.large,.small,.tiny){
+    // min-width: 20rem;
+  }
+    &.primary {
+      color: $white;
+    }
+    &.success {
+      border-color: $success-color;
+    }
+    &.alert {
+      border-color: $alert-color;
+      color: $white;
+      &:hover{
+        color:$white;
+      }
+    }
+    &.secondary {
+      border-color: $secondary-color;
+    }
+}
+.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;
+    }
+  }
+}
+.search {
+  .button {
+    border-color: $primary-color;
+  }
+  button.appear{
+    min-width: unset;
+    background-color: $primary-color;
+    color: $white;
+    border-radius:$global-radius-archive;
+    border: none;
+  }
+}

asset/scss/components/_cards.scss

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

asset/scss/components/_dividers.scss

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

asset/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);
+  }
+}

asset/scss/components/_forms.scss

@@ -0,0 +1,66 @@
+.search{
+  .input-group * {
+    margin: 0;
+  }
+  .input-group {
+    position: relative;
+    border-radius: 4rem;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+  }
+  .input-group .appear {
+    right: 0;
+    position: absolute;
+    height: 100%;
+    padding: 0.3rem 1rem;
+  }
+  .button{
+    border-color: $primary-color;
+  }
+  .appear{
+    display:none;
+  }
+  input{
+    &:active{
+      border-color: $primary-color;
+      background-color: $input-background-focus;
+    }
+    &:focus,&:focus-within{
+      border-color: $primary-color;
+      background-color: $input-background;
+    }
+    &:not(:placeholder-shown) {
+      border:none;
+      background-color: $input-background-focus;
+      position: relative;
+      right: 2rem;
+      + .appear {
+        display: block;
+        color: $primary-color;
+        background-color: $input-background-focus;
+        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%);
+    }
+  }
+}

asset/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;
+}

asset/scss/components/_tables.scss

@@ -0,0 +1,80 @@
+table {
+  tbody .table-expand-row{
+    border-top: $global-border-archive;
+  }
+  th {
+    color: $mid-grey;
+  }
+  th,td {
+    font-weight: normal;
+    padding: $global-padding*1.5;
+    line-height: 1.6;
+  }
+}
+
+
+// --
+// table expand
+// https://get.foundation/building-blocks/blocks/table-expand.html
+
+.table-expand {
+  // margin-top: 5rem;
+
+  td {
+    // color: $dark-gray;
+  }
+
+  tr {
+    // border: 1px solid $light-gray;
+  }
+
+  .text-right {
+    // padding-right: 3rem;
+  }
+}
+
+.table-expand-row {
+  &.is-active {
+    .expand-icon::after {
+      content: '-';
+    }
+  }
+
+  .expand-icon::after {
+    content: '+';
+    float: right;
+  }
+}
+
+// this is where the magic happens
+.table-expand-row-content {
+  display: none;
+}
+
+.table-expand-row-content {
+  &.is-active {
+    display: table-row;
+    animation: fadeIn ease-in 1;
+    animation-fill-mode: both;
+    animation-duration: 0.5s;
+  }
+}
+
+.table-expand-row-nested {
+  column-span: 3;
+  // background-color: $light-gray;
+  &:first-child {
+    column-span: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+// end table expand
+// --

asset/scss/default.scss

@@ -1,8 +1,131 @@
+//------------------
+//begin omekas styles
+
+//@charset 'utf-8';
+
+//@import 'global/globals-default';
+//@import 'global/colors';
+//@import 'global/typography';
+//@import 'settings';
+//@import 'foundation-core';
+//@import 'omeka';
+
+// end omekas styles
+// -----------------
 @charset 'utf-8';
 
-@import 'global/globals-default';
-@import 'global/colors';
-@import 'global/typography';
+// foundation styles
 @import 'settings';
-@import 'foundation-core';
-@import 'omeka';
+@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";
+@import "global/omeka";
+
+// 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/forms";
+@import "components/dividers";
+@import "components/cards";
+@import "components/buttons";
+@import "components/accordion";
+@import "components/tables";
+
+
+// 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/'));
+//  });

asset/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;
+}

asset/scss/global/_branding.scss

@@ -12,7 +12,11 @@
     background-repeat: no-repeat;
     background-position: center;
   }
-  &.archive{
+  .logo {
+    max-width: 10rem;
+    margin-top: -5rem; //half of .logo size
+  }
+  &.arc-hive{
     &::before {
       max-width: 10rem;
       background-image: url('../img/ARC-HIVE-logo.svg');

asset/scss/modules/_content.scss

@@ -0,0 +1,361 @@
+  //content {
+
+    // general styles
+    //----------------
+    //
+    // mods on fonts and typography
+    // not in foundation variables
+    // -----------------------------
+
+    h1,h2,h3,h4,h5,h6,
+    .h1,.h2,.h3,.h4,.h5,.h6,
+    button,.button,
+    header nav {
+            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;
+          }
+        }
+        .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;
+          }
+        }
+      }
+    }
+
+
+    //
+    // 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);
+          padding-top: $global-padding*3;
+          h3 {
+            line-height: $global-lineheight/1.5;
+          }
+        }
+      }
+      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{
+        @include xy-cell(12);
+        @include flex;
+        @include flex-align(center,top);
+        padding: $global-padding*2 0;
+      }
+      header {
+        margin-top: 2*$global-margin;
+        border-top: 1px solid $body-font-color;
+        padding: $global-padding*2 0;
+      }
+      main {
+        @include xy-grid;
+        article{
+          // text-align:center;
+          @include card-container();
+          @include breakpoint(small){
+            @include xy-cell();
+          }
+          @include breakpoint(medium){
+          }
+          @include breakpoint(large){
+          }
+          margin-bottom:0;
+        }
+        table {
+          thead,tbody,tfoot {
+            margin: $global-padding*2;
+          }
+        }
+      }
+      .accordion-content {
+        @include xy-grid(12);
+        figure {
+          @include xy-cell(4);
+        }
+        p {
+          @include xy-cell(6);
+        }
+      }
+    }
+    // end collections category
+
+    // partners
+    // for big announcemnts
+    //---------------------
+
+.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 {
+    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 * 3;
+          }
+        }
+        @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);
+          }
+          img {
+          //  max-width: unset !important;
+            height: 100% !important;
+          }
+          .textwidget {
+            font-size: $global-font-size*1.2;
+            padding: $global-padding * 2;
+          }
+        }
+        @include breakpoint(xlarge){
+          .textwidget {
+            font-size: $global-font-size*1.3;
+            padding: $global-padding*3;
+          }
+        }
+        @include breakpoint(xxlarge){
+          .textwidget {
+            font-size: $global-font-size*1.6;
+            padding: $global-padding*3;
+          }
+        }
+        &:first-child {
+            background-color: $primary-color;
+            font-variant:all-small-caps;
+        }
+        color: $white;
+
+        .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;
+        }
+      }
+    }
+    //hero secondary
+    &.secondary {
+      border-top: none;
+      background-color: $secondary-color;
+      .slide{
+        figure {
+          background-color: unset;
+        }
+      }
+    }
+    &.omeka {
+      border-top: none;
+      max-height: unset;
+      @include breakpoint(small){
+        .slides {
+          background-color: $secondary-color;
+          .slide {
+            flex-direction: column;
+            align-content: center;
+            align-self: center;
+            margin: $global-margin auto;
+            &:first-child {
+              color: unset;
+              background-color: unset;
+              font-variant:all-small-caps;
+            }
+            figure {
+              margin: 0 auto;
+              display:flex;
+              justify-content: center;
+            }
+          }
+        }
+      }
+      aside {
+        background-color: $white;
+        flex-direction: column;
+        align-content: center;
+        h2 {
+          margin: $global-margin;
+        }
+      }
+    }
+  }
+  //end hero
+
+//}
+// end content

asset/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;
+}

asset/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);
+       }
+      }
+    }
+  }
+ }
+

asset/scss/modules/_header.scss

@@ -0,0 +1,47 @@
+
+  header {
+    @include xy-grid();
+    @include xy-gutters(0);
+    main {
+      @include breakpoint(small){
+        @include xy-cell(12);
+        @include flex-align(center, middle);
+        padding: $global-padding*2 $global-padding;
+        min-width: 14rem;
+        text-align: center;
+      }
+      @include breakpoint(medium){
+        @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);
+        a, button {
+          color: $black;
+          &:hover {
+            color: $anchor-color;
+          }
+        }
+        menu {
+          margin: 0;
+          padding: 0;
+          font-size: 0.8rem;
+        }
+      }
+      @include breakpoint(medium){
+        @include xy-cell(auto);
+        @include flex;
+        @include flex-align(right, middle);
+        menu {
+          margin: inherit;
+          padding: inherit;
+          font-size: $global-font-size*1.5;
+        }
+      }
+    }
+  }

asset/scss/modules/_navigation.scss

@@ -0,0 +1,8 @@
+// navigation scss
+
+.top-bar {
+  width: 100%;
+  .top-bar-left {
+    justify-content: flex-start;
+  }
+}

asset/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;
+  }
+}

asset/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;
+    }
+  }
+}

view/common/block-layout/list-of-sites.phtml

@@ -2,40 +2,55 @@
 $archiveSiteHelper = $this->getHelperPluginManager()->get('archiveSiteMeta');
 ?>
 
-<div class="list-of-sites">
-    <div class="site-list">
+<section class="collections-list">
 
-      <table>
-        <thead>
-          <tr>
-            <th>Title</th>
-            <th>Artist</th>
-            <th>Collection</th>
-            <th>Date</th>
-          </tr>
-        </thead>
-        <tbody>
+  <header>
+    <h2> Latest in collections</h2>
+  </header>
+  <main class="">
+    <article class="">
+      <ul class="accordion" data-responsive-accordion-tabs="accordion small-accordion" data-multi-expand="true" data-allow-all-closed="true" data-deep-link="true">
+        <li class="accordion-item title" data-accordion-item disabled>
+          <a href="#" class="accordion-title">
+            <ul class="">
+              <li class="title">Title</li>
+              <li class="curator">Artist</li>
+              <li class="collection-name">Collection</li>
+              <li class="date">Date</li>
+            </ul>
+          </a>
+          <div class="accordion-content" data-tab-content>
+            <figure>
+            </figure>
+            <p>
+            </p>
+          </div>
+        </li>
 
         <?php
+        // read each omeka site to publish
         foreach($sites as $site):
-            $site_meta_values = $archiveSiteHelper->getSiteMetaValues($site);
-            echo $this->partial('common/site-list-entry', [
-                            'site' => $site,
-                            'showSummary' => $summaries,
-                            'site_meta_values' => $site_meta_values,
-                            'archive_collections' => $archiveSiteHelper->getCollections(),
-            ]);
+          $site_meta_values = $archiveSiteHelper->getSiteMetaValues($site);
+          // table body build file
+          echo $this->partial('common/site-list-entry', [
+            'site' => $site,
+            'showSummary' => $summaries,
+            'site_meta_values' => $site_meta_values,
+            'archive_collections' => $archiveSiteHelper->getCollections(),
+          ]);
         endforeach;
         ?>
-
-      </tbody>
-  </table>
-
-    </div>
-    <?php
-    if (1 == 0):
-    //if ($pagination):
+      </ul>
+    </article>
+  </main>
+  <aside>
+    <nav>
+      <?php
+      if (1 == 0):
+        //if ($pagination):
         echo $this->pagination();
-    endif;
-    ?>
-</div>
+      endif;
+      ?>
+    </nav>
+  </aside>
+</section>

view/common/header-archive.phtml

@@ -0,0 +1,20 @@
+<main class="">
+  <?php if ($this->themeSetting('logo')): ?>
+  <a href="<?php echo $site->url(); ?>" class="site-brand arc-hive-off">
+    <img src="<?php echo $this->themeSettingAssetUrl('logo'); ?>" alt="<?php echo $site->title(); ?>" title="<?php echo $site->title(); ?>" class="logo">
+    <h1 class="site-name"><?php echo $site->title(); ?></h1>
+    <h2 class="site-description">an integrative digital bio-art platform</h2>
+  </a>
+  <?php else: ?>
+  <a href="<?php echo $site->url(); ?>" role="banner" class="site-brand">
+      <h1 class="site-name-show"><?php echo $this->pageTitle($site->title()); ?></h1>
+      <h2 class="site-description-show">an integrative digital bio-art platform</h2>
+  </a>
+  <?php endif; ?>
+
+</main>
+<nav>
+  <menu class="">
+    <?php echo $site->publicNav()->menu()->setPartial('common/foundation-navigation.phtml')->renderPartialWithParams(['layout' => 'dropdown']); ?>
+  </menu>
+</nav>

view/common/off-header-dropdown.phtml

@@ -1,8 +1,8 @@
 <div class="top-bar">
     <nav class="top-bar-left">
-        <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="large">
+        <!-- <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="large">
             <button class="menu-toggle" type="button" data-toggle="offCanvas" aria-label="<?php echo $this->translate('Menu'); ?>"><i class="fas fa-bars"></i></button>
-        </div>
+        </div> -->
 
         <?php if ($this->themeSetting('logo')): ?>
         <a href="<?php echo $site->url(); ?>" class="site-title"><img src="<?php echo $this->themeSettingAssetUrl('logo'); ?>" alt="<?php echo $site->title(); ?>" title="<?php echo $site->title(); ?>"></a>
@@ -13,8 +13,8 @@
     </nav>
     <div class="top-bar-right" id="responsive-menu">
         <?php echo $site->publicNav()->menu()->setPartial('common/foundation-navigation.phtml')->renderPartialWithParams(['layout' => 'dropdown']); ?>
-        <div class="search">
-            <?php echo $this->partial('common/search-form'); ?>
-        </div>
+        <!-- <div class="search"> -->
+            <?php //echo $this->partial('common/search-form'); ?>
+        <!-- </div> -->
     </div>
 </div>

view/common/search-form.phtml

@@ -12,11 +12,20 @@ switch ($searchType) {
 $searchValue = $this->escapeHtml($this->params()->fromQuery('fulltext_search', ''));
 ?>
 
-<form action="<?php echo $this->escapeHtml($searchAction); ?>" id="search-form" class="input-group">
+<form class="search" action="<?php echo $this->escapeHtml($searchAction); ?>">
+  <div class="input-group">
     <input type="text" name="fulltext_search" value="<?php echo $searchValue; ?>"
         placeholder="<?php echo $translate('Search'); ?>"
-        aria-label="<?php echo $translate('Search'); ?>" class="input-group-field">
-    <div class="input-group-button">
-    <button type="submit" class="button"><?php echo $translate('Search'); ?></button>
-    </div>
+        aria-label="<?php echo $translate('Search'); ?>" class="input-group-field button hollow" />
+    <button class="appear button" type="submit"><?php echo $translate('Search'); ?></button>
+  </div>
 </form>
+
+<!-- <form action="<?php// echo $this->escapeHtml($searchAction); ?>" id="search-form" class="input-group">
+    <input type="text" name="fulltext_search" value="<?php //echo $searchValue; ?>"
+        placeholder="<?php// echo $translate('Search'); ?>"
+        aria-label="<?php //echo $translate('Search'); ?>" class="input-group-field">
+    <div class="input-group-button">
+    <button type="submit" class="button"><?php //echo $translate('Search'); ?></button>
+    </div>
+</form> -->

view/common/site-list-entry.phtml

@@ -1,41 +1,43 @@
 <?php
+// publish as a table the content
 $summary = $showSummary ? $site->summary() : null;
+//
 ?>
 
-  <tr class="_expand_site_item">
-    <td>
-      <?= $site->title() ?>
-    </td>
-    <td>
-      <?php if ($site_meta_values != null): ?>
-        <?= $site_meta_values['currator']; ?><br />
-      <?php endif; ?>
-    </td>
-    <td>
-      <?php if ($site_meta_values != null): ?>
-        <?= $archive_collections[$site_meta_values['collection']]; ?>
-      <?php endif; ?>
-    </td>
-    <td>
-      <?php if ($site_meta_values != null): ?>
-        <?= $site_meta_values['project_date']; ?>
-      <?php endif; ?>
-    </td>
-  </tr>
-  <tr style="display:none">
-    <td>
+<li class="accordion-item" data-accordion-item>
+  <a href="#" class="accordion-title">
+    <ul class="">
+      <li class="title">
+        <?= $site->title() ?>
+      </li>
+      <li class="curator">
+        <?php if ($site_meta_values != null): ?>
+          <?= $site_meta_values['currator']; ?><br />
+        <?php endif; ?>
+      </li>
+      <li class="collection-name">
+        <?php if ($site_meta_values != null): ?>
+          <?= $archive_collections[$site_meta_values['collection']]; ?>
+        <?php endif; ?>
+      </li>
+      <li class="date">
+        <?php if ($site_meta_values != null): ?>
+          <?= $site_meta_values['project_date']; ?>
+        <?php endif; ?>
+      </li>
+    </ul>
+  </a>
+  <div class="accordion-content" data-tab-content>
+    <figure>
       <?php if ($site_meta_values != null): ?>
         <img src="<?= $site_meta_values['thumbnail']; ?>" />
       <?php endif; ?>
-    </td>
-    <td colspan="3">
+    </figure>
+    <p>
       <?php if ($summary): ?>
-      <?php echo nl2br($this->escapeHtml($summary)); ?>
-      <br />
+        <?php echo nl2br($this->escapeHtml($summary)); ?>
       <?php endif; ?>
-      <button class="go_to_site_button"
-              onclick="window.location.href = '<?= $site->siteUrl() ?>'">
-        View
-      </button>
-    </td>
-  </tr>
+      <a class="button small" href="<?= $site->siteUrl() ?>">View</a>
+    </p>
+  </div>
+</li>

view/layout/layout.phtml

@@ -20,7 +20,7 @@ $this->headScript()->prependFile($this->assetUrl('js/global.js', 'Omeka'));
 $this->headScript()->prependFile($this->assetUrl('js/expand-site-list-item.js'));
 
 $this->headScript()->prependFile($this->assetUrl('vendor/jquery/jquery.min.js', 'Omeka'));
-$this->headLink()->prependStylesheet($this->assetUrl("css/archive.css"));
+// $this->headLink()->prependStylesheet($this->assetUrl("css/archive.css"));
 $this->trigger('view.layout');
 $title = $this->pageTitle($site->title());
 $userBar = $this->userBar();
@@ -33,7 +33,7 @@ if ($userBar) {
 
 $logo = $this->themeSettingAssetUrl('logo');
 if ($logo):
-    $titlelogo = '<img class="archive-logo" src="' . $this->escapeHtml($logo) . '"' . 'alt="' . $site->title() . '"' . '>';
+    $titlelogo = '<img class="site-logo" src="' . $this->escapeHtml($logo) . '"' . 'alt="' . $site->title() . '"' . '>';
 endif;
 
 ?>
@@ -48,61 +48,37 @@ endif;
     </head>
 
     <?php echo $this->htmlElement('body'); ?>
-
-        <div id="offCanvas" class="off-canvas position-left" data-off-canvas>
-            <?php echo $site->publicNav()->menu()->setPartial('common/foundation-navigation.phtml')->renderPartialWithParams(['layout' => 'vertical']); ?>
-            <div class="search">
-                <?php echo $this->partial('common/search-form'); ?>
-            </div>
-        </div>
-        <div class="off-canvas-content" data-off-canvas-content>
-
-            <a id="skipnav" href="#content"><?php echo $this->translate('Skip to main content'); ?></a>
-            <?php echo $userBar; ?>
-
-            <!-- <a href="/"> -->
-              <?php //echo $titlelogo; ?>
-            <!-- </a> -->
-
-            <h1 id="archive_page_title"
-                class="archive-page-title">
-            </h1>
-
-            <?php
-            //echo $page;
-            //echo $this->container;
-            /*
-            foreach ($this->container as $page) {
-              print($page->id);
-            }
-            */
-            /*
-            $nav = $site->publicNav();
-            $container = $nav->getContainer();
-            $activePage = $nav->findActive($container);
-
-            $slug = $activePage['page']->getParams()['page-slug'];
-            print($slug);
-            foreach ($activePage['page']->getParams() as $key => $param) {
-              print($key.'  '.$param);
-            }
-            #$page_id = $activePage->id();
-            #print($page_id);
-            */
-            //$header_image = $this->getHelperPluginManager()->get('pageMeta')->getMetaImage($this);
-            ?>
+    <content class="">
 
             <header>
-                <?php if ($navLayout == 'vertical'): ?>
-                <?php echo $this->partial('common/header-vertical'); ?>
-                <?php else: ?>
-                <?php echo $this->partial('common/header-dropdown'); ?>
-                <?php endif; ?>
+              <?php echo $userBar; ?>
+              <?php echo $this->partial('common/header-archive'); ?>
             </header>
 
-            <div id="content" role="main">
+            <section class="hero omeka">
+              <main class="slides">
+                <section class="slide">
+                    <p>ARC-HIVE is a curatorial space that gathers artworks that work in the continuum of biomateriality, from DNA, proteins, and cells to full organisms. They can be manipulation, modification or (re)creation of life and living processes.</p>
+                    <figure>
+                      <img src="<?php echo $this->themeSettingAssetUrl('logo'); ?>" alt="<?php echo $site->title(); ?>" title="<?php echo $site->title(); ?>" class="logo">
+                    </figure>
+                </section>
+              </main>
+              <aside>
+                <h2>collections</h2>
+
+                <?php echo $this->partial('common/search-form.phtml'); ?>
+
+              </aside>
+            </section>
+
+            <article>
+              <main>
                 <?php echo $this->content; ?>
-            </div>
+              </main>
+              <aside>
+              </aside>
+            </article>
 
             <footer>
                 <?php if ($footerContent = $this->themeSetting('footer')): ?>
@@ -111,9 +87,12 @@ endif;
                     <?php echo $this->translate('Powered by Omeka S'); ?>
                 <?php endif; ?>
             </footer>
-        </div>
+            <!-- end off-canvas-content -->
+            <!-- </div> -->
+        </content>
         <script>
           $(document).foundation();
         </script>
+
     </body>
 </html>