commit 4fe11567515092c5ad3f4c0cc9f3d981331ee60f
parent 4b08ae479645b145398e32b2e2b19aaecfdeee0a
Author: lou woell <lou@repetitions.de>
Date:   Sun, 12 Apr 2026 00:22:07 +0200

Move from scss to css

first pass done, no major issues anymore. Still need to go over a bunch of
functionality I'm not using so much as well as mobile compatibility though.

Diffstat:
Aassets/css/buttons.css | 93+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Dassets/css/buttons.scss | 93-------------------------------------------------------------------------------
Aassets/css/code.css | 73+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Dassets/css/code.scss | 72------------------------------------------------------------------------
Dassets/css/color/blue.scss | 1-
Dassets/css/color/green.scss | 1-
Dassets/css/color/orange.scss | 1-
Dassets/css/color/pink.scss | 1-
Dassets/css/color/red.scss | 1-
Dassets/css/color/violet.scss | 1-
Rassets/css/font.scss -> assets/css/font.css | 0
Aassets/css/footer.css | 30++++++++++++++++++++++++++++++
Dassets/css/footer.scss | 43-------------------------------------------
Dassets/css/form.scss | 43-------------------------------------------
Dassets/css/gist.scss | 6------
Aassets/css/header.css | 34++++++++++++++++++++++++++++++++++
Dassets/css/header.scss | 33---------------------------------
Aassets/css/highlight.css | 87+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Dassets/css/highlight.scss | 87-------------------------------------------------------------------------------
Dassets/css/logo.scss | 8--------
Aassets/css/main.css | 334+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Dassets/css/main.scss | 367-------------------------------------------------------------------------------
Aassets/css/menu.css | 91+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Dassets/css/menu.scss | 165-------------------------------------------------------------------------------
Aassets/css/pagination.css | 81+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Dassets/css/pagination.scss | 83-------------------------------------------------------------------------------
Aassets/css/post.css | 189+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Dassets/css/post.scss | 189-------------------------------------------------------------------------------
Aassets/css/style.css | 34++++++++++++++++++++++++++++++++++
Dassets/css/style.scss | 22----------------------
Dassets/css/syntax.scss | 153-------------------------------------------------------------------------------
Aassets/css/tabbedContainer.css | 52++++++++++++++++++++++++++++++++++++++++++++++++++++
Dassets/css/tabbedContainer.scss | 57---------------------------------------------------------
Aassets/css/terms.css | 22++++++++++++++++++++++
Dassets/css/terms.scss | 22----------------------
Dassets/css/variables.scss | 8--------
Rassets/css/video.scss -> assets/css/video.css | 0
Rstatic/fonts/FiraCode-Bold.woff -> assets/fonts/FiraCode-Bold.woff | 0
Rstatic/fonts/FiraCode-Regular.woff -> assets/fonts/FiraCode-Regular.woff | 0
MexampleSite/config.toml | 8+++++++-
Mlayouts/_partials/cover.html | 6+++---
Mlayouts/_partials/footer.html | 11++++-------
Mlayouts/_partials/head.html | 29+++++++++++++++--------------
Mlayouts/_partials/header.html | 10++--------
Mlayouts/_partials/logo.html | 25++++++++++---------------
Mlayouts/_partials/menu.html | 18++++++++----------
Mlayouts/_partials/pagination.html | 10+++++-----
Mlayouts/_partials/posts_pagination.html | 14+++++++-------
Dlayouts/_shortcodes/prismjs.html | 26--------------------------
Mlayouts/rss.xml | 8++++----
50 files changed, 1185 insertions(+), 1557 deletions(-)

