Files
blog_os/blog/static/css/edition-2/main.css
Philipp Oppermann 5155e18ba1 Use Iosevka font for code blocks and inline code
The advantage of Iosevka is its narrow width that allows us to show more columns in code examples without reducing font size.
2021-10-16 15:51:47 +02:00

469 lines
6.4 KiB
CSS

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
padding: 0;
color: #a0565c;
font-size: 90%;
background-color: inherit;
}
.masthead-title {
font-size: 1.25rem;
display: inline;
}
.masthead p {
font-size: 1.25rem;
display: inline;
margin: 0;
margin-left: 1rem;
padding: 0;
line-height: 1;
}
.front-page-introduction {
margin-bottom: 2rem;
}
.navigation {
float: right;
}
.navigation img {
height: 1em;
vertical-align: baseline;
display: inline-block;
margin: 0;
padding: 0;
border-radius: 0;
}
main img {
max-width: 100%;
margin: auto;
}
.post {
margin-bottom: 2em;
}
.post:last-child {
margin-bottom: 0em;
}
.frontpage-section {
margin-bottom: 2rem;
}
.posts {
padding: 1.5rem 1rem 0.5rem 1rem;
border-radius: 10px;
margin-bottom: 2rem;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.posts.neutral {
border: 2px solid #999;
}
.posts.subscribe {
border: 2px solid #aaa;
}
.posts.edition-1 {
border: 2px solid #aaa;
background-color: #99ff0022;
}
.posts.bare-bones {
border: 2px solid #66f;
}
.posts.memory-management {
border: 2px solid #fc0
}
.posts.interrupts {
border: 2px solid #f66;
}
.posts.multitasking {
border: 2px solid #556b2f;
}
.posts hr {
margin: 2rem 0;
}
.post-summary {
margin-bottom: 1rem;
}
.post-summary p {
display: inline;
}
.read-more {
margin-left: 5px;
}
.no-translation {
margin-top: .3rem;
color: #999999;
}
.post-category {
margin-right: 0.5rem;
text-transform: uppercase;
font-size: 0.8rem;
text-align: right;
}
.post-category.bare-bones {
color: #55d;
}
.post-category.memory-management {
color: #990;
}
.post-category.interrupts {
color: #f33;
}
.post-category.multitasking {
color: #556b2f;
}
.post-footer-support {
margin-top: 2rem;
}
.PageNavigation {
font-size: 0.9em;
display: table;
width: 100%;
overflow: hidden;
}
.PageNavigation a {
display: table-cell;
}
.PageNavigation .previous {
text-align: left;
}
.PageNavigation .next {
text-align: right;
}
footer.footer {
margin-top: 1rem;
margin-bottom: 1rem;
}
.footnotes {
font-size: 85%;
}
.footnotes li {
margin-bottom: 1rem;
}
sup, sub {
line-height: 0;
}
a.anchorjs-link:hover {
text-decoration: none;
}
#toc-aside {
display: none;
}
#toc-inline summary {
margin-bottom: .2rem;
}
aside#all-posts-link {
font-size: 90%;
margin-top: 0.5rem;
}
@media (min-width: 80rem) {
#toc-inline {
display: none;
}
#toc-aside {
display: block;
width: 12rem;
position: sticky;
float: left;
top: 3.5rem;
margin-top: -4rem;
margin-left: -15rem;
font-size: 90%;
line-height: 1.2;
}
#toc-aside li > a, #toc-aside h2 {
opacity: .5;
transition: opacity .5s;
}
#toc-aside:hover li > a, #toc-aside:hover h2 {
opacity: 1;
}
#toc-aside li.active > a {
font-weight: bold;
}
#toc-aside h2 {
font-size: 110%;
margin-bottom: .2rem;
}
#toc-aside ol {
margin: 0 0 .2rem 0;
padding: 0 0 0 1rem;
list-style:none;
}
#toc-aside ol li a:before {
content: "";
border-color: transparent #008eef;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
#toc-aside.coarse li ol {
display: none;
}
aside.page-aside-right {
position: absolute;
min-width: 11rem;
max-width: 17rem;
top: 4rem;
margin-left: 45rem;
margin-right: 2rem;
font-size: 90%;
}
aside.page-aside-right .block {
margin-bottom: 1.5rem;
}
aside.page-aside-right h2 {
font-size: 110%;
margin-bottom: .2rem;
}
aside.page-aside-right ul {
margin: 0 0 .2rem 0;
padding: 0 0 0 1rem;
}
aside.page-aside-right ul li {
margin-top: .5rem;
}
#language-selector li {
margin-top: 0;
}
aside#all-posts-link {
position: fixed;
top: 1.25rem;
margin-top: 0;
margin-left: -15rem;
}
}
aside.page-aside-right time {
color: #9a9a9a;
}
a code {
color: #268bd2;
}
a.zola-anchor {
opacity: 0;
position: absolute;
margin-left: -1.5em;
padding-right: 1em;
font-size: 0.6em;
vertical-align: baseline;
line-height: 2em;
}
:hover>a.zola-anchor {
opacity: 1;
text-decoration: none;
}
a.zola-anchor:hover {
text-decoration: none;
}
div.note {
padding: .7rem 1rem;
margin: 1rem .2rem;
border: 2px solid #6ad46a;
border-radius: 5px;
background-color: #99ff991f;
}
div.note p:last-child {
margin-bottom: 0;
}
div.warning {
padding: .7rem 1rem;
margin: 1rem .2rem;
border: 2px solid orange;
border-radius: 5px;
background-color: #ffa50022;
}
div.warning p:last-child {
margin-bottom: 0;
}
form.subscribe {
margin: 1rem;
}
div.subscribe-fields {
display: flex;
}
form.subscribe input {
padding: .5rem;
border: 1px solid #e5e5e5;
}
form.subscribe input[type=email] {
flex: 1;
}
form.subscribe input[type=submit] {
padding: .25rem .5rem;
cursor: pointer;
}
/* Asides */
aside.post_aside {
font-style: italic;
padding: 0rem 1rem 0rem;
margin: .8rem 0;
border-left: .1rem solid #e5e5e5;
border-right: .1rem solid #e5e5e5;
}
details summary {
cursor: pointer;
}
details summary h3, details summary h4, details summary h5, details summary h6 {
display: inline;
}
.gh-repo-box {
border: 1px solid #d1d5da;
border-radius: 3px;
padding: 16px;
margin-top: 0.5rem;
color: #586069;
font-size: 80%;
}
.gh-repo-box .repo-link {
color: #0366d6;
font-weight: 600;
font-size: 120%;
}
.gh-repo-box .subtitle {
margin-bottom: 16px;
}
.gh-repo-box .stars-forks {
margin-bottom: 0;
}
.gh-repo-box .stars-forks a {
color: #586069;
}
.gh-repo-box .stars-forks a:hover {
color: #0366d6;
text-decoration: none;
}
.gh-repo-box .stars-forks svg {
vertical-align: text-bottom;
fill: currentColor;
}
.gh-repo-box .stars {
display: inline-block;
}
.gh-repo-box .forks {
display: inline-block;
margin-left: 16px;
}
.gh-repo-box .sponsor {
display: inline-block;
margin-left: 16px;
}
.hidden {
display: none;
}
.toc-comments-link {
margin-top: .5rem;
}
h5 {
font-style: italic;
font-size: 0.9rem;
}
.gray {
color: gray;
}
a strong {
color: #268bd2;
}
.right-to-left {
direction: rtl;
font-family: Vazir;
}
.left-to-right, .right-to-left pre, .right-to-left table, .right-to-left[id="toc-aside"] {
direction: ltr;
}
.status-update-list li {
margin-bottom: .5rem;
}
.giscus {
margin-top: 1.5rem;
}