From b5f642ba8910d550338a78a24a5127a1dd59d7a0 Mon Sep 17 00:00:00 2001 From: Greg Rickaby Date: Fri, 22 May 2015 10:13:32 -0500 Subject: [PATCH 1/5] initial commit of SVG branch --- Gruntfile.js | 38 ++++++++++++++++++++- footer.php | 14 +------- images/svg/angle-left.svg | 1 + images/svg/angle-right.svg | 1 + images/svg/arrow-circle-left.svg | 1 + images/svg/arrow-circle-right.svg | 1 + images/svg/bars.svg | 1 + images/svg/chevron-circle-left.svg | 1 + images/svg/chevron-circle-right.svg | 1 + images/svg/chevron-left.svg | 1 + images/svg/chevron-right.svg | 1 + images/svg/envelope.svg | 1 + images/svg/facebook-square.svg | 1 + images/svg/facebook.svg | 1 + images/svg/github-alt.svg | 1 + images/svg/github-square.svg | 1 + images/svg/google-plus-square.svg | 1 + images/svg/google-plus.svg | 1 + images/svg/instagram.svg | 1 + images/svg/linkedin-square.svg | 1 + images/svg/linkedin.svg | 1 + images/svg/pinterest-p.svg | 1 + images/svg/pinterest-square.svg | 1 + images/svg/rss-square.svg | 1 + images/svg/rss.svg | 1 + images/svg/search.svg | 1 + images/svg/times-circle-o.svg | 1 + images/svg/twitter-square.svg | 1 + images/svg/twitter.svg | 1 + images/svg/youtube-square.svg | 1 + images/svg/youtube.svg | 1 + inc/scripts.php | 16 +++++++++ inc/template-tags.php | 41 ++++++++++++++++++++++- package.json | 2 ++ sass/modules/_social-icons.scss | 31 +++++++++++++++++ sass/modules/index.scss | 1 + sass/utilities/variables/_colors.scss | 28 ++++++++++++++++ sass/utilities/variables/_typography.scss | 5 ++- searchform.php | 11 ++++++ 39 files changed, 198 insertions(+), 18 deletions(-) create mode 100755 images/svg/angle-left.svg create mode 100755 images/svg/angle-right.svg create mode 100755 images/svg/arrow-circle-left.svg create mode 100755 images/svg/arrow-circle-right.svg create mode 100755 images/svg/bars.svg create mode 100755 images/svg/chevron-circle-left.svg create mode 100755 images/svg/chevron-circle-right.svg create mode 100755 images/svg/chevron-left.svg create mode 100755 images/svg/chevron-right.svg create mode 100755 images/svg/envelope.svg create mode 100755 images/svg/facebook-square.svg create mode 100755 images/svg/facebook.svg create mode 100755 images/svg/github-alt.svg create mode 100755 images/svg/github-square.svg create mode 100755 images/svg/google-plus-square.svg create mode 100755 images/svg/google-plus.svg create mode 100755 images/svg/instagram.svg create mode 100755 images/svg/linkedin-square.svg create mode 100755 images/svg/linkedin.svg create mode 100755 images/svg/pinterest-p.svg create mode 100755 images/svg/pinterest-square.svg create mode 100755 images/svg/rss-square.svg create mode 100755 images/svg/rss.svg create mode 100755 images/svg/search.svg create mode 100755 images/svg/times-circle-o.svg create mode 100755 images/svg/twitter-square.svg create mode 100755 images/svg/twitter.svg create mode 100755 images/svg/youtube-square.svg create mode 100755 images/svg/youtube.svg create mode 100644 sass/modules/_social-icons.scss create mode 100644 searchform.php diff --git a/Gruntfile.js b/Gruntfile.js index 595a47d39..c97baabe8 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -23,6 +23,32 @@ module.exports = function(grunt) { } }, + svgmin: { + dist: { + files: [{ + expand: true, + cwd: 'images/svg', + src: ['*.svg'], + dest: 'images/svg' + }] + } + }, + + svgstore: { + options: { + prefix: 'icon-', + cleanup: ['fill', 'style'], + svg: { + style: 'display: none;' + } + }, + default: { + files: { + 'images/svg-defs.svg': ['images/svg/*.svg'], + } + } + }, + sass: { options: { sourceMap: true, @@ -145,6 +171,15 @@ module.exports = function(grunt) { }, }, + svg: { + files: ['images/svg/*.svg'], + tasks: ['svgstore'], + options: { + spawn: false, + livereload: true, + }, + }, + }, shell: { @@ -248,7 +283,8 @@ module.exports = function(grunt) { grunt.registerTask('javascript', ['concat', 'uglify']); grunt.registerTask('imageminnewer', ['newer:imagemin']); grunt.registerTask('sprites', ['sprite']); + grunt.registerTask('icons', ['svgmin', 'svgstore']); grunt.registerTask('i18n', ['makepot']); - grunt.registerTask('default', ['styles', 'javascript', 'imageminnewer', 'i18n', 'sassdoc']); + grunt.registerTask('default', ['styles', 'javascript', 'imageminnewer', 'icons', 'i18n', 'sassdoc']); }; diff --git a/footer.php b/footer.php index 83d846ed4..ae1405a1c 100644 --- a/footer.php +++ b/footer.php @@ -19,19 +19,7 @@ Automattic' ); ?> - 'social', - 'container' => false, - 'menu_class' => 'menu-social menu menu-horizontal', - 'link_before' => '', - 'link_after' => '' - ) - ); - endif; - ?> + diff --git a/images/svg/angle-left.svg b/images/svg/angle-left.svg new file mode 100755 index 000000000..6f8ca5c86 --- /dev/null +++ b/images/svg/angle-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/angle-right.svg b/images/svg/angle-right.svg new file mode 100755 index 000000000..8ab32cef0 --- /dev/null +++ b/images/svg/angle-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/arrow-circle-left.svg b/images/svg/arrow-circle-left.svg new file mode 100755 index 000000000..4db6621be --- /dev/null +++ b/images/svg/arrow-circle-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/arrow-circle-right.svg b/images/svg/arrow-circle-right.svg new file mode 100755 index 000000000..6022b7a1f --- /dev/null +++ b/images/svg/arrow-circle-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/bars.svg b/images/svg/bars.svg new file mode 100755 index 000000000..dab88aec8 --- /dev/null +++ b/images/svg/bars.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/chevron-circle-left.svg b/images/svg/chevron-circle-left.svg new file mode 100755 index 000000000..e6bc852ff --- /dev/null +++ b/images/svg/chevron-circle-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/chevron-circle-right.svg b/images/svg/chevron-circle-right.svg new file mode 100755 index 000000000..0d1cb6cb7 --- /dev/null +++ b/images/svg/chevron-circle-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/chevron-left.svg b/images/svg/chevron-left.svg new file mode 100755 index 000000000..8455f2491 --- /dev/null +++ b/images/svg/chevron-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/chevron-right.svg b/images/svg/chevron-right.svg new file mode 100755 index 000000000..418a1e573 --- /dev/null +++ b/images/svg/chevron-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/envelope.svg b/images/svg/envelope.svg new file mode 100755 index 000000000..66d2b369b --- /dev/null +++ b/images/svg/envelope.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/facebook-square.svg b/images/svg/facebook-square.svg new file mode 100755 index 000000000..d13eaee50 --- /dev/null +++ b/images/svg/facebook-square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/facebook.svg b/images/svg/facebook.svg new file mode 100755 index 000000000..47d3a488e --- /dev/null +++ b/images/svg/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/github-alt.svg b/images/svg/github-alt.svg new file mode 100755 index 000000000..4fd65c161 --- /dev/null +++ b/images/svg/github-alt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/github-square.svg b/images/svg/github-square.svg new file mode 100755 index 000000000..ba12101e5 --- /dev/null +++ b/images/svg/github-square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/google-plus-square.svg b/images/svg/google-plus-square.svg new file mode 100755 index 000000000..199dbc755 --- /dev/null +++ b/images/svg/google-plus-square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/google-plus.svg b/images/svg/google-plus.svg new file mode 100755 index 000000000..3adb025ba --- /dev/null +++ b/images/svg/google-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/instagram.svg b/images/svg/instagram.svg new file mode 100755 index 000000000..d195620d5 --- /dev/null +++ b/images/svg/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/linkedin-square.svg b/images/svg/linkedin-square.svg new file mode 100755 index 000000000..5db320d80 --- /dev/null +++ b/images/svg/linkedin-square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/linkedin.svg b/images/svg/linkedin.svg new file mode 100755 index 000000000..307f3207e --- /dev/null +++ b/images/svg/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/pinterest-p.svg b/images/svg/pinterest-p.svg new file mode 100755 index 000000000..a6dfb3965 --- /dev/null +++ b/images/svg/pinterest-p.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/pinterest-square.svg b/images/svg/pinterest-square.svg new file mode 100755 index 000000000..e870181b5 --- /dev/null +++ b/images/svg/pinterest-square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/rss-square.svg b/images/svg/rss-square.svg new file mode 100755 index 000000000..80df03a89 --- /dev/null +++ b/images/svg/rss-square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/rss.svg b/images/svg/rss.svg new file mode 100755 index 000000000..5d8974679 --- /dev/null +++ b/images/svg/rss.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/search.svg b/images/svg/search.svg new file mode 100755 index 000000000..4f688e57f --- /dev/null +++ b/images/svg/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/times-circle-o.svg b/images/svg/times-circle-o.svg new file mode 100755 index 000000000..df291fb3a --- /dev/null +++ b/images/svg/times-circle-o.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/twitter-square.svg b/images/svg/twitter-square.svg new file mode 100755 index 000000000..9b1c762cf --- /dev/null +++ b/images/svg/twitter-square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/twitter.svg b/images/svg/twitter.svg new file mode 100755 index 000000000..8680bc550 --- /dev/null +++ b/images/svg/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/youtube-square.svg b/images/svg/youtube-square.svg new file mode 100755 index 000000000..58268e948 --- /dev/null +++ b/images/svg/youtube-square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/youtube.svg b/images/svg/youtube.svg new file mode 100755 index 000000000..ad1145072 --- /dev/null +++ b/images/svg/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inc/scripts.php b/inc/scripts.php index b6b646d4e..543e5fdd4 100644 --- a/inc/scripts.php +++ b/inc/scripts.php @@ -77,3 +77,19 @@ function _s_scripts() { } } add_action( 'wp_enqueue_scripts', '_s_scripts' ); + + +/** + * Add SVG definitions to + */ +function _s_include_svg_definitions() { + + // Define svg sprite file + $svg_defs = get_template_directory() . '/images/svg-defs.svg'; + + // If it exsists, include it + if ( file_exists( $svg_defs ) ) { + require_once( $svg_defs ); + } +} +add_action( 'wp_head', '_s_include_svg_definitions' ); \ No newline at end of file diff --git a/inc/template-tags.php b/inc/template-tags.php index 8644df19c..5aac5e852 100644 --- a/inc/template-tags.php +++ b/inc/template-tags.php @@ -260,4 +260,43 @@ function _s_category_transient_flusher() { delete_transient( '_s_categories' ); } add_action( 'edit_category', '_s_category_transient_flusher' ); -add_action( 'save_post', '_s_category_transient_flusher' ); \ No newline at end of file +add_action( 'save_post', '_s_category_transient_flusher' ); + +/** + * Echo SVG markup. + * + * @param string $icon_name Use the icon name, such as "facebook-square" + */ +function _s_do_svg( $icon_name ) { ?> + + + + + + + + + +"> + + + \ No newline at end of file From d7ca7425703632974bf1e884ff5cd0e5ceb02127 Mon Sep 17 00:00:00 2001 From: Greg Rickaby Date: Fri, 22 May 2015 10:18:29 -0500 Subject: [PATCH 2/5] grunt dem sprites --- images/svg-defs.svg | 1 + images/svg/angle-left.svg | 2 +- images/svg/angle-right.svg | 2 +- images/svg/arrow-circle-left.svg | 2 +- images/svg/arrow-circle-right.svg | 2 +- images/svg/envelope.svg | 2 +- images/svg/facebook.svg | 2 +- images/svg/github-alt.svg | 2 +- images/svg/github-square.svg | 2 +- images/svg/google-plus-square.svg | 2 +- images/svg/google-plus.svg | 2 +- images/svg/instagram.svg | 2 +- images/svg/linkedin.svg | 2 +- images/svg/pinterest-p.svg | 2 +- images/svg/pinterest-square.svg | 2 +- images/svg/rss-square.svg | 2 +- images/svg/rss.svg | 2 +- images/svg/times-circle-o.svg | 2 +- images/svg/twitter-square.svg | 2 +- images/svg/twitter.svg | 2 +- images/svg/youtube-square.svg | 2 +- images/svg/youtube.svg | 2 +- sass/base/_typography.scss | 1 - 23 files changed, 22 insertions(+), 22 deletions(-) create mode 100644 images/svg-defs.svg diff --git a/images/svg-defs.svg b/images/svg-defs.svg new file mode 100644 index 000000000..54938e3ea --- /dev/null +++ b/images/svg-defs.svg @@ -0,0 +1 @@ +angle-leftangle-rightarrow-circle-leftarrow-circle-rightbarschevron-circle-leftchevron-circle-rightchevron-leftchevron-rightenvelopefacebook-squarefacebookgithub-altgithub-squaregoogle-plus-squaregoogle-plusinstagramlinkedin-squarelinkedinpinterest-ppinterest-squarerss-squarersssearchtimes-circle-otwitter-squaretwitteryoutube-squareyoutube \ No newline at end of file diff --git a/images/svg/angle-left.svg b/images/svg/angle-left.svg index 6f8ca5c86..92720bd2e 100755 --- a/images/svg/angle-left.svg +++ b/images/svg/angle-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/angle-right.svg b/images/svg/angle-right.svg index 8ab32cef0..df28edad7 100755 --- a/images/svg/angle-right.svg +++ b/images/svg/angle-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/arrow-circle-left.svg b/images/svg/arrow-circle-left.svg index 4db6621be..38ee78a94 100755 --- a/images/svg/arrow-circle-left.svg +++ b/images/svg/arrow-circle-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/arrow-circle-right.svg b/images/svg/arrow-circle-right.svg index 6022b7a1f..d3a0f9057 100755 --- a/images/svg/arrow-circle-right.svg +++ b/images/svg/arrow-circle-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/envelope.svg b/images/svg/envelope.svg index 66d2b369b..3750bc863 100755 --- a/images/svg/envelope.svg +++ b/images/svg/envelope.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/facebook.svg b/images/svg/facebook.svg index 47d3a488e..fd0923592 100755 --- a/images/svg/facebook.svg +++ b/images/svg/facebook.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/github-alt.svg b/images/svg/github-alt.svg index 4fd65c161..e81c08e6b 100755 --- a/images/svg/github-alt.svg +++ b/images/svg/github-alt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/github-square.svg b/images/svg/github-square.svg index ba12101e5..fd544186e 100755 --- a/images/svg/github-square.svg +++ b/images/svg/github-square.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/google-plus-square.svg b/images/svg/google-plus-square.svg index 199dbc755..199942198 100755 --- a/images/svg/google-plus-square.svg +++ b/images/svg/google-plus-square.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/google-plus.svg b/images/svg/google-plus.svg index 3adb025ba..6d4809940 100755 --- a/images/svg/google-plus.svg +++ b/images/svg/google-plus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/instagram.svg b/images/svg/instagram.svg index d195620d5..e5332b222 100755 --- a/images/svg/instagram.svg +++ b/images/svg/instagram.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/linkedin.svg b/images/svg/linkedin.svg index 307f3207e..381d29a03 100755 --- a/images/svg/linkedin.svg +++ b/images/svg/linkedin.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/pinterest-p.svg b/images/svg/pinterest-p.svg index a6dfb3965..c355cabac 100755 --- a/images/svg/pinterest-p.svg +++ b/images/svg/pinterest-p.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/pinterest-square.svg b/images/svg/pinterest-square.svg index e870181b5..e81bc7da7 100755 --- a/images/svg/pinterest-square.svg +++ b/images/svg/pinterest-square.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/rss-square.svg b/images/svg/rss-square.svg index 80df03a89..ea3e5ae1b 100755 --- a/images/svg/rss-square.svg +++ b/images/svg/rss-square.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/rss.svg b/images/svg/rss.svg index 5d8974679..a5ab28a9b 100755 --- a/images/svg/rss.svg +++ b/images/svg/rss.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/times-circle-o.svg b/images/svg/times-circle-o.svg index df291fb3a..30fecb8ad 100755 --- a/images/svg/times-circle-o.svg +++ b/images/svg/times-circle-o.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/twitter-square.svg b/images/svg/twitter-square.svg index 9b1c762cf..dd9079490 100755 --- a/images/svg/twitter-square.svg +++ b/images/svg/twitter-square.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/twitter.svg b/images/svg/twitter.svg index 8680bc550..2b75696c3 100755 --- a/images/svg/twitter.svg +++ b/images/svg/twitter.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/youtube-square.svg b/images/svg/youtube-square.svg index 58268e948..346b61915 100755 --- a/images/svg/youtube-square.svg +++ b/images/svg/youtube-square.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/svg/youtube.svg b/images/svg/youtube.svg index ad1145072..1ee717201 100755 --- a/images/svg/youtube.svg +++ b/images/svg/youtube.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss index 6f7b82811..f79f884f5 100644 --- a/sass/base/_typography.scss +++ b/sass/base/_typography.scss @@ -27,7 +27,6 @@ h6 { p { margin: 0 0 rem(24) 0; - line-height: $line-height-paragraphs; } b, From 59b111ccaee3c9c992969b83e1396760e71c370b Mon Sep 17 00:00:00 2001 From: Greg Rickaby Date: Fri, 22 May 2015 14:37:22 -0500 Subject: [PATCH 3/5] fix typos --- inc/template-tags.php | 4 ++-- searchform.php | 4 +--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/inc/template-tags.php b/inc/template-tags.php index 5aac5e852..b1459ea18 100644 --- a/inc/template-tags.php +++ b/inc/template-tags.php @@ -270,7 +270,7 @@ function _s_category_transient_flusher() { function _s_do_svg( $icon_name ) { ?> - +