diff --git a/assets/css/buttons.css b/assets/css/buttons.css @@ -0,0 +1,93 @@ +.button-container { + display: table; + margin-left: auto; + margin-right: auto; +} + +button, +.button, +a.button { + position: relative; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + text-align: center; + color: var(--weak-accent); + font: inherit; + appearance: none; + cursor: pointer; + outline: none; + + & :hover { + color: var(--accent); + } + + /* variants */ + + &.outline { + background: transparent; + box-shadow: none; + padding: 8px 18px; + + :hover { + transform: none; + box-shadow: none; + } + } + + & .link { + background: none; + } + + /* sizes */ + + & .small { + font-size: .8rem; + } + + & .wide { + min-width: 200px; + padding: 14px 24px; + } + + & :focus { + border-color: var(--color); + outline: 2px solid var(--color); + } +} + +a.read-more, +a.read-more:hover, +a.read-more:active { + display: block; + border: none; + color: var(--accent); + background: none; + box-shadow: none; + padding: 0; + max-width: 100%; + text-align: left; +} + +.code-toolbar { + margin-bottom: 20px; + + & .toolbar-item a { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 3px 8px; + margin-bottom: 5px; + text-decoration: none; + text-align: center; + font-size: 13px; + font-weight: 500; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; + } +} diff --git a/assets/css/buttons.scss b/assets/css/buttons.scss @@ -1,93 +0,0 @@ -.button-container { - display: table; - margin-left: auto; - margin-right: auto; -} - -button, -.button, -a.button { - position: relative; - display: flex; - align-items: center; - justify-content: center; - text-decoration: none; - text-align: center; - color: transparentize($accent, 0.3); - font: inherit; - appearance: none; - cursor: pointer; - outline: none; - - &:hover { - color: $accent; - } - - /* variants */ - - &.outline { - background: transparent; - box-shadow: none; - padding: 8px 18px; - - :hover { - transform: none; - box-shadow: none; - } - } - - &.link { - background: none; - } - - /* sizes */ - - &.small { - font-size: .8rem; - } - - &.wide { - min-width: 200px; - padding: 14px 24px; - } - - &:focus { - border-color: $color; - outline: 2px solid $color; - } -} - -a.read-more, -a.read-more:hover, -a.read-more:active { - display: block; - border: none; - color: $accent; - background: none; - box-shadow: none; - padding: 0; - max-width: 100%; - text-align: left; -} - -.code-toolbar { - margin-bottom: 20px; - - .toolbar-item a { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 3px 8px; - margin-bottom: 5px; - text-decoration: none; - text-align: center; - font-size: 13px; - font-weight: 500; - border-radius: 8px; - border: 1px solid transparent; - appearance: none; - cursor: pointer; - outline: none; - } -} diff --git a/assets/css/code.css b/assets/css/code.css @@ -0,0 +1,73 @@ + +.collapsable-code { + + border-color: var(--greyed-out); + position: relative; + width: 100%; + margin: 40px 0; + + input[type="checkbox"] { + position: absolute; + visibility: hidden; + } + + input[type="checkbox"]:checked { + ~ div, + ~ .highlight pre { + height: 0; + padding: 0; + border-top: none; + } + + ~ label .collapsable-code__toggle:after { + content: attr(data-label-expand); + } + } + + label { + position: relative; + display: flex; + justify-content: space-between; + min-width: 30px; + min-height: 30px; + margin: 0; + border-bottom: 1px solid var(--border-color); + cursor: pointer; + } + + &__title { + flex: 1; + color: var(--accent); + padding: 3px 10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &__language { + color: var(--accent); + border: 1px solid var(--border-color); + border-bottom: none; + text-transform: uppercase; + padding: 3px 10px; + } + + &__toggle { + color: var(--accent); + font-size: 16px; + padding: 3px 10px; + + &:after { + content: attr(data-label-collapse); + } + } + + pre { + margin-top: 0; + + &::first-line { + line-height: 0; + } + } + +} diff --git a/assets/css/code.scss b/assets/css/code.scss @@ -1,72 +0,0 @@ -.collapsable-code { - $border-color: mix($accent, #999, 90%); - - position: relative; - width: 100%; - margin: 40px 0; - - input[type="checkbox"] { - position: absolute; - visibility: hidden; - } - - input[type="checkbox"]:checked { - ~ div, - ~ .highlight pre { - height: 0; - padding: 0; - border-top: none; - } - - ~ label .collapsable-code__toggle:after { - content: attr(data-label-expand); - } - } - - label { - position: relative; - display: flex; - justify-content: space-between; - min-width: 30px; - min-height: 30px; - margin: 0; - border-bottom: 1px solid $border-color; - cursor: pointer; - } - - &__title { - flex: 1; - color: $accent; - padding: 3px 10px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - &__language { - color: $accent; - border: 1px solid $border-color; - border-bottom: none; - text-transform: uppercase; - padding: 3px 10px; - } - - &__toggle { - color: $accent; - font-size: 16px; - padding: 3px 10px; - - &:after { - content: attr(data-label-collapse); - } - } - - pre { - margin-top: 0; - - &::first-line { - line-height: 0; - } - } - -} diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss @@ -1 +0,0 @@ -$accent: #23B0FF; diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss @@ -1 +0,0 @@ -$accent: #78E2A0; diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss @@ -1 +0,0 @@ -$accent: #FFA86A; diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss @@ -1 +0,0 @@ -$accent: #EE72F1; diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss @@ -1 +0,0 @@ -$accent: #FF6266; diff --git a/assets/css/color/violet.scss b/assets/css/color/violet.scss @@ -1 +0,0 @@ -$accent: #b294bb; diff --git a/assets/css/font.scss b/assets/css/font.css diff --git a/assets/css/footer.css b/assets/css/footer.css @@ -0,0 +1,30 @@ +.footer { + margin: 1rem; + flex-grow: 0; + color: var(--greyed-out); + + @media (var(--tablet-width)) { + flex-direction: column; + } + + a { + color: inherit; + } + + .copyright { + display: flex; + flex-flow: row wrap; + flex: 1; + align-items: center; + font-size: 0.85rem; + justify-content: center; + + & > *:first-child:not(:only-child) { + margin-right: 10px; + } + + span { + white-space: normal; + } + } +} diff --git a/assets/css/footer.scss b/assets/css/footer.scss @@ -1,43 +0,0 @@ -.footer { - margin: 1rem; - flex-grow: 0; - opacity: .5; - - &__inner { - display: flex; - align-items: center; - justify-content: space-between; - margin: 0; - max-width: 100%; - - @media ($tablet) { - flex-direction: column; - } - } - - a { - color: inherit; - } - - .copyright { - display: grid; - flex-flow: row wrap; - flex: 1; - align-items: center; - font-size: 0.85rem; - justify-content: center; - - &--user { - margin: auto; - text-align: center; - } - - & > *:first-child:not(:only-child) { - margin-right: 10px; - } - - span { - white-space: normal; - } - } -} diff --git a/assets/css/form.scss b/assets/css/form.scss @@ -1,43 +0,0 @@ -input, textarea, select { - background: transparent; - color: $accent; - border: 1px solid $accent; - border-radius: 0; - padding: 10px; - margin: 5px 0; - font: inherit; - appearance: none; - - &:focus, :active { - border-color: $color; - outline: 1px solid $color; - } - - &:active { - box-shadow: none; - } -} - -select { - background: $background; - - option { - background: $background; - } -} - -::placeholder { - color: transparentize($accent, .5); -} - -input { - &[type="checkbox"] { - vertical-align: middle; - padding: 10px; - box-shadow: inset 0 0 0 3px $background; - - &:checked { - background: $accent; - } - } -} diff --git a/assets/css/gist.scss b/assets/css/gist.scss @@ -1,6 +0,0 @@ -body .gist .blob-num /* line numbers */, -body .gist .blob-code-inner -{ - border: none; -} - diff --git a/assets/css/header.css b/assets/css/header.css @@ -0,0 +1,34 @@ +.header { + display: flex; + flex-direction: column; + position: relative; + + @media print { + display: none; + } + + & .logo { + + justify-content: space-between; + align-items: center; + + display: flex; + color: var(--bg-base); + flex: 1; + + background: repeating-linear-gradient( + 90deg, + var(--accent), + var(--accent) 2px, + transparent 2px, + transparent 10px + ); + + & a { + background: var(--accent); + max-width: 100%; + padding: 5px 10px; + text-decoration: none; + } + } +} diff --git a/assets/css/header.scss b/assets/css/header.scss @@ -1,33 +0,0 @@ -.header { - display: flex; - flex-direction: column; - position: relative; - - @media print { - display: none; - } - - &__inner { - display: flex; - align-items: center; - justify-content: space-between; - } - - &__logo { - display: flex; - flex: 1; - - &:after { - content: ''; - background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px); - display: block; - width: 100%; - } - - a { - flex: 0 0 auto; - max-width: 100%; - text-decoration: none; - } - } -} diff --git a/assets/css/highlight.css b/assets/css/highlight.css @@ -0,0 +1,87 @@ +/* Background */ .bg { color: var(--color); background-color: var(--bg-color); } +/* PreWrapper */ .chroma { color: var(--color); background-color: var(--bg-color); border: 1px solid var(--border-color)} +/* PreWrapper */ .chroma code { color: var(--color); background-color: var(--bg-color); } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color: #f85149 } +/* CodeLine */ .chroma .cl { } +/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } +/* LineHighlight */ .chroma .hl { color: #6e7681 } +/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #737679 } +/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 } +/* Line */ .chroma .line { display: flex; } +/* Keyword */ .chroma .k { color: var(--color) } +/* KeywordConstant */ .chroma .kc { color: #79c0ff } +/* KeywordDeclaration */ .chroma .kd { color: var(--accent) } +/* KeywordNamespace */ .chroma .kn { color: var(--accent) } +/* KeywordPseudo */ .chroma .kp { color: #79c0ff } +/* KeywordReserved */ .chroma .kr { color: var(--accent) } +/* KeywordType */ .chroma .kt { color: var(--accent) } +/* Name */ .chroma .n { } +/* NameAttribute */ .chroma .na { } +/* NameBuiltin */ .chroma .nb { } +/* NameBuiltinPseudo */ .chroma .bp { } +/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold } +/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold } +/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold } +/* NameEntity */ .chroma .ni { color: #ffa657 } +/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold } +/* NameFunction */ .chroma .nf { color: var(--greyed-out); font-weight: bold } +/* NameFunctionMagic */ .chroma .fm { } +/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold } +/* NameNamespace */ .chroma .nn { color: var(--accent) } +/* NameOther */ .chroma .nx { } +/* NameProperty */ .chroma .py { color: #79c0ff } +/* NameTag */ .chroma .nt { color: var(--accent) } +/* NameVariable */ .chroma .nv { color: #79c0ff } +/* NameVariableClass */ .chroma .vc { } +/* NameVariableGlobal */ .chroma .vg { } +/* NameVariableInstance */ .chroma .vi { } +/* NameVariableMagic */ .chroma .vm { } +/* Literal */ .chroma .l { color: #a5d6ff } +/* LiteralDate */ .chroma .ld { color: #79c0ff } +/* LiteralString */ .chroma .s { color: #a5d6ff } +/* LiteralStringAffix */ .chroma .sa { color: #79c0ff } +/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff } +/* LiteralStringChar */ .chroma .sc { color: #a5d6ff } +/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff } +/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff } +/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff } +/* LiteralStringEscape */ .chroma .se { color: #79c0ff } +/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff } +/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff } +/* LiteralStringOther */ .chroma .sx { color: #a5d6ff } +/* LiteralStringRegex */ .chroma .sr { color: #79c0ff } +/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff } +/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff } +/* LiteralNumber */ .chroma .m { color: var(--color) } +/* LiteralNumberBin */ .chroma .mb { color: var(--color) } +/* LiteralNumberFloat */ .chroma .mf { color: var(--color) } +/* LiteralNumberHex */ .chroma .mh { color: var(--color) } +/* LiteralNumberInteger */ .chroma .mi { color: var(--color) } +/* LiteralNumberIntegerLong */ .chroma .il { color: var(--color) } +/* LiteralNumberOct */ .chroma .mo { color: var(--color) } +/* Operator */ .chroma .o { color: var(--accent); font-weight: bold } +/* OperatorWord */ .chroma .ow { color: var(--accent); font-weight: bold } +/* Punctuation */ .chroma .p { color: var(--accent) } +/* Comment */ .chroma .c { color: #8b949e; font-style: italic } +/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic } +/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic } +/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic } +/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic } +/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic } +/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericError */ .chroma .gr { color: #ffa198 } +/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold } +/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 } +/* GenericOutput */ .chroma .go { color: #8b949e } +/* GenericPrompt */ .chroma .gp { color: #8b949e } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #79c0ff } +/* GenericTraceback */ .chroma .gt { color: var(--accent) } +/* GenericUnderline */ .chroma .gl { text-decoration: underline } +/* TextWhitespace */ .chroma .w { color: #6e7681 } diff --git a/assets/css/highlight.scss b/assets/css/highlight.scss @@ -1,87 +0,0 @@ -/* Background */ .bg { color: $color; background-color: $background; } -/* PreWrapper */ .chroma { color: $color; background-color: $background; border: 1px solid $border-color} -/* PreWrapper */ .chroma code { color: $color; background-color: $background; } -/* Other */ .chroma .x { } -/* Error */ .chroma .err { color: #f85149 } -/* CodeLine */ .chroma .cl { } -/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } -/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } -/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } -/* LineHighlight */ .chroma .hl { color: #6e7681 } -/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #737679 } -/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 } -/* Line */ .chroma .line { display: flex; } -/* Keyword */ .chroma .k { color: $color } -/* KeywordConstant */ .chroma .kc { color: #79c0ff } -/* KeywordDeclaration */ .chroma .kd { color: $accent } -/* KeywordNamespace */ .chroma .kn { color: $accent } -/* KeywordPseudo */ .chroma .kp { color: #79c0ff } -/* KeywordReserved */ .chroma .kr { color: $accent } -/* KeywordType */ .chroma .kt { color: transparentize($accent, .3) } -/* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { } -/* NameBuiltin */ .chroma .nb { } -/* NameBuiltinPseudo */ .chroma .bp { } -/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold } -/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold } -/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold } -/* NameEntity */ .chroma .ni { color: #ffa657 } -/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold } -/* NameFunction */ .chroma .nf { color: mix($accent, #999, .9); font-weight: bold } -/* NameFunctionMagic */ .chroma .fm { } -/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold } -/* NameNamespace */ .chroma .nn { color: $accent } -/* NameOther */ .chroma .nx { } -/* NameProperty */ .chroma .py { color: #79c0ff } -/* NameTag */ .chroma .nt { color: $accent } -/* NameVariable */ .chroma .nv { color: #79c0ff } -/* NameVariableClass */ .chroma .vc { } -/* NameVariableGlobal */ .chroma .vg { } -/* NameVariableInstance */ .chroma .vi { } -/* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { color: #a5d6ff } -/* LiteralDate */ .chroma .ld { color: #79c0ff } -/* LiteralString */ .chroma .s { color: #a5d6ff } -/* LiteralStringAffix */ .chroma .sa { color: #79c0ff } -/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff } -/* LiteralStringChar */ .chroma .sc { color: #a5d6ff } -/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff } -/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff } -/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff } -/* LiteralStringEscape */ .chroma .se { color: #79c0ff } -/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff } -/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff } -/* LiteralStringOther */ .chroma .sx { color: #a5d6ff } -/* LiteralStringRegex */ .chroma .sr { color: #79c0ff } -/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff } -/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff } -/* LiteralNumber */ .chroma .m { color: $color } -/* LiteralNumberBin */ .chroma .mb { color: $color } -/* LiteralNumberFloat */ .chroma .mf { color: $color } -/* LiteralNumberHex */ .chroma .mh { color: $color } -/* LiteralNumberInteger */ .chroma .mi { color: $color } -/* LiteralNumberIntegerLong */ .chroma .il { color: $color } -/* LiteralNumberOct */ .chroma .mo { color: $color } -/* Operator */ .chroma .o { color: $accent; font-weight: bold } -/* OperatorWord */ .chroma .ow { color: $accent; font-weight: bold } -/* Punctuation */ .chroma .p { color: $accent } -/* Comment */ .chroma .c { color: #8b949e; font-style: italic } -/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic } -/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic } -/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic } -/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic } -/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic } -/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic } -/* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 } -/* GenericEmph */ .chroma .ge { font-style: italic } -/* GenericError */ .chroma .gr { color: #ffa198 } -/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold } -/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 } -/* GenericOutput */ .chroma .go { color: #8b949e } -/* GenericPrompt */ .chroma .gp { color: #8b949e } -/* GenericStrong */ .chroma .gs { font-weight: bold } -/* GenericSubheading */ .chroma .gu { color: #79c0ff } -/* GenericTraceback */ .chroma .gt { color: $accent } -/* GenericUnderline */ .chroma .gl { text-decoration: underline } -/* TextWhitespace */ .chroma .w { color: #6e7681 } diff --git a/assets/css/logo.scss b/assets/css/logo.scss @@ -1,8 +0,0 @@ -.logo { - display: flex; - align-items: center; - text-decoration: none; - background: $accent; - color: black; - padding: 5px 10px; -} diff --git a/assets/css/main.css b/assets/css/main.css @@ -0,0 +1,334 @@ +html { + box-sizing: border-box; + scroll-behavior: smooth; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + margin: 0; + padding: 0; + font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace; + font-size: 1rem; + line-height: 1.54; + letter-spacing: -0.02em; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + font-feature-settings: "liga", "tnum", "zero", "ss01", "locl"; + font-variant-ligatures: contextual; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: 100%; + + @media (var(--phone-width)) { + font-size: 1rem; + } +} + +.headings--one-size { + h1 { + line-height: 1.3; + margin-top: 0px; + } + + h2, + h3, + h4, + h5, + h6 { + line-height: 1.3; + + &:not(first-child) { + margin-top: 40px; + } + } + + h1, + h2, + h3 { + font-size: 1.4rem; + } + + h4, + h5, + h6 { + font-size: 1.2rem; + } +} + +a { + color: inherit; + + &:focus { + border-color: var(--color); + outline: 2px solid var(--color); + } +} + +img { + display: block; + max-width: 100%; + + &.left { + margin-right: auto; + } + + &.center { + margin-left: auto; + margin-right: auto; + } + + &.right { + margin-left: auto; + } +} + +p { + margin-bottom: 20px; +} + +figure { + display: table; + max-width: 100%; + margin: 25px 0; + + &.left { + margin-right: 25px; + float: left; + } + + &.center { + margin-left: auto; + margin-right: auto; + } + + &.right { + margin-left: 25px; + float: right; + } + + img { + margin-left: auto; + margin-right: auto; + } + + figcaption { + font-size: 14px; + padding: 5px 10px; + margin-top: 5px; + background: var(--accent); + color: var(--bg-color); + + &.left { + text-align: left; + } + + &.center { + text-align: center; + } + + &.right { + text-align: right; + } + } +} + +code, kbd { + font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important; + font-feature-settings: normal; + background: var(--trans-accent); + color: var(--accent); + padding: 1px 6px; + margin: 0 2px; + font-size: .95rem; + + code, kbd { + background: transparent; + padding: 0; + margin: 0; + } +} + +pre { + background: transparent !important; + padding: 20px 10px; + margin: 40px 0; + font-size: .95rem !important; + overflow: auto; + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); + + + pre { + border-top: 0; + margin-top: -40px; + } + + @media (var(--phone-width)) { + white-space: pre-wrap; + word-wrap: break-word; + } + + code { + background: none !important; + margin: 0; + padding: 0; + font-size: inherit; + border: none; + } +} + +blockquote { + // border-top: 1px solid var(--accent); + // border-bottom: 1px solid var(--accent); + // margin: 40px 0; + padding: 5px; + + @media (var(--phone-width)) { + padding-right: 0; + } + + p:first-of-type { + margin-top: 0; + } + + p:last-of-type { + margin-bottom: 0; + } + + p { + position: relative; + } + + p:first-of-type:before { + content: '>'; + display: block; + position: absolute; + left: -25px; + color: var(--accent); + } +} + +table { + table-layout: auto; + border-collapse: collapse; + width: 100%; + margin: 40px 0; +} + +table, +th, +td { + border: 1px dashed var(--accent); + padding: 10px; +} + +th { + color: var(--accent); +} + +ul, +ol { + margin-left: 22px; + padding: 0; + + li { + position: relative; + } + + @media (var(--phone-width)) { + margin-left: 20px; + } +} + +ol { + list-style: none; + counter-reset: li; + + > li { + counter-increment: li; + + &:before { + content: counter(li); + position: absolute; + right: calc(100% + 10px); + color: var(--accent); + display: inline-block; + text-align: right; + } + + > ol { + margin-left: 38px; + + > li { + counter-increment: li; + + &:before { + content: counters(li, ".") " "; + } + } + } + } +} + +mark { + background: var(--accent); + color: var(--bg-color); +} + +.container { + display: flex; + flex-direction: column; + padding: 40px; + max-width: 864px; + min-height: 100vh; + border-right: 1px solid var(--border-color); + + &.full, + &.center { + border: none; + margin: 0 auto; + } + + &.full { + max-width: 100%; + } + + @media (var(--phone-width)) { + padding: 20px; + } + + @media print { + display: initial; + } +} + +.content { + display: flex; + flex-direction: column; + + margin-top: 2rem; + margin-bottom: 2rem; + + @media print { + display: initial; + } +} + +hr { + width: 100%; + border: none; + background: var(--border-color); + height: 1px; +} + +.hidden { + display: none; +} + +sup { + line-height: 0; +} diff --git a/assets/css/main.scss b/assets/css/main.scss @@ -1,367 +0,0 @@ -html { - box-sizing: border-box; - scroll-behavior: smooth; -} - -*, -*:before, -*:after { - box-sizing: inherit; -} - -body { - margin: 0; - padding: 0; - font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace; - font-size: 1rem; - line-height: 1.54; - letter-spacing: -0.02em; - background-color: $background; - overflow-wrap: break-word; - color: $color; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - font-feature-settings: "liga", "tnum", "zero", "ss01", "locl"; - font-variant-ligatures: contextual; - -webkit-overflow-scrolling: touch; - -webkit-text-size-adjust: 100%; - - @media ($phone) { - font-size: 1rem; - } -} - -.headings--one-size { - h1 { - line-height: 1.3; - margin-top: 0px; - } - - h2, - h3, - h4, - h5, - h6 { - line-height: 1.3; - - &:not(first-child) { - margin-top: 40px; - } - } - - h1, - h2, - h3 { - font-size: 1.4rem; - } - - h4, - h5, - h6 { - font-size: 1.2rem; - } -} - -a { - color: inherit; - - &:focus { - border-color: $color; - outline: 2px solid $color; - } - - /* Waiting for a better times... */ - /* &:has(code) { - text-decoration-color: $accent; - } */ -} - -img { - display: block; - max-width: 100%; - - &.left { - margin-right: auto; - } - - &.center { - margin-left: auto; - margin-right: auto; - } - - &.right { - margin-left: auto; - } -} - -p { - margin-bottom: 20px; -} - -figure { - display: table; - max-width: 100%; - margin: 25px 0; - - &.left { - margin-right: 25px; - float: left; - } - - &.center { - margin-left: auto; - margin-right: auto; - } - - &.right { - margin-left: 25px; - float: right; - } - - img { - margin-left: auto; - margin-right: auto; - } - - figcaption { - font-size: 14px; - padding: 5px 10px; - margin-top: 5px; - background: $accent; - color: $background; - /* opacity: .8; */ - - &.left { - text-align: left; - } - - &.center { - text-align: center; - } - - &.right { - text-align: right; - } - } -} - -code, kbd { - font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important; - font-feature-settings: normal; - background: transparentize($accent, .8); - color: $accent; - padding: 1px 6px; - margin: 0 2px; - font-size: .95rem; - - code, kbd { - background: transparent; - padding: 0; - margin: 0; - } -} - -pre { - background: transparent !important; - padding: 20px 10px; - margin: 40px 0; - font-size: .95rem !important; - overflow: auto; - border-top: 1px solid rgba(255, 255, 255, .1); - border-bottom: 1px solid rgba(255, 255, 255, .1); - - + pre { - border-top: 0; - margin-top: -40px; - } - - @media ($phone) { - white-space: pre-wrap; - word-wrap: break-word; - } - - code { - background: none !important; - margin: 0; - padding: 0; - font-size: inherit; - border: none; - } -} - -blockquote { - // border-top: 1px solid $accent; - // border-bottom: 1px solid $accent; - // margin: 40px 0; - padding: 5px; - - @media ($phone) { - padding-right: 0; - } - - p:first-of-type { - margin-top: 0; - } - - p:last-of-type { - margin-bottom: 0; - } - - p { - position: relative; - } - - p:first-of-type:before { - content: '>'; - display: block; - position: absolute; - left: -25px; - color: $accent; - } - - &.twitter-tweet { - position: relative; - background: transparentize($accent, .9); - font: inherit; - color: inherit; - border: 1px solid $accent; - padding-top: 60px; - - p:before { - content: ''; - } - - &:before { - content: '> From Twitter:'; - position: absolute; - top: 20px; - color: $accent; - font-weight: bold; - } - - a { - color: $accent; - } - } -} - -table { - table-layout: auto; - border-collapse: collapse; - width: 100%; - margin: 40px 0; -} - -table, -th, -td { - border: 1px dashed $accent; - padding: 10px; -} - -th { - color: $accent; -} - -ul, -ol { - margin-left: 22px; - padding: 0; - - li { - position: relative; - } - - @media ($phone) { - margin-left: 20px; - } -} - -ol { - list-style: none; - counter-reset: li; - - > li { - counter-increment: li; - - &:before { - content: counter(li); - position: absolute; - right: calc(100% + 10px); - color: $accent; - display: inline-block; - text-align: right; - } - - > ol { - margin-left: 38px; - - > li { - counter-increment: li; - - &:before { - content: counters(li, ".") " "; - } - } - } - } -} - -mark { - background: $accent; - color: $background; -} - -.container { - display: flex; - flex-direction: column; - padding: 40px; - max-width: 864px; - min-height: 100vh; - border-right: 1px solid rgba(255, 255, 255, 0.1); - - &.full, - &.center { - border: none; - margin: 0 auto; - } - - &.full { - max-width: 100%; - } - - @media ($phone) { - padding: 20px; - } - - @media print { - display: initial; - } -} - -.content { - display: flex; - flex-direction: column; - - margin-top: 2rem; - margin-bottom: 2rem; - - @media print { - display: initial; - } -} - -hr { - width: 100%; - border: none; - background: $border-color; - height: 1px; -} - -.hidden { - display: none; -} - -sup { - line-height: 0; -} diff --git a/assets/css/menu.css b/assets/css/menu.css @@ -0,0 +1,91 @@ +.navigation-menu { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin: 20px auto 10px auto; + flex-direction: column; + list-style: none; + + > .navigation-menu__inner { + display: flex; + flex: 1; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; + + > li { + flex: 0 0 auto; + margin-bottom: 10px; + white-space: nowrap; + + &:not(:last-of-type) { + margin-right: 20px; + + + } + + > a { + text-decoration: none; + &:hover { + color: var(--accent); + } + } + + } + } + + .spacer { + flex-grow: 1 !important; + } +} + +.menu { + display: flex; + flex-direction: column; + position: relative; + list-style: none; + padding: 0; + margin: 0; + + > .menu__trigger { + margin-right: 0 !important; + color: var(--accent); + user-select: none; + cursor: pointer; + } + + .menu__dropdown { + + display: none; + + .open & { + display: flex; + } + + flex-direction: column; + position: absolute; + background: var(--bg-color); + border: 2px solid; + margin: 0; + padding: 10px; + top: 10px; + left: 0; + list-style: none; + z-index: 99; + + + > li { + flex: 0 0 auto; + + &:not(:last-of-type) { + margin-bottom: 10px; + } + + > a { + display: flex; + padding: 5px; + } + } + } +} diff --git a/assets/css/menu.scss b/assets/css/menu.scss @@ -1,165 +0,0 @@ -@mixin menu { - display: none; - flex-direction: column; - $shadow-color: transparentize($background, .2); - $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color; - position: absolute; - background: $background; - box-shadow: $shadow; - color: white; - border: 2px solid; - margin: 0; - padding: 10px; - top: 10px; - left: 0; - list-style: none; - z-index: 99; -} - -@mixin header-menu-trigger { - color: $accent; - border: 2px solid; - margin-left: 10px; - height: 100%; - padding: 3px 8px; - margin-bottom: 0 !important; - position: relative; - cursor: pointer; -} - -.navigation-menu { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin: 20px auto 10px auto; - - @media ($phone) { - margin: 0; - } - - &__inner { - display: flex; - flex: 1; - flex-wrap: wrap; - list-style: none; - margin: 0; - padding: 0; - - > li { - flex: 0 0 auto; - margin-bottom: 10px; - white-space: nowrap; - - &:not(:last-of-type) { - margin-right: 20px; - - } - } - - a { - text-decoration: none; - &:hover { - color: $accent; - } - } - - @media ($phone) { - flex-direction: column; - align-items: flex-start; - padding: 0; - - li { - margin: 0; - padding: 5px; - } - } - } - - .spacer { - flex-grow: 1 !important; - } -} - -.menu { - display: flex; - flex-direction: column; - position: relative; - list-style: none; - padding: 0; - margin: 0; - - &__trigger { - margin-right: 0 !important; - color: $accent; - user-select: none; - cursor: pointer; - } - - &__dropdown { - @include menu; - - .open & { - display: flex; - } - - > li { - flex: 0 0 auto; - - &:not(:last-of-type) { - margin-bottom: 10px; - } - - a { - display: flex; - padding: 5px; - } - } - } - - &--desktop { - @media ($phone) { - display: none - } - } - - &--mobile { - .menu__trigger { - @include header-menu-trigger; - display: none; - - @media ($phone) { - display: block; - } - } - - .menu__dropdown { - @media ($phone) { - left: auto; - right: 0; - } - } - - li { - flex: 0 0 auto; - - &:not(:last-of-type) { - margin-bottom: 10px; - } - } - } - - &--language-selector { - .menu__trigger { - @include header-menu-trigger; - - @media ($phone) { - display: none; - } - } - - .menu__dropdown { - left: auto; - right: 0; - } - } -} diff --git a/assets/css/pagination.css b/assets/css/pagination.css @@ -0,0 +1,81 @@ +.pagination { + + @media print { + display: none; + } + + > .title { + display: flex; + text-align: center; + position: relative; + margin: 3rem 0 1rem; + + > span { + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: var(--bg-color); + color: var(--greyed-out); + font-size: .8rem; + text-transform: uppercase; + text-decoration: none; + letter-spacing: .1em; + z-index: 1; + } + + > hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; + } + } + + > .buttons { + + align-items: center; + justify-content: center; + flex-flow: row wrap; + + a.button { + + display: flex; + justify-content: center; + align-items: center; + + text-decoration: none; + text-overflow: ellipsis; + max-width: 85vw; + overflow: hidden; + white-space: nowrap; + flex: 1; + + position: relative; + font-size: 1rem; + appearance: none; + + padding: 0; + margin: 1rem; + + @media(var(--phone-width)) { + flex: 1; + } + + & .button_text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &.next .button_icon { + margin-left: 8px; + } + + &.previous .button_icon { + margin-right: 8px; + } + } + } +} diff --git a/assets/css/pagination.scss b/assets/css/pagination.scss @@ -1,83 +0,0 @@ -.pagination { - - @media print { - display: none; - } - - &__title { - display: flex; - text-align: center; - position: relative; - margin: 3rem 0 1rem; - - &-h { - text-align: center; - margin: 0 auto; - padding: 5px 10px; - background: $background; - color: transparentize($color, .3); - font-size: .8rem; - text-transform: uppercase; - text-decoration: none; - letter-spacing: .1em; - z-index: 1; - } - - hr { - position: absolute; - left: 0; - right: 0; - width: 100%; - margin-top: 15px; - z-index: 0; - } - } - - &__buttons { - align-items: center; - justify-content: center; - flex-flow: row wrap; - a { - text-decoration: none; - } - } -} - -.button { - position: relative; - align-items: center; - justify-content: center; - font-size: 1rem; - padding: 0; - appearance: none; - margin: 1rem; - - @media($phone) { - flex: 1; - } - - a { - display: flex; - justify-content: center; - flex: 1; - padding: 8px 16px; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - &__text { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - &.next .button__icon { - margin-left: 8px; - } - - &.previous .button__icon { - margin-right: 8px; - } -} diff --git a/assets/css/post.css b/assets/css/post.css @@ -0,0 +1,189 @@ +.index-content { + margin-top: 20px; +} + +.framed { + border: 1px solid var(--accent); + padding: 20px; + + *:first-child { + margin-top: 0; + } + + *:last-child { + margin-bottom: 0; + } +} + +.posts { + width: 100%; +} + +.post { + width: 100%; + text-align: left; + + &:not(:last-of-type) { + border-bottom: 1px solid var(--border-color); + } + + &.on-list { + margin-top: 1rem; + padding-bottom: 1rem; + + .post-title { + font-size: 1.2rem; + margin-bottom: 0.5rem; + padding-bottom: 0.5rem; + } + } + + .post-description { + margin: 0 2rem 0; + } + + .post-preview-grid { + display: grid; + column-gap: 2rem; + grid-auto-columns: 1fr 3fr; + grid-auto-rows: min-content; + + margin-left: 2rem; + margin-right: 2rem; + + .post-cover { + grid-row: 1 / 3; + grid-column: 1; + border: 0; + padding: 0; + margin: 0; + contain: style; + } + + .post-description { + grid-column: 2; + } + + .read-more { + grid-row: 2; + grid-column: 2; + } + } + + > .post-series { + margin: 0; + margin-left: 2px; + font-style: italic; + opacity: .5; + a { + text-decoration: none; + } + } + + > .post-meta { + font-size: 1rem; + margin-bottom: 10px; + color: var(--greyed-out); + + > :not(:first-child) { + &::before { + content: "::"; + display: inline-block; + margin: 0 8px; + } + } + } + + > .post-title { + --border: 3px dotted var(--accent); + position: relative; + color: var(--accent); + margin: 0 0 15px; + padding-bottom: 15px; + border-bottom: var(--border); + + &:after { + content: ''; + position: absolute; + bottom: 2px; + display: block; + width: 100%; + border-bottom: var(--border); + } + + a { + text-decoration: none; + } + } + + > .post-tags { + color: var(--greyed-out); + display: block; + margin-bottom: 0.5rem; + font-size: 1rem; + + a { + text-decoration: none; + } + } + + > .post-content { + margin-top: 1.5rem; + } + + ul { + list-style: none; + + li:not(:empty):before { + content: '-'; + position: absolute; + left: -20px; + color: var(--accent); + } + } +} + +.post-cover { + border: 1.2rem solid var(--accent); + background: transparent; + margin-top: 2rem; + margin-bottom: 2rem; + padding: 20px; + + @media (var(--phone-width)) { + padding: 10px; + border-width: 10px; + } +} + + +.post--regulation { + h1 { + justify-content: center; + } + + h2 { + justify-content: center; + margin-bottom: 10px; + + & + h2 { + margin-top: -10px; + margin-bottom: 20px; + } + } +} + +.hanchor { + color: var(--accent); + text-decoration: none; + margin-left: 10px; + visibility: hidden; +} + +h1:hover a, h2:hover a, h3:hover a, h4:hover a { + visibility: visible; +} + +.footnotes { + color: var(--greyed-out); +} diff --git a/assets/css/post.scss b/assets/css/post.scss @@ -1,189 +0,0 @@ -.index-content { - margin-top: 20px; -} - -.framed { - border: 1px solid $accent; - padding: 20px; - - *:first-child { - margin-top: 0; - } - - *:last-child { - margin-bottom: 0; - } -} - -.posts { - width: 100%; -} - -.post { - width: 100%; - text-align: left; - - &:not(:last-of-type) { - border-bottom: 1px solid $border-color; - } - - &-meta { - font-size: 1rem; - margin-left: 2px; - margin-bottom: 10px; - opacity: .5; - - & > *:not(:first-child) { - &::before { - content: "::"; - display: inline-block; - margin: 0 8px; - } - } - } - - &-title { - $border: 3px dotted $accent; - position: relative; - color: $accent; - margin: 0 2px 0.5rem; - padding-bottom: 15px; - border-bottom: $border; - - &:after { - content: ''; - position: absolute; - bottom: 2px; - display: block; - width: 100%; - border-bottom: $border; - } - - a { - text-decoration: none; - } - } - - &-series { - margin: 0; - margin-left: 2px; - font-style: italic; - opacity: .5; - a { - text-decoration: none; - } - } - - &-tags { - display: block; - margin-left: 2px; - margin-bottom: 0.25rem; - font-size: 1rem; - opacity: .5; - - a { - text-decoration: none; - } - } - - &-cover { - border: 20px solid $accent; - background: transparent; - margin: 40px 0; - padding: 20px; - - @media ($phone) { - padding: 10px; - border-width: 10px; - } - } - - ul { - list-style: none; - - li:not(:empty):before { - content: '-'; - position: absolute; - left: -20px; - color: $accent; - } - } - - &.on-list { - margin-top: 1rem; - padding-bottom: 1rem; - - .post-title { - font-size: 1.2rem; - margin-bottom: 0.5rem; - padding-bottom: 0.5rem; - } - } - - &-description { - margin: 0 2rem 0; - } - - .read-more { - margin-top: 0.5rem; - } - - &-preview-grid { - display: grid; - column-gap: 2rem; - grid-auto-columns: 1fr 3fr; - grid-auto-rows: min-content; - - margin-left: 2rem; - margin-right: 2rem; - - .post-cover { - grid-row: 1 / 3; - grid-column: 1; - border: 0; - padding: 0; - margin: 0; - contain: style; - } - - .post-description { - grid-column: 2; - } - - .read-more { - grid-row: 2; - grid-column: 2; - } - } -} - -.post--regulation { - h1 { - justify-content: center; - } - - h2 { - justify-content: center; - margin-bottom: 10px; - - & + h2 { - margin-top: -10px; - margin-bottom: 20px; - } - } -} - -.hanchor { - color: transparentize($accent, .1); - text-decoration: none; - margin-left: 10px; - visibility: hidden; -} - -h1:hover a, h2:hover a, h3:hover a, h4:hover a { - visibility: visible; -} - -.footnotes { - color: transparentize($color, .5); -} diff --git a/assets/css/style.css b/assets/css/style.css @@ -0,0 +1,34 @@ +@import 'font.css'; +@import 'buttons.css'; +@import 'header.css'; +@import 'menu.css'; +@import 'main.css'; +@import 'post.css'; +@import 'pagination.css'; +@import 'footer.css'; +@import 'terms.css'; +@import 'code.css'; +@import 'highlight.css'; +@import 'tabbedContainer.css'; +@import 'video.css'; + +:root { + --accent: #EE72F1; + --bg-base: #1D1E28; + --color: seashell; + + --border-color: rgba(255, 255, 255, .1); + + --weak-accent: color-mix(in srgb, var(--accent), transparent 30%); + --trans-accent: color-mix(in srgb, var(--accent), transparent 90%); + + --bg-color: color-mix(in srgb, var(--accent) 2%, var(--bg-base)); + + --greyed-out: color-mix(in srgb, var(--color) 50%, transparent); + + --phone-width: "max-width: 684px"; + --tablet-width: "max-width: 900px"; + + color: var(--color); + background-color: var(--bg-color); +} diff --git a/assets/css/style.scss b/assets/css/style.scss @@ -1,22 +0,0 @@ -@import "variables"; - -@import "font"; -@import "buttons"; -@import "form"; - -@import "header"; -@import "menu"; -@import "logo"; -@import "main"; -@import "post"; -@import "pagination"; -@import "footer"; -@import "terms"; -@import "gist"; - -@import "code"; -@import "highlight"; - -@import "tabbedContainer"; - -@import "video"; diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss @@ -1,153 +0,0 @@ -code.language-css, -code.language-scss, -.token.boolean, -.token.string, -.token.entity, -.token.url, -.language-css .token.string, -.language-scss .token.string, -.style .token.string, -.token.attr-value, -.token.keyword, -.token.control, -.token.directive, -.token.statement, -.token.regex, -.token.atrule, -.token.number, -.token.inserted, -.token.important { - color: $accent !important; -} - -.token.tag-id, -.token.atrule-id, -.token.operator, -.token.unit, -.token.placeholder, -.token.variable, -.token.tag, -.token.attr-name, -.token.namespace, -.token.deleted, -.token.property, -.token.class-name, -.token.constant, -.token.symbol { - color: transparentize($accent, .3) !important; -} - -.token.property, -.token.function, -.token.function-name, -.token.deleted, -code.language-javascript, -code.language-html, -.command-line-prompt > span:before { - color: mix($accent, #999, .9) !important; -} - -.token.selector, -.token.tag, -.token.punctuation { - color: white; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: rgba(255, 255, 255, .3) !important; -} - -.token.namespace { - opacity: .7 !important; -} - -pre[data-line] { - position: relative; -} - -pre[class*="language-"] { - margin: 0; - padding: 0; - overflow: auto; -} - -.line-highlight { - position: absolute; - left: 0; - right: 0; - padding: 0; - margin: 0; - background: transparentize(mix($accent, #999, 90%), .92); - pointer-events: none; - line-height: inherit; - white-space: pre; -} - -.line-highlight:before, -.line-highlight[data-end]:after { - content: attr(data-start); - position: absolute; - /* top: .4em; */ - left: .6em; - min-width: 1em; - padding: 0 .5em; - background-color: hsla(24, 20%, 50%, .4); - color: hsl(24, 20%, 95%); - font: bold 65%/1.5 sans-serif; - text-align: center; - vertical-align: .3em; - border-radius: 999px; - text-shadow: none; - box-shadow: 0 1px white; -} - -.line-highlight[data-end]:after { - content: attr(data-end); - top: auto; - bottom: .4em; -} - -.line-numbers .line-highlight:before, -.line-numbers .line-highlight:after { - content: none; -} - -.code-toolbar { - $code-margin: 40px; - position: relative; - margin: $code-margin 0; - padding: 20px; - border: 1px solid rgba(255, 255, 255, .1); - - + .code-toolbar, - + .highlight, - + .highlight .code-toolbar { - border-top: 0; - margin-top: calc(-1 * $code-margin); - } - - pre, code { - border: none; - } - - code { - display: block; - color: inherit; - } - - > .toolbar { - button { - font-size: .8em !important; - background: hsla(0,0%,87.8%,.2) !important; - color: #bbb !important; - box-shadow: 0 2px 0 0 rgba(0,0,0,.2) !important; - border-radius: 0 !important; - margin: 6px !important; - padding: 10px !important; - user-select:none - } - } -} diff --git a/assets/css/tabbedContainer.css b/assets/css/tabbedContainer.css @@ -0,0 +1,52 @@ +.tabContainer { + + > .tabs { + margin-top: 0.25em; + padding-top: 0.25em; + + > div:not(:first-child) { + display: none; + } + } + + > .tabBar { + overflow: hidden; + width: 100%; + margin: 0; + padding: 0; + list-style: none; + display: flex; + + > .tabLink { + display: flex; + flex: 1; + + transition: all .35s ease; + + color: var(--greyed-out); + text-decoration: none; + + background: var(--bg-color); + + border: 0px solid transparent; + border-bottom: 1px solid var(--bg-color); + margin: 0; + + + &.active { + border-bottom: 1px solid var(--accent); + background: inherit; + } + + &:focus { + color: var(--color); + background: var(--trans-accent); + } + + &:hover { + color: var(--color); + background: var(--trans-accent); + } + } + } +} diff --git a/assets/css/tabbedContainer.scss b/assets/css/tabbedContainer.scss @@ -1,57 +0,0 @@ -.tabContainer { - .tabBar { - - overflow: hidden; - width: 100%; - margin: 0; - padding: 0; - list-style: none; - display: flex; - - button { - color: $color; - opacity: .5; - border: 0px solid $background; - border-bottom: 1px solid $background; - text-decoration: none; - margin: 0; - font: inherit; - font-weight: normal; - font-size: 1em; - flex: 1; - transition: all .35s ease; - background: $background; - - &.active { - border-bottom: 1px solid $accent; - background: inherit; - opacity: .5; - } - - &:focus { - border: 0 1px 0 0 solid $accent !important; - outline: 0px solid $accent; - color: $color !important; - opacity: 1 !important; - } - - &:hover { - background: inherit; - color: $accent; - opacity: 1; - } - } - } - - .tabs { - * { - margin-top: 0px; - padding-top: 0.25em; - } - - div:not(:first-child) { - display: none; - } - } - -} diff --git a/assets/css/terms.css b/assets/css/terms.css @@ -0,0 +1,22 @@ +.terms { + h3 { + font-size: initial; + } + + ul { + list-style: none; + + li { + a { + color: var(--accent); + } + } + + li:not(:empty):before { + content: '-'; + position: absolute; + left: -20px; + color: var(--accent); + } + } +} diff --git a/assets/css/terms.scss b/assets/css/terms.scss @@ -1,22 +0,0 @@ -.terms { - h3 { - font-size: initial; - } - - ul { - list-style: none; - - li { - a { - color: $accent; - } - } - - li:not(:empty):before { - content: '-'; - position: absolute; - left: -20px; - color: $accent; - } - } -} diff --git a/assets/css/variables.scss b/assets/css/variables.scss @@ -1,8 +0,0 @@ -/* COLOR VARIABLES */ -$background: mix($accent, #1D1E28, 2%); -$color: white; -$border-color: rgba(255, 255, 255, .1); - -/* MEDIA QUERIES */ -$phone: "max-width: 684px"; -$tablet: "max-width: 900px"; diff --git a/assets/css/video.scss b/assets/css/video.css diff --git a/static/fonts/FiraCode-Bold.woff b/assets/fonts/FiraCode-Bold.woff Binary files differ. diff --git a/static/fonts/FiraCode-Regular.woff b/assets/fonts/FiraCode-Regular.woff Binary files differ. diff --git a/exampleSite/config.toml b/exampleSite/config.toml @@ -3,6 +3,12 @@ languageCode = "en-us" theme = "hugo-theme-terminal" pagination.pagerSize = 2 +[sitemap] + changeFreq = 'Monthly' + disable = false + filename = 'sitemap.xml' + priority = -1 + [params] contentTypeName = "posts" themeColor = "pink" @@ -23,7 +29,7 @@ pagination.pagerSize = 2 [languages] [languages.en] title = "Terminal" - copyright = "" + copyright = "All content by [lou.] licensed as <a href=\"https://creativecommons.org/licenses/by-sa/4.0/\" target=\"_blank\" style=\"text-decoration:none\">CC-BY-SA 4.0</a> unless otherwise specified." [languages.en.params] subtitle = "A simple, retro theme for Hugo" diff --git a/layouts/_partials/cover.html b/layouts/_partials/cover.html @@ -18,7 +18,7 @@ {{if $cover -}} <!-- Cover image found --> <img src="{{ $cover }}" - class="post-cover center" - alt="{{ .Title | plainify | default " " }}" - title="{{ .Params.CoverCredit |plainify|default "Cover Image" }}" /> + class="post-cover center" + alt="{{ .Title | plainify | default " " }}" + title="{{ .Params.CoverCredit |plainify|default "Cover Image" }}" /> {{- end }} diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html @@ -1,14 +1,11 @@ <footer class="footer"> - <div class="footer__inner"> + <div class="copyright"> {{ if $.Site.Copyright }} - <div class="copyright copyright--user"> - <span>{{ $.Site.Copyright | safeHTML }}</span> + <span>{{ $.Site.Copyright | safeHTML }}</span> {{ else }} - <div class="copyright"> - <span>© {{ now.Year }} Powered by <a href="https://gohugo.io">Hugo</a></span> + <span>© {{ now.Year }} Powered by <a href="https://gohugo.io">Hugo</a></span> {{ end }} - <span> <a href="https://git.repetitions.de/hugo-theme-terminal" target="_blank">Theme</a> adapted from <a href="https://github.com/panr" target="_blank">panr</a></span> - </div> + <span> <a href="https://git.repetitions.de/hugo-theme-terminal" target="_blank">Theme</a> adapted from <a href="https://github.com/panr" target="_blank">panr</a></span> </div> </footer> diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html @@ -22,20 +22,21 @@ {{- end }} <link rel="canonical" href="{{ .Permalink }}" /> -{{- $defaultStyles := resources.Get "css/style.scss" -}} -<!-- Local Theme Variables --> -{{ if and (isset .Params "color") (not (eq .Params.color "")) -}} - {{- $localColorCss := resources.Get (printf "css/color/%s.scss" .Params.color) -}} - {{- $localCss := slice $localColorCss $defaultStyles | resources.Concat (printf "css/%s-local.scss" .Params.color) -}} - {{- $localColorStyles := $localCss | css.Sass -}} - <link rel="stylesheet" href="{{ $localColorStyles.Permalink }}"> -{{- else -}} - <!-- Theme Variables --> - {{- $colorCss := resources.Get (printf "css/color/%s.scss" ($.Site.Params.ThemeColor | default "orange")) -}} - {{- $css := slice $colorCss $defaultStyles | resources.Concat "css/base.scss" -}} - {{- $options := (dict "targetPath" "styles.css" "outputStyle" "compressed" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) -}} - {{- $styles := $css | css.Sass $options -}} - <link rel="stylesheet" href="{{ $styles.Permalink -}}"> +{{ template "_internal/google_analytics.html" . }} + +{{ $css := resources.Get "css/style.css" }} +{{ $options := (dict + "targetPath" "styles.css" + "minify" true + "sourceMap" "linked" +) }} +{{ $styles := $css | css.Build $options }} + +<link rel="stylesheet" href="{{ $styles.Permalink }}"> + +<!-- Custom CSS to override theme properties (/static/style.css) --> +{{ if (fileExists "static/style.css") -}} + <link rel="stylesheet" href="{{ "style.css" | absURL }}"> {{- end }} <!-- Custom CSS to override theme properties (/static/style.css) --> diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html @@ -1,13 +1,7 @@ <header class="header"> - <div class="header__inner"> - {{ partial "logo.html" . -}} - {{ if len $.Site.Menus -}} - {{ partial "mobile-menu.html" . }} - {{- end }} - {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) -}} - {{ partial "language-menu.html" . }} - {{- end }} + <div class="logo"> + {{- partial "logo.html" . -}} </div> {{- if len $.Site.Menus }} {{ partial "menu.html" . }} diff --git a/layouts/_partials/logo.html b/layouts/_partials/logo.html @@ -1,16 +1,11 @@ - -<div class="header__logo"> - <a href="{{- if $.Site.Params.Logo.LogoHomeLink -}} - {{- $.Site.Params.Logo.LogoHomeLink -}} +<a href="{{- if $.Site.Params.Logo.LogoHomeLink -}} + {{ $.Site.Params.Logo.LogoHomeLink }} +{{- else -}} + {{ $.Site.BaseURL }} +{{- end -}}"> + {{- with $.Site.Params.Logo.logoText -}} + {{- . -}} {{- else -}} - {{- $.Site.BaseURL -}} - {{- end }}"> - <div class="logo"> - {{ with $.Site.Params.Logo.logoText -}} - {{ . }} - {{- else -}} - Terminal - {{- end }} - </div> - </a> -</div> + Terminal + {{- end }} +</a> diff --git a/layouts/_partials/menu.html b/layouts/_partials/menu.html @@ -1,14 +1,12 @@ <nav class="navigation-menu"> - <ul class="navigation-menu__inner menu--desktop"> - {{- if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) -}} - {{- range first $.Site.Params.showMenuItems $.Site.Menus.main }} - {{ if not .HasChildren -}} - <li><a href="{{ .URL }}" {{- if .Params.NewTab -}} target="_blank" {{- end }}> - {{- .Name -}} - </a></li> - {{- end }} - {{- end }} - {{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems -}} + <ul class="navigation-menu__inner"> + {{ if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) }} + {{ range first $.Site.Params.showMenuItems $.Site.Menus.main }} + {{ if not .HasChildren }} + <li><a href="{{ .URL }}" {{ if .Params.NewTab -}} target="_blank" {{- end }}>{{ .Name }}</a></li> + {{ end }} + {{ end }} + {{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }} <li> <ul class="menu"> <li class="menu__trigger">{{ $.Site.Params.MenuMore }}&nbsp;▾</li> diff --git a/layouts/_partials/pagination.html b/layouts/_partials/pagination.html @@ -1,15 +1,15 @@ <div class="pagination"> - <div class="pagination__buttons"> + <div class="buttons"> {{ if .Paginator.HasPrev }} <a href="{{ .Paginator.Prev.URL }}" class="button previous"> - <span class="button__icon">←</span> - <span class="button__text">{{ $.Site.Params.newerPosts | default "Newer posts" }}</span> + <span class="button_icon">←</span> + <span class="button_text">{{ $.Site.Params.newerPosts | default "Newer posts" }}</span> </a> {{ end }} {{ if .Paginator.HasNext }} <a href="{{ .Paginator.Next.URL }}" class="button next"> - <span class="button__text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span> - <span class="button__icon">→</span> + <span class="button_text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span> + <span class="button_icon">→</span> </a> {{ end }} </div> diff --git a/layouts/_partials/posts_pagination.html b/layouts/_partials/posts_pagination.html @@ -1,20 +1,20 @@ {{ if or .NextInSection .PrevInSection }} <div class="pagination"> - <div class="pagination__title"> - <span class="pagination__title-h">{{ $.Site.Params.ReadOtherPosts }}</span> + <div class="title"> + <span>{{ $.Site.Params.ReadOtherPosts }}</span> <hr /> </div> - <div class="pagination__buttons"> + <div class="buttons"> {{ if .NextInSection }} <a class="button previous" href="{{ .NextInSection.Permalink }}"> - <span class="button__icon">←</span> - <span class="button__text">{{ .NextInSection.Title }}</span> + <span class="button_icon">←</span> + <span class="button_text">{{ .NextInSection.Title }}</span> </a> {{ end }} {{ if .PrevInSection }} <a class="button next" href="{{ .PrevInSection.Permalink }}"> - <span class="button__text">{{ .PrevInSection.Title }}</span> - <span class="button__icon">→</span> + <span class="button_text">{{ .PrevInSection.Title }}</span> + <span class="button_icon">→</span> </a> {{ end }} </div> diff --git a/layouts/_shortcodes/prismjs.html b/layouts/_shortcodes/prismjs.html @@ -1,26 +0,0 @@ -{{ $inner := replaceRE "^\r?\n" "" .Inner | string }} -{{ if len .Params | eq 0 }} - <pre><code>{{ $inner }}</code></pre> -{{ else }} - {{ if .IsNamedParams }} - <pre class=" - {{- if .Get "lang" }}language-{{ .Get "lang" }}{{ end }} - {{- if .Get "line-numbers" }} line-numbers{{ end }} - {{- if .Get "command-line" }} command-line{{ end }}" - {{- /* line highlight plugin */ -}} - {{- if .Get "line" }} data-line="{{ .Get "line" }}"{{ end }} - {{- /* line number plugin */ -}} - {{- if .Get "start" }} data-start="{{ .Get "start" }}"{{ end }} - {{- /* command-line plugin */ -}} - {{- if .Get "user" }} data-user="{{ .Get "user" }}"{{ end }} - {{- if .Get "host" }} data-host="{{ .Get "host" }}"{{ end }} - {{- if .Get "prompt" }} data-prompt="{{ .Get "prompt" }}"{{ end }} - {{- if .Get "output" }} data-output="{{ .Get "output" }}"{{ end }} - ><code {{ if .Get "lang" }}class="language-{{ .Get "lang" }}"{{ end }} - >{{ $inner }}</code></pre> - {{ else }} - <pre class="language-{{ .Get 0 }}"> - <code class="language-{{ .Get 0 }}">{{ $inner }}</code> - </pre> - {{ end }} -{{ end }} diff --git a/layouts/rss.xml b/layouts/rss.xml @@ -17,9 +17,9 @@ <link>{{ .Permalink }}</link> <description>Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description> <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }} - <language>{{.}}</language>{{end}}{{ with .Site.Author.email }} - <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }} - <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }} + <language>{{.}}</language>{{end}}{{ with "hi" }} + <managingEditor>{{.}}{{ with "hiu" }} ({{.}}){{end}}</managingEditor>{{end}}{{ with "hui" }} + <webMaster>{{.}}{{ with "hu" }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }} <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }} <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }} {{- with .OutputFormats.Get "RSS" -}} @@ -30,7 +30,7 @@ <title>{{ .Title }}</title> <link>{{ .Permalink }}</link> <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate> - {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}} + {{ with "hi" }}<author>{{.}}{{ with "hji" }} ({{.}}){{end}}</author>{{end}} <guid>{{ .Permalink }}</guid> <description>{{ .Summary | html }}</description> <content>{{ .Content | html }}</content>