From f97270c33147199c15718f4b58b68541b824d56a Mon Sep 17 00:00:00 2001 From: "C. Lente" <7017340+clente@users.noreply.github.com> Date: Tue, 25 Apr 2023 17:57:50 -0300 Subject: Add Herman style --- assets/herman.css | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 assets/herman.css (limited to 'assets') diff --git a/assets/herman.css b/assets/herman.css new file mode 100644 index 0000000..509af4a --- /dev/null +++ b/assets/herman.css @@ -0,0 +1,180 @@ +:root { + --color-dark: hsl(228, 15%, 11%); /* 1a1a1a */ + --color-light: #fafafa; + --color-primary: #1a8fe3; + --spacing: 1.5rem; +} + +body { + background: var(--color-dark); + color: var(--color-light); + padding: 2.5rem; + font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', + source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 1.2rem; + line-height: 1.4; + min-height: 100vh; + max-width: 1600px; + margin: 0 auto; + word-wrap: break-word; +} + +header, +main, +footer { + max-width: 70ch; + margin-inline: auto; +} + +header { + padding-bottom: var(--spacing); +} + +nav a, a.blog-tags { + margin-right: calc(var(--spacing) / 3); +} +a.blog-tags { + line-height: 1.8; +} + +main { + padding-bottom: var(--spacing); +} + +footer { + text-align: center; + padding-top: var(--spacing); +} + +a { + color: currentColor; + text-decoration-color: var(--color-primary); + text-decoration-thickness: 0.3ex; + text-underline-offset: 0.3ex; +} + +a:hover { + text-decoration-thickness: 0.4ex; +} + +img { + display: block; + max-width: 100%; + height: auto; +} + +h1, +h2, +h3, +h4, +h5 { + font-weight: 700; + line-height: 1.3; +} + +h1 { + font-size: 3.55rem; +} +h2 { + font-size: 2.66rem; +} +h3 { + font-size: 2rem; +} +h4 { + font-size: 1.5rem; +} +h5 { + font-size: 1.13rem; +} + +ul, +ol { + padding-inline-start: var(--spacing); +} +li { + margin-block-start: var(--spacing); +} + +blockquote { + padding-inline-start: var(--spacing); + border-inline-start: 0.2em solid; + font-style: italic; +} + +:is(h1, h2, h3, h4, h5, blockquote) { + margin-block-end: calc(var(--spacing) / 2); +} +:is(h1, h2, h3, h4, h5) + * { + margin-block-start: calc(var(--spacing) / 3); +} +:is(h1, h2, h3, h4, h5) + :where(h2, h3, h4, h5) { + margin-block-start: calc(var(--spacing) * 2); +} + +blockquote { + max-width: 50ch; +} + +.title { + text-decoration: none; +} +.title h1 { + font-size: 2rem; + margin-top: calc(var(--spacing) / 2); +} + +ul.blog-posts { + list-style-type: none; + padding: unset; +} +ul.blog-posts li { + display: flex; + flex-direction: column; +} +@media screen and (min-width: 600px) { + ul.blog-posts li { + flex-direction: row; + gap: calc(var(--spacing) / 2); + } +} +ul.blog-posts li span { + min-width: 11ch; +} +time { + opacity: 0.5; + font-style: normal; +} + +code { + padding: 1px calc(var(--spacing) / 4); + color: #f8f8f2; + background-color: #282a36; + font-size: 1rem; +} + +pre code { + display: block; + padding: calc(var(--spacing) / 2); + white-space: pre-wrap; + overflow-x: auto; +} + +table { + width: 100%; +} +table, +th, +td { + border: 1px solid; + border-collapse: collapse; + border-color: var(--color-light); + padding: calc(var(--spacing) / 2); +} + +.disabled { + color: currentColor; + cursor: not-allowed; + opacity: 0.5; +} -- cgit v1.2.3 From 69ff6b3e176edd238055d52f26511bf77cedbbdb Mon Sep 17 00:00:00 2001 From: "C. Lente" <7017340+clente@users.noreply.github.com> Date: Wed, 26 Apr 2023 00:28:32 -0300 Subject: Dial down comment color --- assets/syntax.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'assets') diff --git a/assets/syntax.css b/assets/syntax.css index 5f15788..a28d967 100644 --- a/assets/syntax.css +++ b/assets/syntax.css @@ -69,11 +69,11 @@ /* Operator */ .chroma .o { color: #ff79c6 } /* OperatorWord */ .chroma .ow { color: #ff79c6 } /* Punctuation .chroma .p { } */ -/* Comment */ .chroma .c { color: #7c90d0 } -/* CommentHashbang */ .chroma .ch { color: #7c90d0 } -/* CommentMultiline */ .chroma .cm { color: #7c90d0 } -/* CommentSingle */ .chroma .c1 { color: #7c90d0 } -/* CommentSpecial */ .chroma .cs { color: #7c90d0 } +/* Comment */ .chroma .c { color: #8491b8 } +/* CommentHashbang */ .chroma .ch { color: #8491b8 } +/* CommentMultiline */ .chroma .cm { color: #8491b8 } +/* CommentSingle */ .chroma .c1 { color: #8491b8 } +/* CommentSpecial */ .chroma .cs { color: #8491b8 } /* CommentPreproc */ .chroma .cp { color: #ff79c6 } /* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 } /* Generic .chroma .g { } */ -- cgit v1.2.3 From be1cbcc552b76f0e2e57933339c69f5ea473f1cb Mon Sep 17 00:00:00 2001 From: "C. Lente" <7017340+clente@users.noreply.github.com> Date: Wed, 26 Apr 2023 00:29:04 -0300 Subject: Tweaks for herman.css on mobile --- assets/herman.css | 66 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 36 insertions(+), 30 deletions(-) (limited to 'assets') diff --git a/assets/herman.css b/assets/herman.css index 509af4a..cf54dd2 100644 --- a/assets/herman.css +++ b/assets/herman.css @@ -1,20 +1,22 @@ :root { - --color-dark: hsl(228, 15%, 11%); /* 1a1a1a */ + font-size: 62.5%; /* 10px */ + --color-dark: #181a20; /* 1a1a1a */ --color-light: #fafafa; --color-primary: #1a8fe3; - --spacing: 1.5rem; + --size: 1rem; + --spacing: calc(var(--size) * 2.4); } body { background: var(--color-dark); color: var(--color-light); - padding: 2.5rem; + padding: 4rem; font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 1.2rem; - line-height: 1.4; - min-height: 100vh; + font-size: calc(var(--size) * 1.8); + line-height: 1.5; + min-height: 80vh; max-width: 1600px; margin: 0 auto; word-wrap: break-word; @@ -32,10 +34,10 @@ header { } nav a, a.blog-tags { - margin-right: calc(var(--spacing) / 3); + margin-right: calc(var(--spacing) / 2); } a.blog-tags { - line-height: 1.8; + line-height: 2; } main { @@ -74,19 +76,19 @@ h5 { } h1 { - font-size: 3.55rem; + font-size: calc(var(--size) * 5.7); } h2 { - font-size: 2.66rem; + font-size: calc(var(--size) * 4.3); } h3 { - font-size: 2rem; + font-size: calc(var(--size) * 3.2); } h4 { - font-size: 1.5rem; + font-size: calc(var(--size) * 2.4); } h5 { - font-size: 1.13rem; + font-size: calc(var(--size) * 1.8); } ul, @@ -101,6 +103,7 @@ blockquote { padding-inline-start: var(--spacing); border-inline-start: 0.2em solid; font-style: italic; + max-width: 50ch; } :is(h1, h2, h3, h4, h5, blockquote) { @@ -113,15 +116,11 @@ blockquote { margin-block-start: calc(var(--spacing) * 2); } -blockquote { - max-width: 50ch; -} - .title { text-decoration: none; } .title h1 { - font-size: 2rem; + font-size: calc(var(--size) * 3.2); margin-top: calc(var(--spacing) / 2); } @@ -133,31 +132,25 @@ ul.blog-posts li { display: flex; flex-direction: column; } -@media screen and (min-width: 600px) { - ul.blog-posts li { - flex-direction: row; - gap: calc(var(--spacing) / 2); - } -} ul.blog-posts li span { min-width: 11ch; } + time { opacity: 0.5; font-style: normal; } code { - padding: 1px calc(var(--spacing) / 4); - color: #f8f8f2; + font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', + Menlo, Consolas, 'DejaVu Sans Mono', monospace; + padding: 2px calc(var(--spacing) / 4); background-color: #282a36; - font-size: 1rem; + font-size: calc(var(--size) * 1.4); } - pre code { display: block; - padding: calc(var(--spacing) / 2); - white-space: pre-wrap; + padding: var(--spacing); overflow-x: auto; } @@ -178,3 +171,16 @@ td { cursor: not-allowed; opacity: 0.5; } + +@media screen and (min-width: 600px) { + ul.blog-posts li { + flex-direction: row; + gap: calc(var(--spacing) / 2); + } +} + +@media screen and (max-width: 600px) { + :root { + --size: 0.9rem; + } +} -- cgit v1.2.3 From 603876b88d754a10cdbcf11b18c4fcc4dc0aaa91 Mon Sep 17 00:00:00 2001 From: "C. Lente" <7017340+clente@users.noreply.github.com> Date: Thu, 27 Apr 2023 11:55:52 -0300 Subject: Adjust heading sizes --- assets/herman.css | 26 ++++++++------------------ layouts/_default/list.html | 2 +- 2 files changed, 9 insertions(+), 19 deletions(-) (limited to 'assets') diff --git a/assets/herman.css b/assets/herman.css index cf54dd2..1eae1f3 100644 --- a/assets/herman.css +++ b/assets/herman.css @@ -69,25 +69,21 @@ img { h1, h2, h3, -h4, -h5 { +h4 { font-weight: 700; line-height: 1.3; } h1 { - font-size: calc(var(--size) * 5.7); + font-size: calc(var(--size) * 4.2); } h2 { - font-size: calc(var(--size) * 4.3); + font-size: calc(var(--size) * 3.4); } h3 { - font-size: calc(var(--size) * 3.2); + font-size: calc(var(--size) * 2.6); } h4 { - font-size: calc(var(--size) * 2.4); -} -h5 { font-size: calc(var(--size) * 1.8); } @@ -106,13 +102,13 @@ blockquote { max-width: 50ch; } -:is(h1, h2, h3, h4, h5, blockquote) { +:is(h1, h2, h3, h4, blockquote) { margin-block-end: calc(var(--spacing) / 2); } -:is(h1, h2, h3, h4, h5) + * { +:is(h1, h2, h3, h4) + * { margin-block-start: calc(var(--spacing) / 3); } -:is(h1, h2, h3, h4, h5) + :where(h2, h3, h4, h5) { +:is(h1, h2, h3, h4) + :where(h2, h3, h4) { margin-block-start: calc(var(--spacing) * 2); } @@ -120,7 +116,7 @@ blockquote { text-decoration: none; } .title h1 { - font-size: calc(var(--size) * 3.2); + font-size: calc(var(--size) * 3.4); margin-top: calc(var(--spacing) / 2); } @@ -178,9 +174,3 @@ td { gap: calc(var(--spacing) / 2); } } - -@media screen and (max-width: 600px) { - :root { - --size: 0.9rem; - } -} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index c251837..0bfe2ec 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -28,7 +28,7 @@ {{ if not .Data.Singular }}
{{ range .Site.Taxonomies.tags }} - #{{ .Page.Title }}   + #{{ .Page.Title }} {{ end }}
{{ end }} -- cgit v1.2.3 From 2419e25e73f60be3c18893df06ad61ed928bf277 Mon Sep 17 00:00:00 2001 From: "C. Lente" <7017340+clente@users.noreply.github.com> Date: Thu, 27 Apr 2023 12:25:09 -0300 Subject: Update social cards --- assets/herman.css | 2 +- assets/images/social_card_bg.png | Bin 651110 -> 6698 bytes assets/images/social_card_fg.png | Bin 367423 -> 4656 bytes assets/style.css | 147 -------------------------------------- layouts/partials/social_card.html | 4 +- 5 files changed, 3 insertions(+), 150 deletions(-) delete mode 100644 assets/style.css (limited to 'assets') diff --git a/assets/herman.css b/assets/herman.css index 1eae1f3..b80a9d8 100644 --- a/assets/herman.css +++ b/assets/herman.css @@ -1,6 +1,6 @@ :root { font-size: 62.5%; /* 10px */ - --color-dark: #181a20; /* 1a1a1a */ + --color-dark: #181a20; --color-light: #fafafa; --color-primary: #1a8fe3; --size: 1rem; diff --git a/assets/images/social_card_bg.png b/assets/images/social_card_bg.png index ad1d528..857ea63 100644 Binary files a/assets/images/social_card_bg.png and b/assets/images/social_card_bg.png differ diff --git a/assets/images/social_card_fg.png b/assets/images/social_card_fg.png index 01b207c..e005b0a 100644 Binary files a/assets/images/social_card_fg.png and b/assets/images/social_card_fg.png differ diff --git a/assets/style.css b/assets/style.css deleted file mode 100644 index 3b90566..0000000 --- a/assets/style.css +++ /dev/null @@ -1,147 +0,0 @@ -body { - font-family: Verdana, sans-serif; - margin: auto; - padding: 20px; - max-width: 720px; - text-align: left; - background-color: #1d1f27; - word-wrap: break-word; - overflow-wrap: break-word; - line-height: 1.5; - color: #c9d1d9; -} - -h1, -h2, -h3, -h4, -h5, -h6, -strong, -b { - color: #eee; -} - -a { - color: #8cc2dd; -} - -.title { - text-decoration: none; - border: 0; -} -.title h1 { - font-size: 24px; - margin: 19.92px 0 19.92px 0; -} - -.title span { - font-weight: 400; -} - -nav a { - margin-right: 10px; -} - -textarea { - background-color: #252525; - color: #ddd; - width: 100%; - font-size: 16px; -} - -input { - background-color: #252525; - color: #ddd; - font-size: 16px; -} - -content { - line-height: 1.6; -} - -table { - width: 100%; -} - -table, -th, -td { - border: 1px solid; - border-collapse: collapse; - border-color: #c9d1d9; - padding: 5px; -} - -img { - max-width: 100%; -} - -code { - padding: 2px 5px; - color: #f8f8f2; - background-color: #282a36; -} - -pre code { - display: block; - padding: 20px; - white-space: pre-wrap; - font-size: 14px; - overflow-x: auto; -} - -blockquote { - border-left: 1px solid #999; - color: #ccc; - padding-left: 20px; - font-style: italic; -} - -footer { - padding: 25px; - text-align: center; -} - -.helptext { - color: #aaa; - font-size: small; -} - -.errorlist { - color: #eba613; - font-size: small; -} - -/* blog posts */ -ul.blog-posts { - list-style-type: none; - padding: unset; -} - -ul.blog-posts li { - display: flex; - margin-bottom: 10px; -} - -ul.blog-posts li span { - flex: 0 0 130px; -} - -ul.blog-posts li a:visited { - color: #8b6fcb; -} - -a.blog-tags { - line-height: 2; -} - -h3.blog-filter { - margin-bottom: 0; -} - -.disabled { - color: currentColor; - cursor: not-allowed; - opacity: 0.7; -} diff --git a/layouts/partials/social_card.html b/layouts/partials/social_card.html index 8bf397f..97f08c3 100644 --- a/layouts/partials/social_card.html +++ b/layouts/partials/social_card.html @@ -5,7 +5,7 @@ {{ $fg = $fg.Filter (images.Text .Title (dict "font" $font - "color" "#f8f8f2" + "color" "#fafafa" "size" 130 "linespacing" 20 "x" 0 @@ -18,7 +18,7 @@ {{ $fg = $fg.Filter (images.Text $byline (dict "font" $font - "color" "#c9d1d9" + "color" "#898a8d" "size" 60 "linespacing" 30 "x" 0 -- cgit v1.2.3 From d5bf66d0715e620aeca1b748ae8612721e0b67bd Mon Sep 17 00:00:00 2001 From: "C. Lente" <7017340+clente@users.noreply.github.com> Date: Mon, 8 May 2023 14:20:04 -0300 Subject: Fix font-size on mobile --- assets/herman.css | 2 ++ 1 file changed, 2 insertions(+) (limited to 'assets') diff --git a/assets/herman.css b/assets/herman.css index b80a9d8..a61d6c9 100644 --- a/assets/herman.css +++ b/assets/herman.css @@ -148,6 +148,8 @@ pre code { display: block; padding: var(--spacing); overflow-x: auto; + -webkit-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; } table { -- cgit v1.2.3