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

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

This commit is contained in:
jorge-vitrubio 2021-07-02 14:17:32 +02:00
parent 7dc3de84c2
commit bf17d93710
29 changed files with 1353 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
asset/css/archive.css
View File

@ -1,6 +1,6 @@
.archive-logo {
/* .archive-logo {
width: 80px;
}
.archive-page-title {
@ -23,4 +23,4 @@
cursor: pointer;
text-transform: uppercase;
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
// ---------
// 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
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';
@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/'));
// });

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-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
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', ''));
?>
<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> -->

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('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>