tune link styles, add color to menu, content, footer links
This commit is contained in:
Reorx
parent
b662cb28e3
commit
280efabd02
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
}
|
||||
|
||||
.post-entry:active {
|
||||
transform: scale(0.96);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.tag-entry .entry-cover {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 }}>
|
||||
{{- .Pre }}
|
||||
{{- .Name -}}
|
||||
{{ .Post -}}
|
||||
</span>
|
||||
{{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}
|
||||
{{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
|
||||
{{- .Pre }}
|
||||
{{- .Name -}}
|
||||
{{ .Post -}}
|
||||
</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue