diff --git a/.babelrc b/.babelrc index 34c75dda2..758df2aeb 100644 --- a/.babelrc +++ b/.babelrc @@ -1,17 +1,4 @@ { - "plugins": [ - "transform-es2015-arrow-functions", - "transform-es2015-block-scoped-functions", - "transform-es2015-block-scoping", - "transform-es2015-classes", - "transform-es2015-destructuring", - "transform-es2015-template-literals", - "transform-es2015-parameters", - "transform-es2015-shorthand-properties", - "transform-es2015-spread", - ["transform-es2015-modules-commonjs", { - "allowTopLevelThis": true - }] - ], + "presets": ["es2015"], "compact": false -} \ No newline at end of file +} diff --git a/.bowerrc b/.bowerrc deleted file mode 100644 index e3343d296..000000000 --- a/.bowerrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "directory": "assets/components" -} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..3b0076b58 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,18 @@ +# editorconfig.org + +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[{*.php,*.html}] +indent_style = tab +indent_size = 2 + +[{*.txt,wp-config-sample.php,wp-config.php}] +end_of_line = crlf diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index eb8dd0dfb..be3007b03 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -13,7 +13,8 @@ **Please List the Following:** * OS & version: * Node version (node -v) [Node v4+ is required] : -* Foundation version (bower list) : +* FoundationPress version (see line 3 in package.json): +* Foundation version (see dependencies in package.json) : **Include Test Case** (if applicable): Give us a link to a CodePen or JSFiddle that recreates the issue. diff --git a/.gitignore b/.gitignore index d4fc935b6..1d915da94 100644 --- a/.gitignore +++ b/.gitignore @@ -1,11 +1,9 @@ .DS_Store +node_modules +npm-debug.log +dist *.sass-cache* *.log -node_modules/ -assets/stylesheets/ -assets/components/ -assets/javascript/vendor/ -assets/javascript/foundation.js -assets/javascript/custom/demosite.js -packaged/ -wpcs/ \ No newline at end of file +.idea/ +*.swp + diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index a029c714f..000000000 --- a/.travis.yml +++ /dev/null @@ -1,111 +0,0 @@ -# Travis CI (MIT License) configuration file for the FoundationPress WordPress theme. -# @link https://travis-ci.org/ - -# For use with the FoundationPress WordPress theme. -# @link https://github.com/olefredrik/foundationpress - -# Declare project language. -# @link http://about.travis-ci.org/docs/user/languages/php/ -language: php - -# Declare versions of PHP to use. Use one decimal max. -php: - # aliased to a recent 5.5.x version - - "5.5" - # aliased to a recent 5.4.x version - - "5.4" - # aliased to a recent 5.3.x version - - "5.3" - # Current $required_php_version for WordPress: 5.2.4 - - "5.2" - -# Declare which versions of WordPress to test against. -# Also declare whether or not to test in Multisite. -env: - # Trunk - # @link https://github.com/WordPress/WordPress - - WP_VERSION=master WP_MULTISITE=0 - - WP_VERSION=master WP_MULTISITE=1 - # WordPress 4.2 - # @link https://github.com/WordPress/WordPress/tree/4.2-branch - - WP_VERSION=4.2 WP_MULTISITE=0 - - WP_VERSION=4.2 WP_MULTISITE=1 - # WordPress 4.1 - # @link https://github.com/WordPress/WordPress/tree/4.1-branch - - WP_VERSION=4.1 WP_MULTISITE=0 - - WP_VERSION=4.1 WP_MULTISITE=1 - -# Declare 5.6 beta in test matrix. -# @link https://buddypress.trac.wordpress.org/ticket/5620 -# @link http://docs.travis-ci.com/user/build-configuration/ -matrix: - include: - - php: 5.6 - env: WP_VERSION=master - allow_failures: - - php: 5.6 - fast_finish: true - -# Use this to prepare the system to install prerequisites or dependencies. -# e.g. sudo apt-get update. -# Failures in this section will result in build status 'errored'. -# before_install: - -# Use this to prepare your build for testing. -# e.g. copy database configurations, environment variables, etc. -# Failures in this section will result in build status 'errored'. -before_script: - # Set up WordPress installation. - - export WP_DEVELOP_DIR=/tmp/wordpress/ - - mkdir -p $WP_DEVELOP_DIR - # Use the Git mirror of WordPress. - - git clone --depth=1 --branch="$WP_VERSION" git://develop.git.wordpress.org/ $WP_DEVELOP_DIR - # Set up theme information. - - theme_slug=$(basename $(pwd)) - - theme_dir=$WP_DEVELOP_DIR/src/wp-content/themes/$theme_slug - - cd .. - - mv $theme_slug $theme_dir - # Set up WordPress configuration. - - cd $WP_DEVELOP_DIR - - echo $WP_DEVELOP_DIR - - cp wp-tests-config-sample.php wp-tests-config.php - - sed -i "s/youremptytestdbnamehere/wordpress_test/" wp-tests-config.php - - sed -i "s/yourusernamehere/root/" wp-tests-config.php - - sed -i "s/yourpasswordhere//" wp-tests-config.php - # Create WordPress database. - - mysql -e 'CREATE DATABASE wordpress_test;' -uroot - # Install CodeSniffer for WordPress Coding Standards checks. - - git clone https://github.com/squizlabs/PHP_CodeSniffer.git php-codesniffer --depth=1 - # Install WordPress Coding Standards. - - git clone https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git wordpress-coding-standards --depth=1 - # Hop into CodeSniffer directory. - - cd php-codesniffer - # Set install path for WordPress Coding Standards. - # @link https://github.com/squizlabs/PHP_CodeSniffer/blob/4237c2fc98cc838730b76ee9cee316f99286a2a7/CodeSniffer.php#L1941 - - scripts/phpcs --config-set installed_paths ../wordpress-coding-standards - # Hop into themes directory. - - cd $theme_dir - # After CodeSniffer install you should refresh your path. - - phpenv rehash - -# Run test script commands. -# Default is specific to project language. -# All commands must exit with code 0 on success. Anything else is considered failure. -script: - # Search for PHP syntax errors. - - find . \( -name '*.php' \) -exec php -lf {} \; - # WordPress Coding Standards - # @link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards - # @link http://pear.php.net/package/PHP_CodeSniffer/ - # -p flag: Show progress of the run. - # -s flag: Show sniff codes in all reports. - # -v flag: Print verbose output. - # -n flag: Do not print warnings. (shortcut for --warning-severity=0) - # --standard: Use WordPress as the standard. - # --extensions: Only sniff PHP files. - - $WP_DEVELOP_DIR/php-codesniffer/scripts/phpcs -p -s -v -n . --standard=./codesniffer.ruleset.xml --extensions=php - -# Receive notifications for build results. -# @link http://docs.travis-ci.com/user/notifications/#Email-notifications -notifications: - email: false diff --git a/404.php b/404.php old mode 100755 new mode 100644 index fe3cbde8c..1c039b71d --- a/404.php +++ b/404.php @@ -8,27 +8,34 @@ get_header(); ?> -
-
- -
id="post-"> -
-

-
-
-
-

-
-

-
    -
    • -
  • home page', 'foundationpress' ), home_url() ); ?>
    • -
  • Back button', 'foundationpress' ); ?>
    • -
+
+
id="post-"> +
+

+
+
+
+

-
+

+
    +
    • +
  • + home page', 'foundationpress' ), + home_url() + ); + ?> +
    • +
  • Back button', 'foundationpress' ); ?>
    • +
+
+
+ + -
-
+ ` section of your document, and contains the compiled styles for your project. -* `assets/javascript/vendor`: Vendor scripts are copied from `assets/components/` to this directory. We use this path for enqueing the vendor scripts in WordPress. +If you're new to Sass, please note that you need to have Gulp running in the background (``npm start``), for any changes in your scss files to be compiled to `app.css`. -### Check For WordPress Coding Standards +### JavaScript Compilation -Foundation comes with everything you need to run tests that will check your theme for WordPress Coding Standards. To enable this feature you'll need to install PHP Codesniffer, along with the WordPress Coding Standards set of "Sniffs". You'll need to have [Composer](https://getcomposer.org/) To install both run the following: -```bash -$ composer create-project wp-coding-standards/wpcs:dev-master --no-dev -``` -When prompted to remove existing VCS, answer Yes by typing `Y`. +All JavaScript files in the `src/assets/js` folder, along ith Foundation and its dependencies, are bundled into one file called `app.js`. The files are imported using module dependency with [webpack](https://webpack.js.org/) as the module bundler. -Once you have installed the packages, you can check your entire theme by running: -```bash -$ npm run phpcs -``` +If you're unfamiliar with modules and module bundling, check out [this resource for node style require/exports](http://openmymind.net/2012/2/3/Node-Require-and-Exports/) and [this resource to understand ES6 modules](http://exploringjs.com/es6/ch_modules.html). -If there are errors that Code Sniffer can fix automatically, run the following command to fix them: -```bash -$ npm run phpcbf -``` +Foundation modules are loaded in the `src/assets/js/app.js` file. By default all components are loaded. You can also pick and choose which modules to include. Just follow the instructions in the file. ## Demo * [Clean FoundationPress install](http://foundationpress.olefredrik.com/) * [FoundationPress Kitchen Sink - see every single element in action](http://foundationpress.olefredrik.com/kitchen-sink/) -## Unit Testing With Travis-CI - -FoundationPress is completely ready to be deployed to and tested by Travis-CI for WordPress Coding Standards and best practices. All you need to do to activate the test is sign up and follow the instructions to point Travis-CI towards your repo. Just don't forget to update the status badge to point to your repositories unit test. -[Travis-CI](https://travis-ci.org/) - ## UI toolkits for rapid prototyping * [Foundation UI Kit for Axure RP](https://gumroad.com/l/foundation-ui-kit-axure-rp) -* [FoundationPSD - Foundation UI Kit for Photoshop](http://foundationpress.olefredrik.com/downloads/foundation-psd-template/) +* [FoundationXD - Foundation UI Kit for Adobe XD](https://gumroad.com/l/foundation-ui-kit-xd) +* [FoundationPSD - Foundation UI Kit for Photoshop](https://gumroad.com/l/foundation-ui-kit-psd) ## Tutorials * [FoundationPress for beginners](https://foundationpress.olefredrik.com/posts/tutorials/foundationpress-for-beginners/) * [Responsive images in WordPress with Interchange](http://rachievee.com/responsive-images-in-wordpress/) -* [Build a Responsive WordPress theme](http://www.webdesignermag.co.uk/build-a-responsive-wordpress-theme/) * [Learn to use the _settings file to change almost every aspect of a Foundation site](http://zurb.com/university/lessons/66) * [Other lessons from Zurb University](http://zurb.com/university/past-lessons) @@ -136,7 +113,6 @@ FoundationPress is completely ready to be deployed to and tested by Travis-CI fo * [Le saint](http://www.lesaint.ca/) * [Help blog](http://help.com/blog/) * [Maren Schmidt](http://marenschmidt.com/) -* [Ciancimino Gallery](http://ciancimino.com/) * [The Rainbow Venues](http://www.therainbowvenues.co.uk/) * [Ameronix](http://www.ameronix.com/) * [Finnerodja](http://www.finnerodja.se/) @@ -152,6 +128,19 @@ FoundationPress is completely ready to be deployed to and tested by Travis-CI fo * [Axe](http://www.axe.be/) * [ProfitGym](http://profitgym.nl/) * [Dr Now](http://www.drnow.com/) +* [Agritur Piasina](http://www.agriturpiasina.it/) +* [Atomic Interactive](http://atomicinteractive.com/) +* [Byington Vineyard & Winery](http://byington.com/) +* [Philanthropy House](http://philanthropyhouse.eu/) +* [TVA Group](http://www.groupe-tva.com/en/) +* [Forte Science](https://www.forte-science.co.jp/) +* [Well Made Studio](http://wellmadestudio.com/) +* [Show And Tell](http://www.showandtelluk.com/) +* [Wahl + Case](https://www.wahlandcase.com/) +* [Forefront Dermatology](https://forefrontdermatology.com/) +* [Wirthschaftsjunioren](http://www.wirtschaftsjunioren.org/) +* [Morgridge Institute for Research](https://morgridge.org) + >Credit goes to all the brilliant designers and developers out there. Have **you** made a site that should be on this list? [Please let me know](https://twitter.com/olefredrik) diff --git a/archive.php b/archive.php old mode 100755 new mode 100644 index 4b6113f05..41523cbc8 --- a/archive.php +++ b/archive.php @@ -17,7 +17,7 @@ get_header(); ?> -
+
@@ -32,12 +32,16 @@ - + - +
diff --git a/assets/fonts/FontAwesome.otf b/assets/fonts/FontAwesome.otf deleted file mode 100644 index 3ed7f8b48..000000000 Binary files a/assets/fonts/FontAwesome.otf and /dev/null differ diff --git a/assets/fonts/fontawesome-webfont.eot b/assets/fonts/fontawesome-webfont.eot deleted file mode 100644 index 9b6afaedc..000000000 Binary files a/assets/fonts/fontawesome-webfont.eot and /dev/null differ diff --git a/assets/fonts/fontawesome-webfont.svg b/assets/fonts/fontawesome-webfont.svg deleted file mode 100644 index d05688e9e..000000000 --- a/assets/fonts/fontawesome-webfont.svg +++ /dev/null @@ -1,655 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/fonts/fontawesome-webfont.ttf b/assets/fonts/fontawesome-webfont.ttf deleted file mode 100644 index 26dea7951..000000000 Binary files a/assets/fonts/fontawesome-webfont.ttf and /dev/null differ diff --git a/assets/fonts/fontawesome-webfont.woff b/assets/fonts/fontawesome-webfont.woff deleted file mode 100644 index dc35ce3c2..000000000 Binary files a/assets/fonts/fontawesome-webfont.woff and /dev/null differ diff --git a/assets/fonts/fontawesome-webfont.woff2 b/assets/fonts/fontawesome-webfont.woff2 deleted file mode 100644 index 500e51725..000000000 Binary files a/assets/fonts/fontawesome-webfont.woff2 and /dev/null differ diff --git a/assets/javascript/custom/flex-video.js b/assets/javascript/custom/flex-video.js deleted file mode 100644 index 8e91b213d..000000000 --- a/assets/javascript/custom/flex-video.js +++ /dev/null @@ -1,2 +0,0 @@ -jQuery( 'iframe[src*="youtube.com"]').wrap("
"); -jQuery( 'iframe[src*="vimeo.com"]').wrap("
"); diff --git a/assets/javascript/custom/init-foundation.js b/assets/javascript/custom/init-foundation.js deleted file mode 100755 index de0f51d52..000000000 --- a/assets/javascript/custom/init-foundation.js +++ /dev/null @@ -1 +0,0 @@ -jQuery(document).foundation(); diff --git a/assets/javascript/custom/joyride-demo.js b/assets/javascript/custom/joyride-demo.js deleted file mode 100755 index bf2d03ca1..000000000 --- a/assets/javascript/custom/joyride-demo.js +++ /dev/null @@ -1,4 +0,0 @@ -// Joyride demo -$('#start-jr').on('click', function() { - $(document).foundation('joyride','start'); -}); \ No newline at end of file diff --git a/assets/javascript/custom/offCanvas.js b/assets/javascript/custom/offCanvas.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/assets/javascript/custom/stickyfooter.js b/assets/javascript/custom/stickyfooter.js deleted file mode 100644 index 9cb5fd577..000000000 --- a/assets/javascript/custom/stickyfooter.js +++ /dev/null @@ -1,18 +0,0 @@ - -$(window).bind(' load resize orientationChange ', function () { - var footer = $("#footer-container"); - var pos = footer.position(); - var height = $(window).height(); - height = height - pos.top; - height = height - footer.height() -1; - - function stickyFooter() { - footer.css({ - 'margin-top': height + 'px' - }); - } - - if (height > 0) { - stickyFooter(); - } -}); diff --git a/assets/scss/components/_featured-image.scss b/assets/scss/components/_featured-image.scss deleted file mode 100755 index 14425b33a..000000000 --- a/assets/scss/components/_featured-image.scss +++ /dev/null @@ -1,20 +0,0 @@ -@include breakpoint(small) { - #featured-hero { - background-size: cover; - background-position: center; - background-repeat: no-repeat; - margin: 0 0 rem-calc(32); - position: relative; - height: rem-calc(200); - } - - .no-featured-image-set { - height: rem-calc(16) !important; - } -} - -@include breakpoint(medium) { - #featured-hero { - height: rem-calc(400); - } -} diff --git a/assets/scss/components/_links.scss b/assets/scss/components/_links.scss deleted file mode 100644 index 8ec7116c1..000000000 --- a/assets/scss/components/_links.scss +++ /dev/null @@ -1,8 +0,0 @@ -/* 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; -} diff --git a/assets/scss/modules/_editor-style.scss b/assets/scss/modules/_editor-style.scss deleted file mode 100644 index 778fcb5fd..000000000 --- a/assets/scss/modules/_editor-style.scss +++ /dev/null @@ -1,5 +0,0 @@ -body#tinymce{ - height: auto; //Fix editor style bug - max-width: $grid-row-width; //Give the editor a max-width - padding: rem-calc(20) !important; -} \ No newline at end of file diff --git a/assets/scss/modules/_footer.scss b/assets/scss/modules/_footer.scss deleted file mode 100755 index 0ed77c39e..000000000 --- a/assets/scss/modules/_footer.scss +++ /dev/null @@ -1,18 +0,0 @@ -#footer-container { - max-width: 100%; - width: 100%; - margin: 0 auto; - border-top: 1px solid #ccc; - margin-top: rem-calc(60); - - #footer { - @include grid-row(); - padding: rem-calc(30) 0; - - ul { - list-style-type: none; - margin: 0; - padding: 0; - } - } -} diff --git a/assets/scss/modules/_navigation.scss b/assets/scss/modules/_navigation.scss deleted file mode 100755 index c7b01c536..000000000 --- a/assets/scss/modules/_navigation.scss +++ /dev/null @@ -1,111 +0,0 @@ -/* Navigation breakpoints */ - -.desktop-menu, .top-bar-left { - @include show-for(medium); -} - -#mobile-menu, .title-bar { - @include hide-for(medium); -} - -/* Mobile menu */ - -.off-canvas { - > ul.menu { - height: 100vh; - padding: 1rem; - } -} - -.title-bar-title { - a { - font-size: 1rem; - color: #B9B9B9; - } -} - -/* Tablet and desktop menu */ -.top-bar { - - .menu .home a { - font-size: 1rem; - color: #B9B9B9; - } - - .menu a { - height: 45px; - line-height: 45px; - color: #e6e6e6; - padding-top: 0; - padding-bottom: 0; - font-weight: bold; - font-size: 0.8rem; - line-height: 1; - - &:hover:not(.button) { - background-color: #2a2a2a; - } - } - - .menu>li:not(.menu-text)>a { padding: 1rem; } - .menu li:not(:last-child) { border-right: 1px solid #4e4e4e; } - - .dropdown.menu .submenu { - background-color: #121212; - color: #e6e6e6; - border: 0; - } - - .dropdown.menu .has-submenu.is-down-arrow a { padding-right: 1rem; } - .dropdown.menu .has-submenu.is-down-arrow > a::after { border: 0; } - - .dropdown.menu:first-child > - li.is-dropdown-submenu-parent > - a::after { - display: none; - } - -} -/* Basic styles for post navigation. Nicolas Gallagher's "Micro clearfix" https://css-tricks.com/snippets/css/clear-fix/ */ -.post-navigation:before, -.post-navigation:after { - content: ""; - display: table; -} -.post-navigation:after { - clear:both; -} -/* 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. */ -} -.nav-previous { - float:left; -} -.nav-next { - float:right; -} diff --git a/assets/scss/modules/_sidebar.scss b/assets/scss/modules/_sidebar.scss deleted file mode 100644 index cd7737a8d..000000000 --- a/assets/scss/modules/_sidebar.scss +++ /dev/null @@ -1,10 +0,0 @@ -.sidebar { - @include breakpoint(small) { - @include grid-column(12); - } - - @include breakpoint(medium) { - @include grid-column(4); - margin-top: 1rem; - } -} diff --git a/assets/scss/templates/_front.scss b/assets/scss/templates/_front.scss deleted file mode 100755 index b630c84cc..000000000 --- a/assets/scss/templates/_front.scss +++ /dev/null @@ -1,211 +0,0 @@ -// Page header -#front-hero { - .marketing { - @include grid-row(); - max-width: 55rem; - } - - @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 grid-column(7); - @include grid-column-position(-5); - } - - @include breakpoint(medium) { - @include grid-column(12); - @include grid-column-position(0); - } - - section { - display: inline; - } - - 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 grid-column(8); - } - - @include breakpoint(medium) { - @include grid-column(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 grid-row(); - - .fp-intro { - - @include breakpoint(small) { - @include grid-column(12); - } - - @include breakpoint(medium) { - @include grid-column(10); - @include grid-column-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 grid-row(); - - hr { - @include grid-column(12); - @extend .dotted; - box-sizing: border-box; - } -} - - -// Benefits -.benefits { - @include grid-row(); - text-align: center; - - header { - @include grid-column(12); - - h2 { - font-weight: 300; - } - - h4 { - font-size: 1.125rem; - line-height: 1.6; - color: #777; - } - } - - .semantic, - .responsive, - .customizable, - .professional { - @include breakpoint(small) { - @include grid-column(12); - } - - @include breakpoint(medium) { - @include grid-column(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 grid-row(); - @include grid-column(12); - margin-top: 4rem; - } - -} diff --git a/assets/scss/templates/_kitchen-sink.scss b/assets/scss/templates/_kitchen-sink.scss deleted file mode 100644 index 4e11fbd14..000000000 --- a/assets/scss/templates/_kitchen-sink.scss +++ /dev/null @@ -1,94 +0,0 @@ -#kitchen-sink { - @include grid-row(); - margin-top: 3rem; - - header { - @include grid-column(12); - - .lead { - font-size: 125%; - line-height: 1.6; - } - } - - #components{ - - hr { - margin: 3rem 0; - } - - @include breakpoint(small) { - @include grid-column(12); - } - - @include breakpoint(large) { - @include grid-column(9); - } - - } - - #kitchen-sink-nav { - - @include breakpoint(small) { - display: none; - } - - @include breakpoint(large) { - @include grid-column(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: #999; - font-weight: bold; - line-height: 1; - padding-left: 0.9rem; - margin-bottom: 0.5rem; - border-top: 1px solid #e9e9e9; - 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; - } - - } - - } - - .row.display { - background: #eee; - font-size: 11px; - margin-bottom: 10px; - line-height: 2rem; - border: solid 1px #c6c6c6; - margin-left: 0 !important; - margin-right: 0 !important; - - .columns:nth-child(2), .columns.small-centered, .columns.large-centered { - background: #e1e1e1; - } - } - -} diff --git a/assets/scss/templates/_page-default.scss b/assets/scss/templates/_page-default.scss deleted file mode 100644 index b762fc1a3..000000000 --- a/assets/scss/templates/_page-default.scss +++ /dev/null @@ -1,15 +0,0 @@ -#page { - @include grid-row(); - margin-top: 3rem; - - .main-content { - @include breakpoint(small) { - @include grid-column(12); - } - - @include breakpoint(medium) { - @include grid-column(8); - } - } - -} diff --git a/assets/scss/templates/_page-full-width.scss b/assets/scss/templates/_page-full-width.scss deleted file mode 100644 index 55e9dfec6..000000000 --- a/assets/scss/templates/_page-full-width.scss +++ /dev/null @@ -1,12 +0,0 @@ -#page-full-width { - @include grid-row(); - margin-top: 3rem; - - .main-content { - @include breakpoint(small) { - @include grid-column(12); - } - - } - -} diff --git a/assets/scss/templates/_page-sidebar-left.scss b/assets/scss/templates/_page-sidebar-left.scss deleted file mode 100644 index cf5fea419..000000000 --- a/assets/scss/templates/_page-sidebar-left.scss +++ /dev/null @@ -1,27 +0,0 @@ -#page-sidebar-left { - @include grid-row(); - margin-top: 3rem; - - .main-content { - @include breakpoint(small) { - @include grid-column(12); - } - - @include breakpoint(medium) { - @include grid-column(8); - @include grid-col-pos(4); - } - } - - .sidebar { - @include breakpoint(small) { - @include grid-column(12); - } - - @include breakpoint(medium) { - @include grid-column(4); - @include grid-col-pos(-8); - margin-top: 1rem; - } - } -} diff --git a/assets/scss/templates/_single-post.scss b/assets/scss/templates/_single-post.scss deleted file mode 100644 index f9e011788..000000000 --- a/assets/scss/templates/_single-post.scss +++ /dev/null @@ -1,15 +0,0 @@ -#single-post { - @include grid-row(); - margin-top: 3rem; - - .main-content { - @include breakpoint(small) { - @include grid-column(12); - } - - @include breakpoint(medium) { - @include grid-column(8); - } - } - -} diff --git a/bower.json b/bower.json deleted file mode 100755 index 4ec7d69d2..000000000 --- a/bower.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "name": "foundationpress", - "main": [ - "assets/stylesheets/foundation.css", - "assets/javascript/foundation.js" - ], - "ignore": [], - "dependencies": { - "foundation-sites": "~6.2.0", - "motion-ui" : "~1.2.0", - "fontawesome": "~4.5.0" - } -} diff --git a/codesniffer.ruleset.xml b/codesniffer.ruleset.xml deleted file mode 100755 index f608afffc..000000000 --- a/codesniffer.ruleset.xml +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - A custom set of code standard rules to check for WordPress themes. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/comments.php b/comments.php old mode 100755 new mode 100644 index 5609a8967..18b79b8ef --- a/comments.php +++ b/comments.php @@ -31,8 +31,8 @@ 'reverse_children' => '', 'format' => 'html5', 'short_ping' => false, - 'echo' => true, - 'moderation' => __( 'Your comment is awaiting moderation.', 'foundationpress' ), + 'echo' => true, + 'moderation' => __( 'Your comment is awaiting moderation.', 'foundationpress' ), ) ); @@ -51,7 +51,7 @@ Prevent access to this file directly */ - defined( 'ABSPATH' ) or die( __( 'Please do not load this page directly. Thanks!', 'foundationpress' ) ); + defined( 'ABSPATH' ) || die( __( 'Please do not load this page directly. Thanks!', 'foundationpress' ) ); if ( post_password_required() ) { ?>
@@ -69,14 +69,39 @@ if ( (is_page() || is_single()) && ( ! is_home() && ! is_front_page()) ) : ?>
-

+

+ +

-

logged in to post a comment.', 'foundationpress' ), wp_login_url( get_permalink() ) ); ?>

+

+ logged in to post a comment.', 'foundationpress' ), + wp_login_url( get_permalink() ) + ); + ?> +

-

%s.', 'foundationpress' ), get_option( 'siteurl' ), $user_identity ); ?>

+

+ %2$s.', 'foundationpress' ), + get_option( 'siteurl' ), + $user_identity + ); + ?> +

-

XHTML: +

XHTML: + ?> diff --git a/composer.json b/composer.json old mode 100755 new mode 100644 diff --git a/composer.lock b/composer.lock old mode 100755 new mode 100644 diff --git a/config.yml b/config.yml new file mode 100644 index 000000000..86fa742a0 --- /dev/null +++ b/config.yml @@ -0,0 +1,21 @@ +# Autoprefixer will make sure your CSS works with these browsers +COMPATIBILITY: + - "last 2 versions" + - "ie >= 9" + - "ios >= 7" + +# Gulp will reference these paths when it copies files +PATHS: + # Path to dist folder + dist: "dist" + # Paths to static assets that aren't images, CSS, or JavaScript + assets: + - "src/assets/**/*" + - "!src/assets/{img,js,scss}/**/*" + # Paths to Sass libraries, which can then be loaded with @import + sass: + - "node_modules/foundation-sites/scss" + - "node_modules/motion-ui/src" + # Paths to JavaScript entry points for webpack to bundle modules + entries: + - "src/assets/js/app.js" diff --git a/footer.php b/footer.php old mode 100755 new mode 100644 index 65a8696ae..b4c95e821 --- a/footer.php +++ b/footer.php @@ -11,8 +11,8 @@ ?>

- -
+ +
diff --git a/functions.php b/functions.php old mode 100755 new mode 100644 index 69700a779..db628d64e --- a/functions.php +++ b/functions.php @@ -20,11 +20,15 @@ /** Required for Foundation to work properly */ require_once( 'library/foundation.php' ); +/** Format comments */ +require_once( 'library/class-foundationpress-comments.php' ); + /** Register all navigation menus */ require_once( 'library/navigation.php' ); /** Add menu walkers for top-bar and off-canvas */ -require_once( 'library/menu-walkers.php' ); +require_once( 'library/class-foundationpress-top-bar-walker.php' ); +require_once( 'library/class-foundationpress-mobile-walker.php' ); /** Create widget areas in sidebar and footer */ require_once( 'library/widget-areas.php' ); @@ -48,4 +52,4 @@ require_once( 'library/responsive-images.php' ); /** If your site requires protocol relative url's for theme assets, uncomment the line below */ -// require_once( 'library/protocol-relative-theme-assets.php' ); +// require_once( 'library/class-foundationpress-protocol-relative-theme-assets.php' ); diff --git a/gulpfile.babel.js b/gulpfile.babel.js new file mode 100644 index 000000000..11e9fe4d5 --- /dev/null +++ b/gulpfile.babel.js @@ -0,0 +1,138 @@ +'use strict'; + +import plugins from 'gulp-load-plugins'; +import yargs from 'yargs'; +import browser from 'browser-sync'; +import gulp from 'gulp'; +import rimraf from 'rimraf'; +import yaml from 'js-yaml'; +import fs from 'fs'; +import webpackStream from 'webpack-stream'; +import webpack2 from 'webpack'; +import named from 'vinyl-named'; + +// Load all Gulp plugins into one variable +const $ = plugins(); + +// Check for --production flag +const PRODUCTION = !!(yargs.argv.production); + +// Load settings from settings.yml +const { COMPATIBILITY, PATHS } = loadConfig(); + +function loadConfig() { + let ymlFile = fs.readFileSync('config.yml', 'utf8'); + return yaml.load(ymlFile); +} + +// Enter URL of your local server here +// Example: 'http://localhost:8888' +var URL = ''; + +// Build the "dist" folder by running all of the below tasks +gulp.task('build', + gulp.series(clean, sass, javascript, images, copy)); + +// Build the site, run the server, and watch for file changes +gulp.task('default', + gulp.series('build', server, watch)); + +// Delete the "dist" folder +// This happens every time a build starts +function clean(done) { + rimraf(PATHS.dist, done); +} + +// Copy files out of the assets folder +// This task skips over the "img", "js", and "scss" folders, which are parsed separately +function copy() { + return gulp.src(PATHS.assets) + .pipe(gulp.dest(PATHS.dist + '/assets')); +} + +// Compile Sass into CSS +// In production, the CSS is compressed +function sass() { + return gulp.src('src/assets/scss/app.scss') + .pipe($.sourcemaps.init()) + .pipe($.sass({ + includePaths: PATHS.sass + }) + .on('error', $.sass.logError)) + .pipe($.autoprefixer({ + browsers: COMPATIBILITY + })) + + .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' }))) + .pipe($.if(!PRODUCTION, $.sourcemaps.write())) + .pipe(gulp.dest(PATHS.dist + '/assets/css')) + .pipe(browser.reload({ stream: true })); +} + +let webpackConfig = { + module: { + rules: [ + { + test: /.js$/, + use: [ + { + loader: 'babel-loader' + } + ] + } + ] + } +} +// Combine JavaScript into one file +// In production, the file is minified +function javascript() { + return gulp.src(PATHS.entries) + .pipe(named()) + .pipe($.sourcemaps.init()) + .pipe(webpackStream(webpackConfig, webpack2)) + .pipe($.if(PRODUCTION, $.uglify() + .on('error', e => { console.log(e); }) + )) + .pipe($.if(!PRODUCTION, $.sourcemaps.write())) + .pipe(gulp.dest(PATHS.dist + '/assets/js')); +} + +// Copy images to the "dist" folder +// In production, the images are compressed +function images() { + return gulp.src('src/assets/img/**/*') + .pipe($.if(PRODUCTION, $.imagemin({ + progressive: true + }))) + .pipe(gulp.dest(PATHS.dist + '/assets/img')); +} + +// Start BrowserSync to preview the site in +function server(done) { + browser.init({ + proxy: URL, + + ui: { + port: 8080 + }, + + }); + done(); +} + +// Reload the browser with BrowserSync +function reload(done) { + browser.reload(); + done(); +} + + + +// Watch for changes to static assets, pages, Sass, and JavaScript +function watch() { + gulp.watch(PATHS.assets, copy); + gulp.watch('src/assets/scss/**/*.scss').on('all', sass); + gulp.watch('**/*.php').on('all', browser.reload); + gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload)); + gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload)); +} diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index cc9c44577..000000000 --- a/gulpfile.js +++ /dev/null @@ -1,270 +0,0 @@ -/*jslint node: true */ -"use strict"; - -var $ = require('gulp-load-plugins')(); -var argv = require('yargs').argv; -var gulp = require('gulp'); -var browserSync = require('browser-sync').create(); -var merge = require('merge-stream'); -var sequence = require('run-sequence'); -var colors = require('colors'); -var dateFormat = require('dateformat'); -var del = require('del'); - -// Enter URL of your local server here -// Example: 'http://localwebsite.dev' -var URL = ''; - -// Check for --production flag -var isProduction = !!(argv.production); - -// Browsers to target when prefixing CSS. -var COMPATIBILITY = [ - 'last 2 versions', - 'ie >= 9', - 'Android >= 2.3' -]; - -// File paths to various assets are defined here. -var PATHS = { - sass: [ - 'assets/components/foundation-sites/scss', - 'assets/components/motion-ui/src', - 'assets/components/fontawesome/scss', - ], - javascript: [ - 'assets/components/what-input/what-input.js', - 'assets/components/foundation-sites/js/foundation.core.js', - 'assets/components/foundation-sites/js/foundation.util.*.js', - - // Paths to individual JS components defined below - 'assets/components/foundation-sites/js/foundation.abide.js', - 'assets/components/foundation-sites/js/foundation.accordion.js', - 'assets/components/foundation-sites/js/foundation.accordionMenu.js', - 'assets/components/foundation-sites/js/foundation.drilldown.js', - 'assets/components/foundation-sites/js/foundation.dropdown.js', - 'assets/components/foundation-sites/js/foundation.dropdownMenu.js', - 'assets/components/foundation-sites/js/foundation.equalizer.js', - 'assets/components/foundation-sites/js/foundation.interchange.js', - 'assets/components/foundation-sites/js/foundation.magellan.js', - 'assets/components/foundation-sites/js/foundation.offcanvas.js', - 'assets/components/foundation-sites/js/foundation.orbit.js', - 'assets/components/foundation-sites/js/foundation.responsiveMenu.js', - 'assets/components/foundation-sites/js/foundation.responsiveToggle.js', - 'assets/components/foundation-sites/js/foundation.reveal.js', - 'assets/components/foundation-sites/js/foundation.slider.js', - 'assets/components/foundation-sites/js/foundation.sticky.js', - 'assets/components/foundation-sites/js/foundation.tabs.js', - 'assets/components/foundation-sites/js/foundation.toggler.js', - 'assets/components/foundation-sites/js/foundation.tooltip.js', - - // Motion UI - 'assets/components/motion-ui/motion-ui.js', - - // Include your own custom scripts (located in the custom folder) - 'assets/javascript/custom/*.js', - ], - phpcs: [ - '**/*.php', - '!wpcs', - '!wpcs/**', - ], - pkg: [ - '**/*', - '!**/node_modules/**', - '!**/components/**', - '!**/scss/**', - '!**/bower.json', - '!**/gulpfile.js', - '!**/package.json', - '!**/composer.json', - '!**/composer.lock', - '!**/codesniffer.ruleset.xml', - '!**/packaged/*', - ] -}; - -// Browsersync task -gulp.task('browser-sync', ['build'], function() { - - var files = [ - '**/*.php', - 'assets/images/**/*.{png,jpg,gif}', - ]; - - browserSync.init(files, { - // Proxy address - proxy: URL, - - // Port # - // port: PORT - }); -}); - -// Compile Sass into CSS -// In production, the CSS is compressed -gulp.task('sass', function() { - // Minify CSS if run with --production flag - var minifycss = $.if(isProduction, $.minifyCss()); - - return gulp.src('assets/scss/foundation.scss') - .pipe($.sourcemaps.init()) - .pipe($.sass({ - includePaths: PATHS.sass - })) - .on('error', $.notify.onError({ - message: "<%= error.message %>", - title: "Sass Error" - })) - .pipe($.autoprefixer({ - browsers: COMPATIBILITY - })) - .pipe(minifycss) - .pipe($.if(!isProduction, $.sourcemaps.write('.'))) - .pipe(gulp.dest('assets/stylesheets')) - .pipe(browserSync.stream({match: '**/*.css'})); -}); - -// Lint all JS files in custom directory -gulp.task('lint', function() { - return gulp.src('assets/javascript/custom/*.js') - .pipe($.jshint()) - .pipe($.notify(function (file) { - if (file.jshint.success) { - return false; - } - - var errors = file.jshint.results.map(function (data) { - if (data.error) { - return "(" + data.error.line + ':' + data.error.character + ') ' + data.error.reason; - } - }).join("\n"); - return file.relative + " (" + file.jshint.results.length + " errors)\n" + errors; - })); -}); - -// Combine JavaScript into one file -// In production, the file is minified -gulp.task('javascript', function() { - var uglify = $.uglify() - .on('error', $.notify.onError({ - message: "<%= error.message %>", - title: "Uglify JS Error" - })); - - return gulp.src(PATHS.javascript) - .pipe($.sourcemaps.init()) - .pipe($.babel()) - .pipe($.concat('foundation.js', { - newLine:'\n;' - })) - .pipe($.if(isProduction, uglify)) - .pipe($.if(!isProduction, $.sourcemaps.write())) - .pipe(gulp.dest('assets/javascript')) - .pipe(browserSync.stream()); -}); - -// Copy task -gulp.task('copy', function() { - // Motion UI - var motionUi = gulp.src('assets/components/motion-ui/**/*.*') - .pipe($.flatten()) - .pipe(gulp.dest('assets/javascript/vendor/motion-ui')); - - // What Input - var whatInput = gulp.src('assets/components/what-input/**/*.*') - .pipe($.flatten()) - .pipe(gulp.dest('assets/javascript/vendor/what-input')); - - // Font Awesome - var fontAwesome = gulp.src('assets/components/fontawesome/fonts/**/*.*') - .pipe(gulp.dest('assets/fonts')); - - return merge(motionUi, whatInput, fontAwesome); -}); - -// Package task -gulp.task('package', ['build'], function() { - var fs = require('fs'); - var time = dateFormat(new Date(), "yyyy-mm-dd_HH-MM"); - var pkg = JSON.parse(fs.readFileSync('./package.json')); - var title = pkg.name + '_' + time + '.zip'; - - return gulp.src(PATHS.pkg) - .pipe($.zip(title)) - .pipe(gulp.dest('packaged')); -}); - -// Build task -// Runs copy then runs sass & javascript in parallel -gulp.task('build', ['clean'], function(done) { - sequence('copy', - ['sass', 'javascript', 'lint'], - done); -}); - -// PHP Code Sniffer task -gulp.task('phpcs', function() { - return gulp.src(PATHS.phpcs) - .pipe($.phpcs({ - bin: 'wpcs/vendor/bin/phpcs', - standard: './codesniffer.ruleset.xml', - showSniffCode: true, - })) - .pipe($.phpcs.reporter('log')); -}); - -// PHP Code Beautifier task -gulp.task('phpcbf', function () { - return gulp.src(PATHS.phpcs) - .pipe($.phpcbf({ - bin: 'wpcs/vendor/bin/phpcbf', - standard: './codesniffer.ruleset.xml', - warningSeverity: 0 - })) - .on('error', $.util.log) - .pipe(gulp.dest('.')); -}); - -// Clean task -gulp.task('clean', function(done) { - sequence(['clean:javascript', 'clean:css'], - done); -}); - -// Clean JS -gulp.task('clean:javascript', function() { - return del([ - 'assets/javascript/foundation.js' - ]); -}); - -// Clean CSS -gulp.task('clean:css', function() { - return del([ - 'assets/stylesheets/foundation.css', - 'assets/stylesheets/foundation.css.map' - ]); -}); - -// Default gulp task -// Run build task and watch for file changes -gulp.task('default', ['build', 'browser-sync'], function() { - // Log file changes to console - function logFileChange(event) { - var fileName = require('path').relative(__dirname, event.path); - console.log('[' + 'WATCH'.green + '] ' + fileName.magenta + ' was ' + event.type + ', running tasks...'); - } - - // Sass Watch - gulp.watch(['assets/scss/**/*.scss'], ['clean:css', 'sass']) - .on('change', function(event) { - logFileChange(event); - }); - - // JS Watch - gulp.watch(['assets/javascript/custom/**/*.js'], ['clean:javascript', 'javascript', 'lint']) - .on('change', function(event) { - logFileChange(event); - }); -}); diff --git a/header.php b/header.php old mode 100755 new mode 100644 index cae9655b9..41eb93844 --- a/header.php +++ b/header.php @@ -19,36 +19,37 @@ > - -
-
+ -
- - - - - ', '' ); ?> + + ', '' ); ?>
- '' ) ); ?> + '', + ) + ); + ?>

diff --git a/assets/images/demo/customizable.svg b/src/assets/images/demo/customizable.svg similarity index 100% rename from assets/images/demo/customizable.svg rename to src/assets/images/demo/customizable.svg diff --git a/assets/images/demo/hero-bg-foundation-6-large.svg b/src/assets/images/demo/hero-bg-foundation-6-large.svg similarity index 100% rename from assets/images/demo/hero-bg-foundation-6-large.svg rename to src/assets/images/demo/hero-bg-foundation-6-large.svg diff --git a/assets/images/demo/hero-bg-foundation-6-small.svg b/src/assets/images/demo/hero-bg-foundation-6-small.svg similarity index 100% rename from assets/images/demo/hero-bg-foundation-6-small.svg rename to src/assets/images/demo/hero-bg-foundation-6-small.svg diff --git a/assets/images/demo/professional.svg b/src/assets/images/demo/professional.svg similarity index 100% rename from assets/images/demo/professional.svg rename to src/assets/images/demo/professional.svg diff --git a/assets/images/demo/responsive.svg b/src/assets/images/demo/responsive.svg similarity index 100% rename from assets/images/demo/responsive.svg rename to src/assets/images/demo/responsive.svg diff --git a/assets/images/demo/semantic.svg b/src/assets/images/demo/semantic.svg similarity index 100% rename from assets/images/demo/semantic.svg rename to src/assets/images/demo/semantic.svg diff --git a/assets/images/icons/apple-touch-icon-114x114.png b/src/assets/images/icons/apple-touch-icon-114x114.png old mode 100755 new mode 100644 similarity index 100% rename from assets/images/icons/apple-touch-icon-114x114.png rename to src/assets/images/icons/apple-touch-icon-114x114.png diff --git a/assets/images/icons/apple-touch-icon-144x144.png b/src/assets/images/icons/apple-touch-icon-144x144.png old mode 100755 new mode 100644 similarity index 100% rename from assets/images/icons/apple-touch-icon-144x144.png rename to src/assets/images/icons/apple-touch-icon-144x144.png diff --git a/assets/images/icons/apple-touch-icon-72x72.png b/src/assets/images/icons/apple-touch-icon-72x72.png old mode 100755 new mode 100644 similarity index 100% rename from assets/images/icons/apple-touch-icon-72x72.png rename to src/assets/images/icons/apple-touch-icon-72x72.png diff --git a/assets/images/icons/apple-touch-icon.png b/src/assets/images/icons/apple-touch-icon.png old mode 100755 new mode 100644 similarity index 100% rename from assets/images/icons/apple-touch-icon.png rename to src/assets/images/icons/apple-touch-icon.png diff --git a/assets/images/icons/favicon.ico b/src/assets/images/icons/favicon.ico old mode 100755 new mode 100644 similarity index 100% rename from assets/images/icons/favicon.ico rename to src/assets/images/icons/favicon.ico diff --git a/src/assets/js/app.js b/src/assets/js/app.js new file mode 100644 index 000000000..213c72765 --- /dev/null +++ b/src/assets/js/app.js @@ -0,0 +1,13 @@ +import $ from 'jquery'; +import whatInput from 'what-input'; + +window.$ = $; + +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'; + +import './lib/demosite'; + +$(document).foundation(); diff --git a/src/assets/js/lib/demosite.js b/src/assets/js/lib/demosite.js new file mode 100644 index 000000000..c8ddb5ef6 --- /dev/null +++ b/src/assets/js/lib/demosite.js @@ -0,0 +1,12 @@ +import $ from 'jquery'; + +$.ajax({ + dataType: 'jsonp', + url: 'https://api.github.com/repos/olefredrik/foundationpress?callback=foundationpressGithub&access_token=ed6229228dbc763038dbf1e68d0d8a4a0935b38a', + success: function (response) { + if (response && response.data.watchers) { + var watchers = (Math.round((response.data.watchers / 100), 10) / 10).toFixed(1); + $('#stargazers a').html(watchers + 'k stargazers'); + } + } +}); diff --git a/src/assets/js/lib/foundation-explicit-pieces.js b/src/assets/js/lib/foundation-explicit-pieces.js new file mode 100644 index 000000000..4045c9983 --- /dev/null +++ b/src/assets/js/lib/foundation-explicit-pieces.js @@ -0,0 +1,103 @@ +import $ from 'jquery'; +import { Foundation } from 'foundation-sites/js/foundation.core'; +import { rtl, GetYoDigits, transitionend } from 'foundation-sites/js/foundation.util.core'; +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 = rtl; +Foundation.GetYoDigits = GetYoDigits; +Foundation.transitionend = transitionend; + +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); + +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; diff --git a/assets/scss/global/_settings.scss b/src/assets/scss/_settings.scss old mode 100755 new mode 100644 similarity index 53% rename from assets/scss/global/_settings.scss rename to src/assets/scss/_settings.scss index 14303f7b6..bb561dd5e --- a/assets/scss/global/_settings.scss +++ b/src/assets/scss/_settings.scss @@ -1,4 +1,5 @@ -// Foundation for Sites Settings +// FoundationPress settings. +// Based on Foundation v6.4.1 // ----------------------------- // // Table of Contents: @@ -16,31 +17,52 @@ // 11. Button // 12. Button Group // 13. Callout -// 14. Close Button -// 15. Drilldown -// 16. Dropdown -// 17. Dropdown Menu -// 18. Flex Video -// 19. Forms -// 20. Label -// 21. Media Object -// 22. Menu -// 23. Meter -// 24. Off-canvas -// 25. Orbit -// 26. Pagination -// 27. Progress Bar -// 28. Reveal -// 29. Slider -// 30. Switch -// 31. Table -// 32. Tabs -// 33. Thumbnail -// 34. Title Bar -// 35. Tooltip -// 36. Top Bar - -@import '../../components/foundation-sites/scss/util/util'; +// 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'; +@import 'global/colors'; // 1. Global // --------- @@ -49,11 +71,11 @@ $global-font-size: 100%; $global-width: rem-calc(1200); $global-lineheight: 1.5; $foundation-palette: ( - primary: #2199e8, - secondary: #777, + primary: #1779ba, + secondary: #767676, success: #3adb76, warning: #ffae00, - alert: #ec5840, + alert: #cc4b37, ); $light-gray: #e6e6e6; $medium-gray: #cacaca; @@ -62,15 +84,20 @@ $black: #0a0a0a; $white: #fefefe; $body-background: $white; $body-font-color: $black; -$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; +$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; $body-antialiased: true; $global-margin: 1rem; $global-padding: 1rem; +$global-position: 1rem; $global-weight-normal: normal; $global-weight-bold: bold; $global-radius: 0; +$global-menu-padding: 0.7rem 1rem; +$global-menu-nested-margin: 1rem; $global-text-direction: ltr; -$global-flexbox: false; +$global-flexbox: true; +$global-prototype-breakpoints: false; +$global-color-pick-contrast-tolerance: 0; $print-transparent-backgrounds: true; @include add-foundation-colors; @@ -85,6 +112,7 @@ $breakpoints: ( xlarge: 1200px, xxlarge: 1440px, ); +$print-breakpoint: large; $breakpoint-classes: (small medium large); // 3. The Grid @@ -97,6 +125,7 @@ $grid-column-gutter: ( medium: 30px, ); $grid-column-align-edge: true; +$grid-column-alias: 'columns'; $block-grid-max: 8; // 4. Base Typography @@ -106,27 +135,27 @@ $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-sizes: ( +$header-color: inherit; +$header-lineheight: 1.4; +$header-margin-bottom: 0.5rem; +$header-styles: ( small: ( - 'h1': 24, - 'h2': 20, - 'h3': 19, - 'h4': 18, - 'h5': 17, - 'h6': 16, + 'h1': ('font-size': 24), + 'h2': ('font-size': 20), + 'h3': ('font-size': 19), + 'h4': ('font-size': 18), + 'h5': ('font-size': 17), + 'h6': ('font-size': 16), ), medium: ( - 'h1': 48, - 'h2': 40, - 'h3': 31, - 'h4': 25, - 'h5': 20, - 'h6': 16, + 'h1': ('font-size': 48), + 'h2': ('font-size': 40), + 'h3': ('font-size': 31), + 'h4': ('font-size': 25), + 'h5': ('font-size': 20), + 'h6': ('font-size': 16), ), ); -$header-color: inherit; -$header-lineheight: 1.4; -$header-margin-bottom: 0.5rem; $header-text-rendering: optimizeLegibility; $small-font-size: 80%; $header-small-font-color: $medium-gray; @@ -160,6 +189,7 @@ $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'; $keystroke-font: $font-family-monospace; $keystroke-color: $black; $keystroke-background: $light-gray; @@ -184,9 +214,9 @@ $stat-font-size: 2.5rem; $abide-inputs: true; $abide-labels: true; -$input-background-invalid: $alert-color; -$form-label-color-invalid: $alert-color; -$input-error-color: $alert-color; +$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; @@ -195,25 +225,38 @@ $input-error-font-weight: $global-weight-bold; $accordion-background: $white; $accordion-plusminus: true; -$accordion-item-color: foreground($accordion-background, $primary-color); +$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-content-background: $white; $accordion-content-border: 1px solid $light-gray; -$accordion-content-color: foreground($accordion-background, $primary-color); +$accordion-content-color: $body-font-color; $accordion-content-padding: 1rem; // 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: foreground($badge-background); +$badge-color: $white; +$badge-color-alt: $black; +$badge-palette: $foundation-palette; $badge-padding: 0.3em; $badge-minwidth: 2.1em; $badge-font-size: 0.6rem; @@ -228,26 +271,35 @@ $breadcrumbs-item-color-current: $black; $breadcrumbs-item-color-disabled: $medium-gray; $breadcrumbs-item-margin: 0.75rem; $breadcrumbs-item-uppercase: true; -$breadcrumbs-item-slash: 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-padding: 0.85em 1em; $button-margin: 0 0 $global-margin 0; $button-fill: solid; $button-background: $primary-color; $button-background-hover: scale-color($button-background, $lightness: -15%); -$button-color: #fff; -$button-color-alt: #000; +$button-color: $white; +$button-color-alt: $black; $button-radius: $global-radius; +$button-hollow-border-width: 1px; $button-sizes: ( tiny: 0.6rem, small: 0.75rem, default: 0.9rem, large: 1.25rem, ); +$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; // 12. Button Group // ---------------- @@ -256,6 +308,7 @@ $buttongroup-margin: 1rem; $buttongroup-spacing: 1px; $buttongroup-child-selector: '.button'; $buttongroup-expand-max: 6; +$buttongroup-radius-on-each: true; // 13. Callout // ----------- @@ -270,31 +323,58 @@ $callout-font-color-alt: $body-background; $callout-radius: $global-radius; $callout-link-tint: 30%; -// 14. Close Button +// 14. Card +// -------- + +$card-background: $white; +$card-font-color: $body-font-color; +$card-divider-background: $light-gray; +$card-border: 1px solid $light-gray; +$card-shadow: none; +$card-border-radius: $global-radius; +$card-padding: $global-padding; +$card-margin-bottom: $global-margin; + +// 15. Close Button // ---------------- $closebutton-position: right top; -$closebutton-offset-horizontal: 1rem; -$closebutton-offset-vertical: 0.5rem; -$closebutton-size: 2em; +$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; -// 15. Drilldown +// 16. Drilldown // ------------- $drilldown-transition: transform 0.15s linear; $drilldown-arrows: true; -$drilldown-arrow-color: $primary-color; +$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; -// 16. Dropdown +// 17. Dropdown // ------------ $dropdown-padding: 1rem; +$dropdown-background: $body-background; $dropdown-border: 1px solid $medium-gray; -$dropdown-font-size: 16rem; +$dropdown-font-size: 1rem; $dropdown-width: 300px; $dropdown-radius: $global-radius; $dropdown-sizes: ( @@ -303,23 +383,30 @@ $dropdown-sizes: ( large: 400px, ); -// 17. Dropdown Menu +// 18. Dropdown Menu // ----------------- $dropdownmenu-arrows: true; $dropdownmenu-arrow-color: $anchor-color; +$dropdownmenu-arrow-size: 6px; +$dropdownmenu-arrow-padding: 1.5rem; $dropdownmenu-min-width: 200px; $dropdownmenu-background: $white; +$dropdownmenu-submenu-background: $dropdownmenu-background; +$dropdownmenu-padding: $global-menu-padding; +$dropdownmenu-nested-margin: 0; +$dropdownmenu-submenu-padding: $dropdownmenu-padding; $dropdownmenu-border: 1px solid $medium-gray; +$dropdown-menu-item-color-active: $light-gray; +$dropdown-menu-item-background-active: transparent; -// 18. Flex Video -// -------------- +// 19. Flexbox Utilities +// --------------------- -$flexvideo-margin-bottom: rem-calc(16); -$flexvideo-ratio: 4 by 3; -$flexvideo-ratio-widescreen: 16 by 9; +$flex-source-ordering-count: 6; +$flexbox-responsive-breakpoints: true; -// 19. Forms +// 20. Forms // --------- $fieldset-border: 1px solid $medium-gray; @@ -327,7 +414,7 @@ $fieldset-padding: rem-calc(20); $fieldset-margin: rem-calc(18 0); $legend-padding: rem-calc(0 3); $form-spacing: rem-calc(16); -$helptext-color: #333; +$helptext-color: $black; $helptext-font-size: rem-calc(13); $helptext-font-style: italic; $input-prefix-color: $black; @@ -339,51 +426,61 @@ $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: #333; +$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-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: default; +$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; -// 20. Label +// 21. Label // --------- $label-background: $primary-color; -$label-color: foreground($label-background); +$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; -// 21. Media Object +// 22. Media Object // ---------------- $mediaobject-margin-bottom: $global-margin; $mediaobject-section-padding: $global-padding; $mediaobject-image-width-stacked: 100%; -// 22. Menu +// 23. Menu // -------- $menu-margin: 0; -$menu-margin-nested: 1rem; -$menu-item-padding: 0.7rem 1rem; +$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: #121212; +$menu-item-background-active: get-color(primary); $menu-icon-spacing: 0.25rem; +$menu-item-background-hover: $light-gray; +$menu-state-back-compat: true; +$menu-centered-back-compat: true; -// 23. Meter +// 24. Meter // --------- $meter-height: 1rem; @@ -393,20 +490,26 @@ $meter-fill-good: $success-color; $meter-fill-medium: $warning-color; $meter-fill-bad: $alert-color; -// 24. Off-canvas +// 25. Off-canvas // -------------- $offcanvas-size: 250px; -$offcanvas-background: $light-gray; -$offcanvas-zindex: -1; +$offcanvas-vertical-size: 250px; +$offcanvas-background: $dark-nav-color; +$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'; -$maincontent-shadow: 0 0 10px rgba($black, 0.5); -// 25. Orbit +// 26. Orbit // --------- $orbit-bullet-background: $medium-gray; @@ -421,7 +524,7 @@ $orbit-control-background-hover: rgba($black, 0.5); $orbit-control-padding: 1rem; $orbit-control-zindex: 10; -// 26. Pagination +// 27. Pagination // -------------- $pagination-font-size: rem-calc(14); @@ -432,13 +535,14 @@ $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: foreground($pagination-item-background-current); +$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; -// 27. Progress Bar +// 28. Progress Bar // ---------------- $progress-height: 1rem; @@ -447,24 +551,194 @@ $progress-margin-bottom: $global-margin; $progress-meter-background: $primary-color; $progress-radius: $global-radius; -// 28. Reveal +// 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: 4 by 3, + widescreen: 16 by 9, +); + +// 47. Reveal // ---------- $reveal-background: $white; $reveal-width: 600px; $reveal-max-width: $global-width; -$reveal-offset: rem-calc(100); $reveal-padding: $global-padding; $reveal-border: 1px solid $medium-gray; $reveal-radius: $global-radius; $reveal-zindex: 1005; $reveal-overlay-background: rgba($black, 0.45); -// 29. Slider +// 48. Slider // ---------- +$slider-width-vertical: 0.5rem; +$slider-transition: all 0.2s ease-in-out; $slider-height: 0.5rem; -$slider-width-vertical: $slider-height; $slider-background: $light-gray; $slider-fill-background: $medium-gray; $slider-handle-height: 1.4rem; @@ -472,9 +746,8 @@ $slider-handle-width: 1.4rem; $slider-handle-background: $primary-color; $slider-opacity-disabled: 0.25; $slider-radius: $global-radius; -$slider-transition: all 0.2s ease-in-out; -// 30. Switch +// 49. Switch // ---------- $switch-background: $medium-gray; @@ -490,7 +763,7 @@ $switch-paddle-offset: 0.25rem; $switch-paddle-radius: $global-radius; $switch-paddle-transition: all 0.25s ease-out; -// 31. Table +// 50. Table // --------- $table-background: $white; @@ -500,29 +773,36 @@ $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; -// 32. Tabs +// 51. Tabs // -------- $tab-margin: 0; $tab-background: $white; +$tab-color: $primary-color; $tab-background-active: $light-gray; -$tab-item-color: foreground($tab-background, $primary-color); +$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: foreground($tab-background, $primary-color); +$tab-content-color: $body-font-color; $tab-content-padding: 1rem; -// 33. Thumbnail +// 52. Thumbnail // ------------- $thumbnail-border: solid 4px $white; @@ -532,10 +812,10 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); $thumbnail-transition: box-shadow 200ms ease-out; $thumbnail-radius: $global-radius; -// 34. Title Bar +// 53. Title Bar // ------------- -$titlebar-background: $black; +$titlebar-background: $dark-nav-color; $titlebar-color: $white; $titlebar-padding: 0.5rem; $titlebar-text-font-weight: bold; @@ -543,23 +823,42 @@ $titlebar-icon-color: $white; $titlebar-icon-color-hover: $medium-gray; $titlebar-icon-spacing: 0.25rem; -// 35. Tooltip +// 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; -// 36. Top Bar +// 55. Top Bar // ----------- -$topbar-padding: 0; -$topbar-background: #121212; +$topbar-padding: 0rem; +$topbar-background: $dark-nav-color; $topbar-submenu-background: $topbar-background; -$topbar-link-color: #fff; +$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; +$block-grid-max: 8; diff --git a/assets/scss/foundation.scss b/src/assets/scss/app.scss old mode 100755 new mode 100644 similarity index 55% rename from assets/scss/foundation.scss rename to src/assets/scss/app.scss index fc8e3f0a3..3f3263656 --- a/assets/scss/foundation.scss +++ b/src/assets/scss/app.scss @@ -1,56 +1,39 @@ -/* - Foundation for Sites components: - Import the building blocks you need for your project. - Reducing the number of imported components will optimize page speed. - --------------------------------------------------------------------- - The Foundation framework is built by Zurb - Licensed under MIT Open Source -*/ - -// Settings -@import "global/settings"; // Foundation settings file. +@charset 'utf-8'; -// Foundation mixins & browser resets -@import '../components/foundation-sites/scss/foundation'; -// WP overrides -@import "global/wp-admin"; // Fix issues with wp-admin bar positioning -@import "global/wp-overrides"; // Override the default WordPress styling for some elements - -// Third-party libraries -@import 'font-awesome'; +@import 'settings'; +@import 'foundation'; @import 'motion-ui'; -// Foundation global styles @include foundation-global-styles; +//@include foundation-grid; +//@include foundation-flex-grid; -// Individual foundation components -@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-range-input; @include foundation-accordion; @include foundation-accordion-menu; @include foundation-badge; @include foundation-breadcrumbs; @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-flex-video; +@include foundation-responsive-embed; @include foundation-label; @include foundation-media-object; -@include foundation-menu; @include foundation-off-canvas; @include foundation-orbit; @include foundation-pagination; @include foundation-progress-bar; -@include foundation-progress-element; -@include foundation-meter-element; @include foundation-slider; @include foundation-sticky; @include foundation-reveal; @@ -62,11 +45,11 @@ @include foundation-tooltip; @include foundation-top-bar; @include foundation-visibility-classes; -@include foundation-float-classes; -@include foundation-menu-icon; -// @include foundation-flex-classes; +// @include foundation-float-classes; +@include foundation-flex-classes; + +// @include foundation-prototype-classes; -// Motion UI @include motion-ui-transitions; @include motion-ui-animations; @@ -75,14 +58,21 @@ Add your scss files below to structure your project styles */ +// Glboal +@import "global/_accessibility"; +@import "global/colors"; +@import "global/wp-admin"; +@import "global/wp-overrides"; + // Modules @import "modules/navigation"; +@import "modules/content"; @import "modules/footer"; -@import "modules/sidebar"; @import "modules/editor-style"; // Components @import "components/buttons"; +@import "components/cards"; @import "components/featured-image"; @import "components/dividers"; @import "components/links"; @@ -90,7 +80,4 @@ // Templates @import "templates/front"; @import "templates/kitchen-sink"; -@import "templates/page-default"; -@import "templates/page-sidebar-left"; -@import "templates/page-full-width"; -@import "templates/single-post"; +@import "templates/demosite"; // This template is used for the demosite. Feel free to remove. diff --git a/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss similarity index 82% rename from assets/scss/components/_buttons.scss rename to src/assets/scss/components/_buttons.scss index 421bbdee7..e8379ae36 100644 --- a/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -1,5 +1,5 @@ .sites-button { - background: #FF6908; + background: $primary-color; font-size: 1.25rem; font-weight: bold; box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset; diff --git a/src/assets/scss/components/_cards.scss b/src/assets/scss/components/_cards.scss new file mode 100644 index 000000000..ba61bb026 --- /dev/null +++ b/src/assets/scss/components/_cards.scss @@ -0,0 +1,21 @@ +.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 ); + + } + + } +} diff --git a/assets/scss/components/_dividers.scss b/src/assets/scss/components/_dividers.scss similarity index 100% rename from assets/scss/components/_dividers.scss rename to src/assets/scss/components/_dividers.scss diff --git a/src/assets/scss/components/_featured-image.scss b/src/assets/scss/components/_featured-image.scss new file mode 100644 index 000000000..169743129 --- /dev/null +++ b/src/assets/scss/components/_featured-image.scss @@ -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); + } +} diff --git a/src/assets/scss/components/_links.scss b/src/assets/scss/components/_links.scss new file mode 100644 index 000000000..86bc956fc --- /dev/null +++ b/src/assets/scss/components/_links.scss @@ -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; +} diff --git a/src/assets/scss/global/_accessibility.scss b/src/assets/scss/global/_accessibility.scss new file mode 100644 index 000000000..27f4ecb4d --- /dev/null +++ b/src/assets/scss/global/_accessibility.scss @@ -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. +} diff --git a/src/assets/scss/global/_colors.scss b/src/assets/scss/global/_colors.scss new file mode 100644 index 000000000..591a66915 --- /dev/null +++ b/src/assets/scss/global/_colors.scss @@ -0,0 +1 @@ +$dark-nav-color: #2C3840; diff --git a/assets/scss/global/_wp-admin.scss b/src/assets/scss/global/_wp-admin.scss old mode 100755 new mode 100644 similarity index 69% rename from assets/scss/global/_wp-admin.scss rename to src/assets/scss/global/_wp-admin.scss index 2fc709cc8..4780c7c2c --- a/assets/scss/global/_wp-admin.scss +++ b/src/assets/scss/global/_wp-admin.scss @@ -1,11 +1,11 @@ // Fix the issue where the WP admin-bar overlaps the mobile menu #wpadminbar { - position: fixed !important; + position: fixed !important; } // Make sure that the WP admin-bar does not overlap the sticky top bar body.admin-bar.f-topbar-fixed { - .sticky.fixed { - margin-top: rem-calc(32); - } + .sticky.fixed { + margin-top: rem-calc(32); + } } diff --git a/assets/scss/global/_wp-overrides.scss b/src/assets/scss/global/_wp-overrides.scss old mode 100755 new mode 100644 similarity index 84% rename from assets/scss/global/_wp-overrides.scss rename to src/assets/scss/global/_wp-overrides.scss index b6275090a..aff1fdbf0 --- a/assets/scss/global/_wp-overrides.scss +++ b/src/assets/scss/global/_wp-overrides.scss @@ -24,7 +24,7 @@ p.wp-caption-text{ } .aligncenter { - display: block; - margin-left: auto; - margin-right: auto; + display: block; + margin-left: auto; + margin-right: auto; } diff --git a/src/assets/scss/modules/_content.scss b/src/assets/scss/modules/_content.scss new file mode 100644 index 000000000..d48b87887 --- /dev/null +++ b/src/assets/scss/modules/_content.scss @@ -0,0 +1,57 @@ +.main-wrap { + @include xy-grid-container; + @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 + &.full-width { + .main-content { + @include xy-cell(12); + } + } + + .main-content { + + // Default template + @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; + } + + } +} diff --git a/src/assets/scss/modules/_editor-style.scss b/src/assets/scss/modules/_editor-style.scss new file mode 100644 index 000000000..6a07332b4 --- /dev/null +++ b/src/assets/scss/modules/_editor-style.scss @@ -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; +} \ No newline at end of file diff --git a/src/assets/scss/modules/_footer.scss b/src/assets/scss/modules/_footer.scss new file mode 100644 index 000000000..8a177dfd9 --- /dev/null +++ b/src/assets/scss/modules/_footer.scss @@ -0,0 +1,22 @@ +.footer-container { + margin: 0 auto; + border-top: 1px solid $medium-gray; + margin-top: rem-calc(60); +} + +.footer { + @include xy-grid-container; + @include xy-grid; + padding: rem-calc(30) 0; + + article { + @include xy-cell(auto); + margin: 0; + } + + ul { + list-style-type: none; + margin: 0; + padding: 0; + } +} diff --git a/src/assets/scss/modules/_navigation.scss b/src/assets/scss/modules/_navigation.scss new file mode 100644 index 000000000..0372681c5 --- /dev/null +++ b/src/assets/scss/modules/_navigation.scss @@ -0,0 +1,75 @@ +// 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; +} + +// Mobile menu +.mobile-menu { + display: none; // prevents repaint caused by JS hiding menu onload +} + + +.mobile-menu, +.mobile-off-canvas-menu { + + // submenu arrow + .is-accordion-submenu-parent { + > a::after { + border-color: $accordionmenu-arrow-color transparent transparent; + } + &.active > a::after { + border-color: $menu-item-color-active transparent transparent; + } + } + + // current page + .current_page_item > a { + font-weight: bold; + } +} + +// Tablet and desktop menu +.desktop-menu { + + // submenu arrow + li.is-dropdown-submenu-parent { + > a::after { + border-color: $accordionmenu-arrow-color transparent transparent; + } + &.active > a::after { + border-color: $menu-item-color-active transparent transparent; + } + } +} + +.site-navigation { + @include breakpoint(small only) { + padding: 0; // prevents container visibility on small screens + } +} + + + +// WP post navigation +.post-navigation { + @include clearfix; +} + +.nav-previous { + float:left; +} + +.nav-next { + float:right; +} diff --git a/src/assets/scss/templates/_demosite.scss b/src/assets/scss/templates/_demosite.scss new file mode 100644 index 000000000..4d929f8b5 --- /dev/null +++ b/src/assets/scss/templates/_demosite.scss @@ -0,0 +1,79 @@ +// Mobile menu +.off-canvas { + > ul.menu { + height: 100vh; + padding: 1rem; + + a { + color: $white; + font-weight: 600; + font-size: rem-calc(18); + opacity: .75; + } + + .is-accordion-submenu-parent > a::after { + display: block; + width: 0; + height: 0; + border: inset 6px; + content: ''; + border-bottom-width: 0; + border-top-style: solid; + border-color: $white transparent transparent; + position: absolute; + top: 50%; + margin-top: -3px; + right: 1rem; + } + } + + .menu .active > a { background-color: #ccc; } + +} + +.title-bar-title { + a { + font-size: 1rem; + color: #B9B9B9; + } +} + +// Tablet and desktop menu +.top-bar { + + //background-color: #2C3840; + + ul { + //background-color: #2C3840; + } + + .top-bar-title a { + font-size: 1rem; + color: #B9B9B9; + padding-left: 1rem; + line-height: 1.8; + } + + .menu a { + color: #e6e6e6; + padding-top: 0; + padding-bottom: 0; + font-weight: bold; + font-size: 0.8rem; + line-height: 1; + + &:hover:not(.button) { + background-color: #42525D; + } + } + + .menu .active > a { background-color: #ccc; } + + .menu>li:not(.menu-text)>a { padding: 1rem; } + .menu li:not(:last-child) { border-right: 1px solid #4e4e4e; } + + .dropdown.menu .submenu { border: 0; } + .dropdown.menu .has-submenu.is-down-arrow a { padding-right: 1rem; } + .dropdown.menu .has-submenu.is-down-arrow > a::after { border: 0; } + .dropdown.menu:first-child > li.is-dropdown-submenu-parent > a::after { display: none; } +} diff --git a/src/assets/scss/templates/_front.scss b/src/assets/scss/templates/_front.scss new file mode 100644 index 000000000..f9316c9f3 --- /dev/null +++ b/src/assets/scss/templates/_front.scss @@ -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; + } +} diff --git a/src/assets/scss/templates/_kitchen-sink.scss b/src/assets/scss/templates/_kitchen-sink.scss new file mode 100644 index 000000000..068f025ca --- /dev/null +++ b/src/assets/scss/templates/_kitchen-sink.scss @@ -0,0 +1,79 @@ +.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; + } + } +} + +.row.display { + background: #eee; + font-size: 11px; + margin-bottom: 10px; + line-height: 2rem; + border: solid 1px #c6c6c6; + margin-left: 0 !important; + margin-right: 0 !important; + + .columns:nth-child(2), .columns.small-centered, .columns.large-centered { + background: #e1e1e1; + } +} diff --git a/style.css b/style.css old mode 100755 new mode 100644 index 47a618a56..dd450672b --- a/style.css +++ b/style.css @@ -3,7 +3,7 @@ Theme Name: FoundationPress Theme URI: http://foundationpress.olefredrik.com Github Theme URI: https://github.com/olefredrik/FoundationPress Description: FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb -Version: 2.6.2 +Version: 2.10.2 Author: Ole Fredrik Lie Author URI: http://olefredrik.com/ diff --git a/template-parts/check-if-sidebar-exist.php b/template-parts/check-if-sidebar-exist.php old mode 100755 new mode 100644 diff --git a/template-parts/content-none.php b/template-parts/content-none.php old mode 100755 new mode 100644 index 89e944265..b540d7a99 --- a/template-parts/content-none.php +++ b/template-parts/content-none.php @@ -17,7 +17,15 @@
-

Get started here.', 'foundationpress' ), admin_url( 'post-new.php' ) ); ?>

+

+ Get started here.', 'foundationpress' ), + admin_url( 'post-new.php' ) + ); + ?> +

diff --git a/template-parts/content.php b/template-parts/content.php old mode 100755 new mode 100644 diff --git a/template-parts/featured-image.php b/template-parts/featured-image.php old mode 100755 new mode 100644 index d9b2551b9..fc9f88662 --- a/template-parts/featured-image.php +++ b/template-parts/featured-image.php @@ -1,10 +1,7 @@ ID ) ) : - $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); - $image = $image[0]; - ?> - -