lensfrex
/
hexo-theme-yorha
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

.

Browse Source
main
lensfrex 1 year ago
parent 4bfb0a9360
commit 56283588c3
Signed by: lensfrex
GPG Key ID: 947ADABD8533C476
7 changed files with 103 additions and 87 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      _config.yml
  2. 14
      layout/includes/_partials/button.pug
  3. 5
      layout/includes/_partials/header.pug
  4. 10
      layout/includes/layout.pug
  5. 130
      source/css/_partials/button.styl
  6. 18
      source/css/common.styl
  7. 9
      source/img/svg.svg

2
_config.yml
Unescape View File

@ -6,7 +6,7 @@ language: zh-cn
menu:
首页: /
存档: /archives
扩展: /extends
扩展: https://huhu.ciduid.top
nginx文档: /nginx-docs
IPV6: /ipv6
传送门: /teleport-public

14
layout/includes/_partials/button.pug
Unescape View File

@ -1,8 +1,10 @@
mixin button (target_href, active, text)
.button-component
.button-component-box
.button-container
a.button-anchor(href=target_href)
.button-anchor-box
.button-item-icon
= text
.button-container
a.button-anchor(
href=active ? undefined : target_href
class=active ? 'active' : ''
)
.button-anchor-box
.button-icon
= text

5
layout/includes/_partials/header.pug
Unescape View File

@ -4,4 +4,7 @@ include ./button.pug
.menu-items-container
include ./left_declaration.pug
each target, name in theme.menu
+button(target, true, name)
- var targetPath = target.substr(1)
- var currPath = page.path
- var active = (!is_home() && targetPath === '') ? false : currPath.startsWith(targetPath)
+button(target, active, name)

10
layout/includes/layout.pug
Unescape View File

@ -8,7 +8,7 @@
- pageTitle += ' [ ' + config.title + ' ]'
doctype html
html(lang='zh-cn')
html(lang=config.language)
head
meta(charset='UTF-8')
title= pageTitle
@ -21,16 +21,16 @@ html(lang='zh-cn')
header#header.header
.header-box
include ./_partials/header.pug
hr
.bottom-declaration
.bottom-declaration
.bottom-declaration-line
.bottom-declaration-dotted
main#main.main
.main-box
#content.content
block content
footer#footer.footer
.footer-box
include ./_partials/footer.pug

130
source/css/_partials/button.styl
Unescape View File

