arcHIVE-tech/Arc-hive-omeka-theme
arcHIVE-tech
/
Arc-hive-omeka-theme
4
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

update main branch #47

Merged
jorge merged 166 commits from develop into main 2021-12-01 11:20:13 +01:00
Conversation 3 Commits 166 Files Changed 81 +1353 -101
29 changed files with 1353 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bf17d93710 - Show all commits

4
asset/css/archive.css
View File

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

2
asset/css/default.css
View File

File diff suppressed because one or more lines are too long

3
asset/css/editor.css Normal file
View File

File diff suppressed because one or more lines are too long

73
asset/scss/_settings.scss
View File

@ -66,13 +66,13 @@
// 0. arcHIVE specific styles // 0. arcHIVE specific styles
// --------- // ---------
// global project styles // global project styles
//@import "global/colors"; @import "global/colors";
//@import "global/typography"; @import "global/typography";
// 1. Global // 1. Global
// --------- // ---------
$global-font-size:100%; $global-font-size:100%;
$global-width: 100vw; $global-width: 100vw;
$global-lineheight: 1.5; $global-lineheight: 1.5;
@ -108,9 +108,15 @@ $global-button-cursor: auto;
$global-color-pick-contrast-tolerance: 0; $global-color-pick-contrast-tolerance: 0;
$print-transparent-backgrounds: true; $print-transparent-backgrounds: true;
$print-hrefs: true; $print-hrefs: true;
@include add-foundation-colors; @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 // 2. Breakpoints
// -------------- // --------------
@ -247,7 +253,7 @@ $accordion-background: $white;
$accordion-plusminus: true; $accordion-plusminus: true;
$accordion-plus-content: '\002B'; $accordion-plus-content: '\002B';
$accordion-minus-content: '\2013'; $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-color: $body-font-color;
$accordion-item-background-hover: none; $accordion-item-background-hover: none;
$accordion-item-padding: $global-padding*1.5 0; $accordion-item-padding: $global-padding*1.5 0;
@ -305,20 +311,20 @@ $button-font-family: inherit;
$button-font-weight: null; $button-font-weight: null;
$button-font-variant: all-petite-caps; $button-font-variant: all-petite-caps;
$button-padding: $global-padding $global-padding*3; $button-padding: $global-padding $global-padding*3;
$button-margin: 0; $button-margin: $global-margin/4;
$button-fill: solid; $button-fill: solid;
$button-background: $primary-color; $button-background: $white;//$primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%); $button-background-hover: scale-color($primary-color, $lightness: 95%);
$button-color: $white; $button-color: $primary-color;//$white;
$button-color-alt: $black; $button-color-alt: $black;
$button-radius: $global-radius-archive; $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-hollow-border-width: 2px;
$button-sizes: ( $button-sizes: (
tiny: 0.6rem, tiny: 0.7rem,
small: 0.75rem, small: 0.95rem,
default: 1.2rem, default: 1.6rem,
large: 1.5rem, large: 2.4rem,
); );
$button-palette: $foundation-palette; $button-palette: $foundation-palette;
$button-opacity-disabled: 0.25; $button-opacity-disabled: 0.25;
@ -441,7 +447,7 @@ $flexbox-responsive-breakpoints: true;
// 20. Forms // 20. Forms
// --------- // ---------
$fieldset-border: 1px solid $medium-gray; $fieldset-border: none; //1px solid $medium-gray;
$fieldset-padding: rem-calc(20); $fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0); $fieldset-margin: rem-calc(18 0);
$legend-padding: rem-calc(0 3); $legend-padding: rem-calc(0 3);
@ -450,32 +456,32 @@ $helptext-color: $black;
$helptext-font-size: rem-calc(13); $helptext-font-size: rem-calc(13);
$helptext-font-style: italic; $helptext-font-style: italic;
$input-prefix-color: $black; $input-prefix-color: $black;
$input-prefix-background: $light-gray; $input-prefix-background: none; //$light-gray;
$input-prefix-border: 1px solid $medium-gray; $input-prefix-border: none; //1px solid $medium-gray;
$input-prefix-padding: 1rem; $input-prefix-padding: 1rem;
$form-label-color: $black; $form-label-color: $black;
$form-label-font-size: rem-calc(14); $form-label-font-size: rem-calc(14);
$form-label-font-weight: $global-weight-normal; $form-label-font-weight: $global-weight-normal;
$form-label-line-height: 1.8; $form-label-line-height: 1.8;
$select-background: $white; $select-background: $white;
$select-triangle-color: $dark-gray; $select-triangle-color: $primary-color;
$select-radius: $global-radius; $select-radius: $global-radius;
$input-color: $black; $input-color: $primary-color;
$input-placeholder-color: $medium-gray; $input-placeholder-color: scale-color($primary-color, $lightness: 60%);
$input-font-family: inherit; $input-font-family: inherit;
$input-font-size: rem-calc(16); $input-font-size: rem-calc(16);
$input-font-weight: $global-weight-normal; $input-font-weight: $global-weight-normal;
$input-line-height: $global-lineheight; $input-line-height: $global-lineheight;
$input-background: $white; $input-background: scale-color($primary-color, $lightness: 95%);
$input-background-focus: $white; $input-background-focus: scale-color($primary-color, $lightness: 85%);
$input-background-disabled: $light-gray; $input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray; $input-border: none; //1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray; $input-border-focus: none; // 1px solid $dark-gray;
$input-padding: $form-spacing / 2; $input-padding: $form-spacing / 2;
$input-shadow: inset 0 1px 2px rgba($black, 0.1); $input-shadow: none; //inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray; $input-shadow-focus: none; //0 0 5px $medium-gray;
$input-cursor-disabled: not-allowed; $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-number-spinners: true;
$input-radius: $global-radius; $input-radius: $global-radius;
$form-button-radius: $global-radius; $form-button-radius: $global-radius;
@ -813,22 +819,22 @@ $switch-cursor-disabled: not-allowed;
$table-background: $white; $table-background: $white;
$table-color-scale: 5%; $table-color-scale: 5%;
$table-border: 1px solid smart-scale($table-background, $table-color-scale); $table-border: none;//1px solid smart-scale($table-background, $table-color-scale);
$table-padding: rem-calc(8 10 10); $table-padding: $global-padding*1.5 0;//rem-calc(8 10 10);
$table-hover-scale: 2%; $table-hover-scale: 2%;
$table-row-hover: darken($table-background, $table-hover-scale); $table-row-hover: darken($table-background, $table-hover-scale);
$table-row-stripe-hover: darken($table-background, $table-color-scale + $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-striped-background: smart-scale($table-background, $table-color-scale);
$table-stripe: even; $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-head-row-hover: darken($table-head-background, $table-hover-scale);
$table-foot-background: smart-scale($table-background, $table-color-scale); $table-foot-background: smart-scale($table-background, $table-color-scale);
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale); $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
$table-head-font-color: $body-font-color; $table-head-font-color: $body-font-color;
$table-foot-font-color: $body-font-color; $table-foot-font-color: $body-font-color;
$show-header-for-stacked: false; $show-header-for-stacked: false;
$table-stack-breakpoint: medium; $table-stack-breakpoint: small;
// 51. Tabs // 51. Tabs
// -------- // --------
@ -886,7 +892,7 @@ $tooltip-radius: $global-radius;
// ----------- // -----------
$topbar-padding: 0.5rem; $topbar-padding: 0.5rem;
$topbar-background: $light-gray; $topbar-background: $white;
$topbar-submenu-background: $topbar-background; $topbar-submenu-background: $topbar-background;
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0; $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
$topbar-input-width: 200px; $topbar-input-width: 200px;
@ -906,4 +912,3 @@ $grid-padding-gutters: $grid-margin-gutters;
$grid-container-padding: $grid-padding-gutters; $grid-container-padding: $grid-padding-gutters;
$grid-container-max: $global-width; $grid-container-max: $global-width;
$xy-block-grid-max: 8; $xy-block-grid-max: 8;

