diff --git a/style.css b/style.css index 25682c8..36c58a0 100644 --- a/style.css +++ b/style.css @@ -3,7 +3,7 @@ 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: Jacob Haddon Author URI: jacobhaddon.com Tags: clean, basic, typography, minimalist, white, single column @@ -11,7 +11,6 @@ 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 */ @@ -27,6 +26,8 @@ html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, labe padding: 0; } +html, body { height: 100%; } + table { border-collapse: collapse; @@ -41,17 +42,13 @@ address, caption, cite, code, dfn, em, strong, th, var font-weight: normal; } -/* ul li { list-style: none; } */ - -ul {list-style-type: '— ';} - +ul { list-style-type: '— '; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; - } q:before, q:after { content: ''; } @@ -65,51 +62,34 @@ a img { border: none; } /* Gets rid of IE's blue borders */ /* @end */ - -/* Typography */ - -/* Serif */ - -body +/* # Width Styles ---------------------------------------------- */ +div#wrapper, div#header, #menu, div#footer { - 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; - + max-width: 810px; } +img { max-width: 100%;} +/* # 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; -} +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 */ +/* ## San-Serif */ +a#cancel-comment-reply-link { font-family: 'helvetica neue',helvetica, arial,sans-serif; } +figcaption, input[type="submit"] { font-family: Futura; } -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 */ +/* @group Body ---------------------------------------------- */ body { font-size: 1.1rem; @@ -119,7 +99,6 @@ body line-height: 1.3em; margin: 0; text-shadow: #fff 0 0 1px; - /* for extra long words */ -ms-word-wrap: break-word; word-wrap: break-word; @@ -177,7 +156,7 @@ blockquote } cite { font-style: italic; } -html, body { height: 100%; } + hr { margin: 20px 0; } #content table @@ -238,7 +217,7 @@ hr { margin: 20px 0; } text-align: center; margin: 0 0 30px 0; font-weight: normal; -/* font-family: 'OFLSortsMillGoudyRegular', Georgia, serif; */ + /* font-family: 'OFLSortsMillGoudyRegular', Georgia, serif; */ font-size: 1.8em; line-height: 1.2em; text-decoration: none; @@ -256,10 +235,10 @@ hr { margin: 20px 0; } text-decoration: none; } -div#content -{ +div#content +{ margin: 0 0 20px 0; - padding: 0px 80px 0 80px; + padding: 0px 80px 0 80px; } #content div.post p.date, #content div.post p.post-meta @@ -281,7 +260,7 @@ div#content .page #content h2 { -/* font-family: 'OFLSortsMillGoudyRegular', Georgia, serif; */ + /* font-family: 'OFLSortsMillGoudyRegular', Georgia, serif; */ margin: 35px 0 10px; font-size: 18px; color: #555555; @@ -333,7 +312,6 @@ p.wp-caption-text .home .sticky .page-link a { background: #d9e8f7; } .page-link a:active, .page-link a:hover { color: #aaa; } - .alignnone { margin: 20px 0; } .aligncenter @@ -354,6 +332,35 @@ p.wp-caption-text margin: 5px 0 5px 20px; } +.alignwide +{ + margin: 20px 0; + position: relative; + /* max-width: 810px; */ + margin-left: -80px; + margin-right: -80px; +} + +.alignwide figcaption { + margin-left: 80px; +} + +.alignfull +{ + left: 50%; + margin-left: -50vw; + margin-right: -50vw; + max-width: 100vw; + position: relative; + right: 50%; + width: 100vw; +} + +figcaption +{ + font-size: 0.75em; +} + .wp-caption { border: none; @@ -373,20 +380,22 @@ br.clear /* Use this br class to clear your floated columns */ /* @end */ -/* @group Header */ + +/* @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; + /* 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; + padding-top: 30px; } #site-title a @@ -400,7 +409,40 @@ div#header div#site-description { text-align: center; } /* @end */ -/* @group Archives */ +/* @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; +} + +/* @end */ +/* @group Archives ---------------------------------------------- */ .archive #content h1.page-title { margin-bottom: 60px; } input#s @@ -458,7 +500,7 @@ input#searchsubmit:hover } /* @end */ -/* @group Gallery */ +/* @group Gallery ---------------------------------------------- */ #content .gallery { margin-top: 20px; } #content .gallery .gallery-item @@ -489,7 +531,7 @@ input#searchsubmit:hover } /* @end */ -/* @group Comments */ +/* @group Comments ---------------------------------------------- */ form#commentform { width: 80%; } h3#reply-title, h3#comments-title @@ -572,7 +614,7 @@ img.avatar { display: none; } width: 450px; } -#cancel-comment-reply-link { font-family: ; } +/* #cancel-comment-reply-link { font-family: ; } */ a.comment-reply-link { font-size: 11px; } p.form-allowed-tags { display: none; } @@ -645,7 +687,8 @@ h3#reply-title { margin: 18px 0; } } /* @end */ -/* @group Menu */ +/* @group Menu ---------------------------------------------- */ +/* note: change #menu and .melville_menu to be consistant and match PHP names */ #menu { margin: 0 auto; @@ -683,8 +726,8 @@ h3#reply-title { margin: 18px 0; } #menu div.menu li a, #menu div.menu-footer li a { -/* font-family: 'OFLSortsMillGoudyRegular', Georgia, serif; */ -/* font-family: Futura; */ + /* font-family: 'OFLSortsMillGoudyRegular', Georgia, serif; */ + /* font-family: Futura; */ font-size: 18px; font-style: italic; text-decoration: none; @@ -699,41 +742,6 @@ h3#reply-title { margin: 18px 0; } 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 @@ -773,33 +781,10 @@ span.older-posts a, span.newer-posts a { text-align: center; font-variant: small-caps; - /* font-family: Futura; */ } -/* ## Gutenberg Blocks ## */ +/* # Gutenberg Blocks ---------------------------------------------- */ -figcaption { - font-size:0.75em; - font-family: Futura; -} - -.alignwide { - margin: 20px 0; - position: relative; - max-width: 810px; - margin-left: -80px; - margin-right: -80px; -} - -.alignfull { - left: 50%; - margin-left: -50vw; - margin-right: -50vw; - max-width: 100vw; - position: relative; - right: 50%; - width: 100vw; -} pre.wp-block-verse { @@ -815,140 +800,118 @@ p.has-drop-cap:not(:focus):first-letter margin: 8px 3px -10px 0; } -.headerLine -{ - border-bottom: 0.5px #bbbbbb; - width: 80%; - margin-right: auto; - margin-left: auto; -} + /* @end */ +/* # Widget Areas ---------------------------------------------- */ -/* =Widget Areas --------------------------------------------------------------- */ +.widget-area { width: 30%; } -.widget-area { - width: 30% -} - -.widget-area ul { +.widget-area ul +{ list-style: none; margin-left: 0; } -.widget-area ul ul { + +.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 */ + +.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 { + +.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 { + +.widget-container .wp-caption img { margin: auto; } + +.widget-title +{ color: #222; -/* font-weight: bold; */ + /* font-weight: bold; */ } + .widget-area a:link, -.widget-area a:visited { - text-decoration: none; -} +.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 { +.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; */ + /* 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 { + +#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 { + +#wp-calendar tbody .pad { background: none; } + +.wp-calendar-nav +{ display: table; width: 100%; } -.wp-calendar-nav span { - display: table-cell; -} + +.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 { +#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 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 { +.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; -} + +.tagcloud ul li { display: inline-block; } /* Helps galleries in widget areas look presentable in most cases. */ .widget-area .gallery-columns-2 img, @@ -958,61 +921,47 @@ p.has-drop-cap:not(:focus):first-letter .widget-area .gallery-columns-6 img, .widget-area .gallery-columns-7 img, .widget-area .gallery-columns-8 img, -.widget-area .gallery-columns-9 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; */ -/* +#footer-widget-area +{ + /* margin-top: 10px; */ + /* margin-left: 20px; margin-right: 20px; */ margin: 20px; - } -.widget-area +#footer-widget-area .widget-area { float: left; max-width: 255px; width: 50%; - min-width: 150px; - + min-width: 150px; } /** * 14.2 - >= 783px */ -/* @media screen and (min-width: 48.9375em) */ @media screen and (min-width: 775px) { + #footer-widget-area .widget-area { width: 25%; } +} -.widget-area +/* # Possibly Obsolete */ + +.headerLine { - width: 25%; + border-bottom: 0.5px #bbbbbb; + width: 80%; + margin-right: auto; + margin-left: auto; } - -} - -