Blog ~ Twenty Sixteen Theme Cascading Style Sheet [CSS, w/REM], 03/24

I no longer use cmts/REM in the live blog CSS. This page may help ID elements–coding may not be current.

header#masthead.site-header {
/* set masthead position and spacing, padding-bottom from 30-20px, 03/11 */
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: .9375em;
}

.header-image {
/* set spacing above and below banner */
margin-top: 0;
margin-bottom: 0;
}

h1.site-title, p.site-title {
/* set the masthead font size I want for posts and pages, 03/24 */
font-size: 2.3125em;
padding-top: 0;
}

.site-description {
/* site Tagline appearance, 03/08 */
font: italic .73125em Helvetica;
margin-top: 0;
}

.menu-toggle {
/* turn of menu selector for mobile devices, 03/20 <em>/
display: none;
/</em> use menu at bottom of screen */
}

.widget {
/* set spacing to align borders after a search, 03/09 */
line-height: 1;
margin-bottom: .625em;
padding-top: .625em;
}

h2.widget-title {
/* center h2 titles */
text-align: center;
}

.widget .widget-title {
/* set sidebar widget title font type and position, 02/14 */
font-size: 1.1875em;
margin-bottom: .125em;
text-transform: capitalize;
}

.widget .aligncenter {
/* match spacing above blog logo,changed padding-top for revised logo w/text, 03/10 */
margin-bottom: .25em;
padding-top: .0625em;
}

.widget-area &gt; :last-child, .widget &gt; :last-child {
/* set spacing between menu items, 03/24 */
margin-bottom: 0;
line-height: 2.25;
}

section#nav_menu-3.widget.widget_nav_menu {
/* allow calendar widget to move up */
margin-bottom: -.9375em;
}

section#calendar-2.widget.widget_calendar {
/* adjusted padding above month from 10px to 7px, 03/10 */
padding-top: .4375em;
}

.widget_calendar caption {
/* position calendar month and increase font size */
font-size: .9375em;
margin-top: 0;
margin-bottom: .3125em;
text-align: center;
}

.widget_blog-stats {
/* position blog stats */
margin-top: 0;
text-align: center;
}

#blog-stats-2.widget.widget_blog-stats li {
/* remove bullet before blog stats, 03/04 */
list-style-type: none;
}

#blog-stats-2.widget.widget_blog-stats ul {
/* set left margin to 0, 03/04 */
margin-left: 0;
}

section#jetpack_display_posts_widget-3.widget.widget_jetpack_display_posts_widget {
/* reduce space above title Last 10 Articles, 03/10 */
padding-top: .25em;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
/* change sidebar text of Last 10 Articles titles; italic, 03/15 */
font-size: .9375em;
font-style: italic;
font-weight: 400;
line-height: .2;
margin: 2em 0 .1875em;
padding-bottom: 0;
text-align: center;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts img {
/* set space following sidebar featured images for Last 10 Articles, 03/23 */
margin-top: 0;
padding-top: 0;
width: 100%;
}

section#text-395027151.widget.widget_text {
/* set spacing after last of Last 10 Articles title, 02/22 */
margin-top: .625em;
}

section#text-395027151.widget.widget_text, section#text-395027701.widget.widget_text {
/* reduce space above titles Legal and Disclaimer, 03/10 */
padding-top: .25em;
}

.textwidget &gt; :last-child {
/* Legal and Disclaimer content, 03/09 */
font-size: .625em;
line-height: 1.3;
text-align: justify;
}

.hentry {
/* reduce space between articles and reduce whitespace above post titles */
margin-top: 0 !important;
padding-top: 2%;
}

.site-main {
/* remove site-top padding so .hentry class controls article spacing Set spacing
after OLDER POST at bottom of page */
padding-top: 0;
padding-bottom: 0;
}

.site-main &gt; article {
/* set the spacing after an article, 03/15 */
padding-top: .9375em;
margin-bottom: 4em;
}

.entry-title {
/* set font size for all posts; center title; and reduce space after it;
removed word-breaks and add 4 lines for hyphen control--especially on
mobile devices, 03/10 */
font-size: 1.125em !important;
hyphens: none;
margin-top: -.875em !important;
margin-bottom: .875em !important;
text-align: center !important;
-moz-hyphens: none;
-ms-hyphens: none;
-webkit-hyphens: none;
}

.entry-summary {
/* control excerpt placement, shortened [padding-top] from 20-5px, 03/11 */
font-size: 1em !important;
font-style: italic;
margin-bottom: .625em !important;
padding-top: .3125em;
text-align: center !important;
}

a.more-link {
/* center and bold more-link, remove underline, 03/22 */
box-shadow: none;
display: block;
font-weight: bold;
text-align: center;
}

.entry-footer {
/*spaced for touching */
line-height: 3;
}