0
asset/scss/components/.gitkeep Normal file
View File

16
asset/scss/components/_accordion.scss Normal file
View File

@ -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;
}
}

47
asset/scss/components/_buttons.scss Normal file
View File

@ -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;
}
}

3
asset/scss/components/_cards.scss Normal file
View File

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

4
asset/scss/components/_dividers.scss Normal file
View File

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

14
asset/scss/components/_featured-image.scss Normal file
View File

@ -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);
}
}

66
asset/scss/components/_forms.scss Normal file
View File

@ -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%);
}
}
}

8
asset/scss/components/_links.scss Normal file
View File

@ -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;
}

80
asset/scss/components/_tables.scss Normal file
View File

@ -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
// --

133
asset/scss/default.scss
View File

@ -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'; @charset 'utf-8';
@import 'global/globals-default'; // foundation styles
@import 'global/colors';
@import 'global/typography';
@import 'settings'; @import 'settings';
@import 'foundation-core'; @import 'foundation';
@import 'omeka'; @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/'));
// });

86
asset/scss/editor.scss Normal file
View File

@ -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;
}

6
asset/scss/global/_branding.scss
View File

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

0
asset/scss/_omeka.scss → asset/scss/global/_omeka.scss
View File

361
asset/scss/modules/_content.scss Normal file
View File

