mirror of
https://github.com/phil-opp/blog_os.git
synced 2025-12-16 22:37:49 +00:00
The 'All Posts' link used to overlap with the table of contents at the end of a post. This occured because the ToC is sticky to the `main` block, so it scrolled up before the `comments` section. The 'All Post' link, however, is fixed, so it does not scroll up. This commit fixes the issue by moving the comment block to the main block (from the after_main block). This way, the ToC stays visible in the comment section. We also add the comment section to the ToC.
432 lines
6.0 KiB
CSS
432 lines
6.0 KiB
CSS
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
|
|
padding: 0;
|
|
color: #a0565c;
|
|
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: 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.first-edition {
|
|
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;
|
|
}
|
|
|
|
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 #99ff99;
|
|
border-radius: 5px;
|
|
background-color: #99ff0022;
|
|
}
|
|
|
|
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;
|
|
}
|