.wp-caption-text {
/* make text smaller and center image caption, 12/31 */
font-size: .75em !important;
text-align: center;
}

a.post-thumbnail {
/* reduce spacing after featured image to match spacing after post title */
margin-bottom: .625em;
}

a.post-thumbnail img {
/* remove 5px given to img below, 03/15 */
padding-top: 0;
}

div.post-thumbnail {
/* spacing after the featured image */
margin-bottom: 1.25em;
}

div.slideshow-window {
/* changed slideshow background to white and removed border */
background: rgba(255,255,255,1);
border: 0;
}

.site .tiled-gallery {
/* reduce spacing after galleries and before post content */
margin-bottom: .875em;
}

img {
/* top of article images too close, especially w/a 1st line link, 03/15 */
padding-top: .3125em;
}

p {
/* change the look of paragraphs–tighter */
font-size: 90%;
line-height: 1.5;
margin-bottom: .625em;
}

blockquote {
/* change the look of blockquotes, 02/05 */
background: #f9f9f9;
font-size: .9375em;
margin: 0 1.5625em 1.5em;
padding-left: 2.5em;
padding-right: 2.5em;
}

.page-title,.comments-title,.comment-reply-title,.post-navigation .post-title {
/* use smaller fonts for titles indicated */
font-size: .9375em;
}

div#infinite-handle {
/* reduce space before and after OLDER POST button, center, 03/23 */
margin-top: -.9375em;
padding-bottom: .5em;
text-align: center;
}

.site-main #infinite-handle span {
/* change OLDER POST background from black to blue, 03/04 */
background: #6d8ab9;
}

.site-main #infinite-handle span button {
/* OLDER POST button background, 03/04 */
background: #6d8ab9;
text-transform: capitalize;
}

.site-footer {
/* reduce white space at the end of the page, 01/10 */
padding-bottom: 1.875em;
}

.site-info {
/* make text tappable, 03/24 */
font-size: 1.03125em;
line-height: 1.6153846154;
}

/** BLOG CSS MOD PAGE--BEGIN **/
table {
/* set font size for the REVISED Table, 03/12 */
font-size: .8125em;
}

.syntaxhighlighter table td.code .line {
/* shift line numbers to the left, 03/12 */
padding: 0 .5em !important;
}

.syntaxhighlighter table td.gutter .line {
/* shift content to the left, 03/12 */
padding: 0 .4em 0 0 !important;
}

.syntaxhighlighter table {
/* make fonts slightly smaller, 03/12 */
font-size: .8125em !important;
}

.syntaxhighlighter code {
/* force line wrap on long lines, 03/12 */
white-space: normal;
}

/** BLOG CSS MOD PAGE--END <strong>/
/</strong> MOBILE DEVICES GENERAL--BEGIN **/
@media screen and (max-width: 20.5625em) and (min-width: 15em)
and (orientation: portrait) {
/* SMALLER ANDROID 329px X 240px, 03/20--based on thesacredpath coding */
.entry-header, .entry-summary, .entry-content, .entry-footer, .post-thumbnail {
margin-left: 7.6923%;
margin-right: 7.6923%;
}

div.site-header-main {
/* shorten site header height so the header image moves up, 03/20 */
height: 5em;
}

h1.site-title, p.site-title {
/* set masthead font size for posts and pages, 03/20 */
font-size: 1.6875em;
padding-top: .1875em;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
/* make text of posted articles titles touchable 03/21 */
line-height: 1.25;
}

.entry-footer {
/* give more vertical space before footer on mobile devices, 03/21 */
line-height: 3;
padding-top: .625em;
text-align: center !important;
}

.site-footer .social-navigation, div.menu-social-links-container {
/* from thesacredpath, WordPress.com Happiness Engineer, 03/20 */
width: 100%;
}

.social-navigation li {
/* from thesacredpath, 03/20 */
float: none;
display: inline-block;
height: 1.25em;
width: 1.625em;
}

.site-info {
/* from thesacredpath, 03/20 */
margin-left: auto;
margin-right: auto;
text-align: center;
}
}

@media screen and (max-width: 56.75em) and (min-width: 20em) {
/* for MOST OTHER mobile devices 908px X 320px, 03/11 <em>/
div.site-header-main {
/</em> needed to keep image from crushing the masthead, 03/11 */
height: 7.8125em !important;
}

header#masthead.site-header {
/* place article title closer to image, 03/11 */
padding-bottom: 1.5em;
}

h1.site-title,p.site-title {
/*set the masthead for a tight appearance, 03/11 */
font-size: 2.3125em;
line-height: 1;
}

.site-description {
/* vertical separation between masthead and tagline,landscape mode, 03/16 */
margin-top: .1875em;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
/* make text of posted articles titles touchable 03/21 */
line-height: 1.25;
}

