You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

180 lines
2.9 KiB

$black: black;
$pre-bg: #efefef;
$pre-border: #bbb;
$pre-hl: #555;
$link-color: #007bff;
$code-color: #e83e8c;
$code-black-color: #222222;
$font-fg: 'Roboto', sans-serif;
$font-code: 'Roboto Mono', monospace;
$font-size: 1rem; // base point is h5
body {
font-family: $font-fg;
margin: auto;
max-width: 50em;
margin-bottom: 1em;
line-height: 1.5;
.container {
padding: 0 16px;
}
footer {
margin-top: 1.25em;
}
}
.post__content {
padding-top: 1em;
padding-bottom: 1em;
}
h1 { font-size: $font-size * 2; }
h2 { font-size: $font-size * 1.7; }
h3 { font-size: $font-size * 1.4; }
h4 { font-size: $font-size * 1.2; }
h5 { font-size: $font-size; }
h6 { font-size: $font-size * 0.8; }
code, pre {
font-family: $font-code;
white-space: pre;
overflow-x: auto;
}
p, ul, ol {
code {
color: $code-color;
font-size: 87.5%;
}
}
code {
word-break: break-word;
}
pre {
padding: 4px 8px;
border: 2px solid $pre-border;
background-color: $pre-bg;
font-size: 87.5%;
font-weight: 400;
}
footer {
text-align: center;
}
blockquote {
font-style: italic;
font-size: 1rem;
border-left: 2px solid $pre-border;
padding-left: 20px;
}
img {
max-width: 100%;
margin-top: 20px;
display: block;
margin-left: auto;
margin-right: auto;
border: solid 1px #aaa;
}
.image__subtitle, .quote__subtitle {
text-align: center;
display: block;
font-style: italic;
}
p {
margin-top: 0;
margin-bottom: 1em;
}
/* post ToC */
aside[rel="toc"] {
margin: 16px;
}
/* whatever else comes to mind */
small p {
margin-top: 0;
margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bolder;
margin-top: 0;
margin-bottom: .5rem;
line-height: 1.2;
}
.bold {
font-style: normal;
font-weight: bolder;
}
.tags {
padding-inline-start: 0;
display: inline;
li.tag {
display: inline;
}
}
.post {
.post__header {
display: flex;
justify-content: space-between;
h1, h2, h3, h4, h5, h6 {
display: inline;
}
}
}
.container > section {
margin: 0.5rem;
}
.pagination {
display: flex;
flex-direction: row;
.pagination__left {
text-align: start;
}
.pagination__right {
margin-left: auto;
text-align: end;
}
}
a {
text-decoration: none;
color: $link-color;
&:visited {
color: $link-color;
}
}
hr {
border: 1px solid rgba(0, 0, 0, .1);
}
.navbar-top {
padding: 1em;
.navbar-top__item {
margin-left: 0.8em;
color: grayscale($link-color);
&:hover {
color: darken(grayscale($link-color), 25%);
}
}
}
@media (max-width: 480px) {
.post__header {
display: block !important;
h4 {
display: block !important;
}
}
}