From 362cf45bc520a68a1c1be20e1189ca2307577dde Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 19 Apr 2022 12:12:15 +0200 Subject: chore: add a Code component --- src/components/molecules/layout/code.module.scss | 307 +++++++++++++++++++++++ 1 file changed, 307 insertions(+) create mode 100644 src/components/molecules/layout/code.module.scss (limited to 'src/components/molecules/layout/code.module.scss') diff --git a/src/components/molecules/layout/code.module.scss b/src/components/molecules/layout/code.module.scss new file mode 100644 index 0000000..19d1d70 --- /dev/null +++ b/src/components/molecules/layout/code.module.scss @@ -0,0 +1,307 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.wrapper { + :global { + .code-toolbar { + --gutter-size: clamp(#{fun.convert-px(75)}, 20vw, #{fun.convert-px(90)}); + --toolbar-height: #{fun.convert-px(90)}; + + position: relative; + margin-top: calc(var(--toolbar-height) + var(--spacing-md)); + + @include mix.media("screen") { + @include mix.dimensions("2xs") { + --toolbar-height: #{fun.convert-px(60)}; + } + } + + .toolbar { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + justify-items: end; + width: 100%; + height: var(--toolbar-height); + position: absolute; + top: calc(var(--toolbar-height) * -1); + left: 0; + right: 0; + background: var(--color-bg-tertiary); + border: fun.convert-px(1) solid var(--color-border); + + @include mix.media("screen") { + @include mix.dimensions("2xs") { + display: flex; + flex-flow: row wrap; + } + } + } + + .toolbar-item { + display: flex; + align-items: center; + } + + .toolbar-item:nth-child(1) { + grid-column: 1; + grid-row: 1 / 3; + margin-right: auto; + padding: 0 var(--spacing-sm); + background: var(--color-bg-code); + border-right: fun.convert-px(1) solid var(--color-border); + color: var(--color-primary-darker); + font-size: var(--font-size-sm); + font-weight: 600; + } + + .toolbar-item:nth-child(2) { + grid-column: 2; + grid-row: 1; + margin: 0 var(--spacing-2xs); + } + + .toolbar-item:nth-child(3) { + grid-column: 2; + grid-row: 2; + margin: 0 var(--spacing-2xs); + } + } + + pre[class*="language-"] { + max-height: max(30vw, fun.convert-px(300)); + margin: var(--spacing-md) 0; + padding: 0; + position: relative; + background: var(--color-bg-secondary); + color: var(--color-fg); + border: fun.convert-px(1) solid var(--color-border); + + > code { + display: block; + padding: var(--spacing-xs) 0 var(--spacing-xs) + calc(var(--gutter-size) + var(--spacing-xs)); + } + + .line-numbers-rows, + .command-line-prompt { + width: var(--gutter-size); + min-height: 100%; + padding: var(--spacing-xs) var(--spacing-2xs); + position: absolute; + top: 0; + left: 0; + pointer-events: none; + user-select: none; + background: var(--color-bg); + border-right: fun.convert-px(1) solid var(--color-border); + } + + .token { + &.comment, + &.doc-comment { + color: var(--color-fg-light); + } + + &.punctuation { + color: var(--color-fg); + } + + &.attr-name, + &.hexcode, + &.inserted, + &.string { + color: var(--color-token-green); + } + + &.class, + &.coord, + &.id, + &.function { + color: var(--color-token-purple); + } + + &.builtin, + &.builtin.class-name, + &.property-access, + &.regex, + &.scope { + color: var(--color-token-magenta); + } + + &.class-name, + &.constant, + &.global, + &.interpolation, + &.key, + &.package, + &.this, + &.title, + &.variable { + color: var(--color-token-blue); + } + + &.combinator, + &.keyword, + &.operator, + &.pseudo-class, + &.pseudo-element, + &.rule, + &.selector, + &.unit { + color: var(--color-token-orange); + } + + &.attr-value, + &.boolean, + &.number { + color: var(--color-token-yellow); + } + + &.delimiter, + &.doctype, + &.parameter, + &.parent, + &.property, + &.shebang, + &.tag { + color: var(--color-token-cyan); + } + + &.deleted { + color: var(--color-token-red); + } + + &.punctuation.brace-hover, + &.punctuation.brace-selected { + background: var(--color-bg); + outline: solid fun.convert-px(1) var(--color-primary-light); + } + } + + span.inline-color-wrapper { + background: url(fun.encode-svg( + '' + )); + + /* Prevent glitches where 1px from the repeating pattern could be seen. */ + background-position: center; + background-size: 110%; + + display: inline-block; + height: 1.1ch; + width: 1.1ch; + margin: 0 0.5ch 0 0; + border: fun.convert-px(1) solid var(--color-bg); + outline: fun.convert-px(1) solid var(--color-border-dark); + overflow: hidden; + } + + span.inline-color { + display: block; + + /* To prevent visual glitches again */ + height: 120%; + width: 120%; + } + } + + pre.line-numbers { + counter-reset: lineNumber; + + .line-numbers-rows { + > span { + counter-increment: lineNumber; + + &::before { + display: block; + padding: 0 var(--spacing-xs); + content: counter(lineNumber); + color: var(--color-primary-darker); + text-align: right; + line-height: var(--line-height); + } + } + } + } + + pre.command-line { + --gutter-size: clamp( + #{fun.convert-px(195)}, + 48vw, + #{fun.convert-px(235)} + ); + + ~ .toolbar { + --gutter-size: clamp( + #{fun.convert-px(195)}, + 48vw, + #{fun.convert-px(235)} + ); + } + + .command-line-prompt { + > span { + &::before { + display: block; + content: ""; + } + + &[data-user]::before { + content: "[" attr(data-user) "@" attr(data-host) "] $"; + } + + &[data-user="root"]::before { + content: "[" attr(data-user) "@" attr(data-host) "] #"; + } + + &[data-prompt]::before { + content: attr(data-prompt); + } + } + } + } + + .copy-to-clipboard-button, + .prism-color-scheme-button { + display: block; + padding: fun.convert-px(3) var(--spacing-xs); + background: var(--color-bg); + border: 0.4ex solid var(--color-primary); + border-radius: fun.convert-px(30); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) + var(--color-shadow), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) + var(--color-shadow); + color: var(--color-primary); + font-size: var(--font-size-sm); + font-weight: 600; + transition: all 0.35s ease-in-out 0s; + + &:hover, + &:focus { + transform: translateX(#{fun.convert-px(-2)}) + translateY(#{fun.convert-px(-2)}); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) + fun.convert-px(-2) var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) + fun.convert-px(-4) var(--color-shadow-light), + fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) + fun.convert-px(-3) var(--color-shadow-light); + } + + &:focus { + text-decoration: underline var(--color-primary) fun.convert-px(3); + } + + &:active { + text-decoration: none; + transform: translateY(#{fun.convert-px(2)}); + box-shadow: 0 0 0 0 var(--color-shadow); + } + } + } +} -- cgit v1.2.3 From 0e7c1851973e57777474ef9b7662beb91f95cda5 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 20 May 2022 19:33:18 +0200 Subject: chore: udpate code blocks style --- src/components/molecules/layout/code.module.scss | 274 ++++++++++---------- src/styles/pages/partials/_article-prism.scss | 267 +++++++++---------- src/styles/pages/partials/_article-wp-blocks.scss | 1 - src/styles/vendors/_prism.scss | 297 ---------------------- 4 files changed, 269 insertions(+), 570 deletions(-) delete mode 100644 src/styles/vendors/_prism.scss (limited to 'src/components/molecules/layout/code.module.scss') diff --git a/src/components/molecules/layout/code.module.scss b/src/components/molecules/layout/code.module.scss index 19d1d70..2855fc2 100644 --- a/src/components/molecules/layout/code.module.scss +++ b/src/components/molecules/layout/code.module.scss @@ -4,11 +4,10 @@ .wrapper { :global { .code-toolbar { - --gutter-size: clamp(#{fun.convert-px(75)}, 20vw, #{fun.convert-px(90)}); - --toolbar-height: #{fun.convert-px(90)}; + --toolbar-height: #{fun.convert-px(100)}; position: relative; - margin-top: calc(var(--toolbar-height) + var(--spacing-md)); + margin-top: calc(var(--toolbar-height) + var(--spacing-sm)); @include mix.media("screen") { @include mix.dimensions("2xs") { @@ -17,9 +16,9 @@ } .toolbar { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - justify-items: end; + display: flex; + flex-flow: row wrap; + justify-content: center; width: 100%; height: var(--toolbar-height); position: absolute; @@ -28,72 +27,168 @@ right: 0; background: var(--color-bg-tertiary); border: fun.convert-px(1) solid var(--color-border); - - @include mix.media("screen") { - @include mix.dimensions("2xs") { - display: flex; - flex-flow: row wrap; - } - } } .toolbar-item { display: flex; align-items: center; + margin: 0 var(--spacing-2xs); } .toolbar-item:nth-child(1) { - grid-column: 1; - grid-row: 1 / 3; - margin-right: auto; + flex: 0 0 100%; + justify-content: center; + margin: 0 auto 0 0; padding: 0 var(--spacing-sm); background: var(--color-bg-code); - border-right: fun.convert-px(1) solid var(--color-border); + border-bottom: fun.convert-px(1) solid var(--color-border); color: var(--color-primary-darker); font-size: var(--font-size-sm); font-weight: 600; + + @include mix.media("screen") { + @include mix.dimensions("2xs") { + flex: 0 0 auto; + justify-content: left; + border-bottom: none; + border-right: fun.convert-px(1) solid var(--color-border); + } + } } + } - .toolbar-item:nth-child(2) { - grid-column: 2; - grid-row: 1; - margin: 0 var(--spacing-2xs); + .copy-to-clipboard-button, + .prism-color-scheme-button { + display: block; + padding: fun.convert-px(3) var(--spacing-xs); + background: var(--color-bg); + border: 0.4ex solid var(--color-primary); + border-radius: fun.convert-px(30); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) + var(--color-shadow), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) + var(--color-shadow); + color: var(--color-primary); + font-size: var(--font-size-sm); + font-weight: 600; + transition: all 0.35s ease-in-out 0s; + + &:hover, + &:focus { + transform: translateX(#{fun.convert-px(-2)}) + translateY(#{fun.convert-px(-2)}); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) + fun.convert-px(-2) var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) + fun.convert-px(-4) var(--color-shadow-light), + fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) + fun.convert-px(-3) var(--color-shadow-light); } - .toolbar-item:nth-child(3) { - grid-column: 2; - grid-row: 2; - margin: 0 var(--spacing-2xs); + &:focus { + text-decoration: underline var(--color-primary) fun.convert-px(3); + } + + &:active { + text-decoration: none; + transform: translateY(#{fun.convert-px(2)}); + box-shadow: 0 0 0 0 var(--color-shadow); } } pre[class*="language-"] { - max-height: max(30vw, fun.convert-px(300)); - margin: var(--spacing-md) 0; - padding: 0; + --gutter-size-with-spacing: calc(var(--gutter-size) + var(--spacing-xs)); + position: relative; - background: var(--color-bg-secondary); - color: var(--color-fg); - border: fun.convert-px(1) solid var(--color-border); + overflow: auto; + border: fun.convert-px(1) solid var(--color-border-light); + hyphens: none; + tab-size: 4; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + + &.command-line { + --gutter-size: 19ch; + padding-left: var(--gutter-size-with-spacing); + } + + &.line-numbers { + --gutter-size: 6ch; - > code { + counter-reset: lineNumber; + padding-left: var(--gutter-size-with-spacing); + } + + code { display: block; - padding: var(--spacing-xs) 0 var(--spacing-xs) - calc(var(--gutter-size) + var(--spacing-xs)); + padding: var(--spacing-xs) 0; + position: relative; } .line-numbers-rows, .command-line-prompt { + display: block; width: var(--gutter-size); - min-height: 100%; - padding: var(--spacing-xs) var(--spacing-2xs); + padding: var(--spacing-xs) 0; position: absolute; top: 0; - left: 0; - pointer-events: none; - user-select: none; + left: calc(var(--gutter-size-with-spacing) * -1); background: var(--color-bg); border-right: fun.convert-px(1) solid var(--color-border); + font-size: 100%; + letter-spacing: -1px; + text-align: right; + pointer-events: none; + user-select: none; + + > span { + &::before { + display: block; + padding-right: var(--spacing-xs); + color: var(--color-fg-light); + } + } + } + + .command-line-prompt { + > span { + &::before { + content: " "; + } + + &[data-user]::before { + content: "[" attr(data-user) "@" attr(data-host) "] $"; + } + + &[data-user="root"]::before { + content: "[" attr(data-user) "@" attr(data-host) "] #"; + } + + &[data-prompt]::before { + content: attr(data-prompt); + } + + &[data-continuation-prompt]::before { + content: attr(data-continuation-prompt); + } + } + } + + .line-numbers-rows { + > span { + counter-increment: lineNumber; + + &::before { + content: counter(lineNumber); + } + } } .token { @@ -183,7 +278,7 @@ '' )); - /* Prevent glitches where 1px from the repeating pattern could be seen. */ + // Prevent repeating pattern to be seen. background-position: center; background-size: 110%; @@ -204,104 +299,5 @@ width: 120%; } } - - pre.line-numbers { - counter-reset: lineNumber; - - .line-numbers-rows { - > span { - counter-increment: lineNumber; - - &::before { - display: block; - padding: 0 var(--spacing-xs); - content: counter(lineNumber); - color: var(--color-primary-darker); - text-align: right; - line-height: var(--line-height); - } - } - } - } - - pre.command-line { - --gutter-size: clamp( - #{fun.convert-px(195)}, - 48vw, - #{fun.convert-px(235)} - ); - - ~ .toolbar { - --gutter-size: clamp( - #{fun.convert-px(195)}, - 48vw, - #{fun.convert-px(235)} - ); - } - - .command-line-prompt { - > span { - &::before { - display: block; - content: ""; - } - - &[data-user]::before { - content: "[" attr(data-user) "@" attr(data-host) "] $"; - } - - &[data-user="root"]::before { - content: "[" attr(data-user) "@" attr(data-host) "] #"; - } - - &[data-prompt]::before { - content: attr(data-prompt); - } - } - } - } - - .copy-to-clipboard-button, - .prism-color-scheme-button { - display: block; - padding: fun.convert-px(3) var(--spacing-xs); - background: var(--color-bg); - border: 0.4ex solid var(--color-primary); - border-radius: fun.convert-px(30); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow); - color: var(--color-primary); - font-size: var(--font-size-sm); - font-weight: 600; - transition: all 0.35s ease-in-out 0s; - - &:hover, - &:focus { - transform: translateX(#{fun.convert-px(-2)}) - translateY(#{fun.convert-px(-2)}); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) - fun.convert-px(-2) var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) - fun.convert-px(-4) var(--color-shadow-light), - fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) - fun.convert-px(-3) var(--color-shadow-light); - } - - &:focus { - text-decoration: underline var(--color-primary) fun.convert-px(3); - } - - &:active { - text-decoration: none; - transform: translateY(#{fun.convert-px(2)}); - box-shadow: 0 0 0 0 var(--color-shadow); - } - } } } diff --git a/src/styles/pages/partials/_article-prism.scss b/src/styles/pages/partials/_article-prism.scss index 5412bbd..a714eb6 100644 --- a/src/styles/pages/partials/_article-prism.scss +++ b/src/styles/pages/partials/_article-prism.scss @@ -3,11 +3,10 @@ @mixin styles { .code-toolbar { - --gutter-size: clamp(#{fun.convert-px(75)}, 20vw, #{fun.convert-px(90)}); - --toolbar-height: #{fun.convert-px(90)}; + --toolbar-height: #{fun.convert-px(100)}; position: relative; - margin-top: calc(var(--toolbar-height) + var(--spacing-md)); + margin-top: calc(var(--toolbar-height) + var(--spacing-sm)); @include mix.media("screen") { @include mix.dimensions("2xs") { @@ -16,9 +15,9 @@ } .toolbar { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - justify-items: end; + display: flex; + flex-flow: row wrap; + justify-content: center; width: 100%; height: var(--toolbar-height); position: absolute; @@ -27,72 +26,169 @@ right: 0; background: var(--color-bg-tertiary); border: fun.convert-px(1) solid var(--color-border); - - @include mix.media("screen") { - @include mix.dimensions("2xs") { - display: flex; - flex-flow: row wrap; - } - } } .toolbar-item { display: flex; align-items: center; + margin: 0 var(--spacing-2xs); } .toolbar-item:nth-child(1) { - grid-column: 1; - grid-row: 1 / 3; - margin-right: auto; + flex: 0 0 100%; + justify-content: center; + margin: 0 auto 0 0; padding: 0 var(--spacing-sm); background: var(--color-bg-code); - border-right: fun.convert-px(1) solid var(--color-border); + border-bottom: fun.convert-px(1) solid var(--color-border); color: var(--color-primary-darker); font-size: var(--font-size-sm); font-weight: 600; + + @include mix.media("screen") { + @include mix.dimensions("2xs") { + flex: 0 0 auto; + justify-content: left; + border-bottom: none; + border-right: fun.convert-px(1) solid var(--color-border); + } + } } + } - .toolbar-item:nth-child(2) { - grid-column: 2; - grid-row: 1; - margin: 0 var(--spacing-2xs); + .copy-to-clipboard-button, + .prism-color-scheme-button { + display: block; + padding: fun.convert-px(3) var(--spacing-xs); + background: var(--color-bg); + border: 0.4ex solid var(--color-primary); + border-radius: fun.convert-px(30); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) + var(--color-shadow), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) + var(--color-shadow); + color: var(--color-primary); + font-size: var(--font-size-sm); + font-weight: 600; + transition: all 0.35s ease-in-out 0s; + + &:hover, + &:focus { + transform: translateX(#{fun.convert-px(-2)}) + translateY(#{fun.convert-px(-2)}); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) + var(--color-shadow-light), + fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3) + var(--color-shadow-light); } - .toolbar-item:nth-child(3) { - grid-column: 2; - grid-row: 2; - margin: 0 var(--spacing-2xs); + &:focus { + text-decoration: underline var(--color-primary) fun.convert-px(3); + } + + &:active { + text-decoration: none; + transform: translateY(#{fun.convert-px(2)}); + box-shadow: 0 0 0 0 var(--color-shadow); } } pre[class*="language-"] { - max-height: max(30vw, fun.convert-px(300)); - margin: var(--spacing-md) 0; + --gutter-size-with-spacing: calc(var(--gutter-size) + var(--spacing-xs)); + padding: 0; position: relative; - background: var(--color-bg-secondary); - color: var(--color-fg); - border: fun.convert-px(1) solid var(--color-border); + overflow: auto; + border: fun.convert-px(1) solid var(--color-border-light); + hyphens: none; + tab-size: 4; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + + &.command-line { + --gutter-size: 19ch; + padding-left: var(--gutter-size-with-spacing); + } + + &.line-numbers { + --gutter-size: 6ch; - > code { + counter-reset: lineNumber; + padding-left: var(--gutter-size-with-spacing); + } + + code { display: block; - padding: var(--spacing-xs) 0 var(--spacing-xs) - calc(var(--gutter-size) + var(--spacing-xs)); + padding: var(--spacing-xs) 0; + position: relative; } .line-numbers-rows, .command-line-prompt { + display: block; width: var(--gutter-size); - min-height: 100%; - padding: var(--spacing-xs) var(--spacing-2xs); + padding: var(--spacing-xs) 0; position: absolute; top: 0; - left: 0; - pointer-events: none; - user-select: none; + left: calc(var(--gutter-size-with-spacing) * -1); background: var(--color-bg); border-right: fun.convert-px(1) solid var(--color-border); + font-size: 100%; + letter-spacing: -1px; + text-align: right; + pointer-events: none; + user-select: none; + + > span { + &::before { + display: block; + padding-right: var(--spacing-xs); + color: var(--color-fg-light); + } + } + } + + .command-line-prompt { + > span { + &::before { + content: " "; + } + + &[data-user]::before { + content: "[" attr(data-user) "@" attr(data-host) "] $"; + } + + &[data-user="root"]::before { + content: "[" attr(data-user) "@" attr(data-host) "] #"; + } + + &[data-prompt]::before { + content: attr(data-prompt); + } + + &[data-continuation-prompt]::before { + content: attr(data-continuation-prompt); + } + } + } + + .line-numbers-rows { + > span { + counter-increment: lineNumber; + + &::before { + content: counter(lineNumber); + } + } } .token { @@ -203,99 +299,4 @@ width: 120%; } } - - pre.line-numbers { - counter-reset: lineNumber; - - .line-numbers-rows { - > span { - counter-increment: lineNumber; - - &::before { - display: block; - padding: 0 var(--spacing-xs); - content: counter(lineNumber); - color: var(--color-primary-darker); - text-align: right; - line-height: var(--line-height); - } - } - } - } - - pre.command-line { - --gutter-size: clamp(#{fun.convert-px(195)}, 48vw, #{fun.convert-px(235)}); - - ~ .toolbar { - --gutter-size: clamp( - #{fun.convert-px(195)}, - 48vw, - #{fun.convert-px(235)} - ); - } - - .command-line-prompt { - > span { - &::before { - display: block; - content: " "; - } - - &[data-user]::before { - content: "[" attr(data-user) "@" attr(data-host) "] $"; - } - - &[data-user="root"]::before { - content: "[" attr(data-user) "@" attr(data-host) "] #"; - } - - &[data-prompt]::before { - content: attr(data-prompt); - } - } - } - } - - .copy-to-clipboard-button, - .prism-color-scheme-button { - display: block; - padding: fun.convert-px(3) var(--spacing-xs); - background: var(--color-bg); - border: 0.4ex solid var(--color-primary); - border-radius: fun.convert-px(30); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow); - color: var(--color-primary); - font-size: var(--font-size-sm); - font-weight: 600; - transition: all 0.35s ease-in-out 0s; - - &:hover, - &:focus { - transform: translateX(#{fun.convert-px(-2)}) - translateY(#{fun.convert-px(-2)}); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow-light), - fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3) - var(--color-shadow-light); - } - - &:focus { - text-decoration: underline var(--color-primary) fun.convert-px(3); - } - - &:active { - text-decoration: none; - transform: translateY(#{fun.convert-px(2)}); - box-shadow: 0 0 0 0 var(--color-shadow); - } - } } diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss index d4fed5a..f75a4d5 100644 --- a/src/styles/pages/partials/_article-wp-blocks.scss +++ b/src/styles/pages/partials/_article-wp-blocks.scss @@ -29,7 +29,6 @@ .wp-block-code, .wp-block-preformatted { - margin: 0 auto var(--spacing-md); padding: var(--spacing-xs) var(--spacing-sm); background: var(--color-bg-secondary); border: fun.convert-px(1) solid var(--color-border-light); diff --git a/src/styles/vendors/_prism.scss b/src/styles/vendors/_prism.scss deleted file mode 100644 index 7c05c9f..0000000 --- a/src/styles/vendors/_prism.scss +++ /dev/null @@ -1,297 +0,0 @@ -@use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/mixins" as mix; - -/// Custom theme for Prism - -.code-toolbar { - --gutter-size: clamp(#{fun.convert-px(75)}, 20vw, #{fun.convert-px(90)}); - --toolbar-height: #{fun.convert-px(90)}; - - position: relative; - margin-top: calc(var(--toolbar-height) + var(--spacing-md)); - - @include mix.media("screen") { - @include mix.dimensions("2xs") { - --toolbar-height: #{fun.convert-px(60)}; - } - } - - .toolbar { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - justify-items: end; - width: 100%; - height: var(--toolbar-height); - position: absolute; - top: calc(var(--toolbar-height) * -1); - left: 0; - right: 0; - background: var(--color-bg-tertiary); - border: fun.convert-px(1) solid var(--color-border); - - @include mix.media("screen") { - @include mix.dimensions("2xs") { - display: flex; - flex-flow: row wrap; - } - } - } - - .toolbar-item { - display: flex; - align-items: center; - } - - .toolbar-item:nth-child(1) { - grid-column: 1; - grid-row: 1 / 3; - margin-right: auto; - padding: 0 var(--spacing-sm); - background: var(--color-bg-code); - border-right: fun.convert-px(1) solid var(--color-border); - color: var(--color-primary-darker); - font-size: var(--font-size-sm); - font-weight: 600; - } - - .toolbar-item:nth-child(2) { - grid-column: 2; - grid-row: 1; - margin: 0 var(--spacing-2xs); - } - - .toolbar-item:nth-child(3) { - grid-column: 2; - grid-row: 2; - margin: 0 var(--spacing-2xs); - } -} - -pre[class*="language-"] { - max-height: max(30vw, fun.convert-px(300)); - margin: var(--spacing-md) 0; - padding: 0; - position: relative; - background: var(--color-bg-secondary); - color: var(--color-fg); - border: fun.convert-px(1) solid var(--color-border); - - > code { - display: block; - padding: var(--spacing-xs) 0 var(--spacing-xs) - calc(var(--gutter-size) + var(--spacing-xs)); - } - - .line-numbers-rows, - .command-line-prompt { - width: var(--gutter-size); - min-height: 100%; - padding: var(--spacing-xs) var(--spacing-2xs); - position: absolute; - top: 0; - left: 0; - pointer-events: none; - user-select: none; - background: var(--color-bg); - border-right: fun.convert-px(1) solid var(--color-border); - } - - .token { - &.comment, - &.doc-comment { - color: var(--color-fg-light); - } - - &.punctuation { - color: var(--color-fg); - } - - &.attr-name, - &.hexcode, - &.inserted, - &.string { - color: var(--color-token-green); - } - - &.class, - &.coord, - &.id, - &.function { - color: var(--color-token-purple); - } - - &.builtin, - &.builtin.class-name, - &.property-access, - &.regex, - &.scope { - color: var(--color-token-magenta); - } - - &.class-name, - &.constant, - &.global, - &.interpolation, - &.key, - &.package, - &.this, - &.title, - &.variable { - color: var(--color-token-blue); - } - - &.combinator, - &.keyword, - &.operator, - &.pseudo-class, - &.pseudo-element, - &.rule, - &.selector, - &.unit { - color: var(--color-token-orange); - } - - &.attr-value, - &.boolean, - &.number { - color: var(--color-token-yellow); - } - - &.delimiter, - &.doctype, - &.parameter, - &.parent, - &.property, - &.shebang, - &.tag { - color: var(--color-token-cyan); - } - - &.deleted { - color: var(--color-token-red); - } - - &.punctuation.brace-hover, - &.punctuation.brace-selected { - background: var(--color-bg); - outline: solid fun.convert-px(1) var(--color-primary-light); - } - } - - span.inline-color-wrapper { - background: url(fun.encode-svg( - '' - )); - - /* Prevent glitches where 1px from the repeating pattern could be seen. */ - background-position: center; - background-size: 110%; - - display: inline-block; - height: 1.1ch; - width: 1.1ch; - margin: 0 0.5ch 0 0; - border: fun.convert-px(1) solid var(--color-bg); - outline: fun.convert-px(1) solid var(--color-border-dark); - overflow: hidden; - } - - span.inline-color { - display: block; - - /* To prevent visual glitches again */ - height: 120%; - width: 120%; - } -} - -pre.line-numbers { - counter-reset: lineNumber; - - .line-numbers-rows { - > span { - counter-increment: lineNumber; - - &::before { - display: block; - padding: 0 var(--spacing-xs); - content: counter(lineNumber); - color: var(--color-primary-darker); - text-align: right; - line-height: var(--line-height); - } - } - } -} - -pre.command-line { - --gutter-size: clamp(#{fun.convert-px(195)}, 48vw, #{fun.convert-px(235)}); - - ~ .toolbar { - --gutter-size: clamp(#{fun.convert-px(195)}, 48vw, #{fun.convert-px(235)}); - } - - .command-line-prompt { - > span { - &::before { - display: block; - content: ""; - } - - &[data-user]::before { - content: "[" attr(data-user) "@" attr(data-host) "] $"; - } - - &[data-user="root"]::before { - content: "[" attr(data-user) "@" attr(data-host) "] #"; - } - - &[data-prompt]::before { - content: attr(data-prompt); - } - } - } -} - -.copy-to-clipboard-button, -.prism-color-scheme-button { - display: block; - padding: fun.convert-px(3) var(--spacing-xs); - background: var(--color-bg); - border: 0.4ex solid var(--color-primary); - border-radius: fun.convert-px(30); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow); - color: var(--color-primary); - font-size: var(--font-size-sm); - font-weight: 600; - transition: all 0.35s ease-in-out 0s; - - &:hover, - &:focus { - transform: translateX(#{fun.convert-px(-2)}) - translateY(#{fun.convert-px(-2)}); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow-light), - fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3) - var(--color-shadow-light); - } - - &:focus { - text-decoration: underline var(--color-primary) fun.convert-px(3); - } - - &:active { - text-decoration: none; - transform: translateY(#{fun.convert-px(2)}); - box-shadow: 0 0 0 0 var(--color-shadow); - } -} -- cgit v1.2.3 From 0f8f963ba3eccd7fd94785bf7fb216b6287cec57 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sun, 22 May 2022 19:26:45 +0200 Subject: chore: adjust dark mode styles --- src/components/atoms/icons/plus-minus.stories.tsx | 2 +- src/components/atoms/links/link.module.scss | 158 +++++++++++++++++----- src/components/atoms/links/link.stories.tsx | 58 ++++++++ src/components/molecules/layout/card.tsx | 2 +- src/components/molecules/layout/code.module.scss | 2 + src/styles/pages/partials/_article-links.scss | 100 ++++++++++++++ 6 files changed, 288 insertions(+), 34 deletions(-) (limited to 'src/components/molecules/layout/code.module.scss') diff --git a/src/components/atoms/icons/plus-minus.stories.tsx b/src/components/atoms/icons/plus-minus.stories.tsx index f7e55f8..eebf1e5 100644 --- a/src/components/atoms/icons/plus-minus.stories.tsx +++ b/src/components/atoms/icons/plus-minus.stories.tsx @@ -24,9 +24,9 @@ export default { state: { control: { type: 'radio', - options: ['plus', 'minus'], }, description: 'Which state should be displayed.', + options: ['plus', 'minus'], type: { name: 'enum', required: true, diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss index 1b89727..bb5775f 100644 --- a/src/components/atoms/links/link.module.scss +++ b/src/components/atoms/links/link.module.scss @@ -1,6 +1,7 @@ @use "@styles/abstracts/functions" as fun; @use "@styles/abstracts/variables" as var; +/* stylelint-disable no-descending-specificity */ .link { &[hreflang] { &::after { @@ -21,20 +22,14 @@ /* Prettier is removing spacing between content parts. */ /* prettier-ignore */ - content: "\0000a0" url( -fun.encode-svg( - '' -)); + content: "\0000a0" url(fun.encode-svg('')); } &:focus:not(:active)::after { /* Prettier is removing spacing between content parts. */ /* prettier-ignore */ - content: "\0000a0" url( -fun.encode-svg( - '' -)); + content: "\0000a0" url(fun.encode-svg('')); } &[hreflang] { @@ -42,10 +37,14 @@ fun.encode-svg( /* Prettier is removing spacing between content parts. */ /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url( -fun.encode-svg( - '' -)); + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); } } } @@ -72,20 +71,14 @@ fun.encode-svg( /* Prettier is removing spacing between content parts. */ /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url( -fun.encode-svg( - '' -)); + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); } &:focus:not(:active)::after { /* Prettier is removing spacing between content parts. */ /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url( -fun.encode-svg( - '' -)); + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); } } } @@ -95,10 +88,14 @@ fun.encode-svg( /* Prettier is removing spacing between content parts. */ /* prettier-ignore */ - content: "\0000a0" url( -fun.encode-svg( - '' -)) "\0000a0" url(fun.encode-svg('')); + content: "\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); } &[hreflang] { @@ -106,21 +103,118 @@ fun.encode-svg( /* Prettier is removing spacing between content parts. */ /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url( -fun.encode-svg( - '' -)) "\0000a0" url(fun.encode-svg('')); + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); } &:focus:not(:active)::after { /* Prettier is removing spacing between content parts. */ /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url( -fun.encode-svg( - '' -)) "\0000a0" url(fun.encode-svg('')); + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); + } + } + } +} + +:global([data-theme="dark"]) { + :local { + .link { + &--download { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('')); + } + + &[hreflang] { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); + } + } + } + + &--external { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('')); + } + + &[hreflang] { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); + } + } + } + + &--external.link--download { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); + } + + &[hreflang] { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); + } + } } } } } +/* stylelint-enable no-descending-specificity */ diff --git a/src/components/atoms/links/link.stories.tsx b/src/components/atoms/links/link.stories.tsx index 420eafe..4baabe5 100644 --- a/src/components/atoms/links/link.stories.tsx +++ b/src/components/atoms/links/link.stories.tsx @@ -98,6 +98,29 @@ Default.args = { external: false, }; +/** + * Links Stories - Download + */ +export const Download = Template.bind({}); +Download.args = { + children: 'A link to a file', + href: '#', + download: true, + external: false, +}; + +/** + * Links Stories - DownloadWithLang + */ +export const DownloadWithLang = Template.bind({}); +DownloadWithLang.args = { + children: 'A link to a file', + href: '#', + download: true, + external: false, + lang: 'en', +}; + /** * Links Stories - External */ @@ -109,6 +132,17 @@ External.args = { external: true, }; +/** + * Links Stories - External download + */ +export const ExternalDownload = Template.bind({}); +ExternalDownload.args = { + children: 'A link', + href: '#', + download: true, + external: true, +}; + /** * Links Stories - External With Lang */ @@ -120,3 +154,27 @@ ExternalWithLang.args = { external: true, lang: 'en', }; + +/** + * Links Stories - External download with lang + */ +export const ExternalDownloadWithLang = Template.bind({}); +ExternalDownloadWithLang.args = { + children: 'A link', + href: '#', + download: true, + external: true, + lang: 'en', +}; + +/** + * Links Stories - With Lang + */ +export const WithLang = Template.bind({}); +WithLang.args = { + children: 'A link', + href: '#', + download: false, + external: false, + lang: 'en', +}; diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx index 003060f..e465f76 100644 --- a/src/components/molecules/layout/card.tsx +++ b/src/components/molecules/layout/card.tsx @@ -95,7 +95,7 @@ const Card: FC = ({ {title} -
{tagline}
+ {tagline &&
{tagline}
} {meta && (