├── sass ├── partials │ ├── _home.scss │ ├── _custom.scss │ ├── _sidebar.scss │ ├── _widgets.scss │ ├── _footer-area.scss │ ├── _header.scss │ ├── _plugins.scss │ ├── _print.scss │ ├── _structure.scss │ ├── _variables.scss │ ├── _resets.scss │ ├── _content-area.scss │ ├── _common-classes.scss │ ├── _menu.scss │ └── _defaults.scss └── style.scss ├── package.json ├── README.md └── gulpfile.js /sass/partials/_home.scss: -------------------------------------------------------------------------------- 1 | /* Front Page 2 | -------------------------------------------------- */ 3 | -------------------------------------------------------------------------------- /sass/partials/_custom.scss: -------------------------------------------------------------------------------- 1 | /* Custom Styles 2 | -------------------------------------------------- */ 3 | -------------------------------------------------------------------------------- /sass/partials/_sidebar.scss: -------------------------------------------------------------------------------- 1 | /* Sidebar 2 | ------------------------------------------------ */ 3 | 4 | .sidebar { 5 | font-size: $sidebar--font-size; 6 | line-height: $line-height--medium; 7 | 8 | @media only screen and (min-width: $standard-screen-width) { 9 | float: right; 10 | width: 30%; 11 | } 12 | 13 | .sidebar-content & { 14 | 15 | @media only screen and (min-width: $standard-screen-width) { 16 | float: left; 17 | } 18 | } 19 | 20 | .widget { 21 | margin-bottom: 40px; 22 | } 23 | 24 | p { 25 | margin-bottom: 20px; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "genesis-sample-task-runner", 3 | "version": "1.0.0", 4 | "description": 5 | "Sass compiling, Auto prefixing, CSS minfification, automatic browser reloading and more using Gulp and BrowserSync", 6 | "main": "gulpfile.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "Sridhar Katakam", 11 | "license": "GPL-2.0", 12 | "browserslist": [ 13 | "> 1%", 14 | "ie >= 11", 15 | "last 1 Android versions", 16 | "last 1 ChromeAndroid versions", 17 | "last 2 Chrome versions", 18 | "last 2 Firefox versions", 19 | "last 2 Safari versions", 20 | "last 2 iOS versions", 21 | "last 2 Edge versions", 22 | "last 2 Opera versions" 23 | ], 24 | "devDependencies": { 25 | "browser-sync": "^2.24.4", 26 | "css-mqpacker": "^6.0.2", 27 | "gulp": "^3.9.1", 28 | "gulp-autoprefixer": "^5.0.0", 29 | "gulp-clean-css": "^3.9.4", 30 | "gulp-cssnano": "^2.1.3", 31 | "gulp-minify": "^2.1.0", 32 | "gulp-notify": "^3.2.0", 33 | "gulp-pixrem": "^1.0.0", 34 | "gulp-plumber": "^1.2.0", 35 | "gulp-postcss": "^7.0.1", 36 | "gulp-rename": "^1.2.3", 37 | "gulp-sass": "^4.0.1", 38 | "gulp-sourcemaps": "^2.6.4" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /sass/partials/_widgets.scss: -------------------------------------------------------------------------------- 1 | /* Widgets 2 | ------------------------------------------------------------ */ 3 | 4 | .widget { 5 | margin-bottom: 40px; 6 | 7 | p:last-child, 8 | ul > li:last-of-type { 9 | margin-bottom: 0; 10 | } 11 | 12 | ul > li { 13 | margin-bottom: 10px; 14 | } 15 | 16 | ul > li:last-of-type { 17 | padding-bottom: 0; 18 | } 19 | 20 | ol > li { 21 | padding-left: 20px; 22 | text-indent: -20px; 23 | list-style-position: inside; 24 | list-style-type: decimal; 25 | } 26 | 27 | li li { 28 | margin: 0 0 0 30px; 29 | padding: 0; 30 | border: 0; 31 | } 32 | } 33 | 34 | .widget_calendar { 35 | 36 | table { 37 | width: 100%; 38 | } 39 | 40 | td, 41 | th { 42 | text-align: center; 43 | } 44 | } 45 | 46 | /* Featured Content 47 | --------------------------------------------- */ 48 | 49 | .featured-content { 50 | 51 | .entry { 52 | margin-bottom: 20px; 53 | border-bottom: $border-width $border-style $border-color; 54 | } 55 | 56 | .entry:last-of-type { 57 | margin-bottom: 0; 58 | border-bottom: none; 59 | } 60 | 61 | .entry-image { 62 | width: 75px; 63 | height: 75px; 64 | } 65 | 66 | .entry-title { 67 | margin-top: 10px; 68 | margin-bottom: 5px; 69 | font-size: $featured-content__entry-title--font-size; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /sass/partials/_footer-area.scss: -------------------------------------------------------------------------------- 1 | /* Footer Widgets 2 | -------------------------------------------------- */ 3 | .footer-widgets { 4 | clear: both; 5 | padding: 60px 0; 6 | border-top: $border-width $border-style $border-color; 7 | background-color: $footer-widgets--background-color; 8 | font-size: $footer-widgets--font-size; 9 | 10 | .wrap { 11 | margin-right: auto; 12 | margin-left: auto; 13 | 14 | @media only screen and (min-width: $standard-screen-width) { 15 | max-width: 1140px; 16 | } 17 | } 18 | 19 | .widget:last-child { 20 | margin-bottom: 0; 21 | } 22 | } 23 | 24 | .footer-widget-area { 25 | margin-bottom: 40px; 26 | padding-right: 30px; 27 | padding-left: 30px; 28 | 29 | @media only screen and (min-width: $standard-screen-width) { 30 | float: left; 31 | width: 33.33%; /* fallback for older browsers */ 32 | width: calc(100% / 3); 33 | margin-bottom: 0; 34 | } 35 | 36 | &:last-child { 37 | margin-bottom: 0; 38 | } 39 | } 40 | 41 | /* Site Footer 42 | --------------------------------------------------- */ 43 | 44 | .site-footer { 45 | padding: 30px; 46 | border-top: $border-width $border-style $border-color; 47 | background-color: #fff; 48 | font-size: $site-footer--font-size; 49 | line-height: $line-height--medium; 50 | text-align: center; 51 | 52 | p { 53 | margin-bottom: 0; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /sass/partials/_header.scss: -------------------------------------------------------------------------------- 1 | /* Site Header 2 | ---------------------------------------------- */ 3 | 4 | .site-header { 5 | padding: 0 30px; 6 | background-color: $site-header--background-color; 7 | box-shadow: 0 0 $box-shadow-blur-radius rgba(0, 0, 0, $box-shadow-opacity); 8 | 9 | @media only screen and (min-width: $standard-screen-width) { 10 | position: fixed; 11 | z-index: 9999; 12 | width: 100%; 13 | } 14 | } 15 | 16 | /* Title Area 17 | --------------------------------------------- */ 18 | 19 | .title-area { 20 | float: left; 21 | padding-top: 25px; 22 | padding-bottom: 25px; 23 | 24 | .wp-custom-logo & { 25 | width: 100%; 26 | max-width: 350px; 27 | padding-top: 5px; 28 | padding-bottom: 5px; 29 | 30 | img { 31 | width: auto; 32 | } 33 | } 34 | } 35 | 36 | .site-title { 37 | margin-bottom: 0; 38 | font-size: $site-title--font-size; 39 | font-weight: $font-weight--semibold; 40 | line-height: $line-height--smaller; 41 | 42 | a, 43 | a:focus, 44 | a:hover { 45 | color: $site-title__link--font-color; 46 | text-decoration: none; 47 | } 48 | 49 | .wp-custom-logo & { 50 | overflow: hidden; 51 | clip: rect(0, 0, 0, 0); 52 | position: absolute !important; 53 | width: 1px; 54 | height: 1px; 55 | border: 0; 56 | word-wrap: normal !important; 57 | } 58 | } 59 | 60 | .site-description { 61 | overflow: hidden; 62 | clip: rect(0, 0, 0, 0); 63 | position: absolute !important; 64 | width: 1px; 65 | height: 1px; 66 | border: 0; 67 | word-wrap: normal !important; 68 | } 69 | -------------------------------------------------------------------------------- /sass/partials/_plugins.scss: -------------------------------------------------------------------------------- 1 | /* Plugins 2 | --------------------------------------------- */ 3 | 4 | /* Genesis eNews Extended 5 | --------------------------------------------- */ 6 | 7 | .enews { 8 | 9 | form + p { 10 | margin-top: 20px; 11 | } 12 | 13 | .after-entry & { 14 | padding: 10px; 15 | text-align: center; 16 | 17 | @media only screen and (min-width: $standard-screen-width) { 18 | padding-right: 30px; 19 | padding-left: 30px; 20 | } 21 | } 22 | 23 | .sidebar & { 24 | padding: 30px; 25 | background-color: $enews__sidebar--background-color; 26 | } 27 | } 28 | 29 | .enews-widget { 30 | 31 | input { 32 | margin-bottom: 10px; 33 | font-size: $enews-widget__input--font-size; 34 | } 35 | 36 | input[type="submit"] { 37 | width: 100%; 38 | margin: 0; 39 | } 40 | 41 | .after-entry & input { 42 | text-align: center; 43 | } 44 | } 45 | 46 | /* Genesis Simple FAQ 47 | --------------------------------------------- */ 48 | 49 | .gs-faq__question { 50 | padding-right: 0; 51 | padding-left: 0; 52 | border-bottom: $border-width $border-style $border-color; 53 | color: $gs-faq__question--font-color; 54 | background: transparent; 55 | 56 | &:focus, 57 | &:hover { 58 | color: $gs-faq__question--font-color-hover; 59 | background: transparent; 60 | } 61 | 62 | &:after { 63 | float: right; 64 | font-family: dashicons; 65 | content: "\f132"; 66 | } 67 | 68 | &.gs-faq--expanded:after { 69 | content: "\f460"; 70 | } 71 | } 72 | 73 | /* Jetpack 74 | --------------------------------------------- */ 75 | 76 | #wpstats { 77 | display: none; 78 | } 79 | -------------------------------------------------------------------------------- /sass/style.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | Theme Name: Genesis Sample 3 | Theme URI: https://demo.studiopress.com/ 4 | Description: This is the sample theme created for the Genesis Framework. 5 | Author: StudioPress 6 | Author URI: https://www.studiopress.com/ 7 | 8 | Version: 2.6.0 9 | 10 | Tags: one-column, two-columns, left-sidebar, right-sidebar, accessibility-ready, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready 11 | 12 | Template: genesis 13 | 14 | License: GPL-2.0+ 15 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 16 | 17 | Text Domain: genesis-sample 18 | */ 19 | 20 | /*! Table of Contents 21 | - HTML5 Reset 22 | - Baseline Normalize 23 | - Box Sizing 24 | - Float Clearing 25 | - Defaults 26 | - Typographical Elements 27 | - Headings 28 | - Objects 29 | - Gallery 30 | - Forms 31 | - Tables 32 | - Accessibility 33 | - Screen Reader Text 34 | - Skip Links 35 | - Structure and Layout 36 | - Site Container 37 | - Site Inner 38 | - Common Classes 39 | - Avatar 40 | - Genesis 41 | - Search Form 42 | - Titles 43 | - WordPress 44 | - Widgets 45 | - Featured Content 46 | - Plugins 47 | - Genesis eNews Extended 48 | - Genesis Simple FAQ 49 | - Jetpack 50 | - Site Header 51 | - Title Area 52 | - Site Navigation 53 | - Responsive Menu 54 | - Header Menu 55 | - Footer Menu 56 | - Content Area 57 | - Entry Content 58 | - Entry Meta 59 | - Pagination 60 | - Entry Comments 61 | - Sidebar 62 | - Footer Widgets 63 | - Site Footer 64 | - Custom Styles 65 | - Homepage Styles 66 | - Print Styles 67 | */ 68 | 69 | @import "partials/variables"; 70 | @import "partials/resets"; 71 | @import "partials/defaults"; 72 | @import "partials/structure"; 73 | @import "partials/common-classes"; 74 | @import "partials/widgets"; 75 | @import "partials/plugins"; 76 | @import "partials/header"; 77 | @import "partials/menu"; 78 | @import "partials/content-area"; 79 | @import "partials/sidebar"; 80 | @import "partials/footer-area"; 81 | @import "partials/custom"; 82 | @import "partials/home"; 83 | @import "partials/print"; 84 | -------------------------------------------------------------------------------- /sass/partials/_print.scss: -------------------------------------------------------------------------------- 1 | /* Print Styles 2 | --------------------------------------------------- */ 3 | 4 | @media print { 5 | 6 | *, 7 | *:before, 8 | *:after { 9 | color: #333 !important; 10 | background: transparent !important; 11 | box-shadow: none !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 | width: 100%; 94 | text-align: center; 95 | } 96 | 97 | .site-title > a { 98 | margin: 0; 99 | text-decoration: none; 100 | text-indent: 0; 101 | } 102 | 103 | .site-inner { 104 | position: relative; 105 | top: -100px; 106 | padding-top: 0; 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 | img { 126 | page-break-after: avoid; 127 | page-break-inside: avoid; 128 | } 129 | 130 | blockquote, 131 | pre, 132 | table { 133 | page-break-inside: avoid; 134 | } 135 | 136 | dl, 137 | ol, 138 | ul { 139 | page-break-before: avoid; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /sass/partials/_structure.scss: -------------------------------------------------------------------------------- 1 | /* Structure and Layout 2 | -------------------------------------- */ 3 | 4 | /* Site Container 5 | --------------------------------------------- */ 6 | 7 | .site-container { 8 | word-wrap: break-word; 9 | -webkit-animation: fadein 1s; 10 | animation: fadein 1s; 11 | 12 | & button:disabled, 13 | & button:disabled:hover, 14 | & input:disabled, 15 | & input:disabled:hover, 16 | & input[type="button"]:disabled, 17 | & input[type="button"]:disabled:hover, 18 | & input[type="reset"]:disabled, 19 | & input[type="reset"]:disabled:hover, 20 | & input[type="submit"]:disabled, 21 | & input[type="submit"]:disabled:hover { 22 | border-width: 0; 23 | color: $disabled--font-color; 24 | background-color: $disabled--background-color; 25 | cursor: not-allowed; 26 | } 27 | } 28 | 29 | @keyframes fadein { 30 | 31 | from { 32 | opacity: 0; 33 | } 34 | 35 | to { 36 | opacity: 1; 37 | } 38 | } 39 | 40 | @-webkit-keyframes fadein { 41 | 42 | from { 43 | opacity: 0; 44 | } 45 | 46 | to { 47 | opacity: 1; 48 | } 49 | } 50 | 51 | /* Site Inner 52 | --------------------------------------------- */ 53 | 54 | .site-inner { 55 | clear: both; 56 | margin: 0 auto; 57 | padding: 60px 30px 0; 58 | 59 | @media only screen and (min-width: $standard-screen-width) { 60 | max-width: 1140px; 61 | margin-top: 70px; 62 | } 63 | } 64 | 65 | /* Content 66 | --------------------------------------------- */ 67 | 68 | .content { 69 | 70 | @media only screen and (min-width: $standard-screen-width) { 71 | float: left; 72 | width: 65%; 73 | } 74 | } 75 | 76 | .sidebar-content .content { 77 | 78 | @media only screen and (min-width: $standard-screen-width) { 79 | float: right; 80 | } 81 | } 82 | 83 | .full-width-content .content, 84 | .landing-page .content { 85 | 86 | @media only screen and (min-width: $standard-screen-width) { 87 | float: none; 88 | margin-right: auto; 89 | margin-left: auto; 90 | } 91 | } 92 | 93 | @media only screen and (min-width: $standard-screen-width) { 94 | 95 | /* Column Classes 96 | --------------------------------------------- */ 97 | 98 | .five-sixths, 99 | .four-sixths, 100 | .one-fourth, 101 | .one-half, 102 | .one-sixth, 103 | .one-third, 104 | .three-fourths, 105 | .three-sixths, 106 | .two-fourths, 107 | .two-sixths, 108 | .two-thirds { 109 | float: left; 110 | margin-left: 2.564102564102564%; 111 | } 112 | 113 | .one-half, 114 | .three-sixths, 115 | .two-fourths { 116 | width: 48.717948717948715%; 117 | } 118 | 119 | .one-third, 120 | .two-sixths { 121 | width: 31.623931623931625%; 122 | } 123 | 124 | .four-sixths, 125 | .two-thirds { 126 | width: 65.81196581196582%; 127 | } 128 | 129 | .one-fourth { 130 | width: 23.076923076923077%; 131 | } 132 | 133 | .three-fourths { 134 | width: 74.35897435897436%; 135 | } 136 | 137 | .one-sixth { 138 | width: 14.52991452991453%; 139 | } 140 | 141 | .five-sixths { 142 | width: 82.90598290598291%; 143 | } 144 | 145 | .first { 146 | clear: both; 147 | margin-left: 0; 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Genesis Sample Task Runner 2 | 3 | This is a Gulp workflow for automating the following tasks: 4 | 5 | - Auto prefixing 6 | - Compiling Sass partials into style.css 7 | - Minifying unminified .js files and style.css 8 | - Automatic CSS injection and browser reloading for PHP & JS changes using BrowserSync 9 | - CSS optimization 10 | - Packing same CSS media query rules into one 11 | - Generating pixel fallbacks for rem units 12 | - Generating source maps so browser inspector (like Chrome DevTools) shows the partial .scss file(s) from where CSS rules are originating from 13 | 14 | for [Genesis Sample](https://github.com/copyblogger/genesis-sample), a child theme of the [Genesis](https://sridharkatakam.com/go/genesis) framework. 15 | 16 | ## How to use 17 | 18 | 0. Install WordPress on your localhost if you haven't already. I use [Laravel Valet](https://laravel.com/docs/5.6/valet). 19 | 20 | 1. Install [Node](https://nodejs.org/download/). 21 | 22 | 2. Install Gulp CLI globally by running `npm install gulp-cli -g` in the terminal. 23 | 24 | 3. Download this repo's content and place in your local site's project folder (Ex.: Genesis Sample theme directory). 25 | 26 | 4. Run `npm install`. 27 | 28 | 5. Change the values of `siteName` and `userName` in gulpfile.js. 29 | 30 | If your local site does not have a SSL, you can comment out the `userName` line and comment out/delete 31 | 32 | ``` 33 | https: { 34 | key: `/Users/${userName}/.valet/Certificates/${siteName}.key`, 35 | cert: `/Users/${userName}/.valet/Certificates/${siteName}.crt` 36 | } 37 | ``` 38 | 39 | If it does, adjust the path to your local SSL certificate's key and crt files. 40 | 41 | 6. Run `gulp`. 42 | 43 | 7. You might want to load the minified versions of `genesis-sample.js` and `style.css` on the production site before going live. 44 | 45 | For this, edit `functions.php` and 46 | 47 | a) replace 48 | 49 | ``` 50 | wp_enqueue_script( 51 | 'genesis-sample', 52 | get_stylesheet_directory_uri() . '/js/genesis-sample.js', 53 | array( 'jquery' ), 54 | CHILD_THEME_VERSION, 55 | true 56 | ); 57 | ``` 58 | 59 | with 60 | 61 | ``` 62 | wp_enqueue_script( 63 | 'genesis-sample', 64 | get_stylesheet_directory_uri() . "/js/genesis-sample{$suffix}.js", 65 | array( 'jquery' ), 66 | CHILD_THEME_VERSION, 67 | true 68 | ); 69 | ``` 70 | 71 | b) at the end, add 72 | 73 | ``` 74 | add_filter( 'stylesheet_uri', 'genesis_sample_stylesheet_uri', 10, 2 ); 75 | /** 76 | * Loads minified version of style.css. 77 | * 78 | * @param string $stylesheet_uri Original stylesheet URI. 79 | * @param string $stylesheet_dir_uri Stylesheet directory. 80 | * @return string (Maybe modified) stylesheet URI. 81 | */ 82 | function genesis_sample_stylesheet_uri( $stylesheet_uri, $stylesheet_dir_uri ) { 83 | 84 | return trailingslashit( $stylesheet_dir_uri ) . 'style.min.css'; 85 | 86 | } 87 | ``` 88 | 89 | Note: You will not be able to use the source maps when style.min.css is loading. Therefore add the above code after you are done with your development. 90 | 91 | ## Credit 92 | 93 | Thanks to Christoph Herr for his [Prometheus](https://github.com/christophherr/prometheus) theme. 94 | -------------------------------------------------------------------------------- /sass/partials/_variables.scss: -------------------------------------------------------------------------------- 1 | // Base Colors 2 | $black: #000; 3 | $dark-grey: #333; 4 | $mid-grey: #777; 5 | $light-grey: #ddd; 6 | $blue: #0073e5; 7 | $lighter-grey: #eee; 8 | $lightest-grey: #f5f5f5; 9 | $white: #fff; 10 | 11 | // Base Fonts 12 | $base-font: "Source Sans Pro", sans-serif; 13 | 14 | // Screen widths, Media queries - WC widths in WC variables 15 | $standard-screen-width: 960px; 16 | 17 | // Border styles 18 | $border-width: 1px; 19 | $border-style: solid; 20 | $border-color: $lighter-grey; 21 | 22 | // Box Shadow 23 | $box-shadow-blur-radius: 20px; 24 | $box-shadow-opacity: 0.05; 25 | 26 | // Font sizes 27 | $body--font-size: 1.8rem; 28 | $h1--font-size: 3rem; 29 | $h2--font-size: 2.7rem; 30 | $h3--font-size: 2.4rem; 31 | $h4--font-size: 2rem; 32 | $h5--font-size: 1.8rem; 33 | $h6--font-size: 1.6rem; 34 | $button--font-size: 1.6rem; 35 | $archive-author-box__entry-title--font-size: 2rem; 36 | $breadcrumb--font-size: 1.6rem; 37 | $entry-title--font-size: 3rem; 38 | $featured-content__entry-title--font-size: 1.6rem; 39 | $enews-widget__input--font-size: 1.6rem; 40 | $site-title--font-size: 2rem; 41 | $genesis-nav-menu--font-size: 1.5rem; 42 | $genesis-nav-menu__sub-menu__link--font-size: 1.4rem; 43 | $sidebar--font-size: 1.6rem; 44 | $entry-content__caption--font-size: 1.4rem; 45 | $entry-meta--font-size: 1.6rem; 46 | $comments--font-size: 1.8rem; 47 | $footer-widgets--font-size: 1.8rem; 48 | $site-footer--font-size: 1.5rem; 49 | $forms--font-size: 1.8rem; 50 | $widget-title--font-size: 1.8rem; 51 | $archive-pagination--font-size: 1.6rem; 52 | $blockquote__before--font-size: 3rem; 53 | $after-entry__breadcrumb--font-size: 1.6rem; 54 | 55 | // Font families 56 | $body--font-family: $base-font; 57 | $headings--font-family: $base-font; 58 | 59 | // Font weights 60 | $font-weight--regular: 400; 61 | $font-weight--semibold: 600; 62 | $font-weight--bold: 700; 63 | 64 | // Line heights 65 | $line-height--big: 20px; 66 | $line-height--large: 1.75; 67 | $line-height--normal: 1.625; 68 | $line-height--medium: 1.5; 69 | $line-height--medium-small: 1.4; 70 | $line-height--small: 1.2; 71 | $line-height--smaller: 1; 72 | 73 | // Font colors 74 | $body--font-color: $dark-grey; 75 | $link--font-color: $blue; 76 | $link--font-color-hover: $dark-grey; 77 | $button--font-color: $white; 78 | $button--font-color-hover: $white; 79 | $entry-title__link--font-color: $dark-grey; 80 | $entry-title__link--font-color-hover: $blue; 81 | $site-title__link--font-color: $dark-grey; 82 | $genesis-nav-menu--font-color: $dark-grey; 83 | $genesis-nav-menu--font-color-hover: $blue; 84 | $menu-toggle--font-color: $dark-grey; 85 | $menu-toggle--font-color-hover: $blue; 86 | $sub-menu-toggle--font-color: $dark-grey; 87 | $sub-menu-toggle--font-color-hover: $blue; 88 | $menu-highlight__link--font-color: $white; 89 | $sidebar__widget-title--font-color: $dark-grey; 90 | $forms--font-color: $dark-grey; 91 | $archive-pagination--font-color: $dark-grey; 92 | $archive-pagination--font-color-hover: $white; 93 | $gs-faq__question--font-color: $dark-grey; 94 | $gs-faq__question--font-color-hover: $blue; 95 | $disabled--font-color: $mid-grey; 96 | 97 | // Background colors 98 | $body--background-color: $white; 99 | $site-header--background-color: $white; 100 | $mark--background-color: $light-grey; 101 | $button--background-color: $dark-grey; 102 | $button--background-color-hover: $blue; 103 | $genesis-nav-menu__sub-menu__link--background-color: $white; 104 | $footer-widgets--background-color: $white; 105 | $menu-highlight__link--background-color: $dark-grey; 106 | $menu-highlight__link--background-color-hover: $blue; 107 | $forms__background-color: $white; 108 | $sticky--background-color: $lightest-grey; 109 | $author-box--background-color: $lightest-grey; 110 | $code--background-color: $lightest-grey; 111 | $archive-pagination--background-color: $lightest-grey; 112 | $archive-pagination--background-color-hover: $dark-grey; 113 | $enews__sidebar--background-color: $lightest-grey; 114 | $disabled--background-color: $lighter-grey; 115 | -------------------------------------------------------------------------------- /sass/partials/_resets.scss: -------------------------------------------------------------------------------- 1 | /* HTML5 Reset 2 | --------------------------------------------- */ 3 | 4 | /* Baseline Normalize 5 | --------------------------------------------- */ 6 | 7 | /* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ 8 | button, 9 | hr, 10 | input { 11 | overflow: visible; 12 | } 13 | 14 | progress, 15 | sub, 16 | sup { 17 | vertical-align: baseline; 18 | } 19 | 20 | [type="checkbox"], 21 | [type="radio"], 22 | legend { 23 | box-sizing: border-box; 24 | padding: 0; 25 | } 26 | 27 | html { 28 | line-height: 1.15; 29 | -webkit-text-size-adjust: 100%; 30 | } 31 | 32 | body { 33 | margin: 0; 34 | } 35 | 36 | h1 { 37 | margin: 0.67em 0; 38 | font-size: 2em; 39 | } 40 | 41 | hr { 42 | box-sizing: content-box; 43 | height: 0; 44 | } 45 | 46 | code, 47 | kbd, 48 | pre, 49 | samp { 50 | font-family: monospace; 51 | font-size: 1em; 52 | } 53 | 54 | a { 55 | background-color: transparent; 56 | } 57 | 58 | abbr[title] { 59 | border-bottom: none; 60 | text-decoration: underline; 61 | text-decoration: underline dotted; 62 | } 63 | 64 | b, 65 | strong { 66 | font-weight: bolder; 67 | } 68 | 69 | small { 70 | font-size: 80%; 71 | } 72 | 73 | sub, 74 | sup { 75 | position: relative; 76 | font-size: 75%; 77 | line-height: 0; 78 | } 79 | 80 | sub { 81 | bottom: -0.25em; 82 | } 83 | 84 | sup { 85 | top: -0.5em; 86 | } 87 | 88 | img { 89 | border-style: none; 90 | } 91 | 92 | button, 93 | input, 94 | optgroup, 95 | select, 96 | textarea { 97 | margin: 0; 98 | font-family: inherit; 99 | font-size: 100%; 100 | line-height: 1.15; 101 | } 102 | 103 | button, 104 | select { 105 | text-transform: none; 106 | } 107 | 108 | [type="button"], 109 | [type="reset"], 110 | [type="submit"], 111 | button { 112 | -webkit-appearance: button; 113 | } 114 | 115 | [type="button"]::-moz-focus-inner, 116 | [type="reset"]::-moz-focus-inner, 117 | [type="submit"]::-moz-focus-inner, 118 | button::-moz-focus-inner { 119 | padding: 0; 120 | border-style: none; 121 | } 122 | 123 | [type="button"]:-moz-focusring, 124 | [type="reset"]:-moz-focusring, 125 | [type="submit"]:-moz-focusring, 126 | button:-moz-focusring { 127 | outline: ButtonText dotted 1px; 128 | } 129 | 130 | fieldset { 131 | padding: 0.35em 0.75em 0.625em; 132 | } 133 | 134 | legend { 135 | display: table; 136 | max-width: 100%; 137 | color: inherit; 138 | white-space: normal; 139 | } 140 | 141 | textarea { 142 | overflow: auto; 143 | } 144 | 145 | [type="number"]::-webkit-inner-spin-button, 146 | [type="number"]::-webkit-outer-spin-button { 147 | height: auto; 148 | } 149 | 150 | [type="search"] { 151 | -webkit-appearance: textfield; 152 | outline-offset: -2px; 153 | } 154 | 155 | [type="search"]::-webkit-search-decoration { 156 | -webkit-appearance: none; 157 | } 158 | 159 | ::-webkit-file-upload-button { 160 | -webkit-appearance: button; 161 | font: inherit; 162 | } 163 | 164 | details { 165 | display: block; 166 | } 167 | 168 | summary { 169 | display: list-item; 170 | } 171 | 172 | [hidden], 173 | template { 174 | display: none; 175 | } 176 | 177 | /* Box Sizing 178 | --------------------------------------------- */ 179 | 180 | html { 181 | box-sizing: border-box; 182 | } 183 | 184 | *, 185 | *:before, 186 | *:after { 187 | box-sizing: inherit; 188 | } 189 | 190 | /* Float Clearing 191 | --------------------------------------------- */ 192 | 193 | .author-box:before, 194 | .clearfix:before, 195 | .entry:before, 196 | .entry-content:before, 197 | .footer-widgets:before, 198 | .nav-primary:before, 199 | .nav-secondary:before, 200 | .pagination:before, 201 | .site-container:before, 202 | .site-footer:before, 203 | .site-header:before, 204 | .site-inner:before, 205 | .widget:before, 206 | .wrap:before { 207 | display: table; 208 | content: " "; 209 | } 210 | 211 | .author-box:after, 212 | .clearfix:after, 213 | .entry:after, 214 | .entry-content:after, 215 | .footer-widgets:after, 216 | .nav-primary:after, 217 | .nav-secondary:after, 218 | .pagination:after, 219 | .site-container:after, 220 | .site-footer:after, 221 | .site-header:after, 222 | .site-inner:after, 223 | .widget:after, 224 | .wrap:after { 225 | display: table; 226 | clear: both; 227 | content: " "; 228 | } 229 | -------------------------------------------------------------------------------- /sass/partials/_content-area.scss: -------------------------------------------------------------------------------- 1 | /* Content Area 2 | --------------------------------------------- */ 3 | 4 | /* Entry Content 5 | --------------------------------------------- */ 6 | 7 | .entry { 8 | margin-bottom: 40px; 9 | 10 | @media only screen and (min-width: $standard-screen-width) { 11 | margin-bottom: 60px; 12 | } 13 | } 14 | 15 | .entry-content { 16 | 17 | p { 18 | 19 | &.has-background { 20 | padding: 25px 30px; 21 | 22 | &.box-shadow { 23 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); 24 | } 25 | 26 | &.light-text { 27 | 28 | a { 29 | color: #fff; 30 | text-decoration: underline; 31 | } 32 | 33 | a:focus, 34 | a:hover { 35 | text-decoration: none; 36 | } 37 | } 38 | } 39 | } 40 | 41 | ol, 42 | ul { 43 | margin-bottom: 30px; 44 | margin-left: 40px; 45 | } 46 | 47 | ol > li { 48 | list-style-type: decimal; 49 | } 50 | 51 | ul > li { 52 | list-style-type: disc; 53 | } 54 | 55 | ol ol, 56 | ul ul { 57 | margin-bottom: 0; 58 | } 59 | 60 | code { 61 | background-color: $code--background-color; 62 | } 63 | 64 | .caption { 65 | margin-top: -20px; 66 | font-size: $entry-content__caption--font-size; 67 | font-weight: $font-weight--semibold; 68 | text-align: center; 69 | } 70 | } 71 | 72 | .content .sticky { 73 | padding: 30px; 74 | background-color: $sticky--background-color; 75 | } 76 | 77 | /* Entry Meta 78 | --------------------------------------------- */ 79 | 80 | .entry-meta { 81 | 82 | p { 83 | margin-bottom: 0; 84 | font-size: $entry-meta--font-size; 85 | } 86 | 87 | .entry-header & { 88 | margin-bottom: 20px; 89 | } 90 | 91 | .entry-footer & { 92 | padding-top: 20px; 93 | border-top: $border-width $border-style $border-color; 94 | } 95 | } 96 | 97 | .entry-categories, 98 | .entry-tags { 99 | display: block; 100 | } 101 | 102 | .entry-comments-link:before { 103 | margin: 0 6px 0 2px; 104 | content: "\2014"; 105 | } 106 | 107 | /* Pagination 108 | --------------------------------------------- */ 109 | 110 | .pagination { 111 | clear: both; 112 | margin: 60px 0; 113 | } 114 | 115 | .adjacent-entry-pagination { 116 | margin-bottom: 0; 117 | } 118 | 119 | .archive-pagination { 120 | 121 | li { 122 | display: inline; 123 | } 124 | 125 | li a { 126 | display: inline-block; 127 | margin-bottom: 4px; 128 | padding: 8px 12px; 129 | color: $archive-pagination--font-color; 130 | background-color: $archive-pagination--background-color; 131 | font-size: $archive-pagination--font-size; 132 | font-weight: $font-weight--semibold; 133 | text-decoration: none; 134 | cursor: pointer; 135 | } 136 | 137 | li a:focus, 138 | li a:hover, 139 | li.active a { 140 | color: $archive-pagination--font-color-hover; 141 | background-color: $archive-pagination--background-color-hover; 142 | } 143 | } 144 | 145 | /* Entry Comments 146 | --------------------------------------------- */ 147 | 148 | .entry-comments { 149 | margin-bottom: 40px; 150 | font-size: $comments--font-size; 151 | 152 | @media only screen and (min-width: $standard-screen-width) { 153 | margin-bottom: 60px; 154 | } 155 | } 156 | 157 | .comment-list { 158 | 159 | li { 160 | padding: 40px 0 0 30px; 161 | } 162 | 163 | .depth-1 { 164 | padding-left: 0; 165 | } 166 | 167 | .bypostauthor { 168 | font-size: inherit; 169 | } 170 | } 171 | 172 | .comment-header { 173 | margin-bottom: 30px; 174 | } 175 | 176 | .comment-content { 177 | clear: both; 178 | 179 | ul > li { 180 | list-style-type: disc; 181 | } 182 | } 183 | 184 | .comment-respond { 185 | margin-bottom: 40px; 186 | font-size: $comments--font-size; 187 | 188 | @media only screen and (min-width: $standard-screen-width) { 189 | margin-bottom: 60px; 190 | } 191 | 192 | input[type="email"], 193 | input[type="text"], 194 | input[type="url"] { 195 | width: 50%; 196 | } 197 | 198 | label { 199 | display: block; 200 | margin-right: 12px; 201 | } 202 | } 203 | 204 | .comment-header p { 205 | margin-bottom: 0; 206 | } 207 | 208 | .entry-pings { 209 | margin-bottom: 40px; 210 | font-size: $comments--font-size; 211 | 212 | @media only screen and (min-width: $standard-screen-width) { 213 | margin-bottom: 60px; 214 | } 215 | 216 | .reply { 217 | display: none; 218 | } 219 | } 220 | -------------------------------------------------------------------------------- /sass/partials/_common-classes.scss: -------------------------------------------------------------------------------- 1 | /* Common Classes 2 | ---------------------------------------*/ 3 | 4 | /* Avatar 5 | --------------------------------------------- */ 6 | 7 | .avatar { 8 | float: left; 9 | border-radius: 50%; 10 | 11 | .author-box &, 12 | .alignleft & { 13 | margin-right: 20px; 14 | } 15 | 16 | .alignright & { 17 | margin-left: 20px; 18 | } 19 | 20 | .comment & { 21 | margin: 0 15px 20px 0; 22 | } 23 | } 24 | 25 | /* Genesis 26 | --------------------------------------------- */ 27 | 28 | .after-entry { 29 | margin-bottom: 40px; 30 | padding: 20px 30px; 31 | box-shadow: 0 0 $box-shadow-blur-radius rgba(0, 0, 0, $box-shadow-opacity); 32 | 33 | @media only screen and (min-width: $standard-screen-width) { 34 | margin-bottom: 60px; 35 | padding: 40px 60px; 36 | } 37 | 38 | .widget:last-of-type { 39 | margin-bottom: 0; 40 | } 41 | } 42 | 43 | .breadcrumb { 44 | margin-bottom: 40px; 45 | padding-bottom: 10px; 46 | border-bottom: $border-width $border-style $border-color; 47 | font-size: $breadcrumb--font-size; 48 | } 49 | 50 | .archive-description { 51 | margin-bottom: 40px; 52 | 53 | @media only screen and (min-width: $standard-screen-width) { 54 | margin-bottom: 60px; 55 | } 56 | 57 | p:last-child { 58 | margin-bottom: 0; 59 | } 60 | 61 | .entry-title { 62 | margin-bottom: 10px; 63 | font-size: $archive-author-box__entry-title--font-size; 64 | font-weight: $font-weight--semibold; 65 | } 66 | } 67 | 68 | .author-box { 69 | margin-bottom: 40px; 70 | 71 | @media only screen and (min-width: $standard-screen-width) { 72 | margin-bottom: 60px; 73 | padding: 30px; 74 | background-color: $author-box--background-color; 75 | } 76 | 77 | p:last-child { 78 | margin-bottom: 0; 79 | } 80 | } 81 | 82 | /* Search Form 83 | --------------------------------------------- */ 84 | 85 | .search-form { 86 | overflow: hidden; 87 | } 88 | 89 | .entry-content .search-form { 90 | width: 50%; 91 | margin-bottom: 40px; 92 | } 93 | 94 | .post-password-form input[type="submit"], 95 | .search-form input[type="submit"] { 96 | margin-top: 10px; 97 | } 98 | 99 | .widget_search input[type="submit"] { 100 | clip: rect(0, 0, 0, 0); 101 | position: absolute; 102 | width: 1px; 103 | height: 1px; 104 | margin: -1px; 105 | padding: 0; 106 | border: 0; 107 | } 108 | 109 | /* Titles 110 | --------------------------------------------- */ 111 | 112 | .archive-title, 113 | .author-box-title { 114 | margin-bottom: 10px; 115 | font-size: $archive-author-box__entry-title--font-size; 116 | font-weight: $font-weight--semibold; 117 | } 118 | 119 | .entry-title { 120 | margin-bottom: 10px; 121 | font-size: $entry-title--font-size; 122 | 123 | a { 124 | color: $entry-title__link--font-color; 125 | text-decoration: none; 126 | } 127 | 128 | a:focus, 129 | a:hover { 130 | color: $entry-title__link--font-color-hover; 131 | } 132 | } 133 | 134 | .sidebar .widget-title a { 135 | color: $sidebar__widget-title--font-color; 136 | text-decoration: none; 137 | } 138 | 139 | .widget-title { 140 | margin-bottom: 20px; 141 | font-size: $widget-title--font-size; 142 | font-weight: $font-weight--semibold; 143 | } 144 | 145 | /* WordPress 146 | --------------------------------------------- */ 147 | 148 | a.aligncenter img { 149 | display: block; 150 | margin: 0 auto; 151 | } 152 | 153 | a.alignnone { 154 | display: inline-block; 155 | } 156 | 157 | .alignleft { 158 | float: left; 159 | text-align: left; 160 | } 161 | 162 | .alignright { 163 | float: right; 164 | text-align: right; 165 | } 166 | 167 | a.alignleft, 168 | a.alignnone, 169 | a.alignright { 170 | max-width: 100%; 171 | } 172 | 173 | img.centered, 174 | .aligncenter { 175 | display: block; 176 | margin: 0 auto 30px; 177 | } 178 | 179 | img.alignnone, 180 | .alignnone { 181 | margin-bottom: 15px; 182 | } 183 | 184 | a.alignleft, 185 | img.alignleft, 186 | .wp-caption.alignleft { 187 | margin: 0 20px 20px 0; 188 | } 189 | 190 | a.alignright, 191 | img.alignright, 192 | .wp-caption.alignright { 193 | margin: 0 0 20px 20px; 194 | } 195 | 196 | .gallery-caption, 197 | .wp-caption-text { 198 | margin: 0; 199 | font-size: $entry-content__caption--font-size; 200 | font-weight: $font-weight--semibold; 201 | text-align: center; 202 | } 203 | 204 | .entry-content p.wp-caption-text { 205 | margin-bottom: 0; 206 | } 207 | 208 | .entry-content .wp-audio-shortcode, 209 | .entry-content .wp-playlist, 210 | .entry-content .wp-video { 211 | margin: 0 0 30px; 212 | } 213 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Genesis Sample Sass Workflow. 3 | * 4 | * This file adds Gulp tasks to the theme. 5 | * 6 | * @author Sridhar Katakam 7 | */ 8 | 9 | // Require our dependencies. 10 | const autoprefixer = require('autoprefixer'); 11 | const browserSync = require('browser-sync').create(); 12 | const cleancss = require('gulp-clean-css'); 13 | const cssnano = require('gulp-cssnano'); 14 | const gulp = require('gulp'); 15 | const minify = require('gulp-minify'); 16 | const mqpacker = require('css-mqpacker'); 17 | const notify = require('gulp-notify'); 18 | const pixrem = require('gulp-pixrem'); 19 | const plumber = require('gulp-plumber'); 20 | const postcss = require('gulp-postcss'); 21 | const rename = require('gulp-rename'); 22 | const sass = require('gulp-sass'); 23 | const sourcemaps = require('gulp-sourcemaps'); 24 | 25 | // Project specific variables - CHANGE THESE 26 | const siteName = 'genesis-sample.test'; // set your siteName here 27 | const userName = 'sridharkatakam'; // set your Mac OS userName here 28 | 29 | /** 30 | * Error handling 31 | * 32 | * @function 33 | */ 34 | function handleErrors() { 35 | const args = Array.prototype.slice.call(arguments); 36 | 37 | notify 38 | .onError({ 39 | title: 'Task Failed [<%= error.message %>]', 40 | message: 41 | '<%= error %> - See console or enable logging in the plugin.' 42 | }) 43 | .apply(this, args); 44 | 45 | // Prevent the 'watch' task from stopping 46 | this.emit('end'); 47 | } 48 | 49 | /************* 50 | * CSS Tasks 51 | ************/ 52 | 53 | /** 54 | * PostCSS Task Handler 55 | */ 56 | gulp.task('postcss', () => { 57 | gulp 58 | .src('./sass/style.scss') 59 | 60 | // Error handling. 61 | .pipe( 62 | plumber({ 63 | errorHandler: handleErrors 64 | }) 65 | ) 66 | 67 | // Wrap tasks in a sourcemap. 68 | .pipe(sourcemaps.init()) 69 | 70 | // Sass magic. 71 | .pipe( 72 | sass({ 73 | errLogToConsole: true, 74 | outputStyle: 'expanded' // Options: nested, expanded, compact, compressed 75 | }) 76 | ) 77 | 78 | // Pixel fallbacks for rem units. 79 | .pipe(pixrem()) 80 | 81 | // PostCSS magic. 82 | .pipe( 83 | postcss([ 84 | autoprefixer(), 85 | mqpacker({ 86 | sort: true 87 | }) 88 | ]) 89 | ) 90 | 91 | // Create the source map. 92 | .pipe( 93 | sourcemaps.write('./', { 94 | includeContent: false 95 | }) 96 | ) 97 | 98 | // Write the CSS file. 99 | .pipe(gulp.dest('./')) 100 | 101 | // Inject CSS into Browser. 102 | .pipe(browserSync.stream()); 103 | }); 104 | 105 | /** 106 | * Minify style.css 107 | */ 108 | gulp.task('css:minify', ['postcss'], () => { 109 | gulp 110 | .src('./style.css') 111 | 112 | // Error handling. 113 | .pipe( 114 | plumber({ 115 | errorHandler: handleErrors 116 | }) 117 | ) 118 | 119 | // Combine similar rules. 120 | .pipe( 121 | cleancss({ 122 | level: { 123 | 2: { 124 | all: true 125 | } 126 | } 127 | }) 128 | ) 129 | 130 | // Minify and optimize style.css. 131 | .pipe( 132 | cssnano({ 133 | safe: false, 134 | discardComments: { 135 | removeAll: true 136 | } 137 | }) 138 | ) 139 | 140 | // Rename the file. 141 | .pipe(rename('style.min.css')) 142 | 143 | // Write the file. 144 | .pipe(gulp.dest('./')) 145 | 146 | // Inject the CSS into the browser. 147 | .pipe(browserSync.stream()) 148 | 149 | .pipe( 150 | notify({ 151 | message: 'Styles are built.' 152 | }) 153 | ); 154 | }); 155 | 156 | /******************* 157 | * JavaScript Tasks 158 | *******************/ 159 | 160 | /** 161 | * JavaScript Task Handler. 162 | */ 163 | gulp.task('js', () => { 164 | gulp 165 | .src(['!./js/*.min.js', './js/*.js']) 166 | 167 | // Error handling. 168 | .pipe( 169 | plumber({ 170 | errorHandler: handleErrors 171 | }) 172 | ) 173 | 174 | // Minify JavaScript. 175 | .pipe( 176 | minify({ 177 | ext: { 178 | src: '.js', 179 | min: '.min.js' 180 | }, 181 | noSource: true 182 | }) 183 | ) 184 | .pipe(gulp.dest('js')) 185 | 186 | // Inject changes via browserSync. 187 | .pipe( 188 | browserSync.reload({ 189 | stream: true 190 | }) 191 | ) 192 | 193 | .pipe( 194 | notify({ 195 | message: 'Scripts are minified.' 196 | }) 197 | ); 198 | }); 199 | 200 | /********************** 201 | * All Tasks Listeners 202 | *********************/ 203 | 204 | /** 205 | * Reload browser for PHP & JS file changes and inject CSS changes. 206 | * 207 | * https://browsersync.io/docs/gulp 208 | */ 209 | gulp.task('watch', () => { 210 | browserSync.init({ 211 | proxy: `https://${siteName}`, 212 | host: siteName, 213 | open: 'external', 214 | port: 8000, 215 | https: { 216 | key: `/Users/${userName}/.valet/Certificates/${siteName}.key`, 217 | cert: `/Users/${userName}/.valet/Certificates/${siteName}.crt` 218 | } 219 | }); 220 | 221 | // Watch Scss files. Changes are injected into the browser from within the task. 222 | gulp.watch('./sass/**/*.scss', ['styles']); 223 | 224 | // Watch JavaScript Files. The task tries to inject changes into the browser. If that's not possible, it reloads the browser. 225 | gulp.watch(['./js/*.js', '!./js/*.min.js'], ['scripts']); 226 | 227 | // Watch PHP files and reload the browser if there is a change. Add directories if needed. 228 | gulp 229 | .watch([ 230 | './*.php', 231 | './lib/*.php', 232 | './lib/**/*.php' 233 | ]) 234 | .on('change', browserSync.reload); 235 | }); 236 | 237 | /******************** 238 | * Individual tasks. 239 | *******************/ 240 | gulp.task('styles', ['css:minify']); 241 | gulp.task('scripts', ['js']); 242 | 243 | gulp.task('default', ['watch'], () => { 244 | gulp.start('styles', 'scripts'); 245 | }); 246 | -------------------------------------------------------------------------------- /sass/partials/_menu.scss: -------------------------------------------------------------------------------- 1 | /* Site Navigation 2 | --------------------------------------------------- */ 3 | 4 | .genesis-nav-menu { 5 | clear: both; 6 | width: 100%; 7 | line-height: 1; 8 | 9 | .menu-item { 10 | display: block; 11 | float: none; 12 | position: relative; 13 | 14 | @media only screen and (min-width: $standard-screen-width) { 15 | display: inline-block; 16 | } 17 | } 18 | 19 | .menu-item:focus, 20 | .menu-item:hover { 21 | position: relative; 22 | } 23 | 24 | @media only screen and (min-width: $standard-screen-width) { 25 | 26 | .menu-item:focus .sub-menu:focus, 27 | .menu-item:hover .sub-menu:hover { 28 | z-index: 100; 29 | } 30 | } 31 | 32 | .menu-item:focus > .sub-menu, 33 | .menu-item:hover > .sub-menu { 34 | display: block; 35 | left: auto; 36 | opacity: 1; 37 | } 38 | 39 | > .menu-bold > a { 40 | 41 | @media only screen and (min-width: $standard-screen-width) { 42 | font-weight: $font-weight--bold; 43 | } 44 | } 45 | 46 | > .menu-highlight > a { 47 | 48 | @media only screen and (min-width: $standard-screen-width) { 49 | margin-left: 15px; 50 | padding-right: 20px; 51 | padding-left: 20px; 52 | border-radius: 3px; 53 | color: $menu-highlight__link--font-color; 54 | background-color: $menu-highlight__link--background-color; 55 | font-weight: $font-weight--semibold; 56 | } 57 | } 58 | 59 | > .menu-highlight > a:focus, 60 | > .menu-highlight > a:hover { 61 | 62 | @media only screen and (min-width: $standard-screen-width) { 63 | background-color: $menu-highlight__link--background-color-hover; 64 | } 65 | } 66 | 67 | a { 68 | display: block; 69 | padding-top: 12px; 70 | padding-bottom: 12px; 71 | outline-offset: -1px; 72 | color: $genesis-nav-menu--font-color; 73 | font-size: $genesis-nav-menu--font-size; 74 | font-weight: $font-weight--regular; 75 | text-decoration: none; 76 | } 77 | 78 | a:focus, 79 | a:hover, 80 | .current-menu-item > a, 81 | .sub-menu .current-menu-item > a:focus, 82 | .sub-menu .current-menu-item > a:hover { 83 | color: $genesis-nav-menu--font-color-hover; 84 | text-decoration: none; 85 | } 86 | 87 | .sub-menu { 88 | display: block; 89 | clear: both; 90 | position: static; 91 | z-index: 99; 92 | width: 100%; 93 | margin: 0; 94 | padding-left: 15px; 95 | opacity: 1; 96 | 97 | @media only screen and (min-width: $standard-screen-width) { 98 | position: absolute; 99 | width: 180px; 100 | padding-left: 0; 101 | border-top: $border-width $border-style $border-color; 102 | opacity: 0; 103 | transition: opacity 0.4s ease-in-out; 104 | } 105 | 106 | a { 107 | position: relative; 108 | width: 100%; 109 | background-color: $genesis-nav-menu__sub-menu__link--background-color; 110 | font-size: $genesis-nav-menu__sub-menu__link--font-size; 111 | word-wrap: break-word; 112 | 113 | @media only screen and (min-width: $standard-screen-width) { 114 | width: 180px; 115 | padding-top: 15px; 116 | padding-bottom: 15px; 117 | border: $border-width $border-style $border-color; 118 | border-top: 0; 119 | } 120 | } 121 | 122 | .sub-menu { 123 | 124 | @media only screen and (min-width: $standard-screen-width) { 125 | margin: -46px 0 0 179px; 126 | } 127 | } 128 | } 129 | 130 | .sub-menu:focus-within { 131 | opacity: 1; 132 | } 133 | } 134 | 135 | /* Avoid flash of desktop menu on mobile devices. 136 | ----------------------------------------------*/ 137 | .js nav { 138 | display: none; 139 | position: relative; 140 | 141 | @media only screen and (min-width: $standard-screen-width) { 142 | display: block; 143 | } 144 | } 145 | 146 | /* Responsive Menu 147 | --------------------------------------------- */ 148 | 149 | .menu { 150 | 151 | .menu-item:focus { 152 | position: static; 153 | } 154 | 155 | .menu-item > a:focus + ul.sub-menu, 156 | .menu-item.sfHover > ul.sub-menu { 157 | left: auto; 158 | opacity: 1; 159 | } 160 | } 161 | 162 | .genesis-responsive-menu { 163 | display: none; 164 | position: relative; 165 | padding-bottom: 15px; 166 | 167 | @media only screen and (min-width: $standard-screen-width) { 168 | display: block; 169 | } 170 | 171 | .genesis-nav-menu { 172 | 173 | .menu-item:hover > .sub-menu, 174 | .menu-item:focus > .sub-menu { 175 | display: none; 176 | } 177 | 178 | .sub-menu { 179 | display: none; 180 | clear: both; 181 | position: static; 182 | z-index: 99; 183 | left: -9999px; 184 | width: 100%; 185 | margin: 0; 186 | padding-left: 15px; 187 | opacity: 1; 188 | 189 | @media only screen and (min-width: $standard-screen-width) { 190 | position: absolute; 191 | width: 180px; 192 | padding-left: 0; 193 | border-top: $border-width $border-style $border-color; 194 | opacity: 0; 195 | transition: opacity 0.4s ease-in-out; 196 | } 197 | } 198 | } 199 | } 200 | 201 | .menu-toggle { 202 | display: block; 203 | visibility: visible; 204 | float: right; 205 | overflow: hidden; 206 | position: relative; 207 | z-index: 1000; 208 | margin: 0 auto; 209 | margin-top: 10px; 210 | margin-bottom: 10px; 211 | padding: 15px 0; 212 | border-width: 0; 213 | color: $menu-toggle--font-color; 214 | background-color: transparent; 215 | line-height: $line-height--big; 216 | text-align: center; 217 | 218 | @media only screen and (min-width: $standard-screen-width) { 219 | display: none; 220 | } 221 | 222 | &:focus, 223 | &:hover { 224 | border-width: 0; 225 | color: $menu-toggle--font-color-hover; 226 | background-color: transparent; 227 | } 228 | 229 | &.activated:before { 230 | content: "\f335"; 231 | } 232 | 233 | .site-header &:before { 234 | float: left; 235 | position: relative; 236 | top: 1px; 237 | margin-right: 5px; 238 | text-rendering: auto; 239 | } 240 | } 241 | 242 | .sub-menu-toggle { 243 | display: block; 244 | visibility: visible; 245 | float: right; 246 | overflow: hidden; 247 | position: absolute; 248 | z-index: 100; 249 | top: 0; 250 | right: 0; 251 | margin: 0 auto; 252 | padding: 9px 10px; 253 | border-width: 0; 254 | color: $sub-menu-toggle--font-color; 255 | background-color: transparent; 256 | text-align: center; 257 | 258 | @media only screen and (min-width: $standard-screen-width) { 259 | display: none; 260 | } 261 | 262 | &:focus, 263 | &:hover { 264 | border-width: 0; 265 | color: $sub-menu-toggle--font-color-hover; 266 | background-color: transparent; 267 | } 268 | 269 | &:before { 270 | display: inline-block; 271 | transition: transform 0.25s ease-in-out; 272 | -webkit-transform: rotate(0); 273 | -ms-transform: rotate(0); 274 | transform: rotate(0); 275 | text-rendering: auto; 276 | } 277 | 278 | .sub-menu & { 279 | padding: 12px 10px; 280 | } 281 | 282 | &.activated:before { 283 | -webkit-transform: rotate(180deg); 284 | -ms-transform: rotate(180deg); 285 | transform: rotate(180deg); 286 | } 287 | } 288 | 289 | /* Header Menu 290 | --------------------------------------------- */ 291 | 292 | .nav-primary { 293 | clear: left; 294 | width: 100%; 295 | 296 | @media only screen and (min-width: $standard-screen-width) { 297 | float: right; 298 | clear: none; 299 | width: auto; 300 | padding-top: 15px; 301 | } 302 | 303 | .genesis-nav-menu a { 304 | 305 | @media only screen and (min-width: $standard-screen-width) { 306 | padding-right: 15px; 307 | padding-left: 15px; 308 | } 309 | } 310 | } 311 | 312 | /* Footer Menu 313 | --------------------------------------------- */ 314 | 315 | .nav-secondary { 316 | margin-top: 10px; 317 | 318 | .genesis-nav-menu { 319 | line-height: $line-height--medium; 320 | } 321 | 322 | .menu-item { 323 | display: inline-block; 324 | } 325 | 326 | a { 327 | margin-right: 10px; 328 | margin-left: 10px; 329 | padding: 0; 330 | } 331 | } 332 | -------------------------------------------------------------------------------- /sass/partials/_defaults.scss: -------------------------------------------------------------------------------- 1 | /* Defaults 2 | ----------------------------------------------*/ 3 | 4 | /* Typographical Elements 5 | --------------------------------------------- */ 6 | 7 | html { 8 | font-size: 62.5%; /* 10px browser default */ 9 | -moz-osx-font-smoothing: grayscale; 10 | -webkit-font-smoothing: antialiased; 11 | } 12 | 13 | /* Chrome fix */ 14 | body > div { 15 | font-size: $body--font-size; 16 | } 17 | 18 | body { 19 | margin: 0; 20 | color: $body--font-color; 21 | background-color: $body--background-color; 22 | font-family: $body--font-family; 23 | font-size: $body--font-size; 24 | font-weight: $font-weight--regular; 25 | line-height: $line-height--normal; 26 | } 27 | 28 | button, 29 | input:focus, 30 | input[type="button"], 31 | input[type="reset"], 32 | input[type="submit"], 33 | textarea:focus, 34 | .button, 35 | .gallery img { 36 | transition: all 0.2s ease-in-out; 37 | } 38 | 39 | a { 40 | color: $link--font-color; 41 | text-decoration: underline; 42 | transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; 43 | } 44 | 45 | a:focus, 46 | a:hover { 47 | color: $link--font-color-hover; 48 | text-decoration: none; 49 | } 50 | 51 | p { 52 | margin: 0 0 30px; 53 | padding: 0; 54 | } 55 | 56 | ol, 57 | ul { 58 | margin: 0; 59 | padding: 0; 60 | } 61 | 62 | li { 63 | list-style-type: none; 64 | } 65 | 66 | hr { 67 | clear: both; 68 | margin: 30px 0; 69 | border: 0; 70 | border-top: $border-width $border-style $border-color; 71 | border-collapse: collapse; 72 | } 73 | 74 | b, 75 | strong { 76 | font-weight: $font-weight--bold; 77 | } 78 | 79 | blockquote, 80 | cite, 81 | em, 82 | i { 83 | font-style: italic; 84 | } 85 | 86 | mark { 87 | background: $mark--background-color; 88 | } 89 | 90 | blockquote { 91 | margin: 30px; 92 | 93 | &:before { 94 | display: block; 95 | position: relative; 96 | top: -10px; 97 | left: -20px; 98 | height: 0; 99 | font-size: 30px; 100 | font-size: 3rem; 101 | content: "\201C"; 102 | } 103 | } 104 | 105 | /* Headings 106 | --------------------------------------------- */ 107 | 108 | h1, 109 | h2, 110 | h3, 111 | h4, 112 | h5, 113 | h6 { 114 | margin: 0 0 20px; 115 | font-family: $headings--font-family; 116 | font-weight: $font-weight--regular; 117 | line-height: $line-height--small; 118 | } 119 | 120 | h1 { 121 | font-size: $h1--font-size; 122 | } 123 | 124 | h2 { 125 | font-size: $h2--font-size; 126 | } 127 | 128 | .entry-content h3, 129 | .entry-content h4 { 130 | font-weight: $font-weight--semibold; 131 | } 132 | 133 | h3 { 134 | font-size: $h3--font-size; 135 | } 136 | 137 | h4 { 138 | font-size: $h4--font-size; 139 | } 140 | 141 | .entry-content h4 { 142 | margin-top: 40px; 143 | } 144 | 145 | h5 { 146 | font-size: $h5--font-size; 147 | } 148 | 149 | h6 { 150 | font-size: $h6--font-size; 151 | } 152 | 153 | /* Objects 154 | --------------------------------------------- */ 155 | 156 | embed, 157 | iframe, 158 | img, 159 | object, 160 | video, 161 | .wp-caption { 162 | max-width: 100%; 163 | } 164 | 165 | img { 166 | height: auto; 167 | vertical-align: top; 168 | } 169 | 170 | figure { 171 | margin: 0; 172 | } 173 | 174 | /* Gallery 175 | --------------------------------------------- */ 176 | 177 | .gallery { 178 | overflow: hidden; 179 | 180 | img { 181 | height: auto; 182 | padding: 4px; 183 | border: $border-width $border-style $border-color; 184 | } 185 | 186 | img:focus, 187 | img:hover { 188 | border: 1px solid #999; 189 | outline: none; 190 | } 191 | } 192 | 193 | .gallery-item { 194 | float: left; 195 | margin: 0 0 30px; 196 | text-align: center; 197 | 198 | .gallery-columns-1 & { 199 | width: 100%; 200 | } 201 | 202 | .gallery-columns-2 & { 203 | width: 50%; 204 | } 205 | 206 | .gallery-columns-3 & { 207 | width: 33%; 208 | } 209 | 210 | .gallery-columns-4 & { 211 | width: 25%; 212 | } 213 | 214 | .gallery-columns-5 & { 215 | width: 20%; 216 | } 217 | 218 | .gallery-columns-6 & { 219 | width: 16.6666%; 220 | } 221 | 222 | .gallery-columns-7 & { 223 | width: 14.2857%; 224 | } 225 | 226 | .gallery-columns-8 & { 227 | width: 12.5%; 228 | } 229 | 230 | .gallery-columns-9 & { 231 | width: 11.1111%; 232 | } 233 | } 234 | 235 | .gallery-columns-2 .gallery-item:nth-child(2n + 1), 236 | .gallery-columns-3 .gallery-item:nth-child(3n + 1), 237 | .gallery-columns-4 .gallery-item:nth-child(4n + 1), 238 | .gallery-columns-5 .gallery-item:nth-child(5n + 1), 239 | .gallery-columns-6 .gallery-item:nth-child(6n + 1), 240 | .gallery-columns-7 .gallery-item:nth-child(7n + 1), 241 | .gallery-columns-8 .gallery-item:nth-child(8n + 1), 242 | .gallery-columns-9 .gallery-item:nth-child(9n + 1) { 243 | clear: left; 244 | } 245 | 246 | /* Forms 247 | --------------------------------------------- */ 248 | 249 | input, 250 | select, 251 | textarea { 252 | width: 100%; 253 | padding: 15px; 254 | border: 1px solid #ddd; 255 | color: $forms--font-color; 256 | background-color: $forms__background-color; 257 | font-size: $forms--font-size; 258 | font-weight: $font-weight--regular; 259 | } 260 | 261 | input:focus, 262 | textarea:focus { 263 | border: 1px solid #999; 264 | outline: none; 265 | } 266 | 267 | input[type="checkbox"], 268 | input[type="image"], 269 | input[type="radio"] { 270 | width: auto; 271 | } 272 | 273 | ::-moz-placeholder { 274 | opacity: 1; 275 | color: $dark-grey; 276 | } 277 | 278 | ::-webkit-input-placeholder { 279 | color: $dark-grey; 280 | } 281 | 282 | button { 283 | width: auto; 284 | padding: 15px 30px; 285 | border: 0; 286 | color: $button--font-color; 287 | background-color: $button--background-color; 288 | font-size: $button--font-size; 289 | font-weight: $font-weight--semibold; 290 | white-space: normal; 291 | text-decoration: none; 292 | cursor: pointer; 293 | 294 | &:focus, 295 | &:hover { 296 | color: $button--font-color-hover; 297 | background-color: $button--background-color-hover; 298 | } 299 | 300 | &.small { 301 | padding: 8px 16px; 302 | } 303 | } 304 | 305 | input[type="button"] { 306 | width: auto; 307 | padding: 15px 30px; 308 | border: 0; 309 | color: $button--font-color; 310 | background-color: $button--background-color; 311 | font-size: $button--font-size; 312 | font-weight: $font-weight--semibold; 313 | white-space: normal; 314 | text-decoration: none; 315 | cursor: pointer; 316 | 317 | &:focus, 318 | &:hover { 319 | color: $button--font-color-hover; 320 | background-color: $button--background-color-hover; 321 | } 322 | 323 | &.small { 324 | padding: 8px 16px; 325 | } 326 | } 327 | 328 | input[type="reset"] { 329 | width: auto; 330 | padding: 15px 30px; 331 | border: 0; 332 | color: $button--font-color; 333 | background-color: $button--background-color; 334 | font-size: $button--font-size; 335 | font-weight: $font-weight--semibold; 336 | white-space: normal; 337 | text-decoration: none; 338 | cursor: pointer; 339 | 340 | &:focus, 341 | &:hover { 342 | color: $button--font-color-hover; 343 | background-color: $button--background-color-hover; 344 | } 345 | 346 | &.small { 347 | padding: 8px 16px; 348 | } 349 | } 350 | 351 | input[type="submit"] { 352 | width: auto; 353 | padding: 15px 30px; 354 | border: 0; 355 | color: $button--font-color; 356 | background-color: $button--background-color; 357 | font-size: $button--font-size; 358 | font-weight: $font-weight--semibold; 359 | white-space: normal; 360 | text-decoration: none; 361 | cursor: pointer; 362 | 363 | &:focus, 364 | &:hover { 365 | color: $button--font-color-hover; 366 | background-color: $button--background-color-hover; 367 | } 368 | 369 | &.small { 370 | padding: 8px 16px; 371 | } 372 | } 373 | 374 | .button { 375 | display: inline-block; 376 | width: auto; 377 | padding: 15px 30px; 378 | border: 0; 379 | color: $button--font-color; 380 | background-color: $button--background-color; 381 | font-size: $button--font-size; 382 | font-weight: $font-weight--semibold; 383 | white-space: normal; 384 | text-decoration: none; 385 | cursor: pointer; 386 | 387 | &:focus, 388 | &:hover { 389 | color: $button--font-color-hover; 390 | background-color: $button--background-color-hover; 391 | } 392 | 393 | .entry-content &:focus, 394 | .entry-content &:hover { 395 | color: $button--font-color-hover; 396 | } 397 | } 398 | 399 | a.button.small { 400 | padding: 8px 16px; 401 | } 402 | 403 | input[type="search"]::-webkit-search-cancel-button, 404 | input[type="search"]::-webkit-search-results-button { 405 | display: none; 406 | } 407 | 408 | /* Tables 409 | --------------------------------------------- */ 410 | 411 | table { 412 | width: 100%; 413 | margin-bottom: 40px; 414 | border-spacing: 0; 415 | border-collapse: collapse; 416 | line-height: 2; 417 | word-break: break-all; 418 | } 419 | 420 | tbody { 421 | border-bottom: $border-width $border-style $border-color; 422 | } 423 | 424 | td { 425 | padding: 6px; 426 | border-top: $border-width $border-style $border-color; 427 | text-align: left; 428 | 429 | &:first-child { 430 | padding-left: 0; 431 | } 432 | } 433 | 434 | th { 435 | padding: 0 6px; 436 | font-weight: $font-weight--regular; 437 | text-align: left; 438 | 439 | &:first-child { 440 | padding-left: 0; 441 | } 442 | } 443 | 444 | /* Accessibility 445 | --------------------------------------------- */ 446 | 447 | /* Screen Reader Text 448 | --------------------------------------------- */ 449 | 450 | .screen-reader-shortcut, 451 | .screen-reader-text, 452 | .screen-reader-text span { 453 | overflow: hidden; 454 | clip: rect(0, 0, 0, 0); 455 | position: absolute !important; 456 | width: 1px; 457 | height: 1px; 458 | border: 0; 459 | word-wrap: normal !important; 460 | } 461 | 462 | .screen-reader-shortcut:focus, 463 | .screen-reader-text:focus, 464 | .widget_search input[type="submit"]:focus { 465 | display: block; 466 | clip: auto !important; 467 | z-index: 100000; /* Above WP toolbar. */ 468 | width: auto; 469 | height: auto; 470 | padding: 15px 23px 14px; 471 | color: $body--font-color; 472 | background: $body--background-color; 473 | box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 474 | font-size: 1em; 475 | font-weight: $font-weight--bold; 476 | text-decoration: none; 477 | } 478 | 479 | .more-link { 480 | position: relative; 481 | } 482 | 483 | /* Skip Links 484 | ------------------------------------------------ */ 485 | 486 | .genesis-skip-link { 487 | margin: 0; 488 | 489 | & .skip-link-hidden { 490 | display: none; 491 | visibility: hidden; 492 | } 493 | 494 | & li { 495 | width: 0; 496 | height: 0; 497 | list-style: none; 498 | } 499 | } 500 | 501 | /* Display outline on focus */ 502 | :focus { 503 | outline: #ccc solid 1px; 504 | color: $body--font-color; 505 | } 506 | --------------------------------------------------------------------------------