/*** Reset ***/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
} body {
line-height: 1;
} ol, ul {
list-style: bullet;
} blockquote, q {
quotes: none;
} blockquote:before, blockquote:after, q:before, q:after {
content: ''; content: none;
} table {
border-collapse: collapse; border-spacing: 0;
}
// Import stuff @import 'variables';
// fonts @import url('fonts.googleapis.com/css?family=Karla&display=swap');
/*** Basics ***/ body {
font-family: 'Karla', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 14px; line-height: 1.7;
}
a, a:active, a:visited {
text-decoration: none; padding-bottom: 2px;
} a:hover {
background-color: $cerulean-blue; color: #000000;
}
p, pre { margin-bottom: 15px; } ul, ol { padding: 0 0 18px 30px; } ol li, ul li { margin-top: 10px; margin-bottom: 10px; } em, i { font-style: italic; } strong, b { font-weight: bold; } small { font-size: 1em; } sup { vertical-align: super; font-size: 0.85em; } sub { vertical-align: sub; font-size: 0.85em; }
code {
font: 0.85em Monaco, Courier, Monospace; overflow-x: auto;
}
pre {
overflow: auto;
}
.code-wrap code {
white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap;
}
blockquote {
margin: 22px 22px; padding: 0 20px; border-left: 2px solid #000000; font-size: 1.4em; font-style: italic; line-height: 1.5em;
}
acronym, abbr {
cursor: help; letter-spacing: 1px; border-bottom: 1px dashed;
}
h1 {
font-size: 18px; margin: 0 0 10px 0;
} h2 {
font-size: 15px; margin: 0 0 10px 0;
} h3 {
font-size: 14px; margin: 0 0 10px 0;
}
/*** Useful Classes ***/ .clear { clear: both; } .float-left { float: left; } .float-right { float: right; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } .img-left { float: left; margin: 4px 10px 4px 0; } .img-right { float: right; margin: 4px 0 4px 10px; } .img-middle { vertical-align: middle; } .nopadding { padding: 0; } .nounderline { text-decoration: underline; }
/*** Structure ***/ page {
width: 500px; margin: 0 auto; position: relative;
}
header {
width: 500px; margin: 40px auto 50px auto;
} header h1 {
font-size: 32px; margin-bottom: 4px;
} header h1 a {
border: none;
}
footer {
width: 500px; margin: 50px auto 20px auto; padding-top: 10px; font-size: 0.85em; border-top: 1px solid #073642;
}
content {
width: 500px; margin: 0 auto;
}
sidebar {
position: absolute; text-align: right; width: 160px; top: 0; left: -240px;
}
sidebar li {
list-style: none; margin: 2px 0;
}
sidebar a {
border: none; font-family: 'Karla', sans-serif; font-size: 1em; padding: 2px 4px;
}
sidebar .active {
font-weight: bold; color: $utah-red;
}
/*** Posts ***/ article {
margin-bottom: 40px;
}
article h1 {
font-size: 17px; margin: 0 0 10px 0;
} article h1 a {
border: none;
} article h1 a.anchor {
margin-left: 8px;
}
article img {
display: block; text-align: center; margin: 0 auto 1em auto; max-width: 90%;
}
article .meta {
padding-top: 6px; font-size: 0.85em; font-style: italic;
}
img.left {
float: left; margin: 0 1em 1em 0; max-width: 95%;
} img.right {
float: right; margin: 0 0 1em 1em; max-width: 95%;
} img.center {
display: block; text-align: center; margin: auto; max-width: 95%;
}
/*
TODO: figure and related css; */
figcaption {
display: block; text-align: center; font-style: italic;
}
/*** Pagination ***/ .postnavigation {
padding-top: 10px; text-align: center; font-size: 1.2em;
}
.postnavigation .left {
float: left;
}
.postnavigation .right {
float: right;
}
/*** Media Queries ***/ @media all and (max-width: 870px) {
#page, #header, #content, #footer { width: inherit; padding-left: 10px; padding-right: 10px; } #sidebar { position: relative; text-align: left; width: 100%; left: 0; margin: 10px 10px 20px 10px; } #sidebar nav select.mnav { display: block; margin-bottom: 15px; }
}