From 56283588c3411f5756ca037523bc154392817fa2 Mon Sep 17 00:00:00 2001 From: lensferno Date: Sat, 24 Jun 2023 21:46:10 +0800 Subject: [PATCH] . --- _config.yml | 2 +- layout/includes/_partials/button.pug | 14 +-- layout/includes/_partials/header.pug | 5 +- layout/includes/layout.pug | 10 +- source/css/_partials/button.styl | 132 +++++++++++++-------------- source/css/common.styl | 18 ++-- source/img/svg.svg | 9 ++ 7 files changed, 103 insertions(+), 87 deletions(-) create mode 100644 source/img/svg.svg diff --git a/_config.yml b/_config.yml index 59a117a..5b72e74 100644 --- a/_config.yml +++ b/_config.yml @@ -6,7 +6,7 @@ language: zh-cn menu: 首页: / 存档: /archives - 扩展: /extends + 扩展: https://huhu.ciduid.top nginx文档: /nginx-docs IPV6: /ipv6 传送门: /teleport-public diff --git a/layout/includes/_partials/button.pug b/layout/includes/_partials/button.pug index 367fd38..38252c1 100644 --- a/layout/includes/_partials/button.pug +++ b/layout/includes/_partials/button.pug @@ -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 diff --git a/layout/includes/_partials/header.pug b/layout/includes/_partials/header.pug index 94aa764..1768ed9 100644 --- a/layout/includes/_partials/header.pug +++ b/layout/includes/_partials/header.pug @@ -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) diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug index b46457f..b30a1b2 100644 --- a/layout/includes/layout.pug +++ b/layout/includes/layout.pug @@ -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,15 +21,15 @@ 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 diff --git a/source/css/_partials/button.styl b/source/css/_partials/button.styl index 2f31918..46d63bc 100644 --- a/source/css/_partials/button.styl +++ b/source/css/_partials/button.styl @@ -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 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 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; + &: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; diff --git a/source/css/common.styl b/source/css/common.styl index e8f04e4..0a96419 100644 --- a/source/css/common.styl +++ b/source/css/common.styl @@ -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; diff --git a/source/img/svg.svg b/source/img/svg.svg new file mode 100644 index 0000000..eddcff5 --- /dev/null +++ b/source/img/svg.svg @@ -0,0 +1,9 @@ + + + + Layer 1 + + + + + \ No newline at end of file