jacobemerick/web

View on GitHub
public/css/blog.css

Summary

Maintainability
Test Coverage
body {
    background: #f5f3f1 url('/image/yellow-texture.gif');
    color: #2c2c29;
    font: 18px Cambria, Georgia, 'New Century Schoolbook', 'Century Schoolbook L', 'Times New Roman', serif;
    margin: 0;}
a {
    border-bottom: 1px dotted #bbb;
    color: #21759b;
    text-decoration: none;}
a:active,
a:focus,
a:hover {
    border-bottom: 1px dotted #999;
    color: #14485F;}

#container .inner {
    margin: 0 auto;
    width: 960px;}

#header {}
#header .logo {
    float: left;
    width: 500px;}
#header .logo h3 {
    font-size: 2.3em;
    font-weight: normal;
    margin: 17px 0 0;}
#header .logo h3 a {}
#header .logo p {
    color: #c2c2c9;
    font: .55em Verdana, Arial, Tahoma, sans-serif;
    margin: 0;
    text-transform: uppercase;}
#header a {
    border: none;
    color: #14485F;}
#header a:hover {
    color: #21759b;}
#header ul {
    margin: 0;
    padding: 39px 0 18px 500px;
    text-align: right;}
#header li {
    display: inline;
    list-style: none;
    margin-left: 20px;}

#introduction {
    background: #f1efea url('/image/dark-yellow-texture.gif');
    margin: 50px 0 30px;
    padding: 10px 0 20px;}
#introduction .inner {
    position: relative;
    width: 950px;}
#introduction .content {
    padding-right: 275px;}
#introduction h1 {
    font-size: 2.5em;
    font-weight: normal;
    margin: 0;
    padding: 15px 0 5px;}
#introduction p {
    font-size: .9em;
    line-height: 1.5em;
    margin: 0;
    padding: 5px 0;}
#introduction a.read-more {
    border-bottom-style: none;
    white-space: nowrap;}
#introduction a.read-more:active,
#introduction a.read-more:focus,
#introduction a.read-more:hover {
    border-bottom-style: solid;}
#introduction a.read-more:after {
    content: ' >';}
#introduction #photo-container {
    border: 1px solid #ccc;
    height: 225px;
    margin-top: -108px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    width: 225px;}
#introduction #photo-container img {
    display: block;
    height: 225px;
    left: 50%;
    margin-left: -180px;
    position: relative;
    width: auto;}

.navigation {
    border: 1px solid #bbb;
    font-size: .8em;
    height: 13px;
    padding: 7px 10px;}
.navigation p {
    float: left;
    margin: 0;}
.navigation span {
    display: inline;
    float: right;
    height: 10px;
    width: 50px;}
.navigation span.next a:before {
    content: '< ';}
.navigation span.prev a:after {
    content: ' >';}
.navigation a {
    border-bottom-style: none;}
.navigation a:active,
.navigation a:focus,
.navigation a:hover {
    border-bottom-style: solid;}

#content-wrap {}
#content {
    float: left;
    width: 73%;}
#content .post {
    border-top: 1px solid #bbb;
    padding: 10px 0 40px;}
#content .post:first-child {
    border-top: none;}
#content .post h1,
#content .post h2 {
    font-size: 1.8em;
    font-weight: normal;
    margin-bottom: 10px;}
#content .post-content h1 {
    font-size: 2.5em;}
#content .post h1 a,
#content .post h2 a {
    border: none;
    color: #14485F;}
#content .post h1 a:hover,
#content .post h2 a:hover {
    color: #21759b;}
#content .post h5.author {
    font-style: italic;
    font-weight: normal;
    margin: 0 0 .75em;
    text-align: right;}
#content .post .photo-container {
    border: 1px solid #ccc;
    float: left;
    margin: 0 10px 10px 0;
    *width: 240px;}
#content .post .photo-container img {
    display: block;
    height: auto;
    min-height: 135px;
    width: 100%;}
#content .post h4 {
    font-size: 1.3em;
    font-weight: normal;
    margin: 1em 0 0;}
#content .post pre {
    background-color: #f3f3f3;
    border: 1px solid #ddd;
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    font-size: .7em;
    line-height: 15px;
    margin: 5px 3% 15px;
    overflow-x: auto;
    tab-size: 2;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    white-space: nowrap;
    width: 92%;}
