Something went wrong. Try again.
Personal website for journal and portfolio krill0w.garden
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
@font-face { font-family: "MassTransitMono"; src: url("/assets/fonts/masstransitmono_regular_v1.1-webfont.woff2") format("woff2");}
:root { --width: 720px; --font-main: "MassTransitMono", monospace; --font-secondary: 'Fira Code', monospace; --font-scale: 1em; --background-colour: #0A3323; --heading-colour: #839958; --text-colour: #f7f4d5; --link-colour: #d3968c; --bold-colour: #3F8DA6; --visited-coluor: #d3968c; --code-background-colour: #bc8d6b; --code-colour: #222129; --blockquote-colour: #222;}
body { font-family: var(--font-secondary); font-size: var(--font-scale); margin: auto; padding: 20px; max-width: var(--width); text-align: left; background-color: var(--background-colour); word-wrap: break-word; overflow-wrap: break-word; line-height: 1.5; color: var(--text-colour);}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-main); color: var(--heading-colour);}
a { color: var(--link-colour); cursor: pointer; text-decoration: underline;}
a:hover { text-decoration: underline;}
a.title { display: block; text-align: center;}
main { margin-top: 40px; margin-bottom: 20px; padding: 30px; border: 3px solid white;}
nav a { margin-right: 8px;}
strong,b { color: var(--bold-colour);}
button { margin: 0; cursor: pointer;}
main { line-height: 1.6;}
table { width: 100%;}
hr { border: 0; border-top: 5px dotted; color: var(--heading-colour);}
img { max-width: 100%;}
code { font-family: monospace; padding: 2px; background-color: var(--code-background-colour); color: var(--code-colour); border-radius: 3px;}
blockquote { border-top: 1px solid var(--heading-colour); border-bottom: 1px solid var(--heading-colour); color: var(--text-colour); padding: 20px; font-style: italic; margin-left: 0px; margin-right: 0px;}
footer { padding: 25px 0; text-align: center; opacity: 0.6;}
.title:hover { text-decoration: none;}
.title h1 { font-size: 3em; padding: 5px 0px; color: var(--heading-colour); display: inline-block; font-weight: 400;}
.inline { width: auto !important;}
.highlight,.code { padding: 1px 15px; background-color: var(--code-background-colour); color: var(--code-colour); border-radius: 3px; margin-block-start: 1em; margin-block-end: 1em; overflow-x: auto;}
.highlight { border-left: 5px solid var(--heading-colour);}
/* blog post list */ul.blog-posts { list-style-type: none; padding: unset;}
ul.blog-posts li { display: flex; margin-bottom: 20px;}
ul.blog-posts li time { font-style: normal;}
ul.blog-posts li span { flex: 0 0 130px;}
ul.blog-posts li a:visited { color: var(--visited-colour);}
table { border-collapse: collapse;}
table,th,td { border: 1px dashed var(--heading-colour); padding: 10px;}
@media only screen and (max-width:767px) { main { padding: 20px; margin-top: 30px; margin-bottom: 10px; }
ul.blog-posts li { flex-direction: column; }
ul.blog-posts li span { flex: unset; }}
.tag { margin-left: auto;}
.fancy-tag { background-color: #e3bbb54b; border-radius: 20px; padding: .17em .6em; margin: -.2em 0; line-height: 2; white-space: nowrap; text-decoration: none;}
.date { margin-bottom: 0;}
.heading * { margin: .1em 0em;}
#rhythmring *{ color: white !important; fill: white !important;}
#rhythmring { width: 100% !important;}
.media-title, .cafe-title { display: flex; align-items: center; align-content: flex-start; gap: .5rem;}
.cafe-title > h3, .cafe-title > i { margin: 8px 0px 2px;}
.movie { width: 50px; height: auto; display: inline-block; z-index: 1;}
.rating { margin-left: auto;}
h2 { border-bottom: 5px dotted;}
.album { width:50px; height: auto; display: inline-block; z-index: 1;}
.construct { text-align: center;}
.cafe p { margin: 2px 0px 8px;}