lensfrex 1 year ago
parent 4bfb0a9360
commit 56283588c3
Signed by: lensfrex
GPG Key ID: 947ADABD8533C476
  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

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

@ -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

@ -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)

@ -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

@ -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;

@ -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
// container2%padding
// container2%width+=2%*2104%
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;

@ -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>

After

Width:  |  Height:  |  Size: 401 B

Loading…
Cancel
Save