mirror of
https://github.com/phil-opp/blog_os.git
synced 2025-12-16 14:27:49 +00:00
5155e18ba1
The advantage of Iosevka is its narrow width that allows us to show more columns in code examples without reducing font size.
414 lines
6.5 KiB
CSS
414 lines
6.5 KiB
CSS
/*
|
|
* ___
|
|
* /\_ \
|
|
* _____ ___ ___\//\ \ __
|
|
* /\ '__`\ / __`\ / __`\\ \ \ /'__`\
|
|
* \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/
|
|
* \ \ ,__/\ \____/\ \____//\____\ \____\
|
|
* \ \ \/ \/___/ \/___/ \/____/\/____/
|
|
* \ \_\
|
|
* \/_/
|
|
*
|
|
* Designed, built, and released under MIT license by @mdo. Learn more at
|
|
* https://github.com/poole/poole.
|
|
*/
|
|
|
|
|
|
/*
|
|
* Contents
|
|
*
|
|
* Body resets
|
|
* Custom type
|
|
* Messages
|
|
* Container
|
|
* Masthead
|
|
* Posts and pages
|
|
* Pagination
|
|
* Reverse layout
|
|
* Themes
|
|
*/
|
|
|
|
@font-face {
|
|
font-family: "Iosevka";
|
|
src: url("/fonts/iosevka-regular.woff2") format("woff2"), url("/fonts/iosevka-regular.woff") format("woff");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/*
|
|
* Body resets
|
|
*
|
|
* Update the foundational and global aspects of the page.
|
|
*/
|
|
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
body {
|
|
color: #515151;
|
|
background-color: #fff;
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
}
|
|
|
|
/* No `:visited` state is required by default (browsers will use `a`) */
|
|
a {
|
|
color: #268bd2;
|
|
text-decoration: none;
|
|
}
|
|
/* `:focus` is linked to `:hover` for basic accessibility */
|
|
a:hover,
|
|
a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Headings */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-bottom: .5rem;
|
|
font-weight: bold;
|
|
line-height: 1.25;
|
|
color: #313131;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
h2 {
|
|
margin-top: 1rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
h3 {
|
|
margin-top: 1.5rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
h4, h5, h6 {
|
|
margin-top: 1rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Body text */
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
strong {
|
|
color: #303030;
|
|
}
|
|
|
|
|
|
/* Lists */
|
|
ul, ol, dl {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Nested lists */
|
|
li ul, li ol, li dl {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
li ul + p, li ol + p, li dl + p {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
dd {
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
/* Misc */
|
|
hr {
|
|
position: relative;
|
|
margin: 1.5rem 0;
|
|
border: 0;
|
|
border-top: 1px solid #eee;
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
|
|
abbr {
|
|
font-size: 90%;
|
|
font-weight: bold;
|
|
color: #555;
|
|
text-transform: uppercase;
|
|
}
|
|
abbr[title] {
|
|
cursor: help;
|
|
border-bottom: 1px dotted #e5e5e5;
|
|
}
|
|
|
|
/* Code */
|
|
code,
|
|
pre {
|
|
font-family: "Iosevka", monospace;
|
|
}
|
|
code {
|
|
padding: .25em .5em;
|
|
font-size: 85%;
|
|
color: #bf616a;
|
|
background-color: #f9f9f9;
|
|
border-radius: 3px;
|
|
}
|
|
pre {
|
|
display: block;
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
padding: .5rem;
|
|
font-size: .95rem;
|
|
line-height: 1.4;
|
|
white-space: pre;
|
|
overflow: auto;
|
|
word-wrap: normal;
|
|
background-color: #f9f9f9;
|
|
}
|
|
pre code {
|
|
padding: 0;
|
|
font-size: 100%;
|
|
color: inherit;
|
|
background-color: transparent;
|
|
}
|
|
.highlight {
|
|
margin-bottom: 1rem;
|
|
border-radius: 4px;
|
|
}
|
|
.highlight pre {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Quotes */
|
|
blockquote {
|
|
padding: .5rem 1rem;
|
|
margin: .8rem 0;
|
|
color: #7a7a7a;
|
|
border-left: .25rem solid #e5e5e5;
|
|
}
|
|
blockquote p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
@media (min-width: 30rem) {
|
|
blockquote {
|
|
padding-right: 5rem;
|
|
padding-left: 1.25rem;
|
|
}
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
margin: 0 0 1rem;
|
|
border-radius: 5px;
|
|
max-width: 100%;
|
|
color: grey;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Tables */
|
|
table {
|
|
margin-bottom: 1rem;
|
|
width: 100%;
|
|
border: 1px solid #e5e5e5;
|
|
border-collapse: collapse;
|
|
}
|
|
td,
|
|
th {
|
|
padding: .25rem .5rem;
|
|
border: 1px solid #e5e5e5;
|
|
}
|
|
tbody tr:nth-child(odd) td,
|
|
tbody tr:nth-child(odd) th {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
|
|
/*
|
|
* Custom type
|
|
*
|
|
* Extend paragraphs with `.lead` for larger introductory text.
|
|
*/
|
|
|
|
.lead {
|
|
font-size: 1.25rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
|
|
/*
|
|
* Messages
|
|
*
|
|
* Show alert messages to users. You may add it to single elements like a `<p>`,
|
|
* or to a parent if there are multiple elements to show.
|
|
*/
|
|
|
|
.message {
|
|
margin-bottom: 1rem;
|
|
padding: 1rem;
|
|
color: #717171;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
|
|
/*
|
|
* Container
|
|
*
|
|
* Center the page content.
|
|
*/
|
|
|
|
.container {
|
|
max-width: 45rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
|
|
/*
|
|
* Masthead
|
|
*
|
|
* Super small header above the content for site name and short description.
|
|
*/
|
|
|
|
.masthead {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.masthead-title {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
color: #505050;
|
|
}
|
|
.masthead-title a {
|
|
color: #505050;
|
|
}
|
|
.masthead small {
|
|
font-size: 75%;
|
|
font-weight: 400;
|
|
color: #c0c0c0;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
|
|
/*
|
|
* Posts and pages
|
|
*
|
|
* Each post is wrapped in `.post` and is used on default and post layouts. Each
|
|
* page is wrapped in `.page` and is only used on the page layout.
|
|
*/
|
|
|
|
.page {
|
|
margin-bottom: 4em;
|
|
}
|
|
|
|
/* Blog post or page title */
|
|
.page-title,
|
|
.post-title,
|
|
.post-title a {
|
|
color: #303030;
|
|
}
|
|
.page-title,
|
|
.post-title {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Meta data line below post title */
|
|
.post-date {
|
|
display: block;
|
|
margin-top: -.5rem;
|
|
margin-bottom: 1rem;
|
|
color: #9a9a9a;
|
|
}
|
|
|
|
/* Related posts */
|
|
.related {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.related-posts {
|
|
padding-left: 0;
|
|
list-style: none;
|
|
}
|
|
.related-posts h3 {
|
|
margin-top: 0;
|
|
}
|
|
.related-posts li small {
|
|
font-size: 75%;
|
|
color: #999;
|
|
}
|
|
.related-posts li a:hover {
|
|
color: #268bd2;
|
|
text-decoration: none;
|
|
}
|
|
.related-posts li a:hover small {
|
|
color: inherit;
|
|
}
|
|
|
|
|
|
/*
|
|
* Pagination
|
|
*
|
|
* Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
|
|
* there are no more previous or next posts to show.
|
|
*/
|
|
|
|
.pagination {
|
|
overflow: hidden; /* clearfix */
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
font-family: "PT Sans", Helvetica, Arial, sans-serif;
|
|
color: #ccc;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Pagination items can be `span`s or `a`s */
|
|
.pagination-item {
|
|
display: block;
|
|
padding: 1rem;
|
|
border: 1px solid #eee;
|
|
}
|
|
.pagination-item:first-child {
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
/* Only provide a hover state for linked pagination items */
|
|
a.pagination-item:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
@media (min-width: 30rem) {
|
|
.pagination {
|
|
margin: 3rem 0;
|
|
}
|
|
.pagination-item {
|
|
float: left;
|
|
width: 50%;
|
|
}
|
|
.pagination-item:first-child {
|
|
margin-bottom: 0;
|
|
border-top-left-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
.pagination-item:last-child {
|
|
margin-left: -1px;
|
|
border-top-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
}
|