From 8547f38a98bc777de12affdc9a859544b2c7ca03 Mon Sep 17 00:00:00 2001 From: Duma Date: Wed, 13 Mar 2024 21:20:43 +0100 Subject: [PATCH] new theme --- assets/fonts.scss | 41 ---- assets/style-v2.css | 226 ++++++++++++++++++ assets/style.scss | 224 ----------------- config.toml | 18 +- content/notes/has_selector_and_node_parent.md | 2 +- .../layouts/_default/baseof.html | 14 +- .../duma_template/layouts/_default/list.html | 37 +-- .../layouts/_default/single.html | 52 ++-- .../layouts/_default/summary.html | 4 +- themes/duma_template/layouts/index.html | 6 +- .../layouts/partials/header.html | 6 +- .../layouts/partials/sidebar.html | 24 +- 12 files changed, 313 insertions(+), 341 deletions(-) delete mode 100644 assets/fonts.scss create mode 100644 assets/style-v2.css delete mode 100644 assets/style.scss diff --git a/assets/fonts.scss b/assets/fonts.scss deleted file mode 100644 index 049784c..0000000 --- a/assets/fonts.scss +++ /dev/null @@ -1,41 +0,0 @@ -@font-face { - font-family: "IBM Plex Sans"; - src: url(../fonts/IBMPlexSans-Regular.ttf) format('truetype'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "IBM Plex Sans"; - src: url(../fonts/IBMPlexSans-Italic.ttf) format('truetype'); - font-weight: normal; - font-style: italic; -} - -@font-face { - font-family: "IBM Plex Sans"; - src: url(../fonts/IBMPlexSans-Bold.ttf) format('truetype'); - font-weight: bold; - font-style: normal; -} - -@font-face { - font-family: "IBM Plex Sans"; - src: url(../fonts/IBMPlexSans-BoldItalic.ttf) format('truetype'); - font-weight: bold; - font-style: italic; -} - -@font-face { - font-family: "IBM Plex Sans"; - src: url(../fonts/IBMPlexSans-Light.ttf) format('truetype'); - font-weight: 300; - font-style: normal; -} - -@font-face { - font-family: "IBM Plex Sans"; - src: url(../fonts/IBMPlexSans-LightItalic.ttf) format('truetype'); - font-weight: 300; - font-style: italic; -} \ No newline at end of file diff --git a/assets/style-v2.css b/assets/style-v2.css new file mode 100644 index 0000000..e2c2c0a --- /dev/null +++ b/assets/style-v2.css @@ -0,0 +1,226 @@ +@font-face { + font-family: "IBM Plex Sans"; + src: url(../fonts/IBMPlexSans-Light.ttf) format('truetype'); + font-weight: 300; + font-style: normal; + } + + @font-face { + font-family: "IBM Plex Sans"; + src: url(../fonts/IBMPlexSans-LightItalic.ttf) format('truetype'); + font-weight: 300; + font-style: italic; + } + + @font-face { + font-family: "IBM Plex Sans"; + src: url(../fonts/IBMPlexSans-Regular.ttf) format('truetype'); + font-weight: 400; + font-style: normal; + } + + @font-face { + font-family: "IBM Plex Sans"; + src: url(../fonts/IBMPlexSans-Italic.ttf) format('truetype'); + font-weight: 400; + font-style: italic; + } + + @font-face { + font-family: "IBM Plex Sans"; + src: url(../fonts/IBMPlexSans-Bold.ttf) format('truetype'); + font-weight: 700; + font-style: normal; + } + + @font-face { + font-family: "IBM Plex Sans"; + src: url(../fonts/IBMPlexSans-BoldItalic.ttf) format('truetype'); + font-weight: 700; + font-style: italic; + } + +:root { + --primary-color: #D45151; + --background-color: #f2f2fa; + --text-color: #333; +} + +body { + background-color: var(--background-color); + color: var(--text-color); + font-size: 15px; + + font-family: "IBM Plex Sans", sans-serif; + display: grid; + justify-content: center; + gap: 2rem; + grid-template-columns: minmax(300px, auto), minmax(200px, auto); + grid-template-areas: + "header header" + "content sidebar" + "footer footer"; + + @media screen and (max-width: 800px) { + grid-template-columns: 1fr; + grid-template-areas: "header" "content" "sidebar" "footer"; + } +} + +header { + grid-area: header; + display: flex; + align-items: center; + margin-bottom: 1rem; + border-bottom: 1px solid var(--text-color); + padding-bottom: .5rem; + + nav > ul { + padding-left: 1rem; + list-style: none; + display: flex; + gap: 1rem; + + li { + display: inline-block; + + a { + font-size: 1.rem; + } + } + + &::before { + content: "/"; + } + } +} + +main { + grid-area: content; + max-width: 800px; + width: 800px; + line-height: 23px; + + + figure, img { + max-width: 100%; + } + + ul.tags { + list-style: none; + padding-left: 0; + margin: 0; + + li { + display: inline-block; + + a { + text-decoration: none; + font-weight: 400; + } + } + } +} + +aside { + grid-area: sidebar; + max-width: 300px; + + @media screen and (max-width: 800px) { + max-width: unset; + } + + ul { + padding-left: 1rem; + } + + .section-title { + font-weight: 700; + text-transform: uppercase; + } +} + +footer { + grid-area: footer; +} + +/* Links */ +a { + color: var(--text-color); + text-decoration: none; + &:hover { + text-decoration: underline; + } +} + +main h1 a { + text-decoration: none; + &:hover { + color: var(--text-color) + } +} + +main a { + text-decoration: underline; + font-weight: bold; + &:hover { + color: var(--primary-color); + } +} + +time { + display: inline-block; + color: #404044; + font-size: 12px; + margin: 0 3px; + padding: 0 3px; + background-color: #f0f0f2; + border-radius: 3px;; +} + +figure { + margin: 0; +} + +h1 { + font-size: 3rem; + line-height: 4rem; + font-weight: 700; + margin-top: 0; +} + +code, time { + border-radius: 3px; + font-family: "Berkeley Mono", "IBM Plex Mono", monospace; +} + +time { + color: #333; + padding: 0 3px; + background-color: var(--background-color); +} + +code { + padding: 0 .2em; + color: #111; + background-color: #fff; +} + +#title { + font-size: 1.3rem; + font-weight: 600; +} + +.highlight { + pre { + padding: 1rem; + overflow-x: auto; + font-size: 15px; + } + code { + padding: 0; + border-radius: unset; + background-color: unset; + color: unset; + } +} \ No newline at end of file diff --git a/assets/style.scss b/assets/style.scss deleted file mode 100644 index 1ed71a8..0000000 --- a/assets/style.scss +++ /dev/null @@ -1,224 +0,0 @@ -@import './fonts'; - -$main_column_width: 500px; -$main_margin: 20px; -$sidebar_min_width: 300px; -$background_color: #f2f2fa; - - -// SIDEBAR LAYOUT - generated with https://every-layout.dev/layouts/sidebar/ ---------------------- - -.with-sidebar { - overflow: hidden; -} - -.with-sidebar > * { - display: flex; - flex-wrap: wrap; - margin: calc(#{$main_margin} / 2 * -1); -} - -.with-sidebar > * > * { - margin: calc(#{$main_margin} / 2); - flex-grow: 1; - flex-basis: #{$sidebar_min_width}; -} - -.with-sidebar > * > :first-child { - flex-basis: 0; - flex-grow: 999; - min-width: calc(#{$main_column_width} - #{$main_margin}); -} - -@media screen and (max-width: 540px) { - .with-sidebar > * { - flex-direction: row; - - & > :first-child { - min-width: unset; - } - } -} - -// SIDEBAR --------------------------------------------------------------------------------------- - -aside { - - font-size: 15px; - - h3 { - font-size: .9rem; - margin-bottom: .5rem; - color: #333; - font-weight: 600; - - &:first-child { - margin-top: 0; - } - } -} - -// QUOTES ----------------------------------------------------------------------------------------- - -blockquote { - font-size: 1.1em; - font-style: italic; - margin: 2rem auto; - max-width: 600px; -} - -// COMMON STYLE ----------------------------------------------------------------------------------- - -body { - background-color: #{$background_color}; - font-family: "IBM Plex Sans", sans-serif; - margin: 0; - color: #333; -} - -body > header, -body > aside, -body > footer, -div.with-sidebar { - max-width: 1100px; - margin: auto; - padding: 0 .7rem; -} - -a, a:visited { - text-decoration: none; - color: #333; -} - -.content { - margin-top: 1rem; -} - -.content, .pagination { - a, a:visited { - font-weight: 700; - word-break: break-all; - text-decoration: underline; - } - - a:hover { - color: #d55; - } -} - -.content p a { - word-break: break-word; -} - -a:hover { - text-decoration: underline; -} - -h1 { - font-size: 3rem; - line-height: 4rem; - margin-bottom: 0; - margin-top: 0; -} - -time { - font-style: italic; -} - -article { - margin-top: 3rem; - text-align: left; - font-size: 15px; - line-height: 23px; - - &:first-of-type { - margin-top: 0; - } - - .content { - - p:first-of-type > img { - margin: 3rem 0; - } - - - dd { - margin-block-end: 1em; - margin-left: 0; - } - } -} - - -footer { - text-align: center; -} - -img { - max-width: 100%; - width: aut0; -} - -.video-container { - text-align: center; -} - -header { - margin-bottom: 2rem !important; -} - -header > #real-header { - display: flex; - flex-direction: row; - align-items: baseline; - padding-top: 1rem; - padding-bottom: 1rem; -} - -#fake-border { - border-bottom: 1px solid #333; - width: 100%; -} - -#title { - font-size: 1.3rem; - font-weight: 600; - margin-right: 1em; -} - -header nav ul { - list-style: none; - margin: 0; - padding: 0; -} - -header nav li { - display: inline-block; -} - -header nav li a { - margin-left: 1em; -} - -figure { - margin: 0; -} - -figcaption { - font-size: .7em; - font-family: sans-serif; - color: #777; - text-align: right; -} - -figcaption a { - color: #777; - /*text-decoration: none !important;*/ -} - -.pagination { - text-align: center; - margin: 2rem 0; -} - - diff --git a/config.toml b/config.toml index 1bc32d3..ba2b789 100644 --- a/config.toml +++ b/config.toml @@ -6,4 +6,20 @@ paginate = 5 enableEmoji = true enableGitInfo = true enableRobotsTXT = true -canonifyURLs = true \ No newline at end of file +canonifyURLs = true + +[markup] + [markup.highlight] + anchorLineNos = false + codeFences = true + guessSyntax = false + hl_Lines = '' + hl_inline = false + lineAnchors = '' + lineNoStart = 1 + lineNos = false + lineNumbersInTable = true + noClasses = true + noHl = false + style = 'base16-snazzy' + tabWidth = 4 \ No newline at end of file diff --git a/content/notes/has_selector_and_node_parent.md b/content/notes/has_selector_and_node_parent.md index 24ce03d..49217a7 100644 --- a/content/notes/has_selector_and_node_parent.md +++ b/content/notes/has_selector_and_node_parent.md @@ -1,5 +1,5 @@ --- -title: ":has() pseudo-selector and current node parent" +title: ":has() pseudo-selector and current node parent" date: 2024-02-02 publishdate: 2024-02-02 draft: false diff --git a/themes/duma_template/layouts/_default/baseof.html b/themes/duma_template/layouts/_default/baseof.html index e3d137d..74d692b 100644 --- a/themes/duma_template/layouts/_default/baseof.html +++ b/themes/duma_template/layouts/_default/baseof.html @@ -1,23 +1,13 @@ - {{ .Title }} + {{ .Title | safeHTML }} {{ partial "meta" . }} - {{ $style := resources.Get "style.scss" | toCSS | minify | fingerprint }} + {{ $style := resources.Get "style-v2.css" }} {{ with .OutputFormats.Get "RSS" -}} {{ printf `` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }} {{- end }} - - - - - {{ partial "header" . }} diff --git a/themes/duma_template/layouts/_default/list.html b/themes/duma_template/layouts/_default/list.html index 8eb6cbe..19709e9 100644 --- a/themes/duma_template/layouts/_default/list.html +++ b/themes/duma_template/layouts/_default/list.html @@ -1,20 +1,23 @@ {{ define "main" }} -
-
-
- {{ if or .Title .Content }} -
- {{ with .Title }}

{{ . }}

{{ end }} - {{ with .Content }}
{{ . }}
{{ end }} -
- {{ end }} - - {{ range .Paginator.Pages }} - {{ .Render "summary" }} - {{ end }} - {{ partial "pagination.html" . }} -
- {{ partial "sidebar.html" . }} +
+ {{ if or .Title .Content }} +
+ {{ with .Title }}

{{ . }}

{{ end }} + {{ with .Content }}
{{ . }}
{{ end }}
-
+ {{ end }} + + + {{ partial "pagination.html" . }} + + {{ end }} diff --git a/themes/duma_template/layouts/_default/single.html b/themes/duma_template/layouts/_default/single.html index d23c836..4aeda62 100644 --- a/themes/duma_template/layouts/_default/single.html +++ b/themes/duma_template/layouts/_default/single.html @@ -1,30 +1,28 @@ {{ define "main" }} -
-
-
-
- {{ with .Params.tags }} -
-
    - {{ range . }} -
  • #{{ . }}
    • - {{ end }} -
-
- {{ end }} -

{{ .Title }}

- -
- {{ .Content }} -
- {{ with .Site.DisqusShortname }} -
- {{ template "_internal/disqus.html" . }} -
+
+
+ {{ with .Params.tags }} +
    + {{ range . }} +
  • #{{ . }}
    • {{ end }} -
-
- {{ partial "sidebar.html" . }} -
-
+ + {{ end }} + +

{{ .Title | safeHTML }}

+ +
+ {{ .Content }} +
+ + {{ with .Site.DisqusShortname }} +
+ {{ template "_internal/disqus.html" . }} +
+ {{ end }} + + + {{ end }} \ No newline at end of file diff --git a/themes/duma_template/layouts/_default/summary.html b/themes/duma_template/layouts/_default/summary.html index efb5bc2..4ba38d6 100644 --- a/themes/duma_template/layouts/_default/summary.html +++ b/themes/duma_template/layouts/_default/summary.html @@ -1,6 +1,6 @@
-

{{ .Title }}

- +

{{ .Title | safeHTML }}

+
{{ .Content }}
diff --git a/themes/duma_template/layouts/index.html b/themes/duma_template/layouts/index.html index 4ffadff..408768d 100644 --- a/themes/duma_template/layouts/index.html +++ b/themes/duma_template/layouts/index.html @@ -1,6 +1,4 @@ {{ define "main" }} -
-
{{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }} {{ range $paginator.Pages }} @@ -8,7 +6,7 @@ {{ end }} {{ partial "pagination.html" . }}
+
-
+ {{ end }} diff --git a/themes/duma_template/layouts/partials/header.html b/themes/duma_template/layouts/partials/header.html index 72c4cb9..9a60920 100644 --- a/themes/duma_template/layouts/partials/header.html +++ b/themes/duma_template/layouts/partials/header.html @@ -1,12 +1,10 @@
- -
diff --git a/themes/duma_template/layouts/partials/sidebar.html b/themes/duma_template/layouts/partials/sidebar.html index adfb9b4..1eb5b71 100644 --- a/themes/duma_template/layouts/partials/sidebar.html +++ b/themes/duma_template/layouts/partials/sidebar.html @@ -1,10 +1,18 @@