blog.mybb.com custom-css

custom.css

@import url('https://fonts.googleapis.com/css?family=Asap:300,400,500,600,700,800|Open+Sans:300,400,500,600');

:root {
    --color-action: #007fd0;
    --color-action-feedback: #ff7500;

    --font-text: "Open Sans", sans-serif;
    --font-display: "Asap", sans-serif;

    --sizing-max-width: 1250px;
}

a:link, a:visited { color: var(--color-action); text-decoration: none; }
a:hover, a:active { color: var(--color-action-feedback); text-decoration: underline; }

html { font-size: 10px; }
body { margin: 0; font-family: Open Sans, sans-serif; font-size: 16px; line-height: 26px; }

#main { margin: 40px auto; width: 88%; max-width: var(); }
#page { margin: 0 auto; }

header { position: relative; }
#site-title { margin: 0; height: 75px; background: #393D3F; font-size: 0; }
#site-description { z-index: 1; padding: 50px 0; background: #f2f2f2; font-size: 0; }
#primary { position: relative; }
#primary::before { z-index: 2; margin-top: -115px; margin-bottom: 100px; display: block; font-family: var(--font-display); font-size: 2.6em; color: #222; content: "MyBB Development Blog"; }

#access { position: absolute; top: 0; right: 0; background: none; text-align: right; }
.menu-main-container { margin: 0 auto; width: 88%; max-width: var(--sizing-max-width); }
#menu-main { display: flex; height: 75px; }
#menu-main li { flex-grow: 1; font-size: 1.8rem; font-weight: 300; }
#menu-main li a:hover, #menu-main li a:active { background: rgba(85,85,85,0.6); }
#menu-main li:first-child { flex-grow: 0; padding-left: 16px; }
#menu-main li:first-child a { background: inherit; }
#menu-main li:first-child::before { position: absolute; left: 0; top: 16px; width: 48px; height: 44px; background: url(https://blogdotmybbdotcom.files.wordpress.com/2018/08/mybb.png) no-repeat; background-size: 100%; content: ""; }
#menu-main li:nth-child(1) { font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 2em; color: #fff; text-indent: 5px; }
#menu-main li:nth-child(2) { flex-grow: 2; font-size: 0; visibility: hidden; }
#menu-main li:last-child { background: var(--color-action); }
#menu-main li a { height: 100%; color: #FFF; box-sizing: border-box; display: flex; align-items: center; justify-content: center; transition: background .25s ease; }

#main { display: flex; }
#main #primary { flex: 2; margin: 0; padding-right: 40px; }
#main #secondary { flex: 1; min-width: 300px; }

#content { margin: 0; }

aside { margin-bottom: 30px; }
.widget { padding: 15px 20px; background: #F7F7F7; border-radius: 4px; }
.widget-title { margin: 0 0 0.5em 0; font-family: var(--font-display); font-weight: 600; font-size: 1.4em; color: #222; }

.widget ul { margin: -5px -6px 0 -6px; padding: 0; list-style-type: none; }
.widget li { margin: 0; padding: 0; border-bottom: 1px solid #e3e3e3; font-size: 1.1em; }
.widget li a { display: block; padding: 4px 6px; }
.widget li:last-child { border-bottom: none; }

.post { margin-bottom: 50px; }
.entry-header { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #dfdfdf; }
.entry-title { font-family: var(--font-display); font-weight: 600; font-size: 1.6em; }
.entry-meta { font-size: 1.1em; color: #666; }
.entry-meta a { color: inherit; }
.entry-meta > .sep:first-child { display: none; }
.post footer { margin: 30px 0 0 0; padding: 15px 0 0 0; border-top: 1px solid #dfdfdf; }
.entry-meta .cat-links { font-size: 0; }
.entry-meta .cat-links a { background: #f7f7f7; padding: 2px 12px; display: inline-block; border-radius: 4px; font-size: 1.4rem; margin: 0 10px 10px 0; }
.entry-meta .cat-links a:hover, .entry-meta .cat-links a:active { background: var(--color-action-feedback); color: #fff; text-decoration: none; }
.post footer .sep { display: none; }
.comments-link { display: none; }

#nav-below { background: #f7f7f7; border-radius: 4px; padding: 15px 10px; margin: -20px 0 0 0; display: flex; justify-content: space-between; color: #999; }

#colophon { padding: 20px 0; background: #EEE; }
#colophon > div { margin: 0 auto; width: 80%; max-width: var(--sizing-max-width); text-align: right; }
#colophon a { font-size: 0.8em; color: #AAA; }

input { font-size: 16px; font-family: var(--font-text); }
input[type="text"] { margin: 1px 5px 1px 0; width: 250px; padding: 7px 7px 8px 7px; border: 1px solid #ccc; font-size: 0.9em; outline: 0; border-radius: 4px; box-sizing: border-box; }
input[type="submit"] { padding: 4px 10px; font-size: 0.9em; display: inline-block; line-height: 26px; border-radius: 4px; color: #fff; background: var(--color-action); border: 1px solid var(--color-action); }
input[type="submit"]:hover, input[type="submit"]:active { background: var(--color-action-feedback); border-color: var(--color-action-feedback); }

.widget_search { background: none; }
.widget_search form > div { display: flex; }
.widget_search input[type="text"] { flex: 3; }
.widget_search input[type="submit"] { flex: 1; }

.wp-caption { width: auto !important; }


@media screen and (max-width: 800px) {
    #main { flex-flow: row wrap; }
    #main #primary { padding-right: 0; flex-basis: 100%; }
}