diff --git a/package-lock.json b/package-lock.json index 81f4e81..3c8cdef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,9 +1,15 @@ { - "name": "foundationpress", - "version": "2.10.6", + "name": "archive-wp-theme", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { + "@fortawesome/fontawesome-free": { + "version": "5.15.3", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz", + "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==", + "dev": true + }, "@gulp-sourcemaps/map-sources": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/map-sources/-/map-sources-1.0.0.tgz", @@ -1018,9 +1024,9 @@ } }, "babel-loader": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-7.1.2.tgz", - "integrity": "sha512-jRwlFbINAeyDStqK6Dd5YuY0k5YuzQUvlz2ZamuXrXmxav3pNqe9vfJ402+2G+OmlJSXxCOpB6Uz0INM7RQe2A==", + "version": "7.1.5", + "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-7.1.5.tgz", + "integrity": "sha512-iCHfbieL5d1LfOQeeVJEUyD9rTwBcP/fcEbRCfempxTDuqrKpu0AZjLAQHEQa3Yqyj9ORKe2iHfoj4rHLf7xpw==", "dev": true, "requires": { "find-cache-dir": "^1.0.0", @@ -1500,7 +1506,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", "dev": true } } @@ -1545,9 +1552,9 @@ "dev": true }, "big.js": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz", - "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", + "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", "dev": true }, "bin-build": { @@ -3931,9 +3938,9 @@ "dev": true }, "emojis-list": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", - "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", "dev": true }, "encodeurl": { @@ -5058,9 +5065,9 @@ } }, "foundation-sites": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/foundation-sites/-/foundation-sites-6.5.1.tgz", - "integrity": "sha512-Z+FiBvogwIDjRlefJ5pYkVcmsGx3pbndRJ80+OvPvI9UwfKCif6YtOyTxpCjUoS3XBlOms5vYonfnasp2V2wZw==" + "version": "6.6.3", + "resolved": "https://registry.npmjs.org/foundation-sites/-/foundation-sites-6.6.3.tgz", + "integrity": "sha512-8X93wUAmUg1HhVv8uWMWnwoBLSQWSmFImJencneIZDctswn724Bq/MV1cbPZN/GFWGOB/9ngoQHztfzd4+ovCg==" }, "fragment-cache": { "version": "0.2.1", @@ -6296,7 +6303,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", "dev": true }, "micromatch": { @@ -6964,7 +6972,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", "dev": true }, "liftoff": { @@ -9469,7 +9478,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", "dev": true }, "micromatch": { @@ -9531,14 +9541,25 @@ "dev": true }, "loader-utils": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz", - "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", + "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", "dev": true, "requires": { - "big.js": "^3.1.3", - "emojis-list": "^2.0.0", - "json5": "^0.5.0" + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^1.0.1" + }, + "dependencies": { + "json5": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", + "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "dev": true, + "requires": { + "minimist": "^1.2.0" + } + } } }, "localtunnel": { @@ -11293,10 +11314,21 @@ "optional": true }, "p-limit": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.1.0.tgz", - "integrity": "sha1-sH/y2aXYi+yAYDWJWiurZqJ5iLw=", - "dev": true + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", + "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==", + "dev": true, + "requires": { + "p-try": "^1.0.0" + }, + "dependencies": { + "p-try": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", + "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=", + "dev": true + } + } }, "p-locate": { "version": "2.0.0", @@ -11804,9 +11836,9 @@ "dev": true }, "private": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/private/-/private-0.1.7.tgz", - "integrity": "sha1-aM5eih7woju1cMwoU3tTMqumPvE=", + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", + "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==", "dev": true }, "process": { @@ -12063,9 +12095,9 @@ } }, "regenerate": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.2.tgz", - "integrity": "sha1-0ZQcZ7rUN+G+dkM63Vs4X5WxkmA=", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", + "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==", "dev": true }, "regenerator-runtime": { @@ -13045,7 +13077,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", "dev": true } } diff --git a/package.json b/package.json index 2695ccd..30b4f0c 100644 --- a/package.json +++ b/package.json @@ -24,12 +24,13 @@ "responsive" ], "dependencies": { - "foundation-sites": "6.5.1", + "foundation-sites": "^6.6.0", "jquery": "^3.6.0", "motion-ui": "^2.0.3", "what-input": "^4.1.3" }, "devDependencies": { + "@fortawesome/fontawesome-free": "^5.15.3", "ansi-colors": "^1.0.1", "babel-core": "^6.26.3", "babel-loader": "^7.1.2", diff --git a/src/assets/fonts/WorkSans-Medium.woff b/src/assets/fonts/WorkSans-Medium.woff new file mode 100755 index 0000000..79150e3 Binary files /dev/null and b/src/assets/fonts/WorkSans-Medium.woff differ diff --git a/src/assets/fonts/WorkSans-MediumItalic.woff b/src/assets/fonts/WorkSans-MediumItalic.woff new file mode 100755 index 0000000..5bad0ca Binary files /dev/null and b/src/assets/fonts/WorkSans-MediumItalic.woff differ diff --git a/src/assets/img/.gitkeep b/src/assets/img/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/img/ARC-HIVE-logo.jpg b/src/assets/img/ARC-HIVE-logo.jpg new file mode 100644 index 0000000..8ede09c Binary files /dev/null and b/src/assets/img/ARC-HIVE-logo.jpg differ diff --git a/src/assets/img/ARC-HIVE-logo.svg b/src/assets/img/ARC-HIVE-logo.svg new file mode 100644 index 0000000..d9f10d8 --- /dev/null +++ b/src/assets/img/ARC-HIVE-logo.svg @@ -0,0 +1,45 @@ + +image/svg+xml diff --git a/src/assets/img/eu_flag_creative_europe_co_funded_left.svg b/src/assets/img/eu_flag_creative_europe_co_funded_left.svg new file mode 100644 index 0000000..d111a37 --- /dev/null +++ b/src/assets/img/eu_flag_creative_europe_co_funded_left.svg @@ -0,0 +1,261 @@ + +image/svg+xml diff --git a/src/assets/imgexample/img0001.jpg b/src/assets/imgexample/img0001.jpg new file mode 100644 index 0000000..0b69d3a Binary files /dev/null and b/src/assets/imgexample/img0001.jpg differ diff --git a/src/assets/imgexample/img0002.jpg b/src/assets/imgexample/img0002.jpg new file mode 100644 index 0000000..df2bf72 Binary files /dev/null and b/src/assets/imgexample/img0002.jpg differ diff --git a/src/assets/imgexample/img0003.jpg b/src/assets/imgexample/img0003.jpg new file mode 100644 index 0000000..617d318 Binary files /dev/null and b/src/assets/imgexample/img0003.jpg differ diff --git a/src/assets/imgexample/img0004.jpg b/src/assets/imgexample/img0004.jpg new file mode 100644 index 0000000..c9b964e Binary files /dev/null and b/src/assets/imgexample/img0004.jpg differ diff --git a/src/assets/js/app.js b/src/assets/js/app.js index d26c2d1..281ee7e 100644 --- a/src/assets/js/app.js +++ b/src/assets/js/app.js @@ -1,11 +1,17 @@ import $ from 'jquery'; -import whatInput from 'what-input'; +import 'what-input'; -window.$ = $; +// Foundation JS relies on a global variable. In ES6, all imports are hoisted +// to the top of the file so if we used `import` to import Foundation, +// it would execute earlier than we have assigned the global variable. +// This is why we have to use CommonJS require() here since it doesn't +// have the hoisting behavior. +window.jQuery = $; +require('foundation-sites'); -import Foundation from 'foundation-sites'; // If you want to pick and choose which modules to include, comment out the above and uncomment // the line below //import './lib/foundation-explicit-pieces'; + $(document).foundation(); diff --git a/src/assets/js/lib/foundation-explicit-pieces.js b/src/assets/js/lib/foundation-explicit-pieces.js index 9c9e9fa..104caf0 100644 --- a/src/assets/js/lib/foundation-explicit-pieces.js +++ b/src/assets/js/lib/foundation-explicit-pieces.js @@ -1,6 +1,7 @@ import $ from 'jquery'; + import { Foundation } from 'foundation-sites/js/foundation.core'; -import { rtl, GetYoDigits, transitionend } from 'foundation-sites/js/foundation.core.utils'; +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'; @@ -32,15 +33,15 @@ 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 = rtl; -Foundation.GetYoDigits = GetYoDigits; -Foundation.transitionend = transitionend; +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; @@ -52,52 +53,31 @@ 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. - +// 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'); -module.exports = Foundation; +export { Foundation }; diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss index 5431475..9332f8e 100644 --- a/src/assets/scss/_settings.scss +++ b/src/assets/scss/_settings.scss @@ -1,5 +1,4 @@ -// FoundationPress settings. -// Based on Foundation for Sites v6.4.3 +// Foundation for Sites Settings // ----------------------------- // // Table of Contents: @@ -62,20 +61,27 @@ // 56. Xy Grid @import 'util/util'; -@import 'global/colors'; + + +// 0. arcHIVE specific styles +// --------- +// global project styles +@import "global/colors"; +@import "global/typography"; // 1. Global // --------- $global-font-size: 100%; -$global-width: rem-calc(1200); +$global-width: 100vw; $global-lineheight: 1.5; + $foundation-palette: ( - primary: #1779ba, - secondary: #767676, - success: #3adb76, - warning: #ffae00, - alert: #cc4b37, + primary: $hyperlink-blue, + secondary: $desert-red, + success: $acid-green, + warning: $bloody-red, + alert: $bloody-red, ); $light-gray: #e6e6e6; $medium-gray: #cacaca; @@ -84,14 +90,15 @@ $black: #0a0a0a; $white: #fefefe; $body-background: $white; $body-font-color: $black; -$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +$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: 1rem; +$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; @@ -100,6 +107,7 @@ $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; @@ -113,6 +121,13 @@ $breakpoints: ( 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); @@ -159,16 +174,11 @@ $header-styles: ( ); $header-text-rendering: optimizeLegibility; $small-font-size: 80%; -$header-small-font-color: $medium-gray; +$header-small-font-color: $dark-gray; $paragraph-lineheight: 1.6; $paragraph-margin-bottom: 1rem; $paragraph-text-rendering: optimizeLegibility; -$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); +$enable-code-inline: true; $anchor-color: $primary-color; $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); $anchor-text-decoration: none; @@ -188,9 +198,7 @@ $defnlist-term-margin-bottom: 0.3rem; $blockquote-color: $dark-gray; $blockquote-padding: rem-calc(9 20 0 19); $blockquote-border: 1px solid $medium-gray; -$cite-font-size: rem-calc(13); -$cite-color: $dark-gray; -$cite-pseudo-content: '\2014 \0020'; +$enable-cite-block: true; $keystroke-font: $font-family-monospace; $keystroke-color: $black; $keystroke-background: $light-gray; @@ -209,6 +217,17 @@ $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 // -------- @@ -226,14 +245,16 @@ $input-error-font-weight: $global-weight-bold; $accordion-background: $white; $accordion-plusminus: true; +$accordion-plus-content: '\002B'; +$accordion-minus-content: '\2013'; $accordion-title-font-size: rem-calc(12); -$accordion-item-color: $primary-color; -$accordion-item-background-hover: $light-gray; -$accordion-item-padding: 1.25rem 1rem; +$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: 1px solid $light-gray; +$accordion-content-border: none; $accordion-content-color: $body-font-color; -$accordion-content-padding: 1rem; +$accordion-content-padding: $global-padding*1.5 0; // 8. Accordion Menu // ----------------- @@ -242,7 +263,7 @@ $accordionmenu-padding: $global-menu-padding; $accordionmenu-nested-margin: $global-menu-nested-margin; $accordionmenu-submenu-padding: $accordionmenu-padding; $accordionmenu-arrows: true; -$accordionmenu-arrow-color: $white; +$accordionmenu-arrow-color: $primary-color; $accordionmenu-item-background: null; $accordionmenu-border: null; $accordionmenu-submenu-toggle-background: null; @@ -281,26 +302,30 @@ $breadcrumbs-item-separator-color: $medium-gray; // ---------- $button-font-family: inherit; -$button-padding: 0.85em 1em; -$button-margin: 0 0 $global-margin 0; +$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; -$button-hollow-border-width: 1px; +$button-radius: $global-radius-archive; +$button-border: 1px solid transparent; +$button-hollow-border-width: 2px; $button-sizes: ( tiny: 0.6rem, small: 0.75rem, - default: 0.9rem, - large: 1.25rem, + 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 // ---------------- @@ -318,7 +343,11 @@ $callout-background: $white; $callout-background-fade: 85%; $callout-border: 1px solid rgba($black, 0.25); $callout-margin: 0 0 1rem 0; -$callout-padding: 1rem; +$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; @@ -327,19 +356,21 @@ $callout-link-tint: 30%; // 14. Card // -------- -$card-background: $white; +$card-background: unset; $card-font-color: $body-font-color; $card-divider-background: $light-gray; -$card-border: 1px solid $light-gray; +$card-border: none; $card-shadow: none; $card-border-radius: $global-radius; -$card-padding: $global-padding; -$card-margin-bottom: $global-margin; +$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, @@ -474,14 +505,16 @@ $menu-margin: 0; $menu-nested-margin: $global-menu-nested-margin; $menu-items-padding: $global-menu-padding; $menu-simple-margin: 1rem; -$menu-item-color-active: $white; -$menu-item-background-active: get-color(primary); +$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-item-background-hover: $light-gray; $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 // --------- @@ -501,7 +534,7 @@ $offcanvas-sizes: ( $offcanvas-vertical-sizes: ( small: 250px, ); -$offcanvas-background: $dark-nav-color; +$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); @@ -547,6 +580,8 @@ $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 // ---------------- @@ -768,6 +803,8 @@ $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 // --------- @@ -802,7 +839,6 @@ $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-expand-max: 6; $tab-content-background: $white; $tab-content-border: $light-gray; $tab-content-color: $body-font-color; @@ -811,7 +847,7 @@ $tab-content-padding: 1rem; // 52. Thumbnail // ------------- -$thumbnail-border: solid 4px $white; +$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); @@ -821,11 +857,11 @@ $thumbnail-radius: $global-radius; // 53. Title Bar // ------------- -$titlebar-background: $dark-nav-color; -$titlebar-color: $white; +$titlebar-background: $white; +$titlebar-color: $black; $titlebar-padding: 0.5rem; $titlebar-text-font-weight: bold; -$titlebar-icon-color: $white; +$titlebar-icon-color: $black; $titlebar-icon-color-hover: $medium-gray; $titlebar-icon-spacing: 0.25rem; @@ -868,3 +904,4 @@ $grid-padding-gutters: $grid-margin-gutters; $grid-container-padding: $grid-padding-gutters; $grid-container-max: $global-width; $xy-block-grid-max: 8; + diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss index f7f5e0c..df1e934 100644 --- a/src/assets/scss/app.scss +++ b/src/assets/scss/app.scss @@ -1,83 +1,104 @@ @charset 'utf-8'; - +// foundation styles @import 'settings'; @import 'foundation'; @import 'motion-ui'; +// Global styles @include foundation-global-styles; -//@include foundation-grid; -//@include foundation-flex-grid; - -@include foundation-xy-grid-classes; -@include foundation-typography; -@include foundation-button; @include foundation-forms; -// @include foundation-range-input; -@include foundation-accordion; -@include foundation-accordion-menu; -@include foundation-badge; -@include foundation-breadcrumbs; +@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-callout; -@include foundation-card; @include foundation-close-button; -@include foundation-menu; -@include foundation-menu-icon; -@include foundation-drilldown-menu; -@include foundation-dropdown; -@include foundation-dropdown-menu; -@include foundation-responsive-embed; @include foundation-label; -@include foundation-media-object; -@include foundation-off-canvas; -@include foundation-orbit; -@include foundation-pagination; @include foundation-progress-bar; @include foundation-slider; -@include foundation-sticky; -@include foundation-reveal; @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; -@include foundation-title-bar; -@include foundation-tooltip; -@include foundation-top-bar; -@include foundation-visibility-classes; -// @include foundation-float-classes; -@include foundation-flex-classes; +// 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; -/* - My custom styles: - Add your scss files below to structure your project styles -*/ +// arcHIVE styles -// Global -@import "global/accessibility"; +// global project styles @import "global/colors"; -@import "global/wp-admin"; -@import "global/wp-overrides"; -@import "global/gutenberg"; +@import "global/typography"; +@import "global/branding"; // Modules @import "modules/navigation"; +@import "modules/header"; @import "modules/content"; @import "modules/footer"; -@import "modules/editor-style"; -// Components -@import "components/buttons"; +// Componentes @import "components/cards"; -@import "components/featured-image"; -@import "components/dividers"; -@import "components/links"; +@import "components/buttons"; +@import "components/accordion"; // Templates -@import "templates/front"; -@import "templates/kitchen-sink"; +//@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/')); +// }); diff --git a/src/assets/scss/components/.gitkeep b/src/assets/scss/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/scss/components/_accordion.scss b/src/assets/scss/components/_accordion.scss new file mode 100644 index 0000000..88f3fc0 --- /dev/null +++ b/src/assets/scss/components/_accordion.scss @@ -0,0 +1,16 @@ +.accordion-item { + border-bottom: 1px solid $body-font-color; +} +.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; + } +} diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss index e8379ae..a3a2f79 100644 --- a/src/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -1,8 +1,14 @@ -.sites-button { - background: $primary-color; - font-size: 1.25rem; - font-weight: bold; - box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset; - border-radius: 3px; - border: none; +button,.button { + min-width: 20rem; +} +.hero { + button,.button { + color: $button-color-alt; + border-color: $button-color-alt; +// margin: $global-margin*2 0; + &:hover{ + color: $anchor-color; + border-color: $anchor-color; + } + } } diff --git a/src/assets/scss/components/_cards.scss b/src/assets/scss/components/_cards.scss index ba61bb0..fe5522f 100644 --- a/src/assets/scss/components/_cards.scss +++ b/src/assets/scss/components/_cards.scss @@ -1,21 +1,3 @@ -.cards-container { - - @include xy-grid; - - .card { - @include breakpoint(small) { - @include xy-cell(12); - - .card-content { - padding: 1rem; - } - - } - - @include breakpoint(medium) { - @include xy-cell(1 of 3, true, 0.7rem ); - - } - - } +.card { + padding: $global-padding; } diff --git a/src/assets/scss/global/_branding.scss b/src/assets/scss/global/_branding.scss new file mode 100644 index 0000000..e22bc6c --- /dev/null +++ b/src/assets/scss/global/_branding.scss @@ -0,0 +1,9 @@ +.brand-logo,.site-brand { + .site-name { + display: none; + } + .logo { + max-width: 10rem; + } +} + diff --git a/src/assets/scss/global/_colors.scss b/src/assets/scss/global/_colors.scss index 591a669..312ab5f 100644 --- a/src/assets/scss/global/_colors.scss +++ b/src/assets/scss/global/_colors.scss @@ -1 +1,13 @@ -$dark-nav-color: #2C3840; +$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; + diff --git a/src/assets/scss/global/_typography.scss b/src/assets/scss/global/_typography.scss new file mode 100644 index 0000000..5ed7b7c --- /dev/null +++ b/src/assets/scss/global/_typography.scss @@ -0,0 +1,38 @@ +@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; +} + + diff --git a/src/assets/scss/modules/_content.scss b/src/assets/scss/modules/_content.scss index fb886a3..8db816a 100644 --- a/src/assets/scss/modules/_content.scss +++ b/src/assets/scss/modules/_content.scss @@ -1,54 +1,149 @@ -.main-container { - @include xy-grid-container; -} - -.main-grid { - @include xy-grid(); - margin-top: 1rem; - - @include breakpoint(medium) { - margin-top: 3rem; - } - - &.sidebar-left { - // Place the sidebar below main content on small screens ... - @include breakpoint(small) { - .main-content { order: 1; } - .sidebar { order: 2; } - } - - // ... and to the left on medium-up screens, when using the sidebar-left template - @include breakpoint(medium) { - .main-content { order: 2; } - .sidebar { order: 1; } - } - } - - // Full width template - .main-content-full-width { - @include xy-cell(12); - } - - // Default template - .main-content { - @include breakpoint(small) { - @include xy-cell(12); - } - - @include breakpoint(medium) { - @include xy-cell(8); - } - } - - .sidebar { - @include breakpoint(small) { - @include xy-cell(12); - } - - @include breakpoint(medium) { - @include xy-cell(4); - margin-top: 1rem; - } - - } + content { + section { + } + + // + // news category + //-------------- + + .news { + @include xy-grid; + header,main,aside { + @include xy-cell(12); + @include flex; + @include flex-align(center,top); + padding: $global-padding*3 0; + } + 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); + } + } + } + aside { + } + } + // end news category + + + // + // 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 category + + + // + // hero + // for big announcemnts + //--------------------- + +$hero-padding: $global-padding * 3; + + .hero { + border-top: 2px solid $primary-color; + background-color: $primary-color; + .slide { + @include xy-grid(); + .claim, figure { + @include breakpoint(small){ + @include xy-cell(full); + } + @include breakpoint(medium){ + @include xy-cell(auto); + @include xy-cell-gutters(0,margin); + @include flex; + @include flex-align(center,middle); + } + padding: $hero-padding; + } + .claim{ + color: $white; + @include xy-grid; + @include breakpoint(medium) { + font-size: $lead-font-size; + } + > * { + @include xy-cell(full); + @include flex; + @include flex-align(center,bottom); + + } + } + figure { + background-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: 8rem; + } + } + //hero secondary + &.secondary { + border-top: none; + background-color: $secondary-color; + .slide{ + .claim { + color: $body-font-color; + } + figure { + background-color: unset; + } + } + } + } + //end hero + } +// end content diff --git a/src/assets/scss/modules/_footer.scss b/src/assets/scss/modules/_footer.scss index d25d3a2..8b38128 100644 --- a/src/assets/scss/modules/_footer.scss +++ b/src/assets/scss/modules/_footer.scss @@ -1,23 +1,42 @@ -.footer-container { - @include xy-grid-container; - border-top: 1px solid $medium-gray; - margin-top: rem-calc(60); -} - -.footer-grid { - @include xy-grid; - padding: rem-calc(30) 0; - - section { - @include xy-cell(); - @include breakpoint(large) { - @include xy-cell(auto); +@include breakpoint(small) { + footer { + // @include xy-grid-container(); + background-color: $secondary-color; + //.h1,.h2,.h3,.h4,.h5,.h6 { + //font-variant:all-small-caps; + //} + a { + color: $body-font-color; + &:hover { + color: $primary-color; } } - - ul { - list-style-type: none; + p { margin: 0; - padding: 0; } + ul,ol { + list-style: none; + padding: 0; + margin: 0; + } + li { + float:left; + padding-right: $global-padding; + } + .logo { + } + .subsection { + @include xy-grid; + @include flex; + @include flex-align(left,bottom); + border-top: 1px solid black; + padding: $global-padding 0; + aside { + @include xy-cell(3); + &.double { + @include xy-cell(6); + } + } + } + } } diff --git a/src/assets/scss/modules/_header.scss b/src/assets/scss/modules/_header.scss new file mode 100644 index 0000000..40d0939 --- /dev/null +++ b/src/assets/scss/modules/_header.scss @@ -0,0 +1,22 @@ + header { + @include xy-grid(); + @include xy-gutters(0); + main { + @include xy-cell(shrink); + @include flex-align(left, middle); + padding: $global-padding*2; + } + nav { + @include xy-cell(auto); + @include flex; + @include flex-align(right, middle); + a, button { + color: $black; + &:hover { + color: $anchor-color; + } + } + } + } +@include breakpoint(small){ +} diff --git a/src/assets/scss/modules/_navigation.scss b/src/assets/scss/modules/_navigation.scss index 99fbda7..a36cf4a 100644 --- a/src/assets/scss/modules/_navigation.scss +++ b/src/assets/scss/modules/_navigation.scss @@ -1,28 +1 @@ -// Navigation breakpoints -.mobile-menu, -.site-title-bar { - @include hide-for(medium); -} -// -.desktop-menu, -.site-navigation .top-bar-left { - @include show-for(medium); -} - -// Site title -.site-desktop-title a { - font-weight: bold; -} - -// WP post navigation -.post-navigation { - @include clearfix; -} - -.nav-previous { - float:left; -} - -.nav-next { - float:right; -} +// navigation scss