/* Theme Name: Black & Gold Author: Lewis Alberto Briffa Author URI: http://labdevelopments.byethost16.com/ Description: A clean styled WordPress theme. Designed to be elegant yet readable. Suitable for a single blogger. Version: 2.0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: two-columns, right-sidebar, left-sidebar, sticky-post, custom-header, custom-menu, custom-background, custom-colors, featured-images, footer-widgets, full-width-template, theme-options, blog, translation-ready Text Domain: black-gold 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. */ /* * -=-=-=-=-=-=-=-=-=-=-=-=- CONTENTS * * >> Imports * >> Base Elements * >> Custom Classes * >> WordPress * >> WordPress Core * >> Overriding WordPress Classes * >> Bootstrap * >> Overriding Bootstrap Classes * >> Media * >> Printing Styles * * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ /* * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= * IMPORTS * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ @import url("https://fonts.googleapis.com/css?family=Andada&subset=latin-ext"); @import url("https://fonts.googleapis.com/css?family=Dancing+Script:400,700"); /* * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= * BASE ELEMENTS * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ html { margin: 0 !important; } body { background: #fcfcfc; font-family: 'Andada', serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 16.8px; } .navbar.navbar-default { padding: 10px; margin: 0; background: #fcfcfc; background-color: transparent; border: none; } .navbar.navbar-default .navbar-brand { margin: 0; } .navbar.navbar-default .navbar-right a { color: #151e1f; } .navbar.navbar-default .navbar-right a:after { color: #d7d7d7; margin-left: 20px; content: "/"; font-weight: bold; } .navbar.navbar-default .navbar-right li:last-child a:after { content: ""; } header { background-size: 100%; min-height: 450px; border-bottom: 10px solid #ececec; } .table-cell-display { display: table-cell; vertical-align: middle; height: 450px; max-width: 600px; } header .container-fluid { padding-left: 0; } img { width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { margin: 48px 0; line-height: 1.5em; } h1 { font-size: 43.2px; margin: 48px 0 48px 0; } h2 { font-size: 38.400000000000006px; } h3 { font-size: 33.599999999999994px; } h4 { font-size: 28.799999999999997px; } h5 { font-size: 21.6px; } h6 { font-size: 19.200000000000003px; } h5, h6 { text-transform: uppercase; letter-spacing: 1px; } ul { padding: 0; margin: 0; } li { list-style: none; } ol > li { list-style: decimal; } main a, main li a, main li a:hover, table a, table a:hover { color: #151e1f; text-decoration: underline; } ul ul, ol ul, ol ol, ul ol { margin-top: 24px; padding-top: 12px; } ul ul li { padding: 6px 0 12px 24px; } ul ul li:first-child { padding-top: 12px; } iframe { max-width: 100%; } main img { width: auto; max-width: 100%; } main ul { display: block; } main a { text-decoration: underline; } main li { margin: 12px 0; padding-bottom: 12px; } main li ul { border-top: 1px solid #e3e3e3; } input, button { border: none; outline: none; background: none; } input[type=text] { border-bottom: 1px solid black; } input[type=text], input[type=email], input[type=password], textarea.form-control { font-size: 1em; margin-bottom: 24px; } label { margin-bottom: 24px; font-weight: normal; font-size: 1.1em; } p, blockquote, .textwidget { line-height: 2.3em; } blockquote { clear: both; } table { width: 100%; max-width: 100%; display: block; overflow: auto; margin-bottom: 20px; border-spacing: 0; border-collapse: collapse; font-size: 0.9em; font-family: 'Helvetica', Arial, Sans-Serif; } tr { border-bottom: 2px solid #d6d6d6; text-align: center; } thead { background: #c9bab0; color: #151e1f; } td { padding: 10px 10px; border: 2px solid #e3e3e3; } b { font-weight: 700; } blockquote { border-left: 5px solid #e2dad4; } hr { height: 2px; border: none; background: #e4e4e4; margin-top: 48px; clear: both; } /* * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= * CUSTOM CLASSES * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ .blackgold-logo.navbar-brand { font-family: 'Dancing Script', cursive; font-weight: bold; min-width: 40px; font-size: 48px; text-align: center; } .blackgold-heading-box { padding: 24px; } .blackgold-heading-box h1 { margin: 0; max-width: 600px; font-size: 60px; } .blackgold-heading-box .blackgold-sub-heading { font-family: 'Dancing Script', cursive; color: #fcfcfc; font-size: 36px; } .blackgold-post { clear: both; margin-bottom: 96px; } .blackgold-post:last-of-type { margin-bottom: 0; } .blackgold-post h1 { margin: 48px 0 0 0; } .blackgold-post-meta { border-bottom: 1px solid #e3e3e3; margin: 12px 0; padding: 0; } .blackgold-post-meta .blackgold-author a { text-decoration: underline; color: #151e1f; } .blackgold-post-meta .blackgold-author, .blackgold-post-meta .blackgold-date { display: inline-block; font-size: .9em; } .blackgold-post > p { margin-bottom: 48px; } .blackgold-post-meta .blackgold-date { float: right; } .blackgold-post-thumbnail { margin-bottom: 48px; } .blackgold-btn-dark, .blackgold-btn-dark-small, .comment-reply-link, form input[type=submit] { background: #151e1f; padding: 12px; position: relative; display: inline-block; color: #fcfcfc; border: 1px solid #151e1f; text-decoration: none; font-size: .9em; } .blackgold-btn-dark-small, #submit.blackgold-btn-dark-small, .comment-reply-link { padding: 6px 10px; } .blackgold-btn-dark:hover, .blackgold-btn-dark:focus, .blackgold-btn-dark-small:hover, .blackgold-btn-dark-small:focus, .comment-reply-link:hover, .comment-reply-link:focus, form input[type=submit]:hover, form input[type=submit]:focus { background: #c9bab0; color: #151e1f; text-decoration: none; border: 1px solid #c9bab0; transition: 0.5s all; } aside .rss-widget-icon { width: auto; float: right; } aside:first-child { padding-top: 12px; } aside .blackgold-widget { padding: 48px 0; border-bottom: 5px solid #ececec; } aside .blackgold-widget:last-child { padding-bottom: 0; border-bottom: none; } aside .blackgold-widget h3 { margin: 48px 0 3px 0; margin-top: 0; padding-bottom: 24px; color: #726760; } aside .blackgold-widget li { padding: 24px; } aside .blackgold-widget a { color: #151e1f; } aside .blackgold-widget [role=search] { background: #151e1f; padding: 12px; display: inline-block; } aside .blackgold-widget input[type=text], footer .blackgold-widget input[type=text] { background: #151e1f; border-color: #151e1f; border: 2px solid #151e1f; border-bottom: 1px solid #fcfcfc; outline: none; color: #fcfcfc; margin-bottom: 0; } aside .blackgold-widget select, footer .blackgold-widget select { width: 100%; } footer .blackgold-widget select { color: black; } aside .blackgold-widget button[type=submit], footer .blackgold-widget button[type=submit] { background: #151e1f; border: 1px solid #151e1f; border-bottom: 0px; color: #fcfcfc; outline: none; } footer .blackgold-widget input[type=text], footer .blackgold-widget button[type=submit] { background: black; border-left-color: black; border-right-color: black; border-top-color: black; } footer .blackgold-widget button[type=submit] { border-color: black; } aside .blackgold-widget p { margin-top: 24px; } aside .blackgold-widget ul li:nth-child(odd) { background: #ececec; } aside .blackgold-widget > ul > li:nth-child(even) { background: #e3e3e3; } footer { background: #000; margin-top: 72px; padding-bottom: 48px; color: #fcfcfc; letter-spacing: 1px; } footer .rss-widget-icon { width: auto; } footer p { color: #fcfcfc; } footer h3 { font-size: 24px; margin: 48px 0 24px 0; color: #fcfcfc; } footer .blackgold-widget { margin-top: 48px; } footer .blackgold-widget li { padding: 18px; } footer .blackgold-widget a { color: #fcfcfc; } footer .blackgold-widget ul li:nth-child(odd) { background: #0d0d0d; } footer .blackgold-widget ul ul { border-color: #0a0a0a; } footer .blackgold-widget > ul > li:nth-child(even) { background: #050505; } .blackgold-developer { display: block; text-align: right; } .blackgold-developer p { padding: 18px; } .blackgold-developer .blackgold-author { background: #151e1f; padding: 8px; color: #fcfcfc; letter-spacing: 1px; border-right: 5px solid #166a99; margin-left: 10px; } .blackgold-clear-right { clear: right; } .blackgold-page-title { padding-bottom: 24px; border-bottom: 5px solid #e3e3e3; font-size: 24px; } .taxonomy-container { margin-bottom: 24px; border-bottom: 1px solid #e3e3e3; } .blackgold-tags { color: #968b84; font-size: 0.9rem; } .blackgold-tags a, .post-categories li a { padding: 2px 8px; color: #151e1f; font-size: 1.4rem; text-decoration: none; background: #eadfd7; border: 1px solid #ddcfc6; margin: 0 12px 12px 0; display: inline-block; } .post-categories { float: left; } .post-categories li { display: inline; } .post-categories li a { font-size: 1.4rem; text-decoration: none; background: #ececec; border: 1px solid #dad9d9; color: #151e1f; } .post-categories li a:hover { text-decoration: none; } .tags-label, .category-label { float: left; color: #151e1f; font-size: .9em; margin-right: 14px; } .tag-container, .category-container { overflow: hidden; } .category-container ul { float: left; text-align: left; margin-right: 14px; } .full-width main { max-width: 960px; margin-left: auto; margin-right: auto; } .full-width h1 { max-width: 720px; } .full-width p { width: 960px; } .full-width .blackgold-date, .full-width .blackgold-author { width: auto; } .row { margin-right: 0px; } .hidden { visibility: hidden; } .visible { visibility: visible; } /* * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= * WORDPRESS CORE * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ .custom-logo { max-width: 150px; } .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= * OVERRIDING WORDPRESS CLASSES * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ .navigation.pagination, .nav-links { margin-top: 48px; width: 100%; text-align: left; border-radius: 30px; } .page-numbers, .nav-links a { font-family: 'Helvetica', Sans-Serif; min-width: 50px; padding: 14px; position: relative; display: inline-block; text-align: center; cursor: pointer; border: 1px solid #c3c3c3; color: #151e1f; text-decoration: none; } .page-numbers.current,.page-numbers.current:hover, .page-numbers.current:focus { background-color: #c9bab0; color: black; } .page-numbers:hover, .page-numbers:focus { background: black; color: white; text-decoration: none; transition: .5s all; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .comment-navigation { overflow: hidden; } .blackgold-pagination { overflow: hidden; display: block; padding-top: 48px; } .full-width .blackgold-prev, .full-width .blackgold-next { width: 50%; } .full-width .blackgold-next { text-align: right; } .blackgold-prev, .nav-previous { float: left; } .blackgold-next, .nav-next { float: right; } .reply-title { clear: both; } #cancel-comment-reply-link { color: black; float: right; margin-top: 12px; } .blackgold-prev a, .blackgold-next a, .nav-previous a, .nav-next a { color: black; text-decoration: none; padding: 12px; } .avatar { border-radius: 100%; width: auto; } aside .recentcomments .comment-author-link a, aside .recentcomments .comment-author-link { color: #726760; } footer .recentcomments .comment-author-link a, footer .recentcomments .comment-author-link { color: #c9bab0; } .comment-author.vcard { display: inline-block; margin-top: -12px; } .comment-meta.commentmetadata { float: right; margin-bottom: 24px; } .comment-meta.commentmetadata a, cite a { color: #151e1f; } .comment-list { display: block; } .comment { padding: 24px; margin: 48px 0; background: #f1f1f1; } .comment ul li { margin-bottom: 24px; padding: 0; } .comment p { margin: 24px 0; } .children { margin-left: 12px; display: block; border-top: 1px solid #dedede; } #commentform .required { color: red; } #commentform input[type=text] { border: 1px solid #ccc; text-align: left; padding: 0px 24px; display: block; } .logged-in-as a { color: #151e1f; text-decoration: underline; } .logged-in-as a:nth-child(2) { float: right; } .comment cite { margin: 5px; } .comment-author-admin cite { font-weight: bold; } .bypostauthor .comment-body { background: #ededed; padding: 24px; } .sticky { background: #ececec; padding: 20px; margin-left: -20px; border: 2px solid #e9e9e9; border-top: none; } .sticky hr { display: none; } #wp-calendar a { text-decoration: none; } #wp-calendar { border-collapse: separate; border-spacing: 5px; } #wp-calendar td { border: none; height: 100%; } #wp-calendar [aria-label^=Posts] { background: #151e1f; padding: 5px; color: white; height: 100%; width: 100%; display: block; } #wp-calendar #prev, #wp-calendar #next { border: none; } #wp-calendar #prev a { float: left; } #wp-calendar #next a { float: right; } footer #wp-calendar th { background: white; } #calendar_wrap caption, th { text-align: center; padding: 8px; } #calendar_wrap th { background: #ececec; } #calendar_wrap .pad, #calendar_wrap tr { background: none; border: none; } #calendar_wrap tbody tr:last-child td { border-bottom: none; } .gallery-caption { background-color: #c3c3c3; } .wp-caption-text, p.wp-caption-text { font-size: .9em; margin: 0; padding: 0 4px 5px; } aside .tagcloud a, footer .tagcloud a { display: inline-block; margin: 5px; } ul.children { margin-top: 24px; padding-top: 12px; } /* * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= * OVERRIDING BOOTSTRAP CLASSES * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ .form-control { padding: 20px; color: #151e1f; } .form-control:focus { border: 1px solid #989898; box-shadow: 1px 1px 20px #e3e3e3; } @media screen and (max-width: 768px) { header { background-size: cover; background-color: #c9bab0; } header .container { padding-right: 0; } } @media screen and (max-width: 1020px) { .full-width p { width: 100%; } iframe { width: 100%; } } .navbar-default ul ul li { padding: 0px; } .navbar-default ul ul li a { padding: 12px; text-align: center; } .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { background: #fcfcfc; } .navbar-default .navbar-toggle .icon-bar { height: 3px; padding: 0; margin: 3px; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { background: #fcfcfc; outline: none; } @media screen and (max-width: 992px) { aside { border-top: 10px solid #e3e3e3; margin-top: 48px; } .navbar-default .navbar-collapse, .navbar-default .navbar-default .navbar-form { border-color: #fcfcfc; } .navbar-default .navbar-toggle { background: #151e1f; } .navbar-default .navbar-toggle .icon-bar { background-color: #c9bab0; } .navbar.navbar-default .navbar-right li a { background: #151e1f; } .navbar.navbar-default .navbar-right li a:hover { color: #fcfcfc; } .navbar.navbar-default .navbar-right li:hover { background: #151e1f; } .navbar.navbar-default .navbar-right a { font-size: 1.1em; padding: 24px; text-align: center; color: #fcfcfc; } .navbar.navbar-default .navbar-right a:after { content: ""; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { background: #151e1f; } #menu-main-menu a { display: block; width: 100%; } #menu-main-menu a:hover, #menu-main-menu a:focus { background: black; color: #fcfcfc; } .navigation.pagination { margin-top: 36px; } .navigation.pagination a { margin-top: 4px; } } @media (max-width: 768px) { .container { width: auto; } .navbar.navbar-default .navbar-right li a:hover, .navbar.navbar-default .navbar-right li a:focus { background: #151e1f; } .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { display: block; padding: 24px; background: #fcfcfc; border: none; font-size: 1.1em; } .navbar-default .navbar-nav .open.dropdown > a { color: white; } .navbar-default .navbar-nav .open.dropdown:hover { background: #fcfcfc; } .navbar-default .navbar-nav .open.dropdown:hover > a { color: white; } .blackgold-tags, .category-container ul { float: left; width: 100%; text-align: left; margin-top: 12px; margin-bottom: 12px; } .sticky { margin-left: 0; } } /* * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= * PRINTING STYLES * -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ @media print { header, .blackgold-read-more, aside, footer, .blackgold-developer { display: none; } .blackgold-post-meta .blackgold-date { float: left; } .blackgold-page-title { border-color: #e3e3e3; } p { clear: both; } .blackgold-post img { max-width: 500px !important; display: block; } .blackgold-post-meta .blackgold-date, .blackgold-post-meta .blackgold-author { display: inline; } }