@import “normalize”; @import “fonts”; @import “rouge-base16-dark.scss”;
$charcoal-color-highlight: #2288ff; $charcoal-color-text: d8d8d8; $charcoal-color-background: #1c1c1e; $charcoal-width: 1300px; $charcoal-header-height: 60px; $spacing-unit: 10px;
html, body { height: 100%; } body {
display: flex; flex-direction: column; padding: 0; margin: 0; font: 14px/1.5 "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif; color: $charcoal-color-text; font-weight: normal; background: $charcoal-color-background;
} .nonfooter { flex: 1 0 auto; }
p, table, pre, ul, ol, dl {
margin: 0 0 20px;
} ul, ol, dl {
ul, ol, dl { margin: 0; }
}
h1, h2, h3, h4, h5, h6 {
color: lighten($charcoal-color-text, 20%); font-family: 'OpenSansRegular', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal;
} h1, h2, h3 { line-height: 1.1; } h1 { font-size: 28px; } h2 { font-size: 24px; } h3 {
font-size: 18px; line-height: 24px; font-family: 'OpenSansRegular', "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: normal;
}
a {
color: $charcoal-color-highlight; font-weight: 400; text-decoration: none; &:hover { color: lighten($charcoal-color-highlight, 25%); }
}
a small {
font-size: 11px; color: #666; margin-top: -0.6em; display: block;
}
.social-media-list {
li + li { padding-top: 5px; }
}
.svg-icon {
width: 16px; height: 16px; display: inline-block; fill: $charcoal-color-highlight; padding-right: 2px; vertical-align: middle;
}
ul {
list-style-image:url('../images/bullet.png');
}
strong {
font-family: 'OpenSansBold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: normal;
}
.wrapper {
max-width: $charcoal-width; margin: 0 auto; position: relative; padding: 0 20px;
}
blockquote {
border-left: 3px solid #ffcc00; margin: 0; padding: 0 0 0 20px; font-style: italic;
}
code {
font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, monospace; color: darken($charcoal-color-text, 20%); font-size: 13px; margin: 0 1px; padding: 1px 2px; border-radius: 1px;
}
pre {
padding: 8px 15px; background: darken($charcoal-color-background, 5%); border-radius: 2px; border: 1px solid darken($charcoal-color-background, 10%); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); overflow: auto; overflow-y: hidden; code { color: darken($charcoal-color-text, 20%); text-shadow: 0px 1px 0px #000; margin: 0; padding: 0; }
}
table {
width:100%; border-collapse:collapse;
}
th {
text-align:left; padding:5px 10px; border-bottom:1px solid #434343; color: #b6b6b6; font-family: 'OpenSansSemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: normal;
}
td {
text-align: left; padding: 5px 10px; border-bottom: 1px solid #434343;
}
hr {
border: 0; outline: none; height: 3px; background: transparent url('../images/hr.gif') center center repeat-x; margin: 0 0 20px;
}
dt {
color:#F0E7D5; font-family: 'OpenSansSemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: normal;
}
@mixin header_padding {
position: relative; z-index: 0; padding-top: $charcoal-header-height + 10px; margin: -$charcoal-header-height - 10px 0 10px;
}
header {
z-index: 100; position: fixed; top: 0px; height: $charcoal-header-height; left: 0; width: 100%; background: url(../images/nav-bg.gif) lighten($charcoal-color-background, 5%); border-bottom: 4px solid lighten($charcoal-color-background, 20%); box-shadow: 0px 1px 3px rgba(0,0,0,.25); h1, h2, h3, h4, h5, h6 { @include header_padding } #title { margin: 0 0 0 0; h1 { position: relative; z-index: 100; text-align: left; line-height: 40px; } p { text-align: left; } .site-image { width: 40px; border-radius: 2px; vertical-align: middle; } } nav { max-width: $charcoal-width; margin: 0 auto; padding: 0 10px; background: blue; margin: 6px auto; li { font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; list-style: none; display: inline; color: white; line-height: 50px; text-shadow: 0px 1px 0px rgba(0,0,0,.2); font-size: 14px; a { color: white; border: 1px solid #5d910b; background: linear_gradient(#93bd20, #659e10); border-radius: 2px; box-shadow: inset 0px 1px 0px rgba(255,255,255,.3), 0px 3px 7px rgba(0,0,0,.7); background-color: #93bd20; padding: 10px 12px; margin-top: 6px; line-height:14px; font-size:14px; display:inline-block; text-align:center; &:hover { background: linear_gradient(#749619, #527f0e); background-color: #659e10; border: 1px solid #527f0e; box-shadow: inset 0px 1px 1px rgba(0,0,0,.2), 0px 1px 0px rgba(0,0,0,.0); } } &.title { float: right; margin-right: 10px; font-size: 11px; } } }
}
section {
max-width: $charcoal-width; padding: 10px 0px 10px 0px; margin: 20px 0; margin-top: $charcoal-header-height + 10px; img { max-width: 100%; } .content { display: flex; .post-list h2 { margin: 0; } } .sidebar { flex: 20%; } .main { flex: 80%; }
}
title {
border: 0; outline: none; margin: 0 0 15px 0; padding: 0 0 5px 0; h1, h2, h3, h4, h5, h6 { @include header_padding } h1 { font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size: 40px; text-align: center; line-height: 48px; } p { color: #d7cfbe; font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size: 18px; text-align: center; } .credits { font-size: 11px; font-family: 'OpenSansRegular', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; color: #696969; margin-top: -10px; &.left { float: left; } &.right { float: right; } }
}
footer {
// z-index: -3; // Removed, not sure why it was ever there flex-shrink: 0; padding-top: 10px; width: 100%; background: url(../images/nav-bg.gif) lighten($charcoal-color-background, 5%); border-top: 4px solid lighten($charcoal-color-background, 20%); .wrapper { display: flex; .footer-col-1 { width: -webkit-calc(30% - (#{$spacing-unit} / 2)); width: calc(30% - (#{$spacing-unit} / 2)); } .footer-col-2 { width: -webkit-calc(30% - (#{$spacing-unit} / 2)); width: calc(30% - (#{$spacing-unit} / 2)); } .footer-col-3 { width: -webkit-calc(40% - (#{$spacing-unit} / 2)); width: calc(40% - (#{$spacing-unit} / 2)); } }
}
.about_image {
display: flex; align-items: center; .about_image_col { float: left; } .about_image_content { margin-left: 20px; } .about_image_image { width: 200px; border-radius: 15px; }
}
@media print, screen and (max-width: 480px) {
#header { position: static; height: $charcoal-header-height - 10px; width: 100%; h1, h2, h3, h4, h5, h6 { position: static; z-index: 0; padding-top: 0; margin: 0; } #title { margin: 0 0 0 0; h1 { position: static; text-align: left; line-height: 40px; } .credits { display: none; } p { display: none; } nav { display: none; } } } section { max-width: none; margin-top: 0; .content { display: block; } .sidebar { display: none; } } footer { .wrapper { flex-wrap: wrap; .footer-col { width: 100%; } } } .wrapper { max-width: none; } .about_image { display: block; align-items: stretch; .about_image_col { float: none; } .about_image_content { margin-left: auto; } .about_image_image { margin-left: 10%; margin-right: 10%; width: 80%; border-radius: 15px; } }
}