Melville/style.css
2020-06-29 19:18:54 -04:00

983 lines
16 KiB
CSS

/*
Theme Name: Melville
Theme URI: http://jacobhaddon.com/themes
Description: A clean journal theme with great typography
Version: 1.0.3
Author: Jacob Haddon / Dalton Rooney
Author URI: jacobhaddon.com
Tags: clean, basic, typography, minimalist, white, single column
Based on TwentyTen, the default WordPress theme
Original theme, Dalton Rooney - http://madebyraygun.com
*/
@import url(https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0);
/* @group Google Font Loader */
#site-title a, #content h1.entry-title, #content h1.page-title, #content h2.entry-title, span.cap { visibility: hidden; }
.wf-active #site-title a, .wf-active #site-title a, .wf-active #content h1.entry-title, .wf-active #content h1.page-title, .wf-active #content h2.entry-title, .wf-active span.cap, .wf-inactive #site-title a, .wf-inactive #site-title a, .wf-inactive #content h1.entry-title, .wf-inactive #content h1.page-title, .wf-inactive #content h2.entry-title, .wf-inactive span.cap { visibility: visible; }
/* @end */
/* @group Reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td
{
margin: 0;
padding: 0;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var
{
font-style: normal;
font-weight: normal;
}
ul li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
font-weight: normal;
}
q:before, q:after { content: ''; }
/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight: bold; }
em { font-style: italic; }
a img { border: none; }
/* Gets rid of IE's blue borders */
/* @end */
/* Typography */
/* Serif */
body
{
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
}
span.dropcap,
.page #content h2,
#site-title a,
h3#reply-title, h3#comments-title,
#menu div.menu li a, #menu div.menu-footer li a,
pre.wp-block-verse
{
font-family: 'Sorts Mill Goudy', Georgia, serif;
}
/* San-Serif */
a#cancel-comment-reply-link
{
font-family: 'helvetica neue',helvetica, arial,sans-serif;
}
/* Width Styles */
div#wrapper, div#header
{
/* width: 600px; */
max-width: 810px;
}
#menu, div#footer
{
max-width: 810px; /* div#wrapper + 160 px */
/* width: 760px; */
}
/* @group Body */
body
{
font-size: 1.1rem;
color: #555555;
background: #eeeeee url(images/bg.png);
text-align: left;
line-height: 1.3em;
margin: 0;
text-shadow: #fff 0 0 1px;
}
div#wrapper
{
background-color: #ffffff;
min-height: 100%;
height: auto !important;
margin: 0 auto -40px;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
-moz-box-shadow: 1px 0 20px #dddddd;
-webkit-box-shadow: 1px 0 20px #dddddd;
box-shadow: 1px 0 20px #dddddd;
overflow: hidden;
padding-top: 20px;
}
h1, h2, h3, h4, h5, h6
{
margin: 15px 0;
clear: both;
}
#content h1
{
font-size: 1.6em;
font-weight: bold;
margin: 20px 0;
}
#content h2 { font-size: 1.4em; }
#content h3 { font-size: 1.2em; }
#content h4 { font-size: 1em; }
#content h5 { font-size: 0.9em; }
#content h6 { font-size: 0.9em; }
p
{
margin: 0 0 20px 0;
line-height: 1.5em;
}
a { color: #777777; }
a:hover { color: #555555; }
blockquote
{
margin: 30px 0 0 0;
padding: 0 0 0 30px;
border-left: 1px solid #eee;
font-style: italic;
}
cite { font-style: italic; }
html, body { height: 100%; }
hr { margin: 20px 0; }
#content table
{
border: 1px solid #e7e7e7;
margin: 0 -1px 24px 0;
text-align: left;
width: 100%;
}
#content tr th, #content thead th
{
color: #888;
font-size: 12px;
font-weight: bold;
line-height: 18px;
padding: 9px 24px;
}
#content tr td
{
border-top: 1px solid #e7e7e7;
padding: 6px 24px;
}
#content tr.odd td { background: #fafafa; }
#content div.post { margin: 0 0 70px 0; }
#content ul, #content ol { margin: 5px 0; }
#content li { margin: 0 0 0 20px; }
#content dt,
#content th
{
font-size: 1.1em;
margin: 15px 0;
}
#content pre
{
margin: 20px 0;
padding: 10px;
/*
background-color: #fdfdfd;
border: 1px solid #eeeeee;
*/
}
#content address
{
font-style: italic;
margin: 15px 0;
}
#content var { font-style: italic; }
#content h1.entry-title, #content h1.page-title, #content h2.entry-title
{
text-align: center;
margin: 0 0 30px 0;
font-weight: normal;
/* font-family: 'OFLSortsMillGoudyRegular', Georgia, serif; */
font-size: 1.8em;
line-height: 1.2em;
text-decoration: none;
color: #555555;
clear: both;
}
#content abbr, #content acronym { border-bottom: 1px dotted #ccc; }
#content big { font-size: 1.2em; }
#content ins
{
color: #333;
background: #f5f5f5;
text-decoration: none;
}
div#content
{
margin: 0 0 20px 0;
padding: 0px 80px 0 80px;
}
#content div.post p.date, #content div.post p.post-meta
{
margin: 30px 0 0 0;
padding-bottom: 40px;
background: url(images/post-sep.png) no-repeat center bottom;
}
#content div.post p.post-meta { margin: 0 0; }
.single #content div.post p.date
{
font-size: 1em;
margin: 40px 0 5px 0;
padding: 0;
background: none;
}
.page #content h2
{
/* font-family: 'OFLSortsMillGoudyRegular', Georgia, serif; */
margin: 35px 0 10px;
font-size: 18px;
color: #555555;
}
.page.page-template-archives-php #content h2
{
font-size: 20px;
margin: 60px 0 16px;
}
label.screen-reader-text { display: none; }
.entry-title a, .page-title a
{
color: #555555;
text-decoration: none;
}
#content div.post p.date, p.post-meta
{
font-size: .8em;
clear: both;
}
a#cancel-comment-reply-link
{
font-size: 11px;
margin: 0 10px;
}
p.wp-caption-text
{
font-size: 11px;
margin: 0 0 20px 20px;
}
.page-link { margin: 20px 0 22px 0; }
.page-link a:link, .page-link a:visited
{
background: #f1f1f1;
color: #333;
font-weight: normal;
padding: 0.2em;
text-decoration: none;
}
.home .sticky .page-link a { background: #d9e8f7; }
.page-link a:active,
.page-link a:hover { color: #aaa; }
.alignnone { margin: 20px 0; }
.aligncenter
{
display: block;
margin: 20px auto;
}
.alignleft
{
float: left;
margin: 5px 20px 5px 0;
}
.alignright
{
float: right;
margin: 5px 0 5px 20px;
}
.wp-caption
{
border: none;
padding: 0px;
margin-bottom: 40px;
}
.size-thumbnail { margin-right: 10px; }
br.clear
{
clear: both;
display: block;
height: 1px;
margin: -1px 0 0 0;
}
/* Use this br class to clear your floated columns */
/* @end */
/* @group Header */
div#header
{
margin: 0 0 60px 0;
padding: 0 0 20px 0;
color: #777777;
/* border-bottom: 1px solid #bbbbbb; */
background: url(images/post-sep.png) no-repeat center bottom;
}
#site-title
{
margin: 40px 0 20px 0;
text-align: center;
}
#site-title a
{
font-size: 60px;
font-style: italic;
text-decoration: none;
color: #555555;
}
div#site-description { text-align: center; }
/* @end */
/* @group Archives */
.archive #content h1.page-title { margin-bottom: 60px; }
input#s
{
color: #777777;
font-size: 12px;
height: 16px;
width: 200px;
padding: 3px 5px;
border: 1px solid #dddddd;
background-color: #fefefe;
}
input#searchsubmit
{
color: #777777;
font-size: 12px;
height: 24px;
width: 80px;
margin: 0 0 0 40px;
border: 1px solid #dddddd;
background-color: #fefefe;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
input#searchsubmit:hover
{
border-color: #aaaaaa;
color: #555555;
}
.page-template-archives-php ul.taxonomy
{
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
.archive h1.page-title { margin-bottom: 60px; }
.archive #content div.post p.date { margin: 10px 0 15px 0; }
.page-template-archives-php #content ul, .page-template-archives-php #content ol { margin: 0; }
.page-template-archives-php #content li { margin: 0; }
.page-template-archives-php #content li li { margin: 0 0 0 10px; }
.archive #content div.post
{
margin: 0 0 60px 0;
padding: 0 0 10px 0;
background: url(images/post-sep.png) no-repeat center bottom;
}
/* @end */
/* @group Gallery */
#content .gallery { margin-top: 20px; }
#content .gallery .gallery-item
{
float: left;
margin: 0 0 20px 0;
width: 33%;
text-align: center;
}
#content .gallery img { border: 1px solid #dddddd; }
#content .gallery .gallery-caption
{
color: #888;
font-size: 12px;
margin: 0 0 12px;
}
#content .gallery dl { margin: 0; }
#content .gallery img { border: 1px solid #dddddd; }
#content .gallery br+br { display: none; }
#content .attachment img
{
display: block;
margin: 0 auto;
}
/* @end */
/* @group Comments */
form#commentform { width: 80%; }
h3#reply-title, h3#comments-title
{
font-size: 18px;
color: #555555;
margin: 20px 0 10px 0;
}
p.comment-notes
{
font-size: 0.8em;
font-style: italic;
margin: 5px 0 20px;
}
#commentform label
{
font-size: 0.9em;
width: 30px;
}
#commentform input, #commentform textarea
{
height: 17px;
width: 280px;
padding: 3px;
margin: 0 50px 0 0;
border: 1px solid #dddddd;
background-color: #fcfcfc;
color: #777777;
overflow: hidden;
}
#commentform textarea
{
height: 100px;
width: 280px;
}
#commentform input#submit
{
clear: both;
float: none;
height: 22px;
margin: 20px 0 0 255px;
-webkit-border-radius: 03px;
-moz-border-radius: 03px;
border-radius: 03px;
}
#commentform input#submit:hover
{
border-color: #aaaaaa;
color: #555555;
}
img.avatar { display: none; }
#comments ol li
{
margin: 20px 0;
list-style-type: none;
}
#comments ol li.depth-1
{
border-bottom: 1px solid #efefef;
padding: 0 0 20px 0;
width: 500px;
}
#comments ol li.depth-2, #comments ol li.depth-3 { margin: 10px 0 0 20px; }
#commentform p.logged-in-as { font-size: 11px; }
.comment-meta { font-size: 11px; }
.comment-body p
{
margin: 10px 0 0 0;
width: 450px;
}
#cancel-comment-reply-link { font-family: ; }
a.comment-reply-link { font-size: 11px; }
p.form-allowed-tags { display: none; }
/* Comments form */
input[type="submit"] { color: #333; }
#respond
{
border-top: 1px solid #e7e7e7;
margin: 24px 0;
overflow: hidden;
position: relative;
}
#respond p { margin: 0; }
#respond .comment-notes { margin-bottom: 1em; }
.form-allowed-tags { line-height: 1em; }
.children #respond { margin: 0 48px 0 0; }
h3#reply-title { margin: 18px 0; }
#comments-list #respond { margin: 0 0 18px 0; }
#comments-list ul #respond { margin: 0; }
#cancel-comment-reply-link
{
font-size: 12px;
font-weight: normal;
line-height: 18px;
}
#respond .required
{
color: #ff4b33;
font-weight: bold;
}
#respond label
{
color: #777;
font-size: 12px;
}
#respond input
{
margin: 0 0 9px;
width: 98%;
}
#respond textarea { width: 98%; }
#respond .form-allowed-tags
{
color: #777;
font-size: 12px;
line-height: 18px;
}
#respond .form-allowed-tags code { font-size: 11px; }
#respond .form-submit { margin: 12px 0; }
#respond .form-submit input
{
font-size: 14px;
width: auto;
}
#respond #wp-comment-cookies-consent
{
width: auto;
margin: 0 10px 0 0;
}
/* @end */
/* @group Menu */
#menu
{
margin: 0 auto;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
-moz-box-shadow: 1px 4 20px #dddddd;
-webkit-box-shadow: 1px 4 20px #dddddd;
box-shadow: 1px 4 20px #dddddd;
}
#menu div.menu, #menu div.menu-footer
{
background-color: #dadada;
border-bottom-style: double;
border-bottom-color: #bbb;
border-bottom-width: 3px;
border-top-style: double;
border-top-color: #bbb;
border-top-width: 3px;
}
#menu div.menu ul, #menu div.menu-footer ul
{
margin: 0 0 0 0;
padding: 10px 0 6px;
border-bottom: 1px solid #dddddd;
text-align: center;
}
#menu div.menu li, #menu div.menu-footer li
{
display: inline;
margin: 0 15px;
}
#menu div.menu li a, #menu div.menu-footer li a
{
/* font-family: 'OFLSortsMillGoudyRegular', Georgia, serif; */
font-size: 18px;
font-style: italic;
text-decoration: none;
color: #555555;
}
#menu div.menu li a:hover, #menu div.menu-footer li a:hover { color: #333333; }
#menu div.menu ul li.current_page_item a, #menu div.menu-footer ul li.current_page_item a
{
text-decoration: underline;
color: #333333;
}
/* @end */
/* @group Footer */
.push, #footer
{
/* height: 40px; */
clear: both;
}
div#footer
{
margin: 0 auto;
/* padding: 20px 0 0 0; */
background-color: #fafafa;
border-top: 1px solid #dddddd;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
-moz-box-shadow: 1px 4 20px #dddddd;
-webkit-box-shadow: 1px 4 20px #dddddd;
box-shadow: 1px 4 20px #dddddd;
}
#footer p.credits
{
margin: 0 80px;
font-size: .8em;
}
span.older-posts a, span.newer-posts a
{
text-decoration: none;
margin-right: 20px;
}
/* NEW THINGS! */
#site-title { padding-top: 30px; }
/* menu styles */
.melville_menu ul
{
list-style: none;
padding: 0px;
}
.melville_menu ul ul
{
display: none;
position: absolute;
background-color: white;
}
.melville_menu li
{
display: inline-block;
padding-right: 20px;
}
.melville_menu li a { text-decoration: none; }
.melville_menu li:hover ul { display: block; }
.melville_menu li li
{
display: block;
text-align: left;
padding-top: 10px;
padding-left: 5px;
}
.melville_menu li ul { }
.melville_menu li li a { }
.melville_menu
{
text-align: center;
font-variant: small-caps;
}
/* ## Gutenberg Blocks ## */
pre.wp-block-verse
{
line-height: 1.5em;
color: #555555;
}
.wp-block-pullquote blockquote { font-style: normal; }
p.has-drop-cap:not(:focus):first-letter
{
font-size: 3em;
margin: 8px 3px -10px 0;
}
.headerLine
{
border-bottom: 0.5px #bbbbbb;
width: 80%;
margin-right: auto;
margin-left: auto;
}
/* @end */
/* =Widget Areas
-------------------------------------------------------------- */
.widget-area {
width: 30%
}
.widget-area ul {
list-style: none;
margin-left: 0;
}
.widget-area ul ul {
list-style: square;
margin-left: 1.3em;
}
.widget-area select {
max-width: 100%;
}
.widget_search #s {/* This keeps the search inputs in line */
width: 60%;
}
.widget_search label {
display: none;
}
.widget-container {
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
margin: 0 0 18px 0;
}
.widget-container .wp-caption img {
margin: auto;
}
.widget-title {
color: #222;
/* font-weight: bold; */
}
.widget-area a:link,
.widget-area a:visited {
text-decoration: none;
}
.widget-area a:active,
.widget-area a:hover {
text-decoration: underline;
}
.widget-area .entry-meta {
font-size: 11px;
}
#wp_tag_cloud div {
line-height: 1.6em;
}
#wp-calendar {
width: 100%;
}
#wp-calendar caption {
color: #222;
font-size: 14px;
/* font-weight: bold; */
padding-bottom: 4px;
text-align: left;
}
#wp-calendar thead {
font-size: 11px;
}
#wp-calendar thead th {
}
#wp-calendar tbody {
color: #aaa;
}
#wp-calendar tbody td {
background: #f5f5f5;
border: 1px solid #fff;
padding: 3px 0 2px;
text-align: center;
}
#wp-calendar tbody .pad {
background: none;
}
.wp-calendar-nav {
display: table;
width: 100%;
}
.wp-calendar-nav span {
display: table-cell;
}
.wp-calendar-nav-next,
#wp-calendar tfoot #next {
text-align: right;
}
.widget_rss a.rsswidget {
color: #000;
}
.widget_rss a.rsswidget:hover {
color: #ff4b33;
}
.widget_rss .widget-title img {
width: 11px;
height: 11px;
}
.widget_text ul,
.widget_text ol {
margin-bottom: 1.5em;
}
.widget_text ol {
margin-left: 1.3em;
}
.widget_text ul ul,
.widget_text ol ol,
.widget_text ul ol,
.widget_text ol ul {
margin-bottom: 0;
}
.widget_media_video video {
max-width: 100%;
}
.tagcloud ul {
list-style-type: none;
margin-left: 0 !important;
}
.tagcloud ul li {
display: inline-block;
}
/* Helps galleries in widget areas look presentable in most cases. */
.widget-area .gallery-columns-2 img,
.widget-area .gallery-columns-3 img,
.widget-area .gallery-columns-4 img,
.widget-area .gallery-columns-5 img,
.widget-area .gallery-columns-6 img,
.widget-area .gallery-columns-7 img,
.widget-area .gallery-columns-8 img,
.widget-area .gallery-columns-9 img {
border: none;
max-width: 90%;
width: auto;
}
/* Main sidebars */
#main .widget-area ul {
margin-left: 0;
padding: 0 20px 0 0;
}
#main .widget-area ul ul {
border: none;
margin-left: 1.3em;
padding: 0;
}
#primary {
}
#secondary {
}
/* Footer widget areas */
#footer-widget-area {
/* margin-top: 10px; */
/*
margin-left: 20px;
margin-right: 20px;
*/
margin: 20px;
}
.widget-area
{
float: left;
max-width: 255px;
width: 50%;
min-width: 150px;
}
/**
* 14.2 - >= 783px
*/
/* @media screen and (min-width: 48.9375em) */
@media screen and (min-width: 775px)
{
.widget-area
{
width: 25%;
}
}