diff options
| author | rmaguiar <rmaguiar@tuta.io> | 2020-07-22 04:07:16 +0300 |
|---|---|---|
| committer | rmaguiar <rmaguiar@tuta.io> | 2020-07-22 04:07:16 +0300 |
| commit | a50277a49583a47000e5aff8ac207acce219144f (patch) | |
| tree | ce90e7ffc9156fc87ab230e451b691207cc379c6 | |
| parent | 54b21900897539aacfa05b1923d19a56a19651c2 (diff) | |
Add checking to font preloading
10 files changed, 1451 insertions, 88 deletions
diff --git a/assets/scss/exclusive/contact-form.scss b/assets/scss/exclusive/contact-form.scss index 65e3d07..b18e647 100644 --- a/assets/scss/exclusive/contact-form.scss +++ b/assets/scss/exclusive/contact-form.scss @@ -14,16 +14,7 @@ $change-transition: {{ .Site.Params.Style.changeTransition | default .Site.Data. label { display: block; - margin-top: 1rem; - - font-family: $heading-font; - font-size: .9rem; - - letter-spacing: .5px; line-height: 1.8rem; - text-transform: uppercase; - - user-select: none; } input[name=name], @@ -31,26 +22,10 @@ $change-transition: {{ .Site.Params.Style.changeTransition | default .Site.Data. input[name=_subject], select, textarea { - background: var(--input-bg); - border: 1px solid var(--input-bd); - color: var(--input-fg); - - font-family: $body-font; - font-size: .9rem; - line-height: 1.5rem; - display: block; margin: 3px 0; max-width: 100%; - - transition: outline .2s ease-in-out; - - outline: 2px solid transparent; - - &:focus { - outline-color: var(--accent); - } } input[name=name], @@ -89,6 +64,7 @@ $change-transition: {{ .Site.Params.Style.changeTransition | default .Site.Data. transition: background-color $change-transition, border .2s ease-in-out, + color $change-transition, outline .2s ease-in-out, opacity .2s ease-in-out; diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 4f430b1..79c3bdd 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -107,8 +107,7 @@ body { transition:
opacity .2s ease-in-out,
- outline .2s ease-in-out,
- padding .2s ease-in-out;
+ outline .2s ease-in-out;
&:focus {
outline-color: var(--accent);
@@ -183,7 +182,6 @@ body { a {
transition:
opacity .2s ease-in-out,
- padding .2s ease-in-out,
outline-color $change-transition;
&:hover {
@@ -218,7 +216,7 @@ body { svg {
fill: var(--fg);
- stroke: var(--fg);
+ stroke: var(--lpress);
stroke-width: .6rem;
}
}
@@ -688,18 +686,11 @@ div.highlight > div.chroma { }
-
mark,
p code,
li code {
border-radius: 2px;
padding: 1px 3px;
-
- word-break: break-all;
-}
-
-p code {
- word-break: break-word;
}
li a {
@@ -707,7 +698,6 @@ li a { }
-
article > header {
section.tags {
@@ -761,8 +751,10 @@ ul.posts { // HACK
// Using a background-image as an overlay...
background-image:
- linear-gradient(0deg, var(--bgmod),
- 100%, transparent);
+ linear-gradient(
+ 0deg, var(--bgmod),
+ 100%, transparent
+ );
border-radius: $border-radius;
@@ -922,7 +914,7 @@ details.toc { transition:
color $change-transition,
opacity .2s ease,
- outline-color .2s ease,
+ outline-color .3s ease,
padding .2s ease;
&:hover {
@@ -1026,10 +1018,8 @@ article > ul { // BUTTONS
-a.btn,
+.btn,
a.footnote-backref,
-section.search-box button,
-section.social a,
input[type=submit] {
background: var(--accent);
border: 1px solid rgba(0,0,0,.3);
@@ -1092,7 +1082,8 @@ ul.tags { background-image:
linear-gradient(
0deg, var(--bgmod),
- 100%, transparent);
+ 100%, transparent
+ );
border-radius: $border-radius;
@@ -1112,8 +1103,7 @@ ul.pagination { text-align: center;
margin: 3rem auto 1rem;
- padding: 0; // override?
-
+
display: flex;
flex-wrap: wrap;
justify-content: center;
@@ -1168,6 +1158,44 @@ ul.pagination { }
+
+
+.label-form {
+ margin-top: 1rem;
+
+ font-family: $heading-font;
+ font-weight: $heading-weight;
+ font-size: .9rem;
+
+ letter-spacing: .5px;
+ text-transform: uppercase;
+
+ user-select: none;
+}
+
+.input-text {
+ background: var(--input-bg);
+ border: 1px solid var(--input-bd);
+ color: var(--input-fg);
+ font-family: $body-font;
+ font-size: .9rem;
+ line-height: 1.5rem;
+
+ transition:
+ background-color $change-transition,
+ border $change-transition,
+ outline .2s ease-in-out;
+
+ outline: 2px solid transparent;
+
+ &:focus {
+ outline-color: var(--accent);
+ }
+}
+
+
+
+
// SEARCH
section.search-box {
@@ -1179,40 +1207,15 @@ section.search-box { }
label {
- color: var(--fg);
- font-family: $heading-font;
- font-weight: $heading-weight;
flex-basis: 100%;
- text-align: left;
-
- font-size: .9rem;
- letter-spacing: .5px;
line-height: 2rem;
- text-transform: uppercase;
}
input[name=q] {
- background: var(--input-bg);
- border: 1px solid var(--input-bd);
- color: var(--input-fg);
- font-family: $body-font;
- font-size: .9rem;
- line-height: 1.5rem;
padding: 6px 12px;
flex: 1;
-
- transition:
- background-color $change-transition,
- border $change-transition,
- outline .2s ease-in-out;
-
+
border-radius: $border-radius 0 0 $border-radius;
-
- outline: 2px solid transparent;
-
- &:focus {
- outline-color: var(--accent);
- }
}
button {
diff --git a/assets/scss/main.scss.bak b/assets/scss/main.scss.bak new file mode 100644 index 0000000..4f430b1 --- /dev/null +++ b/assets/scss/main.scss.bak @@ -0,0 +1,1382 @@ +@charset 'utf-8';
+
+// Import base (variables and mixins), typography and general colors
+@import 'base/_all',
+ 'fonts/_all',
+ 'colors/variables';
+
+
+// Get transition for color changes
+$change-transition: {{ .Site.Params.Style.changeTransition | default .Site.Data.default.style.changeTransition }};
+
+
+
+// Default size
+:root {
+ font-size: $font-size;
+}
+
+
+html {
+ scroll-behavior: smooth;
+
+ // Light mode
+ &[data-mode='light'] {
+ --bg: #{$light-background};
+ --fg: #{$light-foreground};
+
+ --alt-bg: #{$light-alt-background};
+ --alt-fg: #{$light-alt-foreground};
+
+ --dtl: #{$light-details};
+ --err: #{$light-error-color};
+
+ --bgmod: #{$light-bg-modifier};
+
+ --input-bg: #{$light-input-background};
+ --input-fg: #{$light-input-foreground};
+ --input-bd: #{$light-input-border};
+
+ --lpress: #{$light-letterpress};
+ --rlpress: #{$dark-letterpress};
+
+ // Custom Chroma stylesheet
+ {{ if .Site.Params.Style.useCustomChroma | default true }}
+
+ {{ if (fileExists "static/css/chroma/light.css") }}
+ @import '/css/chroma/light.css';
+ {{ else if (resources.Get "scss/colors/chroma/light.scss") }}
+ @import 'colors/chroma/light';
+ {{ end }}
+
+ {{ end }}
+ }
+
+ // Dark mode
+ &[data-mode='dark'] {
+ --bg: #{$dark-background};
+ --fg: #{$dark-foreground};
+
+ --alt-bg: #{$dark-alt-background};
+ --alt-fg: #{$dark-alt-foreground};
+
+ --dtl: #{$dark-details};
+ --err: #{$dark-error-color};
+
+ --bgmod: #{$dark-bg-modifier};
+
+ --input-bg: #{$dark-input-background};
+ --input-fg: #{$dark-input-foreground};
+ --input-bd: #{$dark-input-border};
+
+ --lpress: #{$dark-letterpress};
+ --rlpress: #{$light-letterpress};
+
+ // Lazy way to deter images that can be too bright
+ img {
+ filter: $img-filter;
+ }
+
+ // Custom Chroma stylesheet
+ {{ if .Site.Params.Style.useCustomChroma | default true }}
+
+ {{ if (fileExists "static/css/chroma/dark.css") }}
+ @import '/css/chroma/dark.css';
+ {{ else if (resources.Get "scss/colors/chroma/dark.scss") }}
+ @import 'colors/chroma/dark';
+ {{ end }}
+
+ {{ end }}
+ }
+}
+
+
+body {
+
+ // Some reset
+ margin: 0;
+ padding: 0;
+
+ font-family: $body-font;
+
+ a {
+ color: var(--accent);
+
+ outline: 2px dashed transparent;
+ outline-offset: 2px;
+
+ transition:
+ opacity .2s ease-in-out,
+ outline .2s ease-in-out,
+ padding .2s ease-in-out;
+
+ &:focus {
+ outline-color: var(--accent);
+ }
+
+ &:hover {
+ opacity: .75;
+ }
+
+ word-break: break-word;
+ }
+
+ background: var(--bg);
+ color: var(--fg);
+
+ // Sticky footer
+ display: flex;
+ min-height: 100vh;
+ flex-direction: column;
+
+ > header,
+ > footer {
+ background: var(--alt-bg);
+ color: var(--alt-fg);
+
+ text-align: center;
+ }
+
+ > header {
+
+ padding: 0 1.5rem 1rem;
+
+ nav {
+ margin: .5rem 0 0;
+
+ ul {
+ margin: 0;
+ padding: 0;
+
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ a {
+ display: block;
+
+ word-break: keep-all;
+
+ margin: 0 7.5px 15px;
+ padding: 9px 21px 12px;
+
+ font-size: .75rem;
+ font-weight: $body-bold-weight;
+ text-transform: uppercase;
+ }
+ }
+ }
+ }
+
+ > footer {
+ padding: 1rem 3rem;
+
+ p {
+ line-height: 1.8rem;
+ margin: .75rem 0;
+
+ // HACK
+ // Render "\n" as a line break in the copyright (from config)
+ white-space: pre-wrap;
+ }
+
+ a {
+ transition:
+ opacity .2s ease-in-out,
+ padding .2s ease-in-out,
+ outline-color $change-transition;
+
+ &:hover {
+ opacity: .75;
+ }
+ }
+
+ section {
+ padding: 6px 0 12px;
+
+ input {
+ border: 1px solid var(--fg);
+ outline-offset: 3px;
+
+ padding: 0;
+
+ &::-webkit-color-swatch {
+ border: none;
+ }
+
+ &::-webkit-color-swatch-wrapper {
+ padding: 0;
+ }
+ }
+
+ button {
+ background: 0;
+ border: 0;
+
+ padding: 3px 3px 0;
+
+ svg {
+ fill: var(--fg);
+
+ stroke: var(--fg);
+ stroke-width: .6rem;
+ }
+ }
+
+ input,
+ button {
+ margin: 0 7.5px;
+ outline: 2px dashed transparent;
+
+ transition:
+ outline .2s ease-in-out,
+ transform .2s ease-in-out;
+
+ &:focus {
+ outline-color: var(--accent);
+ }
+
+ &:hover {
+ transform: scale(1.2);
+ }
+
+ // HACK
+ // Override Firefox unnecessary extra inner outline
+ &::-moz-focus-inner {
+ border: 0;
+ }
+ }
+
+ input,
+ button svg {
+ @include squared(42px);
+ }
+ }
+ }
+}
+
+
+ol,
+ul {
+ list-style: none;
+}
+
+
+// Heading 1
+h1 {
+ @include letterpress(var(--rlpress));
+}
+
+// Separator
+hr {
+ border: 1px solid var(--lpress);
+ margin: 2.4rem 0 1.2rem;
+}
+
+// Selection
+::selection {
+ background: var(--accent);
+ color: $selected-fg;
+ text-shadow: none;
+}
+
+// Sticky footer
+div.filler {
+ flex: 1;
+
+ align-items: center;
+ justify-content: center;
+}
+
+
+
+article > header {
+ h1 {
+ line-height: 3rem;
+ }
+
+ img {
+ margin: 1rem 0 0;
+ }
+
+ p {
+ font-size: .9rem;
+ font-style: italic;
+ }
+}
+
+
+// Typography
+%heading-base {
+ font-family: $heading-font;
+ font-weight: $heading-weight;
+}
+
+@for $i from 1 through 6 {
+ h#{$i} {
+ @extend %heading-base;
+
+ font-size: 1rem + $heading-scaling * (6 - $i);
+ }
+}
+
+
+main {
+ p {
+ line-height: 1.65rem;
+ }
+}
+
+code {
+ font-family: $code-font;
+}
+
+
+// If there's no "custom/site-title" partial, style a default one
+{{ if not (or (templates.Exists "partials/custom/site-title") (templates.Exists "partials/custom/site-title.html")) }}
+ body > header {
+ > a {
+ font-family: $heading-font;
+ font-size: 2.1rem;
+ font-weight: $heading-weight;
+
+ transition:
+ color $change-transition,
+ opacity .2s ease-in-out,
+ outline-color $change-transition;
+
+ @include letterpress(var(--rlpress));
+
+ display: inline-block;
+ margin: 1.5rem 0 .75rem;
+ }
+ }
+{{ end }}
+
+
+// WHITE SPACE
+article > header {
+ margin: 0 0 2rem;
+
+ h1 {
+ margin: 9px 0;
+ }
+
+ p {
+ margin: 0;
+ }
+}
+
+article {
+
+ h2,
+ h3 {
+ margin: 2rem 0 1rem;
+ }
+
+ p {
+ margin: 1.5rem 0;
+ }
+}
+
+%reset-top {
+ margin-top: 0;
+}
+
+@for $i from 1 through 6 {
+ h#{$i} + p {
+ @extend %reset-top;
+ }
+}
+
+%padding-top {
+ padding-top: 1rem;
+}
+
+@for $i from 2 through 6 {
+ h#{$i} {
+ @extend %padding-top;
+ }
+}
+
+audio,
+img,
+video {
+ margin: 1.8rem auto;
+}
+
+
+// ANCHOR LINKS
+a.anchor {
+ background-image: none;
+
+ svg {
+ fill: var(--accent);
+
+ vertical-align: middle;
+
+ @include squared(24px);
+ }
+}
+
+
+// Resize the anchor SVG depending on the heading level
+// Also minor spacing ajustment
+@for $i from 2 through 6 {
+ h#{$i} {
+ a.anchor {
+ margin: 0 0 0 (.25rem + .1 * (6 - $i));
+
+ svg {
+ transform: scale(1 + .175 * (6 - $i));
+ }
+ }
+ }
+}
+
+
+// Avoid accidental selection
+label,
+span.lnt,
+summary,
+sup.footnote-ref {
+ user-select: none;
+}
+
+
+// Lists in general
+article ol,
+article ul {
+ li {
+ margin-bottom: .45rem;
+ }
+}
+
+
+ol {
+ counter-reset: a-counter;
+
+ li {
+ counter-increment: a-counter;
+
+ &::before {
+ content: counter(a-counter) '';
+
+ font-size: .85rem;
+ font-weight: $body-bold-weight;
+
+ @include letterpress(var(--lpress));
+
+ background: var(--fg);
+ border: 1px solid var(--lpress);
+ border-radius: $border-radius;
+ color: var(--bg);
+
+ margin-right: 12px;
+ padding: 2px 7.5px;
+ }
+ }
+}
+
+
+
+
+
+
+
+// FOOTNOTES
+section.footnotes {
+ border-top: 2px solid var(--fg);
+
+ // HACK
+ // Some problem caused by flex?
+ display: block;
+
+ margin-top: 2.4rem;
+ padding: 1rem 1rem 1.8rem;
+
+ h2 {
+ margin: 0 0 2rem;
+ }
+
+ a {
+ word-break: break-word;
+ }
+
+ ol li p:first-of-type {
+ display: inline;
+
+ // HACK
+ // This should be useless out of development if using minification (that should strip the white space)
+ {{ if .Site.IsServer }}
+ margin-left: -6px;
+ {{ end }}
+ }
+
+ // HACK
+ // The default "↩" symbol will be rendered differently in
+ // different browsers and platforms
+ // Solved right now by replacing the "↩" symbol with a
+ // SVG (or plain text if it's the user wish)
+ a.footnote-backref {
+ margin: 0 0 0 9px;
+
+ {{ if .Site.Params.Style.hasIconAsFootnoteReturnLink }}
+
+ padding: 0 9px;
+ vertical-align: middle;
+
+ svg {
+ fill: var(--dtl);
+
+ stroke: var(--lpress);
+ stroke-width: .6rem;
+
+ @include squared(18px);
+ }
+
+ {{ else }}
+
+ padding: 0 15px 4.5px;
+ vertical-align: top;
+
+ font-size: .75rem;
+ text-transform: lowercase;
+
+ word-break: break-word;
+
+ {{ end }}
+ }
+
+ // HACK
+ // Ignore the default (markdown-generated) separator before footnotes
+ hr {
+ display: none;
+ }
+}
+
+// Trying something Wikipedia-like
+sup {
+ line-height: 0;
+
+ a.footnote-ref {
+ text-decoration: none;
+
+ &::before {
+ content: '[';
+ }
+
+ &::after {
+ content: ']';
+ }
+ }
+}
+
+
+// For mode change animation
+code,
+.chroma,
+.chroma span {
+ transition:
+ background-color $change-transition,
+ color $change-transition;
+}
+
+
+article > pre,
+section.scroll,
+span.katex-display,
+div.highlight > pre,
+div.highlight > div {
+
+ overflow-x: auto;
+
+ transition:
+ background-color $change-transition,
+ color $change-transition,
+ outline-color .3s ease;
+
+ outline: 3px solid transparent;
+
+ &:focus {
+ outline-color: var(--accent);
+ }
+}
+
+
+// TABLE
+section.scroll {
+
+ border: 1px solid var(--fg);
+
+ & > table {
+ border-collapse: collapse;
+ color: var(--fg);
+
+ font-family: $body-font;
+
+ min-width: 600px;
+ width: 100%;
+
+ td + td {
+ border-left: 1px solid var(--fg);
+ }
+
+ tr + tr {
+ border-top: 1px solid var(--fg);
+ }
+
+ tr:not(:first-child):last-of-type {
+ border-bottom: 1px solid var(--fg);
+ }
+
+ td,
+ th {
+ padding: 9px;
+ }
+
+ th {
+ background: var(--fg);
+ color: var(--bg);
+ }
+
+ tr {
+ transition:
+ background .2s ease-in-out,
+ color .2s ease-in-out;
+
+ &:nth-child(even) {
+ background: var(--alt-bg);
+ }
+
+ &:nth-child(odd) {
+ background: var(--bg);
+ }
+
+ &:hover {
+ background: var(--accent);
+ color: var(--dtl);
+ }
+ }
+ }
+}
+
+
+div.highlight > div table {
+ padding: 0 24px;
+ max-height: $box-max-height;
+}
+
+div.chroma td:first-of-type {
+ padding: 0 18px 0 0;
+}
+
+article > pre,
+span.katex-display,
+div.highlight > pre {
+ padding: var(--hl-pad);
+}
+
+article > pre,
+span.katex-display,
+div.highlight > pre,
+div.highlight > div.chroma {
+ border: 1px solid $box-border;
+
+ line-height: 1.5rem;
+ max-height: $box-max-height;
+}
+
+
+
+mark,
+p code,
+li code {
+ border-radius: 2px;
+ padding: 1px 3px;
+
+ word-break: break-all;
+}
+
+p code {
+ word-break: break-word;
+}
+
+li a {
+ word-break: break-all;
+}
+
+
+
+article > header {
+ section.tags {
+
+ margin: .9rem 0 .6rem;
+
+ ul {
+ padding: 0;
+ }
+
+ li {
+ display: inline;
+ }
+
+ a {
+ display: inline-block;
+
+ margin: 0 7.5px 9px 0;
+ padding: 6px 15px 9px;
+ }
+ }
+}
+
+
+
+ul.posts {
+ padding: 0;
+
+ li {
+ margin: .5rem 0;
+ }
+
+ a {
+ background: var(--accent);
+ color: var(--dtl);
+
+ display: flex;
+ margin: 15px auto;
+ padding: 15px 30px 18px;
+
+ text-decoration: none;
+
+ align-items: center;
+ word-break: break-word;
+
+ p {
+ flex: 1;
+ margin: 0;
+ }
+
+ time {
+ // HACK
+ // Using a background-image as an overlay...
+ background-image:
+ linear-gradient(0deg, var(--bgmod),
+ 100%, transparent);
+
+ border-radius: $border-radius;
+
+ font-size: .85rem;
+
+ margin-left: 1.8rem;
+ padding: 0 9px 2px;
+ }
+ }
+}
+
+// Not sure if I like this
+@include respond-below($mobile-breakpoint) {
+ ul.posts a {
+ flex-direction: column-reverse;
+ align-items: unset;
+
+ time {
+ margin: .3rem 0;
+ }
+ }
+}
+
+
+
+span.katex-display {
+ border: 1px dashed var(--alt-fg);
+
+ overflow-x: auto;
+ padding: 15px 30px;
+
+ &:focus {
+ border: 1px solid $box-border;
+ }
+}
+
+
+
+
+// MEDIA
+img {
+ display: block;
+
+ max-width: 100%;
+ max-height: $box-max-height;
+
+ outline: 3px solid transparent;
+
+ transition:
+ border-color $change-transition,
+ outline-color .3s ease,
+ filter $change-transition;
+
+ &.cover {
+ border: 1px solid var(--fg);
+
+ object-fit: cover;
+ width: 100%;
+ }
+}
+
+article p > img {
+ display: block;
+ margin: 2rem auto;
+ max-width: 100%;
+}
+
+figure {
+ margin: 1.8rem auto;
+
+ img {
+ display: block;
+ margin: 0 auto;
+ max-width: 90%;
+ }
+
+ figcaption {
+ font-size: .85rem;
+ text-align: center;
+
+ margin: .75rem;
+ line-height: 1.5rem;
+ }
+}
+
+video {
+ display: block;
+
+ max-width: 91%;
+ max-height: $box-max-height;
+
+ outline: 3px solid transparent;
+
+ transition:
+ border-color $change-transition,
+ outline-color .3s ease;
+
+ &:focus,
+ &:hover {
+ border-color: var(--accent);
+ outline-color: var(--accent);
+ }
+
+ &.gifoid {
+ margin: 3rem auto;
+ max-width: 90%;
+ }
+}
+
+audio {
+ display: block;
+ width: 90%;
+}
+
+img,
+video {
+ &.border {
+ border: 1px solid var(--fg);
+ }
+
+ // Can be used to override the previous rule
+ &.borderless {
+ border: 0;
+ }
+}
+
+
+
+// Table of Contents
+details.toc {
+
+ background: var(--alt-bg);
+ color: var(--dtl);
+
+ transition:
+ background-color $change-transition,
+ border $change-transition,
+ linear-gradient $change-transition;
+
+ summary {
+ background: var(--accent);
+ border: 1px solid rgba(0,0,0,.3);
+
+ border-radius: $border-radius;
+
+ @include button-like;
+
+ font-family: $heading-font;
+
+ padding: 15px 30px 18.5px;
+
+ outline: 2px dashed transparent;
+ outline-offset: 3px;
+
+ @include letterpress(var(--lpress));
+
+ transition:
+ color $change-transition,
+ opacity .2s ease,
+ outline-color .2s ease,
+ padding .2s ease;
+
+ &:hover {
+ opacity: .75;
+ }
+
+ &:focus {
+ outline-color: var(--accent);
+ }
+
+ }
+
+ &[open] summary {
+ border-radius: $border-radius $border-radius 0 0;
+
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
+
+ padding: 15px 30px;
+
+ ~ * {
+ animation: smoothReveal .3s ease-in-out;
+ }
+ }
+
+ nav#TableOfContents {
+
+ border-style: solid;
+ border-color: rgba(0,0,0,.3);
+ border-width: 0 1px 1px;
+
+ border-radius: 0 0 $border-radius $border-radius;
+
+ box-shadow: inset 0 -3px 0 rgba(0,0,0,.3);
+
+ padding: 6px 15px 15px 9px;
+
+ li {
+ &:first-of-type {
+ margin-top: .3rem;
+ }
+ }
+
+ ul li,
+ ol li {
+ &:not(:last-of-type),
+ ul li:first-of-type,
+ ol li:first-of-type {
+ margin-bottom: .3rem;
+ }
+ }
+ }
+}
+
+#TableOfContents,
+section.footnotes ol,
+article > ul,
+article > ol {
+ line-height: 1.5rem;
+}
+
+#TableOfContents ul,
+section.footnotes ol {
+ padding-left: 24px;
+}
+
+article > ul,
+article > ul ul,
+article > ol,
+article > ol ol {
+ padding: 0 24px 0;
+}
+
+#TableOfContents ul,
+article > ul {
+
+ li:before {
+ content: '';
+ margin-right: 12px;
+
+ background: var(--fg);
+ border-radius: $border-radius;
+
+ @include squared(18px);
+
+ display: inline-block;
+
+ // HACK
+ // Cheap vertical align
+ margin-bottom: -3px;
+ }
+}
+
+
+
+// Animation
+@keyframes smoothReveal {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+
+
+
+// BUTTONS
+a.btn,
+a.footnote-backref,
+section.search-box button,
+section.social a,
+input[type=submit] {
+ background: var(--accent);
+ border: 1px solid rgba(0,0,0,.3);
+ color: var(--dtl);
+
+ transition:
+ background-color $change-transition,
+ color $change-transition,
+ opacity .2s ease-in-out,
+ outline-color .3s ease;
+
+ border-radius: $border-radius;
+
+ @include button-like;
+
+ text-decoration: none;
+
+ @include letterpress(var(--lpress));
+
+ &:hover {
+ opacity: .75;
+ }
+}
+
+button,
+input[type=color],
+summary {
+ cursor: pointer;
+}
+
+
+
+// Categories
+{{ if .Site.Taxonomies.categories }}
+ li.cats a {
+ font-weight: bold;
+ }
+{{ end }}
+
+
+
+ul.tags {
+ display: flex;
+ flex-wrap: wrap;
+
+ padding: 0;
+
+ a {
+ display: flex;
+ flex: 1;
+
+ align-items: center;
+
+ margin: 0 9px 9px 0;
+ padding: 7.5px 18px 10.5px;
+
+ word-break: keep-all;
+
+ span {
+ background-image:
+ linear-gradient(
+ 0deg, var(--bgmod),
+ 100%, transparent);
+
+ border-radius: $border-radius;
+
+ margin-left: .45rem;
+ padding: 0 6px 1px;
+
+ font-size: .85rem;
+ }
+ }
+}
+
+
+
+ul.pagination {
+ font-family: $body-font;
+ font-weight: $body-bold-weight;
+ text-align: center;
+
+ margin: 3rem auto 1rem;
+ padding: 0; // override?
+
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ li {
+ display: inline-block;
+
+ transition:
+ background .2s ease-in-out,
+ border .2s ease-in-out;
+
+ a,
+ &.current p {
+ display: block;
+ margin: 0 9px 9px 0;
+ padding: 7.5px 12px 10.5px;
+
+ width: 21px;
+ }
+
+ a {
+ color: var(--dtl);
+ }
+
+ &.current p {
+ background: var(--alt-bg);
+ border: 1px solid rgba(0,0,0,.45);
+ border-radius: $border-radius;
+ color: var(--alt-fg);
+
+ line-height: inherit;
+
+ user-select: none;
+
+ @include button-like;
+
+ @include letterpress(var(--lpress));
+ }
+ }
+
+ svg {
+ fill: currentColor;
+
+ @include squared(18px);
+
+ display: inline-block;
+
+ // HACK
+ // Cheap vertical align
+ margin: auto auto -2px;
+ }
+}
+
+
+// SEARCH
+section.search-box {
+
+ form {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: stretch;
+ }
+
+ label {
+ color: var(--fg);
+ font-family: $heading-font;
+ font-weight: $heading-weight;
+ flex-basis: 100%;
+ text-align: left;
+
+ font-size: .9rem;
+ letter-spacing: .5px;
+ line-height: 2rem;
+ text-transform: uppercase;
+ }
+
+ input[name=q] {
+ background: var(--input-bg);
+ border: 1px solid var(--input-bd);
+ color: var(--input-fg);
+ font-family: $body-font;
+ font-size: .9rem;
+ line-height: 1.5rem;
+ padding: 6px 12px;
+ flex: 1;
+
+ transition:
+ background-color $change-transition,
+ border $change-transition,
+ outline .2s ease-in-out;
+
+ border-radius: $border-radius 0 0 $border-radius;
+
+ outline: 2px solid transparent;
+
+ &:focus {
+ outline-color: var(--accent);
+ }
+ }
+
+ button {
+ border-radius: 0 $border-radius $border-radius 0;
+ padding: 6px 30px;
+
+ outline: 2px dashed transparent;
+ outline-offset: 2px;
+
+ &:focus {
+ outline-color: var(--accent);
+ }
+
+ &:hover {
+ opacity: .75;
+ }
+
+ svg {
+ @include squared(15px);
+
+ fill: currentColor;
+ stroke: var(--lpress);
+ stroke-width: 9px;
+ }
+ }
+}
+
+#search-info {
+ margin: 1rem 0 2rem;
+
+ + ul {
+ margin: 0 0 6rem;
+ }
+}
+
+
+p.error {
+ color: var(--err);
+}
+
+mark {
+ background: var(--accent);
+
+ // TODO
+ // Not a11y enough
+ filter:
+ contrast(1.2)
+ invert(1);
+}
+
+// BUG
+// For some reason, the default "dotted" rendering seems broken in Chrome
+abbr {
+ text-decoration-style: solid;
+}
+
+blockquote {
+ background: var(--alt-bg);
+ border-style: solid;
+ border-width: 1px 1px 1px 12px;
+ color: var(--alt-fg);
+
+ margin: var(--blk-mg);
+ padding: 0 30px;
+
+ p {
+ margin: 1.2rem 0;
+ }
+}
+
+kbd {
+ background-color: #eee;
+ border: 1px solid #b4b4b4;
+ border-radius: $border-radius;
+
+ box-shadow:
+ 0 1px 1px rgba(0, 0, 0, .2),
+ 0 2px 0 0 rgba(255, 255, 255, .7) inset;
+
+ color: #333;
+ display: inline-block;
+ font-size: .85em;
+ font-weight: $body-bold-weight;
+ line-height: 1;
+ padding: 2px;
+ white-space: nowrap;
+
+ > kbd {
+ margin: 0 2px;
+ }
+}
+
+
+// RESPONSIVENESS
+main {
+ margin: 90px auto;
+ padding: 0 15px;
+
+ max-width: 660px;
+}
+
+article {
+ margin: 90px auto 120px;
+}
+
+
+html {
+ --blk-mg: 1.05rem .75rem;
+ --il-pad: 0 12px;
+
+ --hl-pad: 15.75px 18px;
+}
+
+@include respond-above($mobile-breakpoint) {
+ html {
+ --blk-mg: 2.1rem 1.5rem;
+ --il-pad: 6px 24px;
+
+ --hl-pad: 21px 24px;
+ }
+}
+
+
+{{ if .Site.Params.Style.hideAnchors }}
+
+ @include respond-above($mobile-breakpoint) {
+ a.anchor:not(:focus) {
+ opacity: 0;
+ }
+
+ %visible {
+ opacity: 1;
+ }
+
+ @for $i from 2 through 6 {
+ h#{$i} > a:focus + a.anchor,
+ h#{$i}:hover > a.anchor {
+ @extend %visible;
+ }
+ }
+ }
+
+{{ end }}
+
+{{ if .Site.Params.hasNoscriptNotice }}
+ p.noscript {
+ font-weight: bold;
+ }
+{{ end }}
+
+
+// Rich Content
+{{ if (fileExists "static/css/rich-content.css") }}
+ @import '/css/rich-content.css';
+{{ else if (resources.Get "scss/rich-content.scss") }}
+ @import 'rich-content';
+{{ end }}
+
+
+// TODO
+// Custom user stuff
+// This isn't good enough
+{{ if (fileExists "static/css/custom.css") }}
+ @import '/css/custom.css';
+{{ else if (resources.Get "scss/custom.scss") }}
+ @import 'custom';
+{{ end }}
diff --git a/exampleSite/resources/_gen/assets/scss/scss/exclusive/contact-form.scss_1b2bf5373d097200b186ddaf7c11814c.content b/exampleSite/resources/_gen/assets/scss/scss/exclusive/contact-form.scss_1b2bf5373d097200b186ddaf7c11814c.content index d75c8bb..7d600b6 100644 --- a/exampleSite/resources/_gen/assets/scss/scss/exclusive/contact-form.scss_1b2bf5373d097200b186ddaf7c11814c.content +++ b/exampleSite/resources/_gen/assets/scss/scss/exclusive/contact-form.scss_1b2bf5373d097200b186ddaf7c11814c.content @@ -1 +1 @@ -#contact{margin:1.5rem 0}#contact label{display:block;margin-top:1rem;font-family:oswald,sans-serif;font-size:.9rem;letter-spacing:.5px;line-height:1.8rem;text-transform:uppercase;user-select:none}#contact input[name=name],#contact input[name=_replyto],#contact input[name=_subject],#contact select,#contact textarea{background:var(--input-bg);border:1px solid var(--input-bd);color:var(--input-fg);font-family:open sans,sans-serif;font-size:.9rem;line-height:1.5rem;display:block;margin:3px 0;max-width:100%;transition:outline .2s ease-in-out;outline:2px solid transparent}#contact input[name=name]:focus,#contact input[name=_replyto]:focus,#contact input[name=_subject]:focus,#contact select:focus,#contact textarea:focus{outline-color:var(--accent)}#contact input[name=name],#contact input[name=_replyto],#contact input[name=_subject]{min-width:240px;padding:6px 12px}#contact select{min-width:210px;padding:6px}#contact textarea{padding:9px 15px;width:90%;height:auto}#contact input[type=submit]{cursor:pointer;font-family:oswald,sans-serif;font-size:.75rem;text-transform:uppercase;letter-spacing:.05rem;margin-top:1.2rem;padding:12px 42px 15px;outline:2px dashed transparent;outline-offset:2px;transition:background-color .3s ease,border .2s ease-in-out,outline .2s ease-in-out,opacity .2s ease-in-out}#contact input[type=submit]:focus{outline-color:var(--accent)}#contact input[type=submit]:hover{opacity:.75}#contact input[type=submit]::-moz-focus-inner{border:0}@supports(-moz-appearance:meterbar){#contact select{color:var(--fg);color:transparent;text-shadow:0 0 0 var(--fg)}}
\ No newline at end of file +#contact{margin:1.5rem 0}#contact label{display:block;line-height:1.8rem}#contact input[name=name],#contact input[name=_replyto],#contact input[name=_subject],#contact select,#contact textarea{display:block;margin:3px 0;max-width:100%}#contact input[name=name],#contact input[name=_replyto],#contact input[name=_subject]{min-width:240px;padding:6px 12px}#contact select{min-width:210px;padding:6px}#contact textarea{padding:9px 15px;width:90%;height:auto}#contact input[type=submit]{cursor:pointer;font-family:oswald,sans-serif;font-size:.75rem;text-transform:uppercase;letter-spacing:.05rem;margin-top:1.2rem;padding:12px 42px 15px;outline:2px dashed transparent;outline-offset:2px;transition:background-color .3s ease,border .2s ease-in-out,color .3s ease,outline .2s ease-in-out,opacity .2s ease-in-out}#contact input[type=submit]:focus{outline-color:var(--accent)}#contact input[type=submit]:hover{opacity:.75}#contact input[type=submit]::-moz-focus-inner{border:0}@supports(-moz-appearance:meterbar){#contact select{color:var(--fg);color:transparent;text-shadow:0 0 0 var(--fg)}}
\ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_694b6a5caed62875bf9278dff98b7f5e.content b/exampleSite/resources/_gen/assets/scss/scss/main.scss_694b6a5caed62875bf9278dff98b7f5e.content index 9f667f7..1b70feb 100644 --- a/exampleSite/resources/_gen/assets/scss/scss/main.scss_694b6a5caed62875bf9278dff98b7f5e.content +++ b/exampleSite/resources/_gen/assets/scss/scss/main.scss_694b6a5caed62875bf9278dff98b7f5e.content @@ -1 +1 @@ -@font-face{font-family:oswald;font-style:normal;font-weight:700;font-display:swap;src:local("Oswald"),url(../fonts/oswald-v29-latin-700.woff2)format("woff2"),url(../fonts/oswald-v29-latin-700.woff)format("woff")}@font-face{font-family:open sans;font-style:normal;font-weight:400;font-display:swap;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(../fonts/open-sans-v17-latin-regular.woff2)format("woff2"),url(../fonts/open-sans-v17-latin-regular.woff)format("woff")}@font-face{font-family:open sans;font-style:normal;font-weight:700;font-display:swap;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(../fonts/open-sans-v17-latin-700.woff2)format("woff2"),url(../fonts/open-sans-v17-latin-700.woff)format("woff")}@font-face{font-family:open sans;font-style:italic;font-weight:400;font-display:swap;src:local("Open Sans Italic"),local("OpenSans-Italic"),url(../fonts/open-sans-v17-latin-italic.woff2)format("woff2"),url(../fonts/open-sans-v17-latin-italic.woff)format("woff")}:root{font-size:18px}html{scroll-behavior:smooth}html[data-mode=light]{--bg: #ddd;--fg: #444;--alt-bg: #d6d6d6;--alt-fg: #333;--dtl: #fdfdfd;--err: #c70000;--bgmod: rgba(0, 0, 0, 0.3);--input-bg: #fefefe;--input-fg: #111;--input-bd: #ccc;--lpress: rgba(0, 0, 0, 0.2);--rlpress: rgba(255, 255, 255, 0.2)}html[data-mode=light] .chroma,html[data-mode=light] pre,html[data-mode=light] p code,html[data-mode=light] li code{color:#93a1a1;background-color:#002b36}html[data-mode=light] .chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}html[data-mode=light] .chroma .lntable{border-spacing:0;margin:0;border:0;width:auto;display:block}html[data-mode=light] .chroma .hl{display:block;width:100%;background-color:rgba(0,0,0,.3)}html[data-mode=light] .chroma .nb{color:#b58900}html[data-mode=light] .chroma .ge{font-style:italic}html[data-mode=light] .chroma .gr{color:#e8625f;font-weight:700}html[data-mode=light] .chroma .gs{font-weight:700}html[data-mode=light] .chroma .x,html[data-mode=light] .chroma .kc,html[data-mode=light] .chroma .no,html[data-mode=light] .chroma .ni,html[data-mode=light] .chroma .ne,html[data-mode=light] .chroma .se,html[data-mode=light] .chroma .gh{color:#e9662f}html[data-mode=light] .chroma .lnt,html[data-mode=light] .chroma .ln{margin-right:.4em;padding:0 .4em;color:#848f8f}html[data-mode=light] .chroma .k,html[data-mode=light] .chroma .kn,html[data-mode=light] .chroma .kp,html[data-mode=light] .chroma .o,html[data-mode=light] .chroma .ow,html[data-mode=light] .chroma .cs,html[data-mode=light] .chroma .cp,html[data-mode=light] .chroma .cpf,html[data-mode=light] .chroma .gi{color:#859900}html[data-mode=light] .chroma .kd,html[data-mode=light] .chroma .kr,html[data-mode=light] .chroma .bp,html[data-mode=light] .chroma .nc,html[data-mode=light] .chroma .nd,html[data-mode=light] .chroma .nf,html[data-mode=light] .chroma .nt,html[data-mode=light] .chroma .nv,html[data-mode=light] .chroma .gu{color:#3294da}html[data-mode=light] .chroma .kt,html[data-mode=light] .chroma .sr,html[data-mode=light] .chroma .gd{color:#e8625f}html[data-mode=light] .chroma .s,html[data-mode=light] .chroma .sa,html[data-mode=light] .chroma .sc,html[data-mode=light] .chroma .dl,html[data-mode=light] .chroma .s2,html[data-mode=light] .chroma .si,html[data-mode=light] .chroma .sx,html[data-mode=light] .chroma .s1,html[data-mode=light] .chroma .ss,html[data-mode=light] .chroma .m,html[data-mode=light] .chroma .mb,html[data-mode=light] .chroma .mf,html[data-mode=light] .chroma .mh,html[data-mode=light] .chroma .mi,html[data-mode=light] .chroma .il,html[data-mode=light] .chroma .mo{color:#2aa198}html[data-mode=light] .chroma .sb,html[data-mode=light] .chroma .c,html[data-mode=light] .chroma .ch,html[data-mode=light] .chroma .cm,html[data-mode=light] .chroma .c1{color:#759299}html[data-mode=dark]{--bg: #1f1f1f;--fg: #bbb;--alt-bg: #1c1c1c;--alt-fg: #ddd;--dtl: #1a1a1a;--err: #ff3131;--bgmod: rgba(255, 255, 255, 0.3);--input-bg: #222;--input-fg: #f0f0f0;--input-bd: #262626;--lpress: rgba(255, 255, 255, 0.2);--rlpress: rgba(0, 0, 0, 0.2)}html[data-mode=dark] img{filter:contrast(0.85)grayscale(0.3)}html[data-mode=dark] .chroma,html[data-mode=dark] pre,html[data-mode=dark] p code,html[data-mode=dark] li code{color:#f8f8f2;background:#272822}html[data-mode=dark] .chroma .err{color:#eb0083;background-color:#1e0010}html[data-mode=dark] .chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}html[data-mode=dark] .chroma .lntable{border-spacing:0;margin:0;border:0;width:auto;display:block}html[data-mode=dark] .chroma .hl{display:block;width:100%;background-color:rgba(0,0,0,.3)}html[data-mode=dark] .chroma .ge{font-style:italic}html[data-mode=dark] .chroma .gs{font-weight:700}html[data-mode=dark] .chroma .lnt,html[data-mode=dark] .chroma .ln{margin-right:.4em;padding:0 .4em;color:#8e8e8e}html[data-mode=dark] .chroma .k,html[data-mode=dark] .chroma .kc,html[data-mode=dark] .chroma .kd,html[data-mode=dark] .chroma .kp,html[data-mode=dark] .chroma .kr,html[data-mode=dark] .chroma .kt,html[data-mode=dark] .chroma .no{color:#66d9ef}html[data-mode=dark] .chroma .kn,html[data-mode=dark] .chroma .nt,html[data-mode=dark] .chroma .o,html[data-mode=dark] .chroma .ow,html[data-mode=dark] .chroma .gd{color:#f94e8a}html[data-mode=dark] .chroma .na,html[data-mode=dark] .chroma .nc,html[data-mode=dark] .chroma .nd,html[data-mode=dark] .chroma .ne,html[data-mode=dark] .chroma .nf,html[data-mode=dark] .chroma .nx,html[data-mode=dark] .chroma .gi{color:#a6e22e}html[data-mode=dark] .chroma .l,html[data-mode=dark] .chroma .se,html[data-mode=dark] .chroma .m,html[data-mode=dark] .chroma .mb,html[data-mode=dark] .chroma .mf,html[data-mode=dark] .chroma .mh,html[data-mode=dark] .chroma .mi,html[data-mode=dark] .chroma .il,html[data-mode=dark] .chroma .mo{color:#ae81ff}html[data-mode=dark] .chroma .ld,html[data-mode=dark] .chroma .s,html[data-mode=dark] .chroma .sa,html[data-mode=dark] .chroma .sb,html[data-mode=dark] .chroma .sc,html[data-mode=dark] .chroma .dl,html[data-mode=dark] .chroma .sd,html[data-mode=dark] .chroma .s2,html[data-mode=dark] .chroma .sh,html[data-mode=dark] .chroma .si,html[data-mode=dark] .chroma .sx,html[data-mode=dark] .chroma .sr,html[data-mode=dark] .chroma .s1,html[data-mode=dark] .chroma .ss{color:#e6db74}html[data-mode=dark] .chroma .c,html[data-mode=dark] .chroma .ch,html[data-mode=dark] .chroma .cm,html[data-mode=dark] .chroma .c1,html[data-mode=dark] .chroma .cs,html[data-mode=dark] .chroma .cp,html[data-mode=dark] .chroma .cpf,html[data-mode=dark] .chroma .gu{color:#949076}body{margin:0;padding:0;font-family:open sans,sans-serif;background:var(--bg);color:var(--fg);display:flex;min-height:100vh;flex-direction:column}body a{color:var(--accent);outline:2px dashed transparent;outline-offset:2px;transition:opacity .2s ease-in-out,outline .2s ease-in-out,padding .2s ease-in-out;word-break:break-word}body a:focus{outline-color:var(--accent)}body a:hover{opacity:.75}body>header,body>footer{background:var(--alt-bg);color:var(--alt-fg);text-align:center}body>header{padding:0 1.5rem 1rem}body>header nav{margin:.5rem 0 0}body>header nav ul{margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}body>header nav ul a{display:block;word-break:keep-all;margin:0 7.5px 15px;padding:9px 21px 12px;font-size:.75rem;font-weight:700;text-transform:uppercase}body>footer{padding:1rem 3rem}body>footer p{line-height:1.8rem;margin:.75rem 0;white-space:pre-wrap}body>footer a{transition:opacity .2s ease-in-out,padding .2s ease-in-out,outline-color .3s ease}body>footer a:hover{opacity:.75}body>footer section{padding:6px 0 12px}body>footer section input{border:1px solid var(--fg);outline-offset:3px;padding:0}body>footer section input::-webkit-color-swatch{border:none}body>footer section input::-webkit-color-swatch-wrapper{padding:0}body>footer section button{background:0;border:0;padding:3px 3px 0}body>footer section button svg{fill:var(--fg);stroke:var(--fg);stroke-width:.6rem}body>footer section input,body>footer section button{margin:0 7.5px;outline:2px dashed transparent;transition:outline .2s ease-in-out,transform .2s ease-in-out}body>footer section input:focus,body>footer section button:focus{outline-color:var(--accent)}body>footer section input:hover,body>footer section button:hover{transform:scale(1.2)}body>footer section input::-moz-focus-inner,body>footer section button::-moz-focus-inner{border:0}body>footer section input,body>footer section button svg{width:42px;height:42px}ol,ul{list-style:none}h1{text-shadow:0 1px 0 var(--rlpress),1px 0 0 var(--rlpress)}hr{border:1px solid var(--lpress);margin:2.4rem 0 1.2rem}::selection{background:var(--accent);color:#f0f0f0;text-shadow:none}div.filler{flex:1;align-items:center;justify-content:center}article>header h1{line-height:3rem}article>header img{margin:1rem 0 0}article>header p{font-size:.9rem;font-style:italic}h6,h5,h4,h3,h2,h1{font-family:oswald,sans-serif;font-weight:700}h1{font-size:2.25rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}main p{line-height:1.65rem}code{font-family:monospace}body>header>a{font-family:oswald,sans-serif;font-size:2.1rem;font-weight:700;transition:color .3s ease,opacity .2s ease-in-out,outline-color .3s ease;text-shadow:0 1px 0 var(--rlpress),1px 0 0 var(--rlpress);display:inline-block;margin:1.5rem 0 .75rem}article>header{margin:0 0 2rem}article>header h1{margin:9px 0}article>header p{margin:0}article h2,article h3{margin:2rem 0 1rem}article p{margin:1.5rem 0}h6+p,h5+p,h4+p,h3+p,h2+p,h1+p{margin-top:0}h6,h5,h4,h3,h2{padding-top:1rem}audio,img,video{margin:1.8rem auto}a.anchor{background-image:none}a.anchor svg{fill:var(--accent);vertical-align:middle;width:24px;height:24px}h2 a.anchor{margin:0 0 0 .65rem}h2 a.anchor svg{transform:scale(1.7)}h3 a.anchor{margin:0 0 0 .55rem}h3 a.anchor svg{transform:scale(1.525)}h4 a.anchor{margin:0 0 0 .45rem}h4 a.anchor svg{transform:scale(1.35)}h5 a.anchor{margin:0 0 0 .35rem}h5 a.anchor svg{transform:scale(1.175)}h6 a.anchor{margin:0 0 0 .25rem}h6 a.anchor svg{transform:scale(1)}label,span.lnt,summary,sup.footnote-ref{user-select:none}article ol li,article ul li{margin-bottom:.45rem}ol{counter-reset:a-counter}ol li{counter-increment:a-counter}ol li::before{content:counter(a-counter)"";font-size:.85rem;font-weight:700;text-shadow:0 1px 0 var(--lpress),1px 0 0 var(--lpress);background:var(--fg);border:1px solid var(--lpress);border-radius:2px;color:var(--bg);margin-right:12px;padding:2px 7.5px}section.footnotes{border-top:2px solid var(--fg);display:block;margin-top:2.4rem;padding:1rem 1rem 1.8rem}section.footnotes h2{margin:0 0 2rem}section.footnotes a{word-break:break-word}section.footnotes ol li p:first-of-type{display:inline;margin-left:-6px}section.footnotes a.footnote-backref{margin:0 0 0 9px;padding:0 9px;vertical-align:middle}section.footnotes a.footnote-backref svg{fill:var(--dtl);stroke:var(--lpress);stroke-width:.6rem;width:18px;height:18px}section.footnotes hr{display:none}sup{line-height:0}sup a.footnote-ref{text-decoration:none}sup a.footnote-ref::before{content:'['}sup a.footnote-ref::after{content:']'}code,.chroma,.chroma span{transition:background-color .3s ease,color .3s ease}article>pre,section.scroll,span.katex-display,div.highlight>pre,div.highlight>div{overflow-x:auto;transition:background-color .3s ease,color .3s ease,outline-color .3s ease;outline:3px solid transparent}article>pre:focus,section.scroll:focus,span.katex-display:focus,div.highlight>pre:focus,div.highlight>div:focus{outline-color:var(--accent)}section.scroll{border:1px solid var(--fg)}section.scroll>table{border-collapse:collapse;color:var(--fg);font-family:open sans,sans-serif;min-width:600px;width:100%}section.scroll>table td+td{border-left:1px solid var(--fg)}section.scroll>table tr+tr{border-top:1px solid var(--fg)}section.scroll>table tr:not(:first-child):last-of-type{border-bottom:1px solid var(--fg)}section.scroll>table td,section.scroll>table th{padding:9px}section.scroll>table th{background:var(--fg);color:var(--bg)}section.scroll>table tr{transition:background .2s ease-in-out,color .2s ease-in-out}section.scroll>table tr:nth-child(even){background:var(--alt-bg)}section.scroll>table tr:nth-child(odd){background:var(--bg)}section.scroll>table tr:hover{background:var(--accent);color:var(--dtl)}div.highlight>div table{padding:0 24px;max-height:75vh}div.chroma td:first-of-type{padding:0 18px 0 0}article>pre,span.katex-display,div.highlight>pre{padding:var(--hl-pad)}article>pre,span.katex-display,div.highlight>pre,div.highlight>div.chroma{border:1px solid #222;line-height:1.5rem;max-height:75vh}mark,p code,li code{border-radius:2px;padding:1px 3px;word-break:break-all}p code{word-break:break-word}li a{word-break:break-all}article>header section.tags{margin:.9rem 0 .6rem}article>header section.tags ul{padding:0}article>header section.tags li{display:inline}article>header section.tags a{display:inline-block;margin:0 7.5px 9px 0;padding:6px 15px 9px}ul.posts{padding:0}ul.posts li{margin:.5rem 0}ul.posts a{background:var(--accent);color:var(--dtl);display:flex;margin:15px auto;padding:15px 30px 18px;text-decoration:none;align-items:center;word-break:break-word}ul.posts a p{flex:1;margin:0}ul.posts a time{background-image:linear-gradient(0deg,var(--bgmod),100%,transparent);border-radius:2px;font-size:.85rem;margin-left:1.8rem;padding:0 9px 2px}@media(max-width:768px){ul.posts a{flex-direction:column-reverse;align-items:unset}ul.posts a time{margin:.3rem 0}}span.katex-display{border:1px dashed var(--alt-fg);overflow-x:auto;padding:15px 30px}span.katex-display:focus{border:1px solid #222}img{display:block;max-width:100%;max-height:75vh;outline:3px solid transparent;transition:border-color .3s ease,outline-color .3s ease,filter .3s ease}img.cover{border:1px solid var(--fg);object-fit:cover;width:100%}article p>img{display:block;margin:2rem auto;max-width:100%}figure{margin:1.8rem auto}figure img{display:block;margin:0 auto;max-width:90%}figure figcaption{font-size:.85rem;text-align:center;margin:.75rem;line-height:1.5rem}video{display:block;max-width:91%;max-height:75vh;outline:3px solid transparent;transition:border-color .3s ease,outline-color .3s ease}video:focus,video:hover{border-color:var(--accent);outline-color:var(--accent)}video.gifoid{margin:3rem auto;max-width:90%}audio{display:block;width:90%}img.border,video.border{border:1px solid var(--fg)}img.borderless,video.borderless{border:0}details.toc{background:var(--alt-bg);color:var(--dtl);transition:background-color .3s ease,border .3s ease,linear-gradient .3s ease}details.toc summary{background:var(--accent);border:1px solid rgba(0,0,0,.3);border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,0,0,.3);font-family:oswald,sans-serif;padding:15px 30px 18.5px;outline:2px dashed transparent;outline-offset:3px;text-shadow:0 1px 0 var(--lpress),1px 0 0 var(--lpress);transition:color .3s ease,opacity .2s ease,outline-color .2s ease,padding .2s ease}details.toc summary:hover{opacity:.75}details.toc summary:focus{outline-color:var(--accent)}details.toc[open] summary{border-radius:2px 2px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);padding:15px 30px}details.toc[open] summary~*{animation:smoothReveal .3s ease-in-out}details.toc nav#TableOfContents{border-style:solid;border-color:rgba(0,0,0,.3);border-width:0 1px 1px;border-radius:0 0 2px 2px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.3);padding:6px 15px 15px 9px}details.toc nav#TableOfContents li:first-of-type{margin-top:.3rem}details.toc nav#TableOfContents ul li:not(:last-of-type),details.toc nav#TableOfContents ul li ul li:first-of-type,details.toc nav#TableOfContents ul li ol li:first-of-type,details.toc nav#TableOfContents ol li:not(:last-of-type),details.toc nav#TableOfContents ol li ul li:first-of-type,details.toc nav#TableOfContents ol li ol li:first-of-type{margin-bottom:.3rem}#TableOfContents,section.footnotes ol,article>ul,article>ol{line-height:1.5rem}#TableOfContents ul,section.footnotes ol{padding-left:24px}article>ul,article>ul ul,article>ol,article>ol ol{padding:0 24px}#TableOfContents ul li:before,article>ul li:before{content:'';margin-right:12px;background:var(--fg);border-radius:2px;width:18px;height:18px;display:inline-block;margin-bottom:-3px}@keyframes smoothReveal{0%{opacity:0}100%{opacity:1}}a.btn,a.footnote-backref,section.search-box button,section.social a,input[type=submit]{background:var(--accent);border:1px solid rgba(0,0,0,.3);color:var(--dtl);transition:background-color .3s ease,color .3s ease,opacity .2s ease-in-out,outline-color .3s ease;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,0,0,.3);text-decoration:none;text-shadow:0 1px 0 var(--lpress),1px 0 0 var(--lpress)}a.btn:hover,a.footnote-backref:hover,section.search-box button:hover,section.social a:hover,input[type=submit]:hover{opacity:.75}button,input[type=color],summary{cursor:pointer}li.cats a{font-weight:700}ul.tags{display:flex;flex-wrap:wrap;padding:0}ul.tags a{display:flex;flex:1;align-items:center;margin:0 9px 9px 0;padding:7.5px 18px 10.5px;word-break:keep-all}ul.tags a span{background-image:linear-gradient(0deg,var(--bgmod),100%,transparent);border-radius:2px;margin-left:.45rem;padding:0 6px 1px;font-size:.85rem}ul.pagination{font-family:open sans,sans-serif;font-weight:700;text-align:center;margin:3rem auto 1rem;padding:0;display:flex;flex-wrap:wrap;justify-content:center}ul.pagination li{display:inline-block;transition:background .2s ease-in-out,border .2s ease-in-out}ul.pagination li a,ul.pagination li.current p{display:block;margin:0 9px 9px 0;padding:7.5px 12px 10.5px;width:21px}ul.pagination li a{color:var(--dtl)}ul.pagination li.current p{background:var(--alt-bg);border:1px solid rgba(0,0,0,.45);border-radius:2px;color:var(--alt-fg);line-height:inherit;user-select:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,0,0,.3);text-shadow:0 1px 0 var(--lpress),1px 0 0 var(--lpress)}ul.pagination svg{fill:currentColor;width:18px;height:18px;display:inline-block;margin:auto auto -2px}section.search-box form{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch}section.search-box label{color:var(--fg);font-family:oswald,sans-serif;font-weight:700;flex-basis:100%;text-align:left;font-size:.9rem;letter-spacing:.5px;line-height:2rem;text-transform:uppercase}section.search-box input[name=q]{background:var(--input-bg);border:1px solid var(--input-bd);color:var(--input-fg);font-family:open sans,sans-serif;font-size:.9rem;line-height:1.5rem;padding:6px 12px;flex:1;transition:background-color .3s ease,border .3s ease,outline .2s ease-in-out;border-radius:2px 0 0 2px;outline:2px solid transparent}section.search-box input[name=q]:focus{outline-color:var(--accent)}section.search-box button{border-radius:0 2px 2px 0;padding:6px 30px;outline:2px dashed transparent;outline-offset:2px}section.search-box button:focus{outline-color:var(--accent)}section.search-box button:hover{opacity:.75}section.search-box button svg{width:15px;height:15px;fill:currentColor;stroke:var(--lpress);stroke-width:9px}#search-info{margin:1rem 0 2rem}#search-info+ul{margin:0 0 6rem}p.error{color:var(--err)}mark{background:var(--accent);filter:contrast(1.2)invert(1)}abbr{text-decoration-style:solid}blockquote{background:var(--alt-bg);border-style:solid;border-width:1px 1px 1px 12px;color:var(--alt-fg);margin:var(--blk-mg);padding:0 30px}blockquote p{margin:1.2rem 0}kbd{background-color:#eee;border:1px solid #b4b4b4;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.2),0 2px 0 0 rgba(255,255,255,.7)inset;color:#333;display:inline-block;font-size:.85em;font-weight:700;line-height:1;padding:2px;white-space:nowrap}kbd>kbd{margin:0 2px}main{margin:90px auto;padding:0 15px;max-width:660px}article{margin:90px auto 120px}html{--blk-mg: 1.05rem .75rem;--il-pad: 0 12px;--hl-pad: 15.75px 18px}@media(min-width:769px){html{--blk-mg: 2.1rem 1.5rem;--il-pad: 6px 24px;--hl-pad: 21px 24px}}@media(min-width:769px){a.anchor:not(:focus){opacity:0}h6>a:focus+a.anchor,h6:hover>a.anchor,h5>a:focus+a.anchor,h5:hover>a.anchor,h4>a:focus+a.anchor,h4:hover>a.anchor,h3>a:focus+a.anchor,h3:hover>a.anchor,h2>a:focus+a.anchor,h2:hover>a.anchor{opacity:1}}p.noscript{font-weight:700}blockquote.twitter-tweet{border-color:#1da0f1;padding:0 30px 27px}div.__h_instagram{margin:2rem auto}div.__h_instagram a:nth-child(2){display:block;margin:.6rem 0;line-height:0}div.__h_instagram a:nth-child(2):hover{opacity:.75}div.__h_instagram img{border:1px solid var(--fg);max-width:100%;object-fit:cover}h2#vimeo-simple-shortcode{margin-bottom:1rem}div.s_video_simple{margin:0 auto;width:96%}div.s_video_simple a{border:1px solid var(--fg);display:block;margin:6px;line-height:0}div.s_video_simple a:hover{opacity:.75}section.youtube{border:1px solid var(--fg);margin:2rem 0;padding-bottom:56.25%;position:relative;overflow:hidden;height:0}section.info img{border:3px solid var(--fg);border-radius:9px}
\ No newline at end of file +@font-face{font-family:oswald;font-style:normal;font-weight:700;font-display:swap;src:local("Oswald"),url(../fonts/oswald-v29-latin-700.woff2)format("woff2"),url(../fonts/oswald-v29-latin-700.woff)format("woff")}@font-face{font-family:open sans;font-style:normal;font-weight:400;font-display:swap;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(../fonts/open-sans-v17-latin-regular.woff2)format("woff2"),url(../fonts/open-sans-v17-latin-regular.woff)format("woff")}@font-face{font-family:open sans;font-style:normal;font-weight:700;font-display:swap;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(../fonts/open-sans-v17-latin-700.woff2)format("woff2"),url(../fonts/open-sans-v17-latin-700.woff)format("woff")}@font-face{font-family:open sans;font-style:italic;font-weight:400;font-display:swap;src:local("Open Sans Italic"),local("OpenSans-Italic"),url(../fonts/open-sans-v17-latin-italic.woff2)format("woff2"),url(../fonts/open-sans-v17-latin-italic.woff)format("woff")}:root{font-size:18px}html{scroll-behavior:smooth}html[data-mode=light]{--bg: #ddd;--fg: #444;--alt-bg: #d6d6d6;--alt-fg: #333;--dtl: #fdfdfd;--err: #c70000;--bgmod: rgba(0, 0, 0, 0.3);--input-bg: #fefefe;--input-fg: #111;--input-bd: #ccc;--lpress: rgba(0, 0, 0, 0.2);--rlpress: rgba(255, 255, 255, 0.2)}html[data-mode=light] .chroma,html[data-mode=light] pre,html[data-mode=light] p code,html[data-mode=light] li code{color:#93a1a1;background-color:#002b36}html[data-mode=light] .chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}html[data-mode=light] .chroma .lntable{border-spacing:0;margin:0;border:0;width:auto;display:block}html[data-mode=light] .chroma .hl{display:block;width:100%;background-color:rgba(0,0,0,.3)}html[data-mode=light] .chroma .nb{color:#b58900}html[data-mode=light] .chroma .ge{font-style:italic}html[data-mode=light] .chroma .gr{color:#e8625f;font-weight:700}html[data-mode=light] .chroma .gs{font-weight:700}html[data-mode=light] .chroma .x,html[data-mode=light] .chroma .kc,html[data-mode=light] .chroma .no,html[data-mode=light] .chroma .ni,html[data-mode=light] .chroma .ne,html[data-mode=light] .chroma .se,html[data-mode=light] .chroma .gh{color:#e9662f}html[data-mode=light] .chroma .lnt,html[data-mode=light] .chroma .ln{margin-right:.4em;padding:0 .4em;color:#848f8f}html[data-mode=light] .chroma .k,html[data-mode=light] .chroma .kn,html[data-mode=light] .chroma .kp,html[data-mode=light] .chroma .o,html[data-mode=light] .chroma .ow,html[data-mode=light] .chroma .cs,html[data-mode=light] .chroma .cp,html[data-mode=light] .chroma .cpf,html[data-mode=light] .chroma .gi{color:#859900}html[data-mode=light] .chroma .kd,html[data-mode=light] .chroma .kr,html[data-mode=light] .chroma .bp,html[data-mode=light] .chroma .nc,html[data-mode=light] .chroma .nd,html[data-mode=light] .chroma .nf,html[data-mode=light] .chroma .nt,html[data-mode=light] .chroma .nv,html[data-mode=light] .chroma .gu{color:#3294da}html[data-mode=light] .chroma .kt,html[data-mode=light] .chroma .sr,html[data-mode=light] .chroma .gd{color:#e8625f}html[data-mode=light] .chroma .s,html[data-mode=light] .chroma .sa,html[data-mode=light] .chroma .sc,html[data-mode=light] .chroma .dl,html[data-mode=light] .chroma .s2,html[data-mode=light] .chroma .si,html[data-mode=light] .chroma .sx,html[data-mode=light] .chroma .s1,html[data-mode=light] .chroma .ss,html[data-mode=light] .chroma .m,html[data-mode=light] .chroma .mb,html[data-mode=light] .chroma .mf,html[data-mode=light] .chroma .mh,html[data-mode=light] .chroma .mi,html[data-mode=light] .chroma .il,html[data-mode=light] .chroma .mo{color:#2aa198}html[data-mode=light] .chroma .sb,html[data-mode=light] .chroma .c,html[data-mode=light] .chroma .ch,html[data-mode=light] .chroma .cm,html[data-mode=light] .chroma .c1{color:#759299}html[data-mode=dark]{--bg: #1f1f1f;--fg: #bbb;--alt-bg: #1c1c1c;--alt-fg: #ddd;--dtl: #1a1a1a;--err: #ff3131;--bgmod: rgba(255, 255, 255, 0.3);--input-bg: #222;--input-fg: #f0f0f0;--input-bd: #262626;--lpress: rgba(255, 255, 255, 0.2);--rlpress: rgba(0, 0, 0, 0.2)}html[data-mode=dark] img{filter:contrast(0.85)grayscale(0.3)}html[data-mode=dark] .chroma,html[data-mode=dark] pre,html[data-mode=dark] p code,html[data-mode=dark] li code{color:#f8f8f2;background:#272822}html[data-mode=dark] .chroma .err{color:#eb0083;background-color:#1e0010}html[data-mode=dark] .chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}html[data-mode=dark] .chroma .lntable{border-spacing:0;margin:0;border:0;width:auto;display:block}html[data-mode=dark] .chroma .hl{display:block;width:100%;background-color:rgba(0,0,0,.3)}html[data-mode=dark] .chroma .ge{font-style:italic}html[data-mode=dark] .chroma .gs{font-weight:700}html[data-mode=dark] .chroma .lnt,html[data-mode=dark] .chroma .ln{margin-right:.4em;padding:0 .4em;color:#8e8e8e}html[data-mode=dark] .chroma .k,html[data-mode=dark] .chroma .kc,html[data-mode=dark] .chroma .kd,html[data-mode=dark] .chroma .kp,html[data-mode=dark] .chroma .kr,html[data-mode=dark] .chroma .kt,html[data-mode=dark] .chroma .no{color:#66d9ef}html[data-mode=dark] .chroma .kn,html[data-mode=dark] .chroma .nt,html[data-mode=dark] .chroma .o,html[data-mode=dark] .chroma .ow,html[data-mode=dark] .chroma .gd{color:#f94e8a}html[data-mode=dark] .chroma .na,html[data-mode=dark] .chroma .nc,html[data-mode=dark] .chroma .nd,html[data-mode=dark] .chroma .ne,html[data-mode=dark] .chroma .nf,html[data-mode=dark] .chroma .nx,html[data-mode=dark] .chroma .gi{color:#a6e22e}html[data-mode=dark] .chroma .l,html[data-mode=dark] .chroma .se,html[data-mode=dark] .chroma .m,html[data-mode=dark] .chroma .mb,html[data-mode=dark] .chroma .mf,html[data-mode=dark] .chroma .mh,html[data-mode=dark] .chroma .mi,html[data-mode=dark] .chroma .il,html[data-mode=dark] .chroma .mo{color:#ae81ff}html[data-mode=dark] .chroma .ld,html[data-mode=dark] .chroma .s,html[data-mode=dark] .chroma .sa,html[data-mode=dark] .chroma .sb,html[data-mode=dark] .chroma .sc,html[data-mode=dark] .chroma .dl,html[data-mode=dark] .chroma .sd,html[data-mode=dark] .chroma .s2,html[data-mode=dark] .chroma .sh,html[data-mode=dark] .chroma .si,html[data-mode=dark] .chroma .sx,html[data-mode=dark] .chroma .sr,html[data-mode=dark] .chroma .s1,html[data-mode=dark] .chroma .ss{color:#e6db74}html[data-mode=dark] .chroma .c,html[data-mode=dark] .chroma .ch,html[data-mode=dark] .chroma .cm,html[data-mode=dark] .chroma .c1,html[data-mode=dark] .chroma .cs,html[data-mode=dark] .chroma .cp,html[data-mode=dark] .chroma .cpf,html[data-mode=dark] .chroma .gu{color:#949076}body{margin:0;padding:0;font-family:open sans,sans-serif;background:var(--bg);color:var(--fg);display:flex;min-height:100vh;flex-direction:column}body a{color:var(--accent);outline:2px dashed transparent;outline-offset:2px;transition:opacity .2s ease-in-out,outline .2s ease-in-out;word-break:break-word}body a:focus{outline-color:var(--accent)}body a:hover{opacity:.75}body>header,body>footer{background:var(--alt-bg);color:var(--alt-fg);text-align:center}body>header{padding:0 1.5rem 1rem}body>header nav{margin:.5rem 0 0}body>header nav ul{margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}body>header nav ul a{display:block;word-break:keep-all;margin:0 7.5px 15px;padding:9px 21px 12px;font-size:.75rem;font-weight:700;text-transform:uppercase}body>footer{padding:1rem 3rem}body>footer p{line-height:1.8rem;margin:.75rem 0;white-space:pre-wrap}body>footer a{transition:opacity .2s ease-in-out,outline-color .3s ease}body>footer a:hover{opacity:.75}body>footer section{padding:6px 0 12px}body>footer section input{border:1px solid var(--fg);outline-offset:3px;padding:0}body>footer section input::-webkit-color-swatch{border:none}body>footer section input::-webkit-color-swatch-wrapper{padding:0}body>footer section button{background:0;border:0;padding:3px 3px 0}body>footer section button svg{fill:var(--fg);stroke:var(--lpress);stroke-width:.6rem}body>footer section input,body>footer section button{margin:0 7.5px;outline:2px dashed transparent;transition:outline .2s ease-in-out,transform .2s ease-in-out}body>footer section input:focus,body>footer section button:focus{outline-color:var(--accent)}body>footer section input:hover,body>footer section button:hover{transform:scale(1.2)}body>footer section input::-moz-focus-inner,body>footer section button::-moz-focus-inner{border:0}body>footer section input,body>footer section button svg{width:42px;height:42px}ol,ul{list-style:none}h1{text-shadow:0 1px 0 var(--rlpress),1px 0 0 var(--rlpress)}hr{border:1px solid var(--lpress);margin:2.4rem 0 1.2rem}::selection{background:var(--accent);color:#f0f0f0;text-shadow:none}div.filler{flex:1;align-items:center;justify-content:center}article>header h1{line-height:3rem}article>header img{margin:1rem 0 0}article>header p{font-size:.9rem;font-style:italic}h6,h5,h4,h3,h2,h1{font-family:oswald,sans-serif;font-weight:700}h1{font-size:2.25rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}main p{line-height:1.65rem}code{font-family:monospace}body>header>a{font-family:oswald,sans-serif;font-size:2.1rem;font-weight:700;transition:color .3s ease,opacity .2s ease-in-out,outline-color .3s ease;text-shadow:0 1px 0 var(--rlpress),1px 0 0 var(--rlpress);display:inline-block;margin:1.5rem 0 .75rem}article>header{margin:0 0 2rem}article>header h1{margin:9px 0}article>header p{margin:0}article h2,article h3{margin:2rem 0 1rem}article p{margin:1.5rem 0}h6+p,h5+p,h4+p,h3+p,h2+p,h1+p{margin-top:0}h6,h5,h4,h3,h2{padding-top:1rem}audio,img,video{margin:1.8rem auto}a.anchor{background-image:none}a.anchor svg{fill:var(--accent);vertical-align:middle;width:24px;height:24px}h2 a.anchor{margin:0 0 0 .65rem}h2 a.anchor svg{transform:scale(1.7)}h3 a.anchor{margin:0 0 0 .55rem}h3 a.anchor svg{transform:scale(1.525)}h4 a.anchor{margin:0 0 0 .45rem}h4 a.anchor svg{transform:scale(1.35)}h5 a.anchor{margin:0 0 0 .35rem}h5 a.anchor svg{transform:scale(1.175)}h6 a.anchor{margin:0 0 0 .25rem}h6 a.anchor svg{transform:scale(1)}label,span.lnt,summary,sup.footnote-ref{user-select:none}article ol li,article ul li{margin-bottom:.45rem}ol{counter-reset:a-counter}ol li{counter-increment:a-counter}ol li::before{content:counter(a-counter)"";font-size:.85rem;font-weight:700;text-shadow:0 1px 0 var(--lpress),1px 0 0 var(--lpress);background:var(--fg);border:1px solid var(--lpress);border-radius:2px;color:var(--bg);margin-right:12px;padding:2px 7.5px}section.footnotes{border-top:2px solid var(--fg);display:block;margin-top:2.4rem;padding:1rem 1rem 1.8rem}section.footnotes h2{margin:0 0 2rem}section.footnotes a{word-break:break-word}section.footnotes ol li p:first-of-type{display:inline}section.footnotes a.footnote-backref{margin:0 0 0 9px;padding:0 9px;vertical-align:middle}section.footnotes a.footnote-backref svg{fill:var(--dtl);stroke:var(--lpress);stroke-width:.6rem;width:18px;height:18px}section.footnotes hr{display:none}sup{line-height:0}sup a.footnote-ref{text-decoration:none}sup a.footnote-ref::before{content:'['}sup a.footnote-ref::after{content:']'}code,.chroma,.chroma span{transition:background-color .3s ease,color .3s ease}article>pre,section.scroll,span.katex-display,div.highlight>pre,div.highlight>div{overflow-x:auto;transition:background-color .3s ease,color .3s ease,outline-color .3s ease;outline:3px solid transparent}article>pre:focus,section.scroll:focus,span.katex-display:focus,div.highlight>pre:focus,div.highlight>div:focus{outline-color:var(--accent)}section.scroll{border:1px solid var(--fg)}section.scroll>table{border-collapse:collapse;color:var(--fg);font-family:open sans,sans-serif;min-width:600px;width:100%}section.scroll>table td+td{border-left:1px solid var(--fg)}section.scroll>table tr+tr{border-top:1px solid var(--fg)}section.scroll>table tr:not(:first-child):last-of-type{border-bottom:1px solid var(--fg)}section.scroll>table td,section.scroll>table th{padding:9px}section.scroll>table th{background:var(--fg);color:var(--bg)}section.scroll>table tr{transition:background .2s ease-in-out,color .2s ease-in-out}section.scroll>table tr:nth-child(even){background:var(--alt-bg)}section.scroll>table tr:nth-child(odd){background:var(--bg)}section.scroll>table tr:hover{background:var(--accent);color:var(--dtl)}div.highlight>div table{padding:0 24px;max-height:75vh}div.chroma td:first-of-type{padding:0 18px 0 0}article>pre,span.katex-display,div.highlight>pre{padding:var(--hl-pad)}article>pre,span.katex-display,div.highlight>pre,div.highlight>div.chroma{border:1px solid #222;line-height:1.5rem;max-height:75vh}mark,p code,li code{border-radius:2px;padding:1px 3px}li a{word-break:break-all}article>header section.tags{margin:.9rem 0 .6rem}article>header section.tags ul{padding:0}article>header section.tags li{display:inline}article>header section.tags a{display:inline-block;margin:0 7.5px 9px 0;padding:6px 15px 9px}ul.posts{padding:0}ul.posts li{margin:.5rem 0}ul.posts a{background:var(--accent);color:var(--dtl);display:flex;margin:15px auto;padding:15px 30px 18px;text-decoration:none;align-items:center;word-break:break-word}ul.posts a p{flex:1;margin:0}ul.posts a time{background-image:linear-gradient(0deg,var(--bgmod),100%,transparent);border-radius:2px;font-size:.85rem;margin-left:1.8rem;padding:0 9px 2px}@media(max-width:768px){ul.posts a{flex-direction:column-reverse;align-items:unset}ul.posts a time{margin:.3rem 0}}span.katex-display{border:1px dashed var(--alt-fg);overflow-x:auto;padding:15px 30px}span.katex-display:focus{border:1px solid #222}img{display:block;max-width:100%;max-height:75vh;outline:3px solid transparent;transition:border-color .3s ease,outline-color .3s ease,filter .3s ease}img.cover{border:1px solid var(--fg);object-fit:cover;width:100%}article p>img{display:block;margin:2rem auto;max-width:100%}figure{margin:1.8rem auto}figure img{display:block;margin:0 auto;max-width:90%}figure figcaption{font-size:.85rem;text-align:center;margin:.75rem;line-height:1.5rem}video{display:block;max-width:91%;max-height:75vh;outline:3px solid transparent;transition:border-color .3s ease,outline-color .3s ease}video:focus,video:hover{border-color:var(--accent);outline-color:var(--accent)}video.gifoid{margin:3rem auto;max-width:90%}audio{display:block;width:90%}img.border,video.border{border:1px solid var(--fg)}img.borderless,video.borderless{border:0}details.toc{background:var(--alt-bg);color:var(--dtl);transition:background-color .3s ease,border .3s ease,linear-gradient .3s ease}details.toc summary{background:var(--accent);border:1px solid rgba(0,0,0,.3);border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,0,0,.3);font-family:oswald,sans-serif;padding:15px 30px 18.5px;outline:2px dashed transparent;outline-offset:3px;text-shadow:0 1px 0 var(--lpress),1px 0 0 var(--lpress);transition:color .3s ease,opacity .2s ease,outline-color .3s ease,padding .2s ease}details.toc summary:hover{opacity:.75}details.toc summary:focus{outline-color:var(--accent)}details.toc[open] summary{border-radius:2px 2px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);padding:15px 30px}details.toc[open] summary~*{animation:smoothReveal .3s ease-in-out}details.toc nav#TableOfContents{border-style:solid;border-color:rgba(0,0,0,.3);border-width:0 1px 1px;border-radius:0 0 2px 2px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.3);padding:6px 15px 15px 9px}details.toc nav#TableOfContents li:first-of-type{margin-top:.3rem}details.toc nav#TableOfContents ul li:not(:last-of-type),details.toc nav#TableOfContents ul li ul li:first-of-type,details.toc nav#TableOfContents ul li ol li:first-of-type,details.toc nav#TableOfContents ol li:not(:last-of-type),details.toc nav#TableOfContents ol li ul li:first-of-type,details.toc nav#TableOfContents ol li ol li:first-of-type{margin-bottom:.3rem}#TableOfContents,section.footnotes ol,article>ul,article>ol{line-height:1.5rem}#TableOfContents ul,section.footnotes ol{padding-left:24px}article>ul,article>ul ul,article>ol,article>ol ol{padding:0 24px}#TableOfContents ul li:before,article>ul li:before{content:'';margin-right:12px;background:var(--fg);border-radius:2px;width:18px;height:18px;display:inline-block;margin-bottom:-3px}@keyframes smoothReveal{0%{opacity:0}100%{opacity:1}}.btn,a.footnote-backref,input[type=submit]{background:var(--accent);border:1px solid rgba(0,0,0,.3);color:var(--dtl);transition:background-color .3s ease,color .3s ease,opacity .2s ease-in-out,outline-color .3s ease;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,0,0,.3);text-decoration:none;text-shadow:0 1px 0 var(--lpress),1px 0 0 var(--lpress)}.btn:hover,a.footnote-backref:hover,input[type=submit]:hover{opacity:.75}button,input[type=color],summary{cursor:pointer}li.cats a{font-weight:700}ul.tags{display:flex;flex-wrap:wrap;padding:0}ul.tags a{display:flex;flex:1;align-items:center;margin:0 9px 9px 0;padding:7.5px 18px 10.5px;word-break:keep-all}ul.tags a span{background-image:linear-gradient(0deg,var(--bgmod),100%,transparent);border-radius:2px;margin-left:.45rem;padding:0 6px 1px;font-size:.85rem}ul.pagination{font-family:open sans,sans-serif;font-weight:700;text-align:center;margin:3rem auto 1rem;display:flex;flex-wrap:wrap;justify-content:center}ul.pagination li{display:inline-block;transition:background .2s ease-in-out,border .2s ease-in-out}ul.pagination li a,ul.pagination li.current p{display:block;margin:0 9px 9px 0;padding:7.5px 12px 10.5px;width:21px}ul.pagination li a{color:var(--dtl)}ul.pagination li.current p{background:var(--alt-bg);border:1px solid rgba(0,0,0,.45);border-radius:2px;color:var(--alt-fg);line-height:inherit;user-select:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,0,0,.3);text-shadow:0 1px 0 var(--lpress),1px 0 0 var(--lpress)}ul.pagination svg{fill:currentColor;width:18px;height:18px;display:inline-block;margin:auto auto -2px}.label-form{margin-top:1rem;font-family:oswald,sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.5px;text-transform:uppercase;user-select:none}.input-text{background:var(--input-bg);border:1px solid var(--input-bd);color:var(--input-fg);font-family:open sans,sans-serif;font-size:.9rem;line-height:1.5rem;transition:background-color .3s ease,border .3s ease,outline .2s ease-in-out;outline:2px solid transparent}.input-text:focus{outline-color:var(--accent)}section.search-box form{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch}section.search-box label{flex-basis:100%;line-height:2rem}section.search-box input[name=q]{padding:6px 12px;flex:1;border-radius:2px 0 0 2px}section.search-box button{border-radius:0 2px 2px 0;padding:6px 30px;outline:2px dashed transparent;outline-offset:2px}section.search-box button:focus{outline-color:var(--accent)}section.search-box button:hover{opacity:.75}section.search-box button svg{width:15px;height:15px;fill:currentColor;stroke:var(--lpress);stroke-width:9px}#search-info{margin:1rem 0 2rem}#search-info+ul{margin:0 0 6rem}p.error{color:var(--err)}mark{background:var(--accent);filter:contrast(1.2)invert(1)}abbr{text-decoration-style:solid}blockquote{background:var(--alt-bg);border-style:solid;border-width:1px 1px 1px 12px;color:var(--alt-fg);margin:var(--blk-mg);padding:0 30px}blockquote p{margin:1.2rem 0}kbd{background-color:#eee;border:1px solid #b4b4b4;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.2),0 2px 0 0 rgba(255,255,255,.7)inset;color:#333;display:inline-block;font-size:.85em;font-weight:700;line-height:1;padding:2px;white-space:nowrap}kbd>kbd{margin:0 2px}main{margin:90px auto;padding:0 15px;max-width:660px}article{margin:90px auto 120px}html{--blk-mg: 1.05rem .75rem;--il-pad: 0 12px;--hl-pad: 15.75px 18px}@media(min-width:769px){html{--blk-mg: 2.1rem 1.5rem;--il-pad: 6px 24px;--hl-pad: 21px 24px}}@media(min-width:769px){a.anchor:not(:focus){opacity:0}h6>a:focus+a.anchor,h6:hover>a.anchor,h5>a:focus+a.anchor,h5:hover>a.anchor,h4>a:focus+a.anchor,h4:hover>a.anchor,h3>a:focus+a.anchor,h3:hover>a.anchor,h2>a:focus+a.anchor,h2:hover>a.anchor{opacity:1}}p.noscript{font-weight:700}blockquote.twitter-tweet{border-color:#1da0f1;padding:0 30px 27px}div.__h_instagram{margin:2rem auto}div.__h_instagram a:nth-child(2){display:block;margin:.6rem 0;line-height:0}div.__h_instagram a:nth-child(2):hover{opacity:.75}div.__h_instagram img{border:1px solid var(--fg);max-width:100%;object-fit:cover}h2#vimeo-simple-shortcode{margin-bottom:1rem}div.s_video_simple{margin:0 auto;width:96%}div.s_video_simple a{border:1px solid var(--fg);display:block;margin:6px;line-height:0}div.s_video_simple a:hover{opacity:.75}section.youtube{border:1px solid var(--fg);margin:2rem 0;padding-bottom:56.25%;position:relative;overflow:hidden;height:0}section.info img{border:3px solid var(--fg);border-radius:9px}
\ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_694b6a5caed62875bf9278dff98b7f5e.json b/exampleSite/resources/_gen/assets/scss/scss/main.scss_694b6a5caed62875bf9278dff98b7f5e.json index fd5720f..97fca3a 100644 --- a/exampleSite/resources/_gen/assets/scss/scss/main.scss_694b6a5caed62875bf9278dff98b7f5e.json +++ b/exampleSite/resources/_gen/assets/scss/scss/main.scss_694b6a5caed62875bf9278dff98b7f5e.json @@ -1 +1 @@ -{"Target":"css/main.min.b7a690e66eaa7eff6e5255325a9837b4f4d5ac221a1a7470ea99498ebb4b394c0e4b02b7b3260ca730bb2846ed69aab02b7879101a4bcd889e7e0c65175097f0.css","MediaType":"text/css","Data":{"Integrity":"sha512-t6aQ5m6qfv9uUlUyWpg3tPTVrCIaGnRw6plJjrtLOUwOSwK3syYMpzC7KEbtaaqwK3h5EBpLzYiefgxlF1CX8A=="}}
\ No newline at end of file +{"Target":"css/main.min.a0e13b917aed3a4adadf6313a5ca68ad211a0a36e20085d3b41bddb6bf79cf5666718864b01c859b42f8c186e1643b3640e572de822bba43ad17b2e08289b227.css","MediaType":"text/css","Data":{"Integrity":"sha512-oOE7kXrtOkra32MTpcporSEaCjbiAIXTtBvdtr95z1ZmcYhksByFm0L4wYbhZDs2QOVy3oIrukOtF7LggomyJw=="}}
\ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 2d334f8..d6b53cc 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -375,8 +375,10 @@ <!-- Preload fonts --> -{{ range (readDir "/public/fonts") }} - <link rel="preload" href="{{ printf "/fonts/%s" .Name | relURL }}" as="font" crossorigin="anonymous"> +{{ with (readDir "/public/fonts") }} + {{ range . }} + <link rel="preload" href="{{ printf "/fonts/%s" .Name | relURL }}" as="font" crossorigin="anonymous"> + {{ end }} {{ end }} <!-- Should be loaded even if browser has native lazy load support --> diff --git a/layouts/partials/search-form.html b/layouts/partials/search-form.html index 8f3813d..84d67e6 100644 --- a/layouts/partials/search-form.html +++ b/layouts/partials/search-form.html @@ -13,7 +13,7 @@ {{ else }} <form role="search" action="{{ $searchPage.RelPermalink }}"> {{ end }} - <label for="search-input">{{ T "search_label" }}</label><input type="search" id="search-input" title='{{ T "search_input_title" (dict "minLength" $minLength "maxLength" $maxLength) }}' name="q" {{ with .Site.Params.Search.placeholder }}placeholder="{{ . }}"{{ end }} minlength="{{ $minLength }}" maxlength="{{ $maxLength }}" pattern="^[\S].*" required><button aria-label='{{ T "search_button_aria_label" }}' type="submit"><svg aria-hidden="true"><use xlink:href="#search"/></svg></button> + <label class="label-form" for="search-input">{{ T "search_label" }}</label><input class="input-text" type="search" id="search-input" title='{{ T "search_input_title" (dict "minLength" $minLength "maxLength" $maxLength) }}' name="q" {{ with .Site.Params.Search.placeholder }}placeholder="{{ . }}"{{ end }} minlength="{{ $minLength }}" maxlength="{{ $maxLength }}" pattern="^[\S].*" required><button aria-label="{{ T "search_button_aria_label" }}" class="btn" type="submit"><svg aria-hidden="true"><use xlink:href="#search"/></svg></button> </form> <hr> </section> diff --git a/layouts/shortcodes/contact-form.html b/layouts/shortcodes/contact-form.html index 8dd4401..43f165e 100644 --- a/layouts/shortcodes/contact-form.html +++ b/layouts/shortcodes/contact-form.html @@ -6,16 +6,16 @@ <form id="contact" action="https://formspree.io/{{ or .Page.Params.Contact.formspreeFormId .Site.Params.Contact.formspreeFormId }}" method="post" accept-charset="utf-8"> - <label>{{ T "name" }} - <input aria-label="{{ T "name" }}" type="text" name="name" minlength="3" {{ with or .Page.Params.Contact.Placeholder.name .Site.Params.Contact.Placeholder.name }}placeholder="{{ . }}"{{ end }} autocomplete="{{ $autoComplete }}" required> + <label class="label-form">{{ T "name" }} + <input aria-label="{{ T "name" }}" class="input-text" type="text" name="name" minlength="3" {{ with or .Page.Params.Contact.Placeholder.name .Site.Params.Contact.Placeholder.name }}placeholder="{{ . }}"{{ end }} autocomplete="{{ $autoComplete }}" required> </label> - <label>Email<input aria-label="Email" type="email" name="_replyto" {{ with or .Page.Params.Contact.Placeholder.email .Site.Params.Contact.Placeholder.email }}placeholder="{{ . }}"{{ end }} autocomplete="{{ $autoComplete }}" required></label> + <label class="label-form">Email<input aria-label="Email" class="input-text" type="email" name="_replyto" {{ with or .Page.Params.Contact.Placeholder.email .Site.Params.Contact.Placeholder.email }}placeholder="{{ . }}"{{ end }} autocomplete="{{ $autoComplete }}" required></label> {{ with or .Page.Params.Contact.subject .Site.Params.Contact.subject }} {{ if gt (len .) 1 }} - <label>{{ T "subject" }} - <select aria-label="{{ T "subject" }}" name="_subject"> + <label class="label-form">{{ T "subject" }} + <select aria-label="{{ T "subject" }}" class="input-text" name="_subject"> {{ range . }} <option>{{ . }}</option> @@ -29,15 +29,15 @@ {{ else }} {{ with or .Page.Params.Contact.Placeholder.subject .Site.Params.Contact.Placeholder.subject }} - <label>{{ T "subject" }} - <input aria-label="{{ T "subject" }}" type="text" name="_subject" minlength="6" placeholder="{{ . }}" autocomplete="{{ $autoComplete }}" required> + <label class="label-form">{{ T "subject" }} + <input aria-label="{{ T "subject" }}" class="input-text" type="text" name="_subject" minlength="6" placeholder="{{ . }}" autocomplete="{{ $autoComplete }}" required> </label> {{ end }} {{ end }} - <label>{{ T "message" }}<textarea id="message" aria-label="{{ T "message" }}" rows="6" name="message" {{ with or .Page.Params.Contact.messageMinLength .Site.Params.Contact.messageMinLength | default 140 }}minlength="{{ . }}"{{ end }} {{ with or .Page.Params.Contact.Placeholder.message .Site.Params.Contact.Placeholder.message }}placeholder="{{ . }}"{{ end }} required></textarea></label> + <label class="label-form">{{ T "message" }}<textarea id="message" aria-label="{{ T "message" }}" class="input-text" rows="6" name="message" {{ with or .Page.Params.Contact.messageMinLength .Site.Params.Contact.messageMinLength | default 140 }}minlength="{{ . }}"{{ end }} {{ with or .Page.Params.Contact.Placeholder.message .Site.Params.Contact.Placeholder.message }}placeholder="{{ . }}"{{ end }} required></textarea></label> <input type="text" name="_gotcha" style="display:none"> diff --git a/layouts/shortcodes/social.html b/layouts/shortcodes/social.html index 6add002..508ece0 100644 --- a/layouts/shortcodes/social.html +++ b/layouts/shortcodes/social.html @@ -24,7 +24,7 @@ {{ $label = . }} {{ end }} - <a rel="me nofollow" href="{{ $url }}" title="{{ $label }}"> + <a class="btn" href="{{ $url }}" rel="me nofollow" title="{{ $label }}"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <use xlink:href="#{{ $currentIcon }}"/> </svg> @@ -39,7 +39,7 @@ {{ if (index (or $decentralizedOnPage $decentralizedOnSite) $currentEntry) }} {{ range (index (or $decentralizedOnPage $decentralizedOnSite) $currentEntry) }} - <a rel="me nofollow" href="{{ index . 0 }}" title="{{ printf "%s (%s)" (index . 1) $currentLabel }}"> + <a class="btn" href="{{ index . 0 }}" rel="me nofollow" title="{{ printf "%s (%s)" (index . 1) $currentLabel }}"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <use xlink:href="#{{ $currentIcon }}"/> </svg> |