some gulp and node changes for sass compilation
This commit is contained in:
parent
2eef69eef4
commit
3c6e479d58
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,83 @@
|
||||||
|
import $ from 'jquery';
|
||||||
|
|
||||||
|
import { Foundation } from 'foundation-sites/js/foundation.core';
|
||||||
|
import * as CoreUtils from 'foundation-sites/js/foundation.core.utils';
|
||||||
|
import { Box } from 'foundation-sites/js/foundation.util.box'
|
||||||
|
import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
|
||||||
|
import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
|
||||||
|
import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
|
||||||
|
import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
|
||||||
|
import { Nest } from 'foundation-sites/js/foundation.util.nest';
|
||||||
|
import { Timer } from 'foundation-sites/js/foundation.util.timer';
|
||||||
|
import { Touch } from 'foundation-sites/js/foundation.util.touch';
|
||||||
|
import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
|
||||||
|
import { Abide } from 'foundation-sites/js/foundation.abide';
|
||||||
|
import { Accordion } from 'foundation-sites/js/foundation.accordion';
|
||||||
|
import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu';
|
||||||
|
import { Drilldown } from 'foundation-sites/js/foundation.drilldown';
|
||||||
|
import { Dropdown } from 'foundation-sites/js/foundation.dropdown';
|
||||||
|
import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu';
|
||||||
|
import { Equalizer } from 'foundation-sites/js/foundation.equalizer';
|
||||||
|
import { Interchange } from 'foundation-sites/js/foundation.interchange';
|
||||||
|
import { Magellan } from 'foundation-sites/js/foundation.magellan';
|
||||||
|
import { OffCanvas } from 'foundation-sites/js/foundation.offcanvas';
|
||||||
|
import { Orbit } from 'foundation-sites/js/foundation.orbit';
|
||||||
|
import { ResponsiveMenu } from 'foundation-sites/js/foundation.responsiveMenu';
|
||||||
|
import { ResponsiveToggle } from 'foundation-sites/js/foundation.responsiveToggle';
|
||||||
|
import { Reveal } from 'foundation-sites/js/foundation.reveal';
|
||||||
|
import { Slider } from 'foundation-sites/js/foundation.slider';
|
||||||
|
import { SmoothScroll } from 'foundation-sites/js/foundation.smoothScroll';
|
||||||
|
import { Sticky } from 'foundation-sites/js/foundation.sticky';
|
||||||
|
import { Tabs } from 'foundation-sites/js/foundation.tabs';
|
||||||
|
import { Toggler } from 'foundation-sites/js/foundation.toggler';
|
||||||
|
import { Tooltip } from 'foundation-sites/js/foundation.tooltip';
|
||||||
|
import { ResponsiveAccordionTabs } from 'foundation-sites/js/foundation.responsiveAccordionTabs';
|
||||||
|
|
||||||
|
Foundation.addToJquery($);
|
||||||
|
|
||||||
|
// Add Foundation Utils to Foundation global namespace for backwards
|
||||||
|
// compatibility.
|
||||||
|
Foundation.rtl = CoreUtils.rtl;
|
||||||
|
Foundation.GetYoDigits = CoreUtils.GetYoDigits;
|
||||||
|
Foundation.transitionend = CoreUtils.transitionend;
|
||||||
|
Foundation.RegExpEscape = CoreUtils.RegExpEscape;
|
||||||
|
Foundation.onLoad = CoreUtils.onLoad;
|
||||||
|
|
||||||
|
Foundation.Box = Box;
|
||||||
|
Foundation.onImagesLoaded = onImagesLoaded;
|
||||||
|
Foundation.Keyboard = Keyboard;
|
||||||
|
Foundation.MediaQuery = MediaQuery;
|
||||||
|
Foundation.Motion = Motion;
|
||||||
|
Foundation.Move = Move;
|
||||||
|
Foundation.Nest = Nest;
|
||||||
|
Foundation.Timer = Timer;
|
||||||
|
|
||||||
|
// Touch and Triggers previously were almost purely sede effect driven,
|
||||||
|
// so no need to add it to Foundation, just init them.
|
||||||
|
Touch.init($);
|
||||||
|
Triggers.init($, Foundation);
|
||||||
|
MediaQuery._init();
|
||||||
|
|
||||||
|
Foundation.plugin(Abide, 'Abide');
|
||||||
|
Foundation.plugin(Accordion, 'Accordion');
|
||||||
|
Foundation.plugin(AccordionMenu, 'AccordionMenu');
|
||||||
|
Foundation.plugin(Drilldown, 'Drilldown');
|
||||||
|
Foundation.plugin(Dropdown, 'Dropdown');
|
||||||
|
Foundation.plugin(DropdownMenu, 'DropdownMenu');
|
||||||
|
Foundation.plugin(Equalizer, 'Equalizer');
|
||||||
|
Foundation.plugin(Interchange, 'Interchange');
|
||||||
|
Foundation.plugin(Magellan, 'Magellan');
|
||||||
|
Foundation.plugin(OffCanvas, 'OffCanvas');
|
||||||
|
Foundation.plugin(Orbit, 'Orbit');
|
||||||
|
Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
|
||||||
|
Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
|
||||||
|
Foundation.plugin(Reveal, 'Reveal');
|
||||||
|
Foundation.plugin(Slider, 'Slider');
|
||||||
|
Foundation.plugin(SmoothScroll, 'SmoothScroll');
|
||||||
|
Foundation.plugin(Sticky, 'Sticky');
|
||||||
|
Foundation.plugin(Tabs, 'Tabs');
|
||||||
|
Foundation.plugin(Toggler, 'Toggler');
|
||||||
|
Foundation.plugin(Tooltip, 'Tooltip');
|
||||||
|
Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
|
||||||
|
|
||||||
|
export { Foundation };
|
||||||
|
|
@ -0,0 +1,911 @@
|
||||||
|
// Foundation for Sites Settings
|
||||||
|
// -----------------------------
|
||||||
|
//
|
||||||
|
// Table of Contents:
|
||||||
|
//
|
||||||
|
// 1. Global
|
||||||
|
// 2. Breakpoints
|
||||||
|
// 3. The Grid
|
||||||
|
// 4. Base Typography
|
||||||
|
// 5. Typography Helpers
|
||||||
|
// 6. Abide
|
||||||
|
// 7. Accordion
|
||||||
|
// 8. Accordion Menu
|
||||||
|
// 9. Badge
|
||||||
|
// 10. Breadcrumbs
|
||||||
|
// 11. Button
|
||||||
|
// 12. Button Group
|
||||||
|
// 13. Callout
|
||||||
|
// 14. Card
|
||||||
|
// 15. Close Button
|
||||||
|
// 16. Drilldown
|
||||||
|
// 17. Dropdown
|
||||||
|
// 18. Dropdown Menu
|
||||||
|
// 19. Flexbox Utilities
|
||||||
|
// 20. Forms
|
||||||
|
// 21. Label
|
||||||
|
// 22. Media Object
|
||||||
|
// 23. Menu
|
||||||
|
// 24. Meter
|
||||||
|
// 25. Off-canvas
|
||||||
|
// 26. Orbit
|
||||||
|
// 27. Pagination
|
||||||
|
// 28. Progress Bar
|
||||||
|
// 29. Prototype Arrow
|
||||||
|
// 30. Prototype Border-Box
|
||||||
|
// 31. Prototype Border-None
|
||||||
|
// 32. Prototype Bordered
|
||||||
|
// 33. Prototype Display
|
||||||
|
// 34. Prototype Font-Styling
|
||||||
|
// 35. Prototype List-Style-Type
|
||||||
|
// 36. Prototype Overflow
|
||||||
|
// 37. Prototype Position
|
||||||
|
// 38. Prototype Rounded
|
||||||
|
// 39. Prototype Separator
|
||||||
|
// 40. Prototype Shadow
|
||||||
|
// 41. Prototype Sizing
|
||||||
|
// 42. Prototype Spacing
|
||||||
|
// 43. Prototype Text-Decoration
|
||||||
|
// 44. Prototype Text-Transformation
|
||||||
|
// 45. Prototype Text-Utilities
|
||||||
|
// 46. Responsive Embed
|
||||||
|
// 47. Reveal
|
||||||
|
// 48. Slider
|
||||||
|
// 49. Switch
|
||||||
|
// 50. Table
|
||||||
|
// 51. Tabs
|
||||||
|
// 52. Thumbnail
|
||||||
|
// 53. Title Bar
|
||||||
|
// 54. Tooltip
|
||||||
|
// 55. Top Bar
|
||||||
|
// 56. Xy Grid
|
||||||
|
|
||||||
|
@import 'util/util';
|
||||||
|
|
||||||
|
|
||||||
|
// 0. arcHIVE specific styles
|
||||||
|
// ---------
|
||||||
|
// global project styles
|
||||||
|
@import "global/colors";
|
||||||
|
@import "global/typography";
|
||||||
|
|
||||||
|
// 1. Global
|
||||||
|
// ---------
|
||||||
|
|
||||||
|
$global-font-size:100%;
|
||||||
|
$global-width: 100vw;
|
||||||
|
$global-lineheight: 1.5;
|
||||||
|
|
||||||
|
$foundation-palette: (
|
||||||
|
primary: $hyperlink-blue,
|
||||||
|
secondary: $desert-red,
|
||||||
|
success: $acid-green,
|
||||||
|
warning: $bloody-red,
|
||||||
|
alert: $bloody-red,
|
||||||
|
);
|
||||||
|
$light-gray: #e6e6e6;
|
||||||
|
$medium-gray: #cacaca;
|
||||||
|
$dark-gray: #8a8a8a;
|
||||||
|
$black: #0a0a0a;
|
||||||
|
$white: #fefefe;
|
||||||
|
$body-background: $white;
|
||||||
|
$body-font-color: $black;
|
||||||
|
$body-font-family: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||||
|
$body-antialiased: true;
|
||||||
|
$global-margin: 2rem;
|
||||||
|
$global-padding: 1rem;
|
||||||
|
$global-position: 1rem;
|
||||||
|
$global-weight-normal: normal;
|
||||||
|
$global-weight-bold: bold;
|
||||||
|
$global-radius: 0;
|
||||||
|
$global-radius-archive: 2rem;
|
||||||
|
$global-menu-padding: 0.7rem 1rem;
|
||||||
|
$global-menu-nested-margin: 1rem;
|
||||||
|
$global-text-direction: ltr;
|
||||||
|
$global-flexbox: true;
|
||||||
|
$global-prototype-breakpoints: false;
|
||||||
|
$global-button-cursor: auto;
|
||||||
|
$global-color-pick-contrast-tolerance: 0;
|
||||||
|
$print-transparent-backgrounds: true;
|
||||||
|
$print-hrefs: true;
|
||||||
|
|
||||||
|
@include add-foundation-colors;
|
||||||
|
|
||||||
|
// 2. Breakpoints
|
||||||
|
// --------------
|
||||||
|
|
||||||
|
$breakpoints: (
|
||||||
|
small: 0,
|
||||||
|
medium: 640px,
|
||||||
|
large: 1024px,
|
||||||
|
xlarge: 1200px,
|
||||||
|
xxlarge: 1440px,
|
||||||
|
);
|
||||||
|
$breakpoints-hidpi: (
|
||||||
|
hidpi-1: 1,
|
||||||
|
hidpi-1-5: 1.5,
|
||||||
|
hidpi-2: 2,
|
||||||
|
retina: 2,
|
||||||
|
hidpi-3: 3
|
||||||
|
);
|
||||||
|
$print-breakpoint: large;
|
||||||
|
$breakpoint-classes: (small medium large);
|
||||||
|
|
||||||
|
// 3. The Grid
|
||||||
|
// -----------
|
||||||
|
|
||||||
|
$grid-row-width: $global-width;
|
||||||
|
$grid-column-count: 12;
|
||||||
|
$grid-column-gutter: (
|
||||||
|
small: 20px,
|
||||||
|
medium: 30px,
|
||||||
|
);
|
||||||
|
$grid-column-align-edge: true;
|
||||||
|
$grid-column-alias: 'columns';
|
||||||
|
$block-grid-max: 8;
|
||||||
|
|
||||||
|
// 4. Base Typography
|
||||||
|
// ------------------
|
||||||
|
|
||||||
|
$header-font-family: $body-font-family;
|
||||||
|
$header-font-weight: $global-weight-normal;
|
||||||
|
$header-font-style: normal;
|
||||||
|
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
|
||||||
|
$header-color: inherit;
|
||||||
|
$header-lineheight: 1.4;
|
||||||
|
$header-margin-bottom: 0.5rem;
|
||||||
|
$header-styles: (
|
||||||
|
small: (
|
||||||
|
'h1': ('font-size': 36),
|
||||||
|
'h2': ('font-size': 30),
|
||||||
|
'h3': ('font-size': 23),
|
||||||
|
'h4': ('font-size': 18),
|
||||||
|
'h5': ('font-size': 17),
|
||||||
|
'h6': ('font-size': 16),
|
||||||
|
),
|
||||||
|
medium: (
|
||||||
|
'h1': ('font-size': 58),
|
||||||
|
'h2': ('font-size': 52),
|
||||||
|
'h3': ('font-size': 40),
|
||||||
|
'h4': ('font-size': 25),
|
||||||
|
'h5': ('font-size': 20),
|
||||||
|
'h6': ('font-size': 16),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
$header-text-rendering: optimizeLegibility;
|
||||||
|
$small-font-size: 80%;
|
||||||
|
$header-small-font-color: $dark-gray;
|
||||||
|
$paragraph-lineheight: 1.6;
|
||||||
|
$paragraph-margin-bottom: 1rem;
|
||||||
|
$paragraph-text-rendering: optimizeLegibility;
|
||||||
|
$enable-code-inline: true;
|
||||||
|
$anchor-color: $primary-color;
|
||||||
|
$anchor-color-hover: $primary-color;//scale-color($anchor-color, $lightness: -14%);
|
||||||
|
$anchor-text-decoration: none;
|
||||||
|
$anchor-text-decoration-hover: none;
|
||||||
|
$hr-width: $global-width;
|
||||||
|
$hr-border: 1px solid $medium-gray;
|
||||||
|
$hr-margin: rem-calc(20) auto;
|
||||||
|
$list-lineheight: $paragraph-lineheight;
|
||||||
|
$list-margin-bottom: $paragraph-margin-bottom;
|
||||||
|
$list-style-type: disc;
|
||||||
|
$list-style-position: outside;
|
||||||
|
$list-side-margin: 1.25rem;
|
||||||
|
$list-nested-side-margin: 1.25rem;
|
||||||
|
$defnlist-margin-bottom: 1rem;
|
||||||
|
$defnlist-term-weight: $global-weight-bold;
|
||||||
|
$defnlist-term-margin-bottom: 0.3rem;
|
||||||
|
$blockquote-color: $dark-gray;
|
||||||
|
$blockquote-padding: rem-calc(9 20 0 19);
|
||||||
|
$blockquote-border: 1px solid $medium-gray;
|
||||||
|
$enable-cite-block: true;
|
||||||
|
$keystroke-font: $font-family-monospace;
|
||||||
|
$keystroke-color: $black;
|
||||||
|
$keystroke-background: $light-gray;
|
||||||
|
$keystroke-padding: rem-calc(2 4 0);
|
||||||
|
$keystroke-radius: $global-radius;
|
||||||
|
$abbr-underline: 1px dotted $black;
|
||||||
|
|
||||||
|
// 5. Typography Helpers
|
||||||
|
// ---------------------
|
||||||
|
|
||||||
|
$lead-font-size: $global-font-size * 1.25;
|
||||||
|
$lead-lineheight: 1.6;
|
||||||
|
$subheader-lineheight: 1.4;
|
||||||
|
$subheader-color: $dark-gray;
|
||||||
|
$subheader-font-weight: $global-weight-normal;
|
||||||
|
$subheader-margin-top: 0.2rem;
|
||||||
|
$subheader-margin-bottom: 0.5rem;
|
||||||
|
$stat-font-size: 2.5rem;
|
||||||
|
$cite-color: $dark-gray;
|
||||||
|
$cite-font-size: rem-calc(13);
|
||||||
|
$cite-pseudo-content: '\2014 \0020';
|
||||||
|
$code-color: $black;
|
||||||
|
$code-font-family: $font-family-monospace;
|
||||||
|
$code-font-weight: $global-weight-normal;
|
||||||
|
$code-background: $light-gray;
|
||||||
|
$code-border: 1px solid $medium-gray;
|
||||||
|
$code-padding: rem-calc(2 5 1);
|
||||||
|
$code-block-padding: 1rem;
|
||||||
|
$code-block-margin-bottom: 1.5rem;
|
||||||
|
|
||||||
|
// 6. Abide
|
||||||
|
// --------
|
||||||
|
|
||||||
|
$abide-inputs: true;
|
||||||
|
$abide-labels: true;
|
||||||
|
$input-background-invalid: get-color(alert);
|
||||||
|
$form-label-color-invalid: get-color(alert);
|
||||||
|
$input-error-color: get-color(alert);
|
||||||
|
$input-error-font-size: rem-calc(12);
|
||||||
|
$input-error-font-weight: $global-weight-bold;
|
||||||
|
|
||||||
|
// 7. Accordion
|
||||||
|
// ------------
|
||||||
|
|
||||||
|
$accordion-background: $white;
|
||||||
|
$accordion-plusminus: true;
|
||||||
|
$accordion-plus-content: '\002B';
|
||||||
|
$accordion-minus-content: '\2013';
|
||||||
|
$accordion-title-font-size: rem-calc(12);
|
||||||
|
$accordion-item-color: $body-font-color;
|
||||||
|
$accordion-item-background-hover: none;
|
||||||
|
$accordion-item-padding: $global-padding*1.5 0;
|
||||||
|
$accordion-content-background: $white;
|
||||||
|
$accordion-content-border: none;
|
||||||
|
$accordion-content-color: $body-font-color;
|
||||||
|
$accordion-content-padding: $global-padding*1.5 0;
|
||||||
|
|
||||||
|
// 8. Accordion Menu
|
||||||
|
// -----------------
|
||||||
|
|
||||||
|
$accordionmenu-padding: $global-menu-padding;
|
||||||
|
$accordionmenu-nested-margin: $global-menu-nested-margin;
|
||||||
|
$accordionmenu-submenu-padding: $accordionmenu-padding;
|
||||||
|
$accordionmenu-arrows: true;
|
||||||
|
$accordionmenu-arrow-color: $primary-color;
|
||||||
|
$accordionmenu-item-background: null;
|
||||||
|
$accordionmenu-border: null;
|
||||||
|
$accordionmenu-submenu-toggle-background: null;
|
||||||
|
$accordion-submenu-toggle-border: $accordionmenu-border;
|
||||||
|
$accordionmenu-submenu-toggle-width: 40px;
|
||||||
|
$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
|
||||||
|
$accordionmenu-arrow-size: 6px;
|
||||||
|
|
||||||
|
// 9. Badge
|
||||||
|
// --------
|
||||||
|
|
||||||
|
$badge-background: $primary-color;
|
||||||
|
$badge-color: $white;
|
||||||
|
$badge-color-alt: $black;
|
||||||
|
$badge-palette: $foundation-palette;
|
||||||
|
$badge-padding: 0.3em;
|
||||||
|
$badge-minwidth: 2.1em;
|
||||||
|
$badge-font-size: 0.6rem;
|
||||||
|
|
||||||
|
// 10. Breadcrumbs
|
||||||
|
// ---------------
|
||||||
|
|
||||||
|
$breadcrumbs-margin: 0 0 $global-margin 0;
|
||||||
|
$breadcrumbs-item-font-size: rem-calc(11);
|
||||||
|
$breadcrumbs-item-color: $primary-color;
|
||||||
|
$breadcrumbs-item-color-current: $black;
|
||||||
|
$breadcrumbs-item-color-disabled: $medium-gray;
|
||||||
|
$breadcrumbs-item-margin: 0.75rem;
|
||||||
|
$breadcrumbs-item-uppercase: true;
|
||||||
|
$breadcrumbs-item-separator: true;
|
||||||
|
$breadcrumbs-item-separator-item: '/';
|
||||||
|
$breadcrumbs-item-separator-item-rtl: '\\';
|
||||||
|
$breadcrumbs-item-separator-color: $medium-gray;
|
||||||
|
|
||||||
|
// 11. Button
|
||||||
|
// ----------
|
||||||
|
|
||||||
|
$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-fill: solid;
|
||||||
|
$button-background: $primary-color;
|
||||||
|
$button-background-hover: scale-color($button-background, $lightness: -15%);
|
||||||
|
$button-color: $white;
|
||||||
|
$button-color-alt: $black;
|
||||||
|
$button-radius: $global-radius-archive;
|
||||||
|
$button-border: 1px solid transparent;
|
||||||
|
$button-hollow-border-width: 2px;
|
||||||
|
$button-sizes: (
|
||||||
|
tiny: 0.6rem,
|
||||||
|
small: 0.75rem,
|
||||||
|
default: 1.2rem,
|
||||||
|
large: 1.5rem,
|
||||||
|
);
|
||||||
|
$button-palette: $foundation-palette;
|
||||||
|
$button-opacity-disabled: 0.25;
|
||||||
|
$button-background-hover-lightness: -20%;
|
||||||
|
$button-hollow-hover-lightness: -50%;
|
||||||
|
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
|
||||||
|
$button-responsive-expanded: false;
|
||||||
|
|
||||||
|
// 12. Button Group
|
||||||
|
// ----------------
|
||||||
|
|
||||||
|
$buttongroup-margin: 1rem;
|
||||||
|
$buttongroup-spacing: 1px;
|
||||||
|
$buttongroup-child-selector: '.button';
|
||||||
|
$buttongroup-expand-max: 6;
|
||||||
|
$buttongroup-radius-on-each: true;
|
||||||
|
|
||||||
|
// 13. Callout
|
||||||
|
// -----------
|
||||||
|
|
||||||
|
$callout-background: $white;
|
||||||
|
$callout-background-fade: 85%;
|
||||||
|
$callout-border: 1px solid rgba($black, 0.25);
|
||||||
|
$callout-margin: 0 0 1rem 0;
|
||||||
|
$callout-sizes: (
|
||||||
|
small: 0.5rem,
|
||||||
|
default: 1rem,
|
||||||
|
large: 3rem,
|
||||||
|
);
|
||||||
|
$callout-font-color: $body-font-color;
|
||||||
|
$callout-font-color-alt: $body-background;
|
||||||
|
$callout-radius: $global-radius;
|
||||||
|
$callout-link-tint: 30%;
|
||||||
|
|
||||||
|
// 14. Card
|
||||||
|
// --------
|
||||||
|
|
||||||
|
$card-background: unset;
|
||||||
|
$card-font-color: $body-font-color;
|
||||||
|
$card-divider-background: $light-gray;
|
||||||
|
$card-border: none;
|
||||||
|
$card-shadow: none;
|
||||||
|
$card-border-radius: $global-radius;
|
||||||
|
$card-padding: $global-padding*4;
|
||||||
|
$card-margin-bottom: $global-margin*2;
|
||||||
|
|
||||||
|
// 15. Close Button
|
||||||
|
// ----------------
|
||||||
|
|
||||||
|
$closebutton-position: right top;
|
||||||
|
$closebutton-z-index: 10;
|
||||||
|
$closebutton-default-size: medium;
|
||||||
|
$closebutton-offset-horizontal: (
|
||||||
|
small: 0.66rem,
|
||||||
|
medium: 1rem,
|
||||||
|
);
|
||||||
|
$closebutton-offset-vertical: (
|
||||||
|
small: 0.33em,
|
||||||
|
medium: 0.5rem,
|
||||||
|
);
|
||||||
|
$closebutton-size: (
|
||||||
|
small: 1.5em,
|
||||||
|
medium: 2em,
|
||||||
|
);
|
||||||
|
$closebutton-lineheight: 1;
|
||||||
|
$closebutton-color: $dark-gray;
|
||||||
|
$closebutton-color-hover: $black;
|
||||||
|
|
||||||
|
// 16. Drilldown
|
||||||
|
// -------------
|
||||||
|
|
||||||
|
$drilldown-transition: transform 0.15s linear;
|
||||||
|
$drilldown-arrows: true;
|
||||||
|
$drilldown-padding: $global-menu-padding;
|
||||||
|
$drilldown-nested-margin: 0;
|
||||||
|
$drilldown-background: $white;
|
||||||
|
$drilldown-submenu-padding: $drilldown-padding;
|
||||||
|
$drilldown-submenu-background: $white;
|
||||||
|
$drilldown-arrow-color: $primary-color;
|
||||||
|
$drilldown-arrow-size: 6px;
|
||||||
|
|
||||||
|
// 17. Dropdown
|
||||||
|
// ------------
|
||||||
|
|
||||||
|
$dropdown-padding: 1rem;
|
||||||
|
$dropdown-background: $body-background;
|
||||||
|
$dropdown-border: none;//1px solid $medium-gray;
|
||||||
|
$dropdown-font-size: 1rem;
|
||||||
|
$dropdown-width: 100%;
|
||||||
|
$dropdown-radius: $global-radius;
|
||||||
|
$dropdown-sizes: (
|
||||||
|
tiny: 100px,
|
||||||
|
small: 200px,
|
||||||
|
large: 400px,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 18. Dropdown Menu
|
||||||
|
// -----------------
|
||||||
|
|
||||||
|
$dropdownmenu-arrows: true;
|
||||||
|
$dropdownmenu-arrow-color: $body-font-color;//$anchor-color;
|
||||||
|
$dropdownmenu-arrow-size: 6px;
|
||||||
|
$dropdownmenu-arrow-padding: 1.5rem;
|
||||||
|
$dropdownmenu-min-width: 100%;//200px;
|
||||||
|
$dropdownmenu-background: null;
|
||||||
|
$dropdownmenu-submenu-background: $dropdown-background;
|
||||||
|
$dropdownmenu-padding: $global-menu-padding;
|
||||||
|
$dropdownmenu-nested-margin: 0;
|
||||||
|
$dropdownmenu-submenu-padding: $dropdownmenu-padding;
|
||||||
|
$dropdownmenu-border: none; //1px solid $medium-gray;
|
||||||
|
$dropdown-menu-item-color-active: get-color(primary);
|
||||||
|
$dropdown-menu-item-background-active: transparent;
|
||||||
|
|
||||||
|
// 19. Flexbox Utilities
|
||||||
|
// ---------------------
|
||||||
|
|
||||||
|
$flex-source-ordering-count: 6;
|
||||||
|
$flexbox-responsive-breakpoints: true;
|
||||||
|
|
||||||
|
// 20. Forms
|
||||||
|
// ---------
|
||||||
|
|
||||||
|
$fieldset-border: 1px solid $medium-gray;
|
||||||
|
$fieldset-padding: rem-calc(20);
|
||||||
|
$fieldset-margin: rem-calc(18 0);
|
||||||
|
$legend-padding: rem-calc(0 3);
|
||||||
|
$form-spacing: rem-calc(16);
|
||||||
|
$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-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-radius: $global-radius;
|
||||||
|
$input-color: $black;
|
||||||
|
$input-placeholder-color: $medium-gray;
|
||||||
|
$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-padding: $form-spacing / 2;
|
||||||
|
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
|
||||||
|
$input-shadow-focus: 0 0 5px $medium-gray;
|
||||||
|
$input-cursor-disabled: not-allowed;
|
||||||
|
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
|
||||||
|
$input-number-spinners: true;
|
||||||
|
$input-radius: $global-radius;
|
||||||
|
$form-button-radius: $global-radius;
|
||||||
|
|
||||||
|
// 21. Label
|
||||||
|
// ---------
|
||||||
|
|
||||||
|
$label-background: $primary-color;
|
||||||
|
$label-color: $white;
|
||||||
|
$label-color-alt: $black;
|
||||||
|
$label-palette: $foundation-palette;
|
||||||
|
$label-font-size: 0.8rem;
|
||||||
|
$label-padding: 0.33333rem 0.5rem;
|
||||||
|
$label-radius: $global-radius;
|
||||||
|
|
||||||
|
// 22. Media Object
|
||||||
|
// ----------------
|
||||||
|
|
||||||
|
$mediaobject-margin-bottom: $global-margin;
|
||||||
|
$mediaobject-section-padding: $global-padding;
|
||||||
|
$mediaobject-image-width-stacked: 100%;
|
||||||
|
|
||||||
|
// 23. Menu
|
||||||
|
// --------
|
||||||
|
|
||||||
|
$menu-margin: 0;
|
||||||
|
$menu-nested-margin: $global-menu-nested-margin;
|
||||||
|
$menu-items-padding: $global-menu-padding;
|
||||||
|
$menu-simple-margin: 1rem;
|
||||||
|
$menu-item-color: $black;
|
||||||
|
$menu-item-color-active: $anchor-color;
|
||||||
|
$menu-item-color-alt-active: $black;
|
||||||
|
$menu-item-background-active: $white;
|
||||||
|
$menu-icon-spacing: 0.25rem;
|
||||||
|
$menu-state-back-compat: true;
|
||||||
|
$menu-centered-back-compat: true;
|
||||||
|
$menu-icons-back-compat: true;
|
||||||
|
$menu-anchor-color: $black;
|
||||||
|
$menu-anchor-color-hover: $anchor-color;
|
||||||
|
// 24. Meter
|
||||||
|
// ---------
|
||||||
|
|
||||||
|
$meter-height: 1rem;
|
||||||
|
$meter-radius: $global-radius;
|
||||||
|
$meter-background: $medium-gray;
|
||||||
|
$meter-fill-good: $success-color;
|
||||||
|
$meter-fill-medium: $warning-color;
|
||||||
|
$meter-fill-bad: $alert-color;
|
||||||
|
|
||||||
|
// 25. Off-canvas
|
||||||
|
// --------------
|
||||||
|
|
||||||
|
$offcanvas-sizes: (
|
||||||
|
small: 250px,
|
||||||
|
);
|
||||||
|
$offcanvas-vertical-sizes: (
|
||||||
|
small: 250px,
|
||||||
|
);
|
||||||
|
$offcanvas-background: $light-gray;
|
||||||
|
$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
|
||||||
|
$offcanvas-inner-shadow-size: 20px;
|
||||||
|
$offcanvas-inner-shadow-color: rgba($black, 0.25);
|
||||||
|
$offcanvas-overlay-zindex: 11;
|
||||||
|
$offcanvas-push-zindex: 12;
|
||||||
|
$offcanvas-overlap-zindex: 13;
|
||||||
|
$offcanvas-reveal-zindex: 12;
|
||||||
|
$offcanvas-transition-length: 0.5s;
|
||||||
|
$offcanvas-transition-timing: ease;
|
||||||
|
$offcanvas-fixed-reveal: true;
|
||||||
|
$offcanvas-exit-background: rgba($white, 0.25);
|
||||||
|
$maincontent-class: 'off-canvas-content';
|
||||||
|
|
||||||
|
// 26. Orbit
|
||||||
|
// ---------
|
||||||
|
|
||||||
|
$orbit-bullet-background: $medium-gray;
|
||||||
|
$orbit-bullet-background-active: $dark-gray;
|
||||||
|
$orbit-bullet-diameter: 1.2rem;
|
||||||
|
$orbit-bullet-margin: 0.1rem;
|
||||||
|
$orbit-bullet-margin-top: 0.8rem;
|
||||||
|
$orbit-bullet-margin-bottom: 0.8rem;
|
||||||
|
$orbit-caption-background: rgba($black, 0.5);
|
||||||
|
$orbit-caption-padding: 1rem;
|
||||||
|
$orbit-control-background-hover: rgba($black, 0.5);
|
||||||
|
$orbit-control-padding: 1rem;
|
||||||
|
$orbit-control-zindex: 10;
|
||||||
|
|
||||||
|
// 27. Pagination
|
||||||
|
// --------------
|
||||||
|
|
||||||
|
$pagination-font-size: rem-calc(14);
|
||||||
|
$pagination-margin-bottom: $global-margin;
|
||||||
|
$pagination-item-color: $black;
|
||||||
|
$pagination-item-padding: rem-calc(3 10);
|
||||||
|
$pagination-item-spacing: rem-calc(1);
|
||||||
|
$pagination-radius: $global-radius;
|
||||||
|
$pagination-item-background-hover: $light-gray;
|
||||||
|
$pagination-item-background-current: $primary-color;
|
||||||
|
$pagination-item-color-current: $white;
|
||||||
|
$pagination-item-color-disabled: $medium-gray;
|
||||||
|
$pagination-ellipsis-color: $black;
|
||||||
|
$pagination-mobile-items: false;
|
||||||
|
$pagination-mobile-current-item: false;
|
||||||
|
$pagination-arrows: true;
|
||||||
|
$pagination-arrow-previous: '\00AB';
|
||||||
|
$pagination-arrow-next: '\00BB';
|
||||||
|
|
||||||
|
// 28. Progress Bar
|
||||||
|
// ----------------
|
||||||
|
|
||||||
|
$progress-height: 1rem;
|
||||||
|
$progress-background: $medium-gray;
|
||||||
|
$progress-margin-bottom: $global-margin;
|
||||||
|
$progress-meter-background: $primary-color;
|
||||||
|
$progress-radius: $global-radius;
|
||||||
|
|
||||||
|
// 29. Prototype Arrow
|
||||||
|
// -------------------
|
||||||
|
|
||||||
|
$prototype-arrow-directions: (
|
||||||
|
down,
|
||||||
|
up,
|
||||||
|
right,
|
||||||
|
left
|
||||||
|
);
|
||||||
|
$prototype-arrow-size: 0.4375rem;
|
||||||
|
$prototype-arrow-color: $black;
|
||||||
|
|
||||||
|
// 30. Prototype Border-Box
|
||||||
|
// ------------------------
|
||||||
|
|
||||||
|
$prototype-border-box-breakpoints: $global-prototype-breakpoints;
|
||||||
|
|
||||||
|
// 31. Prototype Border-None
|
||||||
|
// -------------------------
|
||||||
|
|
||||||
|
$prototype-border-none-breakpoints: $global-prototype-breakpoints;
|
||||||
|
|
||||||
|
// 32. Prototype Bordered
|
||||||
|
// ----------------------
|
||||||
|
|
||||||
|
$prototype-bordered-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-border-width: rem-calc(1);
|
||||||
|
$prototype-border-type: solid;
|
||||||
|
$prototype-border-color: $medium-gray;
|
||||||
|
|
||||||
|
// 33. Prototype Display
|
||||||
|
// ---------------------
|
||||||
|
|
||||||
|
$prototype-display-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-display: (
|
||||||
|
inline,
|
||||||
|
inline-block,
|
||||||
|
block,
|
||||||
|
table,
|
||||||
|
table-cell
|
||||||
|
);
|
||||||
|
|
||||||
|
// 34. Prototype Font-Styling
|
||||||
|
// --------------------------
|
||||||
|
|
||||||
|
$prototype-font-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-wide-letter-spacing: rem-calc(4);
|
||||||
|
$prototype-font-normal: $global-weight-normal;
|
||||||
|
$prototype-font-bold: $global-weight-bold;
|
||||||
|
|
||||||
|
// 35. Prototype List-Style-Type
|
||||||
|
// -----------------------------
|
||||||
|
|
||||||
|
$prototype-list-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-style-type-unordered: (
|
||||||
|
disc,
|
||||||
|
circle,
|
||||||
|
square
|
||||||
|
);
|
||||||
|
$prototype-style-type-ordered: (
|
||||||
|
decimal,
|
||||||
|
lower-alpha,
|
||||||
|
lower-latin,
|
||||||
|
lower-roman,
|
||||||
|
upper-alpha,
|
||||||
|
upper-latin,
|
||||||
|
upper-roman
|
||||||
|
);
|
||||||
|
|
||||||
|
// 36. Prototype Overflow
|
||||||
|
// ----------------------
|
||||||
|
|
||||||
|
$prototype-overflow-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-overflow: (
|
||||||
|
visible,
|
||||||
|
hidden,
|
||||||
|
scroll
|
||||||
|
);
|
||||||
|
|
||||||
|
// 37. Prototype Position
|
||||||
|
// ----------------------
|
||||||
|
|
||||||
|
$prototype-position-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-position: (
|
||||||
|
static,
|
||||||
|
relative,
|
||||||
|
absolute,
|
||||||
|
fixed
|
||||||
|
);
|
||||||
|
$prototype-position-z-index: 975;
|
||||||
|
|
||||||
|
// 38. Prototype Rounded
|
||||||
|
// ---------------------
|
||||||
|
|
||||||
|
$prototype-rounded-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-border-radius: rem-calc(3);
|
||||||
|
|
||||||
|
// 39. Prototype Separator
|
||||||
|
// -----------------------
|
||||||
|
|
||||||
|
$prototype-separator-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-separator-align: center;
|
||||||
|
$prototype-separator-height: rem-calc(2);
|
||||||
|
$prototype-separator-width: 3rem;
|
||||||
|
$prototype-separator-background: $primary-color;
|
||||||
|
$prototype-separator-margin-top: $global-margin;
|
||||||
|
|
||||||
|
// 40. Prototype Shadow
|
||||||
|
// --------------------
|
||||||
|
|
||||||
|
$prototype-shadow-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
|
||||||
|
0 2px 10px 0 rgba(0,0,0,.12);
|
||||||
|
|
||||||
|
// 41. Prototype Sizing
|
||||||
|
// --------------------
|
||||||
|
|
||||||
|
$prototype-sizing-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-sizing: (
|
||||||
|
width,
|
||||||
|
height
|
||||||
|
);
|
||||||
|
$prototype-sizes: (
|
||||||
|
25: 25%,
|
||||||
|
50: 50%,
|
||||||
|
75: 75%,
|
||||||
|
100: 100%
|
||||||
|
);
|
||||||
|
|
||||||
|
// 42. Prototype Spacing
|
||||||
|
// ---------------------
|
||||||
|
|
||||||
|
$prototype-spacing-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-spacers-count: 3;
|
||||||
|
|
||||||
|
// 43. Prototype Text-Decoration
|
||||||
|
// -----------------------------
|
||||||
|
|
||||||
|
$prototype-decoration-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-text-decoration: (
|
||||||
|
overline,
|
||||||
|
underline,
|
||||||
|
line-through,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 44. Prototype Text-Transformation
|
||||||
|
// ---------------------------------
|
||||||
|
|
||||||
|
$prototype-transformation-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-text-transformation: (
|
||||||
|
lowercase,
|
||||||
|
uppercase,
|
||||||
|
capitalize
|
||||||
|
);
|
||||||
|
|
||||||
|
// 45. Prototype Text-Utilities
|
||||||
|
// ----------------------------
|
||||||
|
|
||||||
|
$prototype-utilities-breakpoints: $global-prototype-breakpoints;
|
||||||
|
$prototype-text-overflow: ellipsis;
|
||||||
|
|
||||||
|
// 46. Responsive Embed
|
||||||
|
// --------------------
|
||||||
|
|
||||||
|
$responsive-embed-margin-bottom: rem-calc(16);
|
||||||
|
$responsive-embed-ratios: (
|
||||||
|
default: 16 by 9,
|
||||||
|
standard: 4 by 3,
|
||||||
|
widescreen: 16 by 9,
|
||||||
|
classicfilm: 3 by 2,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 47. Reveal
|
||||||
|
// ----------
|
||||||
|
|
||||||
|
$reveal-background: $white;
|
||||||
|
$reveal-width: 600px;
|
||||||
|
$reveal-max-width: $global-width;
|
||||||
|
$reveal-padding: $global-padding;
|
||||||
|
$reveal-border: 1px solid $medium-gray;
|
||||||
|
$reveal-radius: $global-radius;
|
||||||
|
$reveal-zindex: 1005;
|
||||||
|
$reveal-overlay-background: rgba($black, 0.45);
|
||||||
|
|
||||||
|
// 48. Slider
|
||||||
|
// ----------
|
||||||
|
|
||||||
|
$slider-width-vertical: 0.5rem;
|
||||||
|
$slider-transition: all 0.2s ease-in-out;
|
||||||
|
$slider-height: 0.5rem;
|
||||||
|
$slider-background: $light-gray;
|
||||||
|
$slider-fill-background: $medium-gray;
|
||||||
|
$slider-handle-height: 1.4rem;
|
||||||
|
$slider-handle-width: 1.4rem;
|
||||||
|
$slider-handle-background: $primary-color;
|
||||||
|
$slider-opacity-disabled: 0.25;
|
||||||
|
$slider-radius: $global-radius;
|
||||||
|
|
||||||
|
// 49. Switch
|
||||||
|
// ----------
|
||||||
|
|
||||||
|
$switch-background: $medium-gray;
|
||||||
|
$switch-background-active: $primary-color;
|
||||||
|
$switch-height: 2rem;
|
||||||
|
$switch-height-tiny: 1.5rem;
|
||||||
|
$switch-height-small: 1.75rem;
|
||||||
|
$switch-height-large: 2.5rem;
|
||||||
|
$switch-radius: $global-radius;
|
||||||
|
$switch-margin: $global-margin;
|
||||||
|
$switch-paddle-background: $white;
|
||||||
|
$switch-paddle-offset: 0.25rem;
|
||||||
|
$switch-paddle-radius: $global-radius;
|
||||||
|
$switch-paddle-transition: all 0.25s ease-out;
|
||||||
|
$switch-opacity-disabled: .5;
|
||||||
|
$switch-cursor-disabled: not-allowed;
|
||||||
|
|
||||||
|
// 50. Table
|
||||||
|
// ---------
|
||||||
|
|
||||||
|
$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-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-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-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;
|
||||||
|
|
||||||
|
// 51. Tabs
|
||||||
|
// --------
|
||||||
|
|
||||||
|
$tab-margin: 0;
|
||||||
|
$tab-background: $white;
|
||||||
|
$tab-color: $primary-color;
|
||||||
|
$tab-background-active: $light-gray;
|
||||||
|
$tab-active-color: $primary-color;
|
||||||
|
$tab-item-font-size: rem-calc(12);
|
||||||
|
$tab-item-background-hover: $white;
|
||||||
|
$tab-item-padding: 1.25rem 1.5rem;
|
||||||
|
$tab-content-background: $white;
|
||||||
|
$tab-content-border: $light-gray;
|
||||||
|
$tab-content-color: $body-font-color;
|
||||||
|
$tab-content-padding: 1rem;
|
||||||
|
|
||||||
|
// 52. Thumbnail
|
||||||
|
// -------------
|
||||||
|
|
||||||
|
$thumbnail-border: 4px solid $white;
|
||||||
|
$thumbnail-margin-bottom: $global-margin;
|
||||||
|
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
|
||||||
|
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
|
||||||
|
$thumbnail-transition: box-shadow 200ms ease-out;
|
||||||
|
$thumbnail-radius: $global-radius;
|
||||||
|
|
||||||
|
// 53. Title Bar
|
||||||
|
// -------------
|
||||||
|
|
||||||
|
$titlebar-background: $white;
|
||||||
|
$titlebar-color: $black;
|
||||||
|
$titlebar-padding: 0.5rem;
|
||||||
|
$titlebar-text-font-weight: bold;
|
||||||
|
$titlebar-icon-color: $black;
|
||||||
|
$titlebar-icon-color-hover: $medium-gray;
|
||||||
|
$titlebar-icon-spacing: 0.25rem;
|
||||||
|
|
||||||
|
// 54. Tooltip
|
||||||
|
// -----------
|
||||||
|
|
||||||
|
$has-tip-cursor: help;
|
||||||
|
$has-tip-font-weight: $global-weight-bold;
|
||||||
|
$has-tip-border-bottom: dotted 1px $dark-gray;
|
||||||
|
$tooltip-background-color: $black;
|
||||||
|
$tooltip-color: $white;
|
||||||
|
$tooltip-padding: 0.75rem;
|
||||||
|
$tooltip-max-width: 10rem;
|
||||||
|
$tooltip-font-size: $small-font-size;
|
||||||
|
$tooltip-pip-width: 0.75rem;
|
||||||
|
$tooltip-pip-height: $tooltip-pip-width * 0.866;
|
||||||
|
$tooltip-radius: $global-radius;
|
||||||
|
|
||||||
|
// 55. Top Bar
|
||||||
|
// -----------
|
||||||
|
|
||||||
|
$topbar-padding: 0.5rem;
|
||||||
|
$topbar-background: $light-gray;
|
||||||
|
$topbar-submenu-background: $topbar-background;
|
||||||
|
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
|
||||||
|
$topbar-input-width: 200px;
|
||||||
|
$topbar-unstack-breakpoint: medium;
|
||||||
|
|
||||||
|
// 56. Xy Grid
|
||||||
|
// -----------
|
||||||
|
|
||||||
|
$xy-grid: true;
|
||||||
|
$grid-container: $global-width;
|
||||||
|
$grid-columns: 12;
|
||||||
|
$grid-margin-gutters: (
|
||||||
|
small: 20px,
|
||||||
|
medium: 30px
|
||||||
|
);
|
||||||
|
$grid-padding-gutters: $grid-margin-gutters;
|
||||||
|
$grid-container-padding: $grid-padding-gutters;
|
||||||
|
$grid-container-max: $global-width;
|
||||||
|
$xy-block-grid-max: 8;
|
||||||
|
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
@charset 'utf-8';
|
||||||
|
|
||||||
|
// foundation styles
|
||||||
|
@import 'settings';
|
||||||
|
@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";
|
||||||
|
|
||||||
|
// 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/dividers";
|
||||||
|
@import "components/cards";
|
||||||
|
@import "components/buttons";
|
||||||
|
@import "components/accordion";
|
||||||
|
|
||||||
|
|
||||||
|
// Templates
|
||||||
|
//@import "templates/front";
|
||||||
|
|
||||||
|
// Vendors
|
||||||
|
//
|
||||||
|
// fontawesome as shown here:
|
||||||
|
// https://stackoverflow.com/questions/49195144/add-font-awesome-to-gulp-project-correctly#51491927
|
||||||
|
// 1. install fortawesome
|
||||||
|
// npm install --save-dev @fortawesome/fontawesome-free
|
||||||
|
// 2. uncomment these lines
|
||||||
|
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
|
||||||
|
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands";
|
||||||
|
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular";
|
||||||
|
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid";
|
||||||
|
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";
|
||||||
|
// 3. add this to gulp
|
||||||
|
// gulp.task('icons', function() {
|
||||||
|
// return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
|
||||||
|
// .pipe(gulp.dest(dist+'/assets/webfonts/'));
|
||||||
|
// });
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
.accordion-item {
|
||||||
|
border-bottom: 1px solid $body-font-color;
|
||||||
|
}
|
||||||
|
.accordion-title {
|
||||||
|
ul,ol {
|
||||||
|
list-style: none;
|
||||||
|
@include xy-grid;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display:inline;
|
||||||
|
@include xy-cell(3);
|
||||||
|
text-align:left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
button,.button {
|
||||||
|
min-width: 20rem;
|
||||||
|
}
|
||||||
|
.hero {
|
||||||
|
button,.button {
|
||||||
|
min-width: 20vw;
|
||||||
|
color: $button-color-alt;
|
||||||
|
font-size: $global-font-size*1.3;
|
||||||
|
border-color: $button-color-alt;
|
||||||
|
border-radius: 4rem;
|
||||||
|
&:hover{
|
||||||
|
color: $anchor-color;
|
||||||
|
border-color: $anchor-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//.dropdown.menu{
|
||||||
|
// .button{
|
||||||
|
// min-width: unset;
|
||||||
|
// a {
|
||||||
|
// padding: 0.5rem;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.card {
|
||||||
|
padding: $global-padding;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
.dotted {
|
||||||
|
border-style: dashed;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
.featured-hero {
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
height: rem-calc(100);
|
||||||
|
|
||||||
|
@include breakpoint(medium) {
|
||||||
|
height: rem-calc(200);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(xlarge) {
|
||||||
|
height: rem-calc(400);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
// search elements
|
||||||
|
.search{
|
||||||
|
.input-group {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 4rem;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
.appear {
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0.3rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input-group * {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
padding-right: $global-padding * 9;
|
||||||
|
+ .appear {
|
||||||
|
display: block;
|
||||||
|
background-color: scale-color($input-background-focus, $lightness: -20%);
|
||||||
|
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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//search block size in content
|
||||||
|
article,.omekas-entry-content {
|
||||||
|
.search{
|
||||||
|
@include xy-grid();
|
||||||
|
.input-group {
|
||||||
|
@include breakpoint(small){
|
||||||
|
@include xy-cell (12);
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
@include breakpoint(medium){
|
||||||
|
@include xy-cell (6);
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
@include breakpoint(large){
|
||||||
|
@include xy-cell (4);
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
// Apply outline styles only when input method is keyboard
|
||||||
|
// remove :focus style via What Input using progressive enhancement
|
||||||
|
// so :focus isn't left broken if JavaScript fails
|
||||||
|
|
||||||
|
[data-whatinput="mouse"] a:focus, button:focus
|
||||||
|
[data-whatinput="touch"] a:focus, button:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
// Text meant only for screen readers. Addresses part of theme-check issue #840.
|
||||||
|
// https://github.com/Automattic/_s/blob/master/style.css
|
||||||
|
.screen-reader-text {
|
||||||
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
|
position: absolute !important;
|
||||||
|
height: 1px;
|
||||||
|
width: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-reader-text:focus {
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||||
|
clip: auto !important;
|
||||||
|
color: #21759b;
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: bold;
|
||||||
|
height: auto;
|
||||||
|
left: 5px;
|
||||||
|
line-height: normal;
|
||||||
|
padding: 15px 23px 14px;
|
||||||
|
text-decoration: none;
|
||||||
|
top: 5px;
|
||||||
|
width: auto;
|
||||||
|
z-index: 100000; // Above WP toolbar.
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
.brand-logo,.site-brand {
|
||||||
|
.site-name,.site-description {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display:inline-block;
|
||||||
|
margin-top:-$global-padding;
|
||||||
|
width: 100%;
|
||||||
|
height: $global-padding*5;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
&.archive{
|
||||||
|
&::before {
|
||||||
|
max-width: 10rem;
|
||||||
|
background-image: url('../img/ARC-HIVE-logo.svg');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.eu{
|
||||||
|
&::before {
|
||||||
|
max-width: 15rem;
|
||||||
|
//background-image: url('../img/eu_flag_creative_europe_co_funded_black_right.svg');
|
||||||
|
background-image: url('../img/eu_flag_creative_europe_co_funded_left.svg');
|
||||||
|
//background-image: url('../img/rechts_co-funded-by-the-creative-europe-media-programme-of-the-european-union-flag.png');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
$stone-grey: #CCCCCC;
|
||||||
|
$acid-green: #69E344;
|
||||||
|
$bubblegum-pink: #F096F9;
|
||||||
|
$desert-red: #D75930;
|
||||||
|
$mustard-yellow: #F5C042;
|
||||||
|
$beach-blue: #5CC8D1;
|
||||||
|
$hyperlink-blue: #0000DD;
|
||||||
|
$bloody-red: #D32D1F;
|
||||||
|
$mid-grey: #808080;
|
||||||
|
$antracite-grey: #333333;
|
||||||
|
$forest-green: #1E6041;
|
||||||
|
$raspberry-purple: #54367B;
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
/*
|
||||||
|
Frontend styles for gutenberg blocks
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** === Base Color Palatte === */
|
||||||
|
@each $color, $code in $foundation-palette {
|
||||||
|
|
||||||
|
.has-#{$color}-background-color {
|
||||||
|
background-color: $code;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-#{$color}-color {
|
||||||
|
color: $code;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** === Button === */
|
||||||
|
.wp-block-button {
|
||||||
|
|
||||||
|
// add general foundation button styling
|
||||||
|
.wp-block-button__link {
|
||||||
|
@extend .button;
|
||||||
|
@each $color, $code in $foundation-palette {
|
||||||
|
|
||||||
|
&.has-#{$color}-background-color {
|
||||||
|
background-color: $code;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-#{$color}-color {
|
||||||
|
color: $code;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
.wp-block-button__link{
|
||||||
|
// background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** === File === */
|
||||||
|
.wp-block-file .wp-block-file__button{
|
||||||
|
@include button();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** === Image === */
|
||||||
|
.wp-block-image {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'worksans-medium';
|
||||||
|
src: url('../fonts/WorkSans-Medium.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'worksans-mediumitalic';
|
||||||
|
src: url('../fonts/WorkSans-MediumItalic.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin font-worksans-medium {
|
||||||
|
font-face: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
@mixin font-worksans-mediumitalic {
|
||||||
|
font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// mods on fonts and typography
|
||||||
|
// not in foundation variables
|
||||||
|
// -----------------------------
|
||||||
|
|
||||||
|
//h1,h2,h3,h4,h5,h6,
|
||||||
|
//.h1,.h2,.h3,.h4,.h4,.h5,.h6,
|
||||||
|
//button,.button,
|
||||||
|
//header nav,
|
||||||
|
//.hero .claim
|
||||||
|
//{
|
||||||
|
// font-variant:all-small-caps;
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
//
|
||||||
|
//h1,h2,h3,h4,h5,h6,
|
||||||
|
//.h1,.h2,.h3,.h4,.h4,.h5,.h6 {
|
||||||
|
// a {
|
||||||
|
// color: $black;
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
// Fix the issue where the WP admin-bar overlaps the mobile menu
|
||||||
|
#wpadminbar {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make sure that the WP admin-bar does not overlap Foundation components
|
||||||
|
body.admin-bar {
|
||||||
|
// Offset sticky top bar
|
||||||
|
&.f-topbar-fixed {
|
||||||
|
.sticky.fixed {
|
||||||
|
margin-top: rem-calc(32);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Offset mobile off-canvas menu
|
||||||
|
&.offcanvas {
|
||||||
|
.off-canvas.is-open {
|
||||||
|
top: rem-calc(46);
|
||||||
|
@include breakpoint(small) {
|
||||||
|
top: rem-calc(32);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
//.wp-caption > figcaption {
|
||||||
|
// max-width: 100%;
|
||||||
|
// font-size: 0.8rem;
|
||||||
|
// color: #999;
|
||||||
|
// padding: 0.25rem 0;
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
//p.wp-caption-text{
|
||||||
|
// font-size:90%;
|
||||||
|
// color: #666;
|
||||||
|
// padding:rem-calc(10) 0;
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
//.alignleft {
|
||||||
|
// float: left;
|
||||||
|
// padding-right: 1rem;
|
||||||
|
// margin: 0;
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
//.alignright {
|
||||||
|
// float: right;
|
||||||
|
// padding-left: 1rem;
|
||||||
|
// margin: 0;
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
//.aligncenter {
|
||||||
|
// display: block;
|
||||||
|
// margin-left: auto;
|
||||||
|
// margin-right: auto;
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
//.gallery {
|
||||||
|
// @include xy-grid;
|
||||||
|
// @include xy-gutters($negative: true);
|
||||||
|
// @for $i from 1 through 9 {
|
||||||
|
// &.gallery-columns-#{$i} {
|
||||||
|
// @include xy-grid-layout(2, '.gallery-item', true);
|
||||||
|
// }
|
||||||
|
// @include breakpoint(medium){
|
||||||
|
// &.gallery-columns-#{$i} {
|
||||||
|
// @include xy-grid-layout(4, '.gallery-item', true, (small: 30px));
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// @include breakpoint(large) {
|
||||||
|
// &.gallery-columns-#{$i} {
|
||||||
|
// @include xy-grid-layout($i, '.gallery-item', true, (small: 30px));
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .gallery-icon > a {
|
||||||
|
// @include thumbnail;
|
||||||
|
// @include thumbnail-link;
|
||||||
|
// }
|
||||||
|
// .gallery-icon > img {
|
||||||
|
// @include thumbnail;
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
@ -0,0 +1,360 @@
|
||||||
|
//content {
|
||||||
|
|
||||||
|
// general styles
|
||||||
|
//----------------
|
||||||
|
//
|
||||||
|
// mods on fonts and typography
|
||||||
|
// not in foundation variables
|
||||||
|
// -----------------------------
|
||||||
|
|
||||||
|
h1,h2,h3,h4,h5,h6,
|
||||||
|
.h1,.h2,.h3,.h4,.h4,.h5,.h6,
|
||||||
|
button,.button,
|
||||||
|
header nav,
|
||||||
|
|
||||||
|
|
||||||
|
h1,h2,h3,h4,h5,h6,
|
||||||
|
.h1,.h2,.h3,.h4,.h4,.h5,.h6 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// category view and news
|
||||||
|
//--------------
|
||||||
|
|
||||||
|
.category-posts {
|
||||||
|
@include xy-grid;
|
||||||
|
header,main,aside {
|
||||||
|
@include breakpoint(small){
|
||||||
|
@include xy-cell(12);
|
||||||
|
@include flex;
|
||||||
|
@include flex-align(center,top);
|
||||||
|
padding-top: $global-padding*3;
|
||||||
|
}
|
||||||
|
@include breakpoint(medium){
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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-image: url('../img/ARC-HIVE-logo.svg');
|
||||||
|
background-color: rgb(240,240,240);
|
||||||
|
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;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.resources {
|
||||||
|
@include xy-grid;
|
||||||
|
header,main,aside {
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
article{
|
||||||
|
@include breakpoint(small){
|
||||||
|
@include xy-cell(12);
|
||||||
|
}
|
||||||
|
@include breakpoint(medium){
|
||||||
|
@include xy-cell(1 of 3);
|
||||||
|
}
|
||||||
|
@include breakpoint(large){
|
||||||
|
@include xy-cell(1 of 5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
figure {
|
||||||
|
@include breakpoint(small){
|
||||||
|
}
|
||||||
|
@include breakpoint(medium){
|
||||||
|
height: 18vw;
|
||||||
|
}
|
||||||
|
@include breakpoint(large){
|
||||||
|
height: 10vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// end category-posts
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// collections category
|
||||||
|
//--------------
|
||||||
|
|
||||||
|
.collections-list {
|
||||||
|
@include xy-grid;
|
||||||
|
header,main,aside {
|
||||||
|
@include xy-cell(12);
|
||||||
|
@include flex;
|
||||||
|
@include flex-align(center,top);
|
||||||
|
padding: $global-padding*3 0;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
border-top: 1px solid $body-font-color;
|
||||||
|
padding: $global-padding*4 0;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
@include xy-grid;
|
||||||
|
article{
|
||||||
|
text-align:center;
|
||||||
|
@include card-container();
|
||||||
|
@include breakpoint(small){
|
||||||
|
@include xy-cell();
|
||||||
|
}
|
||||||
|
@include breakpoint(medium){
|
||||||
|
}
|
||||||
|
@include breakpoint(large){
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
aside {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// end news & resources 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 {
|
||||||
|
.slides {
|
||||||
|
@include xy-grid();
|
||||||
|
border-top: 2px solid $primary-color;
|
||||||
|
.slide {
|
||||||
|
@include xy-grid;
|
||||||
|
&.widget {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
// &.widget_media_image {
|
||||||
|
// justify-content: unset;
|
||||||
|
// align-content: stretch;
|
||||||
|
// }
|
||||||
|
@include breakpoint(small){
|
||||||
|
width: 100vw;
|
||||||
|
margin: 0;
|
||||||
|
&.widget_text p,.textwidget {
|
||||||
|
padding: $global-padding * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint(medium){
|
||||||
|
&.widget_text p,.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;
|
||||||
|
}
|
||||||
|
&.widget_text p,.textwidget {
|
||||||
|
font-size: $global-font-size*1.2;
|
||||||
|
padding: $global-padding * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint(xlarge){
|
||||||
|
&.widget_text p,.textwidget {
|
||||||
|
font-size: $global-font-size*1.3;
|
||||||
|
padding: $global-padding*3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint(xxlarge){
|
||||||
|
&.widget_text p,.textwidget {
|
||||||
|
font-size: $global-font-size*1.6;
|
||||||
|
padding: $global-padding*3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-child(odd) {
|
||||||
|
background-color: $primary-color;
|
||||||
|
font-variant:all-small-caps;
|
||||||
|
* {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//end hero
|
||||||
|
|
||||||
|
//}
|
||||||
|
// end content
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
body#tinymce{
|
||||||
|
height: auto; // Fix editor style bug
|
||||||
|
max-width: $grid-row-width; // Give the editor a max-width
|
||||||
|
padding: rem-calc(20) !important;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
footer {
|
||||||
|
background-color: $secondary-color;
|
||||||
|
a {
|
||||||
|
color: $body-font-color;
|
||||||
|
&:hover {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6,
|
||||||
|
.h1,.h2,.h3,.h4,.h5,.h6,
|
||||||
|
p,ul,ol,li {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
ul,ol {
|
||||||
|
list-style: none;
|
||||||
|
li {
|
||||||
|
float:left;
|
||||||
|
padding-right: $global-padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.clear.clearfix {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
}
|
||||||
|
.site-brand,.brand-logo {
|
||||||
|
&.archive{
|
||||||
|
&::before {
|
||||||
|
margin-top:unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.eu {
|
||||||
|
&::before {
|
||||||
|
margin-top:unset;
|
||||||
|
max-width:100%;
|
||||||
|
max-height: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.copyright,.legal-credits {
|
||||||
|
font-size: $global-font-size*0.8;
|
||||||
|
}
|
||||||
|
.subsection {
|
||||||
|
@include breakpoint(small) {
|
||||||
|
@include xy-grid;
|
||||||
|
@include flex;
|
||||||
|
@include flex-align(left,bottom);
|
||||||
|
border-top: 1px solid black;
|
||||||
|
padding: $global-padding;
|
||||||
|
font-size: $global-font-size * 0.8;
|
||||||
|
&:first-child {
|
||||||
|
//padding-top: $global-padding*3;
|
||||||
|
}
|
||||||
|
.co-founded {
|
||||||
|
text-align:right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint(medium) {
|
||||||
|
font-size: $global-font-size;
|
||||||
|
}
|
||||||
|
aside {
|
||||||
|
@include breakpoint(small) {
|
||||||
|
@include xy-cell(12);
|
||||||
|
}
|
||||||
|
@include breakpoint(medium) {
|
||||||
|
@include xy-cell(3);
|
||||||
|
}
|
||||||
|
&.double {
|
||||||
|
@include breakpoint(small) {
|
||||||
|
@include xy-cell(12);
|
||||||
|
}
|
||||||
|
@include breakpoint(medium) {
|
||||||
|
@include xy-cell(6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
|
||||||
|
header {
|
||||||
|
@include xy-grid();
|
||||||
|
@include xy-gutters(0);
|
||||||
|
main {
|
||||||
|
@include breakpoint(small){
|
||||||
|
@include xy-cell(12);
|
||||||
|
@include flex-align(center, middle);
|
||||||
|
padding: $global-padding*2 $global-padding;
|
||||||
|
min-width: 14rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
@include breakpoint(medium){
|
||||||
|
@include xy-cell(shrink);
|
||||||
|
@include flex-align(left, middle);
|
||||||
|
text-align: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
@include breakpoint(small){
|
||||||
|
@include xy-cell(12);
|
||||||
|
@include flex;
|
||||||
|
@include flex-align(center, middle);
|
||||||
|
a, button {
|
||||||
|
color: $black;
|
||||||
|
&:hover {
|
||||||
|
color: $anchor-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
menu {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint(medium){
|
||||||
|
@include xy-cell(auto);
|
||||||
|
@include flex;
|
||||||
|
@include flex-align(right, middle);
|
||||||
|
menu {
|
||||||
|
margin: inherit;
|
||||||
|
padding: inherit;
|
||||||
|
font-size: $global-font-size*1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
// navigation scss
|
||||||
|
|
||||||
|
//.menu {
|
||||||
|
// background-color: rgba(100,250,100,1);
|
||||||
|
// li {
|
||||||
|
// background-color: rgba(250,250,100,1);
|
||||||
|
// padding: 0.7rem 1rem;
|
||||||
|
// a {
|
||||||
|
// background-color: rgba(250,100,250,1);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
||||||
|
.dropdown.menu {
|
||||||
|
li,.button {
|
||||||
|
min-width: unset;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
background-color:$input-background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-dropdown-submenu {
|
||||||
|
font-size: $dropdown-font-size * 0.95;
|
||||||
|
min-width: 10rem;
|
||||||
|
box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,201 @@
|
||||||
|
// Page header
|
||||||
|
.front-hero {
|
||||||
|
.marketing {
|
||||||
|
@include xy-grid-container(55rem);
|
||||||
|
@include xy-grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(small) {
|
||||||
|
background: url('../images/demo/hero-bg-foundation-6-small.svg') bottom center;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: bottom;
|
||||||
|
padding: rem-calc(65%) 0;
|
||||||
|
margin: 0 0 rem-calc(32);
|
||||||
|
height: auto;
|
||||||
|
position: relative;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(medium) {
|
||||||
|
background: url('../images/demo/hero-bg-foundation-6-large.svg') bottom center;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
height: rem-calc(685);
|
||||||
|
margin: 0 0 rem-calc(72);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch {
|
||||||
|
@include breakpoint(small) {
|
||||||
|
@include xy-cell(7);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(medium) {
|
||||||
|
@include xy-cell(12);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #B4C9D1;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-right: rem-calc(20);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stargazers {
|
||||||
|
:before {
|
||||||
|
content: "\f09b";
|
||||||
|
font-family: FontAwesome;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
text-decoration: inherit;
|
||||||
|
color: #B4C9D1;
|
||||||
|
margin-right: rem-calc(8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#twitter {
|
||||||
|
:before {
|
||||||
|
content: "\f099";
|
||||||
|
font-family: FontAwesome;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
text-decoration: inherit;
|
||||||
|
color: #B4C9D1;
|
||||||
|
margin-right: rem-calc(8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
@include breakpoint(small) {
|
||||||
|
@include xy-cell(8);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(medium) {
|
||||||
|
@include xy-cell(5);
|
||||||
|
padding-top: 6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
@include breakpoint(small) {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(medium) {
|
||||||
|
font-size: 2.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: #fefefe;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.3125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download {
|
||||||
|
margin-top: rem-calc(20);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Intro
|
||||||
|
.intro {
|
||||||
|
@include xy-grid-container;
|
||||||
|
@include xy-grid;
|
||||||
|
|
||||||
|
.fp-intro {
|
||||||
|
@include breakpoint(small) {
|
||||||
|
@include xy-cell(12);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(medium) {
|
||||||
|
@include xy-cell(10);
|
||||||
|
@include xy-cell-offset(1);
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: 300;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #777;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Section divider
|
||||||
|
.section-divider {
|
||||||
|
@include xy-grid-container;
|
||||||
|
@include xy-grid;
|
||||||
|
|
||||||
|
hr {
|
||||||
|
@include xy-cell(12);
|
||||||
|
@extend .dotted;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Benefits
|
||||||
|
.benefits {
|
||||||
|
@include xy-grid-container;
|
||||||
|
@include xy-grid;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
header {
|
||||||
|
@include xy-cell(12);
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.semantic,
|
||||||
|
.responsive,
|
||||||
|
.customizable,
|
||||||
|
.professional {
|
||||||
|
@include breakpoint(small) {
|
||||||
|
@include xy-cell(12);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(medium) {
|
||||||
|
@include xy-cell(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
padding: 1.25rem;
|
||||||
|
margin: 1rem auto 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #0a0a0a;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-foundation {
|
||||||
|
@include xy-cell(12);
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
.kitchen-sink-header {
|
||||||
|
@include xy-cell(12);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.kitchen-sink-components {
|
||||||
|
hr {
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(small) {
|
||||||
|
@include xy-cell(12);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(large) {
|
||||||
|
@include xy-cell(9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.kitchen-sink-nav {
|
||||||
|
@include breakpoint(small) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(large) {
|
||||||
|
@include xy-cell(3);
|
||||||
|
display: block;
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
.docs-sub-menu {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-menu-title {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: $dark-gray;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1;
|
||||||
|
padding-left: 0.9rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
border-top: 1px solid $medium-gray;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-toc {
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 4rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-toc .active {
|
||||||
|
background: #2199e8;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-toc .docs-sub-menu:first-child .docs-menu-title {
|
||||||
|
margin-top: 0;
|
||||||
|
border-top: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.kitchen-sink-grid {
|
||||||
|
.grid-x {
|
||||||
|
background: #d6ecfa;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 2rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
|
||||||
|
.cell,:nth-child(odd) {
|
||||||
|
background: #7bc1ef;
|
||||||
|
color: #0a0a0a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell:nth-child(even) {
|
||||||
|
background: #1779ba;
|
||||||
|
color: #fefefe;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -135,6 +135,7 @@ function sass() {
|
||||||
].filter(Boolean);
|
].filter(Boolean);
|
||||||
|
|
||||||
//return gulp.src('src/assets/scss/app.scss')
|
//return gulp.src('src/assets/scss/app.scss')
|
||||||
|
// if need editor for CMS backend uncoment below coment above
|
||||||
// we need editor.scss for the wordpress editor styles
|
// we need editor.scss for the wordpress editor styles
|
||||||
return gulp.src(['src/assets/scss/app.scss','src/assets/scss/editor.scss'])
|
return gulp.src(['src/assets/scss/app.scss','src/assets/scss/editor.scss'])
|
||||||
.pipe($.sourcemaps.init())
|
.pipe($.sourcemaps.init())
|
||||||
|
|
@ -187,6 +188,8 @@ function javascript() {
|
||||||
|
|
||||||
// Copy images to the "dist" folder
|
// Copy images to the "dist" folder
|
||||||
// In production, the images are compressed
|
// In production, the images are compressed
|
||||||
|
function compressimages() {
|
||||||
|
}
|
||||||
function images() {
|
function images() {
|
||||||
return gulp.src('src/assets/images/**/*')
|
return gulp.src('src/assets/images/**/*')
|
||||||
.pipe($.if(PRODUCTION, $.imagemin([
|
.pipe($.if(PRODUCTION, $.imagemin([
|
||||||
|
|
@ -264,33 +267,36 @@ gulp.task('phpcbf', function () {
|
||||||
.pipe(gulp.dest('.'));
|
.pipe(gulp.dest('.'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// NOT needed in Wordpress
|
||||||
// Start a server with BrowserSync to preview the site in
|
// Start a server with BrowserSync to preview the site in
|
||||||
function server(done) {
|
//function server(done) {
|
||||||
browser.init({
|
// browser.init({
|
||||||
server: PATHS.dist, port: PORT
|
// server: PATHS.dist, port: PORT
|
||||||
}, done);
|
// }, done);
|
||||||
}
|
//}
|
||||||
|
|
||||||
|
|
||||||
|
// NOT needed in Wordpress
|
||||||
// Reload the browser with BrowserSync
|
// Reload the browser with BrowserSync
|
||||||
function reload(done) {
|
//function reload(done) {
|
||||||
browser.reload();
|
// browser.reload();
|
||||||
done();
|
// done();
|
||||||
}
|
//}
|
||||||
|
|
||||||
// Watch for changes to static assets, pages, Sass, and JavaScript
|
// Watch for changes to static assets, pages, Sass, and JavaScript
|
||||||
function watch() {
|
function watch() {
|
||||||
gulp.watch(PATHS.assets, copy);
|
gulp.watch(PATHS.assets, copy);
|
||||||
// gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
|
|
||||||
gulp.watch('src/assets/scss/**/*.scss', sass)
|
gulp.watch('src/assets/scss/**/*.scss', sass)
|
||||||
.on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
|
.on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
|
||||||
.on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
|
.on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
|
||||||
gulp.watch('src/assets/images/**/*').on('all', gulp.series(images, browser.reload));
|
// gulp.watch('src/assets/images/**/*').on('all', gulp.series(images, browser.reload));
|
||||||
gulp.watch('src/assets/img/**/*').on('all', gulp.series(img, browser.reload));
|
// gulp.watch('src/assets/img/**/*').on('all', gulp.series(img, browser.reload));
|
||||||
|
gulp.watch('src/assets/{images,img}/**/*').on('all', gulp.series(images, browser.reload));
|
||||||
gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
|
gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
|
||||||
gulp.watch('**/*.php', reload)
|
// gulp.watch('**/*.php', reload)
|
||||||
.on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
|
// .on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
|
||||||
.on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
|
// .on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
|
||||||
|
// gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
|
||||||
// gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
|
// gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
|
||||||
// gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
|
// gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
|
||||||
// gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
|
// gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
|
||||||
|
|
@ -300,12 +306,13 @@ function watch() {
|
||||||
|
|
||||||
// Build the "dist" folder by running all of the below tasks
|
// Build the "dist" folder by running all of the below tasks
|
||||||
gulp.task('build',
|
gulp.task('build',
|
||||||
gulp.series(clean, gulp.parallel(javascript, images, img, copy), sass));
|
//gulp.series(clean, gulp.parallel(javascript, images, img, copy), sass));
|
||||||
|
gulp.series(clean, gulp.parallel(javascript, images, copy), sass));
|
||||||
|
|
||||||
// Build the site, run the server, and watch for file changes
|
// Build the site, run the server, and watch for file changes
|
||||||
gulp.task('default',
|
gulp.task('default',
|
||||||
//gulp.series('build', server, watch));
|
//gulp.series('build', server, watch));
|
||||||
//commented the server to be used with local docker
|
//no need of server, just watch
|
||||||
gulp.series('build', watch));
|
gulp.series('build', watch));
|
||||||
|
|
||||||
// Package task
|
// Package task
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
{
|
{
|
||||||
"name": "archive-wp-theme",
|
"name": "arcHIVE-wp-theme",
|
||||||
"title": "arcHIVEwordpressTheme",
|
"title": "arcHIVEwordpressTheme",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "arcHIVE theme is a design by Oficina De Disseny converted into HTML5, CSS and PHP by vitrubio.net for Hangar.org",
|
"description": "arcHIVE theme is a design by Oficina De Disseny converted into HTML5, CSS and PHP by vitrubio.net for Hangar.org",
|
||||||
"homepage": "https://arc-hive.zone",
|
"homepage": "https://arc-hive.zone",
|
||||||
"license": "MIT",
|
"license": "GPL v3",
|
||||||
"main": "gulpfile.babel.js",
|
"main": "gulpfile.babel.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "gulp",
|
"start": "gulp",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue