From 8ba28d3b697a67a0d5e6f631ca2f64de026600d9 Mon Sep 17 00:00:00 2001 From: binick Date: Sun, 2 Nov 2025 14:22:39 +0000 Subject: [PATCH 1/2] chore: improve a11y --- src/assets/css/a11y.css | 8 + src/assets/css/binick.css | 4 - src/assets/css/highlight.css | 475 +++++++++++++++--- src/assets/css/patches.css | 6 +- src/config/_default/config.yml | 2 +- .../index.md | 4 +- src/layouts/partials/extend_footer.html | 8 + 7 files changed, 413 insertions(+), 94 deletions(-) diff --git a/src/assets/css/a11y.css b/src/assets/css/a11y.css index b185c81b..1a95ee35 100644 --- a/src/assets/css/a11y.css +++ b/src/assets/css/a11y.css @@ -2,3 +2,11 @@ color: var(--content); background: var(--code-bg); } + +.post-header a { + color: var(--content); +} + +.post-content a { + color: var(--secondary); +} \ No newline at end of file diff --git a/src/assets/css/binick.css b/src/assets/css/binick.css index 1916df13..92b8b1c8 100644 --- a/src/assets/css/binick.css +++ b/src/assets/css/binick.css @@ -14,10 +14,6 @@ margin: auto; } -.highlight span.lnt a { - box-shadow: unset; -} - .post-content table th, .post-content table:not(.highlighttable) td { border-bottom: unset; diff --git a/src/assets/css/highlight.css b/src/assets/css/highlight.css index 84bd15a8..ad4c24ab 100644 --- a/src/assets/css/highlight.css +++ b/src/assets/css/highlight.css @@ -1,82 +1,393 @@ -/* Background */ .chroma { color: #f8f8f2; background-color: #282a36 } -/* Other */ .chroma .x { } -/* Error */ .chroma .err { } -/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } -/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } -/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } -/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* Keyword */ .chroma .k { color: #ff79c6 } -/* KeywordConstant */ .chroma .kc { color: #ff79c6 } -/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic } -/* KeywordNamespace */ .chroma .kn { color: #ff79c6 } -/* KeywordPseudo */ .chroma .kp { color: #ff79c6 } -/* KeywordReserved */ .chroma .kr { color: #ff79c6 } -/* KeywordType */ .chroma .kt { color: #8be9fd } -/* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { color: #50fa7b } -/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic } -/* NameBuiltinPseudo */ .chroma .bp { } -/* NameClass */ .chroma .nc { color: #50fa7b } -/* NameConstant */ .chroma .no { } -/* NameDecorator */ .chroma .nd { } -/* NameEntity */ .chroma .ni { } -/* NameException */ .chroma .ne { } -/* NameFunction */ .chroma .nf { color: #50fa7b } -/* NameFunctionMagic */ .chroma .fm { } -/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic } -/* NameNamespace */ .chroma .nn { } -/* NameOther */ .chroma .nx { } -/* NameProperty */ .chroma .py { } -/* NameTag */ .chroma .nt { color: #ff79c6 } -/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic } -/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic } -/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic } -/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic } -/* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { } -/* LiteralDate */ .chroma .ld { } -/* LiteralString */ .chroma .s { color: #f1fa8c } -/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c } -/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c } -/* LiteralStringChar */ .chroma .sc { color: #f1fa8c } -/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c } -/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c } -/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c } -/* LiteralStringEscape */ .chroma .se { color: #f1fa8c } -/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c } -/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c } -/* LiteralStringOther */ .chroma .sx { color: #f1fa8c } -/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c } -/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c } -/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c } -/* LiteralNumber */ .chroma .m { color: #bd93f9 } -/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 } -/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 } -/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 } -/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 } -/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 } -/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 } -/* Operator */ .chroma .o { color: #ff79c6 } -/* OperatorWord */ .chroma .ow { color: #ff79c6 } -/* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color: #6272a4 } -/* CommentHashbang */ .chroma .ch { color: #6272a4 } -/* CommentMultiline */ .chroma .cm { color: #6272a4 } -/* CommentSingle */ .chroma .c1 { color: #6272a4 } -/* CommentSpecial */ .chroma .cs { color: #6272a4 } -/* CommentPreproc */ .chroma .cp { color: #ff79c6 } -/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 } -/* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { color: #ff5555 } -/* GenericEmph */ .chroma .ge { text-decoration: underline } -/* GenericError */ .chroma .gr { } -/* GenericHeading */ .chroma .gh { font-weight: bold } -/* GenericInserted */ .chroma .gi { color: #50fa7b; font-weight: bold } -/* GenericOutput */ .chroma .go { color: #44475a } -/* GenericPrompt */ .chroma .gp { } -/* GenericStrong */ .chroma .gs { } -/* GenericSubheading */ .chroma .gu { font-weight: bold } -/* GenericTraceback */ .chroma .gt { } -/* GenericUnderline */ .chroma .gl { text-decoration: underline } -/* TextWhitespace */ .chroma .w { } +/* Background */ +.chroma { + color: var(--content); + background-color: var(--entry); +} + +/* Other */ +.chroma .x {} + +/* Error */ +.chroma .err {} + +/* LineTableTD */ +.chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; +} + +/* LineTable */ +.chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + width: auto; + overflow: auto; + display: block; +} + +/* LineHighlight */ +.chroma .hl { + display: block; + width: 100%; + background-color: #ffffcc +} + +/* LineNumbersTable */ +.chroma .lnt { + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + /* color: var(--tertiary); */ +} + +.dark .chroma .lnt { + color: var(--secondary); +} + +/* LineNumbers */ +.chroma .ln { + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #959595 +} + +/* Keyword */ +.chroma .k { + color: #ff79c6 +} + +/* KeywordConstant */ +.chroma .kc { + color: #ff79c6 +} + +/* KeywordDeclaration */ +.chroma .kd { + color: #8be9fd; + font-style: italic +} + +/* KeywordNamespace */ +.chroma .kn { + color: #ff79c6 +} + +/* KeywordPseudo */ +.chroma .kp { + color: #ff79c6 +} + +/* KeywordReserved */ +.chroma .kr { + color: #ff79c6 +} + +/* KeywordType */ +.chroma .kt { + color: #8be9fd +} + +/* Name */ +.chroma .n {} + +/* NameAttribute */ +.chroma .na { + color: #50fa7b +} + +/* NameBuiltin */ +.chroma .nb { + color: #8be9fd; + font-style: italic +} + +/* NameBuiltinPseudo */ +.chroma .bp {} + +/* NameClass */ +.chroma .nc { + color: #50fa7b +} + +/* NameConstant */ +.chroma .no {} + +/* NameDecorator */ +.chroma .nd {} + +/* NameEntity */ +.chroma .ni {} + +/* NameException */ +.chroma .ne {} + +/* NameFunction */ +.chroma .nf { + color: #50fa7b +} + +/* NameFunctionMagic */ +.chroma .fm {} + +/* NameLabel */ +.chroma .nl { + color: #8be9fd; + font-style: italic +} + +/* NameNamespace */ +.chroma .nn {} + +/* NameOther */ +.chroma .nx {} + +/* NameProperty */ +.chroma .py {} + +/* NameTag */ +.chroma .nt { + color: #ff79c6 +} + +/* NameVariable */ +.chroma .nv { + color: #8be9fd; + font-style: italic +} + +/* NameVariableClass */ +.chroma .vc { + color: #8be9fd; + font-style: italic +} + +/* NameVariableGlobal */ +.chroma .vg { + color: #8be9fd; + font-style: italic +} + +/* NameVariableInstance */ +.chroma .vi { + color: #8be9fd; + font-style: italic +} + +/* NameVariableMagic */ +.chroma .vm {} + +/* Literal */ +.chroma .l {} + +/* LiteralDate */ +.chroma .ld {} + +/* LiteralString */ +.chroma .s { + color: #f1fa8c +} + +/* LiteralStringAffix */ +.chroma .sa { + color: #f1fa8c +} + +/* LiteralStringBacktick */ +.chroma .sb { + color: #f1fa8c +} + +/* LiteralStringChar */ +.chroma .sc { + color: #f1fa8c +} + +/* LiteralStringDelimiter */ +.chroma .dl { + color: #f1fa8c +} + +/* LiteralStringDoc */ +.chroma .sd { + color: #f1fa8c +} + +/* LiteralStringDouble */ +.chroma .s2 { + color: #f1fa8c +} + +/* LiteralStringEscape */ +.chroma .se { + color: #f1fa8c +} + +/* LiteralStringHeredoc */ +.chroma .sh { + color: #f1fa8c +} + +/* LiteralStringInterpol */ +.chroma .si { + color: #f1fa8c +} + +/* LiteralStringOther */ +.chroma .sx { + color: #f1fa8c +} + +/* LiteralStringRegex */ +.chroma .sr { + color: #f1fa8c +} + +/* LiteralStringSingle */ +.chroma .s1 { + color: #f1fa8c +} + +/* LiteralStringSymbol */ +.chroma .ss { + color: #f1fa8c +} + +/* LiteralNumber */ +.chroma .m { + color: #bd93f9 +} + +/* LiteralNumberBin */ +.chroma .mb { + color: #bd93f9 +} + +/* LiteralNumberFloat */ +.chroma .mf { + color: #bd93f9 +} + +/* LiteralNumberHex */ +.chroma .mh { + color: #bd93f9 +} + +/* LiteralNumberInteger */ +.chroma .mi { + color: #bd93f9 +} + +/* LiteralNumberIntegerLong */ +.chroma .il { + color: #bd93f9 +} + +/* LiteralNumberOct */ +.chroma .mo { + color: #bd93f9 +} + +/* Operator */ +.chroma .o { + color: #ff79c6 +} + +/* OperatorWord */ +.chroma .ow { + color: #ff79c6 +} + +/* Punctuation */ +.chroma .p {} + +/* Comment */ +.chroma .c { + color: #8c95b1 +} + +/* CommentHashbang */ +.chroma .ch { + color: #8c95b1 +} + +/* CommentMultiline */ +.chroma .cm { + color: #8c95b1 +} + +/* CommentSingle */ +.chroma .c1 { + color: #8c95b1 +} + +/* CommentSpecial */ +.chroma .cs { + color: #8c95b1 +} + +/* CommentPreproc */ +.chroma .cp { + color: #ff79c6 +} + +/* CommentPreprocFile */ +.chroma .cpf { + color: #ff79c6 +} + +/* Generic */ +.chroma .g {} + +/* GenericDeleted */ +.chroma .gd { + color: #ff5555 +} + +/* GenericEmph */ +.chroma .ge { + text-decoration: underline +} + +/* GenericError */ +.chroma .gr {} + +/* GenericHeading */ +.chroma .gh { + font-weight: bold +} + +/* GenericInserted */ +.chroma .gi { + color: #50fa7b; + font-weight: bold +} + +/* GenericOutput */ +.chroma .go { + color: #44475a +} + +/* GenericPrompt */ +.chroma .gp {} + +/* GenericStrong */ +.chroma .gs {} + +/* GenericSubheading */ +.chroma .gu { + font-weight: bold +} + +/* GenericTraceback */ +.chroma .gt {} + +/* GenericUnderline */ +.chroma .gl { + text-decoration: underline +} + +/* TextWhitespace */ +.chroma .w {} diff --git a/src/assets/css/patches.css b/src/assets/css/patches.css index 89c6bad0..ed7c629d 100644 --- a/src/assets/css/patches.css +++ b/src/assets/css/patches.css @@ -4,9 +4,5 @@ } .highlight span.lnt a { - color: var(--secondary); -} - -.dark .highlight span.lnt a { - color: unset; + box-shadow: unset; } diff --git a/src/config/_default/config.yml b/src/config/_default/config.yml index 6f71a552..4a51d2c8 100644 --- a/src/config/_default/config.yml +++ b/src/config/_default/config.yml @@ -1,4 +1,4 @@ -baseURL: http://localhost +baseURL: http://127.0.0.1 title: binick blog pagination: pagerSize: 10 diff --git a/src/content/posts/aadb2c-subscribe-to-user-registration-event/index.md b/src/content/posts/aadb2c-subscribe-to-user-registration-event/index.md index 5008e25f..335e0233 100644 --- a/src/content/posts/aadb2c-subscribe-to-user-registration-event/index.md +++ b/src/content/posts/aadb2c-subscribe-to-user-registration-event/index.md @@ -135,7 +135,7 @@ This requirement finds expressivity through the `ClaimsTransformation` whose [re In the example the methods [`GetCurrentDateTime`](https://docs.microsoft.com/azure/active-directory-b2c/date-transformations#getcurrentdatetime) and [`GenerateJson`](https://docs.microsoft.com/azure/active-directory-b2c/json-transformations#generatejson) were used -`` xml +``` xml @@ -145,7 +145,7 @@ In the example the methods [`GetCurrentDateTime`](https://docs.microsoft.com/azu The purpose of `GetSystemDateTime` is to enhance the `systemDateTime` claim. -`` xml +``` xml diff --git a/src/layouts/partials/extend_footer.html b/src/layouts/partials/extend_footer.html index 348bba65..0a7a93b7 100644 --- a/src/layouts/partials/extend_footer.html +++ b/src/layouts/partials/extend_footer.html @@ -22,6 +22,14 @@ n.target.forEach(selector => { const el = document.querySelector(selector); if (el) { + const helpLink = document.createElement('a'); + helpLink.innerHTML = '🔗'; + helpLink.setAttribute('href', v.helpUrl); + helpLink.setAttribute('target', '_blank'); + helpLink.style.verticalAlign = 'super'; + helpLink.style.fontSize = 'smaller'; + helpLink.style.boxShadow = 'unset'; + el.appendChild(helpLink); el.style.outline = `3px solid ${colors[v.impact] || colors.minor}`; el.style.outlineOffset = '2px'; el.setAttribute('title', message); From bcb9901793251292af024185d06802a8ebe42a4e Mon Sep 17 00:00:00 2001 From: binick Date: Mon, 3 Nov 2025 19:45:03 +0100 Subject: [PATCH 2/2] fix: improve a11y --- src/assets/css/a11y.css | 14 +++++++++----- src/assets/css/binick.css | 9 +++++---- src/assets/css/patches.css | 1 + src/data/earnedbadges.yml | 9 +-------- src/layouts/_default/about.html | 14 +++++++------- 5 files changed, 23 insertions(+), 24 deletions(-) diff --git a/src/assets/css/a11y.css b/src/assets/css/a11y.css index 1a95ee35..eda7ff5f 100644 --- a/src/assets/css/a11y.css +++ b/src/assets/css/a11y.css @@ -3,10 +3,14 @@ background: var(--code-bg); } -.post-header a { - color: var(--content); +body:not(.dark) .post-content p a:not(.lnlinks) { + color: var(--secondary); } -.post-content a { - color: var(--secondary); -} \ No newline at end of file +.post-content p a:not(.lnlinks) { + color: var(--tetriary); +} + +.post-meta a { + color: var(--tetriary); +} diff --git a/src/assets/css/binick.css b/src/assets/css/binick.css index 92b8b1c8..6185acd4 100644 --- a/src/assets/css/binick.css +++ b/src/assets/css/binick.css @@ -58,12 +58,13 @@ height: 160px; } -.post-content section.certifications .badges div { - max-width: 30%; - margin: 0 auto; +.post-content section.certifications .badges { + list-style: none; + margin: auto; + justify-content: space-between; } -.post-content section.certifications .badges div p { +.post-content section.certifications .badges li p { padding-top: 15px; text-align: center; } diff --git a/src/assets/css/patches.css b/src/assets/css/patches.css index ed7c629d..b8e2d3b6 100644 --- a/src/assets/css/patches.css +++ b/src/assets/css/patches.css @@ -1,4 +1,5 @@ .post-content a, +.post-meta a, .toc a:hover { box-shadow: 0 1px, -0.1em 0 0.1em transparent; } diff --git a/src/data/earnedbadges.yml b/src/data/earnedbadges.yml index 77063474..d1e8c926 100644 --- a/src/data/earnedbadges.yml +++ b/src/data/earnedbadges.yml @@ -22,11 +22,4 @@ issuer: name: Microsoft url: https://www.microsoft.com/ -- id: 7f3ec753-a30d-4b78-a213-e3197988946e - badge: - icon: https://images.credly.com/size/150x150/images/00634f82-b07f-4bbd-a6bb-53de397fc3a6/image.png - name: AWS Certified Cloud Practitioner - url: https://www.credly.com/badges/7f3ec753-a30d-4b78-a213-e3197988946e/public_url - issuer: - name: Amazon Web Services Training and Certification - url: https://www.credly.com/org/amazon-web-services + diff --git a/src/layouts/_default/about.html b/src/layouts/_default/about.html index 08e7a735..8a8f1ed1 100644 --- a/src/layouts/_default/about.html +++ b/src/layouts/_default/about.html @@ -24,18 +24,18 @@

{{ i18n "keep_in_contact" }}

- +