Created
April 26, 2018 05:20
-
-
Save dvliman/4bbb44f4fd34b72439cd53de31a274f4 to your computer and use it in GitHub Desktop.
style.css
This file contains hidden or 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
/* | |
Theme Name: Wellington | |
Theme URI: https://themezee.com/themes/wellington/ | |
Author: ThemeZee | |
Author URI: https://themezee.com | |
Description: Wellington is a clean and simple Magazine WordPress theme with beautiful typography and subtle colors. The theme includes two different post layouts, a featured post slider and thoughtful theme settings in the Customizer. | |
Version: 1.3 | |
License: GNU General Public License v2 or later | |
License URI: http://www.gnu.org/licenses/gpl-2.0.html | |
Text Domain: wellington | |
Tags: two-columns, blog, news, custom-background, custom-header, custom-logo, custom-menu, grid-layout, entertainment, editor-style, rtl-language-support, featured-image-header, featured-images, flexible-header, custom-colors, full-width-template, sticky-post, threaded-comments, translation-ready, theme-options, one-column, left-sidebar, right-sidebar, three-columns | |
This theme, like WordPress, is licensed under the GPL. | |
Use it to make something cool, have fun, and share what you've learned with others. | |
Wellington is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc. | |
Normalizing styles have been helped along thanks to the fine work of | |
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ | |
*/ | |
/*-------------------------------------------------------------- | |
>>> TABLE OF CONTENTS: | |
---------------------------------------------------------------- | |
1.0 - Normalize | |
2.0 - Typography | |
3.0 - Elements | |
4.0 - Forms | |
5.0 - Accessibility | |
6.0 - Alignments | |
7.0 - Clearings | |
8.0 - Layout Structure | |
9.0 - Header | |
10.0 - Navigation | |
11.0 - Widgets | |
11.1 - Default Widgets | |
11.2 - Magazine Posts Widgets | |
12.0 - Posts and pages | |
11.0 - Comments | |
12.0 - Footer | |
13.0 - Media | |
13.1 - Captions | |
13.2 - Galleries | |
14.0 - Media Queries | |
14.1 - Desktop Large ( < 1120px ) | |
14.2 - Desktop Medium ( < 1040px ) | |
14.3 - Desktop Small ( < 960px ) | |
14.4 - Tablet Large ( < 880px ) | |
14.5 - Tablet Medium ( < 800px ) | |
14.6 - Tablet Small ( < 720px ) | |
14.7 - Mobile Extra Large ( < 640px ) | |
14.8 - Mobile Large ( < 560px ) | |
14.9 - Mobile Medium ( < 480px ) | |
14.10 - Mobile Small ( < 320px ) | |
15.0 - Theme Option Styles | |
15.1 - Sidebar Left Layout | |
15.2 - Sticky Header | |
16.0 - Media Query Fixes | |
--------------------------------------------------------------*/ | |
/*-------------------------------------------------------------- | |
# 1.0 - Normalize | |
--------------------------------------------------------------*/ | |
html { | |
font-family: sans-serif; | |
-webkit-text-size-adjust: 100%; | |
-ms-text-size-adjust: 100%; | |
} | |
body { | |
margin: 0; | |
} | |
article, | |
aside, | |
details, | |
figcaption, | |
figure, | |
footer, | |
header, | |
main, | |
menu, | |
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-color: transparent; | |
} | |
a:active, | |
a:hover { | |
outline: 0; | |
} | |
abbr[title] { | |
border-bottom: 1px dotted; | |
} | |
b, | |
strong { | |
font-weight: bold; | |
} | |
dfn { | |
font-style: italic; | |
} | |
h1 { | |
margin: 0.67em 0; | |
font-size: 2em; | |
} | |
mark { | |
background: #ff0; | |
color: #000; | |
} | |
small { | |
font-size: 80%; | |
} | |
sub, | |
sup { | |
position: relative; | |
vertical-align: baseline; | |
font-size: 75%; | |
line-height: 0; | |
} | |
sup { | |
top: -0.5em; | |
} | |
sub { | |
bottom: -0.25em; | |
} | |
img { | |
border: 0; | |
} | |
svg:not(:root) { | |
overflow: hidden; | |
} | |
figure { | |
margin: 1em 0; | |
} | |
hr { | |
box-sizing: content-box; | |
height: 0; | |
} | |
pre { | |
overflow: auto; | |
} | |
code, | |
kbd, | |
pre, | |
samp { | |
font-size: 1em; | |
font-family: monospace, monospace; | |
} | |
button, | |
input, | |
optgroup, | |
select, | |
textarea { | |
margin: 0; | |
color: inherit; | |
font: inherit; | |
} | |
button { | |
overflow: visible; | |
} | |
button, | |
select { | |
text-transform: none; | |
} | |
button, | |
html input[type="button"], | |
input[type="reset"], | |
input[type="submit"] { | |
cursor: pointer; | |
-webkit-appearance: button; | |
} | |
button[disabled], | |
html input[disabled] { | |
cursor: default; | |
} | |
button::-moz-focus-inner, | |
input::-moz-focus-inner { | |
padding: 0; | |
border: 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"] { | |
box-sizing: content-box; | |
-webkit-appearance: textfield; | |
} | |
input[type="search"]::-webkit-search-cancel-button, | |
input[type="search"]::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
fieldset { | |
margin: 0 2px; | |
padding: 0.35em 0.625em 0.75em; | |
border: 1px solid #c0c0c0; | |
} | |
legend { | |
padding: 0; | |
border: 0; | |
} | |
textarea { | |
overflow: auto; | |
} | |
optgroup { | |
font-weight: bold; | |
} | |
table { | |
border-spacing: 0; | |
border-collapse: collapse; | |
} | |
td, | |
th { | |
padding: 0; | |
} | |
/*-------------------------------------------------------------- | |
# 2.0 - Typography | |
--------------------------------------------------------------*/ | |
body, | |
button, | |
input, | |
select, | |
textarea { | |
color: #303030; | |
font-size: 17px; | |
font-size: 1.0625rem; | |
font-family: 'Gudea', Tahoma, Arial; | |
line-height: 1.75; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
clear: both; | |
} | |
p { | |
margin-bottom: 1.5em; | |
} | |
dfn, | |
cite, | |
em, | |
i { | |
font-style: italic; | |
} | |
blockquote { | |
margin: 0 1.5em; | |
} | |
address { | |
margin: 0 0 1.5em; | |
} | |
pre { | |
overflow: auto; | |
margin-bottom: 1.6em; | |
padding: 1.6em; | |
max-width: 100%; | |
border: 1px solid #ddd; | |
background: #fff; | |
font-size: 15px; | |
font-size: 0.9375rem; | |
font-family: "Courier 10 Pitch", Courier, monospace; | |
line-height: 1.6; | |
} | |
code, | |
kbd, | |
tt, | |
var { | |
font-size: 15px; | |
font-size: 0.9375rem; | |
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; | |
} | |
abbr, | |
acronym { | |
border-bottom: 1px dotted #666; | |
cursor: help; | |
} | |
mark, | |
ins { | |
text-decoration: none; | |
} | |
big { | |
font-size: 125%; | |
} | |
/*-------------------------------------------------------------- | |
# 3.0 - Elements | |
--------------------------------------------------------------*/ | |
html { | |
box-sizing: border-box; | |
} | |
*, | |
*:before, | |
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ | |
box-sizing: inherit; | |
} | |
body { | |
background: #e5e5e5; /* Fallback for when there is no custom background color defined. */ | |
} | |
blockquote { | |
margin: 0 0 1.5em; | |
padding-left: 1.25em; | |
border-left: 4px solid #303030; | |
color: #777; | |
font-style: italic; | |
font-size: 18px; | |
font-size: 1.125rem; | |
} | |
blockquote cite, | |
blockquote small { | |
display: block; | |
margin-top: 1em; | |
color: #303030; | |
font-size: 16px; | |
font-size: 1rem; | |
line-height: 1.75; | |
} | |
blockquote cite:before, | |
blockquote small:before { | |
content: "\2014\00a0"; | |
} | |
blockquote em, | |
blockquote i, | |
blockquote cite { | |
font-style: normal; | |
} | |
blockquote > :last-child { | |
margin-bottom: 0.5em; | |
} | |
hr { | |
margin-bottom: 1.5em; | |
height: 1px; | |
border: 0; | |
background-color: #ccc; | |
} | |
ul, | |
ol { | |
margin: 0 0 1.5em; | |
padding: 0 0 0 1.25em; | |
} | |
ul { | |
list-style: disc; | |
} | |
ol { | |
list-style: decimal; | |
} | |
li > ul, | |
li > ol { | |
margin-bottom: 0; | |
margin-left: 1.5em; | |
} | |
dt { | |
font-weight: bold; | |
} | |
dd { | |
margin: 0 0 1.5em; | |
} | |
img { | |
max-width: 100%; /* Adhere to container width. */ | |
height: auto; /* Make sure images are scaled correctly. */ | |
} | |
table { | |
margin: 0 0 1.5em; | |
width: 100%; | |
border: none; | |
table-layout: fixed; | |
} | |
th, | |
td { | |
padding: 0.3em 0.6em; | |
border: 1px solid #ddd; | |
} | |
a { | |
color: #ee3333; | |
text-decoration: none; | |
} | |
a:link, | |
a:visited { | |
color: #ee3333; | |
} | |
a:hover, | |
a:focus, | |
a:active { | |
color: #303030; | |
} | |
a:focus { | |
outline: thin dotted; | |
} | |
a:hover, | |
a:active { | |
outline: 0; | |
} | |
/*-------------------------------------------------------------- | |
# 4.0 - Forms | |
--------------------------------------------------------------*/ | |
button, | |
input[type="button"], | |
input[type="reset"], | |
input[type="submit"] { | |
margin: 0; | |
padding: 0.6em 1em; | |
border: none; | |
background: #ee3333; | |
color: #fff; | |
text-decoration: none; | |
font-size: 17px; | |
font-size: 1.0625rem; | |
} | |
button:hover, | |
input[type="button"]:hover, | |
input[type="reset"]:hover, | |
input[type="submit"]:hover, | |
button:focus, | |
input[type="button"]:focus, | |
input[type="reset"]:focus, | |
input[type="submit"]:focus, | |
button:active, | |
input[type="button"]:active, | |
input[type="reset"]:active, | |
input[type="submit"]:active { | |
background: #303030; | |
} | |
input[type="text"], | |
input[type="email"], | |
input[type="url"], | |
input[type="password"], | |
input[type="search"], | |
textarea { | |
padding: 0.3em 0.6em; | |
max-width: 100%; | |
border: 1px solid #ddd; | |
color: #666; | |
} | |
input[type="text"]:focus, | |
input[type="email"]:focus, | |
input[type="url"]:focus, | |
input[type="password"]:focus, | |
input[type="search"]:focus, | |
textarea:focus { | |
border: 1px solid #ccc; | |
color: #111; | |
} | |
textarea { | |
width: 100%; | |
} | |
/*-------------------------------------------------------------- | |
# 5.0 - Accessibility | |
--------------------------------------------------------------*/ | |
/* Text meant only for screen readers. */ | |
.screen-reader-text { | |
position: absolute !important; | |
overflow: hidden; | |
clip: rect(1px, 1px, 1px, 1px); | |
width: 1px; | |
height: 1px; | |
} | |
.screen-reader-text:hover, | |
.screen-reader-text:active, | |
.screen-reader-text:focus { | |
top: 5px; | |
left: 5px; | |
z-index: 100000; /* Above WP toolbar. */ | |
display: block; | |
clip: auto !important; | |
padding: 15px 23px 14px; | |
width: auto; | |
height: auto; | |
border-radius: 3px; | |
background-color: #f1f1f1; | |
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); | |
color: #21759b; | |
text-decoration: none; | |
font-weight: bold; | |
font-size: 14px; | |
font-size: 0.875rem; | |
line-height: normal; | |
} | |
/*-------------------------------------------------------------- | |
# 6.0 - Alignments | |
--------------------------------------------------------------*/ | |
.alignleft { | |
display: inline; | |
float: left; | |
margin-right: 1.5em; | |
} | |
.alignright { | |
display: inline; | |
float: right; | |
margin-left: 1.5em; | |
} | |
.aligncenter { | |
display: block; | |
clear: both; | |
margin-right: auto; | |
margin-left: auto; | |
} | |
/*-------------------------------------------------------------- | |
# 7.0 - Clearings | |
--------------------------------------------------------------*/ | |
.clearfix:before, | |
.clearfix:after, | |
.post-navigation .nav-links:before, | |
.post-navigation .nav-links:after, | |
.comment-navigation:before, | |
.comment-navigation:after { | |
display: table; | |
content: ""; | |
} | |
.clearfix:after, | |
.post-navigation .nav-links:after, | |
.comment-navigation:after { | |
clear: both; | |
} | |
/*-------------------------------------------------------------- | |
# 8.0 - Layout Structure | |
--------------------------------------------------------------*/ | |
.site { | |
margin: 2em auto; | |
padding: 0; | |
max-width: 1280px; | |
width: 100%; | |
background: #fff; | |
box-shadow: 0 0 2px #aaa; | |
} | |
.site-content { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-flow: row wrap; | |
flex-flow: row wrap; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
} | |
.content-area { | |
box-sizing: border-box; | |
padding: 3em 3em 0; | |
width: 70%; | |
} | |
.sidebar { | |
box-sizing: border-box; | |
padding: 3em 3em 0; | |
width: 30%; | |
border-left: 1px solid #ddd; | |
background: #fafafa; | |
} | |
/* No Sidebar & Centered Layout Template */ | |
.no-sidebar .site-content, | |
.centered-content-area { | |
display: block; | |
} | |
.no-sidebar .content-area, | |
.site-content .centered-content-area { | |
margin: 0 auto; | |
max-width: 900px; | |
width: 100%; | |
} | |
/* Fullwidth Template */ | |
.site-content .fullwidth-content-area { | |
float: none; | |
margin: 0; | |
max-width: 100%; | |
width: 100%; | |
} | |
/*-------------------------------------------------------------- | |
# 9.0 - Header | |
--------------------------------------------------------------*/ | |
.header-main { | |
padding: 2.5em 3em; | |
} | |
.site-branding { | |
float: left; | |
margin: 0; | |
padding: 0; | |
max-width: 100%; | |
} | |
.site-branding a:link, | |
.site-branding a:visited, | |
.site-branding a:hover { | |
padding: 0; | |
border: none; | |
text-decoration: none; | |
} | |
.site-title { | |
display: inline-block; | |
margin: 0; | |
padding: 0; | |
color: #303030; | |
text-decoration: none; | |
font-weight: bold; | |
font-size: 44px; | |
font-size: 2.75rem; | |
font-family: 'Magra', sans-serif; | |
} | |
.site-title a:link, | |
.site-title a:visited { | |
color: #303030; | |
} | |
.site-title a:hover, | |
.site-title a:active { | |
color: #ee3333; | |
} | |
.site-branding .custom-logo { | |
margin: 0.5em 1em 0 0; | |
padding: 0; | |
max-width: 100%; | |
height: auto; | |
border: none; | |
vertical-align: top; | |
} | |
.site-description { | |
margin: -0.3em 0 0.75em; | |
} | |
/* Header Widgets */ | |
.header-widgets { | |
display: inline; | |
} | |
.header-widget { | |
float: right; | |
margin: 0.75em 0 0.25em 1.5em; | |
} | |
.header-widget ul { | |
margin: 0; | |
padding: 0; | |
} | |
.header-widget-title { | |
margin: 0 0 0.5em; | |
} | |
.header-widget img { | |
margin-top: -1em; | |
} | |
/* Custom Header Image */ | |
.header-image { | |
margin: 1px 0 0; | |
text-align: center; | |
} | |
.header-image img { | |
max-width: 100%; | |
vertical-align: top; | |
} | |
/*-------------------------------------------------------------- | |
# 10.0 - Navigation | |
--------------------------------------------------------------*/ | |
/*-------------------------------------------------------------- | |
## 10.1 - Main Navigation | |
--------------------------------------------------------------*/ | |
.primary-navigation-wrap { | |
position: relative; | |
background: #303030; | |
} | |
.main-navigation-toggle { | |
display: none; | |
} | |
.main-navigation-menu { | |
position: relative; | |
float: left; | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
list-style-position: outside; | |
list-style-type: none; | |
} | |
.main-navigation-menu li { | |
float: left; | |
} | |
.main-navigation-menu a { | |
display: block; | |
margin: 0; | |
padding: 1em 1.5em; | |
color: #fff; | |
text-decoration: none; | |
font-size: 17px; | |
font-size: 1.0625rem; | |
font-family: 'Gudea', Tahoma, Arial; | |
} | |
.main-navigation-menu > .menu-item-has-children > a:after { | |
display: inline-block; | |
margin: 0.5em 0 0 0.3em; | |
content: '\f431'; | |
vertical-align: top; | |
text-decoration: inherit; | |
font-size: 16px; | |
font-family: 'Genericons'; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.main-navigation-menu a:link, | |
.main-navigation-menu a:visited { | |
color: #fff; | |
text-decoration: none; | |
} | |
.main-navigation-menu a:hover, | |
.main-navigation-menu a:active { | |
color: rgba(255,255,255,0.5); | |
} | |
.main-navigation-menu ul { | |
position: absolute; | |
z-index: 99; | |
display: none; | |
margin: 0; | |
padding: 0; | |
border-top: 1px solid #fff; | |
background: #303030; | |
color: #fff; | |
list-style-position: outside; | |
list-style-type: none; | |
} | |
.main-navigation-menu ul li{ | |
position: relative; | |
float: none; | |
margin: 0; | |
} | |
.main-navigation-menu ul a { | |
padding: 1em; | |
min-width: 250px; | |
min-width: 16rem; | |
border-bottom: 1px solid rgba(255,255,255,0.1); | |
font-size: 14px; | |
font-size: 0.875rem; | |
} | |
.main-navigation-menu ul .menu-item-has-children > a:after { | |
display: inline-block; | |
margin: 0.3em 0 0 0.3em; | |
content: '\f431'; | |
vertical-align: top; | |
text-decoration: inherit; | |
font-size: 14px; | |
font-family: 'Genericons'; | |
line-height: 1; | |
-webkit-transform: rotate(270deg); | |
transform: rotate(270deg); | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.main-navigation-menu li ul ul { | |
top: 1px; | |
left: 100%; | |
border-top: none; | |
} | |
.main-navigation-menu li.menu-item-has-children:hover > ul, | |
.main-navigation-menu li.page_item_has_children:hover > ul, | |
.main-navigation-menu li.menu-item-has-children[aria-expanded="true"] > ul { | |
display: block; | |
} | |
.main-navigation-menu li.current-menu-item > a { | |
background: rgba(255,255,255,0.075); | |
} | |
/*-------------------------------------------------------------- | |
## 10.2 - Social Icons Menu | |
--------------------------------------------------------------*/ | |
.social-icons-menu { | |
margin: 0; | |
padding: 0; | |
list-style-position: outside; | |
list-style-type: none; | |
line-height: 1; | |
} | |
.social-icons-menu li { | |
float: left; | |
margin: 0; | |
padding: 0; | |
} | |
.social-icons-menu li a { | |
position: relative; | |
display: inline-block; | |
padding: 0.5em; | |
color: #fff; | |
text-decoration: none; | |
} | |
.social-icons-menu li a .screen-reader-text { | |
display: none; | |
} | |
/* Add Genericons */ | |
.social-icons-menu li a:before { | |
display: inline-block; | |
vertical-align: top; | |
text-decoration: inherit; | |
font-size: 16px; | |
font-family: 'Genericons'; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.social-icons-menu li a:before { content: '\f408'; } /* Default Icon */ | |
.social-icons-menu li a[href*="codepen.io"]:before { content: '\f216'; } | |
.social-icons-menu li a[href*="digg.com"]:before { content: '\f221'; } | |
.social-icons-menu li a[href*="dribbble.com"]:before { content: '\f201'; } | |
.social-icons-menu li a[href*="facebook.com"]:before { content: '\f204'; } | |
.social-icons-menu li a[href*="flickr.com"]:before { content: '\f211'; } | |
.social-icons-menu li a[href*="plus.google.com"]:before { content: '\f218'; } | |
.social-icons-menu li a[href*="github.com"]:before { content: '\f200'; } | |
.social-icons-menu li a[href*="instagram.com"]:before { content: '\f215'; } | |
.social-icons-menu li a[href*="linkedin.com"]:before { content: '\f207'; } | |
.social-icons-menu li a[href*="pinterest.com"]:before { content: '\f209'; } | |
.social-icons-menu li a[href*="polldaddy.com"]:before { content: '\f217'; } | |
.social-icons-menu li a[href*="getpocket.com"]:before { content: '\f224'; } | |
.social-icons-menu li a[href*="reddit.com"]:before { content: '\f222'; } | |
.social-icons-menu li a[href*="spotify.com"]:before { content: '\f515'; } | |
.social-icons-menu li a[href*="skype.com"]:before, | |
.social-icons-menu li a[href*="skype:"]:before { content: '\f220'; } | |
.social-icons-menu li a[href*="stumbleupon.com"]:before { content: '\f223'; } | |
.social-icons-menu li a[href*="tumblr.com"]:before { content: '\f214'; } | |
.social-icons-menu li a[href*="twitch.tv"]:before { content: '\f516'; } | |
.social-icons-menu li a[href*="twitter.com"]:before { content: '\f202'; } | |
.social-icons-menu li a[href*="vimeo.com"]:before { content: '\f212'; } | |
.social-icons-menu li a[href*="wordpress.org"]:before { content: '\f205'; } | |
.social-icons-menu li a[href*="wordpress.com"]:before { content: '\f205'; } | |
.social-icons-menu li a[href*="youtube.com"]:before { content: '\f213'; } | |
.social-icons-menu li a[href*="newsletter"]:before, | |
.social-icons-menu li a[href*="mailto"]:before { content: '\f410'; } | |
.social-icons-menu li a[href*="/feed"]:before, | |
.social-icons-menu li a[href*="/feed/"]:before, | |
.social-icons-menu li a[href*="?feed=rss2"]:before, | |
.social-icons-menu li a[href*="feedburner.google.com"]:before, | |
.social-icons-menu li a[href*="feedburner.com"]:before { content: '\f413'; } | |
/*-------------------------------------------------------------- | |
# 11.0 - Widgets | |
--------------------------------------------------------------*/ | |
.widget { | |
margin: 0 0 3em 0; | |
padding: 0; | |
max-width: 100%; | |
-ms-word-wrap: break-word; | |
word-wrap: break-word; | |
} | |
.widget-header { | |
margin: 0 0 1em 0; | |
} | |
.widget-title { | |
display: block; | |
margin: 0; | |
padding: 0; | |
color: #303030; | |
font-size: 20px; | |
font-size: 1.25rem; | |
font-family: 'Magra', Tahoma, Arial; | |
} | |
.widget ul { | |
margin: 0; | |
padding: 0; | |
list-style: circle inside; | |
} | |
.widget ul .children, | |
.widget ul .sub-menu { | |
margin: 0.5em 0 0.5em 1em; | |
padding: 0; | |
} | |
/* Make sure select elements fit in widgets. */ | |
.widget select { | |
max-width: 100%; | |
} | |
.widget-title a:link, | |
.widget-title a:visited { | |
color: #303030; | |
} | |
.widget-title a:hover, | |
.widget-title a:active { | |
color: #ee3333; | |
} | |
/*-------------------------------------------------------------- | |
## 11.1 - Default Widgets | |
--------------------------------------------------------------*/ | |
/* Theme Search Widget */ | |
.search-form { | |
position: relative; | |
display: block; | |
overflow: hidden; | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
} | |
.search-form .screen-reader-text { | |
display: none; | |
} | |
.search-form .search-field { | |
display: inline-block; | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0.5em 1.5em 0.5em 0.7em; | |
min-width: 300px; | |
width: 100%; | |
-webkit-appearance: none; | |
} | |
.search-form .search-submit { | |
position: absolute; | |
top: 0; | |
right: 0; | |
padding: 0.65em 0.75em 0 0.2em; | |
border: none; | |
cursor: pointer; | |
} | |
.search-form .search-submit .genericon-search { | |
display: inline-block; | |
padding: 0.05em 0 0.55em 0.45em; | |
color: #fff; | |
content: '\f400'; | |
vertical-align: middle; | |
text-decoration: inherit; | |
font-weight: normal; | |
font-style: normal; | |
font-size: 24px; | |
font-family: 'Genericons'; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
/*-------------------------------------------------------------- | |
## 11.2 - Magazine Posts Widgets | |
--------------------------------------------------------------*/ | |
.widget-magazine-posts { | |
margin-bottom: -1em; | |
} | |
.widget-magazine-posts .type-post { | |
margin: 0 0 2em 0; | |
padding: 0; | |
border: none; | |
background: none; | |
box-shadow: none; | |
} | |
.widget-magazine-posts .type-post .entry-title { | |
display: inline; | |
} | |
.widget-magazine-posts .type-post .entry-meta { | |
margin: 0; | |
} | |
.widget-magazine-posts .type-post .entry-content { | |
font-size: 17px; | |
font-size: 1.0625rem; | |
} | |
.widget-magazine-posts .large-post .entry-title { | |
font-size: 28px; | |
font-size: 1.75rem; | |
} | |
.widget-magazine-posts .medium-post { | |
display: block; | |
float: left; | |
box-sizing: border-box; | |
padding-right: 2em; | |
width: 33.33333333%; | |
} | |
.widget-magazine-posts .medium-post .entry-title, | |
.widget-magazine-posts .small-post .entry-title { | |
font-size: 18px; | |
font-size: 1.125rem; | |
} | |
.widget-magazine-posts .small-post { | |
display: block; | |
float: left; | |
box-sizing: border-box; | |
width: 100%; | |
} | |
.widget-magazine-posts .small-post .wp-post-image { | |
float: left; | |
margin: 0 1.5em 0 0; | |
max-width: 40%; | |
} | |
.widget-magazine-posts .medium-post .entry-meta, | |
.widget-magazine-posts .small-post .entry-meta { | |
font-size: 13px; | |
font-size: 0.8125rem; | |
} | |
/* Magazine Posts Grid Widget */ | |
.widget-magazine-posts .magazine-grid { | |
margin-right: -2em; | |
} | |
.widget-magazine-posts .magazine-grid .large-post { | |
float: left; | |
box-sizing: border-box; | |
padding-right: 2em; | |
width: 50%; | |
} | |
.widget-magazine-posts .magazine-grid .post-column:nth-child(2n+1) .large-post, | |
.widget-magazine-posts .magazine-grid .post-column:nth-child(3n+1) .medium-post { | |
clear: left; | |
} | |
/* Magazine Posts Columns Widget */ | |
.widget-magazine-posts-columns .magazine-posts-columns .magazine-posts-columns-content { | |
float: left; | |
width: 100%; | |
} | |
.widget-magazine-posts-columns .magazine-posts-column-left { | |
float: left; | |
box-sizing: border-box; | |
padding-right: 1em; | |
width: 50%; | |
} | |
.widget-magazine-posts-columns .magazine-posts-column-right { | |
box-sizing: border-box; | |
margin-left: 50%; | |
padding-left: 1em; | |
width: 50%; | |
} | |
.widget-magazine-posts-columns .medium-post { | |
padding-right: 0; | |
width: 100%; | |
} | |
/*-------------------------------------------------------------- | |
# 12.0 - Posts and pages | |
--------------------------------------------------------------*/ | |
.type-post, | |
.type-page, | |
.type-attachment, | |
.comments-area { | |
margin: 0 0 3em 0; | |
padding: 0; | |
max-width: 100%; | |
} | |
.page-title, | |
.entry-title { | |
margin: 0.15em 0 0.2em; | |
padding: 0; | |
color: #303030; | |
-ms-word-wrap: break-word; | |
word-wrap: break-word; | |
font-size: 36px; | |
font-size: 2.25rem; | |
font-family: 'Magra', Tahoma, Arial; | |
line-height: 1.4; | |
} | |
.entry-title a:link, | |
.entry-title a:visited { | |
color: #303030; | |
text-decoration: none; | |
} | |
.entry-title a:hover, | |
.entry-title a:active { | |
color: #ee3333; | |
} | |
.type-post .wp-post-image, | |
.type-page .wp-post-image { | |
margin: 0 0 0.5em; | |
} | |
.entry-content { | |
font-size: 18px; | |
font-size: 1.125rem; | |
} | |
.entry-content p:first-child { | |
margin-top: 0.5em; | |
} | |
.sticky {} | |
/* Read more Link */ | |
.more-link { | |
display: inline-block; | |
margin: 0; | |
padding: 0.5em 1em; | |
background: #ee3333; | |
color: #fff; | |
text-decoration: none; | |
font-size: 15px; | |
font-size: 0.9375rem; | |
} | |
.more-link:link, | |
.more-link:visited { | |
color: #fff; | |
} | |
.more-link:hover, | |
.more-link:active { | |
background: #303030; | |
text-decoration: none; | |
} | |
/* Page Links | wp_link_pages() */ | |
.page-links { | |
clear: both; | |
margin: 0 0 2em; | |
word-spacing: 0.5em; | |
font-weight: bold; | |
font-size: 16px; | |
font-size: 1rem; | |
} | |
/* Entry Meta */ | |
.entry-meta { | |
margin: 0.5em 0 0; | |
padding: 0; | |
color: #999; | |
font-size: 14px; | |
font-size: 0.875rem; | |
} | |
.entry-meta a:link, | |
.entry-meta a:visited { | |
color: #999; | |
} | |
.entry-meta a:hover, | |
.entry-meta a:active { | |
color: #666; | |
} | |
.entry-meta span:after { | |
display: inline-block; | |
margin: 0 0.5em; | |
color: #999; | |
content: '\2044'; | |
vertical-align: middle; | |
font: normal 16px 'Genericons'; | |
-webkit-font-smoothing: antialiased; | |
} | |
.entry-meta span:last-child:after { | |
display: none; | |
} | |
/* Entry Categories */ | |
.entry-categories { | |
margin: 0 0 1em; | |
} | |
.entry-categories .meta-categories { | |
font-size: 14px; | |
font-size: 0.875rem; | |
} | |
.entry-categories .meta-categories:before, | |
.entry-categories .meta-categories:after { | |
display: table; | |
content: ""; | |
} | |
.entry-categories .meta-categories:after { | |
clear: both; | |
} | |
.entry-categories .meta-categories a { | |
display: inline-block; | |
float: left; | |
margin: 0 2px 2px 0; | |
padding: 0.4em 0.8em; | |
background: #ee3333; | |
text-decoration: none; | |
text-transform: uppercase; | |
font-size: 14px; | |
font-size: 0.875rem; | |
} | |
.entry-categories .meta-categories a:link, | |
.entry-categories .meta-categories a:visited { | |
color: #fff; | |
} | |
.entry-categories .meta-categories a:hover, | |
.entry-categories .meta-categories a:active { | |
background: #ddd; | |
color: #303030; | |
} | |
/* Hide post meta if they are deactivated in settings */ | |
body.date-hidden .entry-meta .meta-date, | |
body.author-hidden .entry-meta .meta-author { | |
position: absolute; | |
clip: rect(1px, 1px, 1px, 1px); | |
} | |
body.author-hidden .entry-meta .meta-date:after, | |
body.date-hidden.author-hidden .content-area .entry-meta { | |
display: none; | |
} | |
/* Entry Tags & Tagcloud Widget */ | |
.entry-tags { | |
margin: 0 0 1.5em; | |
} | |
.widget_tag_cloud .tagcloud, | |
.entry-tags .meta-tags { | |
font-size: 14px; | |
font-size: 0.875rem; | |
} | |
.widget_tag_cloud .tagcloud:before, | |
.widget_tag_cloud .tagcloud:after, | |
.entry-tags .meta-tags:before, | |
.entry-tags .meta-tags:after { | |
display: table; | |
content: ""; | |
} | |
.widget_tag_cloud .tagcloud:after, | |
.entry-tags .meta-tags:after { | |
clear: both; | |
} | |
.widget_tag_cloud .tagcloud a, | |
.entry-tags .meta-tags a { | |
display: inline-block; | |
float: left; | |
margin: 0 2px 2px 0; | |
padding: 0.2em 0.5em; | |
background: #ddd; | |
text-decoration: none; | |
text-transform: uppercase; | |
font-size: 13px !important; | |
font-size: 0.8125rem !important; | |
} | |
.widget_tag_cloud .tagcloud a:link, | |
.widget_tag_cloud .tagcloud a:visited, | |
.entry-tags .meta-tags a:link, | |
.entry-tags .meta-tags a:visited { | |
color: #303030; | |
} | |
.widget_tag_cloud .tagcloud a:hover, | |
.widget_tag_cloud .tagcloud a:active, | |
.entry-tags .meta-tags a:hover, | |
.entry-tags .meta-tags a:active { | |
background: #ee3333; | |
color: #fff; | |
} | |
/* Post Navigation */ | |
.post-navigation { | |
margin: 1em 0 0; | |
padding: 0.6em 0 0; | |
border-top: 1px solid #ddd; | |
} | |
.post-navigation .nav-links .nav-previous { | |
float: left; | |
} | |
.post-navigation .nav-links .nav-next { | |
float: right; | |
} | |
.post-navigation .nav-links .nav-previous a:before { | |
margin-right: 3px; | |
content: "\00AB"; | |
} | |
.post-navigation .nav-links .nav-next a:after { | |
margin-left: 4px; | |
content: "\00BB"; | |
} | |
/* Theme Pagination */ | |
.pagination { | |
margin: 0 0 3em; | |
} | |
.pagination a, | |
.pagination .current { | |
display: inline-block; | |
margin: 0 3px 3px 0; | |
padding: 0.4em 1em; | |
background: #303030; | |
color: #fff; | |
text-align: center; | |
text-decoration: none; | |
} | |
.pagination a:link, | |
.pagination a:visited { | |
color: #fff; | |
} | |
.pagination a:hover, | |
.pagination a:active, | |
.pagination .current { | |
background: #ee3333; | |
} | |
/* Infinite Scroll Pagination */ | |
.infinite-scroll .pagination { | |
display: none; | |
} | |
.infinite-scroll #infinite-handle, | |
.infinite-scroll .infinite-loader { | |
width: 100%; | |
text-align: center; | |
} | |
.infinite-scroll .infinite-loader .spinner { | |
bottom: -1em; | |
left: auto; | |
margin: 0 auto; | |
} | |
.infinite-scroll #infinite-handle span { | |
display: inline-block; | |
margin: 0 0 3em; | |
padding: 0.4em 1em; | |
background: #303030; | |
text-decoration: none; | |
font-size: 17px; | |
font-size: 1.0625rem; | |
} | |
.infinite-scroll #infinite-handle span:hover { | |
background: #ee3333; | |
} | |
/* Archives and Search Heading */ | |
.page-header { | |
margin: 0 0 2em; | |
} | |
.archive-title { | |
margin: 0; | |
padding: 0; | |
color: #303030; | |
-ms-word-wrap: break-word; | |
word-wrap: break-word; | |
font-size: 20px; | |
font-size: 1.25rem; | |
font-family: 'Magra', Tahoma, Arial; | |
} | |
.blog-description, | |
.archive-description p { | |
margin-bottom: 0; | |
} | |
/* Breadcrumbs */ | |
.breadcrumbs { | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0.5em 1.5em; | |
width: 100%; | |
border-bottom: 1px solid #ddd; | |
-ms-word-wrap: break-word; | |
word-wrap: break-word; | |
} | |
.breadcrumbs-container { | |
color: #222; | |
font-size: 14px; | |
font-size: 0.875rem; | |
} | |
.breadcrumbs .trail-browse, | |
.breadcrumbs .trail-items, | |
.breadcrumbs .trail-items li { | |
display: inline; | |
margin: 0; | |
padding: 0; | |
} | |
.breadcrumbs .trail-browse { | |
margin-right: 0.5em; | |
font-weight: normal; | |
font-size: 14px; | |
font-size: 0.875rem; | |
} | |
.breadcrumbs .trail-items { | |
list-style: none; | |
} | |
.breadcrumbs .trail-items li::after { | |
padding: 0 0.5em; | |
content: "\00bb"; /* Raquo */ | |
} | |
.trail-separator-slash .trail-items li::after { content: "\002F"; } | |
.trail-separator-dash .trail-items li::after { content: "\2013"; } | |
.trail-separator-bull .trail-items li::after { content: "\2022"; } | |
.trail-separator-arrow-bracket .trail-items li::after { content: "\003e"; } | |
.trail-separator-raquo .trail-items li::after { content: "\00bb"; } | |
.trail-separator-single-arrow .trail-items li::after { content: "\2192"; } | |
.trail-separator-double-arrow .trail-items li::after { content: "\21D2"; } | |
.breadcrumbs .trail-items li:last-of-type::after { | |
display: none; | |
} | |
/*-------------------------------------------------------------- | |
## 12.1 - Post Layouts | |
--------------------------------------------------------------*/ | |
/* Post Styling */ | |
.post-wrapper .type-post .entry-title { | |
font-size: 28px; | |
font-size: 1.75rem; | |
} | |
.post-wrapper .type-post .entry-content { | |
font-size: 17px; | |
font-size: 1.0625rem; | |
} | |
/* One Column Layout */ | |
.post-layout-one-column .post-wrapper .type-post .wp-post-image { | |
float: left; | |
margin: 0 2em 0 0; | |
padding: 0; | |
max-width: 42%; | |
} | |
.post-layout-one-column .post-wrapper .type-post .entry-title { | |
display: inline; | |
} | |
/* Multiple Post Columns */ | |
.post-layout-columns .post-wrapper { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
margin-right: -3em; | |
} | |
.post-layout-columns .post-wrapper .post-column { | |
box-sizing: border-box; | |
padding-right: 3em; | |
} | |
.post-layout-columns .post-wrapper .post-column .type-post .wp-post-image { | |
margin: 0; | |
} | |
/* 2 Columns */ | |
.post-layout-two-columns .post-wrapper .post-column { | |
width: 50%; | |
} | |
/* 3 Columns */ | |
.post-layout-three-columns .content-archive { | |
float: none; | |
padding: 0; | |
width: 100%; | |
} | |
.post-layout-three-columns .post-wrapper .post-column { | |
width: 33.3333333333333%; | |
} | |
/*-------------------------------------------------------------- | |
# 11.0 - Comments | |
--------------------------------------------------------------*/ | |
/* Comment Header */ | |
.comments-header, | |
.comment-reply-title { | |
margin: 0 0 1em 0; | |
} | |
.comments-header .comments-title, | |
.comment-reply-title span { | |
display: inline-block; | |
margin: 0; | |
padding: 0; | |
color: #303030; | |
-ms-word-wrap: break-word; | |
word-wrap: break-word; | |
font-size: 20px; | |
font-size: 1.25rem; | |
font-family: 'Magra', Tahoma, Arial; | |
} | |
/* Comment List */ | |
.comment-list { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
.comment { | |
margin: 0 0 1.5em; | |
padding: 1.5em 0 0; | |
border-top: 1px solid #ddd; | |
-ms-word-wrap: break-word; | |
word-wrap: break-word; | |
} | |
.comment-meta { | |
float: left; | |
padding: 0; | |
width: 100%; | |
} | |
.comment-meta .comment-author img { | |
float: left; | |
margin-right: 1em; | |
} | |
.bypostauthor { | |
display: block; | |
} | |
.comment-meta .comment-metadata { | |
margin-top: 0.3em; | |
font-size: 14px; | |
font-size: 0.875rem; | |
} | |
.comment-meta .comment-metadata a { | |
margin-right: 1em; | |
} | |
.comment-content { | |
clear: left; | |
padding: 0.2em 0 0; | |
} | |
.comment-content a { | |
word-wrap: break-word; | |
} | |
.comment ol.children { | |
margin: 1.5em 0 0; | |
list-style: none; | |
} | |
.comment .comment-respond { | |
margin-top: 1.5em; | |
} | |
/* Comment Pagination */ | |
.comment-navigation { | |
margin: 0 0 1.5em; | |
padding: 0; | |
font-size: 14px; | |
font-size: 0.875rem; | |
} | |
.comment-navigation .nav-previous { | |
float: left; | |
} | |
.comment-navigation .nav-next { | |
float: right; | |
} | |
.comment-navigation .nav-previous a:before { | |
margin-right: 3px; | |
content: "\00AB"; | |
} | |
.comment-navigation .nav-next a:after { | |
margin-left: 4px; | |
content: "\00BB"; | |
} | |
/* Comment Form */ | |
.comment-form { | |
padding: 0; | |
} | |
.comment-form label { | |
display: inline-block; | |
min-width: 150px; | |
font-weight: bold; | |
} | |
.comment-form textarea { | |
margin-top: 0.4em; | |
} | |
.comment-form .form-submit { | |
margin-bottom: 1em; | |
} | |
.comment-reply-title small a { | |
margin-left: 1em; | |
text-decoration: underline; | |
font-weight: normal; | |
font-size: 14px; | |
font-size: 0.875rem; | |
} | |
/*-------------------------------------------------------------- | |
# 12.0 - Footer | |
--------------------------------------------------------------*/ | |
.footer-wrap { | |
background: #303030; | |
} | |
.site-footer .site-info { | |
float: left; | |
padding: 3em; | |
color: #fff; | |
} | |
.site-footer a:link, | |
.site-footer a:visited { | |
color: #fff; | |
text-decoration: underline; | |
} | |
.site-footer a:hover, | |
.site-footer a:active { | |
text-decoration: none; | |
} | |
/*-------------------------------------------------------------- | |
# 13.0 - Media | |
--------------------------------------------------------------*/ | |
.page-content .wp-smiley, | |
.entry-content .wp-smiley, | |
.comment-content .wp-smiley { | |
margin-top: 0; | |
margin-bottom: 0; | |
padding: 0; | |
border: none; | |
} | |
/* Make sure embeds and iframes fit their containers. */ | |
embed, | |
iframe, | |
object { | |
max-width: 100%; | |
} | |
/*-------------------------------------------------------------- | |
## 13.1 - Captions | |
--------------------------------------------------------------*/ | |
.wp-caption { | |
margin-bottom: 1.5em; | |
max-width: 100%; | |
font-size: 15px; | |
font-size: 0.9375rem; | |
color: #777; | |
} | |
.wp-caption img[class*="wp-image-"] { | |
display: block; | |
margin: 0 auto; | |
} | |
.wp-caption-text { | |
text-align: center; | |
} | |
.wp-caption .wp-caption-text { | |
margin: 0.75em 0; | |
} | |
/*-------------------------------------------------------------- | |
## 13.2 - Galleries | |
--------------------------------------------------------------*/ | |
.gallery { | |
margin-bottom: 1.5em; | |
} | |
.gallery-item { | |
display: inline-block; | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0 1.5em 1em 0; | |
width: 100%; | |
vertical-align: top; | |
text-align: center; | |
} | |
.gallery-columns-2 .gallery-item { | |
max-width: 50%; | |
} | |
.gallery-columns-3 .gallery-item { | |
max-width: 33.33%; | |
} | |
.gallery-columns-4 .gallery-item { | |
max-width: 25%; | |
} | |
.gallery-columns-5 .gallery-item { | |
max-width: 20%; | |
} | |
.gallery-columns-6 .gallery-item { | |
max-width: 16.66%; | |
} | |
.gallery-columns-7 .gallery-item { | |
max-width: 14.28%; | |
} | |
.gallery-columns-8 .gallery-item { | |
max-width: 12.5%; | |
} | |
.gallery-columns-9 .gallery-item { | |
max-width: 11.11%; | |
} | |
.gallery-caption { | |
display: block; | |
font-size: 15px; | |
font-size: 0.9375rem; | |
color: #777; | |
margin: 0 0 0.75em; | |
} | |
/*-------------------------------------------------------------- | |
# 14.0 - Media Queries | |
--------------------------------------------------------------*/ | |
/*-------------------------------------------------------------- | |
## 14.1 - Desktop X-Large ( < 1200px ) | |
--------------------------------------------------------------*/ | |
@media only screen and (max-width: 85em) { | |
body { | |
padding: 1.5em; | |
} | |
.site { | |
margin: 0; | |
} | |
.header-main { | |
padding: 2em; | |
} | |
.content-area, | |
.sidebar { | |
padding: 2em 2em 0; | |
} | |
.widget, | |
.page-header, | |
.type-post, | |
.type-page, | |
.type-attachment, | |
.pagination, | |
.comments-area { | |
margin-bottom: 2em; | |
} | |
/* Multiple Post Columns */ | |
.post-layout-columns .post-wrapper { | |
margin-right: -2em; | |
} | |
.post-layout-columns .post-wrapper .post-column { | |
padding-right: 2em; | |
} | |
} | |
/*-------------------------------------------------------------- | |
## 14.2 - Desktop Large ( < 1120px ) | |
--------------------------------------------------------------*/ | |
@media only screen and (max-width: 70em) { | |
body { | |
padding: 0; | |
} | |
.header-widget { | |
max-width: 70%; | |
} | |
.site-title { | |
font-size: 40px; | |
font-size: 2.5rem; | |
} | |
.page-title, | |
.entry-title { | |
font-size: 32px; | |
font-size: 2rem; | |
} | |
.post-wrapper .type-post .entry-title { | |
font-size: 24px; | |
font-size: 1.5rem; | |
} | |
/* One Column Layout */ | |
.post-layout-one-column .post-wrapper .type-post .entry-content { | |
font-size: 16px; | |
font-size: 1rem; | |
} | |
/* Magazine Post Widgets */ | |
.widget-magazine-posts .large-post .entry-title { | |
font-size: 24px; | |
font-size: 1.5rem; | |
} | |
.widget-magazine-posts .medium-post .entry-title, | |
.widget-magazine-posts .small-post .entry-title { | |
font-size: 17px; | |
font-size: 1.0625rem; | |
} | |
.widget-magazine-posts .small-post .entry-meta span:after, | |
.widget-magazine-posts .small-post .entry-meta .meta-author { | |
display: none; | |
} | |
} | |
/*-------------------------------------------------------------- | |
## 14.3 - Desktop Small ( < 960px ) | |
--------------------------------------------------------------*/ | |
@media only screen and (max-width: 60em) { | |
.site-content { | |
display: block; | |
} | |
.content-area { | |
width: 100%; | |
} | |
.sidebar { | |
width: 100%; | |
border-top: 1px solid #ddd; | |
border-left: none; | |
} | |
.header-main { | |
padding-top: 1.5em; | |
} | |
.site-branding { | |
float: none; | |
margin: 0; | |
text-align: center; | |
} | |
.header-widgets { | |
display: block; | |
text-align: center; | |
} | |
.header-widget { | |
display: inline-block; | |
float: none; | |
margin: 1em 0 0; | |
max-width: 100%; | |
vertical-align: top; | |
} | |
.header-widget .search-form { | |
max-width: 300px; | |
} | |
.page-title, | |
.entry-title { | |
font-size: 36px; | |
font-size: 2.25rem; | |
} | |
.post-wrapper .type-post .entry-title { | |
font-size: 28px; | |
font-size: 1.75rem; | |
} | |
/* One Column Layout */ | |
.post-layout-one-column .post-wrapper .type-post .entry-content { | |
font-size: 17px; | |
font-size: 1.0625rem; | |
} | |
/* Three Column Layout */ | |
.post-layout-three-columns .post-wrapper .post-column { | |
width: 50%; | |
} | |
/*** Mobile Main Navigation ***/ | |
/* Reset */ | |
.main-navigation-menu li { | |
position: static; | |
float: none; | |
} | |
.main-navigation-menu ul { | |
position: static; | |
top: auto; | |
left: auto; | |
display: block; | |
} | |
.main-navigation-menu ul a { | |
float: none; | |
width: auto; | |
} | |
.main-navigation-menu li ul ul { | |
top: auto; | |
left: auto; | |
margin: 0; | |
} | |
.main-navigation-menu > .menu-item-has-children > a:after, | |
.main-navigation-menu ul .menu-item-has-children > a:after { | |
display: none; | |
} | |
/* Main Navigation Toggle */ | |
.main-navigation-toggle { | |
display: inline-block; | |
float: left; | |
margin: 0; | |
padding: 1em; | |
background: none; | |
color: #fff; | |
} | |
.main-navigation-toggle:hover, | |
.main-navigation-toggle:focus, | |
.main-navigation-toggle:active { | |
background: none; | |
} | |
.main-navigation-toggle:hover, | |
.main-navigation-toggle:active { | |
color: rgba(255,255,255,0.5); | |
cursor: pointer; | |
} | |
.main-navigation-toggle:before { | |
display: inline-block; | |
float: left; | |
margin: 0.15em 0.5em 0 0; | |
content: '\f419'; | |
vertical-align: top; | |
text-decoration: inherit; | |
font-size: 24px; | |
font-family: 'Genericons'; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
/* Main Navigation Menu */ | |
.main-navigation-menu { | |
display: none; | |
float: left; | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
border-top: 1px solid #fff; | |
} | |
.main-navigation-menu li { | |
margin: 0; | |
} | |
.main-navigation-menu a { | |
display: block; | |
clear: left; | |
padding: 1em 1.5em; | |
border-bottom: 1px solid rgba(255,255,255,0.1); | |
} | |
.main-navigation-menu li:last-child a { | |
border-bottom: none; | |
} | |
.main-navigation-menu ul { | |
width: 100%; | |
border: none; | |
} | |
.main-navigation-menu ul a { | |
display: block; | |
padding-left: 3em; | |
width: 100%; | |
} | |
.main-navigation-menu ul li ul a { | |
padding-left: 4em; | |
} | |
.main-navigation-menu ul li ul li ul a { | |
padding-left: 5em; | |
} | |
.main-navigation-menu ul li ul li ul li ul a { | |
padding-left: 6em; | |
} | |
.main-navigation-menu ul li:last-child a { | |
border-bottom: 1px solid rgba(255,255,255,0.1); | |
} | |
/* Mobile Submenu Dropdowns */ | |
.main-navigation-menu .submenu-dropdown-toggle { | |
display: block; | |
float: right; | |
margin: 0; | |
padding: 0.9em 1.2em; | |
background: none; | |
color: #fff; | |
} | |
.main-navigation-menu .submenu-dropdown-toggle:hover, | |
.main-navigation-menu .submenu-dropdown-toggle:active { | |
color: rgba(255,255,255,0.5); | |
cursor: pointer; | |
} | |
.main-navigation-menu .submenu-dropdown-toggle:before { | |
content: '\f431'; | |
vertical-align: middle; | |
text-decoration: inherit; | |
font-size: 32px; | |
font-family: 'Genericons'; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.main-navigation-menu .submenu-dropdown-toggle.active:before { | |
content: '\f432'; | |
} | |
.main-navigation-menu ul .submenu-dropdown-toggle { | |
padding: 0.65em 1em; | |
} | |
.main-navigation-menu ul .submenu-dropdown-toggle:before { | |
font-size: 24px; | |
} | |
/* Magazine Post Widgets */ | |
.widget-magazine-posts .large-post .entry-title { | |
font-size: 28px; | |
font-size: 1.75rem; | |
} | |
.widget-magazine-posts .medium-post .entry-title, | |
.widget-magazine-posts .small-post .entry-title { | |
font-size: 18px; | |
font-size: 1.125rem; | |
} | |
/* Footer */ | |
.site-footer .site-info { | |
float: none; | |
text-align: center; | |
} | |
} | |
/*-------------------------------------------------------------- | |
## 14.5 - Tablet Medium ( < 800px ) | |
--------------------------------------------------------------*/ | |
@media only screen and (max-width: 50em) { | |
.header-main { | |
padding: 1em 1.5em 1.5em; | |
} | |
.content-area, | |
.sidebar { | |
padding: 1.5em 1.5em 0; | |
} | |
.widget, | |
.page-header, | |
.type-post, | |
.type-page, | |
.type-attachment, | |
.pagination, | |
.comments-area { | |
margin-bottom: 1.5em; | |
} | |
/* Multiple Post Columns */ | |
.post-layout-columns .post-wrapper { | |
margin-right: -1.5em; | |
} | |
.post-layout-columns .post-wrapper .post-column { | |
padding-right: 1.5em; | |
} | |
.page-title, | |
.entry-title { | |
font-size: 32px; | |
font-size: 2rem; | |
} | |
.post-wrapper .type-post .entry-title { | |
font-size: 24px; | |
font-size: 1.5rem; | |
} | |
/* Magazine Post Widgets */ | |
.widget-magazine-posts .large-post .entry-title { | |
font-size: 24px; | |
font-size: 1.5rem; | |
} | |
.widget-magazine-posts .medium-post .entry-title, | |
.widget-magazine-posts .small-post .entry-title { | |
font-size: 17px; | |
font-size: 1.0625rem; | |
} | |
/* Gallery */ | |
.gallery-item { | |
padding: 0 1em 0.5em 0; | |
} | |
.gallery-columns-6 .gallery-item, | |
.gallery-columns-7 .gallery-item, | |
.gallery-columns-8 .gallery-item, | |
.gallery-columns-9 .gallery-item { | |
max-width: 25%; | |
} | |
} | |
/*-------------------------------------------------------------- | |
## 14.6 - Tablet Small ( < 720px ) | |
--------------------------------------------------------------*/ | |
@media only screen and (max-width: 45em) { | |
.widget-magazine-posts .medium-post .entry-title, | |
.widget-magazine-posts .small-post .entry-title { | |
font-size: 16px; | |
font-size: 1rem; | |
} | |
} | |
/*-------------------------------------------------------------- | |
## 14.7 - Mobile Extra Large ( < 640px ) | |
--------------------------------------------------------------*/ | |
@media only screen and (max-width: 40em) { | |
.type-post .wp-post-image, | |
.type-page .wp-post-image { | |
margin: 0; | |
} | |
/* One Column Layout */ | |
.post-layout-one-column .post-wrapper .type-post .wp-post-image { | |
float: none; | |
margin: 0; | |
max-width: 100%; | |
} | |
/* Multiple Columns Layout */ | |
.post-layout-columns .post-wrapper { | |
display: block; | |
margin-right: 0; | |
} | |
.post-layout-columns .post-wrapper .post-column { | |
display: block; | |
float: none; | |
padding-right: 0; | |
} | |
.post-layout-two-columns .post-wrapper .post-column, | |
.post-layout-three-columns .post-wrapper .post-column { | |
width: 100%; | |
} | |
.page-title, | |
.entry-title, | |
.post-wrapper .type-post .entry-title { | |
font-size: 28px; | |
font-size: 1.75rem; | |
} | |
.entry-content { | |
font-size: 17px; | |
font-size: 1.0625rem; | |
} | |
/* Magazine Post Widgets */ | |
.widget-magazine-posts .magazine-grid { | |
margin-right: 0; | |
} | |
.widget-magazine-posts .magazine-grid .large-post, | |
.widget-magazine-posts-columns .magazine-posts-column-left, | |
.widget-magazine-posts .medium-post { | |
float: none; | |
padding: 0; | |
width: 100%; | |
} | |
.widget-magazine-posts-columns .magazine-posts-column-right { | |
margin-left: 0; | |
padding-top: 1em; | |
padding-left: 0; | |
width: 100%; | |
} | |
.widget-magazine-posts .medium-post .wp-post-image { | |
float: left; | |
margin: 0 1.5em 0 0; | |
max-width: 40%; | |
} | |
.widget-magazine-posts .large-post .entry-title { | |
font-size: 28px; | |
font-size: 1.75rem; | |
} | |
.widget-magazine-posts .medium-post .entry-title, | |
.widget-magazine-posts .small-post .entry-title { | |
font-size: 20px; | |
font-size: 1.25rem; | |
} | |
} | |
/*-------------------------------------------------------------- | |
## 14.9 - Mobile Medium ( < 480px ) | |
--------------------------------------------------------------*/ | |
@media only screen and (max-width: 30em) { | |
.header-main { | |
padding: 0.75em 1.25em 1.25em; | |
} | |
.content-area, | |
.sidebar { | |
padding: 1.25em 1.25em 0; | |
} | |
.widget, | |
.page-header, | |
.type-post, | |
.type-page, | |
.type-attachment, | |
.pagination, | |
.comments-area { | |
margin-bottom: 1.25em; | |
} | |
.site-branding .site-title { | |
font-size: 36px; | |
font-size: 2.25rem; | |
} | |
.page-title, | |
.entry-title, | |
.post-wrapper .type-post .entry-title { | |
font-size: 24px; | |
font-size: 1.5rem; | |
} | |
.alignright, .alignleft { | |
float: none; | |
margin: 1em 0; | |
} | |
/* Magazine Homepage: Category Post Widgets */ | |
.widget-magazine-posts .large-post .entry-title { | |
font-size: 24px; | |
font-size: 1.5rem; | |
} | |
.widget-magazine-posts .medium-post .entry-title, | |
.widget-magazine-posts .small-post .entry-title { | |
font-size: 18px; | |
font-size: 1.125rem; | |
} | |
/* Gallery */ | |
.gallery-columns-4 .gallery-item, | |
.gallery-columns-5 .gallery-item, | |
.gallery-columns-6 .gallery-item, | |
.gallery-columns-7 .gallery-item, | |
.gallery-columns-8 .gallery-item, | |
.gallery-columns-9 .gallery-item { | |
max-width: 50%; | |
} | |
} | |
/*-------------------------------------------------------------- | |
## 14.10 - Mobile Small ( < 320px ) | |
--------------------------------------------------------------*/ | |
@media only screen and (max-width: 20em) { | |
.site-branding .site-title { | |
font-size: 32px; | |
font-size: 2rem; | |
} | |
.site-branding .custom-logo { | |
margin: 0.5em 0 0 0; | |
} | |
.page-title, | |
.entry-title, | |
.post-wrapper .type-post .entry-title { | |
font-size: 20px; | |
font-size: 1.25rem; | |
} | |
.entry-meta .meta-date, | |
.entry-meta .meta-category { | |
display: block; | |
} | |
.entry-meta span:after { | |
display: none; | |
} | |
/* Magazine Homepage: Category Post Widgets */ | |
.widget-magazine-posts .large-post .entry-title { | |
font-size: 20px; | |
font-size: 1.25rem; | |
} | |
.widget-magazine-posts .medium-post .entry-title, | |
.widget-magazine-posts .small-post .entry-title { | |
font-size: 16px; | |
font-size: 1rem; | |
} | |
.widget-magazine-posts .medium-post .entry-meta, | |
.widget-magazine-posts .small-post .entry-meta { | |
display: none; | |
} | |
} | |
/*-------------------------------------------------------------- | |
# 15.0 - Theme Option Styles | |
--------------------------------------------------------------*/ | |
/*-------------------------------------------------------------- | |
## 15.1 - Sidebar Left Layout | |
--------------------------------------------------------------*/ | |
.sidebar-left .content-area { | |
order: 2; | |
-webkit-box-ordinal-group: 3; | |
-ms-flex-order: 2; | |
} | |
.sidebar-left .sidebar { | |
order: 1; | |
border-right: 1px solid #ddd; | |
border-left: none; | |
-webkit-box-ordinal-group: 2; | |
-ms-flex-order: 1; | |
} | |
@media only screen and (max-width: 70em) { | |
.sidebar-left .content-area { | |
padding-right: 0; | |
padding-left: 3em; | |
} | |
} | |
@media only screen and (max-width: 60em) { | |
.sidebar-left .content-area { | |
padding: 0; | |
} | |
} | |
/*-------------------------------------------------------------- | |
# 16.0 - Media Query Fixes | |
--------------------------------------------------------------*/ | |
/* Ensure navigation is visible on desktop view */ | |
@media only screen and (min-width: 60.001em) { | |
.main-navigation-menu { | |
display: block !important; | |
} | |
} | |
/*-------------------------------------------------------------- | |
# 17.0 - CSS Hacks for Safari | |
--------------------------------------------------------------*/ | |
/* Fix Flexbox issues for Safari 6.1-10.0 */ | |
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { | |
@media { | |
.content-area, | |
.sidebar, | |
.post-layout-columns .post-wrapper .post-column { | |
margin-right: -1px; | |
} | |
} | |
} | |
/* Fix Flexbox issues for Safari 10.1+ */ | |
@media not all and (min-resolution:.001dpcm) { | |
@media { | |
.content-area, | |
.sidebar, | |
.post-layout-columns .post-wrapper .post-column { | |
margin-right: -1px; | |
} | |
} | |
} | |
/*-------------------------------------------------------------- | |
18.0 Customizer Preview | |
--------------------------------------------------------------*/ | |
.magazine-widgets-placeholder { | |
position: relative; | |
} | |
.magazine-widgets-placeholder .magazine-widgets-placeholder-title { | |
display: block; | |
font-size: 14px; | |
font-size: 0.875rem; | |
font-weight: bold; | |
text-transform: uppercase; | |
margin: 0; | |
padding: 1em 1em 1em 55px; | |
color: #0085ba; | |
border: 2px dashed #0085ba; | |
} | |
/* Add some styling for visual edit shortcut buttons. */ | |
.magazine-widgets-placeholder .customize-partial-edit-shortcut button { | |
left: 15px; | |
top: 14px; | |
} | |
.customize-partial-edit-shortcut-wellington_blog_layout_partial button { | |
top: 50px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment