a poorly-written personal website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

919 lines
15 KiB

@font-face {
font-family: Droid Sans Mono Dotted;
src: local('Droid Sans Mono Dotted'),
url('/fonts/droid-sans-mono-dotted/DroidSansMonoDotted.woff2') format('woff2'),
url('/fonts/droid-sans-mono-dotted/DroidSansMonoDotted.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: Droid Sans Mono Dotted;
src: local('Droid Sans Mono Dotted'),
url('/fonts/droid-sans-mono-dotted/DroidSansMonoDotted.woff2') format('woff2'),
url('/fonts/droid-sans-mono-dotted/DroidSansMonoDotted.ttf') format('ttf');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: Droid Sans Mono Dotted;
src: local('Droid Sans Mono Dotted'),
url('/fonts/droid-sans-mono-dotted/DroidSansMonoDotted.woff2') format('woff2'),
url('/fonts/droid-sans-mono-dotted/DroidSansMonoDotted.ttf') format('ttf');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: Droid Sans Mono Dotted;
src: local('Droid Sans Mono Dotted'),
url('/fonts/droid-sans-mono-dotted/DroidSansMonoDotted.woff2') format('woff2'),
url('/fonts/droid-sans-mono-dotted/DroidSansMonoDotted.ttf') format('ttf');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: Sorts Mill Goudy;
src: local('Sorts Mill Goudy'), local('OFL Sorts Mill Goudy'),
url('/fonts/theleagueof-sorts-mill-goudy/GoudyStM-webfont.woff2') format('woff2'),
url('/fonts/theleagueof-sorts-mill-goudy/GoudyStM-webfont.woff') format('woff'),
url('/fonts/theleagueof-sorts-mill-goudy/GoudyStM-webfont.eot') format('embedded-opentype'),
url('/fonts/theleagueof-sorts-mill-goudy/GoudyStM-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: Sorts Mill Goudy;
src: local('Sorts Mill Goudy Italic'), local('OFL Sorts Mill Goudy Italic'),
url('/fonts/theleagueof-sorts-mill-goudy/GoudyStM-Italic-webfont.woff2') format('woff2'),
url('/fonts/theleagueof-sorts-mill-goudy/GoudyStM-Italic-webfont.woff') format('woff'),
url('/fonts/theleagueof-sorts-mill-goudy/GoudyStM-Italic-webfont.eot') format('embedded-opentype'),
url('/fonts/theleagueof-sorts-mill-goudy/GoudyStM-Italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: ingo;
src: url('/fonts/ingo/ingo.woff2') format('woff2'),
url('/fonts/ingo/ingo.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* main colours */
$c_bwhit: rgb(253, 248, 248);
$c_dwhit: rgb(234, 235, 230);
// $c_cwhit: rgb(250, 241, 226); colour for transparent paper
$c_cwhit: rgb(222, 214, 200);
$c_black: rgb(19, 23, 30);
$c_dblck: rgb(16, 20, 28);
$c_ggrey: rgb(190, 195, 188);
$c_dgrey: rgb(134, 153, 155);
$c_ddgry: rgb(64, 83, 85);
$c_imgbg: rgba(210, 190, 190, 0.2);
/* shadows */
$s_lgt: 0px 1px 3px rgba(0, 0, 0, 0.1);
$s_sml: 0px 1px 2px rgba(0, 0, 0, 0.4);
$s_mid: 0px 1px 3px rgba(0, 0, 0, 0.5);
$s_big: 0px 1.5px 6px rgba(0, 0, 0, 0.5);
$s_lft: 0px 6px 6px rgba(0, 0, 0, 0.3);
$s_wht: 0px 1.3px 2px rgba(256, 256, 256, 0.8);
/* borders */
$b_whit: 1px solid $c_cwhit;
$b_dash: 1px dashed $c_black;
$b_bdsh: 1px dashed $c_black;
$b_bsol: 1px solid $c_black;
$b_bsdg: 1px solid $c_ddgry;
$b_invs: 1px solid rgba(0, 0, 0, 0);
$b_twht: 2px solid $c_cwhit;
/* fonts */
$f_mono: 'Droid Sans Mono Dotted', monospace;
$f_norm: 'Sorts Mill Goudy', mincho, 'Yu Mincho',
'IPAMincho', 'IPAexMincho', 'IPAmjMincho', 'HanaMinA',
'Kochi Mincho', 'Togoshi Mincho',
'Hiragino Mincho Pro W3', 'Hiragino Mincho Pro', 'HiraMinProN-W3',
'Hiragino Serif', 'Source Han Serif', 'Ume P Mincho', 'Ume Mincho',
'MS Mincho', 'MS P Mincho', 'AppliMincho', 'Noto Serif CJK JP',
'Source Han Serif JP', 'Noto Serif CJK', 'Source Han Serif JP', serif;
$fs_web: 14.5pt;
$fs_mbl: 12.75pt;
$fs_mono_web: 0.7em;
$fs_mono_mobile: 0.65em;
/* syntax highlighting colours */
$h_dblack: #0f0f0e;
$h_dred: #8e4b40;
$h_dgreen: #c7d276;
$h_dyellow: #f5b45c;
$h_dblue: #52818c;
$h_dmagenta: #e07388;
$h_dcyan: #60b8a8;
$h_dwhite: #faf1df;
$h_lblack: #292721;
$h_lred: #c25948;
$h_lgreen: #8ceba4;
$h_lyellow: #ffab84;
$h_lblue: #7fbcc7;
$h_lmagenta: #e09fc4;
$h_lcyan: #7fd6b7;
$h_lwhite: #faf5eb;
$h_bg: $h_dblack;
$h_fg: $h_dwhite;
body {
background : {
color: $c_cwhit;
image: none;
attachment: fixed;
size: cover;
}
margin: 0;
padding: 0;
font-family: $f_norm;
h3 {
margin-top: 1em;
margin-bottom: 0.5em;
}
}
a {
color: $c_black;
border-bottom: $b_bdsh;
text-decoration: none;
border-bottom: $b_bdsh;
// text-decoration: underline dotted;
padding-bottom: 0;
&:hover {
border-bottom: $b_bsol;
text-decoration: none;
// text-decoration: underline solid;
}
&[class=sel] {
color: $c_ddgry;
border-bottom: $b_invs;
&:hover {
border-bottom: $b_bsdg;
}
}
}
#bg-cover {
background : {
image: url(/bgimg/paper.jpg);
size: 340px;
color: $c_cwhit;
attachment: fixed;
}
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.9;
top: 0;
left: 0;
z-index: -1;
}
header {
background : {
color: $c_dgrey;
image: url(/bgimg/fuzz-bar.jpg);
}
padding : {
top: 0;
bottom: 0;
left: 1.8rem;
right: 1.8rem;
}
margin: 0;
border-bottom: $b_whit;
box-shadow: $s_sml;
font-size: 2rem;
font-family: "ingo", $f_norm;
}
#header-links {
margin : {
top: 0;
bottom: 0;
left: auto;
right: auto;
}
padding: 0;
max-width: 48rem;
text-shadow: $s_mid;
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
a {
color: $c_dwhit;
padding: 0;
border-bottom: $b_invs;
text-decoration: none;
}
a:hover, .header-sel {
color: $c_bwhit;
border-bottom: $b_twht;
text-decoration: none;
}
}
#header-rhs a {
padding : {
left: .2rem;
right: .2rem;
}
}
main {
color: $c_black;
margin: 0;
padding: 1rem;
min-height: 100%;
text-shadow: $s_lgt;
font-size: $fs_web;
}
section {
margin : {
left: auto;
right: auto;
}
padding : {
left: 1em;
right: 1em;
bottom: 0em;
top: 0em;
}
max-width: 48rem;
}
section:first-of-type {
padding-top: 2.5rem;
}
section:not(:last-of-type) {
padding-bottom: 2.5rem;
}
section:not(:first-of-type)::before {
position: absolute;
left: 50%;
transform: translate(-50%, -3.5rem);
font-size: 1.3em;
content: ".\00a0\00a0\00a0\00a0\00a0.\00a0\00a0\00a0\00a0\00a0."
}
section:last-of-type {
border-bottom: none;
padding-bottom: 0;
}
body p {
display: flow-root;
}
.links {
text-align: center;
* {
margin : {
left: .1em;
right: .1em;
}
padding : {
left: .1em;
right: .1em;
bottom: 0;
top: 1px;
}
}
}
.table-links {
*:not(:last-child) {
margin : {
right: .15em;
}
padding : {
bottom: 0;
top: 1px;
}
}
}
.mono {
font : {
family: $f_mono;
size: $fs_mono_web;
}
}
.project-table {
display: flow-root;
}
.project-table:not(:last-of-type) {
padding-bottom: 1.5em;
}
/* code blocks and syntax highlighting, for pandocs gfm-compat output */
code {
padding : {
left: 5px;
right: 5px;
}
margin : {
left: 2px;
right: 2px;
}
a {
color: $h_fg;
background-color: $h_bg;
}
background-color: $h_bg;
color: $h_fg;
text-shadow: $s_sml;
border-radius: 2px;
font : {
family: $f_mono;
size: $fs_mono_web;
}
}
pre {
code {
padding: 0;
margin: 0;
border-radius: 0;
box-shadow: none;
background-color: transparent;
text-shadow: none;
}
padding : {
left: 15px;
right: 20px;
top: 10px;
bottom: 12px;
}
background-color: $h_bg;
line-height: .8em;
margin : {
left: 1.5em;
right: 1.5em;
top: .5em;
bottom: .5em;
}
white-space: pre-wrap;
display: inline-block;
border : {
radius: 3px;
left: 5px solid $c_imgbg;
}
box-shadow: $s_sml;
}
div[class=sourceCode] {
pre {
margin: 0;
box-shadow: none;
display: block;
}
display: block;
box-shadow: $s_mid;
margin : {
left: 1.5em;
right: 1.5em;
top: .5em;
bottom: .5em;
}
}
code span.al { color: $h_dblack; background-color: $h_dyellow; } /* Alert */
code span.an { color: $h_dblue; } /* Annotation */
code span.at { color: $h_dgreen; } /* Attribute */
code span.bn { color: $h_lred; } /* BaseN */
code span.bu { color: $h_dyellow; } /* BuiltIn */
code span.cf { color: $h_dyellow; } /* ControlFlow */
code span.ch { color: $h_lred; } /* Char */
code span.cn { color: $h_dcyan; font-weight: bold; } /* Constant */
code span.co { color: $h_dblue; font-style: italic; } /* Comment */
code span.cv { color: $h_dcyan; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: $h_dblue; font-style: italic; } /* Documentation */
code span.dt { color: $h_lgreen; } /* DataType */
code span.dv { color: $h_lred; } /* DecVal */
code span.er { color: $h_lred; font-weight: bold; } /* Error */
code span.ex { color: $h_dcyan; } /* Extension */
code span.fl { color: $h_lred; } /* Float */
code span.fu { color: $h_dcyan; font-weight: bold; } /* Function */
code span.im { color: $h_dmagenta; } /* Import */
code span.in { color: $h_dcyan; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: $h_dyellow; } /* Keyword */
code span.op { color: $h_dyellow; } /* Operator */
code span.ot { color: $h_dgreen; } /* Other */
code span.pp { color: $h_dmagenta; font-weight: bold; } /* Preprocessor */
code span.sc { color: $h_dmagenta; } /* SpecialChar */
code span.ss { color: $h_dmagenta; } /* SpecialString */
code span.st { color: $h_lred; } /* String */
code span.va { color: $h_dmagenta; font-weight: bold; } /* Variable */
code span.vs { color: $h_lred; } /* VerbatimString */
code span.wa { color: $h_lred; font-weight: bold; font-style: italic; } /* Warning */
/* end code blocks and syntax highlighting */
ul {
list-style-type: disc;
}
blockquote {
border-left: $b_dash;
padding-left: 1em;
}
section {
img, video, audio {
margin : {
left: auto;
right: auto;
top: 1em;
bottom: 1em;
}
max-width: 100%;
display: block;
border: $b_whit;
box-shadow: $s_sml;
}
a img, a video {
transition : {
property: transform, box-shadow;
duration: 0.2s;
timing-function: ease-out;
}
background-color: $c_imgbg;
&:hover {
transform: translateY(-5px);
box-shadow: $s_lft;
}
}
}
.thumb_strip {
display: flex;
a {
padding: .2rem;
border-bottom: $b_invs;
}
img {
width: 200px;
height: 140px;
object-fit: cover;
}
}
/* make any iframe put in a video-container div
* full-width while maintaining a 16x9 aspect
* ratio */
.video-container {
transform: translate(-3px, -3px);
margin-bottom: 17px;
padding-bottom: 56.25%;
position: relative;
width: 100%;
height: 0;
border: $b_whit;
box-shadow: $s_sml;
iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
}
#prev, #next, #first, #last, #index{
margin : {
left: .2em;
right: .2em;
}
}
/* wide */
@media not all and (max-aspect-ratio: 7/8) and (max-width: 48rem) {
/* font modifiers */
.font-left {
text-align: left;
}
.font-centre {
text-align: center;
}
.font-right {
text-align: right;
}
.font-huge {
font-size: 2.5em;
}
.font-verylarge {
font-size: 2em;
}
.font-large {
font-size: 1.5em;
}
.font-semilarge {
font-size: 1.25em;
}
/* end font modifiers */
#header-links {
width: 78%;
max-width: 60rem;
min-width: 35rem;
padding-top: 9rem;
a {
color: $c_bwhit;
}
}
#lhs-main {
font-size: 2.5rem;
}
#lhs-mobile {
display: none;
}
header {
background : {
color: #8b9b98;
image: url(/bgimg/fade.jpg);
}
height: 14rem;
}
body {
background : {
image: none;
color: $c_cwhit;
}
}
/* floats */
body .left {
margin : {
top: 0em;
bottom: 0.5em;
left: 0.5em;
right: 1em;
}
padding: 0;
float: left;
max-width: 35%;
}
body .left-thumb {
margin : {
top: 0em;
bottom: 0.5em;
left: 0.5em;
right: 0.75em;
}
padding: 0;
float: left;
max-width: 10%;
}
body .right {
margin : {
top: 0em;
bottom: 0.5em;
left: 1em;
right: 0.5em;
}
margin-left: 1em;
padding: 0;
float: right;
max-width: 35%;
}
body .right-thumb {
margin : {
top: 0em;
bottom: 0.5em;
left: 0.75em;
right: 0.5em;
}
margin-left: 1em;
padding: 0;
float: right;
max-width: 10%;
}
body .left-thumb img {
margin: 0;
padding: 0;
}
body .left img {
margin: 0;
padding: 0;
}
body .right-thumb img {
margin: 0;
padding: 0;
}
body .right img {
margin: 0;
padding: 0;
}
/* end floats */
.project-table {
td {
vertical-align: top;
}
td:nth-child(1) {
text-align: right;
}
td:nth-child(2) {
font-weight: bold;
}
td:nth-child(2)::before {
content: "-\00a0";
}
td:nth-child(3)::before {
content: ":\00a0";
}
}
.jp-small {
font-size: 0.9em;
}
}
/* narrow */
@media all and (max-aspect-ratio: 7/8) and (max-width: 48rem) {
/* font modifiers */
.font-left {
text-align: left;
}
.font-centre {
text-align: center;
}
.font-right {
text-align: right;
}
.font-huge {
font-size: 2.25em;
}
.font-verylarge {
font-size: 2em;
}
.font-large {
font-size: 1.75em;
}
.font-semilarge {
font-size: 1.5em;
}
/* end font modifiers */
main {
font-size: $fs_mbl;
padding : {
top: 6em;
left: 2rem;
right: 2rem;
bottom: 1rem;
}
}
section {
padding: 0;
}
header {
background-size: cover;
font-size: 1.4em;
padding: 0;
width: 100%;
position: fixed;
box-shadow: $s_big;
z-index: 1;
}
body .left, body .left-thumb, body .right, body .right-thumb {
max-width: 50%;
max-height: 20em;
}
a, a:hover, a[class=sel]:hover {
border-bottom: $b_invs;
text-decoration: underline;
}
a[class=sel] {
text-decoration: none;
}
.mono {
font-size: $fs_mono_mobile;
}
code {
font-size: $fs_mono_mobile;
}
pre {
display: block;
margin : {
left: 0;
right: 0;
}
}
div[class=sourceCode] {
margin : {
left: 0;
right: 0;
}
a {
text-decoration: none;
}
}
#header-links {
height: 2.5em;
align-items: center;
margin : {
left: 2rem;
right: 2rem;
}
a:hover, .header-sel {
border: 0;
text-decoration: underline;
}
}
.links {
line-height: 2.0;
}
ul {
line-height: 2.0;
}
#lhs-main {
display: none;
}
#prev, #next, #first, #last, #index {
padding : {
left: .3em;
right: .3em;
}
}
.project-table {
padding-left: 0.5em;
tr {
display: flex;
flex-direction: column;
}
td {
margin: 0;
padding: 0;
}
tr:not(:nth-child(1)) td:nth-child(1) {
margin-top: 1em;
}
td:nth-child(2) {
font-weight: bold;
}
}
.jp-small {
font-size: 0.8em;
}
}
.appear {
animation : {
name: appear;
duration: 0.5s;
fill-mode: both;
delay: 0.2s;
}
}
@keyframes section-border-appear {
from {
border-bottom: $b_invs;
}
to {
border-bottom: $b_dash;
}
}
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}