troldspejlet/hugo-theme-stack
troldspejlet/hugo-theme-stack
1
0
Fork 0
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2024-11-27 04:03:48 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(article): improve link style

Browse source
This commit is contained in:
Jimmy Cai 2020-08-24 13:09:20 +02:00
parent dedb859ecc
commit 6028eb5c2d
2 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
assets/scss/partials/layout/article.scss
View file

@ -60,13 +60,8 @@
.article-content { .article-content {
margin: var(--content-padding) 0; margin: var(--content-padding) 0;
line-height: 1.75;
color: var(--card-text-color-main); color: var(--card-text-color-main);
@media (max-width: $on-tablet) {
font-size: 1.6rem;
}
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
@ -198,6 +193,12 @@
.article-content { .article-content {
font-family: var(--article-font-family); font-family: var(--article-font-family);
font-size: 1.7rem;
line-height: 1.85;
@media (max-width: $on-tablet) {
font-size: 1.6rem;
}
& > p { & > p {
margin: 1.5em 0; margin: 1.5em 0;
@ -289,13 +290,12 @@
} }
a.link { a.link {
box-shadow: 0px -2px 0px var(--accent-color) inset; box-shadow: 0px -2px 0px rgba(var(--link-background-color), var(--link-background-opacity)) inset;
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover { &:hover {
box-shadow: 0px -20px 0px var(--accent-color) inset; box-shadow: 0px -10px 0px rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset;
color: var(--accent-color-text);
} }
} }
} }

11
assets/scss/variables.scss
View file

@ -4,8 +4,7 @@ $fallback-font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
sans-serif; sans-serif;
$base-font-family: "Lato", $fallback-font-family; $base-font-family: "Lato", $fallback-font-family;
$article-font-family: -apple-system, BlinkMacSystemFont, "noto-sans", "Segoe UI", "Droid Sans", "Helvetica Neue", $article-font-family: $base-font-family;
"PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
$code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace; $code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
@ -28,6 +27,10 @@ $accent-color: #34495e;
$accent-color-darker: #2c3e50; $accent-color-darker: #2c3e50;
$accent-color-text: #fff; $accent-color-text: #fff;
$link-background-color: 189, 195, 199;
$link-background-opacity: 0.5;
$link-background-opacity-hover: 0.7;
$card-background: #fff; $card-background: #fff;
$card-background-selected: #eaeaea; $card-background-selected: #eaeaea;
@ -77,6 +80,10 @@ $tag-border-radius: 4px;
@media (max-width: $on-tablet) { @media (max-width: $on-tablet) {
--content-padding: 20px; --content-padding: 20px;
} }
--link-background-color: #{$link-background-color};
--link-background-opacity: #{$link-background-opacity};
--link-background-opacity-hover: #{$link-background-opacity-hover};
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {