diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-07 16:34:55 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-07 19:04:13 +0100 |
| commit | a385d89dfd6312f2255d1343cea3f63375ce5b39 (patch) | |
| tree | cad32cfd21e188eb1c145d0fda173da7f353b591 /src/components/Comment/Comment.module.scss | |
| parent | 8efb9219116a6c665d1059d3218c9405c616e404 (diff) | |
chore: improve comment section
I also adjust styles for all forms and primary buttons.
Diffstat (limited to 'src/components/Comment/Comment.module.scss')
| -rw-r--r-- | src/components/Comment/Comment.module.scss | 22 |
1 files changed, 16 insertions, 6 deletions
diff --git a/src/components/Comment/Comment.module.scss b/src/components/Comment/Comment.module.scss index 46c0249..a952f66 100644 --- a/src/components/Comment/Comment.module.scss +++ b/src/components/Comment/Comment.module.scss @@ -6,8 +6,10 @@ } .wrapper { + background: var(--color-bg); border: fun.convert-px(1) solid var(--color-border-light); - box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light), + box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 + var(--color-shadow-lighter), fun.convert-px(4) fun.convert-px(4) fun.convert-px(3) fun.convert-px(-2) var(--color-shadow-light); padding: var(--spacing-md); @@ -38,24 +40,32 @@ .avatar { width: fun.convert-px(85); height: fun.convert-px(85); + margin: 0 auto; border-radius: fun.convert-px(3); - box-shadow: 0 0 0 fun.convert-px(1) var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light); + box-shadow: 0 0 0 fun.convert-px(1) var(--color-shadow-lighter), + fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(1) + var(--color-shadow-light); position: relative; + + img { + border-radius: fun.convert-px(3); + } } .author { + color: var(--color-primary-darker); + font-weight: 600; text-align: center; } .date { color: var(--color-fg-secondary); font-size: var(--font-size-sm); - display: grid; - grid-template-columns: repeat(2, max-content); + display: flex; + flex-flow: row wrap; column-gap: var(--spacing-2xs); justify-content: center; - margin: var(--spacing-sm) 0 var(--spacing-md); + margin: var(--spacing-md) 0; @include mix.media("screen") { @include mix.dimensions("sm") { |