@ -1,74 +1,72 @@
.button-component
width: 100%
.button-component-box
.button-container
padding: 0px;
width: 100%;
height: 100%;
background-color: transparent;
.button-container
a.active
background-position: -100% center;
padding-bottom: 1.75rem;
color: rgb(180, 175, 154) !important;
&:hover::before
content: none !important;
&:hover::after
content: none !important;
.button-anchor-box .button-icon
background-position: -100% center;
a.button-anchor
text-decoration: none;
display: flex;
flex-direction: column;
gap: 5px;
border: none;
a.button-anchor
font-size: 1rem;
height: 100%;
color: rgb(87, 84, 74);
align-items: flex-start;
background-image: linear-gradient(90deg, rgb(180, 175, 154) 50%, rgb(180, 175, 154) 50%, rgb(87, 84, 74) 50%, rgb(87, 84, 74) 100%);
background-size: 200%;
transition: all 0.2s linear 0s;
cursor: default;
&:hover
background-position: -100% center;
color: rgb(180, 175, 154);
// line over the button
&::before
background-color: rgb(87, 84, 74);
transition: all 0.2s ease 0s;
&:hover::before
height: 2px;
z-index: -1;
width: 100%;
text-decoration: none;
display: flex;
flex-direction: column;
color: rgb(87, 84, 74);
align-items: flex-start;
background-image: linear-gradient(90deg, rgb(180, 175, 154) 50%, rgb(180, 175, 154) 50%, rgb(87, 84, 74) 50%, rgb(87, 84, 74) 100%);
background-size: 200%;
transition: all 0.2s linear 0s;
z-index: 2;
&:hover
background-position: -100% center;
color: rgb(180, 175, 154);
content: "";
transform: translate(0px, -8px);
pointer-events: none;
// line over the button
&::before
background-color: rgb(87, 84, 74);
transition: all 0.2s ease 0s;
&:hover::before
height: 2px;
z-index: -1;
width: 100%;
content: "";
transform: translate(0px, -8px);
pointer-events: none;
// line under the button
&::after
background-color: rgb(87, 84, 74);
transition: all 0.2s ease 0s;
&:hover::after
height: 2px;
z-index: -1;
width: 100%;
content: "";
transform: translate(0px, 8px);
pointer-events: none;
// line under the button
&::after
background-color: rgb(87, 84, 74);
transition: all 0.2s ease 0s;
&:hover::after
height: 2px;
z-index: -1;
width: 100%;
content: "";
transform: translate(0px, 8px);
pointer-events: none;
&:hover .button-anchor-box .button-icon
background-position: -100% center;
.button-anchor-box
padding: 8px;
display: flex;
gap: 10px;
-webkit-box-align: center;
align-items: center;
font-family: Manrope, sans-serif;
font-weight: 500;
font-size: 18px;
.button-icon
width: 5%;
height: 5%;
min-width: 20px;
min-height: 20px;
background-image: linear-gradient(90deg, rgb(87, 84, 74) 50%, rgb(87, 84, 74) 50%, rgb(218, 212, 187) 50%, rgb(218, 212, 187) 100%);
background-size: 200%;
transition: all 0.1s linear 0s;
.button-anchor-box
padding: 10px;
display: flex;
flex-direction: row;
gap: 10px;
-webkit-box-align: center;
align-items: center;
color: inherit;
font-family: Manrope, sans-serif;
font-weight: 500;
font-size: 18px;
.button-item-icon
width: 5%;
height: 5%;
min-width: 20px;
min-height: 20px;
background-image: linear-gradient(90deg, rgb(87, 84, 74) 50%, rgb(87, 84, 74) 50%, rgb(218, 212, 187) 50%, rgb(218, 212, 187) 100%);
background-size: 200%;
transition: all 0.1s linear 0s;
&:hover .button-anchor-box .button-item-icon
background-position: -100% center;

18
source/css/common.styl
Unescape View File

@ -6,19 +6,23 @@ body
linear-gradient(90deg, #c6c2a5 2px, rgba(255 255 255 0) 0),
linear-gradient(180deg, #c6c2a5 2px, rgb(209 205 178) 0);
background-size: .4rem .4rem
margin: 0
#container
padding: 1.5% 2% 2% 2%
hr
border: 1.3px solid #000;
margin-left: -4.4%;
margin-right: 4%;
.bottom-declaration
// container左右各有2%的padding
// 要突破这个container，所以要先往左边拉2%，然后width+=2%*2，也就是104%
margin-left: -2%;
margin-top: 1.5em;
width: 107%;
.bottom-declaration
width: 104%;
.bottom-declaration-line
border: 1.3px solid #000;
.bottom-declaration-dotted
background-image: linear-gradient(90deg,#333 14%,hsla(0,0%,100%,0) 0);
background-repeat: repeat-x;
background-size: 72px 4px;
background-size: 100px 4px;
width: 100%;
height: 4px;

9
source/img/svg.svg
Unescape View File

@ -0,0 +1,9 @@
<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<ellipse stroke="#000" ry="32" rx="32" id="svg_2" cy="65.72726" cx="126.1818" fill="#000000"/>
<ellipse stroke="#000" ry="32" rx="32" id="svg_3" cy="182.72726" cx="179.1818" fill="#000000"/>
<ellipse stroke="#000" ry="32" rx="32" id="svg_4" cy="182.72726" cx="78.1818" fill="#000000"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 401 B

Write Preview
Loading…
Cancel
Save