diff --git a/README.md b/README.md index 7083c865..9858ba93 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ My ultra-minimal CSS might make me look like theme tartare but that means less s * Some small tweaks in `inc/template-functions.php` that can improve your theming experience. * A script at `js/navigation.js` that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in `functions.php`. * 2 sample CSS layouts in `layouts/` for a sidebar on either side of your content. +Note: `.no-sidebar` styles are not automatically loaded. * Smartly organized starter CSS in `style.css` that will help you to quickly get your design off the ground. * Licensed under GPLv2 or later. :) Use it to make something cool. diff --git a/inc/template-functions.php b/inc/template-functions.php index d430b28f..e38bf38b 100644 --- a/inc/template-functions.php +++ b/inc/template-functions.php @@ -17,6 +17,11 @@ function _s_body_classes( $classes ) { $classes[] = 'hfeed'; } + // Adds a class of no-sidebar when there is no sidebar present. + if ( ! is_active_sidebar( 'sidebar-1' ) ) { + $classes[] = 'no-sidebar'; + } + return $classes; } add_filter( 'body_class', '_s_body_classes' ); diff --git a/layouts/content-sidebar.css b/layouts/content-sidebar.css index 1e25ae8b..60b85d0b 100644 --- a/layouts/content-sidebar.css +++ b/layouts/content-sidebar.css @@ -23,3 +23,12 @@ clear: both; width: 100%; } + +.no-sidebar .content-area { + float: none; + margin-left: auto; + margin-right: auto; +} +.no-sidebar .site-main { + margin-right: 0; +} diff --git a/layouts/sidebar-content.css b/layouts/sidebar-content.css index 66342d0f..0dda00ee 100644 --- a/layouts/sidebar-content.css +++ b/layouts/sidebar-content.css @@ -23,3 +23,12 @@ clear: both; width: 100%; } + +.no-sidebar .content-area { + float: none; + margin-left: auto; + margin-right: auto; +} +.no-sidebar .site-main { + margin-right: 0; +} diff --git a/sass/layout/_content-sidebar.scss b/sass/layout/_content-sidebar.scss index 2af13c9a..507cc595 100644 --- a/sass/layout/_content-sidebar.scss +++ b/sass/layout/_content-sidebar.scss @@ -18,3 +18,5 @@ clear: both; width: $size__site-main; } + +@import "no-sidebar"; diff --git a/sass/layout/_no-sidebar.scss b/sass/layout/_no-sidebar.scss new file mode 100644 index 00000000..ae44e48c --- /dev/null +++ b/sass/layout/_no-sidebar.scss @@ -0,0 +1,11 @@ +.no-sidebar { + .content-area { + float: none; + margin-left: auto; + margin-right: auto; + } + + .site-main { + margin-right: 0; + } +} diff --git a/sass/layout/_sidebar-content.scss b/sass/layout/_sidebar-content.scss index 03eb2d84..e765590e 100644 --- a/sass/layout/_sidebar-content.scss +++ b/sass/layout/_sidebar-content.scss @@ -18,3 +18,5 @@ clear: both; width: $size__site-main; } + +@import "no-sidebar"; diff --git a/sass/site/_site.scss b/sass/site/_site.scss index 9e4b9db4..23408f0c 100644 --- a/sass/site/_site.scss +++ b/sass/site/_site.scss @@ -1,5 +1,6 @@ // @import "../layout/content-sidebar"; // @import "../layout/sidebar-content"; + /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/