From 80f443ec367cd3a9d15bd7bad50221e3fa75b5ca Mon Sep 17 00:00:00 2001
From: Reorx <novoreorx@gmail.com>
Date: Wed, 1 Jun 2022 00:51:18 +0800
Subject: [PATCH] add mark and .telegram-channel style for home page entry

---
 assets/css/common/main.css       | 20 ++++++++++++++++++++
 assets/css/common/post-entry.css | 20 ++++++++++++++++++--
 assets/css/core/reset.css        |  2 ++
 assets/css/core/theme-vars.css   |  1 +
 layouts/partials/home_info.html  | 18 +++++++++---------
 5 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/assets/css/common/main.css b/assets/css/common/main.css
index d36ae65..917723a 100644
--- a/assets/css/common/main.css
+++ b/assets/css/common/main.css
@@ -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);
diff --git a/assets/css/common/post-entry.css b/assets/css/common/post-entry.css
index f00e78b..57e378c 100644
--- a/assets/css/common/post-entry.css
+++ b/assets/css/common/post-entry.css
@@ -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;
 }
diff --git a/assets/css/core/reset.css b/assets/css/core/reset.css
index 4c38720..7053b0b 100644
--- a/assets/css/core/reset.css
+++ b/assets/css/core/reset.css
@@ -7,6 +7,8 @@
 html {
     -webkit-tap-highlight-color: transparent;
     overflow-y: scroll;
+    /* -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility; */
 }
 
 a,
diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css
index 4951ed5..2535b99 100644
--- a/assets/css/core/theme-vars.css
+++ b/assets/css/core/theme-vars.css
@@ -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 {
diff --git a/layouts/partials/home_info.html b/layouts/partials/home_info.html
index 12ae6c5..b90f08b 100644
--- a/layouts/partials/home_info.html
+++ b/layouts/partials/home_info.html
@@ -1,13 +1,13 @@
 {{- with site.Params.homeInfoParams }}
 <article class="first-entry home-info">
-    <header class="entry-header">
-        <h1>{{ .Title | markdownify }}</h1>
-    </header>
-    <section class="entry-content">
-        {{- trim .Content "\n" | markdownify -}}
-    </section>
-    <footer class="entry-footer">
-        {{- partial "social_icons.html" (dict "icons" site.Params.socialIcons "svg" $.Site.Data.svg "MaskedEmail" site.Params.MaskedEmail "Email" site.Params.Email) -}}
-    </footer>
+  <header class="entry-header">
+    <h1>{{ .Title | markdownify }}</h1>
+  </header>
+  <section class="entry-content">
+    {{- trim .Content "\n" | markdownify -}}
+  </section>
+  <footer class="entry-footer">
+    {{- partial "social_icons.html" (dict "icons" site.Params.socialIcons "svg" $.Site.Data.svg "MaskedEmail" site.Params.MaskedEmail "Email" site.Params.Email) -}}
+  </footer>
 </article>
 {{- end -}}