├── .gitignore ├── README.md ├── assets ├── .babelrc ├── Gruntfile.js ├── bower.json ├── grunt │ ├── aliases.yaml │ ├── babel.js │ ├── bump_wp_version.js │ ├── concat.js │ ├── postcss.js │ ├── sass.js │ ├── uglify.js │ └── watch.js ├── images │ ├── favicon.ico │ ├── logo.png │ └── logo@2x.png ├── js │ └── dev │ │ └── app.js ├── package.json └── styles │ ├── css │ └── .gitkeep │ └── scss │ ├── _print.scss │ ├── _settings.scss │ ├── _shame.scss │ ├── app-legacy.scss │ ├── app.scss │ ├── layout │ └── _layouts.scss │ ├── modules │ ├── _avatar.scss │ ├── _comments.scss │ ├── _entries.scss │ ├── _genesis.scss │ ├── _pagination.scss │ └── _searchform.scss │ ├── site │ ├── _footer.scss │ ├── _header.scss │ └── _menus.scss │ └── wordpress │ ├── _accessibility.scss │ ├── _align.scss │ ├── _media.scss │ ├── _plugins.scss │ └── _widgets.scss ├── functions.php ├── includes └── class.foundation_nav_walker.php ├── screenshot.png ├── style.css └── xml └── sample.xml /.gitignore: -------------------------------------------------------------------------------- 1 | assets/node_modules 2 | assets/bower_components 3 | assets/js/built 4 | assets/js/min 5 | assets/styles/css 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Genesis Sample Theme with Foundation 6 2 | 3 | This is a work-in-progress version of the Genesis Sample Theme using the Foundation framework (version 6.2). 4 | 5 | Github project link: https://github.com/danielck/genesis-sample-foundation/ 6 | 7 | ## Build instructions 8 | 9 | Requires node, npm and Bower. 10 | 11 | Run `npm install` and `bower install` inside the assets/ directory. Then run `grunt` or `grunt watch`. 12 | 13 | ## Customizing 14 | 15 | The theme is intended as a starting point for projects and by default only includes the styles and JS necessary for the features in the base theme. Edit `/assets/styles/scss/app.scss` to enable or disable parts of Foundation and `/assets/grunt/concat.js` for JavaScript. 16 | 17 | ## Installation Instructions 18 | 19 | 1. Upload the Genesis Sample theme folder via FTP to your wp-content/themes/ directory. (The Genesis parent theme needs to be in the wp-content/themes/ directory as well.) 20 | 2. Go to your WordPress dashboard and select Appearance. 21 | 3. Activate the Genesis Sample theme. 22 | 4. Inside your WordPress dashboard, go to Genesis > Theme Settings and configure them to your liking. 23 | 24 | 25 | ## Theme Support 26 | 27 | None. Pull requests and issues are welcome. 28 | 29 | -------------------------------------------------------------------------------- /assets/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } -------------------------------------------------------------------------------- /assets/Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function( grunt ) { 2 | 3 | // measures the time each task takes 4 | require( 'time-grunt' )( grunt ); 5 | 6 | // load grunt config 7 | require( 'load-grunt-config' )( grunt, { 8 | jitGrunt: true 9 | } ); 10 | 11 | }; -------------------------------------------------------------------------------- /assets/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "genesis-foundation", 3 | "version": "0.0.1", 4 | "homepage": "https://github.com/danielck/genesis-foundation", 5 | "authors": [ 6 | "Daniel Koskinen ", 7 | "Tomi Mäenpää " 8 | ], 9 | "license": "GPLv2", 10 | "private": true, 11 | "ignore": [ 12 | "**/.*", 13 | "node_modules", 14 | "bower_components", 15 | "test", 16 | "tests" 17 | ], 18 | "dependencies": { 19 | "foundation-sites": "~6.2.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /assets/grunt/aliases.yaml: -------------------------------------------------------------------------------- 1 | default: 2 | description: 'Default (production) build' 3 | tasks: 4 | - 'concat' 5 | - 'babel' 6 | - 'uglify' 7 | - 'sass' 8 | - 'postcss' 9 | # - 'bump_wp_version' -------------------------------------------------------------------------------- /assets/grunt/babel.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options: { 3 | sourceMap: true 4 | }, 5 | dist: { 6 | files: { 7 | "js/built/app.built.js": "js/built/app.es2015.js" 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /assets/grunt/bump_wp_version.js: -------------------------------------------------------------------------------- 1 | // Bump wp version 2 | // https://www.npmjs.com/package/grunt-bump-wp-version 3 | module.exports = { 4 | dev: { 5 | options: {}, 6 | files: { 7 | '../style.css': '../style.css', 8 | }, 9 | } 10 | }; -------------------------------------------------------------------------------- /assets/grunt/concat.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | options: { 4 | separator: ';', 5 | }, 6 | 7 | dist: { 8 | src: [ 9 | 'bower_components/foundation-sites/js/foundation.core.js', 10 | 'bower_components/foundation-sites/js/foundation.util.mediaQuery.js', 11 | 'bower_components/foundation-sites/js/foundation.util.keyboard.js', 12 | 'bower_components/foundation-sites/js/foundation.util.box.js', 13 | 'bower_components/foundation-sites/js/foundation.util.motion.js', 14 | 'bower_components/foundation-sites/js/foundation.util.nest.js', 15 | 'bower_components/foundation-sites/js/foundation.drilldown.js', 16 | 'bower_components/foundation-sites/js/foundation.dropdownMenu.js', 17 | 'bower_components/foundation-sites/js/foundation.responsiveMenu.js', 18 | 'bower_components/foundation-sites/js/foundation.responsiveToggle.js', 19 | 'js/dev/app.js' 20 | ], 21 | dest: 'js/built/app.es2015.js', 22 | nonull: true 23 | }, 24 | // modernizr: { 25 | // src: [ 26 | // 'js/dev/vendor/modernizr.js', 27 | // ], 28 | // dest: 'js/built/modernizr.built.js' 29 | // } 30 | }; 31 | -------------------------------------------------------------------------------- /assets/grunt/postcss.js: -------------------------------------------------------------------------------- 1 | // https://github.com/nDmitry/grunt-postcss 2 | // https://github.com/postcss/autoprefixer 3 | // https://github.com/jonathantneal/oldie 4 | // https://github.com/postcss/postcss 5 | module.exports = { 6 | 7 | autoprefixer: { 8 | options: { 9 | map: true, 10 | processors: [ 11 | require( 'autoprefixer' )({ 12 | browsers: [ 'last 2 versions', 'ie 9-11' ] 13 | }), 14 | ] 15 | }, 16 | files: { 17 | 'styles/css/app.css' : 'styles/css/app.css' 18 | } 19 | }, 20 | oldie: { 21 | options: { 22 | map: true, 23 | processors: [ 24 | require( 'oldie' ), 25 | ] 26 | }, 27 | files: { 28 | 'styles/css/app-legacy.css' : 'styles/css/app-legacy.css' 29 | } 30 | }, 31 | min: { 32 | options: { 33 | map: true, 34 | processors: [ 35 | require( 'csswring' )({ 36 | preserveHacks: true 37 | }), 38 | ] 39 | }, 40 | files: { 41 | 'styles/css/app.css' : 'styles/css/app.css', 42 | 'styles/css/app-legacy.css' : 'styles/css/app-legacy.css' 43 | } 44 | } 45 | }; -------------------------------------------------------------------------------- /assets/grunt/sass.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | options: { 4 | sourceMap: true, 5 | outputStyle: 'compact' 6 | }, 7 | 8 | dist: { 9 | files: { 10 | 'styles/css/app.css' : 'styles/scss/app.scss', 11 | 'styles/css/app-legacy.css' : 'styles/scss/app-legacy.scss', 12 | } 13 | }, 14 | }; -------------------------------------------------------------------------------- /assets/grunt/uglify.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | options: { 4 | compress: true, 5 | nonull: true 6 | }, 7 | 8 | dist: { 9 | files: { 10 | 'js/min/app.built.min.js': 'js/built/app.built.js' 11 | // ,'js/min/modernizr.built.min.js' : 'js/built/modernizr.built.js' 12 | } 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /assets/grunt/watch.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | options: { 4 | spawn: false, 5 | livereload: true 6 | }, 7 | 8 | scripts: { 9 | files: [ 10 | 'js/dev/**/*.js' 11 | ], 12 | tasks: [ 13 | 'concat', 14 | 'babel' 15 | ] 16 | }, 17 | 18 | styles: { 19 | files: [ 20 | 'styles/scss/**/*.scss' 21 | ], 22 | tasks: [ 23 | 'sass', 'postcss:autoprefixer' 24 | ] 25 | }, 26 | } -------------------------------------------------------------------------------- /assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielck/genesis-sample-foundation/de94eea1ff92d24c9887d94795b6ff04d8681ea3/assets/images/favicon.ico -------------------------------------------------------------------------------- /assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielck/genesis-sample-foundation/de94eea1ff92d24c9887d94795b6ff04d8681ea3/assets/images/logo.png -------------------------------------------------------------------------------- /assets/images/logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielck/genesis-sample-foundation/de94eea1ff92d24c9887d94795b6ff04d8681ea3/assets/images/logo@2x.png -------------------------------------------------------------------------------- /assets/js/dev/app.js: -------------------------------------------------------------------------------- 1 | jQuery(document).ready( function( $ ) { 2 | 3 | /** 4 | * Initialise Foundation 5 | */ 6 | $(document).foundation(); 7 | 8 | }); 9 | -------------------------------------------------------------------------------- /assets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "h1-assets", 3 | "version": "0.0.1", 4 | "description": "H1 assets for Grunt-based development", 5 | "devDependencies": { 6 | "autoprefixer": "^6.1.2", 7 | "csswring": "^4.1.1", 8 | "grunt": "^0.4.5", 9 | "grunt-bump-wp-version": "^0.1.0", 10 | "grunt-contrib-concat": "^0.5.1", 11 | "grunt-contrib-uglify": "^0.11.0", 12 | "grunt-contrib-watch": "^0.6.1", 13 | "grunt-postcss": "^0.7.1", 14 | "grunt-sass": "^1.1.0", 15 | "load-grunt-config": "^0.19.1", 16 | "oldie": "^1.3.0", 17 | "grunt-babel": "~6.0.0", 18 | "babel-preset-es2015": "~6.5.0" 19 | }, 20 | "dependencies": { 21 | "time-grunt": "^1.2.2" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /assets/styles/css/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielck/genesis-sample-foundation/de94eea1ff92d24c9887d94795b6ff04d8681ea3/assets/styles/css/.gitkeep -------------------------------------------------------------------------------- /assets/styles/scss/_print.scss: -------------------------------------------------------------------------------- 1 | /* # Print Styles 2 | ---------------------------------------------------------------------------------------------------- */ 3 | 4 | @media print { 5 | 6 | *, 7 | *:before, 8 | *:after { 9 | background: transparent !important; 10 | box-shadow: none !important; 11 | color: #000 !important; 12 | text-shadow: none !important; 13 | } 14 | 15 | a, 16 | a:visited { 17 | text-decoration: underline; 18 | } 19 | 20 | a[href]:after { 21 | content: " (" attr(href) ")"; 22 | } 23 | 24 | abbr[title]:after { 25 | content: " (" attr(title) ")"; 26 | } 27 | 28 | a[href^="javascript:"]:after, 29 | a[href^="#"]:after, 30 | .site-title > a:after { 31 | content: ""; 32 | } 33 | 34 | thead { 35 | display: table-header-group; 36 | } 37 | 38 | img, 39 | tr { 40 | page-break-inside: avoid; 41 | } 42 | 43 | img { 44 | max-width: 100% !important; 45 | } 46 | 47 | @page { 48 | margin: 2cm 0.5cm; 49 | } 50 | 51 | p, 52 | h2, 53 | h3 { 54 | orphans: 3; 55 | widows: 3; 56 | } 57 | 58 | blockquote, 59 | pre { 60 | border: 1px solid #999; 61 | page-break-inside: avoid; 62 | } 63 | 64 | .content, 65 | .content-sidebar { 66 | width: 100%; 67 | } 68 | 69 | button, 70 | input, 71 | select, 72 | textarea, 73 | .breadcrumb, 74 | .comment-edit-link, 75 | .comment-form, 76 | .comment-list .reply a, 77 | .comment-reply-title, 78 | .edit-link, 79 | .entry-comments-link, 80 | .entry-footer, 81 | .genesis-box, 82 | .header-widget-area, 83 | .hidden-print, 84 | .home-top, 85 | .nav-primary, 86 | .nav-secondary, 87 | .post-edit-link, 88 | .sidebar { 89 | display: none !important; 90 | } 91 | 92 | .title-area { 93 | text-align: center; 94 | width: 100%; 95 | } 96 | 97 | .site-title > a { 98 | margin: 0; 99 | text-decoration: none; 100 | text-indent: 0; 101 | } 102 | 103 | .site-inner { 104 | padding-top: 0; 105 | position: relative; 106 | top: -100px; 107 | } 108 | 109 | .author-box { 110 | margin-bottom: 0; 111 | } 112 | 113 | h1, 114 | h2, 115 | h3, 116 | h4, 117 | h5, 118 | h6 { 119 | orphans: 3; 120 | page-break-after: avoid; 121 | page-break-inside: avoid; 122 | widows: 3; 123 | } 124 | 125 | 126 | img { 127 | page-break-after: avoid; 128 | page-break-inside: avoid; 129 | } 130 | 131 | blockquote, 132 | pre, 133 | table { 134 | page-break-inside: avoid; 135 | } 136 | 137 | dl, 138 | ol, 139 | ul { 140 | page-break-before: avoid; 141 | } 142 | 143 | } -------------------------------------------------------------------------------- /assets/styles/scss/_settings.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites Settings 2 | // ----------------------------- 3 | // 4 | // Table of Contents: 5 | // 6 | // 1. Global 7 | // 2. Breakpoints 8 | // 3. The Grid 9 | // 4. Base Typography 10 | // 5. Typography Helpers 11 | // 6. Abide 12 | // 7. Accordion 13 | // 8. Accordion Menu 14 | // 9. Badge 15 | // 10. Breadcrumbs 16 | // 11. Button 17 | // 12. Button Group 18 | // 13. Callout 19 | // 14. Close Button 20 | // 15. Drilldown 21 | // 16. Dropdown 22 | // 17. Dropdown Menu 23 | // 18. Flex Video 24 | // 19. Forms 25 | // 20. Label 26 | // 21. Media Object 27 | // 22. Menu 28 | // 23. Meter 29 | // 24. Off-canvas 30 | // 25. Orbit 31 | // 26. Pagination 32 | // 27. Progress Bar 33 | // 28. Reveal 34 | // 29. Slider 35 | // 30. Switch 36 | // 31. Table 37 | // 32. Tabs 38 | // 33. Thumbnail 39 | // 34. Title Bar 40 | // 35. Tooltip 41 | // 36. Top Bar 42 | 43 | @import '../../bower_components/foundation-sites/scss/util/util'; 44 | 45 | // 1. Global 46 | // --------- 47 | 48 | $global-font-size: 100%; 49 | $global-width: rem-calc(1200); 50 | $global-lineheight: 1.5; 51 | $foundation-palette: ( 52 | primary: #2199e8, 53 | secondary: #777, 54 | success: #3adb76, 55 | warning: #ffae00, 56 | alert: #ec5840, 57 | ); 58 | $light-gray: #e6e6e6; 59 | $medium-gray: #cacaca; 60 | $dark-gray: #8a8a8a; 61 | $black: #0a0a0a; 62 | $white: #fefefe; 63 | $body-background: #f5f5f5; 64 | $body-font-color: $black; 65 | $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; 66 | $body-antialiased: true; 67 | $global-margin: 1rem; 68 | $global-padding: 1rem; 69 | $global-weight-normal: normal; 70 | $global-weight-bold: bold; 71 | $global-radius: 0; 72 | $global-text-direction: ltr; 73 | $global-flexbox: $flex; 74 | $print-transparent-backgrounds: true; 75 | 76 | @include add-foundation-colors; 77 | 78 | // 2. Breakpoints 79 | // -------------- 80 | 81 | $breakpoints: ( 82 | small: 0, 83 | medium: 640px, 84 | large: 1024px, 85 | xlarge: 1200px, 86 | xxlarge: 1440px, 87 | ); 88 | $breakpoint-classes: (small medium large); 89 | 90 | // 3. The Grid 91 | // ----------- 92 | 93 | $grid-row-width: $global-width; 94 | $grid-column-count: 12; 95 | $grid-column-gutter: ( 96 | small: 20px, 97 | medium: 30px, 98 | ); 99 | $grid-column-align-edge: true; 100 | $block-grid-max: 8; 101 | 102 | // 4. Base Typography 103 | // ------------------ 104 | 105 | $header-font-family: $body-font-family; 106 | $header-font-weight: $global-weight-normal; 107 | $header-font-style: normal; 108 | $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; 109 | $header-sizes: ( 110 | small: ( 111 | 'h1': 24, 112 | 'h2': 20, 113 | 'h3': 19, 114 | 'h4': 18, 115 | 'h5': 17, 116 | 'h6': 16, 117 | ), 118 | medium: ( 119 | 'h1': 36, 120 | 'h2': 30, 121 | 'h3': 24, 122 | 'h4': 20, 123 | 'h5': 16, 124 | 'h6': 16, 125 | ), 126 | ); 127 | $header-color: inherit; 128 | $header-lineheight: 1.4; 129 | $header-margin-bottom: 0.5rem; 130 | $header-text-rendering: optimizeLegibility; 131 | $small-font-size: 80%; 132 | $header-small-font-color: $medium-gray; 133 | $paragraph-lineheight: 1.6; 134 | $paragraph-margin-bottom: 1rem; 135 | $paragraph-text-rendering: optimizeLegibility; 136 | $code-color: $black; 137 | $code-font-family: $font-family-monospace; 138 | $code-font-weight: $global-weight-normal; 139 | $code-background: $light-gray; 140 | $code-border: 1px solid $medium-gray; 141 | $code-padding: rem-calc(2 5 1); 142 | $anchor-color: $primary-color; 143 | $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); 144 | $anchor-text-decoration: none; 145 | $anchor-text-decoration-hover: none; 146 | $hr-width: $global-width; 147 | $hr-border: 1px solid $medium-gray; 148 | $hr-margin: rem-calc(20) auto; 149 | $list-lineheight: $paragraph-lineheight; 150 | $list-margin-bottom: $paragraph-margin-bottom; 151 | $list-style-type: disc; 152 | $list-style-position: outside; 153 | $list-side-margin: 1.25rem; 154 | $list-nested-side-margin: 1.25rem; 155 | $defnlist-margin-bottom: 1rem; 156 | $defnlist-term-weight: $global-weight-bold; 157 | $defnlist-term-margin-bottom: 0.3rem; 158 | $blockquote-color: $dark-gray; 159 | $blockquote-padding: rem-calc(9 20 0 19); 160 | $blockquote-border: 1px solid $medium-gray; 161 | $cite-font-size: rem-calc(13); 162 | $cite-color: $dark-gray; 163 | $keystroke-font: $font-family-monospace; 164 | $keystroke-color: $black; 165 | $keystroke-background: $light-gray; 166 | $keystroke-padding: rem-calc(2 4 0); 167 | $keystroke-radius: $global-radius; 168 | $abbr-underline: 1px dotted $black; 169 | 170 | // 5. Typography Helpers 171 | // --------------------- 172 | 173 | $lead-font-size: $global-font-size * 1.25; 174 | $lead-lineheight: 1.6; 175 | $subheader-lineheight: 1.4; 176 | $subheader-color: $dark-gray; 177 | $subheader-font-weight: $global-weight-normal; 178 | $subheader-margin-top: 0.2rem; 179 | $subheader-margin-bottom: 0.5rem; 180 | $stat-font-size: 2.5rem; 181 | 182 | // 6. Abide 183 | // -------- 184 | 185 | $abide-inputs: true; 186 | $abide-labels: true; 187 | $input-background-invalid: map-get($foundation-palette, alert); 188 | $form-label-color-invalid: map-get($foundation-palette, alert); 189 | $input-error-color: map-get($foundation-palette, alert); 190 | $input-error-font-size: rem-calc(12); 191 | $input-error-font-weight: $global-weight-bold; 192 | 193 | // 7. Accordion 194 | // ------------ 195 | 196 | $accordion-background: $white; 197 | $accordion-plusminus: true; 198 | $accordion-item-color: foreground($accordion-background, $primary-color); 199 | $accordion-item-background-hover: $light-gray; 200 | $accordion-item-padding: 1.25rem 1rem; 201 | $accordion-content-background: $white; 202 | $accordion-content-border: 1px solid $light-gray; 203 | $accordion-content-color: foreground($accordion-background, $primary-color); 204 | $accordion-content-padding: 1rem; 205 | 206 | // 8. Accordion Menu 207 | // ----------------- 208 | 209 | $accordionmenu-arrows: true; 210 | $accordionmenu-arrow-color: $primary-color; 211 | 212 | // 9. Badge 213 | // -------- 214 | 215 | $badge-background: $primary-color; 216 | $badge-color: foreground($badge-background); 217 | $badge-padding: 0.3em; 218 | $badge-minwidth: 2.1em; 219 | $badge-font-size: 0.6rem; 220 | 221 | // 10. Breadcrumbs 222 | // --------------- 223 | 224 | $breadcrumbs-margin: 0 0 $global-margin 0; 225 | $breadcrumbs-item-font-size: rem-calc(11); 226 | $breadcrumbs-item-color: $primary-color; 227 | $breadcrumbs-item-color-current: $black; 228 | $breadcrumbs-item-color-disabled: $medium-gray; 229 | $breadcrumbs-item-margin: 0.75rem; 230 | $breadcrumbs-item-uppercase: true; 231 | $breadcrumbs-item-slash: true; 232 | 233 | // 11. Button 234 | // ---------- 235 | 236 | $button-padding: 0.85em 1em; 237 | $button-margin: 0 0 $global-margin 0; 238 | $button-fill: solid; 239 | $button-background: $primary-color; 240 | $button-background-hover: scale-color($button-background, $lightness: -15%); 241 | $button-color: $white; 242 | $button-color-alt: $black; 243 | $button-radius: $global-radius; 244 | $button-sizes: ( 245 | tiny: 0.6rem, 246 | small: 0.75rem, 247 | default: 0.9rem, 248 | large: 1.25rem, 249 | ); 250 | $button-opacity-disabled: 0.25; 251 | 252 | // 12. Button Group 253 | // ---------------- 254 | 255 | $buttongroup-margin: 1rem; 256 | $buttongroup-spacing: 1px; 257 | $buttongroup-child-selector: '.button'; 258 | $buttongroup-expand-max: 6; 259 | 260 | // 13. Callout 261 | // ----------- 262 | 263 | $callout-background: $white; 264 | $callout-background-fade: 85%; 265 | $callout-border: 1px solid rgba($black, 0.25); 266 | $callout-margin: 0 0 1rem 0; 267 | $callout-padding: 1rem; 268 | $callout-font-color: $body-font-color; 269 | $callout-font-color-alt: $body-background; 270 | $callout-radius: $global-radius; 271 | $callout-link-tint: 30%; 272 | 273 | // 14. Close Button 274 | // ---------------- 275 | 276 | $closebutton-position: right top; 277 | $closebutton-offset-horizontal: 1rem; 278 | $closebutton-offset-vertical: 0.5rem; 279 | $closebutton-size: 2em; 280 | $closebutton-lineheight: 1; 281 | $closebutton-color: $dark-gray; 282 | $closebutton-color-hover: $black; 283 | 284 | // 15. Drilldown 285 | // ------------- 286 | 287 | $drilldown-transition: transform 0.15s linear; 288 | $drilldown-arrows: true; 289 | $drilldown-arrow-color: $primary-color; 290 | $drilldown-background: $white; 291 | 292 | // 16. Dropdown 293 | // ------------ 294 | 295 | $dropdown-padding: 1rem; 296 | $dropdown-border: 1px solid $medium-gray; 297 | $dropdown-font-size: 1rem; 298 | $dropdown-width: 300px; 299 | $dropdown-radius: $global-radius; 300 | $dropdown-sizes: ( 301 | tiny: 100px, 302 | small: 200px, 303 | large: 400px, 304 | ); 305 | 306 | // 17. Dropdown Menu 307 | // ----------------- 308 | 309 | $dropdownmenu-arrows: true; 310 | $dropdownmenu-arrow-color: $anchor-color; 311 | $dropdownmenu-min-width: 200px; 312 | $dropdownmenu-background: $white; 313 | $dropdownmenu-border: 1px solid $medium-gray; 314 | 315 | // 18. Flex Video 316 | // -------------- 317 | 318 | $flexvideo-margin-bottom: rem-calc(16); 319 | $flexvideo-ratio: 4 by 3; 320 | $flexvideo-ratio-widescreen: 16 by 9; 321 | 322 | // 19. Forms 323 | // --------- 324 | 325 | $fieldset-border: 1px solid $medium-gray; 326 | $fieldset-padding: rem-calc(20); 327 | $fieldset-margin: rem-calc(18 0); 328 | $legend-padding: rem-calc(0 3); 329 | $form-spacing: rem-calc(16); 330 | $helptext-color: $black; 331 | $helptext-font-size: rem-calc(13); 332 | $helptext-font-style: italic; 333 | $input-prefix-color: $black; 334 | $input-prefix-background: $light-gray; 335 | $input-prefix-border: 1px solid $medium-gray; 336 | $input-prefix-padding: 1rem; 337 | $form-label-color: $black; 338 | $form-label-font-size: rem-calc(14); 339 | $form-label-font-weight: $global-weight-normal; 340 | $form-label-line-height: 1.8; 341 | $select-background: $white; 342 | $select-triangle-color: $dark-gray; 343 | $select-radius: $global-radius; 344 | $input-color: $black; 345 | $input-placeholder-color: $medium-gray; 346 | $input-font-family: inherit; 347 | $input-font-size: rem-calc(16); 348 | $input-background: $white; 349 | $input-background-focus: $white; 350 | $input-background-disabled: $light-gray; 351 | $input-border: 1px solid $medium-gray; 352 | $input-border-focus: 1px solid $dark-gray; 353 | $input-shadow: inset 0 1px 2px rgba($black, 0.1); 354 | $input-shadow-focus: 0 0 5px $medium-gray; 355 | $input-cursor-disabled: default; 356 | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; 357 | $input-number-spinners: true; 358 | $input-radius: $global-radius; 359 | 360 | // 20. Label 361 | // --------- 362 | 363 | $label-background: $primary-color; 364 | $label-color: foreground($label-background); 365 | $label-font-size: 0.8rem; 366 | $label-padding: 0.33333rem 0.5rem; 367 | $label-radius: $global-radius; 368 | 369 | // 21. Media Object 370 | // ---------------- 371 | 372 | $mediaobject-margin-bottom: $global-margin; 373 | $mediaobject-section-padding: $global-padding; 374 | $mediaobject-image-width-stacked: 100%; 375 | 376 | // 22. Menu 377 | // -------- 378 | 379 | $menu-margin: 0; 380 | $menu-margin-nested: 1rem; 381 | $menu-item-padding: 0.7rem 1rem; 382 | $menu-item-color-active: $white; 383 | $menu-item-background-active: map-get($foundation-palette, primary); 384 | $menu-icon-spacing: 0.25rem; 385 | 386 | // 23. Meter 387 | // --------- 388 | 389 | $meter-height: 1rem; 390 | $meter-radius: $global-radius; 391 | $meter-background: $medium-gray; 392 | $meter-fill-good: $success-color; 393 | $meter-fill-medium: $warning-color; 394 | $meter-fill-bad: $alert-color; 395 | 396 | // 24. Off-canvas 397 | // -------------- 398 | 399 | $offcanvas-size: 250px; 400 | $offcanvas-background: $light-gray; 401 | $offcanvas-zindex: -1; 402 | $offcanvas-transition-length: 0.5s; 403 | $offcanvas-transition-timing: ease; 404 | $offcanvas-fixed-reveal: true; 405 | $offcanvas-exit-background: rgba($white, 0.25); 406 | $maincontent-class: 'off-canvas-content'; 407 | $maincontent-shadow: 0 0 10px rgba($black, 0.5); 408 | 409 | // 25. Orbit 410 | // --------- 411 | 412 | $orbit-bullet-background: $medium-gray; 413 | $orbit-bullet-background-active: $dark-gray; 414 | $orbit-bullet-diameter: 1.2rem; 415 | $orbit-bullet-margin: 0.1rem; 416 | $orbit-bullet-margin-top: 0.8rem; 417 | $orbit-bullet-margin-bottom: 0.8rem; 418 | $orbit-caption-background: rgba($black, 0.5); 419 | $orbit-caption-padding: 1rem; 420 | $orbit-control-background-hover: rgba($black, 0.5); 421 | $orbit-control-padding: 1rem; 422 | $orbit-control-zindex: 10; 423 | 424 | // 26. Pagination 425 | // -------------- 426 | 427 | $pagination-font-size: rem-calc(14); 428 | $pagination-margin-bottom: $global-margin; 429 | $pagination-item-color: $black; 430 | $pagination-item-padding: rem-calc(3 10); 431 | $pagination-item-spacing: rem-calc(1); 432 | $pagination-radius: $global-radius; 433 | $pagination-item-background-hover: $light-gray; 434 | $pagination-item-background-current: $primary-color; 435 | $pagination-item-color-current: foreground($pagination-item-background-current); 436 | $pagination-item-color-disabled: $medium-gray; 437 | $pagination-ellipsis-color: $black; 438 | $pagination-mobile-items: false; 439 | $pagination-arrows: true; 440 | 441 | // 27. Progress Bar 442 | // ---------------- 443 | 444 | $progress-height: 1rem; 445 | $progress-background: $medium-gray; 446 | $progress-margin-bottom: $global-margin; 447 | $progress-meter-background: $primary-color; 448 | $progress-radius: $global-radius; 449 | 450 | // 28. Reveal 451 | // ---------- 452 | 453 | $reveal-background: $white; 454 | $reveal-width: 600px; 455 | $reveal-max-width: $global-width; 456 | $reveal-padding: $global-padding; 457 | $reveal-border: 1px solid $medium-gray; 458 | $reveal-radius: $global-radius; 459 | $reveal-zindex: 1005; 460 | $reveal-overlay-background: rgba($black, 0.45); 461 | 462 | // 29. Slider 463 | // ---------- 464 | 465 | $slider-width-vertical: 0.5rem; 466 | $slider-transition: all 0.2s ease-in-out; 467 | $slider-height: 0.5rem; 468 | $slider-background: $light-gray; 469 | $slider-fill-background: $medium-gray; 470 | $slider-handle-height: 1.4rem; 471 | $slider-handle-width: 1.4rem; 472 | $slider-handle-background: $primary-color; 473 | $slider-opacity-disabled: 0.25; 474 | $slider-radius: $global-radius; 475 | 476 | // 30. Switch 477 | // ---------- 478 | 479 | $switch-background: $medium-gray; 480 | $switch-background-active: $primary-color; 481 | $switch-height: 2rem; 482 | $switch-height-tiny: 1.5rem; 483 | $switch-height-small: 1.75rem; 484 | $switch-height-large: 2.5rem; 485 | $switch-radius: $global-radius; 486 | $switch-margin: $global-margin; 487 | $switch-paddle-background: $white; 488 | $switch-paddle-offset: 0.25rem; 489 | $switch-paddle-radius: $global-radius; 490 | $switch-paddle-transition: all 0.25s ease-out; 491 | 492 | // 31. Table 493 | // --------- 494 | 495 | $table-background: $white; 496 | $table-color-scale: 5%; 497 | $table-border: 1px solid smart-scale($table-background, $table-color-scale); 498 | $table-padding: rem-calc(8 10 10); 499 | $table-hover-scale: 2%; 500 | $table-row-hover: darken($table-background, $table-hover-scale); 501 | $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); 502 | $table-striped-background: smart-scale($table-background, $table-color-scale); 503 | $table-stripe: even; 504 | $table-head-background: smart-scale($table-background, $table-color-scale / 2); 505 | $table-foot-background: smart-scale($table-background, $table-color-scale); 506 | $table-head-font-color: $body-font-color; 507 | $show-header-for-stacked: false; 508 | 509 | // 32. Tabs 510 | // -------- 511 | 512 | $tab-margin: 0; 513 | $tab-background: $white; 514 | $tab-background-active: $light-gray; 515 | $tab-item-font-size: rem-calc(12); 516 | $tab-item-background-hover: $white; 517 | $tab-item-padding: 1.25rem 1.5rem; 518 | $tab-expand-max: 6; 519 | $tab-content-background: $white; 520 | $tab-content-border: $light-gray; 521 | $tab-content-color: foreground($tab-background, $primary-color); 522 | $tab-content-padding: 1rem; 523 | 524 | // 33. Thumbnail 525 | // ------------- 526 | 527 | $thumbnail-border: solid 4px $white; 528 | $thumbnail-margin-bottom: $global-margin; 529 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); 530 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); 531 | $thumbnail-transition: box-shadow 200ms ease-out; 532 | $thumbnail-radius: $global-radius; 533 | 534 | // 34. Title Bar 535 | // ------------- 536 | 537 | $titlebar-background: $black; 538 | $titlebar-color: $white; 539 | $titlebar-padding: 0.5rem; 540 | $titlebar-text-font-weight: bold; 541 | $titlebar-icon-color: $white; 542 | $titlebar-icon-color-hover: $medium-gray; 543 | $titlebar-icon-spacing: 0.25rem; 544 | 545 | // 35. Tooltip 546 | // ----------- 547 | 548 | $has-tip-font-weight: $global-weight-bold; 549 | $has-tip-border-bottom: dotted 1px $dark-gray; 550 | $tooltip-background-color: $black; 551 | $tooltip-color: $white; 552 | $tooltip-padding: 0.75rem; 553 | $tooltip-font-size: $small-font-size; 554 | $tooltip-pip-width: 0.75rem; 555 | $tooltip-pip-height: $tooltip-pip-width * 0.866; 556 | $tooltip-radius: $global-radius; 557 | 558 | // 36. Top Bar 559 | // ----------- 560 | 561 | $topbar-padding: 0.5rem; 562 | $topbar-background: $light-gray; 563 | $topbar-submenu-background: $topbar-background; 564 | $topbar-title-spacing: 1rem; 565 | $topbar-input-width: 200px; 566 | $topbar-unstack-breakpoint: medium; 567 | -------------------------------------------------------------------------------- /assets/styles/scss/_shame.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | The naughty file: sometimes you need to do a quick dirty fix and don't know where to put the 4 | CSS. Don't worry, it's OK. You can put the code here and figure out later where to put it. 5 | 6 | */ -------------------------------------------------------------------------------- /assets/styles/scss/app-legacy.scss: -------------------------------------------------------------------------------- 1 | @import "app"; 2 | 3 | /** 4 | * Styles for IE 8 and below 5 | */ 6 | .title-bar { 7 | display: none; 8 | } 9 | 10 | /** 11 | * Simple dropdown fallback styles 12 | */ 13 | body .genesis-nav-menu { 14 | .menu-item { 15 | position: relative; 16 | //z-index: 0; 17 | } 18 | .menu-item > ul { 19 | display: none ; 20 | } 21 | .menu-item:hover > ul { 22 | display: block; 23 | position: absolute; 24 | top: 100%; 25 | background: $dropdownmenu-background; 26 | z-index: 1000; 27 | min-width: 200px; 28 | } 29 | .menu-item > ul > li:hover > ul { 30 | left: 100%; 31 | top: 0; 32 | } 33 | } -------------------------------------------------------------------------------- /assets/styles/scss/app.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | $flex: false; // set to false for legacy browser support 3 | 4 | // Foundation 5 | @import "settings"; 6 | @import "../../bower_components/foundation-sites/scss/foundation"; 7 | 8 | @include foundation-global-styles; 9 | // @if not $flex { 10 | // @include foundation-grid; 11 | // } 12 | // @else { 13 | // @include foundation-flex-grid; 14 | // } 15 | @include foundation-typography; 16 | @include foundation-forms; 17 | @include foundation-button; 18 | // @include foundation-accordion; 19 | // @include foundation-accordion-menu; 20 | // @include foundation-badge; 21 | @include foundation-breadcrumbs; 22 | // @include foundation-button-group; 23 | // @include foundation-callout; 24 | // @include foundation-close-button; 25 | @include foundation-menu; 26 | @include foundation-menu-icon; 27 | @include foundation-drilldown-menu; 28 | @include foundation-dropdown; 29 | @include foundation-dropdown-menu; 30 | // @include foundation-flex-video; 31 | // @include foundation-label; 32 | // @include foundation-media-object; 33 | // @include foundation-off-canvas; 34 | // @include foundation-orbit; 35 | // @include foundation-pagination; 36 | // @include foundation-progress-bar; 37 | // @include foundation-slider; 38 | // @include foundation-sticky; 39 | // @include foundation-reveal; 40 | // @include foundation-switch; 41 | @include foundation-table; 42 | // @include foundation-tabs; 43 | // @include foundation-thumbnail; 44 | @include foundation-title-bar; 45 | // @include foundation-tooltip; 46 | // @include foundation-top-bar; 47 | // @include foundation-visibility-classes; 48 | // @include foundation-float-classes; 49 | 50 | @if $flex { 51 | @include foundation-flex-classes; 52 | } 53 | 54 | // Layouts 55 | @import "layout/layouts"; 56 | 57 | // Site 58 | @import "site/header.scss"; 59 | @import "site/menus.scss"; 60 | @import "site/footer.scss"; 61 | 62 | // Modules 63 | @import "modules/avatar"; 64 | @import "modules/genesis"; 65 | @import "modules/searchform"; 66 | @import "modules/entries"; 67 | @import "modules/comments"; 68 | @import "modules/pagination"; 69 | 70 | // WordPress 71 | @import "wordpress/accessibility"; 72 | @import "wordpress/align"; 73 | @import "wordpress/media"; 74 | @import "wordpress/plugins"; 75 | @import "wordpress/widgets"; 76 | 77 | // Shame 78 | @import "shame"; 79 | 80 | // Print 81 | @import "print"; -------------------------------------------------------------------------------- /assets/styles/scss/layout/_layouts.scss: -------------------------------------------------------------------------------- 1 | /* ## Site Containers 2 | --------------------------------------------- */ 3 | 4 | .site-inner { 5 | clear: both; 6 | padding-top: 40px; 7 | } 8 | 9 | /* ## Column Widths and Positions 10 | --------------------------------------------- */ 11 | 12 | /* ### Wrapping div for .content and .sidebar-primary */ 13 | 14 | .content-sidebar-wrap, 15 | .content, 16 | .sidebar-primary, 17 | .sidebar-secondary { 18 | width: 100%; 19 | } 20 | 21 | @include breakpoint(960) { 22 | 23 | .wrap, 24 | .content-sidebar-wrap 25 | { 26 | @if not $flex { 27 | @include grid-row; 28 | } 29 | @else { 30 | @include flex-grid-row; 31 | } 32 | } 33 | 34 | /* ### Content */ 35 | 36 | .content { 37 | @if not $flex { 38 | @include grid-column(9); 39 | 40 | .sidebar-sidebar-content &, 41 | .content-sidebar-sidebar &, 42 | .sidebar-content-sidebar & { 43 | @include grid-column(6); 44 | } 45 | .sidebar-content & { 46 | @include grid-column-position(3); 47 | } 48 | .sidebar-sidebar-content & { 49 | @include grid-column-position(6); 50 | } 51 | .sidebar-content-sidebar & { 52 | @include grid-column-position(3); 53 | } 54 | 55 | } 56 | @else { 57 | @include flex-grid-column(9); 58 | 59 | .sidebar-sidebar-content &, 60 | .content-sidebar-sidebar &, 61 | .sidebar-content-sidebar & { 62 | @include flex-grid-column(6); 63 | } 64 | .sidebar-content &, 65 | .sidebar-sidebar-content & { 66 | @include flex-order(3); 67 | } 68 | .sidebar-content-sidebar & { 69 | @include flex-order(2); 70 | } 71 | } 72 | .full-width-content & { 73 | @if not $flex { 74 | width: 100%; 75 | } 76 | @else { 77 | @include flex-grid-column(12); 78 | } 79 | } 80 | } 81 | 82 | /* ### Primary Sidebar */ 83 | 84 | .sidebar-primary { 85 | @if not $flex { 86 | @include grid-column(3); 87 | 88 | .sidebar-content & { 89 | @include grid-column-position(-9); 90 | } 91 | .sidebar-sidebar-content &, 92 | .sidebar-content-sidebar & 93 | { 94 | @include grid-column-position(-6); 95 | } 96 | } 97 | @else { 98 | @include flex-grid-column(3); 99 | 100 | .sidebar-content &, 101 | .sidebar-sidebar-content &, 102 | .sidebar-content-sidebar & 103 | { 104 | @include flex-order(1); 105 | } 106 | } 107 | } 108 | 109 | /* ### Secondary Sidebar */ 110 | 111 | .sidebar-secondary { 112 | @if not $flex { 113 | @include grid-column(3); 114 | 115 | .sidebar-sidebar-content & { 116 | @include grid-column-position(-6); 117 | } 118 | } 119 | @else { 120 | @include flex-grid-column(3); 121 | 122 | .sidebar-sidebar-content & { 123 | @include flex-order(2); 124 | } 125 | .sidebar-content-sidebar & { 126 | @include flex-order(3); 127 | } 128 | 129 | } 130 | } 131 | 132 | } 133 | 134 | 135 | /* ## Column Classes 136 | --------------------------------------------- */ 137 | /* Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css */ 138 | 139 | .five-sixths, 140 | .four-sixths, 141 | .one-fourth, 142 | .one-half, 143 | .one-sixth, 144 | .one-third, 145 | .three-fourths, 146 | .three-sixths, 147 | .two-fourths, 148 | .two-sixths, 149 | .two-thirds { 150 | float: left; 151 | margin-left: 2.564102564102564%; 152 | } 153 | 154 | .one-half, 155 | .three-sixths, 156 | .two-fourths { 157 | width: 48.717948717948715%; 158 | } 159 | 160 | .one-third, 161 | .two-sixths { 162 | width: 31.623931623931625%; 163 | } 164 | 165 | .four-sixths, 166 | .two-thirds { 167 | width: 65.81196581196582%; 168 | } 169 | 170 | .one-fourth { 171 | width: 23.076923076923077%; 172 | } 173 | 174 | .three-fourths { 175 | width: 74.35897435897436%; 176 | } 177 | 178 | .one-sixth { 179 | width: 14.52991452991453%; 180 | } 181 | 182 | .five-sixths { 183 | width: 82.90598290598291%; 184 | } 185 | 186 | .first { 187 | clear: both; 188 | margin-left: 0; 189 | } -------------------------------------------------------------------------------- /assets/styles/scss/modules/_avatar.scss: -------------------------------------------------------------------------------- 1 | /* ## Avatar 2 | --------------------------------------------- */ 3 | 4 | .avatar { 5 | float: left; 6 | } 7 | 8 | .alignleft .avatar, 9 | .author-box .avatar { 10 | margin-right: rem-calc(24); 11 | } 12 | 13 | .alignright .avatar { 14 | margin-left: rem-calc(24); 15 | } 16 | 17 | .comment .avatar { 18 | margin: rem-calc(0 16px 24px 0); 19 | } -------------------------------------------------------------------------------- /assets/styles/scss/modules/_comments.scss: -------------------------------------------------------------------------------- 1 | /* ## Comments 2 | --------------------------------------------- */ 3 | 4 | .comment-list { 5 | list-style: none; 6 | margin-left: 0; 7 | } 8 | 9 | .comment-respond, 10 | .entry-comments, 11 | .entry-pings { 12 | background-color: #fff; 13 | margin-bottom: 40px; 14 | } 15 | 16 | .comment-respond, 17 | .entry-pings { 18 | padding: 40px 40px 16px; 19 | } 20 | 21 | .entry-comments { 22 | padding: 40px; 23 | } 24 | 25 | .comment-header { 26 | font-size: rem-calc(16); 27 | } 28 | 29 | li.comment { 30 | background-color: #f5f5f5; 31 | border: 2px solid #fff; 32 | border-right: 0; 33 | } 34 | 35 | .comment-content { 36 | clear: both; 37 | word-wrap: break-word; 38 | } 39 | 40 | .comment-list li { 41 | margin-top: 24px; 42 | padding: 32px; 43 | } 44 | 45 | .comment-list li li { 46 | margin-right: -32px; 47 | } 48 | 49 | .comment-respond input[type="email"], 50 | .comment-respond input[type="text"], 51 | .comment-respond input[type="url"] { 52 | width: 50%; 53 | } 54 | 55 | .comment-respond label { 56 | display: block; 57 | margin-right: 12px; 58 | } 59 | 60 | .entry-comments .comment-author { 61 | margin-bottom: 0; 62 | } 63 | 64 | .entry-pings .reply { 65 | display: none; 66 | } 67 | 68 | .bypostauthor { 69 | } 70 | 71 | .form-allowed-tags { 72 | background-color: #f5f5f5; 73 | font-size: rem-calc(16); 74 | padding: 24px; 75 | } -------------------------------------------------------------------------------- /assets/styles/scss/modules/_entries.scss: -------------------------------------------------------------------------------- 1 | /* ## Entries 2 | --------------------------------------------- */ 3 | 4 | .entry { 5 | margin-bottom: 40px; 6 | padding: $global-padding; 7 | 8 | @include breakpoint(960) { 9 | padding: rem-calc(40); 10 | } 11 | } 12 | 13 | .content .entry { 14 | background-color: #fff; 15 | } 16 | 17 | .entry-content ol, 18 | .entry-content ul { 19 | margin-bottom: 28px; 20 | margin-left: 40px; 21 | } 22 | 23 | .entry-content ol > li { 24 | list-style-type: decimal; 25 | } 26 | 27 | .entry-content ul > li { 28 | list-style-type: disc; 29 | } 30 | 31 | .entry-content ol ol, 32 | .entry-content ul ul { 33 | margin-bottom: 0; 34 | } 35 | 36 | .entry-content code { 37 | background-color: #333; 38 | color: #ddd; 39 | } 40 | 41 | /* ## Entry Meta 42 | --------------------------------------------- */ 43 | 44 | p.entry-meta { 45 | font-size: rem-calc(16); 46 | margin-bottom: 0; 47 | } 48 | 49 | .entry-header .entry-meta { 50 | margin-bottom: 24px; 51 | } 52 | 53 | .entry-footer .entry-meta { 54 | border-top: 2px solid #f5f5f5; 55 | padding-top: 24px; 56 | } 57 | 58 | .entry-categories, 59 | .entry-tags { 60 | display: block; 61 | } 62 | 63 | .entry-comments-link::before { 64 | content: "\2014"; 65 | margin: 0 6px 0 2px; 66 | } -------------------------------------------------------------------------------- /assets/styles/scss/modules/_genesis.scss: -------------------------------------------------------------------------------- 1 | /* ## Genesis 2 | --------------------------------------------- */ 3 | 4 | .breadcrumb { 5 | margin-bottom: rem-calc(20px); 6 | } 7 | 8 | .archive-description, 9 | .author-box { 10 | background-color: #fff; 11 | font-size: rem-calc(16); 12 | margin-bottom: rem-calc(40px); 13 | padding: rem-calc(40px); 14 | } 15 | 16 | .author-box-title { 17 | font-size: rem-calc(16px); 18 | margin-bottom: rem-calc(4px); 19 | } 20 | 21 | .archive-description p:last-child, 22 | .author-box p:last-child { 23 | margin-bottom: 0; 24 | } -------------------------------------------------------------------------------- /assets/styles/scss/modules/_pagination.scss: -------------------------------------------------------------------------------- 1 | /* ## Pagination 2 | --------------------------------------------- */ 3 | 4 | .pagination { 5 | @include pagination-container; 6 | 7 | .active { 8 | @include pagination-item-current; 9 | } 10 | } 11 | 12 | .adjacent-entry-pagination { 13 | margin-bottom: 0; 14 | } -------------------------------------------------------------------------------- /assets/styles/scss/modules/_searchform.scss: -------------------------------------------------------------------------------- 1 | /* ## Search Form 2 | 3 | TODO: review redundant styles 4 | --------------------------------------------- */ 5 | 6 | .search-form { 7 | overflow: hidden; 8 | } 9 | 10 | .site-header .search-form { 11 | float: right; 12 | margin-top: rem-calc(12px); 13 | } 14 | 15 | .entry-content .search-form, 16 | .site-header .search-form { 17 | width: 50%; 18 | } 19 | 20 | .genesis-nav-menu .search input[type="submit"], 21 | .widget_search input[type="submit"] { 22 | border: 0; 23 | clip: rect(0, 0, 0, 0); 24 | height: 1px; 25 | margin: -1px; 26 | padding: 0; 27 | position: absolute; 28 | width: 1px; 29 | } -------------------------------------------------------------------------------- /assets/styles/scss/site/_footer.scss: -------------------------------------------------------------------------------- 1 | /* # Site Footer 2 | ---------------------------------------------------------------------------------------------------- */ 3 | 4 | .site-footer { 5 | background-color: #fff; 6 | font-size: rem-calc(16); 7 | line-height: 1; 8 | padding: 40px 0; 9 | text-align: center; 10 | } 11 | 12 | .site-footer p { 13 | margin-bottom: 0; 14 | } -------------------------------------------------------------------------------- /assets/styles/scss/site/_header.scss: -------------------------------------------------------------------------------- 1 | /* # Site Header 2 | ---------------------------------------------------------------------------------------------------- */ 3 | 4 | .site-header { 5 | background-color: #fff; 6 | min-height: 160px; 7 | 8 | @include clearfix; 9 | } 10 | 11 | .site-header .wrap { 12 | padding-top: 40px; 13 | padding-bottom: 40px; 14 | } 15 | 16 | /* ## Title Area 17 | --------------------------------------------- */ 18 | 19 | .title-area { 20 | @if not $flex { 21 | @include grid-column(4); 22 | } 23 | @else { 24 | @include flex-grid-column(4); 25 | } 26 | } 27 | 28 | .header-full-width .title-area { 29 | width: 100%; 30 | } 31 | 32 | .site-title { 33 | font-size: rem-calc(24); 34 | font-weight: 400; 35 | line-height: 1.2; 36 | 37 | @include breakpoint(medium) { 38 | font-size: rem-calc(48); 39 | } 40 | } 41 | 42 | .site-title a, 43 | .site-title a:hover, 44 | .site-title a:focus { 45 | color: #333; 46 | } 47 | 48 | .header-image .site-title > a { 49 | background: url(images/logo.png) no-repeat left; 50 | float: left; 51 | min-height: 60px; 52 | width: 100%; 53 | } 54 | 55 | .site-description { 56 | font-size: rem-calc(16); 57 | font-weight: 300; 58 | line-height: 1.5; 59 | } 60 | 61 | .site-description, 62 | .site-title { 63 | margin-bottom: 0; 64 | } 65 | 66 | .header-image .site-description, 67 | .header-image .site-title { 68 | display: block; 69 | text-indent: -9999px; 70 | } 71 | 72 | /* ## Widget Area 73 | --------------------------------------------- */ 74 | 75 | .site-header .widget-area { 76 | @if not $flex { 77 | @include grid-column(8); 78 | } 79 | @else { 80 | @include flex-grid-column(8); 81 | } 82 | } -------------------------------------------------------------------------------- /assets/styles/scss/site/_menus.scss: -------------------------------------------------------------------------------- 1 | .nav-primary { 2 | background: white; 3 | border-top: 1px solid #f0f0f0; 4 | } -------------------------------------------------------------------------------- /assets/styles/scss/wordpress/_accessibility.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Accessibility classes 3 | */ 4 | 5 | .screen-reader-text, 6 | .screen-reader-text span, 7 | .screen-reader-shortcut { 8 | @include element-invisible; 9 | } 10 | 11 | .screen-reader-text:focus, 12 | .screen-reader-shortcut:focus, 13 | .genesis-nav-menu .search input[type="submit"]:focus, 14 | .widget_search input[type="submit"]:focus { 15 | @include element-invisible-off; 16 | 17 | position: absolute!important; 18 | font-weight: bold; 19 | padding: 15px 23px 14px; 20 | color: #333; 21 | background: #fff; 22 | z-index: 100000; /* Above WP toolbar. */ 23 | text-decoration: none; 24 | box-shadow: 0 0 2px 2px rgba(0,0,0,.6); 25 | } 26 | 27 | .more-link { 28 | position: relative; 29 | } 30 | 31 | .genesis-skip-link { 32 | margin: 0; 33 | } 34 | 35 | .genesis-skip-link li { 36 | height: 0; 37 | width: 0; 38 | list-style: none; 39 | } 40 | 41 | /* Display outline on focus */ 42 | :focus { 43 | color: #333; 44 | outline: #ccc solid 1px; 45 | } -------------------------------------------------------------------------------- /assets/styles/scss/wordpress/_align.scss: -------------------------------------------------------------------------------- 1 | /* ## WordPress 2 | 3 | TODO: update code with rems 4 | --------------------------------------------- */ 5 | 6 | a.aligncenter img { 7 | display: block; 8 | margin: 0 auto; 9 | } 10 | 11 | a.alignnone { 12 | display: inline-block; 13 | } 14 | 15 | .alignleft { 16 | float: left; 17 | text-align: left; 18 | } 19 | 20 | .alignright { 21 | float: right; 22 | text-align: right; 23 | } 24 | 25 | a.alignleft, 26 | a.alignnone, 27 | a.alignright { 28 | max-width: 100%; 29 | } 30 | 31 | img.centered, 32 | .aligncenter { 33 | display: block; 34 | margin: 0 auto rem-calc(24px); 35 | } 36 | 37 | img.alignnone, 38 | .alignnone { 39 | margin-bottom: rem-calc(12px); 40 | } 41 | 42 | a.alignleft, 43 | img.alignleft, 44 | .wp-caption.alignleft { 45 | margin: rem-calc(0 24px 24px 0); 46 | } 47 | 48 | a.alignright, 49 | img.alignright, 50 | .wp-caption.alignright { 51 | margin: rem-calc(0 0 24px 24px); 52 | } 53 | 54 | .wp-caption-text { 55 | font-size: rem-calc(14); 56 | font-weight: 700; 57 | text-align: center; 58 | } 59 | 60 | .entry-content p.wp-caption-text { 61 | margin-bottom: 0; 62 | } 63 | 64 | .sticky { 65 | } 66 | 67 | .entry-content .wp-audio-shortcode, 68 | .entry-content .wp-playlist, 69 | .entry-content .wp-video { 70 | margin: rem-calc(0 0 28px 0); 71 | } -------------------------------------------------------------------------------- /assets/styles/scss/wordpress/_media.scss: -------------------------------------------------------------------------------- 1 | .featured-content img, 2 | .gallery img { 3 | width: auto; 4 | } -------------------------------------------------------------------------------- /assets/styles/scss/wordpress/_plugins.scss: -------------------------------------------------------------------------------- 1 | /* # Plugins 2 | ---------------------------------------------------------------------------------------------------- */ 3 | 4 | /* ## Genesis eNews Extended 5 | --------------------------------------------- */ 6 | 7 | .enews-widget, 8 | .enews-widget .widget-title { 9 | color: #fff; 10 | } 11 | 12 | .sidebar .widget.enews-widget { 13 | background-color: #333; 14 | } 15 | 16 | .enews-widget input, 17 | .enews-widget input:focus { 18 | border: 1px solid #333; 19 | } 20 | 21 | .enews-widget input { 22 | font-size: rem-calc(16); 23 | margin-bottom: rem-calc(16); 24 | } 25 | 26 | .enews-widget input[type="submit"] { 27 | background-color: #c3251d; 28 | color: #fff; 29 | margin: 0; 30 | width: 100%; 31 | } 32 | 33 | .enews-widget input:hover[type="submit"], 34 | .enews-widget input:focus[type="submit"] { 35 | background-color: #fff; 36 | color: #333; 37 | } 38 | 39 | .enews form + p { 40 | margin-top: rem-calc(24px); 41 | } 42 | 43 | /* ## Jetpack 44 | --------------------------------------------- */ 45 | 46 | #wpstats { 47 | display: none; 48 | } -------------------------------------------------------------------------------- /assets/styles/scss/wordpress/_widgets.scss: -------------------------------------------------------------------------------- 1 | /* # Widgets 2 | 3 | TODO: update code with rems 4 | ---------------------------------------------------------------------------------------------------- */ 5 | 6 | .widget { 7 | word-wrap: break-word; 8 | background: #fff; 9 | } 10 | 11 | .widget ol > li { 12 | list-style-position: inside; 13 | list-style-type: decimal; 14 | padding-left: 20px; 15 | text-indent: -20px; 16 | } 17 | 18 | .widget li li { 19 | border: 0; 20 | margin: 0 0 0 30px; 21 | padding: 0; 22 | } 23 | 24 | .widget_calendar table { 25 | width: 100%; 26 | } 27 | 28 | .widget_calendar td, 29 | .widget_calendar th { 30 | text-align: center; 31 | padding: 4px 0; 32 | } 33 | 34 | /* ## Featured Content 35 | --------------------------------------------- */ 36 | 37 | .featured-content .entry { 38 | border-bottom: 2px solid #f5f5f5; 39 | margin-bottom: 20px; 40 | padding: 0 0 24px; 41 | } 42 | 43 | .footer-widgets .entry { 44 | border-bottom: 1px dotted #666; 45 | } 46 | 47 | .featured-content .entry-title { 48 | font-size: 20px; 49 | font-size: 2rem; 50 | } 51 | 52 | /* # Sidebars 53 | ---------------------------------------------------------------------------------------------------- */ 54 | 55 | .sidebar { 56 | } 57 | 58 | .sidebar li { 59 | border-bottom: 1px dotted #ddd; 60 | margin-bottom: rem-calc(10); 61 | padding-bottom: rem-calc(10); 62 | } 63 | 64 | .sidebar p:last-child, 65 | .sidebar ul > li:last-child { 66 | margin-bottom: 0; 67 | } 68 | 69 | .sidebar .widget { 70 | margin-bottom: rem-calc(40); 71 | padding: $global-padding; 72 | 73 | @include breakpoint(960) { 74 | padding: rem-calc(40); 75 | } 76 | } 77 | 78 | /* # Footer Widgets 79 | ---------------------------------------------------------------------------------------------------- */ 80 | 81 | .footer-widgets { 82 | background-color: #333; 83 | clear: both; 84 | padding-top: 40px; 85 | } 86 | 87 | .footer-widgets, 88 | .footer-widgets a { 89 | color: #aaa; 90 | } 91 | 92 | .footer-widgets input { 93 | border: 1px solid #333; 94 | } 95 | 96 | .footer-widgets a.button, 97 | .footer-widgets a:hover, 98 | .footer-widgets a:focus { 99 | color: #fff; 100 | } 101 | 102 | .footer-widgets li { 103 | border-bottom: 1px dotted #666; 104 | margin-bottom: 10px; 105 | padding-bottom: 10px; 106 | } 107 | 108 | .footer-widgets .widget { 109 | margin-bottom: 40px; 110 | } 111 | 112 | .footer-widgets p:last-child { 113 | margin-bottom: 0; 114 | } 115 | 116 | .footer-widgets-1, 117 | .footer-widgets-2, 118 | .footer-widgets-3 { 119 | width: 340px; 120 | } 121 | 122 | .footer-widgets-1 { 123 | margin-right: 60px; 124 | } 125 | 126 | .footer-widgets-1, 127 | .footer-widgets-2 { 128 | float: left; 129 | } 130 | 131 | .footer-widgets-3 { 132 | float: right; 133 | } -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | 53 | 54 |
%2$s
55 | ', 56 | esc_attr( $menu_id ), 57 | __( 'Main navigation', 'genesis' ) 58 | ); 59 | 60 | if ( genesis_a11y( 'headings' ) ) { 61 | printf( '

%s

', __( 'Main navigation', 'genesis' ) ); 62 | } 63 | 64 | genesis_nav_menu( array( 65 | 'theme_location' => 'primary', 66 | 'menu_class' => $class, 67 | 'items_wrap' => '', 68 | 'walker' => new Foundation_Dropdown_Nav_Menu 69 | ) ); 70 | 71 | } ); 72 | 73 | /** 74 | * Replace original secondary menu 75 | * 76 | */ 77 | add_action( 'genesis_after_header', function() { 78 | 79 | //* Do nothing if menu not supported 80 | if ( ! genesis_nav_menu_supported( 'secondary' ) || ! has_nav_menu( 'secondary' ) ) 81 | return; 82 | 83 | $class = 'vertical medium-horizontal menu genesis-nav-menu menu-secondary'; 84 | $menu_id = 'genesis-nav-secondary'; 85 | 86 | printf( '
87 | 88 |
%2$s
89 |
', 90 | esc_attr( $menu_id ), 91 | __( 'Secondary navigation', 'genesis' ) 92 | ); 93 | 94 | genesis_nav_menu( array( 95 | 'theme_location' => 'secondary', 96 | 'menu_class' => $class, 97 | 'items_wrap' => '', 98 | 'walker' => new Foundation_Dropdown_Nav_Menu 99 | ) ); 100 | 101 | } ); 102 | 103 | add_filter( 'genesis_attr_nav-secondary', function ( $attributes ) { 104 | $attributes['id'] = 'genesis-nav-secondary'; 105 | $attributes['aria-label'] = __( 'Secondary navigation', 'genesis' ); 106 | return $attributes; 107 | } ); 108 | 109 | /** 110 | * Use the stylesheet inside /assets/styles/css/ 111 | */ 112 | add_filter( 'stylesheet_uri', function( $stylesheet_uri, $stylesheet_directory_uri ) { 113 | return $stylesheet_directory_uri . '/assets/styles/css/app.css'; 114 | }, 10, 2); 115 | 116 | /** 117 | * Enqueue scripts and styles 118 | */ 119 | add_action( 'wp_enqueue_scripts', function() { 120 | 121 | /** 122 | * Enqueue Google Fonts 123 | */ 124 | wp_enqueue_script( 'genesisfoundation-app', get_stylesheet_directory_uri() . '/assets/js/built/app.built.js', array( 'jquery' ), null ); 125 | 126 | /** 127 | * Enqueue legacy styles for IE < 9 128 | */ 129 | wp_enqueue_style( 'genesis-foundation-legacy', get_stylesheet_directory_uri() . '/assets/styles/css/app-legacy.css' ); 130 | global $wp_styles; 131 | $wp_styles->registered['genesis-foundation-legacy']->add_data( 'conditional', 'lt IE 9' ); 132 | } ); 133 | 134 | /** 135 | * Include classes 136 | */ 137 | require_once( 'includes/class.foundation_nav_walker.php' ); -------------------------------------------------------------------------------- /includes/class.foundation_nav_walker.php: -------------------------------------------------------------------------------- 1 | \n"; 23 | } 24 | 25 | } // Walker_Nav_Menu -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielck/genesis-sample-foundation/de94eea1ff92d24c9887d94795b6ff04d8681ea3/screenshot.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* # Genesis Sample Child Theme 2 | Theme Name: Genesis Sample Theme with Foundation 3 | Theme URI: http://my.studiopress.com/themes/genesis/ 4 | Description: This is the sample theme created for the Genesis Framework. 5 | Author: Daniel Koskinen, StudioPress 6 | Author URI: http://www.studiopress.com/ 7 | Template: genesis 8 | Tags: black, orange, white, one-column, two-columns, three-columns, left-sidebar, right-sidebar, responsive-layout, custom-menu, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready 9 | License: GPL-2.0+ 10 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 11 | */ 12 | 13 | --------------------------------------------------------------------------------