mirror of
https://github.com/CaiJimmy/hugo-theme-stack.git
synced 2025-04-29 12:03:31 +08:00
支持友链样式
This commit is contained in:
QIN2DIM
parent
c8d71934fa
commit
daf8de79a2
145
assets/scss/partials/layout/links.scss
Normal file
145
assets/scss/partials/layout/links.scss
Normal file
@ -0,0 +1,145 @@
|
||||
/* Place your custom SCSS in HUGO_SITE_FOLDER/assets/scss/custom.scss */
|
||||
|
||||
// 头像边框颜色
|
||||
$avatar-border-color: #566a82;
|
||||
$avatar-border-color-dark: #C0C0C0;
|
||||
|
||||
// style-card 背景色
|
||||
$friend-link-background-color: #51a8ca10;
|
||||
$friend-link-background-color-dark: #69697141;
|
||||
|
||||
// 友链 name 原始色
|
||||
$friend-link-color: #11a1a2;
|
||||
$friend-link-color-dark: #ffffff;
|
||||
|
||||
// 友链 name 气泡响应对比色
|
||||
$friend-link-hover-color: #ea4e2f;
|
||||
$friend-link-hover-color-dark: rgb(241, 213, 159);
|
||||
|
||||
// bio 简介上下文
|
||||
$context-color: #404040;
|
||||
$context-color-dark: #c0c0c0;
|
||||
|
||||
// 友链头像及头像边框的样式
|
||||
.friend-avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
padding: 2px;
|
||||
margin-top: 14px;
|
||||
margin-left: 14px;
|
||||
border-radius: 15px;
|
||||
border: 3.6px inset $avatar-border-color;
|
||||
[data-scheme=dark] & {
|
||||
border: 3.6px inset $avatar-border-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.friend-link-div {
|
||||
// 实现卡片双栏排列效果
|
||||
height: auto;
|
||||
margin-top: auto;
|
||||
margin-inline-start: 4.5%;
|
||||
width: 43%;
|
||||
display: inline-block !important;
|
||||
|
||||
// 控制上下连续排列的卡片之间的行距
|
||||
margin-bottom: 11px;
|
||||
|
||||
// 卡片圆角
|
||||
border-radius: 7px 7px 7px 7px;
|
||||
|
||||
// 卡片阴影
|
||||
-webkit-box-shadow: 0px 14px 32px 0px rgba(231, 224, 224, 0.15);
|
||||
-moz-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0.7px 1px 6px 0px rgba(0, 0, 0, 0.16);
|
||||
|
||||
// 卡片背景色
|
||||
background: $friend-link-background-color;
|
||||
[data-scheme=dark] & {
|
||||
background: $friend-link-background-color-dark;
|
||||
}
|
||||
|
||||
// 卡牌气泡响应动画
|
||||
-webkit-transition: transform 0.4s ease;
|
||||
-moz-transition: transform 0.4s ease;
|
||||
-o-transition: transform 0.4s ease;
|
||||
transition: transform 0.15s ease;
|
||||
&:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.friend-link-avatar {
|
||||
width: 92px;
|
||||
float: left;
|
||||
margin-right: 2px;
|
||||
|
||||
}
|
||||
|
||||
// name 特效样式， hover 气泡效果,友链 name 变色
|
||||
.friend-link-info {
|
||||
margin-top: 13px;
|
||||
margin-right: 18px;
|
||||
color: $friend-link-color;
|
||||
|
||||
[data-scheme=dark] & {
|
||||
color: $friend-link-color-dark;
|
||||
}
|
||||
&:hover {
|
||||
color: $friend-link-hover-color;
|
||||
[data-scheme=dark] & {
|
||||
color: $friend-link-hover-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// name 文字样式
|
||||
.friend-name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-style: normal;
|
||||
font-family: 'Comic Sans MS',cursive;
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
|
||||
// bio 文字样式
|
||||
.friend-bio {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-top: auto;
|
||||
|
||||
// font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
|
||||
font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
|
||||
color: $context-color;
|
||||
[data-scheme=dark] & {
|
||||
color: $context-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式页面，允许根据不同的尺寸调整样式
|
||||
@media screen and (max-width: 600px) {
|
||||
.friend-bio {
|
||||
display: none;
|
||||
|
||||
}
|
||||
.friend-link-avatar {
|
||||
width: 84px;
|
||||
margin: auto;
|
||||
}
|
||||
.friend-link-info {
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.friend-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@ -24,6 +24,7 @@
|
||||
@import "partials/layout/list.scss";
|
||||
@import "partials/layout/404.scss";
|
||||
@import "partials/layout/search.scss";
|
||||
@import "partials/layout/links.scss";
|
||||
|
||||
@import "custom.scss";
|
||||
|
||||
|
||||
27
exampleSite/content/page/links.md
Normal file
27
exampleSite/content/page/links.md
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "Links 友情链接"
|
||||
date: 2021-10-01T16:45:06+08:00
|
||||
slug: "links"
|
||||
layout: "links"
|
||||
license: false
|
||||
toc: false
|
||||
menu:
|
||||
main:
|
||||
weight: -80
|
||||
pre: link
|
||||
---
|
||||
|
||||
## Friends 👋
|
||||
|
||||
## Gurus 🧙♂️
|
||||
|
||||
{{< friend name="阮一峰 Ruan YiFeng" url="https://ruanyifeng.com/blog/" avatar="https://avatars.githubusercontent.com/u/905434?v=4" bio="阮一峰的网络日志" >}}
|
||||
|
||||
{{< friend name="Jimmy Cai" url="https://jimmycai.com/" avatar="https://res.cloudinary.com/jimmycai/image/upload/c_scale,f_auto,w_100/avatar.png" bio="Creator of the Hugo Theme Stack" >}}
|
||||
|
||||
## Following 👏
|
||||
|
||||
{{< friend name="QIN2DIM" url="https://blog.echosec.top/" avatar="https://blog.echosec.top/img/avatar_hucbf8bd4bfa74058ea1e98b53d7f2b899_167480_300x0_resize_box_3.png" bio="A Creator from China." >}}
|
||||
|
||||
{{< friend name="BeiYu" url="https://www.bj-yan.top/" avatar="https://avatars.githubusercontent.com/u/44976445" bio="北屿小智障！" >}}
|
||||
|
||||
12
layouts/shortcodes/friend.html
Normal file
12
layouts/shortcodes/friend.html
Normal file
@ -0,0 +1,12 @@
|
||||
<a target="_blank" href={{ .Get "url" }} title={{ .Get "name" }} class="friend-link">
|
||||
<div class="friend-link-div">
|
||||
<div class="friend-link-avatar">
|
||||
<img class="friend-avatar" src={{ .Get "avatar" }} />
|
||||
</div>
|
||||
<div class="friend-link-info">
|
||||
<i class="fa fa-link" aria-hidden="true"></i>
|
||||
<i class="friend-name">{{ .Get "name" }}</i>
|
||||
<p class="friend-bio">{{ .Get "bio" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
Loading…
Reference in New Issue
Block a user