@ -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

5
asset/scss/modules/_editor-style.scss Normal file
View File

@ -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;
}

79
asset/scss/modules/_footer.scss Normal file
View File

@ -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);
}
}
}
}
}

47
asset/scss/modules/_header.scss Normal file
View File

@ -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;
}
}
}
}

8
asset/scss/modules/_navigation.scss Normal file
View File

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

201
asset/scss/templates/_front.scss Normal file
View File

@ -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;
}
}

84
asset/scss/templates/_kitchen-sink.scss Normal file
View File

@ -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;
}
}
}

20
view/common/header-archive.phtml Normal file
View File

@ -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>

0
view/common/header-dropdown.phtml → view/common/off-header-dropdown.phtml
View File

0
view/common/header-vertical.phtml → view/common/off-header-vertical.phtml
View File

19
view/common/search-form.phtml
View File

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

85
view/layout/layout.phtml
View File

@ -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('js/expand-site-list-item.js'));
$this->headScript()->prependFile($this->assetUrl('vendor/jquery/jquery.min.js', 'Omeka')); $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'); $this->trigger('view.layout');
$title = $this->pageTitle($site->title()); $title = $this->pageTitle($site->title());
$userBar = $this->userBar(); $userBar = $this->userBar();
@ -33,7 +33,7 @@ if ($userBar) {
$logo = $this->themeSettingAssetUrl('logo'); $logo = $this->themeSettingAssetUrl('logo');
if ($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; endif;
?> ?>
@ -48,61 +48,37 @@ endif;
</head> </head>
<?php echo $this->htmlElement('body'); ?> <?php echo $this->htmlElement('body'); ?>
<content class="">
<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);
?>
<header> <header>
<?php if ($navLayout == 'vertical'): ?> <?php echo $userBar; ?>
<?php echo $this->partial('common/header-vertical'); ?> <?php echo $this->partial('common/header-archive'); ?>
<?php else: ?>
<?php echo $this->partial('common/header-dropdown'); ?>
<?php endif; ?>
</header> </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; ?> <?php echo $this->content; ?>
</div> </main>
<aside>
</aside>
</article>
<footer> <footer>
<?php if ($footerContent = $this->themeSetting('footer')): ?> <?php if ($footerContent = $this->themeSetting('footer')): ?>
@ -111,9 +87,12 @@ endif;
<?php echo $this->translate('Powered by Omeka S'); ?> <?php echo $this->translate('Powered by Omeka S'); ?>
<?php endif; ?> <?php endif; ?>
</footer> </footer>
</div> <!-- end off-canvas-content -->
<!-- </div> -->
</content>
<script> <script>
$(document).foundation(); $(document).foundation();
</script> </script>
</body> </body>
</html> </html>