#content .post table {
    border: 1px solid #868673;
    font: .8em Verdana, Arial, Tahoma, sans-serif;
    line-height: 2em;
    margin: 5px 0 8px;
    width: 100%;
}
#content .post table tr {
    border-top: 1px solid #c1c1ad;
}
#content .post table tr:first-child {
    border-top: none;
}
#content .post table tr:hover {
    background: rgba(100, 100, 200, .1);
    color: black;
}
#content .post table tr.subtotal {
    font-weight: bold;
}
#content .post table td {
    padding: 0 5px;
}
#content .post table td.weight {
    text-align: right;
}
#content .post p,
#content .post li {
    color: #555;
    line-height: 1.5em;
    margin: 5px 0 10px;}
#content .post .photo-holder {
    background: #f1efea url('/image/dark-yellow-texture.gif');
    margin: 25px auto;
    padding: 4px;
    width: auto;}
#content .post .photo-holder img {
    height: auto;
    min-height: 390px;
    width: 100%;}
#content .post .photo-caption {
    color: #666;
    font-size: .9em;
    margin: 10px 0 5px;
    text-align: center;}
#content .meta {
    clear: both;
    font: .5em Verdana, Arial, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: left;}
#content .meta li {
    color: #c2c2c9;
    display: inline;
    list-style: none;
    margin: 0 10px 0 0;
    text-transform: uppercase;
    white-space: nowrap;}
#content .meta li.read-more {
    position: absolute;
    right: 0;
    top: -5px;}
#content .meta li.read-more,
#content .meta li span {
    color: #666;
    font-size: 1.2em;
    text-transform: none;}
#content .meta li a {
    color: inherit;}
#content .meta li.read-more a {
    background: #21759b;
    border-bottom-style: none;
    color: white;
    display: block;
    padding: 5px 7px;}
#content .meta li.read-more a:active,
#content .meta li.read-more a:focus,
#content .meta li.read-more a:hover {
    background-color: #14485f;}
#content .meta li.read-more a:after {
    content: ' >';}
#content .entry-content {
    margin-top: 25px;}
#content .tags {
    height: 40px;
    margin-top: 20px;}
#content .tags li {
    display: inline-block;
    float: left;}
#content .tags li:first-child {
    font-style: italic;
    margin-right: 10px;
    text-transform: lowercase;}

#read-more h3 {
    font-size: 1.5em;
    font-weight: normal;
    margin: 1em 0 0;}
#read-more ul {
    padding: 0;}
#read-more ul:after {
    clear: both;
    content: ' ';
    display: block;}
#content #read-more li {
    background: #f1efea url('/image/dark-yellow-texture.gif');
    display: block;
    float: left;
    font-size: .8em;
    list-style: none;
    margin: 0 5px 5px 0;
    padding: 5px 1%;
    text-align: left;
    width: 46%;
    vertical-align: top;}
#read-more li:after {
    clear: both;
    content: ' ';
    display: block;}
#read-more li:nth-child(odd) {
    clear: left;}
#read-more img {
    border: 1px solid #ccc;
    float: left;
    margin-right: 10px;}
#read-more h6 {
    font-size: 1.2em;
    font-weight: normal;
    margin: 0;}
#read-more h6 a {
    border-bottom-style: none;
    color: #14485f;}
#read-more h6 a:hover {
    color: #21759b;}
#read-more p {
    line-height: 1.2em;
    margin: 1em 0 0;}
#read-more a.read-more {
    float: right;}
#read-more a.read-more:hover {
    border-bottom-style: solid;}

#series {
    background: #f1efea url('/image/dark-yellow-texture.gif');
    border: 1px solid #999;
    font-size: .8em;
    margin: 10px 0 5px;
    padding: 7px 8px 0;}
#series h3 {
    font-size: 1.3em;
    font-weight: normal;
    margin: 0;}
#series ul {
    margin: 0;
    padding: 0;
    text-align: justify;}
.post #series li {
    display: inline-block;
    list-style: none;
    margin: 0;}
#series ul:after {
    content: '';
    display: inline-block;
    width: 100%;}
#series li.previous {
    text-align: left;}
#series li.next {
    text-align: right;}

#comments {
    clear: both;}
#comments h3 {
    font-size: 1.5em;
    font-weight: normal;
    margin: 1em 0 0;}
#comments a {
    border-bottom-style: none;}
#comments .faux-link {
    background: #21759b;
    color: white;
    cursor: pointer;
    display: inline-block;
    padding: 5px 7px;}
