Last active
February 20, 2017 09:29
-
-
Save srikat/59003407d20389a1c0e0 to your computer and use it in GitHub Desktop.
How to add an inline mobile responsive menu in Genesis Sample. https://sridharkatakam.com/add-inline-mobile-responsive-menu-genesis-sample/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Remove site description | |
add_filter( 'genesis_attr_site-description', 'abte_add_site_description_class' ); | |
/** | |
* Add class for screen readers to site description. | |
* | |
* Unhook this if you'd like to show the site description. | |
* | |
* @since 1.0.0 | |
* | |
* @param array $attributes Existing HTML attributes for site description element. | |
* @return string Amended HTML attributes for site description element. | |
*/ | |
function abte_add_site_description_class( $attributes ) { | |
$attributes['class'] .= ' screen-reader-text'; | |
return $attributes; | |
} | |
// Remove the header right widget area | |
unregister_sidebar( 'header-right' ); | |
// Reposition the primary navigation menu | |
remove_action( 'genesis_after_header', 'genesis_do_nav' ); | |
add_action( 'genesis_header', 'genesis_do_nav' ); | |
// Remove Primary Navigation's wrap | |
add_theme_support( 'genesis-structural-wraps', array( | |
'header', | |
// 'nav', | |
'subnav', | |
'site-inner', | |
'footer-widgets', | |
'footer' | |
) ); | |
// Enqueue Scripts and Styles | |
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts_styles' ); | |
function custom_enqueue_scripts_styles() { | |
wp_enqueue_style( 'dashicons' ); | |
wp_enqueue_script( 'responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true ); | |
$output = array( | |
'mainMenu' => __( 'Menu', 'my-theme-text-domain' ), | |
'subMenu' => __( 'Menu', 'my-theme-text-domain' ), | |
); | |
wp_localize_script( 'responsive-menu', 'ResponsiveMenuL10n', $output ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* # Genesis Sample Child Theme | |
Theme Name: Genesis Sample Theme | |
Theme URI: http://my.studiopress.com/themes/genesis/ | |
Description: This is the sample theme created for the Genesis Framework. | |
Author: StudioPress | |
Author URI: http://www.studiopress.com/ | |
Template: genesis | |
Template Version: 2.2.2 | |
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 | |
License: GPL-2.0+ | |
License URI: http://www.gnu.org/licenses/gpl-2.0.html | |
*/ | |
/* # Table of Contents | |
- HTML5 Reset | |
- Baseline Normalize | |
- Box Sizing | |
- Float Clearing | |
- Defaults | |
- Typographical Elements | |
- Headings | |
- Objects | |
- Gallery | |
- Forms | |
- Tables | |
- Screen Reader Text | |
- Structure and Layout | |
- Site Containers | |
- Column Widths and Positions | |
- Column Classes | |
- Common Classes | |
- Avatar | |
- Genesis | |
- Search Form | |
- Titles | |
- WordPress | |
- Widgets | |
- Featured Content | |
- Plugins | |
- Genesis eNews Extended | |
- Jetpack | |
- Site Header | |
- Title Area | |
- Widget Area | |
- Site Navigation | |
- Accessible Menu | |
- Site Header Navigation | |
- Primary Navigation | |
- Secondary Navigation | |
- Skip Links | |
- Content Area | |
- Entries | |
- Entry Meta | |
- Pagination | |
- Comments | |
- Sidebars | |
- Footer Widgets | |
- Site Footer | |
- Media Queries | |
- Retina Display | |
- Max-width: 1200px | |
- Max-width: 960px | |
- Max-width: 800px | |
- Print Styles | |
*/ | |
/* # HTML5 Reset | |
---------------------------------------------------------------------------------------------------- */ | |
/* ## Baseline Normalize | |
--------------------------------------------- */ | |
/* normalize.css v3.0.1 | MIT License | git.io/normalize */ | |
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#333}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} | |
/* ## Box Sizing | |
--------------------------------------------- */ | |
html, | |
input[type="search"]{ | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
*, | |
*:before, | |
*:after { | |
box-sizing: inherit; | |
} | |
/* ## Float Clearing | |
--------------------------------------------- */ | |
.author-box:before, | |
.clearfix:before, | |
.entry:before, | |
.entry-content:before, | |
.footer-widgets:before, | |
.nav-primary:before, | |
.nav-secondary:before, | |
.pagination:before, | |
.site-container:before, | |
.site-footer:before, | |
.site-header:before, | |
.site-inner:before, | |
.wrap:before { | |
content: " "; | |
display: table; | |
} | |
.author-box:after, | |
.clearfix:after, | |
.entry:after, | |
.entry-content:after, | |
.footer-widgets:after, | |
.nav-primary:after, | |
.nav-secondary:after, | |
.pagination:after, | |
.site-container:after, | |
.site-footer:after, | |
.site-header:after, | |
.site-inner:after, | |
.wrap:after { | |
clear: both; | |
content: " "; | |
display: table; | |
} | |
/* # Defaults | |
---------------------------------------------------------------------------------------------------- */ | |
/* ## Typographical Elements | |
--------------------------------------------- */ | |
html { | |
font-size: 62.5%; /* 10px browser default */ | |
} | |
/* Chrome fix */ | |
body > div { | |
font-size: 1.8rem; | |
} | |
body { | |
background-color: #f5f5f5; | |
color: #333; | |
font-family: Lato, sans-serif; | |
font-size: 18px; | |
font-size: 1.8rem; | |
font-weight: 300; | |
line-height: 1.625; | |
margin: 0; | |
} | |
a, | |
button, | |
input:focus, | |
input[type="button"], | |
input[type="reset"], | |
input[type="submit"], | |
textarea:focus, | |
.button, | |
.gallery img { | |
-webkit-transition: all 0.1s ease-in-out; | |
-moz-transition: all 0.1s ease-in-out; | |
-ms-transition: all 0.1s ease-in-out; | |
-o-transition: all 0.1s ease-in-out; | |
transition: all 0.1s ease-in-out; | |
} | |
a { | |
color: #c3251d; | |
text-decoration: underline; | |
} | |
a:hover, | |
a:focus { | |
color: #333; | |
text-decoration: none; | |
} | |
p { | |
margin: 0 0 28px; | |
padding: 0; | |
} | |
ol, | |
ul { | |
margin: 0; | |
padding: 0; | |
} | |
li { | |
list-style-type: none; | |
} | |
hr { | |
border: 0; | |
border-collapse: collapse; | |
border-top: 1px solid #ddd; | |
clear: both; | |
margin: 1em 0; | |
} | |
b, | |
strong { | |
font-weight: 700; | |
} | |
blockquote, | |
cite, | |
em, | |
i { | |
font-style: italic; | |
} | |
blockquote { | |
margin: 40px; | |
} | |
blockquote::before { | |
content: "\201C"; | |
display: block; | |
font-size: 30px; | |
font-size: 3rem; | |
height: 0; | |
left: -20px; | |
position: relative; | |
top: -10px; | |
} | |
/* ## Headings | |
--------------------------------------------- */ | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
color: #333; | |
font-family: Lato, sans-serif; | |
font-weight: 400; | |
line-height: 1.2; | |
margin: 0 0 10px; | |
} | |
h1 { | |
font-size: 36px; | |
font-size: 3.6rem; | |
} | |
h2 { | |
font-size: 30px; | |
font-size: 3rem; | |
} | |
h3 { | |
font-size: 24px; | |
font-size: 2.4rem; | |
} | |
h4 { | |
font-size: 20px; | |
font-size: 2rem; | |
} | |
h5 { | |
font-size: 18px; | |
font-size: 1.8rem; | |
} | |
h6 { | |
font-size: 16px; | |
font-size: 1.6rem; | |
} | |
/* ## Objects | |
--------------------------------------------- */ | |
embed, | |
iframe, | |
img, | |
object, | |
video, | |
.wp-caption { | |
max-width: 100%; | |
} | |
img { | |
height: auto; | |
} | |
.featured-content img, | |
.gallery img { | |
width: auto; | |
} | |
/* ## Gallery | |
--------------------------------------------- */ | |
.gallery { | |
overflow: hidden; | |
} | |
.gallery-item { | |
float: left; | |
margin: 0 0 28px; | |
text-align: center; | |
} | |
.gallery-columns-2 .gallery-item { | |
width: 50%; | |
} | |
.gallery-columns-3 .gallery-item { | |
width: 33%; | |
} | |
.gallery-columns-4 .gallery-item { | |
width: 25%; | |
} | |
.gallery-columns-5 .gallery-item { | |
width: 20%; | |
} | |
.gallery-columns-6 .gallery-item { | |
width: 16.6666%; | |
} | |
.gallery-columns-7 .gallery-item { | |
width: 14.2857%; | |
} | |
.gallery-columns-8 .gallery-item { | |
width: 12.5%; | |
} | |
.gallery-columns-9 .gallery-item { | |
width: 11.1111%; | |
} | |
.gallery img { | |
border: 1px solid #ddd; | |
height: auto; | |
padding: 4px; | |
} | |
.gallery img:hover, | |
.gallery img:focus { | |
border: 1px solid #999; | |
} | |
/* ## Forms | |
--------------------------------------------- */ | |
input, | |
select, | |
textarea { | |
background-color: #fff; | |
border: 1px solid #ddd; | |
color: #333; | |
font-size: 18px; | |
font-size: 1.8rem; | |
font-weight: 300; | |
padding: 16px; | |
width: 100%; | |
} | |
input:focus, | |
textarea:focus { | |
border: 1px solid #999; | |
outline: none; | |
} | |
input[type="checkbox"], | |
input[type="image"], | |
input[type="radio"] { | |
width: auto; | |
} | |
::-moz-placeholder { | |
color: #333; | |
font-weight: 300; | |
opacity: 1; | |
} | |
::-webkit-input-placeholder { | |
color: #333; | |
font-weight: 300; | |
} | |
button, | |
input[type="button"], | |
input[type="reset"], | |
input[type="submit"], | |
.button { | |
background-color: #333; | |
border: 0; | |
color: #fff; | |
cursor: pointer; | |
font-size: 16px; | |
font-size: 1.6rem; | |
font-weight: 300; | |
padding: 16px 24px; | |
text-transform: uppercase; | |
width: auto; | |
} | |
button:hover, | |
input:hover[type="button"], | |
input:hover[type="reset"], | |
input:hover[type="submit"], | |
.button:hover, | |
button:focus, | |
input:focus[type="button"], | |
input:focus[type="reset"], | |
input:focus[type="submit"], | |
.button:focus { | |
background-color: #c3251d; | |
color: #fff; | |
} | |
.entry-content .button:hover, | |
.entry-content .button:focus { | |
color: #fff; | |
} | |
.footer-widgets button, | |
.footer-widgets input[type="button"], | |
.footer-widgets input[type="reset"], | |
.footer-widgets input[type="submit"], | |
.footer-widgets .button { | |
background-color: #c3251d; | |
color: #fff; | |
} | |
.footer-widgets button:hover, | |
.footer-widgets input:hover[type="button"], | |
.footer-widgets input:hover[type="reset"], | |
.footer-widgets input:hover[type="submit"], | |
.footer-widgets .button:hover, | |
.footer-widgets button:focus, | |
.footer-widgets input:focus[type="button"], | |
.footer-widgets input:focus[type="reset"], | |
.footer-widgets input:focus[type="submit"], | |
.footer-widgets .button:focus { | |
background-color: #fff; | |
color: #333; | |
} | |
.button { | |
display: inline-block; | |
} | |
input[type="search"]::-webkit-search-cancel-button, | |
input[type="search"]::-webkit-search-results-button { | |
display: none; | |
} | |
/* ## Tables | |
--------------------------------------------- */ | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
line-height: 2; | |
margin-bottom: 40px; | |
width: 100%; | |
} | |
tbody { | |
border-bottom: 1px solid #ddd; | |
} | |
td, | |
th { | |
text-align: left; | |
} | |
td { | |
border-top: 1px solid #ddd; | |
padding: 6px 0; | |
} | |
th { | |
font-weight: 400; | |
} | |
/* ## Screen Reader Text | |
--------------------------------------------- */ | |
.screen-reader-text, | |
.screen-reader-text span, | |
.screen-reader-shortcut { | |
position: absolute !important; | |
clip: rect(0, 0, 0, 0); | |
height: 1px; | |
width: 1px; | |
border: 0; | |
overflow: hidden; | |
} | |
.screen-reader-text:focus, | |
.screen-reader-shortcut:focus, | |
.genesis-nav-menu .search input[type="submit"]:focus, | |
.widget_search input[type="submit"]:focus { | |
clip: auto !important; | |
height: auto; | |
width: auto; | |
display: block; | |
font-size: 1em; | |
font-weight: bold; | |
padding: 15px 23px 14px; | |
color: #333; | |
background: #fff; | |
z-index: 100000; /* Above WP toolbar. */ | |
text-decoration: none; | |
box-shadow: 0 0 2px 2px rgba(0,0,0,.6); | |
} | |
.more-link { | |
position: relative; | |
} | |
/* # Structure and Layout | |
---------------------------------------------------------------------------------------------------- */ | |
/* ## Site Containers | |
--------------------------------------------- */ | |
.site-inner, | |
.wrap { | |
margin: 0 auto; | |
max-width: 1200px; | |
} | |
.site-inner { | |
clear: both; | |
padding-top: 40px; | |
} | |
/* ## Column Widths and Positions | |
--------------------------------------------- */ | |
/* ### Wrapping div for .content and .sidebar-primary */ | |
.content-sidebar-sidebar .content-sidebar-wrap, | |
.sidebar-content-sidebar .content-sidebar-wrap, | |
.sidebar-sidebar-content .content-sidebar-wrap { | |
width: 980px; | |
} | |
.content-sidebar-sidebar .content-sidebar-wrap { | |
float: left; | |
} | |
.sidebar-content-sidebar .content-sidebar-wrap, | |
.sidebar-sidebar-content .content-sidebar-wrap { | |
float: right; | |
} | |
/* ### Content */ | |
.content { | |
float: right; | |
width: 800px; | |
} | |
.content-sidebar .content, | |
.content-sidebar-sidebar .content, | |
.sidebar-content-sidebar .content { | |
float: left; | |
} | |
.content-sidebar-sidebar .content, | |
.sidebar-content-sidebar .content, | |
.sidebar-sidebar-content .content { | |
width: 580px; | |
} | |
.full-width-content .content { | |
width: 100%; | |
} | |
/* ### Primary Sidebar */ | |
.sidebar-primary { | |
float: right; | |
width: 360px; | |
} | |
.sidebar-content .sidebar-primary, | |
.sidebar-sidebar-content .sidebar-primary { | |
float: left; | |
} | |
/* ### Secondary Sidebar */ | |
.sidebar-secondary { | |
float: left; | |
width: 180px; | |
} | |
.content-sidebar-sidebar .sidebar-secondary { | |
float: right; | |
} | |
/* ## Column Classes | |
--------------------------------------------- */ | |
/* Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css */ | |
.five-sixths, | |
.four-sixths, | |
.one-fourth, | |
.one-half, | |
.one-sixth, | |
.one-third, | |
.three-fourths, | |
.three-sixths, | |
.two-fourths, | |
.two-sixths, | |
.two-thirds { | |
float: left; | |
margin-left: 2.564102564102564%; | |
} | |
.one-half, | |
.three-sixths, | |
.two-fourths { | |
width: 48.717948717948715%; | |
} | |
.one-third, | |
.two-sixths { | |
width: 31.623931623931625%; | |
} | |
.four-sixths, | |
.two-thirds { | |
width: 65.81196581196582%; | |
} | |
.one-fourth { | |
width: 23.076923076923077%; | |
} | |
.three-fourths { | |
width: 74.35897435897436%; | |
} | |
.one-sixth { | |
width: 14.52991452991453%; | |
} | |
.five-sixths { | |
width: 82.90598290598291%; | |
} | |
.first { | |
clear: both; | |
margin-left: 0; | |
} | |
/* # Common Classes | |
---------------------------------------------------------------------------------------------------- */ | |
/* ## Avatar | |
--------------------------------------------- */ | |
.avatar { | |
float: left; | |
} | |
.alignleft .avatar, | |
.author-box .avatar { | |
margin-right: 24px; | |
} | |
.alignright .avatar { | |
margin-left: 24px; | |
} | |
.comment .avatar { | |
margin: 0 16px 24px 0; | |
} | |
/* ## Genesis | |
--------------------------------------------- */ | |
.breadcrumb { | |
margin-bottom: 20px; | |
} | |
.archive-description, | |
.author-box { | |
background-color: #fff; | |
font-size: 16px; | |
font-size: 1.6rem; | |
margin-bottom: 40px; | |
padding: 40px; | |
} | |
.author-box-title { | |
font-size: 16px; | |
font-size: 1.6rem; | |
margin-bottom: 4px; | |
} | |
.archive-description p:last-child, | |
.author-box p:last-child { | |
margin-bottom: 0; | |
} | |
/* ## Search Form | |
--------------------------------------------- */ | |
.search-form { | |
overflow: hidden; | |
} | |
.site-header .search-form { | |
float: right; | |
margin-top: 12px; | |
} | |
.entry-content .search-form, | |
.site-header .search-form { | |
width: 50%; | |
} | |
.genesis-nav-menu .search input[type="submit"], | |
.widget_search input[type="submit"] { | |
border: 0; | |
clip: rect(0, 0, 0, 0); | |
height: 1px; | |
margin: -1px; | |
padding: 0; | |
position: absolute; | |
width: 1px; | |
} | |
/* ## Titles | |
--------------------------------------------- */ | |
.archive-title { | |
font-size: 20px; | |
font-size: 2rem; | |
} | |
.entry-title { | |
font-size: 36px; | |
font-size: 3.6rem; | |
} | |
.entry-title a, | |
.sidebar .widget-title a { | |
color: #333; | |
} | |
.entry-title a:hover, | |
.entry-title a:focus { | |
color: #c3251d; | |
} | |
.widget-title { | |
font-size: 18px; | |
font-size: 1.8rem; | |
margin-bottom: 20px; | |
} | |
.footer-widgets .widget-title { | |
color: #fff; | |
} | |
/* ## WordPress | |
--------------------------------------------- */ | |
a.aligncenter img { | |
display: block; | |
margin: 0 auto; | |
} | |
a.alignnone { | |
display: inline-block; | |
} | |
.alignleft { | |
float: left; | |
text-align: left; | |
} | |
.alignright { | |
float: right; | |
text-align: right; | |
} | |
a.alignleft, | |
a.alignnone, | |
a.alignright { | |
max-width: 100%; | |
} | |
img.centered, | |
.aligncenter { | |
display: block; | |
margin: 0 auto 24px; | |
} | |
img.alignnone, | |
.alignnone { | |
margin-bottom: 12px; | |
} | |
a.alignleft, | |
img.alignleft, | |
.wp-caption.alignleft { | |
margin: 0 24px 24px 0; | |
} | |
a.alignright, | |
img.alignright, | |
.wp-caption.alignright { | |
margin: 0 0 24px 24px; | |
} | |
.wp-caption-text { | |
font-size: 14px; | |
font-size: 1.4rem; | |
font-weight: 700; | |
text-align: center; | |
} | |
.entry-content p.wp-caption-text { | |
margin-bottom: 0; | |
} | |
.sticky { | |
} | |
.entry-content .wp-audio-shortcode, | |
.entry-content .wp-playlist, | |
.entry-content .wp-video { | |
margin: 0 0 28px; | |
} | |
/* # Widgets | |
---------------------------------------------------------------------------------------------------- */ | |
.widget { | |
word-wrap: break-word; | |
} | |
.widget ol > li { | |
list-style-position: inside; | |
list-style-type: decimal; | |
padding-left: 20px; | |
text-indent: -20px; | |
} | |
.widget li li { | |
border: 0; | |
margin: 0 0 0 30px; | |
padding: 0; | |
} | |
.widget_calendar table { | |
width: 100%; | |
} | |
.widget_calendar td, | |
.widget_calendar th { | |
text-align: center; | |
} | |
/* ## Featured Content | |
--------------------------------------------- */ | |
.featured-content .entry { | |
border-bottom: 2px solid #f5f5f5; | |
margin-bottom: 20px; | |
padding: 0 0 24px; | |
} | |
.footer-widgets .entry { | |
border-bottom: 1px dotted #666; | |
} | |
.featured-content .entry-title { | |
font-size: 20px; | |
font-size: 2rem; | |
} | |
/* # Plugins | |
---------------------------------------------------------------------------------------------------- */ | |
/* ## Genesis eNews Extended | |
--------------------------------------------- */ | |
.enews-widget, | |
.enews-widget .widget-title { | |
color: #fff; | |
} | |
.sidebar .widget.enews-widget { | |
background-color: #333; | |
} | |
.enews-widget input, | |
.enews-widget input:focus { | |
border: 1px solid #333; | |
} | |
.enews-widget input { | |
font-size: 16px; | |
font-size: 1.6rem; | |
margin-bottom: 16px; | |
} | |
.enews-widget input[type="submit"] { | |
background-color: #c3251d; | |
color: #fff; | |
margin: 0; | |
width: 100%; | |
} | |
.enews-widget input:hover[type="submit"], | |
.enews-widget input:focus[type="submit"] { | |
background-color: #fff; | |
color: #333; | |
} | |
.enews form + p { | |
margin-top: 24px; | |
} | |
/* ## Jetpack | |
--------------------------------------------- */ | |
#wpstats { | |
display: none; | |
} | |
/* # Skip Links | |
---------------------------------------------------------------------------------------------------- */ | |
.genesis-skip-link { | |
margin: 0; | |
} | |
.genesis-skip-link li { | |
height: 0; | |
width: 0; | |
list-style: none; | |
} | |
/* Display outline on focus */ | |
:focus { | |
color: #333; | |
outline: #ccc solid 1px; | |
} | |
/* # Site Header | |
---------------------------------------------------------------------------------------------------- */ | |
.site-header { | |
background-color: #fff; | |
} | |
/* ## Title Area | |
--------------------------------------------- */ | |
.title-area { | |
float: left; | |
padding: 10px 0; | |
} | |
.site-title { | |
font-size: 32px; | |
font-size: 3.2rem; | |
font-weight: 400; | |
line-height: 1.2; | |
margin-top: 15px; | |
} | |
.site-title a { | |
text-decoration: none; | |
} | |
.site-title a, | |
.site-title a:hover, | |
.site-title a:focus { | |
color: #333; | |
} | |
.header-image .site-title > a { | |
background: url(images/logo.png) no-repeat left; | |
float: left; | |
min-height: 60px; | |
width: 100%; | |
} | |
.site-description { | |
font-size: 16px; | |
font-size: 1.6rem; | |
font-weight: 300; | |
line-height: 1.5; | |
} | |
.site-description, | |
.site-title { | |
margin-bottom: 0; | |
} | |
.header-image .site-description, | |
.header-image .site-title { | |
display: block; | |
text-indent: -9999px; | |
} | |
/* # Site Navigation | |
---------------------------------------------------------------------------------------------------- */ | |
.genesis-nav-menu { | |
clear: both; | |
font-size: 16px; | |
font-size: 1.6rem; | |
line-height: 1; | |
width: 100%; | |
} | |
.genesis-nav-menu .menu-item { | |
display: inline-block; | |
text-align: left; | |
} | |
.genesis-nav-menu a { | |
color: #333; | |
text-decoration: none; | |
display: block; | |
padding: 30px 24px; | |
} | |
.genesis-nav-menu a:hover, | |
.genesis-nav-menu a:focus, | |
.genesis-nav-menu .current-menu-item > a, | |
.genesis-nav-menu .sub-menu .current-menu-item > a:hover, | |
.genesis-nav-menu .sub-menu .current-menu-item > a:focus { | |
color: #c3251d; | |
text-decoration: underline; | |
} | |
.genesis-nav-menu .sub-menu { | |
left: -9999px; | |
opacity: 0; | |
position: absolute; | |
-webkit-transition: opacity .4s ease-in-out; | |
-moz-transition: opacity .4s ease-in-out; | |
-ms-transition: opacity .4s ease-in-out; | |
-o-transition: opacity .4s ease-in-out; | |
transition: opacity .4s ease-in-out; | |
width: 200px; | |
z-index: 99; | |
} | |
.genesis-nav-menu .sub-menu a { | |
background-color: #fff; | |
border: 1px solid #eee; | |
border-top: 0; | |
font-size: 14px; | |
font-size: 1.4rem; | |
padding: 20px; | |
position: relative; | |
width: 200px; | |
word-wrap: break-word; | |
} | |
.genesis-nav-menu .sub-menu .sub-menu { | |
margin: -55px 0 0 199px; | |
} | |
.genesis-nav-menu .menu-item:hover { | |
position: static; | |
} | |
.genesis-nav-menu .menu-item:hover > .sub-menu { | |
left: auto; | |
opacity: 1; | |
} | |
.genesis-nav-menu > .first > a { | |
padding-left: 0; | |
} | |
.genesis-nav-menu > .last > a { | |
padding-right: 0; | |
} | |
.genesis-nav-menu > .right { | |
color: #fff; | |
float: right; | |
list-style-type: none; | |
padding: 30px 0; | |
} | |
.genesis-nav-menu > .right > a { | |
display: inline; | |
padding: 0; | |
} | |
.genesis-nav-menu > .rss > a { | |
margin-left: 48px; | |
} | |
.genesis-nav-menu > .search { | |
padding: 10px 0 0; | |
} | |
/* ## Accessible Menu | |
--------------------------------------------- */ | |
.menu .menu-item:focus { | |
position: static; | |
} | |
.menu .menu-item > a:focus + ul.sub-menu, | |
.menu .menu-item.sfHover > ul.sub-menu { | |
left: auto; | |
opacity: 1; | |
} | |
.sub-menu-toggle, | |
.menu-toggle { | |
display: none; | |
visibility: hidden; | |
} | |
/* ## Site Header Navigation | |
--------------------------------------------- */ | |
.site-header .sub-menu { | |
border-top: 1px solid #eee; | |
} | |
.site-header .sub-menu .sub-menu { | |
margin-top: -56px; | |
} | |
.site-header .genesis-nav-menu li li { | |
margin-left: 0; | |
} | |
.site-header .nav-primary { | |
float: right; | |
background-color: transparent; | |
margin-top: 10px; | |
} | |
.site-header .nav-primary .genesis-nav-menu a { | |
color: #222; | |
text-decoration: none; | |
} | |
.site-header .nav-primary .genesis-nav-menu .current-menu-item > a, | |
.site-header .nav-primary .genesis-nav-menu a:hover { | |
color: #c3251d; | |
} | |
/* ## Primary Navigation | |
--------------------------------------------- */ | |
.nav-primary { | |
background-color: #333; | |
} | |
.nav-primary .genesis-nav-menu a { | |
color: #ccc; | |
text-decoration: none; | |
} | |
.nav-primary .genesis-nav-menu .sub-menu a { | |
color: #333; | |
} | |
.nav-primary .genesis-nav-menu .sub-menu a:hover, | |
.nav-primary .genesis-nav-menu .sub-menu a:focus, | |
.nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a { | |
color: #c3251d; | |
} | |
/* ## Secondary Navigation | |
--------------------------------------------- */ | |
.nav-secondary { | |
background-color: #fff; | |
} | |
/* # Content Area | |
---------------------------------------------------------------------------------------------------- */ | |
/* ## Entries | |
--------------------------------------------- */ | |
.entry { | |
margin-bottom: 40px; | |
padding: 50px 60px; | |
} | |
.content .entry { | |
background-color: #fff; | |
} | |
.entry-content ol, | |
.entry-content ul { | |
margin-bottom: 28px; | |
margin-left: 40px; | |
} | |
.entry-content ol > li { | |
list-style-type: decimal; | |
} | |
.entry-content ul > li { | |
list-style-type: disc; | |
} | |
.entry-content ol ol, | |
.entry-content ul ul { | |
margin-bottom: 0; | |
} | |
.entry-content code { | |
background-color: #333; | |
color: #ddd; | |
} | |
/* ## Entry Meta | |
--------------------------------------------- */ | |
p.entry-meta { | |
font-size: 16px; | |
font-size: 1.6rem; | |
margin-bottom: 0; | |
} | |
.entry-header .entry-meta { | |
margin-bottom: 24px; | |
} | |
.entry-footer .entry-meta { | |
border-top: 2px solid #f5f5f5; | |
padding-top: 24px; | |
} | |
.entry-categories, | |
.entry-tags { | |
display: block; | |
} | |
.entry-comments-link::before { | |
content: "\2014"; | |
margin: 0 6px 0 2px; | |
} | |
/* ## Pagination | |
--------------------------------------------- */ | |
.pagination { | |
clear: both; | |
margin: 40px 0; | |
} | |
.adjacent-entry-pagination { | |
margin-bottom: 0; | |
} | |
.archive-pagination li { | |
display: inline; | |
} | |
.archive-pagination li a { | |
background-color: #333; | |
color: #fff; | |
cursor: pointer; | |
display: inline-block; | |
font-size: 16px; | |
font-size: 1.6rem; | |
padding: 8px 12px; | |
text-decoration: none; | |
} | |
.archive-pagination li a:hover, | |
.archive-pagination li a:focus, | |
.archive-pagination .active a { | |
background-color: #c3251d; | |
text-decoration: underline; | |
} | |
/* ## Comments | |
--------------------------------------------- */ | |
.comment-respond, | |
.entry-comments, | |
.entry-pings { | |
background-color: #fff; | |
margin-bottom: 40px; | |
} | |
.comment-respond, | |
.entry-pings { | |
padding: 40px 40px 16px; | |
} | |
.entry-comments { | |
padding: 40px; | |
} | |
.comment-header { | |
font-size: 16px; | |
font-size: 1.6rem; | |
} | |
li.comment { | |
background-color: #f5f5f5; | |
border: 2px solid #fff; | |
border-right: 0; | |
} | |
.comment-content { | |
clear: both; | |
word-wrap: break-word; | |
} | |
.comment-list li { | |
margin-top: 24px; | |
padding: 32px; | |
} | |
.comment-list li li { | |
margin-right: -32px; | |
} | |
.comment-respond input[type="email"], | |
.comment-respond input[type="text"], | |
.comment-respond input[type="url"] { | |
width: 50%; | |
} | |
.comment-respond label { | |
display: block; | |
margin-right: 12px; | |
} | |
.entry-comments .comment-author { | |
margin-bottom: 0; | |
} | |
.entry-pings .reply { | |
display: none; | |
} | |
.bypostauthor { | |
} | |
.form-allowed-tags { | |
background-color: #f5f5f5; | |
font-size: 16px; | |
font-size: 1.6rem; | |
padding: 24px; | |
} | |
/* # Sidebars | |
---------------------------------------------------------------------------------------------------- */ | |
.sidebar { | |
font-size: 16px; | |
font-size: 1.6rem; | |
} | |
.sidebar li { | |
border-bottom: 1px dotted #ddd; | |
margin-bottom: 10px; | |
padding-bottom: 10px; | |
} | |
.sidebar p:last-child, | |
.sidebar ul > li:last-child { | |
margin-bottom: 0; | |
} | |
.sidebar .widget { | |
background-color: #fff; | |
margin-bottom: 40px; | |
padding: 40px; | |
} | |
/* # Footer Widgets | |
---------------------------------------------------------------------------------------------------- */ | |
.footer-widgets { | |
background-color: #333; | |
clear: both; | |
padding-top: 40px; | |
} | |
.footer-widgets, | |
.footer-widgets a { | |
color: #aaa; | |
} | |
.footer-widgets input { | |
border: 1px solid #333; | |
} | |
.footer-widgets a.button, | |
.footer-widgets a:hover, | |
.footer-widgets a:focus { | |
color: #fff; | |
} | |
.footer-widgets li { | |
border-bottom: 1px dotted #666; | |
margin-bottom: 10px; | |
padding-bottom: 10px; | |
} | |
.footer-widgets .widget { | |
margin-bottom: 40px; | |
} | |
.footer-widgets p:last-child { | |
margin-bottom: 0; | |
} | |
.footer-widgets-1, | |
.footer-widgets-2, | |
.footer-widgets-3 { | |
width: 340px; | |
} | |
.footer-widgets-1 { | |
margin-right: 60px; | |
} | |
.footer-widgets-1, | |
.footer-widgets-2 { | |
float: left; | |
} | |
.footer-widgets-3 { | |
float: right; | |
} | |
/* # Site Footer | |
---------------------------------------------------------------------------------------------------- */ | |
.site-footer { | |
background-color: #fff; | |
font-size: 16px; | |
font-size: 1.6rem; | |
line-height: 1; | |
padding: 40px 0; | |
text-align: center; | |
} | |
.site-footer p { | |
margin-bottom: 0; | |
} | |
/* # Media Queries | |
---------------------------------------------------------------------------------------------------- */ | |
@media only screen and (max-width: 1200px) { | |
.site-inner, | |
.wrap { | |
max-width: 960px; | |
} | |
.content-sidebar-sidebar .content-sidebar-wrap, | |
.sidebar-content-sidebar .content-sidebar-wrap, | |
.sidebar-sidebar-content .content-sidebar-wrap { | |
width: 740px; | |
} | |
.content { | |
width: 620px; | |
} | |
.sidebar-content-sidebar .content, | |
.sidebar-sidebar-content .content, | |
.content-sidebar-sidebar .content { | |
width: 400px; | |
} | |
.footer-widgets-1, | |
.footer-widgets-2, | |
.footer-widgets-3, | |
.sidebar-primary { | |
width: 300px; | |
} | |
.footer-widgets-1 { | |
margin-right: 30px; | |
} | |
} | |
@media only screen and (max-width: 960px) { | |
.site-inner, | |
.wrap { | |
max-width: 800px; | |
} | |
.content, | |
.content-sidebar-sidebar .content, | |
.content-sidebar-sidebar .content-sidebar-wrap, | |
.sidebar-content-sidebar .content, | |
.sidebar-content-sidebar .content-sidebar-wrap, | |
.footer-widgets-1, | |
.footer-widgets-2, | |
.footer-widgets-3, | |
.sidebar-primary, | |
.sidebar-secondary, | |
.sidebar-sidebar-content .content, | |
.sidebar-sidebar-content .content-sidebar-wrap { | |
width: 100%; | |
} | |
.site-header .wrap { | |
padding: 20px 0; | |
} | |
.header-image .site-title > a { | |
background-position: center top; | |
} | |
.genesis-nav-menu li, | |
.site-header ul.genesis-nav-menu, | |
.site-header .search-form { | |
float: none; | |
} | |
.genesis-nav-menu, | |
.site-description, | |
.site-header .search-form { | |
text-align: center; | |
} | |
.genesis-nav-menu a, | |
.genesis-nav-menu > .first > a, | |
.genesis-nav-menu > .last > a { | |
padding: 20px 16px; | |
} | |
.site-header .search-form { | |
margin: 16px auto; | |
} | |
.genesis-nav-menu li.right { | |
display: none; | |
} | |
.footer-widgets-1 { | |
margin-right: 0; | |
} | |
.title-area { | |
margin-top: 6px; | |
} | |
.site-title { | |
margin-top: 0; | |
} | |
.site-header nav.nav-primary { | |
float: none; | |
width: 100%; | |
} | |
.nav-primary .genesis-nav-menu .current-menu-item > a { | |
text-decoration: none; | |
} | |
.js nav { | |
display: none; | |
position: relative; | |
} | |
.js nav .wrap { | |
padding: 0; | |
} | |
.js nav.pagination { | |
display: block; | |
} | |
.menu-toggle, | |
.sub-menu-toggle { | |
background-color: transparent; | |
color: #333; | |
display: block; | |
margin: 0 auto; | |
overflow: hidden; | |
text-align: center; | |
visibility: visible; | |
} | |
.sub-menu-toggle:hover, | |
.sub-menu-toggle:focus { | |
background-color: transparent; | |
} | |
/* remove dotted line on focus */ | |
/*.sub-menu-toggle:focus { | |
outline: none; | |
}*/ | |
.menu-toggle { | |
position: relative; | |
right: 0; | |
z-index: 1000; | |
} | |
.menu-toggle:before, | |
.menu-toggle.activated:before { | |
content: "\f333"; | |
display: inline-block; | |
font: normal 20px/1 'dashicons'; | |
margin: 0 auto; | |
padding-right: 10px; | |
text-rendering: auto; | |
-webkit-transform: translate(0, 0); | |
-ms-transform: translate(0, 0); | |
transform: translate(0, 0); | |
vertical-align: top; | |
padding-top: 3px; | |
} | |
.sub-menu-toggle { | |
float: right; | |
padding: 18px; | |
position: absolute; | |
right: 0; | |
top: 0; | |
z-index: 100; | |
} | |
.sub-menu-toggle:before { | |
content: "\f347"; | |
display: inline-block; | |
font: normal 16px/1 'dashicons'; | |
text-rendering: auto; | |
-webkit-transform: translate(0, 0); | |
-ms-transform: translate(0, 0); | |
transform: translate(0, 0); | |
} | |
.sub-menu-toggle.activated:before { | |
content: "\f343"; | |
} | |
.js .genesis-nav-menu .menu-item { | |
display: block; | |
float: none; | |
position: relative; | |
text-align: left; | |
} | |
.js .genesis-nav-menu .menu-item:hover { | |
position: relative; | |
} | |
.js .genesis-nav-menu .menu-item a { | |
border: none; | |
padding: 20px; | |
width: 100%; | |
} | |
.js .genesis-nav-menu .menu-item a:hover, | |
.js .genesis-nav-menu .sub-menu { | |
border: none; | |
} | |
.js .genesis-nav-menu .menu-item > a:focus ul.sub-menu, | |
.js .genesis-nav-menu .menu-item > a:focus ul.sub-menu .sub-menu { | |
left: 0; | |
margin-left: 0; | |
} | |
.js .genesis-nav-menu > .menu-item-has-children > a:after { | |
content: none; | |
} | |
.js .genesis-nav-menu .sub-menu { | |
clear: both; | |
display: none; | |
margin: 0; | |
opacity: 1; | |
position: static; | |
width: 100%; | |
padding-left: 20px; | |
} | |
.js .genesis-nav-menu .sub-menu .sub-menu { | |
margin: 0; | |
} | |
.js .genesis-nav-menu .sub-menu a { | |
border: none; | |
} | |
.js .menu-toggle:hover, | |
.js .menu-toggle:focus, | |
.js .sub-menu-toggle:hover, | |
.js .sub-menu-toggle:focus, | |
.nav-primary .genesis-nav-menu .current-menu-item > a { | |
color: #c3251d; | |
} | |
} | |
@media only screen and (max-width: 800px) { | |
body { | |
background-color: #fff; | |
font-size: 16px; | |
font-size: 1.6rem; | |
} | |
.site-header .wrap, | |
.site-inner, | |
.wrap { | |
padding-left: 5%; | |
padding-right: 5%; | |
} | |
.archive-description, | |
.author-box, | |
.comment-respond, | |
.entry, | |
.entry-comments, | |
.entry-pings, | |
.sidebar .widget, | |
.site-header { | |
padding: 0; | |
} | |
.archive-pagination li a { | |
margin-bottom: 4px; | |
} | |
.five-sixths, | |
.four-sixths, | |
.one-fourth, | |
.one-half, | |
.one-sixth, | |
.one-third, | |
.three-fourths, | |
.three-sixths, | |
.two-fourths, | |
.two-sixths, | |
.two-thirds { | |
margin: 0; | |
width: 100%; | |
} | |
.sidebar .widget.enews-widget { | |
padding: 40px; | |
} | |
} | |
/* if you'd like to show the mobile menu icon in a separate line below the site title at a specific width, use the sample code below */ | |
/*@media only screen and (max-width: 448px) { | |
.title-area { | |
float: none; | |
} | |
.site-title { | |
text-align: center; | |
} | |
.site-header button.nav-primary { | |
float: none; | |
} | |
}*/ | |
/* # Print Styles | |
---------------------------------------------------------------------------------------------------- */ | |
@media print { | |
*, | |
*:before, | |
*:after { | |
background: transparent !important; | |
box-shadow: none !important; | |
color: #000 !important; | |
text-shadow: none !important; | |
} | |
a, | |
a:visited { | |
text-decoration: underline; | |
} | |
a[href]:after { | |
content: " (" attr(href) ")"; | |
} | |
abbr[title]:after { | |
content: " (" attr(title) ")"; | |
} | |
a[href^="javascript:"]:after, | |
a[href^="#"]:after, | |
.site-title > a:after { | |
content: ""; | |
} | |
thead { | |
display: table-header-group; | |
} | |
img, | |
tr { | |
page-break-inside: avoid; | |
} | |
img { | |
max-width: 100% !important; | |
} | |
@page { | |
margin: 2cm 0.5cm; | |
} | |
p, | |
h2, | |
h3 { | |
orphans: 3; | |
widows: 3; | |
} | |
blockquote, | |
pre { | |
border: 1px solid #999; | |
page-break-inside: avoid; | |
} | |
.content, | |
.content-sidebar { | |
width: 100%; | |
} | |
button, | |
input, | |
select, | |
textarea, | |
.breadcrumb, | |
.comment-edit-link, | |
.comment-form, | |
.comment-list .reply a, | |
.comment-reply-title, | |
.edit-link, | |
.entry-comments-link, | |
.entry-footer, | |
.genesis-box, | |
.header-widget-area, | |
.hidden-print, | |
.home-top, | |
.nav-primary, | |
.nav-secondary, | |
.post-edit-link, | |
.sidebar { | |
display: none !important; | |
} | |
.title-area { | |
text-align: center; | |
width: 100%; | |
} | |
.site-title > a { | |
margin: 0; | |
text-decoration: none; | |
text-indent: 0; | |
} | |
.site-inner { | |
padding-top: 0; | |
position: relative; | |
top: -100px; | |
} | |
.author-box { | |
margin-bottom: 0; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
orphans: 3; | |
page-break-after: avoid; | |
page-break-inside: avoid; | |
widows: 3; | |
} | |
img { | |
page-break-after: avoid; | |
page-break-inside: avoid; | |
} | |
blockquote, | |
pre, | |
table { | |
page-break-inside: avoid; | |
} | |
dl, | |
ol, | |
ul { | |
page-break-before: avoid; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment