add mark and .telegram-channel style for home page entry

This commit is contained in:
Reorx 2022-06-01 00:51:18 +08:00
parent 5c47607d23
commit 80f443ec36
5 changed files with 50 additions and 11 deletions

View File

@ -7,6 +7,26 @@
padding: var(--gap);
padding-bottom: 0;
}
.mark-line {
display: inline-block;
background: var(--line-yellow) bottom left/100% 0.3em no-repeat;
}
mark {
margin: 0 -0.4em;
padding: 0.1em 0.4em;
border-radius: 0.8em 0.3em;
background: transparent;
background-image: linear-gradient(
to right,
rgba(255, 225, 0, 0.1),
rgba(255, 225, 0, 0.7) 4%,
rgba(255, 225, 0, 0.3)
);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* for post page */
.main.post {
max-width: calc(var(--post-width) + var(--gap) * 2);

View File

@ -23,10 +23,11 @@
.first-entry .entry-content {
margin: 14px 0;
font-size: 16px;
font-size: 17px;
color: var(--primary);
line-height: 1.5em;
line-height: 1.6em;
display: block;
overflow: initial; /* fix <mark> edge get cut */
}
.first-entry .entry-content p,
@ -38,6 +39,21 @@
font-size: 14px;
}
.telegram-channel a {
font-weight: bold;
display: inline-block;
transition: var(--link-transition);
text-decoration: underline;
}
.telegram-channel a:hover {
color: #0088CC;
}
.telegram-channel svg {
width: 25px;
height: auto;
vertical-align: text-bottom;
}
.home-info .entry-content {
-webkit-line-clamp: unset;
}

View File

@ -7,6 +7,8 @@
html {
-webkit-tap-highlight-color: transparent;
overflow-y: scroll;
/* -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; */
}
a,

View File

@ -24,6 +24,7 @@
--link-hover-underline-color: #6549c0;
--link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
--link-transition: all 0.3s ease;
--line-yellow: url("data:image/svg+xml;charset=utf-8,%3Csvg preserveAspectRatio='none' width='120' height='6' viewBox='0 0 120 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M119 0.8C60 4 50-0.5 1 1.5' stroke='%23fc0' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.dark {