-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
570eebc
commit c097d9f
Showing
7 changed files
with
311 additions
and
294 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,147 @@ | ||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Slabo+27px&display=swap'); | ||
|
||
html, body { | ||
margin: 0; | ||
height: 100%; | ||
font-size: 18px; | ||
} | ||
|
||
* { | ||
box-sizing: border-box; | ||
} | ||
|
||
header, footer { | ||
background-color: #ed79a9; | ||
color: #ffffff; | ||
font-family: 'Slabo 27px', serif; | ||
} | ||
h1 { | ||
margin: 0; | ||
} | ||
|
||
h1 a { | ||
color: inherit !important; | ||
} | ||
|
||
.media { | ||
position: absolute; | ||
left: 100%; | ||
margin-left: 20rem; | ||
margin-top: 0.25rem; | ||
} | ||
.media img { | ||
height: 2rem; | ||
} | ||
.media a { | ||
text-decoration: none !important; | ||
} | ||
|
||
header, footer, section { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
footer h2 { | ||
opacity: 0.8; | ||
color: inherit !important; | ||
} | ||
|
||
section { | ||
font-family: 'Roboto', sans-serif; | ||
} | ||
|
||
.viewport-container { | ||
width: 40rem; | ||
margin-right: 15rem; | ||
max-width: 100%; | ||
padding: 1em; | ||
position: relative; | ||
} | ||
|
||
h2 { | ||
margin: 0; | ||
color: #8d00d9; | ||
} | ||
|
||
h3 { | ||
position: absolute; | ||
right: 100%; | ||
font-size: 1rem; | ||
font-weight: 700; | ||
color: #8d00d9; | ||
margin: 0; | ||
margin-top: 1rem; | ||
margin-right: 0.5rem; | ||
width: 100%; | ||
text-align: right; | ||
} | ||
|
||
s { | ||
opacity: 0.5; | ||
} | ||
|
||
a { | ||
color: #ff1994; | ||
text-decoration: none; | ||
} | ||
a:hover, a:active, a:focus { | ||
text-decoration: underline; | ||
} | ||
|
||
li { | ||
margin-bottom: 0.25rem; | ||
} | ||
|
||
.only-dark { | ||
display: none; | ||
} | ||
|
||
@media all and (prefers-color-scheme: dark) { | ||
header, footer { | ||
background-color: #9c2254; | ||
} | ||
section { | ||
background-color: #160117; | ||
color: #fee8ff; | ||
} | ||
h2, h3, code, .katex { | ||
color: #cd91ed; | ||
} | ||
a { | ||
color: #f765b4; | ||
} | ||
aside { | ||
background-color: #4e2554; | ||
} | ||
blockquote { | ||
border-left-color: #9c2254; | ||
background-color: #4e2554; | ||
} | ||
pre { | ||
background-color: #00000080; | ||
} | ||
pre code { | ||
color: #ffffff; | ||
} | ||
.expansible-code > label { | ||
background-image: linear-gradient(to bottom, transparent, #000000); | ||
} | ||
.only-light { | ||
display: none; | ||
} | ||
.only-dark { | ||
display: block; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 1300px) { | ||
h3 { | ||
position: static; | ||
text-align: left; | ||
} | ||
|
||
.viewport-container { | ||
margin-right: 0; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,152 @@ | ||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap'); | ||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); | ||
|
||
@import "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark.min.css" screen and (prefers-color-scheme: dark); | ||
@import "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/base16/atelier-cave-light.min.css" screen and (prefers-color-scheme: light); | ||
|
||
time { | ||
opacity: 0.8; | ||
} | ||
|
||
h3 { | ||
margin-top: 2rem; | ||
} | ||
h3 + * { | ||
margin-top: 3rem; | ||
} | ||
|
||
code { | ||
font-family: 'Noto Sans', sans-serif; | ||
color: #8d00d9; | ||
} | ||
.katex { | ||
font-size: 1.1em; | ||
line-height: 0; | ||
color: #8d00d9; | ||
} | ||
|
||
pre { | ||
margin-left: -7rem; | ||
width: 52rem; | ||
font-size: 0.85rem; | ||
padding: 0.75rem; | ||
overflow: auto; | ||
background-color: #00000010; | ||
} | ||
pre code { | ||
font-family: 'Roboto Mono', monospace; | ||
color: #000000; | ||
} | ||
|
||
.expansible-code { | ||
position: relative; | ||
} | ||
.expansible-code > input { | ||
display: none; | ||
} | ||
.expansible-code > .highlighted { | ||
height: 20em; | ||
overflow: hidden; | ||
} | ||
.expansible-code > label { | ||
position: absolute; | ||
left: -0.75rem; | ||
top: -0.75rem; | ||
width: calc(100% + 1.5rem); | ||
height: calc(100% + 1.5rem); | ||
padding-block: 1rem; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: flex-end; | ||
background-image: linear-gradient(to bottom, transparent, #d0d0d0); | ||
font-family: Roboto, sans-serif; | ||
font-size: 1rem; | ||
cursor: pointer; | ||
} | ||
.expansible-code > label::before { | ||
content: "Expand"; | ||
} | ||
.expansible-code > input:checked + .highlighted { | ||
height: auto; | ||
} | ||
.expansible-code > input:checked ~ label { | ||
display: none; | ||
} | ||
|
||
.diagram { | ||
margin-top: 1rem; | ||
margin-bottom: 1rem; | ||
} | ||
.diagram svg { | ||
margin-left: -7rem; | ||
width: 52rem; | ||
height: auto; | ||
} | ||
|
||
blockquote { | ||
border-left: 0.375rem solid #ed79a9; | ||
background-color: #f2befa; | ||
margin: 0; | ||
padding: 0.5rem; | ||
} | ||
blockquote > :first-child { | ||
margin-top: 0; | ||
} | ||
blockquote > :last-child { | ||
margin-bottom: 0; | ||
} | ||
|
||
hr { | ||
visibility: hidden; | ||
margin-top: 2rem; | ||
} | ||
|
||
aside { | ||
position: absolute; | ||
left: 100%; | ||
margin-top: -0.5rem; | ||
width: 15rem; | ||
padding: 0.5rem; | ||
background-color: #f2befa; | ||
z-index: 1; | ||
} | ||
aside > :first-child { | ||
margin-top: 0; | ||
} | ||
aside > :last-child { | ||
margin-bottom: 0; | ||
} | ||
|
||
@media screen and (max-width: 1300px) { | ||
h3 + * { | ||
margin-top: 1rem; | ||
} | ||
|
||
.aside-group { | ||
display: flex; | ||
flex-direction: column; | ||
} | ||
.aside-group > :nth-child(2) { | ||
margin-top: 0; | ||
} | ||
.aside-group > :last-child { | ||
margin-bottom: 0; | ||
} | ||
.aside-group > aside { | ||
order: 1000; | ||
margin-top: 1rem; | ||
} | ||
|
||
aside { | ||
position: static; | ||
width: 100%; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 1000px) { | ||
pre, .diagram svg { | ||
margin-left: 0; | ||
width: 100%; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,24 +5,21 @@ | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<title>{{ title }} | purplesyringa's blog</title> | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous"> | ||
<link rel="stylesheet" type="text/css" href="../../home.css"> | ||
<style> | ||
@import "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark.min.css" screen and (prefers-color-scheme: dark); | ||
@import "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/base16/atelier-cave-light.min.css" screen and (prefers-color-scheme: light); | ||
</style> | ||
<link rel="stylesheet" type="text/css" href="../../all.css"> | ||
<link rel="stylesheet" type="text/css" href="../../blog.css"> | ||
</head> | ||
<body> | ||
<header> | ||
<div class="viewport-container"> | ||
<div class="media"> | ||
<a href="https://github.com/purplesyringa"><i class="nf nf-fa-github"></i></a> | ||
<a href="https://github.com/purplesyringa"><img src="../../images/github-mark-white.svg"></a> | ||
</div> | ||
<h1><a href="/">purplesyringa</a></h1> | ||
</div> | ||
</header> | ||
|
||
<section> | ||
<div class="viewport-container blogpost"> | ||
<div class="viewport-container"> | ||
<h2>{{ title }}</h2> | ||
<time>{{ time }}</time> | ||
|
||
|
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.