From 591c9b3776520bc2c2a9c4890c1ba36747326c1e Mon Sep 17 00:00:00 2001
From: pseudoyu <pseudoyu@connect.hku.hk>
Date: Wed, 22 Jun 2022 02:43:06 +0800
Subject: [PATCH] feat: add friend link page support using shortcode
 (hugo-extended version requried)

it's common to add some friend links to our about page or seperate pages, so I add some shortcode to
support this function and customized style
---
 layouts/shortcodes/friend.html |  17 +++++
 static/css/den.css             |   2 +
 static/css/friend.css          | 130 +++++++++++++++++++++++++++++++++
 3 files changed, 149 insertions(+)
 create mode 100644 layouts/shortcodes/friend.html
 create mode 100644 static/css/friend.css

diff --git a/layouts/shortcodes/friend.html b/layouts/shortcodes/friend.html
new file mode 100644
index 0000000..b67a6b4
--- /dev/null
+++ b/layouts/shortcodes/friend.html
@@ -0,0 +1,17 @@
+{{ if .IsNamedParams }}
+     {{- $src := .Get "logo" -}}
+     {{- $small := .Get "logo_small" | default $src -}}
+     {{- $large := .Get "logo_large" | default $src -}}
+     <div class="friend-div">
+         <a target="_blank" href={{ .Get "url"  | safeURL }} title={{ .Get "name" }} >
+             <img class="lazyload"
+                  src={{ $src | safeURL }}
+                  data-src={{ $src | safeURL }}
+                  alt={{ .Get "name" }}
+                  data-sizes="auto"
+                  data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x" />
+             <span class="friend-name">{{ .Get "name" }}</span>
+             <span class="friend-info">{{ .Get "word" }}</span>
+         </a>
+     </div>
+ {{ end }}
\ No newline at end of file
diff --git a/static/css/den.css b/static/css/den.css
index f5c2c93..0a9cfc2 100644
--- a/static/css/den.css
+++ b/static/css/den.css
@@ -11,6 +11,8 @@
 
 @import url("syntax.css");
 
+@import url("friend.css");
+
 /* Responsive */
 @media (min-width: 768px) {
   .container {
diff --git a/static/css/friend.css b/static/css/friend.css
new file mode 100644
index 0000000..3354227
--- /dev/null
+++ b/static/css/friend.css
@@ -0,0 +1,130 @@
+#article-container {
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+}
+
+#article-container a {
+	color: #49b1f5;
+}
+
+#article-container a:hover {
+	text-decoration: underline;
+}
+
+#article-container img {
+	margin: 0 auto 0.8rem;
+}
+
+.flink#article-container .friend-list-div > .friend-div a .friend-info,
+.flink#article-container .friend-list-div > .friend-div a .friend-name {
+	overflow: hidden;
+	-o-text-overflow: ellipsis;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.flink#article-container .friend-list-div {
+	overflow: auto;
+	padding: 10px 10px 0;
+	text-align: center;
+}
+
+.flink#article-container .friend-list-div > .friend-div {
+	position: relative;
+	float: left;
+	overflow: hidden;
+	margin: 15px 7px;
+	width: calc(100% / 3 - 15px);
+	height: 90px;
+	border-radius: 8px;
+	line-height: 17px;
+	-webkit-transform: translateZ(0);
+}
+
+@media screen and (max-width: 1100px) {
+	.flink#article-container .friend-list-div > .friend-div {
+		width: calc(50% - 15px) !important;
+	}
+
+	@media screen and (max-width: 600px) {
+		.flink#article-container .friend-list-div > .friend-div {
+			width: calc(100% - 15px) !important;
+		}
+	}
+}
+
+.flink#article-container .friend-list-div > .friend-div:hover {
+	background: rgba(87, 142, 224, 0.15);
+}
+
+.flink#article-container .friend-list-div > .friend-div:hover img {
+	-webkit-transform: rotate(360deg);
+	-moz-transform: rotate(360deg);
+	-o-transform: rotate(360deg);
+	-ms-transform: rotate(360deg);
+	transform: rotate(360deg);
+}
+
+.flink#article-container .friend-list-div > .friend-div:before {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: -1;
+	background: var(--text-bg-hover);
+	content: "";
+	-webkit-transition: -webkit-transform 0.3s ease-out;
+	-moz-transition: -moz-transform 0.3s ease-out;
+	-o-transition: -o-transform 0.3s ease-out;
+	-ms-transition: -ms-transform 0.3s ease-out;
+	transition: transform 0.3s ease-out;
+	-webkit-transform: scale(0);
+	-moz-transform: scale(0);
+	-o-transform: scale(0);
+	-ms-transform: scale(0);
+	transform: scale(0);
+}
+
+.flink#article-container .friend-list-div > .friend-div:hover:before,
+.flink#article-container .friend-list-div > .friend-div:focus:before,
+.flink#article-container .friend-list-div > .friend-div:active:before {
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+	-o-transform: scale(1);
+	-ms-transform: scale(1);
+	transform: scale(1);
+}
+
+.flink#article-container .friend-list-div > .friend-div a {
+	color: var(--font-color);
+	text-decoration: none;
+}
+
+.flink#article-container .friend-list-div > .friend-div a img {
+	float: left;
+	margin: 15px 10px;
+	width: 60px;
+	height: 60px;
+	border-radius: 35px;
+	-webkit-transition: all 0.3s;
+	-moz-transition: all 0.3s;
+	-o-transition: all 0.3s;
+	-ms-transition: all 0.3s;
+	transition: all 0.3s;
+}
+
+.flink#article-container .friend-list-div > .friend-div a .friend-name {
+	display: block;
+	padding: 16px 10px 0 0;
+	height: 40px;
+	font-weight: 700;
+	font-size: 20px;
+}
+
+.flink#article-container .friend-list-div > .friend-div a .friend-info {
+	display: block;
+	padding: 1px 10px 1px 0;
+	height: 50px;
+	font-size: 13px;
+}