Skip to content

Instantly share code, notes, and snippets.

@dvliman
Created April 26, 2018 05:20
Show Gist options
  • Save dvliman/4bbb44f4fd34b72439cd53de31a274f4 to your computer and use it in GitHub Desktop.
Save dvliman/4bbb44f4fd34b72439cd53de31a274f4 to your computer and use it in GitHub Desktop.
style.css
/*
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