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

This commit is contained in:
jorge 2021-07-02 14:17:32 +02:00
parent 7dc3de84c2
commit bf17d93710
29 changed files with 1353 additions and 101 deletions

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;
}
} */

File diff suppressed because one or more lines are too long

3
asset/css/editor.css Normal file

File diff suppressed because one or more lines are too long

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;

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

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

View File

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

View File

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

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

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

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

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

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

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

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

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

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

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

View File

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

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

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

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