h2.entry-title {
/* reduce font-size 1 px from PC font-size and reduced line height, 03/11 */
font-size: 1.125em;
line-height: 1.2 !important;
}

div.entry-summary p {
/* tighten excerpt vertical spacing, 03/11 */
line-height: 1.1;
}

.site-main {
/* center main content, 03/13 */
margin: auto;
width: 100%;
}

.entry-footer {
/* give more vertical space before footer and center it, 03/21 */
line-height: 3;
padding-top: .625em;
text-align: center !important;
}

/** coding by thesacredpath, WordPress.com Happiness Engineer, 03/18 #*/
.site-footer .social-navigation, div.menu-social-links-container {
width: 100%;
}

.social-navigation li {
float: none;
display: inline-block;
}

.site-info {
margin-left: auto;
margin-right: auto;
}

/* END thesacredpath coding, 03/18 <em>/
.post-navigation {
/</em> space after navigation border to separate sidebar, portrait mode, 03/16 */
margin-bottom: 10em !important;
}

.site-footer {
/* center left footer text, NEW 03/09 */
text-align: center;
}
}

@media screen and (max-width: 56.75em) and (min-width: 20.625em)
and (orientation: landscape) {
.entry-header, .entry-summary, .entry-content, .entry-footer, .post-thumbnail, {
/* thesacredpath, WordPress.com Happiness Engineer 908px X 330px, 03/16 */
margin-left: 7.6923%;
margin-right: 7.6923%;
}

div.site-header-main {
/* shorten site header height so the header image moves up, 03/13 */
height: 6.875em !important;
}

.site-main #infinite-handle span {
/* Spread more-link button, 03/23 30.03025em*/
margin: auto;
width: 100%;
}

.widget {
/* moblie device widget placement, 03/13 */
margin-bottom: .625em;
width: 100%;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
/* mobile device posted articles display, 03/13 */
line-height: 1.25;
margin-bottom: .1875em;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts img {
/* set the space following sidebar featured images for post to 5px */
margin-bottom: .3125em;
width: 100%;
}
}

@media screen and (max-width: 56.75em) and (min-width: 20em)
and (orientation: portrait) {
div.site-header-main {
/* shorten site header height 908px X 320px, 03/13 */
height: 6.875em;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
/* make text of posted articles titles touchable 03/21 */
line-height: 1.25;
}

.entry-footer {
/* give more vertical space before footer, 03/21 */
line-height: 3;
padding-top: .625em;
}
}

@media screen and (max-width: 41.6875em) and (min-width: 20em)
and (orientation: landscape) {
.widget {
/* widget placement, landscape mode 667px X 320px, 03/18 */
margin-bottom: .625em;
margin-left: 0 !important;
width: 100% !important;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
/* make text of posted articles titles touchable 03/21 */
line-height: 1.25;
}
}

@media screen and (max-width: 48.3125em) and (min-width: 41.75em)
and (orientation: landscape) {
.widget {
/* widget placement, landscape mode 773px X 668px, 03/17 */
margin-bottom: .625em;
margin-left: 3.4375em !important;
width: 100% !important;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
/* make text of posted articles titles touchable 03/21 */
line-height: 1.25;
}
}

@media screen and (max-width: 56.8125em) and (min-width: 44.25em) {
/* iPad thesacredpath, WordPress.com 909px X 708px, 03/16 */
.entry-header, .entry-summary, .entry-content, .entry-footer, .post-thumbnail {
margin-left: 7.6923%;
margin-right: 7.6923%;
}

.widget {
/* widget placement for iPad, 03/16 */
margin-bottom: .625em;
margin-left: 3.4375em;
width: 100%;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
/* make text of posted articles titles touchable 03/21 */
line-height: 1.25;
}

.entry-footer {
/* give more vertical space before footer and center, 03/21 */
line-height: 3;
padding-top: .625em;
}
}

@media screen and (min-width: 56.875em) {
/* iPad, iPad Mini, Nexus 7, and Nexus 10 Landscape 910px, 03/21 <em>/
.jetpack-display-remote-posts h4 a {
/</em> Make text of posted articles titles touchable */
line-height: 1.25;
}

.entry-footer {
/* give more vertical space before footer, 03/21 */
padding-top: .625em;
text-align: left !important;
}

.site-main #infinite-handle span {
/* change OLDER POST background from black to blue, 03/04 */
background: #6d8ab9;
}
}

@media screen and (max-width: 45.6875em) and (min-width: 25.6875em)
and (orientation:landscape) {
.widget {
/* widget placement NEXUS 5X, landscape mode 731px X 411px, 03/21 */
margin-bottom: .625em;
margin-left: 0 !important;
width: 100% !important;
}
}

/** MOBILE DEVICES--END **/