my blog lives here now
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.
 
 
 
 
 
 

528 lines
9.0 KiB

@import "vars.scss";
@mixin center-that-bitch {
display: flex;
flex-direction: column;
align-items: center;
}
html {
min-height: 100%;
height: 100%;
max-width: 100%;
margin: 0;
overflow-x: clip;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
width: 100%;
@include center-that-bitch;
margin: 0;
color: $bluegray-900;
font-size: $font-size;
overflow-x: clip;
}
body > header {
background-color: $purple-600;
display: flex;
height: $nav-height;
width: 100%;
z-index: 999;
position: fixed;
justify-content: space-between;
align-items: center;
padding-left: 1em;
padding-right: 1em;
border-bottom: 3px solid $purple-700;
box-sizing: border-box;
div, nav > a {
height: $nav-height;
padding-left: 0.3em;
padding-right: 0.3em;
display: flex;
align-items: center;
}
div:hover, nav > a:hover {
background-color: $purple-500;
transition: background-color 0.3s ease-in-out;
}
a {
color: white;
font-size: $font-size * 1.2;
text-decoration: none;
}
nav {
display: flex;
align-items: center;
gap: 0.5em;
}
}
@mixin left-bordered-block($color) {
padding-left: 1em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-left: 5px dashed $color;
}
@mixin material {
padding: 1em;
margin-top: 1em;
margin-bottom: 1em;
box-shadow: 2px 2px 6px black;
border-radius: 10px;
}
main {
max-width: 100ch;
width: 100%;
margin: 0px auto 0px auto;
flex: 1 0 auto;
padding: 2ch;
padding-top: $nav-height;
box-sizing: border-box;
div#title h2 {
display: none;
}
div#post-toc-container {
aside#toc {
display: none;
}
article {
grid-column: 2;
width: 100%;
line-height: 1.5;
}
}
div#post-info {
font-style: italic;
line-height: 1.2;
@include left-bordered-block($bluegray-500);
}
}
div.warning {
@include material;
background-color: $red-200;
}
figure.wraparound {
float: right;
width: auto;
margin-left: 2em;
}
figure {
overflow-x: auto;
overflow-y: clip;
width: 100%;
margin: auto;
@include center-that-bitch;
figcaption {
margin-top: 0.3em;
display: inline-block;
text-align: center;
}
p {
margin: 0;
}
}
ol, ul {
padding-left: 1.2em;
li {
margin-top: 5px;
margin-bottom: 5px;
p {
margin-top: 5px;
margin-bottom: 5px;
}
}
}
.katex-display {
> span.katex {
white-space: normal;
}
}
div.mathpar {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 1em;
> figure {
width: auto;
max-width: 33%;
}
}
div.columns {
blockquote, details.blockquote {
padding-right: 1em;
padding-left: 1em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border: 0;
}
}
code, pre, .sourceCode {
font-size: $font-size;
font-family: 'Iosevka', 'Fantasque Sans Mono', Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
font-weight: 500;
}
div.sourceCode, pre {
background-color: $code-bg;
color: $code-fg;
flex-grow: 0;
@include material;
overflow-x: auto;
line-height: 1.2;
code {
display: block;
}
> pre {
padding: unset;
margin-top: unset;
margin-bottom: unset;
box-shadow: unset;
margin: 0;
overflow-y: clip;
}
}
p > code {
white-space: nowrap;
}
blockquote, details.blockquote {
@include material;
background-color: $purple-100;
margin-left: 0;
margin-right: 0;
h2 {
margin-top: 0;
}
}
table {
width: 70%;
margin: auto;
border-collapse: collapse;
td, th {
text-align: center;
padding: 0px 1em 0px 1em;
border: 2px solid $purple-400;
}
}
ul#post-list {
list-style-type: none;
display: flex;
flex-direction: column;
.post-list-item {
@include left-bordered-block($yellow-500);
@include material;
margin: 0;
background-color: $yellow-50;
.post-list-header {
margin-top: 0.2em;
display: flex;
justify-content: space-between;
line-height: 14pt;
font-style: italic;
font-size: 10pt;
a {
font-size: 14pt;
font-style: normal;
color: $bluegray-800;
}
}
}
}
div.contact-list {
display: flex;
justify-content: space-evenly;
align-items: stretch;
gap: 3em;
div.contact-card {
background-color: $purple-200;
@include material;
width: 33%;
max-width: 33%;
flex-grow: 1;
p {
margin: 0;
}
div.contact-header {
// I really hate Pandoc sometimes
display: flex;
align-items: center;
gap: 1em;
margin-bottom: 10px;
img {
height: 48px;
clip-path: url(#squircle);
}
span.username {
font-size: 16pt;
}
}
}
}
@media only screen and (max-width: 450px) {
body > header {
div#logo {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
nav {
display: none;
}
}
}
@media only screen and (min-width: 1500px) {
.narrow-only {
display: none !important;
}
main {
max-width: 100%;
> div#title {
font-size: 15pt;
h1, h2 {
margin: 0;
}
h2 {
font-style: italic;
font-weight: normal;
display: block;
z-index: 1;
}
margin-top: 0.5em;
margin-bottom: 1em;
@include center-that-bitch;
}
div#post-toc-container {
display: grid;
grid-template-columns: 0.5fr 2fr 0.5fr;
gap: 1em;
aside#toc {
display: block !important;
h3 { @include center-that-bitch; }
div#toc-container {
overflow-x: hidden;
width: 100%;
position: sticky;
top: 2em;
overflow-y: auto;
max-height: 90vh;
bottom: 2em;
ul {
border-left: 2px solid $bluegray-400;
list-style-type: none;
padding-left: 1em;
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
}
}
}
article {
max-width: 100ch;
margin-top: -100px;
margin: auto;
}
}
div.columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
}
}
}
#index {
padding-top: 4em;
a.ico-left {
img {
clip-path: url(#squircle);
width: 96px;
height: 96px;
}
float: left;
margin-right: 1em;
width: 96px;
height: 96px;
}
a.ico-right {
img {
clip-path: url(#squircle);
width: 96px;
height: 96px;
}
float: right;
margin-left: 1em;
width: 96px;
height: 96px;
}
div#social {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
width: 100%;
gap: 8px;
img {
width: 48px;
height: 48px;
clip-path: url(#squircle);
transition: width 0.25s, height 0.25s;
&:hover {
width: 54px;
height: 54px;
}
}
a {
filter: drop-shadow(2px 2px 3px rgba(50, 50, 0, 0.5));
height: 54px;
}
}
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 1500px) {
#index {
display: grid;
grid-template-columns: 0.20fr 0.75fr 0.20fr 1fr 0.20fr;
}
}
details {
margin-top: 1em;
margin-bottom: 1em;
}
// Styles for code
code.kw, span.kw { color: $code-pink; } /* Keyword */
code.dt, span.dt { color: $code-blue; } /* DataType */
code.dv, span.dv { color: $code-orange; } /* DecVal */
code.bn, span.bn { color: $code-orange; } /* BaseN */
code.fl, span.fl { color: $code-orange; } /* Float */
code.ch, span.ch { color: $code-green; } /* Char */
code.st, span.st { color: $code-green; } /* String */
code.co, span.co { color: $code-grey; } /* Comment */
code.ot, span.ot { color: $code-green; } /* Other */
code.al, span.al { color: #ff0000; } /* Alert */
code.fu, span.fu { color: $code-fg; } /* Function */
code.er, span.er { color: #ff0000; } /* Error */
code.wa, span.wa { color: #60a0b0; } /* Warning */
code.cn, span.cn { color: $code-orange; } /* Constant */
code.sc, span.sc { color: $code-yellow; } /* SpecialChar */
code.vs, span.vs { color: $code-blue; } /* VerbatimString */
code.ss, span.ss { color: $code-green; } /* SpecialString */
code.va, span.va { color: $code-fg; } /* Variable */
code.cf, span.cf { color: $code-pink; } /* ControlFlow */
code.op, span.op { color: $code-green; } /* Operator */
code.pp, span.pp { color: $code-orange; } /* Preprocessor */
code.at, span.at { color: $code-green; } /* Attribute */
code.do, span.do { color: $code-red; } /* Documentation */
code.an, span.an { color: $code-red; } /* Annotation */
code.cv, span.cv { color: $code-red; } /* CommentVar */