diff --git a/src/components/Post.vue b/src/components/Post.vue index 39646df..e25b11c 100644 --- a/src/components/Post.vue +++ b/src/components/Post.vue @@ -581,12 +581,21 @@ export default class PostComponent extends Vue { flex-wrap: wrap; gap: 0.25em; padding: $block-inner-padding / 4 $block-inner-padding 0; + + a { + @include block-link; + } } .post-content { color: $text-color; line-height: 1.5; padding: $block-inner-padding; + word-wrap: break-word; + + :deep(a) { + @include block-link; + } :deep(pre), :deep(code) { diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index b146a53..12e3c1b 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -23,6 +23,14 @@ } } +@mixin block-link { + color: $block-link-color; + + &:hover { + color: $block-link-hover-color; + } +} + @mixin post-action { display: flex; font-weight: bold; diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss index 9ad90c5..3a8dc38 100644 --- a/src/styles/_theme.scss +++ b/src/styles/_theme.scss @@ -25,5 +25,7 @@ $btn-shadow: 2px 5px 10px -5px #B7B5B5; $block-border-radius: 15px; $block-background-color: #fff; +$block-link-color: #6c491c; +$block-link-hover-color: #1A0000; $separator-color: $background-color; $shadow: 0 2px 16px -9px #C3C4C7;