sorceress
/
vampysite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Complete rewrite

This commit is contained in:
Agatha Lovelace 2022-07-14 12:12:30 +02:00
parent 8071fdf37a
commit a3f7c625c2
Signed by: sorceress
GPG Key ID: 11BBCFC65FC9F401
26 changed files with 864 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -2,3 +2,6 @@
.jekyll-metadata .jekyll-metadata
Gemfile.lock Gemfile.lock
_site _site
source/_pages/*
!source/_pages/index.html
source/.jekyll-image-optim-cache

3
Gemfile
View File

@ -2,7 +2,10 @@
source "https://rubygems.org" source "https://rubygems.org"
gem "jekyll-toc", "~> 0.17.1"
gem "jekyll", "~> 4.2" gem "jekyll", "~> 4.2"
gem "kramdown-math-katex", "~> 1.0" gem "kramdown-math-katex", "~> 1.0"
gem "rouge", "~> 3.27" gem "rouge", "~> 3.27"
gem "webrick", "~> 1.7" gem "webrick", "~> 1.7"
gem "image_optim", "~> 0.25"
gem "image_optim_pack", "~> 0.5.1"

34
_config.yml
View File

@ -1,5 +1,39 @@
timezone: Europe/Berlin
source: 'source' source: 'source'
layouts_dir: _layouts
keep_files: ['cv.pdf'] keep_files: ['cv.pdf']
collections:
pages:
output: true
permalink: /:collection/:title/
order:
- Links.md
defaults:
-
scope:
path: "_pages/*.md"
values:
layout: "page"
toc: true
plugins:
- jekyll-toc
toc:
max_level: 1
jekyll_image_optim:
image_optim:
allow_lossy: true
advpng:
level: 2
pngout: false
svgo: false
oxipng: false
kramdown: kramdown:
syntax_highlighter: rouge syntax_highlighter: rouge
syntax_highlighter_opts: syntax_highlighter_opts:

17
source/404.html Normal file
View File

@ -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>

10
source/_includes/header.html Normal file
View File

@ -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" />

63
source/_layouts/page.html Normal file
View File

@ -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>

28
source/_pages/index.html Normal file
View File

@ -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>

71
source/_plugins/jekyll-image-optim.rb Normal file
View File

@ -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

12
source/_plugins/kramdown-image.rb Normal file
View File

@ -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

BIN
source/assets/agatha-dark.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 867 KiB

After

Width:  |  Height:  |  Size: 879 KiB

BIN
source/assets/agatha-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 824 KiB

1
source/assets/anchor-light.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" class="octicon octicon-link" height="20" width="20" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#555a84"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 518 B

1
source/assets/anchor.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" class="octicon octicon-link" height="20" width="20" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#9AA6CB"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 517 B

BIN
source/assets/bg-noise-dark.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 290 KiB

After

Width:  |  Height:  |  Size: 296 KiB

BIN
source/assets/bg-noise-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 418 KiB

76
source/css/404.css Normal file
View File

@ -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;
}
}

88
source/css/common.css
View File

@ -1,71 +1,79 @@
/* Fonts */ /* Fonts */
@font-face { @font-face {
font-family: "Cinzel Decorative"; font-family: "Cinzel Decorative";
src: url(../fonts/CinzelDecorative-Regular.ttf); src: url(../fonts/CinzelDecorative-Regular.ttf);
font-weight: normal; font-weight: normal;
} }
@font-face { @font-face {
font-family: "Cinzel Decorative"; font-family: "Cinzel Decorative";
src: url(../fonts/CinzelDecorative-Bold.ttf); src: url(../fonts/CinzelDecorative-Bold.ttf);
font-weight: bold; font-weight: bold;
} }
@font-face { @font-face {
font-family: "Crimson"; font-family: "Crimson";
src: url(../fonts/Crimson-Roman.otf); src: url(../fonts/Crimson-Roman.otf);
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Crimson"; font-family: "Crimson";
src: url(../fonts/Crimson-Bold.otf); src: url(../fonts/Crimson-Bold.otf);
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Crimson"; font-family: "Crimson";
src: url(../fonts/Crimson-Italic.otf); src: url(../fonts/Crimson-Italic.otf);
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: "Crimson"; font-family: "Crimson";
src: url(../fonts/Crimson-BoldItalic.otf); src: url(../fonts/Crimson-BoldItalic.otf);
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
/* Colors */ /* Colors */
html {
scrollbar-color: var(--accent) var(--bg);
background: url(../assets/bg-noise-dark.png) repeat;
background-color: var(--bg);
}
:root { :root {
--bg: #19121F; --bg: #16121f;
--accent: #9AA6CB; --bg-code: #110e18;
--accent-dark: #747E9D; --accent: #9aa6cb;
--text: #D5D6E8; --accent-dark: #747e9d;
--url: #F5E8C9; --text: #d5d6e8;
--url: var(--accent);
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--bg: #b6b7d4;
--bg-code: #a5a6c5;
--accent: #555a84;
--accent-dark: #464b73;
--text: #16121f;
--url: var(--accent);
}
} html {
background: url(../assets/bg-noise-light.png);
html {
}
}
html {
background: url(../assets/bg-noise-dark.png) repeat;
background-color: var(--bg); background-color: var(--bg);
}
} }
::selection { ::selection {
color: var(--bg); color: var(--bg);
background: var(--accent); background: var(--accent);
} }

212
source/css/index.css
View File

@ -1,185 +1,187 @@
.centered { .centered {
position: absolute; position: absolute;
display: flex; display: flex;
left: 50%; left: 50%;
top: 50%; top: 50%;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.text { .text {
margin-top: 5em; margin-top: 5em;
width: 400px; width: 400px;
} }
h1 { h1 {
font-family: 'Cinzel Decorative'; font-family: "Cinzel Decorative";
color: var(--accent); color: var(--accent);
width: min-content; width: min-content;
font-size: 55px; font-size: 55px;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
margin-bottom: 0; margin-bottom: 0;
} }
h1 span { h1 span {
font-size: 75px; font-size: 75px;
} }
h3, p { h3,
font-family: 'Crimson'; p {
font-weight: normal; font-family: "Crimson";
font-weight: normal;
} }
h3 { h3 {
color: var(--accent-dark); color: var(--accent-dark);
font-size: 30px; font-size: 30px;
margin-top: 0.2em; margin-top: 0.2em;
} }
p { p {
margin-top: 2em; margin-top: 2em;
font-size: 25px; font-size: 25px;
line-height: 1.1; line-height: 1.1;
color: var(--text); color: var(--text);
} }
abbr { abbr {
text-decoration: none; text-decoration: none;
font-style: italic; font-style: italic;
animation: blink 5s linear infinite; animation: blink 5s linear infinite;
} }
picture img { picture img {
height: 700px; height: 700px;
} }
/* Links menu */ /* Links menu */
details { details {
margin-top: 1.5em; margin-top: 1.5em;
width: max-content; width: max-content;
} }
details a { details a {
opacity: 0; opacity: 0;
margin: 0 8px; margin: 0 8px;
} }
details * { details * {
display: inline-block; display: inline-block;
} }
details[open] a { details[open] a {
opacity: 100; opacity: 100;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
details, details * { details,
font-family: 'Crimson'; details * {
font-weight: normal; font-family: "Crimson";
font-size: 26px; font-weight: normal;
text-decoration: none; font-size: 26px;
text-decoration: none;
color: var(--url); color: var(--url);
height: min-content; height: min-content;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
details summary::before { details summary::before {
content: '⦿ '; content: "⦿ ";
filter: drop-shadow(0 0 5px); filter: drop-shadow(0 0 5px);
} }
details[open] > summary { details[open] > summary {
visibility: hidden; visibility: hidden;
font-size: 0; font-size: 0;
} }
details[open] > summary::after { details[open] > summary::after {
content: '←'; content: "←";
visibility: visible; visibility: visible;
font-size: 26px; font-size: 26px;
position: relative; position: relative;
top: -2px; top: -2px;
} }
details *:hover { details *:hover {
animation: glow 0.2s ease-in-out both; animation: glow 0.2s ease-in-out both;
} }
/* animations */ /* animations */
@keyframes glow { @keyframes glow {
from { from {
font-weight: normal; font-weight: normal;
} }
to { to {
filter: drop-shadow(0.5px 0.5px 2px) ; filter: drop-shadow(0.5px 0.5px 2px);
} }
} }
@keyframes blink { @keyframes blink {
80% { 80% {
filter: drop-shadow(0 0 1px) opacity(80%); filter: drop-shadow(0 0 1px) opacity(80%);
} }
} }
/* mobile screens */ /* mobile screens */
@media (max-width: 880px) { @media (max-width: 880px) {
.centered { .centered {
display: block; display: block;
top: -20px; top: -20px;
-webkit-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
.text { .text {
margin-top: unset; margin-top: unset;
position: absolute; position: absolute;
left: 50%; left: 50%;
-webkit-transform: translate(-50%, -60%); -webkit-transform: translate(-50%, -60%);
transform: translate(-50%, -60%); transform: translate(-50%, -60%);
width: 320px; width: 320px;
padding-bottom: 4em; padding-bottom: 4em;
} }
h1 { h1 {
filter: drop-shadow(5px 5px 5px var(--bg)); filter: drop-shadow(5px 5px 5px var(--bg));
} }
} }
@media (max-width: 500px) { @media (max-width: 500px) {
picture img { picture img {
max-width: 100vw; max-width: 100vw;
height: auto; height: auto;
} }
} }
@media (max-width: 360px) { @media (max-width: 360px) {
.text { .text {
position: unset; position: unset;
left: unset; left: unset;
-webkit-transform: translate(0, -60%); -webkit-transform: translate(0, -60%);
transform: translate(0, -60%); transform: translate(0, -60%);
width: fit-content; width: fit-content;
margin-left: 2em; margin-left: 2em;
} }
h1 { h1 {
font-size: 40px; font-size: 40px;
} }
h1 span { h1 span {
font-size: 60px; font-size: 60px;
} }
details { details {
width: fit-content; width: fit-content;
} }
} }

295
source/css/page.css Normal file
View File

@ -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;
}
}

87
source/css/pageindex.css Normal file
View File

@ -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;
}
}

2
source/css/paramount-light.css
View File

@ -5,7 +5,7 @@ td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc } .highlight .hll { background-color: #ffffcc }
.highlight { background: #ffffff; } .highlight { background: #ffffff; }
.highlight .c { color: #a8a8a8; font-style: italic } /* Comment */ .highlight .c { color: #797979; font-style: italic } /* Comment */
.highlight .err { color: #ffffff; background-color: #c30771 } /* Error */ .highlight .err { color: #ffffff; background-color: #c30771 } /* Error */
.highlight .g { color: #767676 } /* Generic */ .highlight .g { color: #767676 } /* Generic */
.highlight .k { color: #767676 } /* Keyword */ .highlight .k { color: #767676 } /* Keyword */

BIN
source/fonts/iosevka-gothic-bold.woff2 Normal file
View File

Binary file not shown.

BIN
source/fonts/iosevka-gothic-bolditalic.woff2 Normal file
View File

Binary file not shown.

BIN
source/fonts/iosevka-gothic-italic.woff2 Normal file
View File

Binary file not shown.

BIN
source/fonts/iosevka-gothic-regular.woff2 Normal file
View File

Binary file not shown.

19
source/index.html
View File

@ -1,22 +1,18 @@
---
---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> {% include header.html %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/index.css"> <link rel="stylesheet" href="/css/index.css">
<link rel="shortcut icon" href="/assets/favicon.png" type="image/x-icon">
<meta name="author" content="Agatha">
<title>Agatha V. Lovelace</title> <title>Agatha V. Lovelace</title>
</head> </head>
<body> <body>
<div class="centered"> <div class="centered">
<picture> <picture>
<!-- <source srcset="/assets/agatha-light.png" --> <source srcset="/assets/agatha-light.png"
<!-- media="(prefers-color-scheme: light)"> --> media="(prefers-color-scheme: light)">
<img src="/assets/agatha-dark.png" <img src="/assets/agatha-dark.png"
alt="A picture of Agatha wearing glasses and a tank top. The edges fade out"> alt="A picture of Agatha wearing glasses and a tank top. The edges fade out">
</picture> </picture>
@ -27,10 +23,9 @@
<p>Programmer, <abbr title="Electric Guitar, Synths, Violin, Graphic Design">Artist</abbr>,<br> Trans Woman</p> <p>Programmer, <abbr title="Electric Guitar, Synths, Violin, Graphic Design">Artist</abbr>,<br> Trans Woman</p>
<details> <details>
<!-- TODO: replace the links once the rest of the site is ready -->
<summary>Links</summary> <summary>Links</summary>
<a href="https://agatharose.dev/pages/Links">Contact</a> <a href="/pages/Links/">Contact</a>
<!-- <a href="#">Posts</a> --> <a href="/pages/">Posts</a>
<a href="/cv.pdf">Hire Me</a> <a href="/cv.pdf">Hire Me</a>
</details> </details>
</div> </div>