mirror of
https://github.com/phil-opp/blog_os.git
synced 2025-12-16 22:37:49 +00:00
Create an initial style for 3rd edition with dark mode support
This commit is contained in:
Philipp Oppermann
@@ -6,6 +6,7 @@ highlight_code = true
|
||||
highlight_theme = "visual-studio-dark"
|
||||
generate_feed = true
|
||||
feed_filename = "rss.xml"
|
||||
compile_sass = true
|
||||
|
||||
languages = [
|
||||
{ code = "zh-CN" }, # Chinese (simplified)
|
||||
|
||||
4
blog/content/edition-3/_index.md
Normal file
4
blog/content/edition-3/_index.md
Normal file
@@ -0,0 +1,4 @@
|
||||
+++
|
||||
title = "Third Edition (Alpha)"
|
||||
template = "edition-3/index.html"
|
||||
+++
|
||||
7
blog/content/edition-3/chapters/_index.md
Normal file
7
blog/content/edition-3/chapters/_index.md
Normal file
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
title = "Posts"
|
||||
sort_by = "weight"
|
||||
insert_anchor_links = "left"
|
||||
render = false
|
||||
page_template = "edition-3/raw.html"
|
||||
+++
|
||||
6
blog/content/edition-3/chapters/bare-bones.md
Normal file
6
blog/content/edition-3/chapters/bare-bones.md
Normal file
@@ -0,0 +1,6 @@
|
||||
+++
|
||||
+++
|
||||
|
||||
## Bare Bones
|
||||
|
||||
In this first chapter, we explain how to create an operating system for the `x86_64` architecture step for step. Starting from scratch, we first create a minimal Rust executable that doesn't depend on the standard library. We then turn it into a bootable OS kernel by combining it with a bootloader. The resulting disk image can then be launched in the [QEMU](https://www.qemu.org/) emulator or booted on a real machine.
|
||||
941
blog/sass/css/edition-3/main.scss
Normal file
941
blog/sass/css/edition-3/main.scss
Normal file
@@ -0,0 +1,941 @@
|
||||
/*
|
||||
* ___
|
||||
* /\_ \
|
||||
* _____ ___ ___\//\ \ __
|
||||
* /\ '__`\ / __`\ / __`\\ \ \ /'__`\
|
||||
* \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/
|
||||
* \ \ ,__/\ \____/\ \____//\____\ \____\
|
||||
* \ \ \/ \/___/ \/___/ \/____/\/____/
|
||||
* \ \_\
|
||||
* \/_/
|
||||
*
|
||||
* Designed, built, and released under MIT license by @mdo. Learn more at
|
||||
* https://github.com/poole/poole.
|
||||
*
|
||||
*
|
||||
* Adjusted by @phil-opp.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Contents
|
||||
*
|
||||
* Body resets
|
||||
* Custom type
|
||||
* Messages
|
||||
* Container
|
||||
* Masthead
|
||||
* Posts and pages
|
||||
* Pagination
|
||||
* Reverse layout
|
||||
* Themes
|
||||
*/
|
||||
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
|
||||
@mixin set-colors-light {
|
||||
--background-color: #fff;
|
||||
--text-color: #515151;
|
||||
--heading-color: #313131;
|
||||
--heading-code-color: #a0565c;
|
||||
--link-color: #268bd2;
|
||||
--hr-color-top: #eee;
|
||||
--hr-color-bottom: #fff;
|
||||
--code-text-color: #bf616a;
|
||||
--code-background-color: #f9f9f9;
|
||||
--masthead-title-color: #505050;
|
||||
--strong-color: #303030;
|
||||
--masthead-subtitle: #c0c0c0;
|
||||
--background-color-section-bare-bones: #f4f4ff;
|
||||
--border-color-section-bare-bones: #e0e0ff;
|
||||
--post-title-color: #228;
|
||||
}
|
||||
|
||||
@mixin set-colors-dark {
|
||||
--background-color: #121212;
|
||||
--text-color: #f5f5f5;
|
||||
--heading-color: #eee;
|
||||
--heading-code-color: #eee;
|
||||
--link-color: #c59ff3;
|
||||
--hr-color-top: #333;
|
||||
--hr-color-bottom: #000;
|
||||
--code-text-color: #eeeeee;
|
||||
--code-background-color: #222222;
|
||||
--masthead-title-color: #a0a0a0;
|
||||
--strong-color: #c0c0c0;
|
||||
--masthead-subtitle: #6f6f6f;
|
||||
--background-color-section-bare-bones: #005;
|
||||
--background-color-section-bare-bones: #225;
|
||||
--post-title-color: #c8c8ff;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
@include set-colors-light();
|
||||
}
|
||||
|
||||
body.dark {
|
||||
@include set-colors-dark();
|
||||
}
|
||||
|
||||
/* Styles for users who prefer dark mode at the OS level */
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* defaults to dark theme */
|
||||
body {
|
||||
@include set-colors-dark();
|
||||
}
|
||||
/* Override dark mode with light mode styles if the user decides to swap */
|
||||
body.light {
|
||||
@include set-colors-light();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* No `:visited` state is required by default (browsers will use `a`) */
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
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: var(--heading-color);
|
||||
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: var(--strong-color);
|
||||
}
|
||||
|
||||
/* 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 var(--hr-color-top);
|
||||
border-bottom: 1px solid var(--hr-color-bottom);
|
||||
}
|
||||
|
||||
abbr {
|
||||
font-size: 85%;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted #e5e5e5;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
|
||||
code, pre {
|
||||
font-family: Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: .25em .5em;
|
||||
font-size: 85%;
|
||||
color: var(--code-text-color);
|
||||
background-color: var(--code-background-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
padding: .5rem;
|
||||
font-size: .85rem;
|
||||
line-height: 1.4;
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
word-wrap: normal;
|
||||
background-color: var(--code-background-color);
|
||||
}
|
||||
|
||||
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: var(--code-background-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* 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: var(--code-background-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* 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: var(--masthead-title-color);
|
||||
}
|
||||
|
||||
.masthead-title a {
|
||||
color: var(--masthead-title-color);
|
||||
}
|
||||
|
||||
.masthead small {
|
||||
font-size: 75%;
|
||||
font-weight: 400;
|
||||
color: var(--masthead-subtitle);
|
||||
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: var(--post-title-color);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
|
||||
padding: 0;
|
||||
color: var(--heading-code-color);
|
||||
font-size: 95%;
|
||||
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: 0.5rem 1rem 0.5rem 1rem;
|
||||
border-radius: 5px;
|
||||
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 {
|
||||
background-color: var(--background-color-section-bare-bones);
|
||||
border: 2px solid var(--border-color-section-bare-bones);
|
||||
}
|
||||
|
||||
.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: var(--link-color);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.left-to-right, .right-to-left pre {
|
||||
direction: ltr;
|
||||
}
|
||||
63
blog/static/js/edition-3/main.js
Normal file
63
blog/static/js/edition-3/main.js
Normal file
@@ -0,0 +1,63 @@
|
||||
window.onload = function() {
|
||||
var container = document.querySelector('#toc-aside');
|
||||
|
||||
if (container != null) {
|
||||
resize_toc(container);
|
||||
toc_scroll_position(container);
|
||||
window.onscroll = function() { toc_scroll_position(container) };
|
||||
}
|
||||
}
|
||||
|
||||
function resize_toc(container) {
|
||||
var containerHeight = container.clientHeight;
|
||||
|
||||
var resize = function() {
|
||||
if (containerHeight > document.documentElement.clientHeight - 100) {
|
||||
container.classList.add('coarse');
|
||||
} else {
|
||||
container.classList.remove('coarse');
|
||||
}
|
||||
};
|
||||
resize();
|
||||
|
||||
var resizeId;
|
||||
window.onresize = function() {
|
||||
clearTimeout(resizeId);
|
||||
resizeId = setTimeout(resize, 300);
|
||||
};
|
||||
}
|
||||
|
||||
function toc_scroll_position(container) {
|
||||
if (container.offsetParent === null) {
|
||||
// skip computation if ToC is not visible
|
||||
return;
|
||||
}
|
||||
var items = container.querySelectorAll("li")
|
||||
|
||||
// remove active class for all items
|
||||
for (item of container.querySelectorAll("li")) {
|
||||
item.classList.remove("active");
|
||||
}
|
||||
|
||||
// look for active item
|
||||
var site_offset = document.documentElement.scrollTop;
|
||||
var current_toc_item = null;
|
||||
for (item of container.querySelectorAll("li")) {
|
||||
if (item.offsetParent === null) {
|
||||
// skip items that are not visible
|
||||
continue;
|
||||
}
|
||||
var anchor = item.firstElementChild.getAttribute("href");
|
||||
var heading = document.querySelector(anchor);
|
||||
if (heading.offsetTop <= (site_offset + document.documentElement.clientHeight / 3)) {
|
||||
current_toc_item = item;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// set active class for current ToC item
|
||||
if (current_toc_item != null) {
|
||||
current_toc_item.classList.add("active");
|
||||
}
|
||||
}
|
||||
13
blog/templates/edition-3/base.html
Normal file
13
blog/templates/edition-3/base.html
Normal file
@@ -0,0 +1,13 @@
|
||||
{% extends "edition-3/foundation.html" %}
|
||||
|
||||
{% block masthead %}
|
||||
<header class="masthead">
|
||||
<div style="position:relative">
|
||||
<h2 class="masthead-title">
|
||||
<a href="{{ config.base_url | safe }}/edition-3" title="Home">{{ config.title | safe }} (Third Edition - Alpha)</a>
|
||||
</h2>
|
||||
<p><small>{{ config.extra.subtitle | replace(from=" ", to=" ") | safe }}</small></p>
|
||||
{% block header %}{% endblock header %}
|
||||
</div>
|
||||
</header>
|
||||
{% endblock masthead %}
|
||||
22
blog/templates/edition-3/extra.html
Normal file
22
blog/templates/edition-3/extra.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{% extends "edition-3/base.html" %}
|
||||
|
||||
{% import "macros.html" as macros %}
|
||||
|
||||
{% block title %}{{ page.title }} | {{ config.title }}{% endblock title %}
|
||||
|
||||
{% block description -%}
|
||||
{{ page.summary | safe | striptags | truncate(length=150) }}
|
||||
{%- endblock description %}
|
||||
|
||||
{% block main %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
{{ page.content | safe }}
|
||||
{% endblock main %}
|
||||
|
||||
{% block after_main %}
|
||||
<hr>
|
||||
<section>
|
||||
<h2>Comments</h2>
|
||||
{{ macros::utterances() }}
|
||||
</section>
|
||||
{% endblock after_main %}
|
||||
61
blog/templates/edition-3/foundation.html
Normal file
61
blog/templates/edition-3/foundation.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="{% if lang %}{{ lang }}{% else %}{{ config.default_language }}{% endif %}">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
|
||||
<meta name="author" content="{{ config.extra.author.name }}">
|
||||
|
||||
{% if current_url %}
|
||||
<link rel="canonical" href="{{ current_url | safe }}" />
|
||||
{% endif %}
|
||||
<link href="/css/edition-3/main.css" rel="stylesheet">
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS feed for os.phil-opp.com" href="{{ config.base_url | safe }}/rss.xml" />
|
||||
|
||||
<script async src="/js/edition-3/main.js"></script>
|
||||
|
||||
<title>{% block title %}{% endblock title %} (Third Edition - Alpha)</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container content">
|
||||
{% block masthead %}{% endblock masthead %}
|
||||
|
||||
<div>
|
||||
{% block toc_aside %}{% endblock toc_aside %}
|
||||
<main>{% block main %}{% endblock main %}</main>
|
||||
</div>
|
||||
|
||||
<div>{% block after_main %}{% endblock after_main %}</div>
|
||||
|
||||
<footer class="footer">
|
||||
<hr>
|
||||
<small>
|
||||
© <time datetime="2020">2020</time>. All rights reserved.
|
||||
<a href="{{ get_url(path="@/pages/contact.md") | safe }}">Contact</a>
|
||||
</small>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
|
||||
<script>
|
||||
(function(f, a, t, h, o, m){
|
||||
a[h]=a[h]||function(){
|
||||
(a[h].q=a[h].q||[]).push(arguments)
|
||||
};
|
||||
o=f.createElement('script'),
|
||||
m=f.getElementsByTagName('script')[0];
|
||||
o.async=1; o.src=t; o.id='fathom-script';
|
||||
m.parentNode.insertBefore(o,m)
|
||||
})(document, window, '//fathom.phil-opp.com/tracker.js', 'fathom');
|
||||
fathom('set', 'siteId', 'MUXWM');
|
||||
fathom('trackPageview');
|
||||
</script>
|
||||
<!-- / Fathom -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
141
blog/templates/edition-3/index.html
Normal file
141
blog/templates/edition-3/index.html
Normal file
@@ -0,0 +1,141 @@
|
||||
{% extends "edition-3/foundation.html" %}
|
||||
|
||||
{% import "macros.html" as macros %}
|
||||
|
||||
{% block title %}{{ config.title }}{% endblock title %}
|
||||
|
||||
{% block main %}
|
||||
{% set posts_section = get_section(path = "edition-3/posts/_index.md") %}
|
||||
{% set posts = posts_section.pages %}
|
||||
|
||||
<h1>Writing an OS in Rust</h1>
|
||||
<p>{{ config.extra.subtitle | replace(from=" ", to=" ") | safe }}</p>
|
||||
|
||||
<div class="front-page-introduction">
|
||||
<p>
|
||||
This blog series creates a small operating system in the
|
||||
<a href="https://www.rust-lang.org/">Rust programming language</a>. Each post is a small tutorial and includes all
|
||||
needed code, so you can follow along if you like. The source code is also available in the corresponding
|
||||
<a href="https://github.com/phil-opp/blog_os">Github repository</a>.
|
||||
</p>
|
||||
|
||||
<p>Latest post:
|
||||
{% set latest_post = posts|last %}
|
||||
<strong><a href="{{ latest_post.path | safe }}">{{ latest_post.title }}</a></strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<p>In the following posts, we explain how to create an operating system for the <code>x86_64</code> architecture step for step. Starting from scratch, we create a bootable OS kernel, implement basic input/output support, show how to test and debug our kernel, explain virtual memory management, and add support for multitasking and userspace programs.</p>
|
||||
-->
|
||||
|
||||
<div>
|
||||
{%- set chapter = "none" -%}
|
||||
{%- for post in posts -%}
|
||||
{%- if post.extra["chapter"] -%}
|
||||
{%- if post.extra["chapter"] != chapter -%}
|
||||
{# Begin new chapter #}
|
||||
{%- set_global chapter = post.extra["chapter"] -%}
|
||||
</div>
|
||||
|
||||
{% set chapter_slug = chapter | slugify %}
|
||||
<div class="posts {{chapter_slug}}">
|
||||
{% set chapter_page = get_page(path = "edition-3/chapters/" ~ chapter_slug ~ ".md" ) %}
|
||||
{{ chapter_page.content | safe }}
|
||||
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
|
||||
{{ macros::post_link_edition_3(page=post) }}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="after-posts">
|
||||
<h2>Subscribe</h2>
|
||||
<p>Receive notifications about new posts and other major changes! You can either:</p>
|
||||
|
||||
<ul>
|
||||
<li>Subscribe to our <a href="/rss.xml">RSS/Atom Feed</a>,</li>
|
||||
<li>Subscribe to <a href="https://github.com/phil-opp/blog_os/issues/479">this GitHub issue</a>, or</li>
|
||||
<li>Subscribe to our <a href="https://tinyletter.com/phil-opp/">email newsletter</a>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="frontpage-section">
|
||||
<h2>Status Updates</h2>
|
||||
{% set status_updates = get_section(path = "status-update/_index.md") %}
|
||||
<p>{{ status_updates.description }}</p>
|
||||
<ul>
|
||||
{% include "auto/status-updates-truncated.html" %}
|
||||
<li><a href="{{ get_url(path="@/status-update/_index.md") | safe }}"><em>view all »</em></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="frontpage-section">
|
||||
<h2>First Edition</h2>
|
||||
<p>You are currently viewing the second edition of “Writing an OS in Rust”. The first edition is very different in many aspects, for example it builds upon the GRUB bootloader instead of using the `bootloader` crate. In case you're interested in it, it is still available. Note that the first edition is no longer updated and might contain outdated information. <a class="read-more" href="{{ get_url(path = "edition-1") | safe }}"><em>read the first edition »</em></a></p>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<h2>Support Me</h2>
|
||||
{% include "support.html" %}
|
||||
</div>
|
||||
{% endblock main %}
|
||||
|
||||
{% block after_main %}
|
||||
<aside class="page-aside-right">
|
||||
<div class="block" id="language-selector">
|
||||
<h2>Other Languages</h2>
|
||||
<ul>{%- for lang_code in config.languages | map(attribute="code") | concat(with="en") | sort -%}
|
||||
{%- if lang_code != lang -%}
|
||||
<li data-lang-switch-to="{{ lang_code }}" class="">
|
||||
{%- if lang_code == "en" -%}
|
||||
<a href="/">English (original)</a>
|
||||
{%- else -%}
|
||||
<a href="/{{ lang_code }}">{{ trans(key="lang_name", lang = lang_code) }}</a>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{%- endif %}
|
||||
{% endfor %}</ul>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h2>Recent Updates</h2>
|
||||
{% include "auto/recent-updates.html" %}
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<h2>Repository</h2>
|
||||
<div class="gh-repo-box">
|
||||
<div>
|
||||
<svg viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
|
||||
<a href="https://github.com/phil-opp/blog_os" class="repo-link">
|
||||
<span title="blog_os">phil-opp/blog_os</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="subtitle">
|
||||
Writing an OS in Rust
|
||||
</p>
|
||||
|
||||
<p class="stars-forks">
|
||||
<a href="https://github.com/phil-opp/blog_os/stargazers" class="stars">
|
||||
<svg aria-label="stars" viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>
|
||||
{% include "auto/stars.html" %}
|
||||
</a>
|
||||
<a href="https://github.com/phil-opp/blog_os/network/members" class="forks">
|
||||
<svg aria-label="forks" viewBox="0 0 10 16" version="1.1" width="10" height="16" role="img"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
{% include "auto/forks.html" %}
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/sponsors/phil-opp" class="sponsor">
|
||||
<svg viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 2c-.97 0-1.69.42-2.2 1-.51.58-.78.92-.8 1-.02-.08-.28-.42-.8-1-.52-.58-1.17-1-2.2-1-1.632.086-2.954 1.333-3 3 0 .52.09 1.52.67 2.67C1.25 8.82 3.01 10.61 6 13c2.98-2.39 4.77-4.17 5.34-5.33C11.91 6.51 12 5.5 12 5c-.047-1.69-1.342-2.913-3-3z"></path></svg>
|
||||
Sponsor
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{% endblock after_main %}
|
||||
130
blog/templates/edition-3/page.html
Normal file
130
blog/templates/edition-3/page.html
Normal file
@@ -0,0 +1,130 @@
|
||||
{% extends "edition-3/base.html" %}
|
||||
|
||||
{% import "macros.html" as macros %}
|
||||
|
||||
{% block title %}{{ page.title }} | {{ config.title }}{% endblock title %}
|
||||
{% block header %}
|
||||
{% if lang != "en" -%}
|
||||
<aside id="all-posts-link"><a href="{{ get_url(path="@/edition-3/_index.md") }}/{{ lang }}" title="All Posts">« All Posts</a></aside>
|
||||
{%- else -%}
|
||||
<aside id="all-posts-link"><a href="{{ get_url(path="@/edition-3/_index.md") }}" title="All Posts">« All Posts</a></aside>
|
||||
{%- endif %}
|
||||
{% endblock header %}
|
||||
|
||||
{% block description -%}
|
||||
{{ page.summary | safe | striptags | truncate(length=150) }}
|
||||
{%- endblock description %}
|
||||
|
||||
{% block toc_aside %}
|
||||
<aside id="toc-aside">
|
||||
<h2>Table of Contents</h2>
|
||||
<ol>
|
||||
{% for h2 in page.toc %}<li>
|
||||
<a href="#{{h2.id | safe}}">{{ h2.title | safe }}</a>
|
||||
{% if h2.children %}<ol>
|
||||
{% for h3 in h2.children %}<li>
|
||||
<a href="#{{h3.id | safe}}">{{ h3.title | safe }}</a>
|
||||
</li>{% endfor %}
|
||||
</ol>{% endif %}
|
||||
</li>{% endfor %}
|
||||
<li class="toc-comments-link"><a href="#comments">Comments</a></li>
|
||||
</ol>
|
||||
</aside>
|
||||
{% endblock toc_aside %}
|
||||
|
||||
{% block main %}
|
||||
<div class="{% if page.extra.rtl %}right-to-left{% endif %}">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<time datetime="{{ page.date | date(format="%Y-%m-%d") }}" class="post-date">
|
||||
{{ page.date | date(format="%b %d, %Y") }}
|
||||
{% if page.extra.updated %} (updated on {{ page.extra.updated | date(format="%b %d, %Y") }}) {% endif %}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
{% if page.extra.warning %}
|
||||
<div class="warning">
|
||||
{% if page.extra.warning_short %} <b>{{ page.extra.warning_short }}</b> {% endif %}
|
||||
{{ page.extra.warning | markdown(inline=true) | safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{%- if page.lang != "en" %}
|
||||
<div class="warning">
|
||||
{% set translations = page.translations | filter(attribute="lang", value="en") %}
|
||||
{% set original = translations.0 %}
|
||||
<p>
|
||||
<b>Translated Content:</b>
|
||||
This is a community translation of the <strong><a href="{{ original.permalink }}">{{ original.title }}</a></strong> post. It might be incomplete, outdated or contain errors. Please report any issues!
|
||||
</p>
|
||||
{%- if page.extra.translators %}
|
||||
<p>
|
||||
Translation by {% for user in page.extra.translators -%}
|
||||
{%- if not loop.first -%}
|
||||
{%- if loop.last %}, and {% else %}, {% endif -%}
|
||||
{%- endif -%}
|
||||
<a href="https://github.com/{{user}}">@{{user}}</a>
|
||||
{%- endfor %}.
|
||||
</p>
|
||||
{% endif -%}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="{% if page.extra.rtl %}right-to-left{% endif %}">
|
||||
{{ page.content | replace(from="<!-- toc -->", to=macros::toc(toc=page.toc)) | safe }}
|
||||
</div>
|
||||
|
||||
<div class="post-footer-support">
|
||||
<h2>Support Me</h2>
|
||||
{% include "support.html" %}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="PageNavigation">
|
||||
{% if page.lighter %}
|
||||
<a class="prev" href="{{ page.lighter.path | safe }}">« {{ page.lighter.title }}</a>
|
||||
{% endif %}
|
||||
{% if page.heavier %}
|
||||
<a class="next" href="{{ page.heavier.path | safe }}">{{ page.heavier.title }} »</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<section>
|
||||
<h2 id="comments">Comments</h2>
|
||||
|
||||
{%- if page.lang != "en" %}
|
||||
<p>
|
||||
Please leave your comments in English if possible.
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{{ macros::utterances() }}
|
||||
</section>
|
||||
|
||||
<aside class="page-aside-right">
|
||||
{% if page.translations -%}
|
||||
<div class="block" id="language-selector">
|
||||
<h2>Other Languages</h2>
|
||||
<ul>{%- for translation in page.translations | sort(attribute="lang") %}
|
||||
<li data-lang-switch-to="{{ translation.lang }}" class=""><a href="{{ translation.permalink | safe }}">
|
||||
{%- if translation.lang == "en" -%}
|
||||
English (original)
|
||||
{%- else -%}
|
||||
{{ trans(key="lang_name", lang = translation.lang) }}
|
||||
{%- endif -%}
|
||||
</a></li>
|
||||
{% endfor %}</ul>
|
||||
</div>
|
||||
{%- endif %}
|
||||
|
||||
<div class="block">
|
||||
<h2>About Me</h2>
|
||||
<p>
|
||||
I'm a Rust freelancer with a master's degree in computer science. I love systems programming, open source software, and new challenges.
|
||||
</p><p>
|
||||
If you want to work with me, reach out on <a href = "https://www.linkedin.com/in/phil-opp/">LinkedIn</a> or write me at <a href="mailto:job@phil-opp.com">job@phil-opp.com</a>.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{% endblock main %}
|
||||
1
blog/templates/edition-3/raw.html
Normal file
1
blog/templates/edition-3/raw.html
Normal file
@@ -0,0 +1 @@
|
||||
{{ page.content | safe }}
|
||||
@@ -21,6 +21,29 @@
|
||||
</div>
|
||||
{% endmacro post_link %}
|
||||
|
||||
{% macro post_link_edition_3(page) %}
|
||||
<div>
|
||||
{% set translations = page.translations | filter(attribute="lang", value=lang) -%}
|
||||
{%- if translations -%}
|
||||
{%- set post = get_page(path = translations.0.path) -%}
|
||||
{%- else -%}
|
||||
{%- set post = page -%}
|
||||
{%- set not_translated = true -%}
|
||||
{%- endif -%}
|
||||
<h3 class="post-title"><a href="{{ post.path | safe }}">{{ post.title }}</a></h3>
|
||||
<div class="post-summary">
|
||||
{{ post.summary | safe }}
|
||||
<a class="read-more" href="{{ post.path | safe }}"><em>read more »</em></a>
|
||||
|
||||
{%- if lang and not_translated and lang != config.default_language -%}
|
||||
<aside class="no-translation">
|
||||
(This post is not translated yet.)
|
||||
</aside>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro post_link %}
|
||||
|
||||
{% macro utterances() %}
|
||||
<script src="https://utteranc.es/client.js"
|
||||
data-repo="phil-opp/blog_os"
|
||||
|
||||
Reference in New Issue
Block a user