add css for links page

This commit is contained in:
Reorx 2022-05-09 21:54:28 +08:00
parent ff8b16b194
commit 9d5184cae4
2 changed files with 65 additions and 15 deletions

View File

@ -119,3 +119,68 @@ pre:hover .copy-code {
.meta-item .post-tags a:before {
content: "#";
}
/* effects */
:root {
--shadow-color: 0deg 0% 0%;
--shadow-elevation-low:
0.6px 0.6px 1px hsl(var(--shadow-color) / 0.1),
0.9px 0.9px 1.4px -1.2px hsl(var(--shadow-color) / 0.1),
2.2px 2.2px 3.5px -2.5px hsl(var(--shadow-color) / 0.1);
--shadow-elevation-medium:
0.6px 0.6px 1px hsl(var(--shadow-color) / 0.11),
1.8px 1.8px 2.9px -0.8px hsl(var(--shadow-color) / 0.11),
4.6px 4.6px 7.3px -1.7px hsl(var(--shadow-color) / 0.11),
11.1px 11.1px 17.7px -2.5px hsl(var(--shadow-color) / 0.11);
--twitter-color: #4a99e9;
}
/* links page */
.links-container {
font-size: 16px;
}
.links-container blockquote {
margin: var(--gap) 0;
padding: 0 14px;
border-inline-start: 3px solid var(--primary);
}
.links .item {
padding: 12px;
background: var(--entry);
border-radius: var(--radius);
margin-bottom: var(--gap);
border: 1px solid var(--border);
}
.links .favicon {
display: inline-block;
background-size: 16px 16px;
width: 16px;
height: 16px;
image-rendering: -webkit-optimize-contrast;
}
.links .item .title {
}
.links .item .title .favicon {
margin-right: calc(var(--gap) / 2);
vertical-align: middle;
}
.links .item .title a:hover {
text-decoration: underline;
}
.links .item .description {
margin-left: calc(16px + var(--gap) / 2);
color: var(--secondary);
}
.links .item .description .delimiter::after {
content: "·";
margin-inline-start: .5em;
margin-inline-end: .5em;
}

View File

@ -487,21 +487,6 @@ h6:hover .anchor {
background-color: var(--secondary);
}
:root {
--shadow-color: 0deg 0% 0%;
--shadow-elevation-low:
0.6px 0.6px 1px hsl(var(--shadow-color) / 0.1),
0.9px 0.9px 1.4px -1.2px hsl(var(--shadow-color) / 0.1),
2.2px 2.2px 3.5px -2.5px hsl(var(--shadow-color) / 0.1);
--shadow-elevation-medium:
0.6px 0.6px 1px hsl(var(--shadow-color) / 0.11),
1.8px 1.8px 2.9px -0.8px hsl(var(--shadow-color) / 0.11),
4.6px 4.6px 7.3px -1.7px hsl(var(--shadow-color) / 0.11),
11.1px 11.1px 17.7px -2.5px hsl(var(--shadow-color) / 0.11);
--twitter-color: #4a99e9;
}
.social-links {
margin: calc(var(--content-gap) * 2) 0;
background-color: var(--code-bg);