parent
8071fdf37a
commit
a3f7c625c2
GPG Key ID:
11BBCFC65FC9F401
@ -0,0 +1,17 @@ |
||||
--- |
||||
title: Page not found |
||||
layout: null |
||||
--- |
||||
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
{% include header.html %} |
||||
<link rel="stylesheet" href="/css/404.css" /> |
||||
</head> |
||||
|
||||
<body> |
||||
<h1>This page was lost in the vampire castle...</h1> |
||||
<a href="/">Return</a> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,10 @@ |
||||
<meta charset="UTF-8" /> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
|
||||
<link rel="stylesheet" href="/css/common.css" /> |
||||
<link rel="shortcut icon" href="/assets/favicon.png" type="image/x-icon" /> |
||||
|
||||
<meta name="author" content="Agatha" /> |
||||
<meta name="description" content="{{ page.title }}" /> |
||||
<meta property="og:image" itemprop="image" content="/assets/favicon.png" /> |
||||
@ -0,0 +1,63 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
{% include header.html %} |
||||
<style> |
||||
@import "/css/paramount-dark.css"; |
||||
</style> |
||||
<style> |
||||
@import "/css/paramount-light.css" (prefers-color-scheme: light); |
||||
</style> |
||||
<link rel="stylesheet" href="/css/page.css" /> |
||||
<link |
||||
rel="stylesheet" |
||||
href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css" |
||||
integrity="sha256-TThEtR+XalhWKkfF383YLOrI50NGNeIqrzS+q08afrY=" |
||||
media="print" |
||||
onload="this.media='all'" |
||||
crossorigin="anonymous" |
||||
/> |
||||
|
||||
<title>{{ page.title }}</title> |
||||
</head> |
||||
|
||||
<body> |
||||
<div class="vertical"> |
||||
<div class="contents"> |
||||
{% if page.title%} |
||||
<h1 id="mainheader">{{page.title}}</h1> |
||||
{% endif %} {{ content | safe | inject_anchors }} |
||||
</div> |
||||
<footer> |
||||
<p> |
||||
Agatha Valentine Lovelace<br />{{ page.date | date_to_string: |
||||
"ordinal", "US" }} |
||||
</p> |
||||
<div> |
||||
<a href="/">Main Page</a> |
||||
<a href="/pages">All Pages</a> |
||||
</div> |
||||
</footer> |
||||
</div> |
||||
<div class="side"> |
||||
{% capture toc %} {% toc %} {% endcapture %} |
||||
<!-- Only show table of contents if not empty --> |
||||
{% if toc contains "toc-entry" %} |
||||
<div class="toc-full"> |
||||
<p><i>Contents</i></p> |
||||
{{ toc }} |
||||
</div> |
||||
{% endif %} |
||||
<div class="navigation"> |
||||
<p><i>Other Pages</i></p> |
||||
<ul> |
||||
{% for page in site.pages %} {% if page.hide != true %} |
||||
<li> |
||||
<a href="{{ page.url }}">{{ page.title }}</a> |
||||
</li> |
||||
{% endif %} {% endfor %} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,28 @@ |
||||
--- |
||||
title: Page List |
||||
layout: null |
||||
hide: true |
||||
permalink: /:collection/index.html |
||||
--- |
||||
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
{% include header.html %} |
||||
<link rel="stylesheet" href="/css/pageindex.css" /> |
||||
<title>Pages</title> |
||||
</head> |
||||
|
||||
<body> |
||||
<h1>Page List</h1> |
||||
|
||||
<ul> |
||||
{% for page in site.pages %} {% if page.hide != true %} {% if page.title |
||||
!= "Page List"%} |
||||
<li> |
||||
<a href="{{ page.url }}">{{ page.title }}</a> |
||||
</li> |
||||
{% endif %} {% endif %} {% endfor %} |
||||
</ul> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,71 @@ |
||||
# Copyright 2018 Shane F. Carr |
||||
# |
||||
# Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
# of this software and associated documentation files (the "Software"), to deal |
||||
# in the Software without restriction, including without limitation the rights |
||||
# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
# copies of the Software, and to permit persons to whom the Software is |
||||
# furnished to do so, subject to the following conditions: |
||||
# |
||||
# The above copyright notice and this permission notice shall be included in |
||||
# all copies or substantial portions of the Software. |
||||
# |
||||
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
# SOFTWARE. |
||||
|
||||
require "digest" |
||||
require "fileutils" |
||||
require "image_optim" |
||||
require "yaml" |
||||
|
||||
Jekyll::Hooks.register :site, :pre_render do |site| |
||||
# Load configuration options |
||||
config = YAML::load_file("_config.yml") |
||||
config = config["jekyll_image_optim"] || {} |
||||
image_optim_options = config["image_optim"] || {} |
||||
cache_relative_dir = config["cache_dir"] || ".jekyll-image-optim-cache" |
||||
cache_dir = File.join(site.source, cache_relative_dir) |
||||
out_dir = File.join(cache_dir, "out") |
||||
index_yaml_path = File.join(cache_dir, "index.yml") |
||||
FileUtils.mkdir_p(cache_dir) |
||||
FileUtils.mkdir_p(out_dir) |
||||
FileUtils.touch(index_yaml_path) |
||||
cache_index = YAML::load_file(index_yaml_path) || {} |
||||
|
||||
# Exclude the cache directory from the jekyll watch |
||||
site.exclude << cache_relative_dir |
||||
|
||||
# Process the images |
||||
image_optim = ImageOptim.new(image_optim_options) |
||||
site.static_files.map! do |static_file| |
||||
if not image_optim.optimizable?(static_file.path) |
||||
# Not an image file; no change necessary |
||||
next static_file |
||||
end |
||||
|
||||
relative_path = static_file.relative_path |
||||
new_path = File.join(out_dir, relative_path) |
||||
cc = cache_index[relative_path] |
||||
image_md5 = Digest::MD5.file(static_file.path).hexdigest |
||||
|
||||
if not cc or not File.exists?(new_path) or cc[:md5] != image_md5 or cc[:options] != image_optim_options |
||||
# Need to compute the optimized image |
||||
puts "Optimizing image: #{relative_path}" |
||||
FileUtils.mkdir_p(File.dirname(new_path)) |
||||
FileUtils.cp(static_file.path, new_path) |
||||
image_optim.optimize_image!(new_path) |
||||
cache_index[relative_path] = { md5: image_md5, options: image_optim_options } |
||||
|
||||
# Save the cache index file (do this for every image to allow restart after an interrupt) |
||||
File.open(index_yaml_path, "w") { |f| f.write(cache_index.to_yaml) } |
||||
end |
||||
|
||||
# Replace the Jekyll::StaticFile to point to the new location |
||||
next Jekyll::StaticFile.new(site, out_dir, File.dirname(relative_path), File.basename(relative_path)) |
||||
end |
||||
end |
||||
@ -0,0 +1,12 @@ |
||||
# https://github.com/gettalong/kramdown/issues/98#issuecomment-495169800 |
||||
|
||||
require 'kramdown/converter/html' |
||||
|
||||
module StandaloneImages |
||||
def convert_p(el, indent) |
||||
return super unless el.children.size == 1 && (el.children.first.type == :img || (el.children.first.type == :html_element && el.children.first.value == "img")) |
||||
convert(el.children.first, indent) |
||||
end |
||||
end |
||||
|
||||
Kramdown::Converter::Html.prepend StandaloneImages |
||||
|
Before Width: | Height: | Size: 867 KiB After Width: | Height: | Size: 879 KiB |
|
After Width: | Height: | Size: 824 KiB |
|
After Width: | Height: | Size: 518 B |
|
After Width: | Height: | Size: 517 B |
|
Before Width: | Height: | Size: 290 KiB After Width: | Height: | Size: 296 KiB |
|
After Width: | Height: | Size: 418 KiB |
@ -0,0 +1,76 @@ |
||||
body { |
||||
padding-left: 5em; |
||||
padding-top: 5em; |
||||
max-width: 70%; |
||||
} |
||||
|
||||
h1 { |
||||
color: var(--accent-dark); |
||||
font-family: "Cinzel Decorative"; |
||||
font-size: 40px; |
||||
font-weight: normal; |
||||
line-height: 1; |
||||
|
||||
max-width: 600px; |
||||
|
||||
padding-bottom: 25px; |
||||
margin-bottom: 30px; |
||||
|
||||
border-bottom: 1px solid var(--accent); |
||||
} |
||||
|
||||
h1::first-letter { |
||||
font-size: 55px; |
||||
} |
||||
|
||||
a { |
||||
font-family: "Crimson"; |
||||
font-weight: normal; |
||||
text-decoration: none; |
||||
font-size: 1.8em; |
||||
|
||||
color: var(--url); |
||||
} |
||||
|
||||
a::before { |
||||
content: "◆"; |
||||
font-size: 0.5em; |
||||
padding-right: 3px; |
||||
position: relative; |
||||
bottom: 4px; |
||||
} |
||||
|
||||
a:hover { |
||||
animation: glow 0.2s ease-in-out both; |
||||
} |
||||
html { |
||||
height: 100%; |
||||
box-shadow: inset 0 0 100px #02020470; |
||||
} |
||||
|
||||
* { |
||||
filter: drop-shadow(20px 0 3px rgba(95, 95, 153, 0.36)); |
||||
} |
||||
|
||||
/* animations */ |
||||
|
||||
@keyframes glow { |
||||
from { |
||||
font-weight: normal; |
||||
} |
||||
|
||||
to { |
||||
filter: drop-shadow(0.5px 0.5px 2px); |
||||
} |
||||
} |
||||
|
||||
/* small screens */ |
||||
|
||||
@media (max-width: 600px) { |
||||
body { |
||||
padding-top: 5%; |
||||
padding-left: 5%; |
||||
padding-right: 5%; |
||||
max-width: unset; |
||||
} |
||||
} |
||||
@ -1,71 +1,79 @@ |
||||
/* Fonts */ |
||||
|
||||
@font-face { |
||||
font-family: "Cinzel Decorative"; |
||||
src: url(../fonts/CinzelDecorative-Regular.ttf); |
||||
font-weight: normal; |
||||
font-family: "Cinzel Decorative"; |
||||
src: url(../fonts/CinzelDecorative-Regular.ttf); |
||||
font-weight: normal; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: "Cinzel Decorative"; |
||||
src: url(../fonts/CinzelDecorative-Bold.ttf); |
||||
font-weight: bold; |
||||
font-family: "Cinzel Decorative"; |
||||
src: url(../fonts/CinzelDecorative-Bold.ttf); |
||||
font-weight: bold; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: "Crimson"; |
||||
src: url(../fonts/Crimson-Roman.otf); |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
font-family: "Crimson"; |
||||
src: url(../fonts/Crimson-Roman.otf); |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: "Crimson"; |
||||
src: url(../fonts/Crimson-Bold.otf); |
||||
font-weight: bold; |
||||
font-style: normal; |
||||
font-family: "Crimson"; |
||||
src: url(../fonts/Crimson-Bold.otf); |
||||
font-weight: bold; |
||||
font-style: normal; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: "Crimson"; |
||||
src: url(../fonts/Crimson-Italic.otf); |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
font-family: "Crimson"; |
||||
src: url(../fonts/Crimson-Italic.otf); |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: "Crimson"; |
||||
src: url(../fonts/Crimson-BoldItalic.otf); |
||||
font-weight: bold; |
||||
font-style: italic; |
||||
font-family: "Crimson"; |
||||
src: url(../fonts/Crimson-BoldItalic.otf); |
||||
font-weight: bold; |
||||
font-style: italic; |
||||
} |
||||
|
||||
/* Colors */ |
||||
|
||||
html { |
||||
scrollbar-color: var(--accent) var(--bg); |
||||
background: url(../assets/bg-noise-dark.png) repeat; |
||||
background-color: var(--bg); |
||||
} |
||||
|
||||
:root { |
||||
--bg: #19121F; |
||||
--accent: #9AA6CB; |
||||
--accent-dark: #747E9D; |
||||
--text: #D5D6E8; |
||||
--url: #F5E8C9; |
||||
--bg: #16121f; |
||||
--bg-code: #110e18; |
||||
--accent: #9aa6cb; |
||||
--accent-dark: #747e9d; |
||||
--text: #d5d6e8; |
||||
--url: var(--accent); |
||||
} |
||||
|
||||
@media (prefers-color-scheme: light) { |
||||
:root { |
||||
|
||||
} |
||||
|
||||
html { |
||||
:root { |
||||
--bg: #b6b7d4; |
||||
--bg-code: #a5a6c5; |
||||
--accent: #555a84; |
||||
--accent-dark: #464b73; |
||||
--text: #16121f; |
||||
--url: var(--accent); |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
html { |
||||
background: url(../assets/bg-noise-dark.png) repeat; |
||||
html { |
||||
background: url(../assets/bg-noise-light.png); |
||||
background-color: var(--bg); |
||||
} |
||||
} |
||||
|
||||
::selection { |
||||
color: var(--bg); |
||||
background: var(--accent); |
||||
} |
||||
color: var(--bg); |
||||
background: var(--accent); |
||||
} |
||||
|
||||
@ -1,185 +1,187 @@ |
||||
.centered { |
||||
position: absolute; |
||||
display: flex; |
||||
left: 50%; |
||||
top: 50%; |
||||
-webkit-transform: translate(-50%, -50%); |
||||
transform: translate(-50%, -50%); |
||||
position: absolute; |
||||
display: flex; |
||||
left: 50%; |
||||
top: 50%; |
||||
-webkit-transform: translate(-50%, -50%); |
||||
transform: translate(-50%, -50%); |
||||
} |
||||
|
||||
.text { |
||||
margin-top: 5em; |
||||
width: 400px; |
||||
margin-top: 5em; |
||||
width: 400px; |
||||
} |
||||
|
||||
h1 { |
||||
font-family: 'Cinzel Decorative'; |
||||
color: var(--accent); |
||||
width: min-content; |
||||
font-size: 55px; |
||||
font-weight: normal; |
||||
line-height: 1; |
||||
margin-bottom: 0; |
||||
font-family: "Cinzel Decorative"; |
||||
color: var(--accent); |
||||
width: min-content; |
||||
font-size: 55px; |
||||
font-weight: normal; |
||||
line-height: 1; |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
h1 span { |
||||
font-size: 75px; |
||||
font-size: 75px; |
||||
} |
||||
|
||||
h3, p { |
||||
font-family: 'Crimson'; |
||||
font-weight: normal; |
||||
h3, |
||||
p { |
||||
font-family: "Crimson"; |
||||
font-weight: normal; |
||||
} |
||||
|
||||
h3 { |
||||
color: var(--accent-dark); |
||||
font-size: 30px; |
||||
margin-top: 0.2em; |
||||
color: var(--accent-dark); |
||||
font-size: 30px; |
||||
margin-top: 0.2em; |
||||
} |
||||
|
||||
p { |
||||
margin-top: 2em; |
||||
font-size: 25px; |
||||
line-height: 1.1; |
||||
color: var(--text); |
||||
margin-top: 2em; |
||||
font-size: 25px; |
||||
line-height: 1.1; |
||||
color: var(--text); |
||||
} |
||||
|
||||
abbr { |
||||
text-decoration: none; |
||||
font-style: italic; |
||||
animation: blink 5s linear infinite; |
||||
text-decoration: none; |
||||
font-style: italic; |
||||
animation: blink 5s linear infinite; |
||||
} |
||||
|
||||
picture img { |
||||
height: 700px; |
||||
height: 700px; |
||||
} |
||||
|
||||
/* Links menu */ |
||||
|
||||
details { |
||||
margin-top: 1.5em; |
||||
width: max-content; |
||||
margin-top: 1.5em; |
||||
width: max-content; |
||||
} |
||||
|
||||
details a { |
||||
opacity: 0; |
||||
margin: 0 8px; |
||||
opacity: 0; |
||||
margin: 0 8px; |
||||
} |
||||
|
||||
details * { |
||||
display: inline-block; |
||||
display: inline-block; |
||||
} |
||||
|
||||
details[open] a { |
||||
opacity: 100; |
||||
transition: opacity 0.2s ease-in-out; |
||||
opacity: 100; |
||||
transition: opacity 0.2s ease-in-out; |
||||
} |
||||
|
||||
details, details * { |
||||
font-family: 'Crimson'; |
||||
font-weight: normal; |
||||
font-size: 26px; |
||||
text-decoration: none; |
||||
details, |
||||
details * { |
||||
font-family: "Crimson"; |
||||
font-weight: normal; |
||||
font-size: 26px; |
||||
text-decoration: none; |
||||
|
||||
color: var(--url); |
||||
color: var(--url); |
||||
|
||||
height: min-content; |
||||
cursor: pointer; |
||||
user-select: none; |
||||
height: min-content; |
||||
cursor: pointer; |
||||
user-select: none; |
||||
} |
||||
|
||||
details summary::before { |
||||
content: '⦿ '; |
||||
filter: drop-shadow(0 0 5px); |
||||
content: "⦿ "; |
||||
filter: drop-shadow(0 0 5px); |
||||
} |
||||
|
||||
details[open] > summary { |
||||
visibility: hidden; |
||||
font-size: 0; |
||||
visibility: hidden; |
||||
font-size: 0; |
||||
} |
||||
|
||||
details[open] > summary::after { |
||||
content: '←'; |
||||
visibility: visible; |
||||
font-size: 26px; |
||||
content: "←"; |
||||
visibility: visible; |
||||
font-size: 26px; |
||||
|
||||
position: relative; |
||||
top: -2px; |
||||
position: relative; |
||||
top: -2px; |
||||
} |
||||
|
||||
details *:hover { |
||||
animation: glow 0.2s ease-in-out both; |
||||
animation: glow 0.2s ease-in-out both; |
||||
} |
||||
|
||||
/* animations */ |
||||
|
||||
@keyframes glow { |
||||
from { |
||||
font-weight: normal; |
||||
} |
||||
to { |
||||
filter: drop-shadow(0.5px 0.5px 2px) ; |
||||
} |
||||
from { |
||||
font-weight: normal; |
||||
} |
||||
to { |
||||
filter: drop-shadow(0.5px 0.5px 2px); |
||||
} |
||||
} |
||||
|
||||
@keyframes blink { |
||||
80% { |
||||
filter: drop-shadow(0 0 1px) opacity(80%); |
||||
} |
||||
80% { |
||||
filter: drop-shadow(0 0 1px) opacity(80%); |
||||
} |
||||
} |
||||
|
||||
/* mobile screens */ |
||||
|
||||
@media (max-width: 880px) { |
||||
.centered { |
||||
display: block; |
||||
top: -20px; |
||||
-webkit-transform: translate(-50%, 0); |
||||
transform: translate(-50%, 0); |
||||
} |
||||
|
||||
.text { |
||||
margin-top: unset; |
||||
position: absolute; |
||||
left: 50%; |
||||
-webkit-transform: translate(-50%, -60%); |
||||
transform: translate(-50%, -60%); |
||||
|
||||
width: 320px; |
||||
padding-bottom: 4em; |
||||
} |
||||
h1 { |
||||
filter: drop-shadow(5px 5px 5px var(--bg)); |
||||
} |
||||
.centered { |
||||
display: block; |
||||
top: -20px; |
||||
-webkit-transform: translate(-50%, 0); |
||||
transform: translate(-50%, 0); |
||||
} |
||||
|
||||
.text { |
||||
margin-top: unset; |
||||
position: absolute; |
||||
left: 50%; |
||||
-webkit-transform: translate(-50%, -60%); |
||||
transform: translate(-50%, -60%); |
||||
|
||||
width: 320px; |
||||
padding-bottom: 4em; |
||||
} |
||||
h1 { |
||||
filter: drop-shadow(5px 5px 5px var(--bg)); |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 500px) { |
||||
picture img { |
||||
max-width: 100vw; |
||||
height: auto; |
||||
} |
||||
picture img { |
||||
max-width: 100vw; |
||||
height: auto; |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 360px) { |
||||
.text { |
||||
position: unset; |
||||
left: unset; |
||||
-webkit-transform: translate(0, -60%); |
||||
transform: translate(0, -60%); |
||||
|
||||
width: fit-content; |
||||
margin-left: 2em; |
||||
} |
||||
|
||||
h1 { |
||||
font-size: 40px; |
||||
} |
||||
|
||||
h1 span { |
||||
font-size: 60px; |
||||
} |
||||
|
||||
details { |
||||
width: fit-content; |
||||
} |
||||
} |
||||
.text { |
||||
position: unset; |
||||
left: unset; |
||||
-webkit-transform: translate(0, -60%); |
||||
transform: translate(0, -60%); |
||||
|
||||
width: fit-content; |
||||
margin-left: 2em; |
||||
} |
||||
|
||||
h1 { |
||||
font-size: 40px; |
||||
} |
||||
|
||||
h1 span { |
||||
font-size: 60px; |
||||
} |
||||
|
||||
details { |
||||
width: fit-content; |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,295 @@ |
||||
@font-face { |
||||
font-family: "Iosevka Gothic"; |
||||
src: url(../fonts/iosevka-gothic-regular.woff2); |
||||
font-weight: normal; |
||||
} |
||||
|
||||
body { |
||||
position: absolute; |
||||
display: flex; |
||||
left: 50%; |
||||
-webkit-transform: translate(-50%, 0); |
||||
transform: translate(-50%, 0); |
||||
|
||||
padding-top: 2em; |
||||
padding-bottom: 2em; |
||||
} |
||||
|
||||
/* headers */ |
||||
|
||||
#mainheader { |
||||
font-size: 2.6em; |
||||
} |
||||
|
||||
#mainheader::first-letter { |
||||
font-size: 1.2em; |
||||
} |
||||
|
||||
h1, |
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5, |
||||
h6 { |
||||
color: var(--accent); |
||||
font-family: "Cinzel Decorative"; |
||||
font-weight: normal; |
||||
line-height: 1; |
||||
} |
||||
|
||||
h1 { |
||||
font-size: 35px; |
||||
} |
||||
|
||||
h1::first-letter { |
||||
font-size: 40px; |
||||
} |
||||
|
||||
h2 { |
||||
font-size: 25px; |
||||
} |
||||
|
||||
h3 { |
||||
font-size: 20px; |
||||
} |
||||
|
||||
/* common text */ |
||||
|
||||
p, |
||||
ul, |
||||
ol, |
||||
table { |
||||
color: var(--text); |
||||
font-family: "Crimson", serif; |
||||
font-size: 1.2rem; |
||||
max-width: 1000px; |
||||
} |
||||
|
||||
strong { |
||||
font-weight: bolder; |
||||
text-shadow: 0 0.5px; |
||||
} |
||||
|
||||
/* why'd you leave the keys upon the table */ |
||||
|
||||
table { |
||||
border-collapse: collapse; |
||||
max-width: 700px; |
||||
padding: 5px; |
||||
border: 2px solid var(--border); |
||||
} |
||||
|
||||
td { |
||||
border: 2px solid var(--border); |
||||
padding: 0 5px; |
||||
} |
||||
|
||||
/* code blocks */ |
||||
|
||||
code * { |
||||
font-size: 1rem; |
||||
font-family: "Iosevka Gothic"; |
||||
} |
||||
|
||||
:not(pre) > code { |
||||
padding: 2px; |
||||
border-radius: 3px; |
||||
font-family: "Iosevka Gothic"; |
||||
} |
||||
|
||||
img { |
||||
display: block; |
||||
margin: 5px auto; |
||||
border-radius: 2px; |
||||
border: 15px solid var(--bg-code); |
||||
filter: drop-shadow(0 0 5px var(--bg)); |
||||
} |
||||
|
||||
pre { |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.lineno { |
||||
user-select: none; |
||||
-webkit-user-select: none; |
||||
} |
||||
|
||||
.highlight { |
||||
padding: 0 5px; |
||||
border-radius: 5px; |
||||
background-color: var(--bg-code); |
||||
} |
||||
|
||||
/* header anchors */ |
||||
|
||||
a[class="anchor"]::before { |
||||
display: none; |
||||
} |
||||
|
||||
a[class="anchor"] span { |
||||
content: url(../assets/anchor.svg); |
||||
margin-right: 5px; |
||||
margin-left: -25px; |
||||
margin-bottom: 2px; |
||||
opacity: 0%; |
||||
transition: opacity 0.2s ease-in-out; |
||||
user-select: none; |
||||
-webkit-user-select: none; |
||||
} |
||||
|
||||
@media (prefers-color-scheme: light) { |
||||
a[class="anchor"] span { |
||||
content: url(../assets/anchor-light.svg); |
||||
} |
||||
} |
||||
|
||||
:is(h1, h2, h3, h4, h5, h6):hover a[class="anchor"] span { |
||||
opacity: 80%; |
||||
transition: opacity 0.2s ease-in-out; |
||||
} |
||||
|
||||
a { |
||||
font-family: "Crimson"; |
||||
font-weight: normal; |
||||
text-decoration: none; |
||||
|
||||
color: var(--url); |
||||
} |
||||
|
||||
.contents a::before { |
||||
content: "◆"; |
||||
font-size: 0.5em; |
||||
padding-right: 3px; |
||||
position: relative; |
||||
bottom: 4px; |
||||
} |
||||
|
||||
a:hover { |
||||
animation: glow 0.2s ease-in-out both; |
||||
} |
||||
|
||||
/* animations */ |
||||
|
||||
@keyframes glow { |
||||
from { |
||||
font-weight: normal; |
||||
} |
||||
|
||||
to { |
||||
filter: drop-shadow(0.5px 0.5px 2px); |
||||
} |
||||
} |
||||
|
||||
/* sidebar */ |
||||
|
||||
.side p { |
||||
font-size: 1.5em; |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.side a, |
||||
footer a { |
||||
color: var(--text); |
||||
filter: brightness(90%); |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.side a:hover { |
||||
animation: none; |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.side ul { |
||||
padding-left: 18px; |
||||
margin-top: 6px; |
||||
} |
||||
|
||||
.side li { |
||||
list-style: none; |
||||
} |
||||
|
||||
#toc { |
||||
padding-bottom: 20px; |
||||
width: 85%; |
||||
border-bottom: 1px solid var(--text); |
||||
} |
||||
|
||||
.contents { |
||||
min-height: calc(100vh - 230px); |
||||
} |
||||
|
||||
footer { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
margin-top: 2em; |
||||
padding-top: 0.5em; |
||||
border-top: 1px solid var(--text); |
||||
} |
||||
|
||||
footer > * { |
||||
font-size: 1.2em; |
||||
margin-top: 1em; |
||||
} |
||||
|
||||
footer div { |
||||
display: grid; |
||||
height: min-content; |
||||
} |
||||
|
||||
/* large screens */ |
||||
|
||||
@media (min-width: 1330px) { |
||||
.contents { |
||||
max-width: 700px; |
||||
} |
||||
|
||||
img { |
||||
max-width: 95%; |
||||
} |
||||
|
||||
.side { |
||||
left: 100%; |
||||
margin-left: 2em; |
||||
margin-top: 100px; |
||||
position: absolute; |
||||
width: 270px; |
||||
} |
||||
} |
||||
|
||||
/* small screens */ |
||||
|
||||
@media (max-width: 1330px) { |
||||
body { |
||||
display: unset; |
||||
max-width: 800px; |
||||
} |
||||
|
||||
img { |
||||
width: 90%; |
||||
} |
||||
|
||||
footer { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
/* smaller screens */ |
||||
|
||||
@media (max-width: 830px) { |
||||
body { |
||||
width: 90%; |
||||
} |
||||
|
||||
.side { |
||||
height: auto; |
||||
margin: auto; |
||||
position: relative; |
||||
width: 90%; |
||||
} |
||||
|
||||
a[class="anchor"] { |
||||
float: right; |
||||
margin-left: 21px; |
||||
} |
||||
} |
||||
@ -0,0 +1,87 @@ |
||||
body { |
||||
padding-left: 5em; |
||||
padding-top: 5em; |
||||
max-width: 70%; |
||||
} |
||||
|
||||
h1 { |
||||
color: var(--accent-dark); |
||||
font-family: "Cinzel Decorative"; |
||||
font-size: 40px; |
||||
font-weight: normal; |
||||
line-height: 1; |
||||
|
||||
max-width: 600px; |
||||
|
||||
padding-bottom: 25px; |
||||
margin-bottom: 30px; |
||||
|
||||
border-bottom: 1px solid var(--accent); |
||||
} |
||||
|
||||
h1::first-letter { |
||||
font-size: 60px; |
||||
} |
||||
|
||||
p, |
||||
ul, |
||||
ol { |
||||
color: var(--text); |
||||
font-family: "Crimson", serif; |
||||
font-size: 1.2rem; |
||||
max-width: 1000px; |
||||
} |
||||
|
||||
ul { |
||||
list-style: none; |
||||
padding: unset; |
||||
margin: unset; |
||||
} |
||||
|
||||
strong { |
||||
font-weight: bolder; |
||||
text-shadow: 0 0.5px; |
||||
} |
||||
|
||||
a { |
||||
font-family: "Crimson"; |
||||
font-weight: normal; |
||||
text-decoration: none; |
||||
|
||||
color: var(--url); |
||||
} |
||||
|
||||
a::before { |
||||
content: "◆"; |
||||
font-size: 0.5em; |
||||
padding-right: 3px; |
||||
position: relative; |
||||
bottom: 4px; |
||||
} |
||||
|
||||
a:hover { |
||||
animation: glow 0.2s ease-in-out both; |
||||
} |
||||
|
||||
/* animations */ |
||||
|
||||
@keyframes glow { |
||||
from { |
||||
font-weight: normal; |
||||
} |
||||
|
||||
to { |
||||
filter: drop-shadow(0.5px 0.5px 2px); |
||||
} |
||||
} |
||||
|
||||
/* small screens */ |
||||
|
||||
@media (max-width: 600px) { |
||||
body { |
||||
padding-top: 5%; |
||||
padding-left: 5%; |
||||
padding-right: 5%; |
||||
max-width: unset; |
||||
} |
||||
} |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue