mirror of
https://github.com/phil-opp/blog_os.git
synced 2025-12-16 14:27:49 +00:00
21c5b62c38
This field should list people that contributed to the translation, e.g. by fixing errors. The idea behind this field is to properly acknowledge all contributors, while still keeping the list of the original translation authors separate.
1069 lines
19 KiB
SCSS
1069 lines
19 KiB
SCSS
/*
|
|
* CSS file for the second edition of os.phil-opp.com.
|
|
*
|
|
* Based on `poole`which was designed, built, and released under MIT license by @mdo. See
|
|
* https://github.com/poole/poole.
|
|
*/
|
|
|
|
/*
|
|
* Contents
|
|
*
|
|
* Fonts
|
|
* Body resets
|
|
* Dark/Light Mode
|
|
* Custom type
|
|
* Messages
|
|
* Container
|
|
* Masthead
|
|
* Posts and pages
|
|
* Pagination
|
|
* Reverse layout
|
|
* Themes
|
|
*/
|
|
|
|
/* Fonts */
|
|
|
|
@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;
|
|
}
|
|
|
|
/* Dark/Light Mode */
|
|
|
|
@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;
|
|
--post-title-color: #228;
|
|
}
|
|
|
|
@mixin set-colors-dark {
|
|
--background-color: #252525;
|
|
--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: #b6b6b6;
|
|
--strong-color: #c0c0c0;
|
|
--masthead-subtitle: #8f8f8f;
|
|
--post-title-color: #c8c8ff;
|
|
}
|
|
|
|
body {
|
|
@include set-colors-light();
|
|
}
|
|
|
|
[data-theme="dark"] body {
|
|
@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 */
|
|
[data-theme="light"] body {
|
|
@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: 0.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: 0.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: 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: 0.25em 0.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: 0.5rem;
|
|
font-size: 0.95rem;
|
|
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: 0.5rem 1rem;
|
|
margin: 0.8rem 0;
|
|
color: #7a7a7a;
|
|
border-left: 0.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: 0.25rem 0.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 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: -0.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: 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: 0.3rem;
|
|
color: #999999;
|
|
}
|
|
|
|
.translation_contributors {
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
font-size: 0.9rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.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;
|
|
|
|
.spaced {
|
|
margin-left: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.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: 0.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: 0.5;
|
|
transition: opacity 0.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: 0.2rem;
|
|
}
|
|
|
|
#toc-aside ol {
|
|
margin: 0 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: 0.2rem;
|
|
}
|
|
|
|
aside.page-aside-right ul {
|
|
margin: 0 0 0.2rem 0;
|
|
padding: 0 0 0 1rem;
|
|
}
|
|
|
|
aside.page-aside-right ul li {
|
|
margin-top: 0.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: 0.7rem 1rem;
|
|
margin: 1rem 0.2rem;
|
|
border: 2px solid #6ad46a;
|
|
border-radius: 5px;
|
|
background-color: #99ff991f;
|
|
}
|
|
|
|
div.note p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
div.warning {
|
|
padding: 0.7rem 1rem;
|
|
margin: 1rem 0.2rem;
|
|
border: 2px solid orange;
|
|
border-radius: 5px;
|
|
background-color: #ffa50022;
|
|
}
|
|
|
|
div.warning p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
div.warning h2 {
|
|
margin-top: 0rem;
|
|
}
|
|
|
|
form.subscribe {
|
|
margin: 1rem;
|
|
}
|
|
|
|
div.subscribe-fields {
|
|
display: flex;
|
|
}
|
|
|
|
form.subscribe input {
|
|
padding: 0.5rem;
|
|
border: 1px solid #e5e5e5;
|
|
}
|
|
|
|
form.subscribe input[type="email"] {
|
|
flex: 1;
|
|
}
|
|
|
|
form.subscribe input[type="submit"] {
|
|
padding: 0.25rem 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Asides */
|
|
aside.post_aside {
|
|
font-style: italic;
|
|
padding: 0rem 1rem 0rem;
|
|
margin: 0.8rem 0;
|
|
border-left: 0.1rem solid #e5e5e5;
|
|
border-right: 0.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: 0.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: 0.5rem;
|
|
}
|
|
|
|
.giscus {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
img {
|
|
background-color: white;
|
|
}
|
|
|
|
/* Manual switch between dark and light mode */
|
|
|
|
.theme-switch {
|
|
margin-bottom: 1rem;
|
|
|
|
@media (min-width: 80rem) {
|
|
position: fixed;
|
|
left: 2rem;
|
|
bottom: 2rem;
|
|
margin-bottom: 0rem;
|
|
}
|
|
}
|
|
|
|
.light-switch {
|
|
@mixin light-switch-light {
|
|
// icon: https://icons.getbootstrap.com/icons/moon-fill/ (MIT licensed)
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004' class='bi bi-moon' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.53 10.53a7 7 0 0 1-9.058-9.058A7.003 7.003 0 0 0 8 15a7.002 7.002 0 0 0 6.53-4.47z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
@mixin light-switch-dark {
|
|
// icon: https://icons.getbootstrap.com/icons/brightness-high-fill/ (MIT licensed)
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9' class='bi bi-brightness-high-fill' viewBox='0 0 16 16'%3E%3Cpath d='M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
display: inline-block;
|
|
@include light-switch-light();
|
|
|
|
background-repeat: no-repeat;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
|
|
&:hover {
|
|
transform: scale(1.3);
|
|
transition: 200ms ease-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-theme="dark"] & {
|
|
@include light-switch-dark();
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
@include light-switch-dark();
|
|
|
|
[data-theme="light"] & {
|
|
@include light-switch-light();
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Clear theme override and go back to system theme */
|
|
|
|
.light-switch-reset {
|
|
@mixin light-switch-reset-light {
|
|
// icon: https://icons.getbootstrap.com/icons/x-circle-fill/ (MIT licensed)
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
@mixin light-switch-reset-dark {
|
|
// icon: https://icons.getbootstrap.com/icons/x-circle-fill/ (MIT licensed)
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
@include light-switch-reset-light();
|
|
vertical-align: bottom;
|
|
margin-left: 0.5rem;
|
|
background-repeat: no-repeat;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
|
|
display: none;
|
|
[data-theme="light"] & {
|
|
display: inline-block;
|
|
}
|
|
[data-theme="dark"] & {
|
|
@include light-switch-reset-dark();
|
|
display: inline-block;
|
|
}
|
|
|
|
@media (min-width: 80rem) {
|
|
position: fixed;
|
|
left: 4.5rem;
|
|
bottom: 2rem;
|
|
}
|
|
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
transition: 200ms ease-out;
|
|
opacity: 1;
|
|
}
|
|
}
|