Theme Change

I spent this evening making over my blog. I switched to Twenty Sixteen from Hemingway Rewritten theme. I hope you like this blog’s new design.

[code language=”css”]
/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
.site-branding-wrapper,
.site-header-image,
.page h1.entry-title,
a.grofile-full-link,
.page-id-1225 .content-area {
display: none;
}

/* Search page style
Post-1225 is search page */
article#post-1225 {
border: none;
}

.page-id-1225 #content {
margin-top: 50px;
}

.page-id-1225 .widget-areas .widget-title {
color: black;
}

/* End of search page styles */
.main-navigation {
position: fixed;
top: 0;
}

.type-post,
.type-page {
padding-bottom: 0;
}

.logged-in .main-navigation {
top: 32px;
}

/*Blockquotes style lifted from https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
and modified */
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
}

blockquote:before {
color: #ccc;
content: "\201C";
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
}

blockquote p {
display: inline;
}

/* Colors */
/* Menu background color */
.main-navigation,
.main-navigation ul ul li {
background: orange;
}

/*Menu items color */
.main-navigation a,
.main-navigation a:visited {
color: black;
}

/* Menu separator color */
.main-navigation li:before {
color: black;
}

/* footer background color */
.site-footer {
background: white;
}

/*Menu items color on mobile devices*/
@media all and (max-width:800px) {
.main-navigation a,
.main-navigation a:visited,
#header-search.toggled {
background: orange;
color: black;
}

/* Added on 1/Nov/2015 to add top margin on mobile site */
.site-content {
margin-top: 100px;
}
}

/* This style is added on 1/Nov/2015 because setting Font Size to Small in Customizer > Font menu is causing probloem with mobile menu.*/
.type-post h1.entry-title {
font-size: 31.5px;
}

/* Current/selected menu item color */
.main-navigation .current_page_item a, .main-navigation .current-menu-item a {
color: white;
}

footer#colophon {
padding-top: 0;
}

/* Footer attribution color */
.site-footer a, .site-footer a:visited, .site-footer a:hover, .site-footer a:focus, .site-footer a:active {
color: black;
}

/* Hide byline on single posts */
.single-post span.byline {
display: none;
}

/* square bullets */
ul {
list-style: square;
}

[/code]

Published by Chaitanya

I am a family man, perpetual learner, coffee drinker, dessert eater and Happiness Engineer at Automattic. I also read, write, move, and meditate.

Join the Conversation

4 Comments

    1. Thank you Sarah. The CSS is minimal too 😊

      At some stage I need to add a media query to match the size of post and page titles to that of site title on mobile devices.

Leave a comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: