style.css
/*
Theme Name: Strip
Theme URI: https://github.com/SilentComics/Strip
Author: SILENT COMICS
Author URI: https://silent-comics.com
Description: A WordPress theme for comics and webcomics <a href="https://github.com/SilentComics/Strip/">Contribute on GitHub</a>
Version: 1.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: strip
Domain Path: /languages/
Tags: one-column, flexible-header, grid-layout, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, post-formats, rtl-language-support, sticky-post, theme-options, custom-logo, translation-ready, blog
This theme is licensed under the GPL, and is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - CSS Reset (Normalize)
2.0 - Typography
3.0 - Elements
4.0 - Forms
5.0 - Navigation
5.1 - Links
5.2 - Menus
6.0 - Accessibility
7.0 - Alignments
8.0 - Clearings
9.0 - Widgets
10.0 - Content
10.1 - Posts and pages
10.2 - Post Formats
10.3 — Author Index
10.4 — Media / Galleries
10.5 - Comics
10.6 - Comments
10.7 - Footer
11.0 - Plugin specific
11.1 — MailChimp for WordPress
11.2 — RoyalSlider
11.3 — Infinite scroll
12.0 - Media queries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 - Normalize
--------------------------------------------------------------*/
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%; }
body {
margin: 0; }
h1 {
font-size: 2em;
margin: 0.67em 0; }
hr {
box-sizing: content-box;
height: 0;
overflow: visible; }
pre {
font-family: monospace, monospace;
font-size: 1em; }
a {
background-color: transparent; }
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted; }
b,
strong {
font-weight: bolder; }
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em; }
small {
font-size: 80%; }
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
img {
border-style: none; }
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0; }
button,
input {
overflow: visible; }
button,
select {
text-transform: none; }
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button; }
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
fieldset {
padding: 0.35em 0.75em 0.625em; }
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal; }
progress {
vertical-align: baseline; }
textarea {
overflow: auto; }
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px; }
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit; }
details {
display: block; }
summary {
display: list-item; }
template {
display: none; }
[hidden] {
display: none; }
/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
/* =Global */
body,
button,
input,
select,
textarea {
font-size: 24px;
font-size: 1.5rem; } /* =24px */
body {
color: #422442;
font-family:'Fenix', Georgia, serif;
line-height: 1.45; }
h2, h3, h4, h5 {
clear: both;
font-weight: 700;
line-height: 1.2; }
h1, h2, h3, h4, h5, h6, .site-title, .main-navigation, .page-numbers, .nav-previous a, .nav-next a, .nav-previous-page a, .nav-next-page a, .entry-title, .entry-title a, .widget-title, .widget, .widget a, .categories-links,
.entry-meta, .comic .post-edit-link, .series-title, .series-title a, .series-title li,
.post-parent-title, .post-parent-title a, .page-title, .author-title, .comment-author,
.comment-author a, blockquote {
font-family: -apple-system, BlinkMacSystemFont,
'avenir next', avenir,
'helvetica neue', helvetica,
ubuntu,
roboto, noto,
'segoe ui', arial,
sans-serif; }
p {
margin-bottom: 1.3em; }
dfn, cite, em,
i {
font-style: italic; }
blockquote {
border-left: 4px solid #422442;
color: #422442; /* #c9a6ab, #ff91ae or #c9a6ab */
font-size: 19px;
font-style: italic;
font-weight: 300;
line-height: 1.4736842105;
margin: 0 1.3em;
margin-bottom: 28px;
padding: 0 0 0 24px; }
address {
margin: 0 1.3em; }
pre, code, kbd, tt, var {
font-family: Inconsolata, monospace;
font-size: 16px;
font-size: 1rem; }
pre, code, kbd, tt, var {
background: #aaffe3;
color: #422442;
max-width: 100%;
overflow: auto;
padding: 1.76em;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }
code, kbd, tt, var {
background: #aaffe3;
padding: 4px;
vertical-align: middle; }
abbr, acronym {
border-bottom: 1px dotted #666;
cursor: help; }
mark, ins {
background: #ffee00;
text-decoration: none; }
big {
font-size: 125%; }
/* Selection */
::selection{background:#FF7369;color:#fff;}
::-moz-selection{background:#FF7369;color:#fff;}
img::selection{background:transparent;}
img::-moz-selection{background:transparent;}
/*--------------------------------------------------------------
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; }
blockquote:before,
blockquote:after,
q:before,
q:after {
content: ""; }
blockquote,
q {
quotes: "" ""; }
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em; }
li {
list-style: none; }
ul, ol {
list-style: none;
margin: 0 1.5em;
padding: 0; }
li > ul,
li > ol {
text-align: left;
margin: 0 1.5em; }
dt {
font-weight: 700; }
dd {
margin: 0 1.5em 1.5em; }
img {
height: auto; /* Make sure images are scaled correctly. */
max-width: 100%; /* Adhere to container width. */ }
.entry-content table,
.comment-content table {
font-size: large; /* change */ }
table {
border-collapse: separate;
border-spacing: 0;
border-width: 1px 0 0 1px;
margin: 0 0 10px 0;
width: 100%; }
table, th, td {
border: none; }
caption, th, td {
font-weight: normal;
text-align: left; }
th {
border-width: 1px;
font-weight: 700;
padding: 5px 10px; }
td {
border-width: 1px;
padding: 5px 10px; }
/*--------------------------------------------------------------
4.0 Forms
--------------------------------------------------------------*/
button,
.alt,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0 auto; }
button,
input,
select,
textarea {
margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
vertical-align: top; /* Improves readability and alignment in all browsers */ }
button {
line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
overflow: visible; /* Corrects inner spacing displayed oddly in IE6/7 */ }
button,
html input[type="button"],
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-moz-appearance: button;
-webkit-appearance: button;
border: 0;
background: #fff;
color: #422442;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont,
'avenir next', avenir,
'helvetica neue', helvetica,
ubuntu,
roboto, noto,
'segoe ui', arial,
sans-serif;
font-size: 10px;
font-size: 0.625rem;
letter-spacing: 0.12em;
padding: 10px;
text-transform: uppercase;
width: auto; }
button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus {
color: #ff91ae;
background-color: #fff; }
button:active,
html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
background-color: #422442; }
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
color: #666;
border: 1px solid #faf4f4;
border-radius: 2px;
font-family: Inconsolata, monospace; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
color: #422442; }
select {
border: 1px solid #ccc; }
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"] {
padding: 3px;
font-size: small; }
textarea {
width: 100%; }
/*--------------------------------------------------------------
5.0 Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
5.1 Links
--------------------------------------------------------------*/
a:link {
color: #ff7369;
text-decoration: none; }
a:visited {
color: #ffaaaa;
text-decoration: none; }
a:hover,
a:focus,
a:active {
color: #ff1200;
text-decoration: underline; /* accessibility */
border: none; }
/*--------------------------------------------------------------
5.2 Menus
--------------------------------------------------------------*/
/* Site Logo support since WP 4.5 */
.custom-logo-link {
display: block;
}
.custom-logo,
.site-title {
margin-top: 0.2em; }
.custom-logo {
max-width: 312px;
margin: 0 auto; }
/* author's custom style (svg logo)
----------------------------------------------- */
.logo, a.logo {
width: 124px; /* required to center */
height: 62px;
position: relative;
margin: 24px 0 12px 0;
display: inline-block; }
.logo:after, a.logo:after {
content: "";
position: fixed;
top: 0;
right: 0;
left: 50%; }
.no-svg .logo {
width: 96px;
height: 48px;
background-image: url(.../assets/images/silent-comics-logo.png);
background-repeat: no-repeat; }
/* =Masthead
----------------------------------------------- */
.site-branding {
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: contain; /* cover */
padding: 0;
position: relative;
text-align: center; /* Avoid overflowing wide custom logo in small screens in Firefox and IEs */
max-width: 100%;
min-width: 100%;
overflow: hidden; }
.site-title {
box-sizing: border-box;
border: 6px solid #420084;
display: table;
line-height: 1.2;
letter-spacing: 0.1em;
margin: 0 auto;
width: 312px; /* prevent overflow for long titles */
margin-top: 12px;
padding: 3px 9px 4px 9px;
text-align: center;
text-transform: uppercase;
word-wrap: break-word; }
.site-title a {
text-decoration: none;
color: #420084; }
.site-description {
font-family: Inconsolata, monospace;
font-size: 0.6em;
font-weight: 400; /* 400 or 700 */
color: #420084;
text-align: center;
padding: 0 6px 6px 6px;
margin-bottom: 0.1em; }
/* =Menu
----------------------------------------------- */
.main-navigation {
position: relative;
display: block;
clear: both;
font-size: 16px;
font-size: 1rem;
letter-spacing: 0.24em;
text-transform: uppercase;
width: 100%; }
.main-navigation .menu {
max-width: 1920px;
margin: 0 auto; }
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
text-align: center;
z-index: 9999; }
.main-navigation li {
display: inline-block;
position: relative; }
.main-navigation a {
display: block;
text-decoration: none; }
.main-navigation a {
color: #422442;
padding: 10px 6px 6px 10px; }
.main-navigation a:hover {
background: #faf4f4; }
.main-navigation a:active {
background: #faf4f4;
color: white; }
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
display: none;
position: absolute; }
.main-navigation ul ul ul a {
background: #69F5FF; /* #00ffcc */
top: 0; }
.main-navigation ul ul a {
width: 196px;
color: black;
background: #faf4f4;
line-height: 1.6;
padding: 0.4em;
margin: 0.1em;
white-space: nowrap; }
/*.main-navigation ul ul :hover > a {} */
.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
background-color: black;
color: #fff; }
.main-navigation ul li:hover > ul { display: block; }
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a {
color: #ff7369; }
.main-navigation .current_page_ancestor {
background: #faf4f4; }
.main-navigation ul ul .current_page_parent,
.main-navigation .current_page_parent .current_page_item > a {
color: #ffcc00;
background: #faf4f4; }
/* Small menu */
.menu-toggle {
display: none;
cursor: pointer;
margin: 0 auto; }
button.menu-toggle {
border: 0;
color: black;
background: #faf4f4;
cursor: pointer;
font-size: 14px;
font-size: 0.875rem;
letter-spacing: 0.2em;
padding: 6px;
text-align: center;
text-transform: uppercase; }
button.menu-toggle:hover {
color: white; }
@media screen and (max-width: 600px) {
/* Display the menu toggle when JavaScript is available. */
.js .menu-toggle,
.js .toggled .nav-menu {
display: block; }
.main-navigation {
font-size: 12px;
font-size: 0.875rem;
line-height: 1.4; }
/* Works only with JavaScript. */
.js .main-navigation ul {
display: none; } }
/*--------------------------------------------------------------
5.3 Site, posts and pages navigation
--------------------------------------------------------------*/
.comment-navigation,
.paging-navigation,
.post-navigation
.image-navigation {
margin: 0 0 1em;
overflow: hidden; }
.post-navigation a .meta-nav {
color: #c9a6ab;
font-size: 18px;
padding: 2px 8px 6px 8px; }
.post-navigation a:hover .meta-nav {
color: #ff7369;
text-decoration: none; } /* needs fix */
/* pagination */
.page-numbers,
.nav-previous a,
.nav-next a,
.nav-previous-page a,
.nav-next-page a {
font-size: 10px;
font-size: 0.625rem;
overflow: hidden;
line-height: 2;
margin: 0 0 6px 0;
text-transform: uppercase;
letter-spacing: 0.1em;
color: black;
padding: 10px 12px;
background-color: #faf4f4; }
.page-numbers,
.prev page-numbers,
.next page-numbers {
display: inline-block; }
/* navigation specific */
.nav-previous a,
.nav-previous-page,
.image-navigation .nav-previous,
.image-navigation .previous,
.comment-navigation .nav-previous,
.paging-navigation .nav-previous,
.post-navigation .nav-previous {
display: inline-block;
text-align: left; }
.nav-next a,
.nav-next-page,
.image-navigation .nav-next,
.image-navigation .next,
.comment-navigation .nav-next,
.paging-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right; }
.image-navigation {
font-family: Inconsolata, monospace;
font-size: 16px;
font-size: 1rem; }
.image-navigation .text-nav {
display: block;
text-align: center }
.image-navigation .meta-nav {
border-radius: 3px; /* 0px square shaped */
font-size: 24px;
font-size: 1.5rem;
color: black;
background-color: transparent;
text-align: center;
padding: 4px; }
/*--------------------------------------------------------------
6.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute; }
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto;
color: #20759c;
display: block;
font-size: 14px;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar */ }
/*--------------------------------------------------------------
7.0 Alignments
--------------------------------------------------------------*/
.alignleft {
float: left;
margin: 1.3em; }
.alignright {
float: right;
margin: 1.3em; }
.aligncenter {
clear: both;
display: block;
margin: 0 auto 1.76em; }
/*--------------------------------------------------------------
8.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.gallery:before,
.gallery:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
content: "";
display: table;
table-layout: fixed;
}
.clear:after,
.gallery:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
clear: both;
}
/* Hidden */
.hide {
display: none; }
/* =Basic Structure
----------------------------------------------- */
body {
background-color: #fff; /* #efe9ea suggested — Default to white */ }
.wrap {
margin: 0 auto; }
.site-header {
border-top: 3px solid #000; }
.site-footer {
padding: 1em 0; /* padding-top: 1em; */ }
/*--------------------------------------------------------------
9.0 Widgets
--------------------------------------------------------------*/
.widget-area .main-sidebar,
.widget-area .widget-calendar {
margin: 0 auto;
width: 294px;
text-align: center; }
.widget-area .calendar_wrap {
display: inline; }
.footer-widget-1 .widget_calendar,
.footer-widget-2 .widget_calendar,
.footer-widget-3 .widget_calendar,
.footer-widget-4 .widget_calendar {
display: inline;
letter-spacing: normal; }
.footer-widget-1,
.footer-widget-2,
.footer-widget-3,
.footer-widget-4 {
float: left;
text-align: left;
letter-spacing: 0.12em; }
.footer-widget-4 {
margin-right: 0; }
.widget-title,
.widget,
.widget a {
color: #422424;
font-size: 0.75rem;
line-height: 1.5; /*check */
font-weight: 300;
margin: 0 0 2.4em 0; }
.widget a:hover {
color: #ff7369; }
.widget ul {
list-style: none;
margin: 0;
padding: 0; }
.widget ul > li {
display: block;
list-style: none;
padding: .6em 0; }
.widget ul > li:last-child {
padding-bottom: 0; }
.widget ul ul > li:first-child {
margin-top: .8em; }
.widget ul ul {
margin-left: .2em; }
.widget-title,
.widget-title a {
line-height: 1;
margin: 0 0 .6em;
text-decoration: none;
max-width: 100%; }
.widget select {
width: 100%; }
/* .widget-area-wrapper {
margin: 0 auto;
max-width: 1272px; /* wraps the footer widget }*/
/* Search widget */
.widget_search form {
position: relative; }
.widget_search .search-field,
.error404 .search-field,
.search .search-field {
color: #ff91ae;
text-align: center;
width: 100%; }
.widget_search .search-submit {
display: none; }
/* Calendar widget */
.widget_calendar,
.widget_calendar a {
font-size: 12px; }
.widget_calendar caption {
color: #769993;
letter-spacing: 0.2em;
line-height: 2;
text-align: left;
text-transform: uppercase; }
.widget_calendar thead th,
.widget_calendar tbody td {
border: 1px solid #f0f0f0; /* fallback */
border: 1px solid rgba(255, 255, 255, 0.2);
border-width: 0px 1px 1px 0px;
text-align: center; }
.widget_calendar thead th,
.widget_calendar tbody td {
background-color: #fff; }
.widget_calendar thead th a,
.widget_calendar tbody td a {
background-color: #0ddb85;
color: #fff;
padding: 0.5rem; }
.widget_calendar tbody td a:hover {
background-color: #00ffcc;
color: #fff; }
.widget_calendar tfoot a {
color: black; }
/* =Attachment page */
article.attachment .entry-content,
article.attachment .attachment {
margin-top: 0;
max-width: 1920px;
text-align: center; }
article.attachment .entry-caption {
max-width: 696px;
font-size: small; }
article.attachment .entry-meta {
margin-bottom: 0; }
/* =404 Page / No search result */
article.error404,
article.no-results {
padding-top: 48px; }
.error404 .entry-content,
.no-results .entry-content {
margin: 24px auto 0 auto; }
article.error404 .search-form,
article.no-results .search-form {
text-align: center; }
article.error404 input[type="search"],
article.no-results input[type="search"] {
margin-bottom: 12px;
font-size: 18px;
font-size: 1.125rem; }
article.error404 .widget {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
article.error404 .widget a {
border-bottom: 0; }
article.error404 .widget-title,
article.error404 .widgettitle {
font-size: 18px;
font-size: 1.125rem;
line-height: 2;
font-weight: 700;
letter-spacing: 0.1em;
margin-bottom: 2.4em;
text-transform: uppercase; }
article.error404 .widget ul,
article.error404 .widget ul a {
font-size: 16px;
font-size: 1rem;
line-height: 2;
font-weight: 300;
list-style: none;
margin: 0; }
article.error404 .widget li {
border-top: 1px solid #ffeeee; }
article.error404 .widget_calendar,
article.error404 .widget_calendar a {
width: auto;
font-size: 12px;
line-height: 2; }
article.error404 .widget_archive p,
article.error404 .widget_calendar {
font-size: 16px;
font-size: 1rem;
clear: both; }
article.error404 .widget_calendar caption {
color: #769993; }
article.error404 .widget_calendar thead th,
article.error404 .widget_calendar tbody td {
border: 1px dotted #f0f0f0; /* fallback */
border: 1px dotted rgba(0, 0, 0, 0.1);
border-width: 0 1px 1px 0;
width: inherit; }
article.error404 .widget_calendar tfoot td {
border: none;
padding: 0; }
/*--------------------------------------------------------------
10.0 Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
10.1 Posts and pages
--------------------------------------------------------------*/
.blog .entry-meta {
display: block; }
.sticky {
color: #422442;
background-color: #00ffaa; } /* #faf4f4 #7369FF, #00ffaa or #f3e7e7 */
.sticky .entry-meta,
.sticky .entry-meta a,
.sticky .categories-links a {
color: #000000; }
.sticky .entry-title a {
color: #ffffff; }
.sticky .entry-title a:hover {
color: #422442; }
.sticky .entry-date {
display: none; }
.entry-wrap {
margin: 0 auto;
max-width: 1920px; }
.hentry {
padding: 12px 0 24px 0; }
.attachment-strip-featured-thumbnail {
display: block;
margin: 0 auto;
margin-top: 24px; }
.entry-title, .entry-title a {
color:#422442;
margin: 0 auto;
max-width: 696px;
-ms-word-wrap: break-word; /* support non-breaking text for edge cases */
word-wrap: break-word;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align:center; }
.entry-title a:hover {
text-decoration: none;
color:#ff7369; }
.categories-links,
.entry-meta {
display: block;
font-size: 10px;
font-size: 0.625rem;
letter-spacing: 0.12em;
line-height: inherit;
max-width: 696px;
padding: 24px 0;
text-transform: uppercase; }
.entry-meta span + span:before {
content: "\0020\007C\0020";
color: #c9a6ab; }
.entry-meta:hover {
opacity: 1; }
.categories-links a,
.entry-meta,
.entry-meta a {
text-decoration:none;
color:#c9a6ab; /* #ff91ae or #c9a6ab */ }
.sep {
color:#ff7369; }
.byline {
display: none; }
.single .byline,
.group-blog .byline {
display: inline; }
.entry-content,
.entry-summary {
margin: 0 0 24px 0;
max-width: 768px; /* 840px 792px 696px */
width: 100%; }
/*--------------------------------------------------------------
10.2 Post Formats
--------------------------------------------------------------*/
/* Standard */
.format-standard {
margin-top: 0;
margin: 0 auto; }
.entry-meta {
margin-bottom: 0; }
/* Image */
.format-image .entry-content {
max-width: 1920px;
text-align: left; }
/* Quote */
.format-quote .entry-content {
color: gray; }
/* Asides */
.format-aside .entry-content {
color: #c9a6ab;
overflow: hidden; }
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object,
video {
max-width: 100%; }
p > embed,
p > iframe,
p > object,
span > embed,
span > iframe,
span > object {
margin-bottom: 0; }
/* link */
.format-link, .format-chat {
margin: 0 auto;
font-family: Inconsolata, monospace; }
.format-link .entry-content a {
color: #7369FF; }
/* Chat */
.format-chat {
color: white;
background-color: #7369FF; /* #ff7369 over #c9a6ab or a contrasting colour #BE69FF */
padding: 1.2em 0;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.8; }
.format-chat .entry-content a,
.format-chat .entry-title a {
color: white; }
/* Gallery */
.format-gallery .entry-content {
max-width: 1920px; }
.format-gallery .entry-meta {
margin-top: 12px; }
/* Video */
.format-video .entry-content {
height: 0;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 0;
overflow: hidden;
margin-bottom: 1.2em; }
.format-video iframe,
.format-video object,
.format-video embed {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%; }
.tab--preview {
display: block;
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden; }
.tab--preview iframe,
.tab--preview object,
.tab--preview embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.attachment-strip-featured-thumbnail { /* Add space to the post thumbnail meta */
padding-bottom: 12px; }
/*--------------------------------------------------------------
10.3 Author Box
--------------------------------------------------------------*/
.author-index .author-avatar {
display: inline-block; }
.author-avatar img {
max-width: 240px;
outline: double;
outline-color: #f9f9f9;
margin-bottom: 0; }
.author-index .author-title {
margin-top: 0;
text-align: center;
color: lightgrey; }
.author-index .author-description {
display: inline-block;
text-align: left;
background: transparent; }
/*--------------------------------------------------------------
10.4 Media
--------------------------------------------------------------*/
.gallery-item {
float: left;
margin: 0 6px 0 0; /* vertical & horizontal space between image galleries */
line-height: 1.2; /* remove default space between rows */
overflow: hidden;
position: relative; }
.gallery-columns-1 .gallery-item {
max-width: 100%; }
.gallery-columns-2 .gallery-item {
max-width: 48%;
max-width: calc(50% - 6px); }
.gallery-columns-3 .gallery-item {
max-width: 32%;
max-width: calc(33.48% - 6px); }
.gallery-columns-4 .gallery-item {
max-width: 23%;
max-width: calc(25% - 6px); }
.gallery-columns-5 .gallery-item {
max-width: 19%;
max-width: calc(20% - 6px); }
.gallery-columns-6 .gallery-item {
max-width: 15%;
max-width: calc(16.7% - 6px); }
.gallery-columns-7 .gallery-item {
max-width: 13%;
max-width: calc(14.28% - 6px); }
.gallery-columns-8 .gallery-item {
max-width: 11%;
max-width: calc(12.5% - 6px); }
.gallery-columns-9 .gallery-item {
max-width: 9%;
max-width: calc(11.1% - 6px); }
.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery-columns-9 .gallery-item:nth-of-type(9n) {
margin-right: 0; }
.gallery-columns-1 .gallery-size-medium figure.gallery-item:nth-of-type(1n+1),
.gallery-columns-1 .gallery-size-thumbnail figure.gallery-item:nth-of-type(1n+1),
.gallery-columns-2 .gallery-size-thumbnail figure.gallery-item:nth-of-type(2n+1),
.gallery-columns-3 .gallery-size-thumbnail figure.gallery-item:nth-of-type(3n+1) {
clear: left; }
.gallery-caption {
background-color: rgba(255, 255, 255, 0.7);
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #777777;
font-size: 12px;
font-style: italic;
line-height: 1.5;
margin: 0;
max-height: 50%;
opacity: 0;
padding: 6px 8px;
position: absolute;
bottom: 0;
left: 0;
text-align: left;
width: 100%; }
.gallery-caption:before {
content: "";
height: 100%;
min-height: 49px;
position: absolute;
top: 0;
left: 0;
width: 100%; }
.gallery-item:hover .gallery-caption {
opacity: 1; }
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
display: none; }
/* Captions settings */
.wp-caption {
margin-bottom: 34px;
max-width: 100%; }
.wp-caption img {
display: block;
height: auto;
margin: 0 auto;
max-width: 100%; }
.wp-caption-text {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 12px;
font-size: 0.75rem;
font-style: italic;
line-height: 1.44;
margin: 10px 0 7px 0;
padding: 0 10px 0 0; /* Prevent caption overflowing image width since wp-caption has 10px wider width */
text-align: center; }
/*--------------------------------------------------------------
10.5 Comics
--------------------------------------------------------------*/
.comic .entry-title {
font-size: 24px;
font-size: 1.5rem;
font-weight: 400;
color: #faf4f4; /* #F3E7E7 */
margin-bottom: 0.5em; /* 1em = 24px */ }
.archive .entry-comic {
margin-bottom: 2em; }
.comic .categories-links a {
color: #422424; }
.comic .post-edit-link {
padding: 9px 6px 6px 6px;
font-size: 10px;
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: black;
background-color: #ffff00; /* #69FF73 #FFFF00 */
text-align: left; }
.comic .entry-comic {
font-family: Inconsolata, monospace;
font-size: 0.8em; }
.comic .entry-meta {
text-align: right;
max-width: 100%; }
.single-comic .entry-meta {
display: none; }
.navigation-comic a {
text-decoration: none; /* accessibility: remove to highlight link on hover */ }
.navigation-comic {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: space-between;
width: 100%; }
.navigation-comic .nav-first,
.navigation-comic .nav-previous {
text-align: left;
width: 19.9%; }
.navigation-comic .nav-last,
.navigation-comic .nav-next {
text-align: right;
width: 19.9%; }
.navigation-comic .nav-first a,
.navigation-comic .nav-previous a,
.navigation-comic .nav-title,
.navigation-comic .nav-title a,
.navigation-comic .nav-next a,
.navigation-comic .nav-last a,
.series-title, .series-title a,
.post-parent-title, .post-parent-title a {
text-align: center;
font-family: Inconsolata, monospace; /* better on small screens */
font-size: 14px;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase; }
.navigation-comic .nav-title a:hover,
.comic-episode, .comic-episode a:hover {
color: #ff7369; }
.navigation-comic .nav-first a,
.navigation-comic .nav-previous a,
.navigation-comic .nav-next a,
.navigation-comic .nav-last a {
background: #faf4f4;
border-radius: 3px;
color: #c9a6ab;
display: inline-block;
padding: 0.6em;
width: 96px;
line-height: 2; }
.navigation-comic .nav-first a:hover,
.navigation-comic .nav-previous a:hover,
.navigation-comic .nav-next a:hover,
.navigation-comic .nav-last a:hover {
background: #ff7369;
color: #fff; }
.navigation-comic .nav-first a:active,
.navigation-comic .nav-previous current_page_item > a,
.navigation-comic .nav-next current_page_item > a,
.navigation-comic .nav-last current_page_item > a {
background: #000;
color: #fff; }
.series-title, .series-title a, .series-title li,
.post-parent-title, .post-parent-title a {
color: #422442;
text-align: center;
margin-bottom: 1em; }
.post-parent-title {
display: inline-block;
margin: 0 auto;
width: 100%; }
/* the comic page title */
.page-title {
margin: 0.24em;
text-align: center; }
.author-title {
text-transform: uppercase;
font-weight: 500; }
/* comics blurb */
.comic-blurb,
.taxonomy-description,
.author-description {
margin: 0 auto;
max-width: 696px;
background-color: #FAF4FA; /* fallback */
background-color: rgba(253, 250, 250, 0.24);
font-family: Inconsolata, monospace;
font-weight: 400;
margin-top: 0;
padding: 1.2em;
font-size: 16px;
font-size: 1rem;
line-height: 1.2; }
/* Two columns grid */
.two-columns { width: 100%; margin: 1.2em 0; }
.two-columns:before, .two-columns:after { content: " "; display: table; }
.two-columns:after { clear: both; }
.two-column { float: left; margin: 0 3% 1em 0; width: 48.5%; }
.two-column:nth-child(2n) { margin-right: 0; }
.two-column:nth-child(2n+1) { margin-left: 0; clear: left; }
.two-column img { width: 100%; }
@media screen and (max-width: 552px) {
.two-column { margin: 0; width: 100%; }
.two-column :nth-child(1n) { margin-right: 0; }
.two-column :nth-child(1n+1) { margin-left: 0; clear: left; }
.series-title { font-size: 10px; font-weight: 100; line-height: 1.2; } }
/* Three columns grid */
.three-columns { width: 100%; margin: 0.6em 0 0 0; }
.three-columns:before, .three-columns:after { content: " "; display: table; }
.three-columns:after { clear: both; }
.three-column { float: left; margin: 0 2% 0.75em 0; width: 32%; }
.three-column:nth-child(3n) { margin-right: 0; }
.three-column:nth-child(3n+1) { margin-left: 0; clear: left; }
.three-column img { width: 100%; }
@media screen and (max-width: 744px) {
.three-column { width: 100%; }
.three-column :nth-child(2n) { margin-right: 0; }
.three-column :nth-child(2n+1) { margin-left: 0; clear: left; } }
@media screen and (max-width: 456px) {
.three-column { margin: 0; width: 100%; }
.three-column :nth-child(1n) { margin-right: 0; }
.three-column :nth-child(1n+1) { margin-left: 0; clear: left; }
.series-title { font-size: 10px; font-weight: 100; line-height: 1.2; } }
/* Four columns grid */
.four-columns { width: 100%; margin: 0.6em 0 0 0; }
.four-columns:before, .four-columns:after { content: " "; display: table; }
.four-columns:after { clear: both; }
.four-column { float: left; margin: 0 1.333% 1.2rem 0; width: 24%; }
.four-column:nth-child(4n) { margin-right: 0; }
.four-column:nth-child(4n+1) { margin-left: 0; clear: left; }
.four-column img { width: 100%;
max-width: 624px; /* Width of new image */
max-height: 312px; /* Height of new image */ }
@media screen and (max-width: 816px) {
.four-column { margin: 0 2% 0.625rem 0; width: 49%; }
.four-column:nth-child(2n) { margin-right: 0; }
.four-column:nth-child(2n+1) { margin-left: 0; clear: left; } }
@media screen and (max-width: 456px) {
.four-column { margin: 0; width: 100%; }
.four-column:nth-child(1n) { margin-right: 0; }
.four-column:nth-child(1n+1) { margin-left: 0; clear: left; }
.series-title { font-size: 10px; font-weight: 100; line-height: 1.2; } }
/*--------------------------------------------------------------
10.6.1 Hide Comments
--------------------------------------------------------------*/
button.toggle-comments {
border-width: 3px;
background: none;
padding: 1em;
border: #ff91ae 2px solid; /* new pink — VS #ffaaaa */
text-decoration: none;
transition: border ease 0.3s;
font-size: 10px;
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #ff91ae; /* new pink — VS #ffaaaa */
background-color: transparent; }
.toggle-comments {
display: block;
margin: 24px auto 24px; }
/*--------------------------------------------------------------
10.6.2 Comments
--------------------------------------------------------------*/
.bypostauthor .comment-author a,
.comment-author,
.comment-author a {
font-size: 16px;
font-size: 1rem;
font-weight: 500;
padding-left: 1em;
color: #c9a6ab;
text-transform: uppercase;
vertical-align: middle; }
.comment-author .says {
display: none; }
.bypostauthor .comment-content {
color: #422442;
background: #fffcfc; /* Highlight for Theme Check */
padding-left: 1em;
margin-bottom: 1.2em;
border-radius: 6px; }
.comment-meta,
.comment-meta a,
.ping-meta {
height: 1.2;
margin-bottom: 0.6em; }
.comment-metadata, .comment-metadata a {
color: #ffcccc;
display: block;
font-family: Inconsolata, monospace;
font-size: 12px;
font-size: 0.75rem;
text-align: right; }
.comment .reply {
padding: 3px;
text-align: right; }
.comment-meta a:hover {
color: #ffaaaa;
text-decoration: none; }
.ping-meta {
color: #a2a2a2; }
.comment-awaiting-moderation {
color: #ffbb00; }
.comments,
.comment-respond {
max-width: 696px; }
.comment-author .avatar {
border-radius: 50%; /* 50% = Circle */
vertical-align: middle; }
.comments-area {
max-width: 696px;
font-family: Inconsolata, monospace;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.2;
margin: 0 auto; }
.comments-title {
margin-bottom: 24px;
text-align: center; }
.form-allowed-tags,
.form-allowed-tags code {
display: inline-block; }
.comment-respond {
margin: 2px;
padding-top: 0; }
.form-submit .submit {
background: transparent;
display: inline-block;
border: #000 2px solid;
text-decoration: none;
transition: border ease 0.3s;
font-size: 10px;
color: #000; }
.required {
color: #ff91ae; }
/*--------------------------------------------------------------
10.7 Footer
--------------------------------------------------------------*/
.site-footer {
background-color: #fff; /* #EFE9EA or #faf4f4 #FF7369 */
border-top: 3px solid #000;
border-bottom: 3px solid #000; }
.site-info {
color: #421212;
background: transparent; /* white? */
font-family: Inconsolata, monospace;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.2;
padding: 8px 0 9px 0;
text-align: center; }
.site-info a {
color: #421212; }
.site-info a:hover {
color: #ff7369; }
/*--------------------------------------------------------------
11.1 CSS for MailChimp 4 WP form
--------------------------------------------------------------*/
.mc4wp-form {
max-width: 294px;
margin: 0 auto; } /* the form element */
.mc4wp-form label {
display: none; } /* labels */
.mc4wp-form input {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #faf4f4;
padding: 6px 6px 5px;
margin:0 4px 0 0;
line-height: 1.2;
display: block;
text-align: center;
width: 94%; } /* input fields */
.mc4wp-form input[type="email"],
.mc4wp-form input[type="text"] {
background: #fff; }
.mc4wp-form input[type="submit"] {
/* font-family: Inconsolata, monospace; */
font-size: 16px;
font-size: 1rem;
border: 2px solid #000; } /* submit button */
.mc4wp-success {
color: #0ddb85; } /* success message */
.mc4wp-error {
color: #ff00cc; } /* error messages */
.mc4wp-response {
letter-spacing: normal;
font-family: Inconsolata, monospace; }
@media screen and (max-width: 600px) {
.mc4wp-form input[type="submit"] {
font-size: 12px;
font-size: 0.75rem; } } /* small screens */
/*--------------------------------------------------------------
11.2 RoyalSlider
--------------------------------------------------------------*/
/* Enables browsing for users with JavaScript off */
.royalSlider > .rsContent {
visibility: visible;
position: relative; }
.rsImg {
visibility: visible;
display: inline-block;
width: 100%;
vertical-align: middle;
margin: 0 0 9px 0; }
/*--------------------------------------------------------------
11.3 Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll .neverending .site-footer { /* Theme Footer (when set to scrolling) */
display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
.infinity-end .neverending .site-footer {
display: block; }
/*--------------------------------------------------------------
12.0 Media queries
--------------------------------------------------------------*/
@media screen and (min-width: 288px) {
.wrap {
max-width: 264px; } }
@media screen and (min-width: 312px) {
.wrap {
max-width: 288px; } }
@media screen and (min-width: 456px) {
.wrap {
max-width: 408px;
} }
@media screen and (min-width: 600px) {
.wrap {
max-width: 552px; }
.comment-list .children {
margin-left: 16px; }
.comment-author {
padding-left: 0; }
.comment-author .avatar {
width: 96px;
height: 96px; }
.comment-content,
.comment-meta {
padding: 0; }
article.error404 .widget {
float: left;
width: 50%; }
article.error404 .widget_most_used_categories,
article.error404 .widget_archive {
padding-right: 0;
padding-left: 12px; }
.footer-widget-1,
.footer-widget-2,
.footer-widget-3,
.footer-widget-4 {
margin: 0 8% 0 0;
width: 42%; } }
@media screen and (min-width: 744px) {
.wrap {
max-width: 696px; }
article.error404 input[type="search"],
article.no-results input[type="search"] {
width: auto; } }
@media screen and (min-width: 888px) {
.wrap {
max-width: 840px; }
.entry-meta {
text-align: left; }
.entry-content,
.entry-summary,
article.attachment .entry-caption {
margin: auto; }
.format-video .entry-content {
max-width: 840px; } }
@media screen and (min-width: 1032px) {
.wrap {
max-width: 984px; }
.entry-meta {
text-align: right; }
.entry-meta span + span:before {
content: ""; }
.entry-meta,
.comic .entry-meta {
float: right;
max-width: 168px; }
.entry-meta span {
display: block;
padding: 2px 0; }
.entry-meta .entry-format {
display: block; }
.format-video .entry-content {
max-width: 984px; }
.footer-widget-1,
.footer-widget-2,
.footer-widget-3,
.footer-widget-4 {
margin: 0px 2% 0px 0px;
width: 23%; } }
@media screen and (min-width: 1176px) {
.wrap {
max-width: 1128px; }
.categories-links {
max-width: 100%; }
.entry-meta {
width: 240px; }
.format-video .entry-content {
max-width: 1128px; } }
@media screen and (min-width: 1320px) {
.wrap,
.format-video .entry-content {
max-width: 1272px; } }
@media screen and (min-width: 1680px) {
.wrap {
max-width: 1608px; }
.format-video .entry-content,
.entry-comic .wrap {
max-width: 1652px; } }
@media screen and (min-width: 2048px) {
.entry-comic .wrap {
max-width: 1920px; } }
@media screen and (max-width: 816px) {
.site-title {
font-size: 24px;
font-size: 1.5rem;
border: 5px solid #420084;
max-width: 312px; }
.series-title, series-title a,
.post-parent-title, .post-parent-title a {
font-size: 10px;
font-size: 0.625rem;
font-weight: 500; }
.navigation-comic .nav-previous a,
.navigation-comic .nav-next a,
.navigation-comic .nav-title a,
.navigation-comic .nav-first a,
.navigation-comic .nav-last a {
font-size: 10px;
font-size: 0.625rem;
vertical-align: text-bottom;
width: 72px; }
.navigation-comic .nav-title {
width: 19.9%; } }
@media screen and (max-width: 600px) {
body {
font-size: 16px;
font-size: 1rem;
line-height: 1.4166666667; }
.format-chat, pre, code, kbd, tt, var, textarea, button, input, select {
font-size: 12px;
font-size: 0.875rem;
line-height: 1.4; }
.site-title {
font-size: 14.4px;
font-size: 0.875rem;
border: 4px solid #420084;
max-width: 168px; }
.site-branding .logo {
width: 62px;
height: 31px; }
.site-description {
display: block; }
blockquote {
font-size: 16px;
}
.entry-title {
font-size: 1.5rem; }
.entry-content,
.entry-summary {
margin-top: 0; }
.comment-author .avatar {
width: 48px;
height: 48px; }
.comments-area article,
.comment-list .trackback,
.comment-list .pingback {
margin-bottom: 18px;
padding-top: 18px; }
.comments-area,
.comment-meta a,
.comment-content blockquote p {
font-size: 0.875rem;
line-height: 1.6; }
.comments-title {
margin-bottom: 24px; }
.content .navigation-comment {
padding: 0; }
.comment-list {
margin-bottom: 48px; }
.comment-nav-below {
padding-bottom: 48px; }
.comic .entry-title {
font-size: 16px;
font-size: 1rem; }
.series-title, series-title a {
font-size: 8px;
font-size: 0.5rem;
margin-top: 1em; }
.navigation-comic .nav-previous a,
.navigation-comic .nav-next a,
.navigation-comic .nav-title a,
.navigation-comic .nav-first a,
.navigation-comic .nav-last a {
font-size: 8px;
font-size: 0.5rem;
letter-spacing: normal;
width: 48px; }
.widget-area {
overflow: hidden; }
.footer-widget-1,
.footer-widget-2,
.footer-widget-3,
.footer-widget-4,
.widget-area .search-form {
margin: 0 auto;
width: 100%; } }