From ed738f171db98d8972846e8d1ccf783e23391a3d Mon Sep 17 00:00:00 2001 From: CreativeJuiz Date: Thu, 20 Nov 2014 17:25:54 +0100 Subject: [PATCH] WP styles Some specific styles for WordPress projects. --- less/_XX-wp-styles.less | 296 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 296 insertions(+) create mode 100644 less/_XX-wp-styles.less diff --git a/less/_XX-wp-styles.less b/less/_XX-wp-styles.less new file mode 100644 index 0000000..660bad2 --- /dev/null +++ b/less/_XX-wp-styles.less @@ -0,0 +1,296 @@ +/* + File Name: _XX-wp-styles.less + Author: Geoffrey Crofte (Alsacréations) + Contributors: Automattic, Geoffrey Crofte + Description: Reset styles for WordPress usage of Knacss + Creation date: 2014-11-20 +*/ + +/*-------------------------------------------------------------- +1.0 Menus +--------------------------------------------------------------*/ + +// current menu elements + +.current_page_item > a { +} +.current-menu-item > a { +} +.current_page_ancestor > a { +} + + +// blocks of content navigation + +.comment-navigation, +.paging-navigation, +.post-navigation { + margin: 0 0 1.5em; + overflow: hidden; +} +.comment-navigation .nav-previous, +.paging-navigation .nav-previous, +.post-navigation .nav-previous { + float: left; + width: 50%; +} +.comment-navigation .nav-next, +.paging-navigation .nav-next, +.post-navigation .nav-next { + float: right; + text-align: right; + width: 50%; +} + + +/*-------------------------------------------------------------- +2.0 Alignments +--------------------------------------------------------------*/ + +// class in img elements +.alignleft { + float: left; + margin: 0 1.5em .25em 0; +} +.alignright { + float: right; + margin: 0 0 .25em 1.5em; +} +.aligncenter { + clear: both; + display: block; + margin: 1.5em auto; +} + + + +/*-------------------------------------------------------------- +3.0 Clearings +--------------------------------------------------------------*/ + +.entry-content, +.comment-content { + clear: both; + + &:after, &:before { + content: ""; + display: table; + } +} + + + +/*-------------------------------------------------------------- +4.0 Widgets +--------------------------------------------------------------*/ + +.widget + .widget { + margin: 1.5em 0 0; +} + +// usage example: +.widget select { + max-width: 100%; +} + + + + +/*-------------------------------------------------------------- +5.0 Posts and pages +--------------------------------------------------------------*/ + + +/* === 5.1 Posts - post_class === */ + +// featured content +.sticky { +} + +// attachment post +.attachment { +} + +// format of post +.format- { + &video { + } +} + +// class for a tag +.tag- { + &name-of-tag { + } +} + +// class for categorie +.category- { + &name-of-category { + } +} + + + +/* === 5.2 Pages - body_class === */ + +// front page +.home { + // if display posts + &.blog { + } + // if static page + &.page { + } +} + +// page displays posts +.blog { + // if is frontpage + &.home { + } + // if static page + &.page { + } +} + +// simple page +.page { +} + +// page of single post +.single { +} + +// page of archives +.archive { +} + +// page of search +.search { + // if has results + .search-results { + } + // if has no results + .search-no-results { + } +} + +// page 404 +.error404 { +} + +// user logged in +.logged-in { +} + +// text direction if right-to-left +.rtl { +} + + + +/* === 5.3 Posts and Pages - Contents === */ + +.hentry { + margin: 0 0 1.5em; +} + +.page-content, +.entry-content, +.entry-summary { + margin: 1.5em 0 0; +} + +.page-links { + clear: both; + margin: 0 0 1.5em; +} + + + +/*-------------------------------------------------------------- +6.0 Comments +--------------------------------------------------------------*/ + +.comment-content a { + word-wrap: break-word; +} +.bypostauthor { + // some make-the-logo-bigger styles +} + + + +/*-------------------------------------------------------------- +7.0 Media +--------------------------------------------------------------*/ + +img.wp-smiley { + margin-bottom: 0; + margin-top: 0; + padding: 0; + border: none; +} + + + +/*-------------------------------------------------------------- +8.0 Captions +--------------------------------------------------------------*/ + +.wp-caption { + max-width: 100%; + margin-bottom: 1.5em; +} +.wp-caption img { + display: block; + margin: 0 auto; +} +.wp-caption-text { + margin: 1em 0; + text-align: center; +} + + + +/*-------------------------------------------------------------- +9.0 Galleries +--------------------------------------------------------------*/ + +.gallery { + margin-bottom: 1.5em; +} +.gallery-item { + display: inline-block; + width: 100%; + text-align: center; + vertical-align: top; + + .gallery-columns-2 & { + max-width: 50%; + } + .gallery-columns-3 & { + max-width: 33.33%; + } + .gallery-columns-4 & { + max-width: 25%; + } + .gallery-columns-5 & { + max-width: 20%; + } + .gallery-columns-6 & { + max-width: 16.66%; + } + .gallery-columns-7 & { + max-width: 14.28%; + } + .gallery-columns-8 & { + max-width: 12.5%; + } + .gallery-columns-9 & { + max-width: 11.11%; + } +} +.gallery-caption { + display: block; +}