first running template with heather, menus, hero, search and collections
This commit is contained in:
parent
7dc3de84c2
commit
bf17d93710
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
|
||||
.archive-logo {
|
||||
/* .archive-logo {
|
||||
width: 80px;
|
||||
}
|
||||
.archive-page-title {
|
||||
|
|
@ -23,4 +23,4 @@
|
|||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
border: double;
|
||||
}
|
||||
} */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -66,13 +66,13 @@
|
|||
// 0. arcHIVE specific styles
|
||||
// ---------
|
||||
// global project styles
|
||||
//@import "global/colors";
|
||||
//@import "global/typography";
|
||||
@import "global/colors";
|
||||
@import "global/typography";
|
||||
|
||||
// 1. Global
|
||||
// ---------
|
||||
|
||||
$global-font-size:100%;
|
||||
$global-font-size:100%;
|
||||
$global-width: 100vw;
|
||||
$global-lineheight: 1.5;
|
||||
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.card {
|
||||
padding: $global-padding;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.dotted {
|
||||
border-style: dashed;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
// --
|
||||
|
|
@ -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/'));
|
||||
// });
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// navigation scss
|
||||
|
||||
.top-bar {
|
||||
width: 100%;
|
||||
.top-bar-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<main class="">
|
||||
<?php if ($this->themeSetting('logo')): ?>
|
||||
<a href="<?php echo $site->url(); ?>" class="site-brand arc-hive-off">
|
||||