tune link styles, add color to menu, content, footer links

This commit is contained in:
Reorx 2022-04-13 17:23:43 +08:00
parent b662cb28e3
commit 280efabd02
6 changed files with 68 additions and 28 deletions

View File

@ -22,12 +22,18 @@
}
.footer a {
font-weight: 500;
color: inherit;
border-bottom: 1px solid var(--secondary);
box-shadow: var(--link-underline-shadow);
}
.footer a:hover {
border-bottom: 1px solid var(--primary);
color: var(--link-hover-color);
box-shadow: var(--link-hover-underline-shadow);
}
.top-link:hover {
color: var(--link-hover-color);
}
.top-link {
@ -49,10 +55,6 @@
filter: drop-shadow(0px 0px 0px var(--theme));
}
.footer a:hover,
.top-link:hover {
color: var(--primary);
}
.top-link:focus,
#theme-toggle:focus {

View File

@ -8,7 +8,7 @@
line-height: var(--header-height);
}
.nav a {
.logo a {
display: block;
}
@ -69,11 +69,16 @@ body:not(.dark) #sun {
font-size: 16px;
font-weight: 500;
color: var(--secondary);
display: inline-block;
line-height: 1.5em;
}
#menu a:hover {
color: var(--link-hover-color);
}
#menu .active {
color: var(--primary);
border-bottom: 2px solid currentColor;
box-shadow: 0 2px 0 var(--primary);
}
.lang-switch li,

View File

@ -44,7 +44,7 @@
}
.post-entry:active {
transform: scale(0.96);
transform: scale(0.97);
}
.tag-entry .entry-cover {

View File

@ -70,7 +70,17 @@
}
.post-content a {
box-shadow: 0 1px 0;
font-weight: 500;
color: var(--primary);
box-shadow: var(--link-underline-shadow);
}
.post-content a:hover {
color: var(--link-hover-color);
box-shadow: var(--link-hover-underline-shadow);
}
.post-content a.anchor:hover {
color: var(--primary);
box-shadow: 0 -2px 0 var(--secondary) inset;
}
.post-content a code {
@ -78,6 +88,31 @@
border-radius: 0;
box-shadow: 0 -1px 0 var(--primary) inset;
}
.post-content a:hover code {
box-shadow: 0 -1px 0 var(--link-hover-underline-color) inset, 0 1px 0 var(--link-hover-underline-color);
}
h1 .anchor,
h2 .anchor,
h3 .anchor,
h4 .anchor,
h5 .anchor,
h6 .anchor {
box-shadow: none;
user-select: none;
}
h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
color: var(--secondary);
margin-inline-start: 8px;
font-weight: 500;
display: inline-flex;
}
.post-content del {
text-decoration: none;
@ -366,18 +401,6 @@
transform: scale(0.96);
}
h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
display: inline-flex;
color: var(--secondary);
margin-inline-start: 8px;
font-weight: 500;
user-select: none;
}
.post-content :not(table) ::-webkit-scrollbar-thumb {
border: 2px solid var(--hljs-bg);

View File

@ -7,6 +7,7 @@
--header-height: 60px;
--footer-height: 60px;
--radius: 8px;
--theme: rgb(255, 255, 255);
--entry: rgb(255, 255, 255);
--primary: rgb(30, 30, 30);
@ -16,6 +17,11 @@
--hljs-bg: rgb(28, 29, 33);
--code-bg: rgb(245, 245, 245);
--border: rgb(238, 238, 238);
--link-color: var(--primary);
--link-hover-color: #573eaa;
--link-underline-shadow: 0 1px 0 var(--link-color);
--link-hover-underline-color: #573eaa;
--link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
}
.dark {
@ -28,6 +34,11 @@
--hljs-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51);
--link-color: var(--primary);
--link-hover-color: #876fd6;
--link-underline-shadow: 0 1px 0 var(--link-color);
--link-hover-underline-color: var(--link-hover-color);
--link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
}
.list {

View File

@ -126,12 +126,11 @@
<li>
<a href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}"
{{- if $is_search -}}data-no-instant{{- end -}}
{{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}>
<span {{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
{{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}
{{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
{{- .Pre }}
{{- .Name -}}
{{ .Post -}}
</span>
</a>
</li>
{{- end }}