From c77c58e18143233be042c4980a6ed08ae9beac52 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 16 May 2022 19:40:23 +0200 Subject: chore: adjust and complete missing styles * add logo to topics pages and links * add Prism styles to articles * and a few other adjustements --- src/styles/pages/partials/_article-wp-blocks.scss | 168 ++++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 src/styles/pages/partials/_article-wp-blocks.scss (limited to 'src/styles/pages/partials/_article-wp-blocks.scss') diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss new file mode 100644 index 0000000..d4fed5a --- /dev/null +++ b/src/styles/pages/partials/_article-wp-blocks.scss @@ -0,0 +1,168 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; +@use "@styles/abstracts/placeholders"; + +@mixin styles { + .wp-block-quote { + margin: var(--spacing-sm) 0; + padding: var(--spacing-sm); + position: relative; + border: fun.convert-px(1) solid var(--color-primary-lighter); + border-left: fun.convert-px(5) solid var(--color-primary-lighter); + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 + var(--color-shadow-light); + font-style: italic; + + > *:last-child { + margin: 0; + } + + cite { + font-size: var(--font-size-sm); + font-style: normal; + font-weight: 600; + } + } + + .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); + color: var(--color-fg); + } + + .wp-block-columns { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: var(--spacing-md); + margin: var(--spacing-md) 0; + + @include mix.media("screen") { + @include mix.dimensions("sm") { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + &.are-vertically-aligned-center { + align-items: center; + } + } + + .wp-block-column { + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + } + + .wp-block-gallery { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: var(--spacing-sm); + + .blocks-gallery-grid { + @extend %reset-list; + + grid-column: 1 / -1; + grid-row: 1 / -1; + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: var(--spacing-sm); + } + + .blocks-gallery-item { + figure { + margin: 0; + } + + a { + display: block; + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 + var(--color-shadow-light); + + &:hover, + &:focus { + transform: scale(1.05); + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0 + var(--color-shadow-light), + fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0 + var(--color-shadow-light); + } + + &:focus { + outline: solid var(--color-primary-light); + } + + &:active { + transform: scale(0.95); + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow-light), + 0 0 0 0 var(--color-shadow-light); + outline: none; + } + } + } + + &.aligncenter { + .blocks-gallery-grid { + align-items: center; + } + } + + @for $i from 0 to 6 { + &.columns-#{$i} { + @include mix.media("screen") { + @include mix.dimensions("xs") { + grid-template-columns: repeat(2, minmax(0, 1fr)); + + .blocks-gallery-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + @include mix.dimensions("sm") { + grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); + + .blocks-gallery-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + } + } + } + } + + .wp-block-image { + img { + display: block; + margin: auto; + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 + var(--color-shadow-light); + text-align: center; + } + } + + .wp-block-video { + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 + var(--color-shadow-light); + } +} -- 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/styles/pages/partials/_article-wp-blocks.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 7fd11d99f8a547e4acb89b9f9159b92e208dc90f Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 20 May 2022 22:12:43 +0200 Subject: chore: update images styles --- .../molecules/images/responsive-image.module.scss | 46 ++++++++++++++++++---- .../molecules/images/responsive-image.stories.tsx | 17 ++++++++ .../molecules/images/responsive-image.tsx | 14 ++++++- .../organisms/layout/overview.module.scss | 14 +++---- src/components/organisms/layout/overview.tsx | 2 +- src/styles/pages/article.module.scss | 2 +- src/styles/pages/partials/_article-media.scss | 17 ++++++-- src/styles/pages/partials/_article-wp-blocks.scss | 32 +++++++++------ 8 files changed, 111 insertions(+), 33 deletions(-) (limited to 'src/styles/pages/partials/_article-wp-blocks.scss') diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss index 3a4f283..8a1d51f 100644 --- a/src/components/molecules/images/responsive-image.module.scss +++ b/src/components/molecules/images/responsive-image.module.scss @@ -1,26 +1,49 @@ @use "@styles/abstracts/functions" as fun; +.caption { + margin: 0; + padding: fun.convert-px(4) var(--spacing-2xs); + background: var(--color-bg-secondary); + border: fun.convert-px(1) solid var(--color-border-light); + font-size: var(--font-size-sm); + font-weight: 500; +} + .wrapper { display: flex; flex-flow: column; width: fit-content; - margin: 0; + margin: 0 auto; position: relative; text-align: center; -} -.caption { - margin: 0; - padding: fun.convert-px(4) var(--spacing-2xs); - background: var(--color-bg-secondary); - border: fun.convert-px(1) solid var(--color-border-light); - font-weight: 500; + &--has-borders { + .caption { + margin-top: fun.convert-px(4); + } + } + + &--has-borders#{&}--has-link { + .link { + padding: fun.convert-px(4); + } + } + + &--has-borders#{&}--no-link { + padding: fun.convert-px(4); + border: fun.convert-px(1) solid var(--color-border); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 + var(--color-shadow); + } } .link { display: flex; flex-flow: column; background: none; + border: fun.convert-px(1) solid var(--color-border); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 + var(--color-shadow); text-decoration: none; .caption { @@ -29,6 +52,11 @@ &:hover, &:focus { + box-shadow: 0 0 fun.convert-px(2) 0 var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(4) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(4) fun.convert-px(4) fun.convert-px(8) fun.convert-px(2) + var(--color-shadow-light); transform: scale(var(--scale-up, 1.05)); } @@ -40,6 +68,8 @@ } &:active { + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + fun.convert-px(1) var(--color-shadow-light); transform: scale(var(--scale-down, 0.95)); .caption { diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx index 35d9116..4294208 100644 --- a/src/components/molecules/images/responsive-image.stories.tsx +++ b/src/components/molecules/images/responsive-image.stories.tsx @@ -7,6 +7,9 @@ import ResponsiveImage from './responsive-image'; export default { title: 'Molecules/Images/ResponsiveImage', component: ResponsiveImage, + args: { + withBorders: false, + }, argTypes: { alt: { control: { @@ -75,6 +78,20 @@ export default { required: true, }, }, + withBorders: { + control: { + type: 'boolean', + }, + description: 'Add borders around the image.', + table: { + category: 'Styles', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, }, } as ComponentMeta; diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx index d07dd6c..4541df8 100644 --- a/src/components/molecules/images/responsive-image.tsx +++ b/src/components/molecules/images/responsive-image.tsx @@ -31,6 +31,10 @@ export type ResponsiveImageProps = Omit< * The image width. */ width: number | string; + /** + * Wrap the image with borders. + */ + withBorders?: boolean; }; /** @@ -45,10 +49,18 @@ const ResponsiveImage: FC = ({ layout, objectFit, target, + withBorders, ...props }) => { + const bordersModifier = withBorders + ? 'wrapper--has-borders' + : 'wrapper--no-borders'; + const linkModifier = target ? 'wrapper--has-link' : 'wrapper--no-link'; + return ( -
+
{target ? ( = ({ className = '', cover, meta }) => {
{cover && ( )} diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss index 04acad9..a5299fe 100644 --- a/src/styles/pages/article.module.scss +++ b/src/styles/pages/article.module.scss @@ -11,7 +11,7 @@ margin-right: var(--spacing-2xs); padding: var(--spacing-2xs) var(--spacing-xs); - &__icon { + figure { max-width: fun.convert-px(22); margin-right: var(--spacing-2xs); } diff --git a/src/styles/pages/partials/_article-media.scss b/src/styles/pages/partials/_article-media.scss index 8359881..0cd3654 100644 --- a/src/styles/pages/partials/_article-media.scss +++ b/src/styles/pages/partials/_article-media.scss @@ -1,11 +1,20 @@ +@use "@styles/abstracts/functions" as fun; + @mixin styles { figure { - margin: var(--spacing-md) 0; + display: flex; + flex-flow: column; + width: fit-content; + margin: 0 auto; + position: relative; + text-align: center; } figcaption { - margin-top: var(--spacing-xs); - font-size: var(--font-size-sm); - text-align: center; + margin: 0; + padding: fun.convert-px(4) var(--spacing-2xs); + background: var(--color-bg-secondary); + border: fun.convert-px(1) solid var(--color-border-light); + font-weight: 500; } } diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss index f75a4d5..33e59a1 100644 --- a/src/styles/pages/partials/_article-wp-blocks.scss +++ b/src/styles/pages/partials/_article-wp-blocks.scss @@ -62,6 +62,24 @@ } } + .wp-block-image { + display: flex; + flex-flow: column; + width: fit-content; + margin: 0 auto; + padding: fun.convert-px(4); + position: relative; + border: fun.convert-px(1) solid var(--color-border); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 + var(--color-shadow); + text-align: center; + + figcaption { + margin-top: fun.convert-px(4); + font-size: var(--font-size-sm); + } + } + .wp-block-gallery { display: grid; grid-template-columns: minmax(0, 1fr); @@ -142,18 +160,10 @@ } } } - } - .wp-block-image { - img { - display: block; - margin: auto; - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-light); - text-align: center; + .wp-block-image img { + height: 100%; + object-fit: cover; } } -- cgit v1.2.3 From 802548124071039f83ebfa2605e839ded82b5689 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 20 May 2022 22:22:35 +0200 Subject: chore: update some styles * Improve wp-blocks-columns, wp-block-quote and some images * Make Sharing widget consistent between pages * Remove margin option from lists * Fix Topic logo alignement --- src/components/atoms/lists/list.module.scss | 10 ------ src/components/atoms/lists/list.tsx | 12 ++----- src/components/organisms/layout/cards-list.tsx | 1 - .../organisms/layout/posts-list.module.scss | 9 ++++- src/components/organisms/layout/posts-list.tsx | 4 +-- .../organisms/widgets/links-list-widget.tsx | 1 - src/pages/article/[slug].tsx | 5 +-- src/pages/projets/[slug].tsx | 9 +++-- src/pages/sujet/[slug].tsx | 2 +- src/styles/pages/partials/_article-wp-blocks.scss | 38 +++++++++++----------- src/styles/pages/project.module.scss | 10 ++++++ src/styles/pages/topic.module.scss | 2 +- 12 files changed, 51 insertions(+), 52 deletions(-) create mode 100644 src/styles/pages/project.module.scss (limited to 'src/styles/pages/partials/_article-wp-blocks.scss') diff --git a/src/components/atoms/lists/list.module.scss b/src/components/atoms/lists/list.module.scss index f647072..95f9b40 100644 --- a/src/components/atoms/lists/list.module.scss +++ b/src/components/atoms/lists/list.module.scss @@ -7,10 +7,6 @@ color: var(--color-primary-dark); } - & & { - margin-top: var(--spacing-2xs); - } - &--ordered { padding: 0; counter-reset: li; @@ -33,12 +29,6 @@ padding: 0 0 0 var(--spacing-sm); } - &--has-margin &__item { - &:not(:last-child) { - margin-bottom: var(--spacing-2xs); - } - } - &--flex { @extend %reset-list; diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx index 711ade1..aa0a241 100644 --- a/src/components/atoms/lists/list.tsx +++ b/src/components/atoms/lists/list.tsx @@ -33,10 +33,6 @@ export type ListProps = { * The list kind. */ kind?: 'ordered' | 'unordered' | 'flex'; - /** - * Set margin between list items. Default: true. - */ - withMargin?: boolean; }; /** @@ -49,11 +45,9 @@ const List: FC = ({ items, itemsClassName = '', kind = 'unordered', - withMargin = true, }) => { const ListTag = kind === 'ordered' ? 'ol' : 'ul'; const kindClass = `list--${kind}`; - const marginClass = withMargin ? 'list--has-margin' : 'list--no-margin'; /** * Retrieve the list items. @@ -66,7 +60,7 @@ const List: FC = ({ {value} {child && ( {getItems(child)} @@ -76,9 +70,7 @@ const List: FC = ({ }; return ( - + {getItems(items)} ); diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx index 1558d7c..0168bb2 100644 --- a/src/components/organisms/layout/cards-list.tsx +++ b/src/components/organisms/layout/cards-list.tsx @@ -77,7 +77,6 @@ const CardsList: FC = ({ ); diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss index a006914..b09bb12 100644 --- a/src/components/organisms/layout/posts-list.module.scss +++ b/src/components/organisms/layout/posts-list.module.scss @@ -3,6 +3,10 @@ @use "@styles/abstracts/placeholders"; .section { + &:not(:last-of-type) { + margin-bottom: var(--spacing-md); + } + @include mix.media("screen") { @include mix.dimensions("md") { display: grid; @@ -17,8 +21,11 @@ @extend %reset-ordered-list; .item { - margin-bottom: var(--spacing-md); border-bottom: fun.convert-px(1) solid var(--color-border); + + &:not(:last-child) { + margin-bottom: var(--spacing-md); + } } } diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx index 50192dd..608130e 100644 --- a/src/components/organisms/layout/posts-list.tsx +++ b/src/components/organisms/layout/posts-list.tsx @@ -100,6 +100,8 @@ const PostsList: FC = ({ const isMounted = useIsMounted(listRef); const { blog } = useSettings(); + const lastPostId = posts.length ? posts[posts.length - 1].id : 0; + /** * Retrieve the list of posts. * @@ -111,8 +113,6 @@ const PostsList: FC = ({ allPosts: Post[], headingLevel: HeadingLevel = 2 ): JSX.Element => { - const lastPostId = allPosts[allPosts.length - 1].id; - return (
    {allPosts.map(({ id, ...post }) => ( diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx index 90dae4a..a9c677b 100644 --- a/src/components/organisms/widgets/links-list-widget.tsx +++ b/src/components/organisms/widgets/links-list-widget.tsx @@ -75,7 +75,6 @@ const LinksListWidget: FC = ({ diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx index 7abbabc..812fffe 100644 --- a/src/pages/article/[slug].tsx +++ b/src/pages/article/[slug].tsx @@ -99,10 +99,7 @@ const ArticlePage: NextPageWithLayout = ({ target={`/sujet/${topic.slug}`} className={styles.btn} > - {topic.logo && ( - - )}{' '} - {topic.name} + {topic.logo && } {topic.name} ); }), diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx index cf7d0dc..e9b36fa 100644 --- a/src/pages/projets/[slug].tsx +++ b/src/pages/projets/[slug].tsx @@ -10,6 +10,7 @@ import { getLayout } from '@components/templates/layout/layout'; import PageLayout, { PageLayoutProps, } from '@components/templates/page/page-layout'; +import styles from '@styles/pages/project.module.scss'; import { type NextPageWithLayout, type ProjectPreview, @@ -53,7 +54,7 @@ const ProjectPage: NextPageWithLayout = ({ project }) => { const components: NestedMDXComponents = { Code: (props) => , Gallery: (props) => , - Image: (props) => , + Image: (props) => , Link: (props) => , pre: ({ children }) => , }; @@ -66,7 +67,10 @@ const ProjectPage: NextPageWithLayout = ({ project }) => { const headerMeta: PageLayoutProps['headerMeta'] = { publication: { date: dates.publication }, - update: dates.update ? { date: dates.update } : undefined, + update: + dates.update && dates.update !== dates.publication + ? { date: dates.update } + : undefined, }; /** @@ -202,6 +206,7 @@ const ProjectPage: NextPageWithLayout = ({ project }) => { 'linkedin', 'twitter', ]} + className={styles.widget} />, ]} > diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx index 271f4ec..b4845eb 100644 --- a/src/pages/sujet/[slug].tsx +++ b/src/pages/sujet/[slug].tsx @@ -191,7 +191,7 @@ const TopicPage: NextPageWithLayout = ({ : [] } > -
    + {content &&
    } {articles && ( <> diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss index 33e59a1..86be062 100644 --- a/src/styles/pages/partials/_article-wp-blocks.scss +++ b/src/styles/pages/partials/_article-wp-blocks.scss @@ -7,13 +7,12 @@ margin: var(--spacing-sm) 0; padding: var(--spacing-sm); position: relative; - border: fun.convert-px(1) solid var(--color-primary-lighter); - border-left: fun.convert-px(5) solid var(--color-primary-lighter); - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-light); + border: fun.convert-px(1) solid var(--color-border-dark); + border-left: fun.convert-px(5) solid var(--color-border-dark); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 + var(--color-shadow), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) 0 + var(--color-shadow); font-style: italic; > *:last-child { @@ -21,6 +20,7 @@ } cite { + color: var(--color-fg-light); font-size: var(--font-size-sm); font-style: normal; font-weight: 600; @@ -62,18 +62,26 @@ } } + .wp-block-image, + .wp-block-video { + padding: fun.convert-px(4); + border: fun.convert-px(1) solid var(--color-border); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 + var(--color-shadow); + } + .wp-block-image { display: flex; flex-flow: column; width: fit-content; margin: 0 auto; - padding: fun.convert-px(4); position: relative; - border: fun.convert-px(1) solid var(--color-border); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 - var(--color-shadow); text-align: center; + img { + margin: auto; + } + figcaption { margin-top: fun.convert-px(4); font-size: var(--font-size-sm); @@ -166,12 +174,4 @@ object-fit: cover; } } - - .wp-block-video { - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-light); - } } diff --git a/src/styles/pages/project.module.scss b/src/styles/pages/project.module.scss new file mode 100644 index 0000000..3b1b5cc --- /dev/null +++ b/src/styles/pages/project.module.scss @@ -0,0 +1,10 @@ +@use "@styles/abstracts/mixins" as mix; + +.widget { + @include mix.media("screen") { + @include mix.dimensions("md") { + width: min-content; + gap: var(--spacing-2xs); + } + } +} diff --git a/src/styles/pages/topic.module.scss b/src/styles/pages/topic.module.scss index badb694..fd5f742 100644 --- a/src/styles/pages/topic.module.scss +++ b/src/styles/pages/topic.module.scss @@ -2,5 +2,5 @@ .logo { max-width: fun.convert-px(50); - margin-right: var(--spacing-xs); + margin: 0 var(--spacing-xs) 0 0; } -- cgit v1.2.3