#comments .faux-link:active,
#comments .faux-link:focus,
#comments .faux-link:hover {
    background-color: #14485f;}
#comments li {
    clear: both;
    list-style: none;
    padding: 10px 0 0;}
#comments .comment-listing {
    font-size: .9em;
    margin: 0;
    padding: 0;
    word-wrap: break-word;}
#comments .comment-listing > li {
    margin: 15px 0 25px;}
#comments li.reply {
    margin-left: 50px;}
#comments .comment-meta {
    display: inline-block;
    float: left;
    margin-top: 5px;
    min-height: 43px;
    width: 100px;}
#comments .comment-date {
    display: block;
    font-style: italic;}
#comments .comment-body {
    display: block;
    line-height: 1.4em;
    margin: 0 0 10px 140px;}
#comments .comment-body.pending {
    font-style: italic;}
#comments .comment-replies {
    border-left: 1px solid #ccc;
    clear: both;
    margin: 0;}
#comments pre {
    background: #fafafa;
    border: 1px solid #ddd;
    font-size: .8em;
    overflow: hidden;
    padding: 5px 8px;}
#comments .comment-new,
#comments .comment-reply,
#comments .comment-hide {
    display: block;
    text-align: right;}
#comments .comment-form {
    background: #f1efea url('/image/dark-yellow-texture.gif');
    display: none;
    margin: 10px 0 15px 25px;
    padding: 10px 0 10px;}
#comments .comment-form.active {
    display: block;}
#comments .comment-form ul {
    margin: 0;
    padding: 0;}
#comments .comment-form ul.errors {
    font-weight: bold;}
#comments .comment-form li {
    margin: 0 20px 15px;
    padding: 0;}
#comments .comment-form li.catcher {
    display: none;}
#comments .comment-form li.text label {
    display: block;
    padding: 2px 0 4px;}
#comments .comment-form li.text input {
    display: block;
    padding: 3px 5px;
    width: 240px;}
#comments .comment-form textarea {
    height: 120px;
    width: 95%;}
#comments .comment-form input[type="submit"] {
    background: #21759b;
    border: none;
    color: white;
    font-size: 1.1em;
    padding: 7px 15px;
    margin-right: 7px;}
#comments .comment-form input[type="reset"] {
    margin-left: 5px;}
#comments .comment-form input[type="submit"]:active,
#comments .comment-form input[type="submit"]:focus,
#comments .comment-form input[type="submit"]:hover {
    background-color: #14485f;}
#comments .comment-form .mini {
    font-size: .8em;}
#comments .comment-form .mini p {
    margin-top: 0;}

#search-form {
    margin-bottom: 20px;
    vertical-align: top;}
#search-form input {
    border-radius: 0;
    margin: 0;}
#search-form input[type="text"] {
    background: white;
    border: 1px solid #ccc;
    font-size: .8em;
    height: 20px;
    padding: 2px 5px;
    width: 73%;}
#search-form input[type="submit"] {
    background: #21759b url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQkY5QkVGNzlENzk4QzI0MyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNUFDOEE3RTMxRTgxMUUyQjY2QUJCMEFEQ0QyREY3QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNUFDOEE3RDMxRTgxMUUyQjY2QUJCMEFEQ0QyREY3QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDU4MDExNzQwNzIwNjgxMTg3MUY4ODdGMTlCNUExNTIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMUJGOUJFRjc5RDc5OEMyNDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Mj6+TAAAAy0lEQVR42qSTDRHDIAxG6RQgAQlIYA4qYQ5mAQeVgIRK6E3B5gAJlcCyO9r7liX0Z7l7dy2ljwBJV0oxf8dHAlgiErl8x0gENncFX7zwM4+hJbEgmGs2rn7riQlEUZNEEHgl7QQiJ0mytgojS9taHsQVBJaMp5bEbBAkyYXdeL9REaFVJ6O0glBDzTMJsKWkCPB2vFZsA0zK9RCDUsHPKv6R4OnviVXUCQ3oiDvhYexFPIhEWDZ+NTuulffXzDM6KhFF5iTY8be3AAMAJjskUTmsUdcAAAAASUVORK5CYII=') 4px 3px no-repeat;
    border: none;
    height: 25px;
    overflow: hidden;
    padding: 0;
    text-indent: -500px;
    width: 25px;}

#right-side {
    padding: 85px 0 0 77%;}
#right-side form {
    position: relative;}
#right-side h4 {
    color: #c2c2c9;
    font: .8em Verdana, Arial, Tahoma, sans-serif;
    margin: 0;
    text-transform: uppercase;}
#right-side .tag-cloud {
    font-size: .8em;
    margin: 5px 0 25px;
    padding: 0;}
#right-side .tag-cloud li {
    display: inline-block;
    *display: inline;
    line-height: 1.4em;
    *line-height: 1.2em;
    margin-right: .4em;
    white-space: nowrap;
    *white-space: normal;}
#right-side .tag-cloud li a {
    border-bottom-style: none;}
#right-side .tag-cloud li a:active,
#right-side .tag-cloud li a:focus,
#right-side .tag-cloud li a:hover {
    border-bottom-style: solid;}
#right-side .tag-cloud li.size0 {
    font-size: .8em;}
#right-side .tag-cloud li.size1 {
    font-size: .9em;}
#right-side .tag-cloud li.size2 {
    font-size: .9em;}
#right-side .tag-cloud li.size3 {
    font-size: 1em;}
#right-side .tag-cloud li.size4 {
    font-size: 1.1em;}
#right-side .tag-cloud li.size5 {
    font-size: 1.2em;}
#right-side .tag-cloud li.size6 {
    font-size: 1.3em;}
#right-side .tag-cloud li.size7 {
    font-size: 1.4em;}
#right-side .tag-cloud li.size8 {
    font-size: 1.4em;}
#right-side .tag-cloud li.size9 {
    font-size: 1.4em;}
#right-side .comment-list {
    font-size: .9em;
    margin: 5px 0 25px;
    padding: 0;}
#right-side .comment-list li {
    line-height: 1.2em;
    list-style: none;
    margin: 2px 0 10px;
    padding-left: 5px;
    text-indent: -5px;}
#right-side .comment-list a {
    border-bottom-style: none;}
#right-side .comment-list a:active,
#right-side .comment-list a:focus,
#right-side .comment-list a:hover {
    border-bottom-style: solid;}
#right-side .comment-list .commenter {
    font-weight: bold;}

#bottom {
    background: #f1efea url('/image/dark-yellow-texture.gif');
    font-size: .7em;
    margin-top: 40px;
    padding: 20px 0 30px;}
#site-links {
    float: left;
    width: 45%;}
#activity-feed {
    margin-left: 55%;}
#site-links h4,
#activity-feed h4 {
    font-size: 1.6em;
    font-weight: normal;
    margin: 0 0 10px;}
#site-links ul,
#activity-feed ul {
    padding-left: 20px;}
#site-links ul {
    font-size: 1.2em;}
#activity-feed ul {
    padding-right: 5px;}
#site-links li,
#activity-feed li {
    margin-bottom: 6px;}
#site-links a {
    border-bottom-style: none;}
#site-links a:hover {
    border-bottom-style: solid;}
#site-links a .title {
    border-bottom: 1px dotted;}
#site-links a:hover .title {
    border-bottom-style: none;}
#site-links a .description {
    font-size: .9em;
    font-style: italic;
    padding-left: 3px;}
#activity-feed .meta {
    display: block;
    font-style: italic;
    margin-right: 10px;
    text-align: right;}
#activity-feed .read-more {
    float: right;}

.clear {
    clear: both;}

#footer {
    background: #f1efea url('/image/dark-yellow-texture.gif');
    font-size: .9em;
    padding: 30px 0 50px;}
#footer #interior {
    text-align: center;}
#footer #interior p {
    margin: .5em 0;}

@media all and (max-width: 960px) {
#container .inner {
    margin: 0 1%;
    width: 98%;}

#header .logo {
    width: 450px;}
#header .logo h3 {
    font-size: 2em;}
#header .logo p {
    font-size: .5em;}
#header ul {
    padding-left: 450px;}

#introduction h1 {
    font-size: 2.3em;}

#content .post-content h1 {
    font-size: 2.3em;}
#content .post .photo-holder img {
    min-height: 340px;
}
}

@media all and (max-width: 880px) {
#header .logo {
    float: none;
    width: auto;}
#header .logo h3 {
    font-size: 1.8em}
#header .logo p {
    font-size: .45em;}
#header ul {
    padding: 15px 0 0;
    text-align: left;}
#header li {
    margin: 0 20px 0 0;}

#introduction {
    margin-top: 30px;}
#introduction h1 {
    font-size: 2em;}

