From 1af0feeffd63d3d687849d8da1d893fc705354cf Mon Sep 17 00:00:00 2001 From: a Date: Mon, 17 Oct 2022 09:46:58 -0500 Subject: [PATCH] fix unstyled elements and small bugs --- assets/styles/common/content.scss | 23 +------------------ assets/styles/components/breadcrumbs.scss | 4 +++- assets/styles/components/nav-section.scss | 5 ++-- .../styles/components/single/page-header.scss | 20 ---------------- assets/styles/components/site-footer.scss | 5 ++++ assets/styles/features/headings.scss | 6 +++++ assets/styles/{screen => features}/links.scss | 0 assets/styles/features/search.scss | 2 ++ .../styles/features/syntax-highlighting.scss | 22 +++++++++--------- assets/styles/layouts/list.scss | 19 +++++++++++++++ .../layout.scss => layouts/responsive.scss} | 4 +++- assets/styles/layouts/single.scss | 21 +++++++++++++++++ assets/styles/print.scss | 5 +++- assets/styles/screen.scss | 9 +++++--- assets/styles/shortcodes/hint.scss | 21 +++++++++++++++++ layouts/partials/nav-footer.html | 2 +- layouts/partials/nav-header.html | 2 +- layouts/partials/nav-section.html | 11 ++++++--- 18 files changed, 115 insertions(+), 66 deletions(-) delete mode 100644 assets/styles/components/single/page-header.scss rename assets/styles/{screen => features}/links.scss (100%) create mode 100644 assets/styles/layouts/list.scss rename assets/styles/{screen/layout.scss => layouts/responsive.scss} (99%) create mode 100644 assets/styles/layouts/single.scss create mode 100644 assets/styles/shortcodes/hint.scss diff --git a/assets/styles/common/content.scss b/assets/styles/common/content.scss index 6a9b3a1..e1b4676 100644 --- a/assets/styles/common/content.scss +++ b/assets/styles/common/content.scss @@ -94,7 +94,7 @@ background: var(--ui-overlay); color: var(--ui-overlay-text); padding: 1em; - line-height: 1.4; + line-height: 2; overflow-x: auto; white-space: pre; display: grid; @@ -149,27 +149,6 @@ border: 1px solid var(--ui-text); padding: 0.5em; } - /* {{}} shortcode */ - .hint { - padding: 1em; - line-height: 2; - } - .hint, - .hint.info, - .hint.tip { - background: rgba(142, 226, 142, 0.2); - border-left: 4px solid rgb(142, 226, 142); - } - - .hint.warning { - background: rgba(218, 226, 142, 0.2); - border-left: 4px solid rgb(218, 226, 142); - } - - .hint.danger { - background: rgba(226, 142, 142, 0.2); - border-left: 4px solid rgb(226, 142, 142); - } /* hugo-specific citation footnote */ cite sup { position: inherit; diff --git a/assets/styles/components/breadcrumbs.scss b/assets/styles/components/breadcrumbs.scss index cb64a3a..ed010c9 100644 --- a/assets/styles/components/breadcrumbs.scss +++ b/assets/styles/components/breadcrumbs.scss @@ -1,9 +1,11 @@ .breadcrumbs { display: flex; flex-flow: row wrap; + li { + margin-bottom: 1rem; + } li:not(:first-child) { margin-left: 1rem; - margin-bottom: 1rem; } li::marker { content: "> "; diff --git a/assets/styles/components/nav-section.scss b/assets/styles/components/nav-section.scss index 9923799..11099e5 100644 --- a/assets/styles/components/nav-section.scss +++ b/assets/styles/components/nav-section.scss @@ -11,13 +11,14 @@ text-decoration: none; background: var(--ui-overlay); color: var(--ui-overlay-text); + box-shadow: 2px 2px 6px rgba(0,0,0,0.25); &:focus { padding: 1em; border: none; } } - .previous { - justify-content: start; + .previous, .next { + justify-content: space-between; } .arrow { text-decoration: none; diff --git a/assets/styles/components/single/page-header.scss b/assets/styles/components/single/page-header.scss deleted file mode 100644 index 0cecb33..0000000 --- a/assets/styles/components/single/page-header.scss +++ /dev/null @@ -1,20 +0,0 @@ -.page { - .page-title { - font-size: 2em; - margin-bottom: 1rem; - } - .page-summary { - line-height: 1.5; - max-width: 80ch; - } - .lastmod { - margin-top: 1rem; - line-height: 1.5; - color: var(--ui-text-muted); - } - .language-list { - display: flex; - flex-flow: wrap; - list-style: none; - } -} \ No newline at end of file diff --git a/assets/styles/components/site-footer.scss b/assets/styles/components/site-footer.scss index 9f2770e..2924b63 100644 --- a/assets/styles/components/site-footer.scss +++ b/assets/styles/components/site-footer.scss @@ -32,4 +32,9 @@ margin-left: auto; } + .copyright a { + text-decoration: none; + color: var(--ui-text-bold); + } + } diff --git a/assets/styles/features/headings.scss b/assets/styles/features/headings.scss index 336910e..4c26678 100644 --- a/assets/styles/features/headings.scss +++ b/assets/styles/features/headings.scss @@ -70,5 +70,11 @@ article[autonumbering] { #TableOfContents li:before { content: counters(item, ".") ". "; counter-increment: item; + font-family: monospace; + } + #TableOfContents ol ol, + #TableOfContents ul ul + { + margin-left: 0; } } \ No newline at end of file diff --git a/assets/styles/screen/links.scss b/assets/styles/features/links.scss similarity index 100% rename from assets/styles/screen/links.scss rename to assets/styles/features/links.scss diff --git a/assets/styles/features/search.scss b/assets/styles/features/search.scss index 2ffb9c3..fe448fa 100644 --- a/assets/styles/features/search.scss +++ b/assets/styles/features/search.scss @@ -45,6 +45,7 @@ #search-input { background: var(--ui-overlay); color: var(--ui-overlay-text); + filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.15)); border-radius: 100rem; border: 0; padding: 0.5rem 1rem; @@ -61,4 +62,5 @@ color: var(--primary-accent-text); border-radius: 4px; height: 2rem; + filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.15)); } \ No newline at end of file diff --git a/assets/styles/features/syntax-highlighting.scss b/assets/styles/features/syntax-highlighting.scss index b544de6..cd64de9 100644 --- a/assets/styles/features/syntax-highlighting.scss +++ b/assets/styles/features/syntax-highlighting.scss @@ -6,19 +6,19 @@ --keyword: #3361a7; --class: #f57900; --variable: #c049dd; - --number: #53ca24; + --number: #32940b; --operator: #5400c2; - --highlight: rgb(196, 196, 196); + --highlight: rgb(230, 230, 196); @media (prefers-color-scheme: dark) { - --error: #cc0000; + --error: #f85e5e; --keyword: #e0d56e; - --class: #8700f5; - --variable: #008eb9; + --class: #b872f1; + --variable: #68aff1; --number: #53ca24; --operator: #fffd6f; - --highlight: #555; + --highlight: #444; } } @@ -42,7 +42,7 @@ /* KeywordReserved */ .chroma .kr { color: var(--keyword); font-weight: bold } /* KeywordType */ .chroma .kt { color: var(--keyword); font-weight: bold } /* Name */ .chroma .n { color: var(--ui-text-bold) } -/* NameAttribute */ .chroma .na { color: var(--ui-text-bold) } +/* NameAttribute */ .chroma .na { color: var(--keyword) } /* NameBuiltin */ .chroma .nb { color: var(--name) } /* NameBuiltinPseudo */ .chroma .bp { color: #3465a4 } /* NameClass */ .chroma .nc { color: var(--ui-text-bold) } @@ -54,7 +54,7 @@ /* NameFunctionMagic */ .chroma .fm { color: var(--ui-text-bold) } /* NameLabel */ .chroma .nl { color: var(--name) } /* NameNamespace */ .chroma .nn { color: var(--ui-text-bold) } -/* NameOther */ .chroma .nx { color: var(--ui-text-bold)} +/* NameOther */ .chroma .nx { color: var(--class)} /* NameProperty */ .chroma .py { color: var(--ui-text-bold) } /* NameTag */ .chroma .nt { color: var(--keyword); font-weight: bold } /* NameVariable */ .chroma .nv { color: var(--variable) } @@ -76,7 +76,7 @@ /* LiteralStringInterpol */ .chroma .si { color: var(--variable) } /* LiteralStringOther */ .chroma .sx { color: var(--variable) } /* LiteralStringRegex */ .chroma .sr { color: var(--variable) } -/* LiteralStringSingle */ .chroma .s1 { color: var(--variable) } +/* LiteralStringSingle */ .chroma .s1 { color: var(--number) } /* LiteralStringSymbol */ .chroma .ss { color: var(--variable) } /* LiteralNumber */ .chroma .m { color: var(--number); font-weight: bold } /* LiteralNumberBin */ .chroma .mb { color: var(--number); font-weight: bold } @@ -87,7 +87,7 @@ /* LiteralNumberOct */ .chroma .mo { color: var(--number); font-weight: bold } /* Operator */ .chroma .o { color: var(--operator); font-weight: bold } /* OperatorWord */ .chroma .ow { color: var(--keyword); font-weight: bold } -/* Punctuation */ .chroma .p { color: var(--ui-text-bold); font-weight: bold } +/* Punctuation */ .chroma .p { color: var(--variable); font-weight: bold } /* Comment */ .chroma .c { color: var(--ui-text-muted); font-style: italic } /* CommentHashbang */ .chroma .ch { color: var(--ui-text-muted); font-style: italic } /* CommentMultiline */ .chroma .cm { color: var(--ui-text-muted); font-style: italic } @@ -107,4 +107,4 @@ /* GenericSubheading */ .chroma .gu { color: var(--ui-text-bold); font-weight: bold } /* GenericTraceback */ .chroma .gt { color: var(--error); font-weight: bold } /* GenericUnderline */ .chroma .gl { color: var(--ui-text-bold); text-decoration: underline } -/* TextWhitespace */ .chroma .w { color: var(--ui-text-muted); text-decoration: underline } \ No newline at end of file +/* TextWhitespace */ .chroma .w { color: var(--ui-text-muted); } \ No newline at end of file diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss new file mode 100644 index 0000000..71b9f2d --- /dev/null +++ b/assets/styles/layouts/list.scss @@ -0,0 +1,19 @@ +.list .container { + +} + +.list-item { + margin-bottom: 2rem; + &__title { + display: inline-block; + margin-bottom: 0.5rem; + font-size: 1.25em; + } + &__summary { + margin-bottom: 0.5rem; + line-height: 1.5; + } + &__date { + color: var(--ui-text-muted); + } +} \ No newline at end of file diff --git a/assets/styles/screen/layout.scss b/assets/styles/layouts/responsive.scss similarity index 99% rename from assets/styles/screen/layout.scss rename to assets/styles/layouts/responsive.scss index bbf0920..b1cb35c 100644 --- a/assets/styles/screen/layout.scss +++ b/assets/styles/layouts/responsive.scss @@ -118,7 +118,9 @@ /* also make the page header line up */ - .page-header { + .page-header, + .list + { display: grid; grid-template-columns: minmax(0, 1fr) minmax(auto, 80ch) minmax(0, 1fr); > .container { diff --git a/assets/styles/layouts/single.scss b/assets/styles/layouts/single.scss new file mode 100644 index 0000000..291ba92 --- /dev/null +++ b/assets/styles/layouts/single.scss @@ -0,0 +1,21 @@ +.breadcrumbs { + margin-bottom: 1rem; +} +.page-title { + font-size: 2em; + margin-bottom: 1rem; +} +.page-summary { + line-height: 1.5; + max-width: 80ch; +} +.lastmod { + margin-top: 1rem; + line-height: 1.5; + color: var(--ui-text-muted); +} +.language-list { + display: flex; + flex-flow: wrap; + list-style: none; +} \ No newline at end of file diff --git a/assets/styles/print.scss b/assets/styles/print.scss index 774c7b7..530dfee 100644 --- a/assets/styles/print.scss +++ b/assets/styles/print.scss @@ -4,10 +4,13 @@ @import "common/content"; @import "components/site-header"; -@import "components/single/page-header"; @import "components/breadcrumbs"; @import "components/table-of-contents"; @import "features/headings"; +@import "shortcodes/hint"; + +@import "layouts/list"; +@import "layouts/single"; #search-form, .header-nav, diff --git a/assets/styles/screen.scss b/assets/styles/screen.scss index 0a93e73..a50ca8f 100644 --- a/assets/styles/screen.scss +++ b/assets/styles/screen.scss @@ -7,7 +7,6 @@ @import "components/nav-docs"; @import "components/site-footer"; -@import "components/single/page-header"; @import "components/breadcrumbs"; @import "components/table-of-contents"; @import "components/nav-section"; @@ -15,6 +14,10 @@ @import "features/headings"; @import "features/syntax-highlighting"; @import "features/search"; +@import "features/links"; -@import "screen/layout"; -@import "screen/links"; +@import "shortcodes/hint"; + +@import "layouts/list"; +@import "layouts/single"; +@import "layouts/responsive"; \ No newline at end of file diff --git a/assets/styles/shortcodes/hint.scss b/assets/styles/shortcodes/hint.scss new file mode 100644 index 0000000..facb594 --- /dev/null +++ b/assets/styles/shortcodes/hint.scss @@ -0,0 +1,21 @@ +.hint { + padding: 1em; + line-height: 2; + margin: 1rem 0; +} +.hint, +.hint.info, +.hint.tip { + background: rgba(142, 226, 142, 0.2); + border-left: 4px solid rgb(142, 226, 142); +} + +.hint.warning { + background: rgba(218, 226, 142, 0.2); + border-left: 4px solid rgb(218, 226, 142); +} + +.hint.danger { + background: rgba(226, 142, 142, 0.2); + border-left: 4px solid rgb(226, 142, 142); +} \ No newline at end of file diff --git a/layouts/partials/nav-footer.html b/layouts/partials/nav-footer.html index b5cb518..4eaddd1 100644 --- a/layouts/partials/nav-footer.html +++ b/layouts/partials/nav-footer.html @@ -3,7 +3,7 @@ {{ $currentPage := . }} {{ range .Site.Menus.footer }}
  • + class='{{ .Identifier }}{{ if or ($currentPage.IsMenuCurrent "footer" .) (eq $currentPage.Section .Identifier) }} active{{ end }}'> {{ .Pre }} {{ .Name }} diff --git a/layouts/partials/nav-header.html b/layouts/partials/nav-header.html index d8e8348..557a7a3 100644 --- a/layouts/partials/nav-header.html +++ b/layouts/partials/nav-header.html @@ -3,7 +3,7 @@ {{ $currentPage := . }} {{ range .Site.Menus.main }}
  • + class='{{ .Identifier }}{{ if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}active{{ end }}'> {{ .Pre }} {{ .Name }} diff --git a/layouts/partials/nav-section.html b/layouts/partials/nav-section.html index e91f0f6..1d78900 100644 --- a/layouts/partials/nav-section.html +++ b/layouts/partials/nav-section.html @@ -1,10 +1,15 @@ \ No newline at end of file +