|
|
- @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 * 1.2;
- 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;
- 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;
- }
- }
- }
-
- @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 */
|