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: menu:
首页: / 首页: /
存档: /archives 存档: /archives
扩展: /extends 扩展: https://huhu.ciduid.top
nginx文档: /nginx-docs nginx文档: /nginx-docs
IPV6: /ipv6 IPV6: /ipv6
传送门: /teleport-public 传送门: /teleport-public

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

@ -1,8 +1,10 @@
mixin button (target_href, active, text) mixin button (target_href, active, text)
.button-component .button-component
.button-component-box .button-container
.button-container a.button-anchor(
a.button-anchor(href=target_href) href=active ? undefined : target_href
.button-anchor-box class=active ? 'active' : ''
.button-item-icon )
= text .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 .menu-items-container
include ./left_declaration.pug include ./left_declaration.pug
each target, name in theme.menu 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 + ' ]' - pageTitle += ' [ ' + config.title + ' ]'
doctype html doctype html
html(lang='zh-cn') html(lang=config.language)
head head
meta(charset='UTF-8') meta(charset='UTF-8')
title= pageTitle title= pageTitle
@ -21,16 +21,16 @@ html(lang='zh-cn')
header#header.header header#header.header
.header-box .header-box
include ./_partials/header.pug include ./_partials/header.pug
hr
.bottom-declaration .bottom-declaration
.bottom-declaration-line
.bottom-declaration-dotted
main#main.main main#main.main
.main-box .main-box
#content.content #content.content
block content block content
footer#footer.footer footer#footer.footer
.footer-box .footer-box
include ./_partials/footer.pug include ./_partials/footer.pug

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

@ -1,74 +1,72 @@
.button-component .button-component
width: 100% width: 100%
.button-component-box .button-container
.button-container a.active
padding: 0px; background-position: -100% center;
width: 100%; padding-bottom: 1.75rem;
height: 100%; color: rgb(180, 175, 154) !important;
background-color: transparent; &: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; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; color: rgb(87, 84, 74);
border: none; align-items: flex-start;
a.button-anchor 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%);
font-size: 1rem; background-size: 200%;
height: 100%; 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%; width: 100%;
text-decoration: none; content: "";
display: flex; transform: translate(0px, -8px);
flex-direction: column; pointer-events: none;
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);
// line over the button // line under the button
&::before &::after
background-color: rgb(87, 84, 74); background-color: rgb(87, 84, 74);
transition: all 0.2s ease 0s; transition: all 0.2s ease 0s;
&:hover::before &:hover::after
height: 2px; height: 2px;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
content: ""; content: "";
transform: translate(0px, -8px); transform: translate(0px, 8px);
pointer-events: none; pointer-events: none;
// line under the button &:hover .button-anchor-box .button-icon
&::after background-position: -100% center;
background-color: rgb(87, 84, 74); .button-anchor-box
transition: all 0.2s ease 0s; padding: 8px;
&:hover::after display: flex;
height: 2px; gap: 10px;
z-index: -1; -webkit-box-align: center;
width: 100%; align-items: center;
content: ""; font-family: Manrope, sans-serif;
transform: translate(0px, 8px); font-weight: 500;
pointer-events: none; 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(90deg, #c6c2a5 2px, rgba(255 255 255 0) 0),
linear-gradient(180deg, #c6c2a5 2px, rgb(209 205 178) 0); linear-gradient(180deg, #c6c2a5 2px, rgb(209 205 178) 0);
background-size: .4rem .4rem background-size: .4rem .4rem
margin: 0
#container #container
padding: 1.5% 2% 2% 2% padding: 1.5% 2% 2% 2%
hr
border: 1.3px solid #000; .bottom-declaration
margin-left: -4.4%; // container左右各有2%的padding
margin-right: 4%; // 要突破这个container，所以要先往左边拉2%，然后width+=2%*2，也就是104%
margin-left: -2%;
margin-top: 1.5em; margin-top: 1.5em;
width: 107%; width: 104%;
.bottom-declaration .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-image: linear-gradient(90deg,#333 14%,hsla(0,0%,100%,0) 0);
background-repeat: repeat-x; background-repeat: repeat-x;
background-size: 72px 4px; background-size: 100px 4px;
width: 100%; width: 100%;
height: 4px; 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