diff options
Diffstat (limited to 'assets/scss/main.scss.bak')
| -rw-r--r-- | assets/scss/main.scss.bak | 1382 |
1 files changed, 1382 insertions, 0 deletions
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 }}
|