#right-side {
    font-size: .9em;}

#content .post-content h1 {
    font-size: 2em;}
#content .post .photo-holder img {
    min-height: 320px;
}
}

@media all and (max-width: 820px) {
#header .logo h3 {
    font-size: 1.4em}

#introduction {
    padding: 5px 0 10px;}
#introduction .content {
    padding-right: 200px;}
#introduction h1 {
    font-size: 1.7em;
    padding: 5px 0 2px;}
#introduction .content p {
    font-size: .8em;}
#introduction #photo-container {
    height: 175px;
    margin-top: -85px;
    width: 175px;}

#content .post-content h1 {
    font-size: 1.7em;}
#content .post h2 {
    font-size: 1.5em;
    margin: 10px 0 6px;}
#content .post .photo-container {
    width: 180px;}
#content .post .photo-container img {
    min-height: 100px;
}
#content .post h4 {
    font-size: 1.3em;
    font-weight: normal;
    margin: 1em 0 0;}
#content .post p,
#content .post li {
    font-size: .9em;}
#content .post table {
    font-size: .7em;
}
#content .post .photo-holder img {
    min-height: 270px;
}
#content .post pre {
    font-size: .6em;}

#comments .comment-listing {
    font-size: .8em;}
#comments .comment-replies {
    padding-left: 20px;}

#bottom {
    font-size: .6em;}
}

@media all and (max-width: 700px) {
#header ul {
    font-size: .8em;
    padding: 10px 0 0;}

#introduction {
    margin-top: 20px;}
#introduction h1 {
    font-size: 1.5em;}

#content {
    float: none;
    width: 100%;}
#content .post {
    padding: 0 0 20px;}
#content .post-content h1 {
    font-size: 1.5em;}
#content .post .photo-holder img {
    min-height: 315px;
}
#content .post .photo-caption {
    font-size: .8em;
    margin: 5px 0;}

#read-more h3,
#comments h3 {
    font-size: 1.2em;}

#right-side {
    display: none;}

#site-links {
    float: none;
    width: auto;}
#activity-feed {
    margin: 30px 0 0 0;}
}

@media all and (max-width: 600px) {
#container .inner {
    margin: 0 2%;
    width: 96%;}

#introduction .content {
    padding-right: 0;}
#introduction #photo-container {
    display: none;}

#content .post-content h1 {
    font-size: 1.4em;}
#content .post h2 {
    font-size: 1.4em;
    margin: 6px 0 4px;}
#content .post h4 {
    font-size: 1.2em;}
#content .post p,
#content .post li {
    font-size: .8em;}
#content .post table {
    font-size: .6em;
}
#content .post .photo-container {
    width: 140px;}
#content .post .photo-holder img {
    min-height: 200px;
}
#content .post .photo-caption {
    font-size: .7em;
    margin: 3px 0;}
#content .post pre {
    font-size: 1em;}
#content .meta {
    padding-bottom: 20px;}
#content .hentry .meta {
    padding-bottom: 0;}
#content .meta li.read-more {
    top: 20px;}
#content .entry-content {
    margin-top: 15px;}

#series ul {
    text-align: left;}
.post #series li {
    display: block;}
#series ul:after {
    display: none;}
#series li.next {
    text-align: left;}

#read-more ul {
    text-align: left;}
#content #read-more li {
    float: none;
    width: 95%;}

#read-more h3,
#comments h3 {
    font-size: 1em;}

#comments .comment-listing {
    font-size: .7em;}
#comments .comment-replies {
    padding-left: 10px;}
#comments .comment-meta {
    display: block;
    float: none;
    margin-top: 0;}
#content .meta li {
    margin-right: 5px;}
#comments .comment-body {
    margin-left: 0;}
#comments pre {
    font-size: 1em;}
#comments .comment-form {
    margin-left: 0;
    padding: 5px 0 10px;}
#comments .comment-form li {
    margin: 5px 10px 15px;}
#comments .comment-form li.text input,
#comments .comment-form li.text textarea {
    font-size: 1.1em;}
}

@media all and (max-width: 400px) {
#introduction h1 {
    font-size: 1.3em;}

.navigation {
    font-size: .7em;
    height: 11px;
    padding: 5px 7px;}

#content .post table {
    font-size: .5em;
}
#content .post .photo-holder img {
    min-height: 100px;
}

#comments .comment-form li.text input {
    width: 90%;}
}