diff --git a/themes/butterfly/layout/includes/header/menu_item.pug b/themes/butterfly/layout/includes/header/menu_item.pug index 18544f1..6302ee4 100644 --- a/themes/butterfly/layout/includes/header/menu_item.pug +++ b/themes/butterfly/layout/includes/header/menu_item.pug @@ -2,7 +2,7 @@ if theme.menu .menus_items each value, label in theme.menu if typeof value !== 'object' - .icat_menus_item + .menus_item - const [link, icon] = value.split('||').map(part => trim(part)) a.site-page(href=url_for(link)) if icon diff --git a/themes/butterfly/layout/includes/header/nav.pug b/themes/butterfly/layout/includes/header/nav.pug index 23bf46e..12c198f 100644 --- a/themes/butterfly/layout/includes/header/nav.pug +++ b/themes/butterfly/layout/includes/header/nav.pug @@ -10,7 +10,7 @@ nav#nav span.site-name=(page.title || config.title) span.site-name i.fa-solid.fa-circle-arrow-left - span= ' ' + _p('post.back_to_home') + span= '' + _p('post.back_to_home') #menus //- if theme.search.use diff --git a/themes/butterfly/source/css/_layout/head.styl b/themes/butterfly/source/css/_layout/head.styl index 6c4d2a4..16f7d51 100644 --- a/themes/butterfly/source/css/_layout/head.styl +++ b/themes/butterfly/source/css/_layout/head.styl @@ -338,7 +338,7 @@ .menus_items display: inline - .icat_menus_item + .menus_item position: relative display: inline-block padding: 0 0 0 14px diff --git a/themes/butterfly/source/css/style.css b/themes/butterfly/source/css/style.css index 5ffe7d1..28c762f 100644 --- a/themes/butterfly/source/css/style.css +++ b/themes/butterfly/source/css/style.css @@ -383,228 +383,67 @@ background: url(https://free.picui.cn/free/2025/08/10/689845496a283.png) no-repeat center center; background-size: cover; } + #nav-right{ - flex:1 1 auto; - justify-content: flex-end; - margin-left: auto; - display: flex; - flex-wrap:nowrap; + flex:1 1 auto; + justify-content: flex-end; + margin-left: auto; + display: flex; + flex-wrap:nowrap; } -/* 菜单栏居中 */ + +/* 导航栏居中 */ -#blog-info a:hover { - background: var(--icat-blue); - transition: background .3s; - border-radius: 8px; +#sidebar #sidebar-menus .menus_items .menus_item { + margin: 10px 0; } -#blog-info a:hover .site-name { - color: var(--icat-blue) !important; - position: relative; - text-shadow: 0 0 transparent; -} -#blog-info a:hover .site-name:after { - position: absolute; - display: flex; - top: 0; - width: 100%; - height: 100%; - content: "\e03a"; - font-family: "iconfont" !important; - font-size: 22px; - line-height: 1; - color: var(--icat-white); - justify-content: center; - align-items: center; -} -@media screen and (max-width: 768px) { - #blog-info a:hover { - background: 0; - transition: unset; - border-radius: 0; - } - #blog-info a:hover .site-name { - color: var(--icat-blue) !important; - position: relative; - text-shadow: 2px 2px 4px rgba(0,0,0,0.15); - } - #blog-info a:hover .site-name:after { - display: none; - } -} -/* 主页按钮 */ - -#nav.show { - display: flex; - justify-content: center; -} -#nav .site-page { - padding-bottom: 14px; -} -#page-header.not-top-img #nav { - display: flex; - justify-content: center; - border-bottom: 1px solid var(--icat-secondbg); -} -#nav-group { - width: 1400px; - display: flex; - align-items: center; - padding: 0 0.6rem; - margin-left: auto; - margin-right: auto; -} -/* 顶部栏宽度定义 */ - -#nav .menus_items .menus_item .menus_item_child, #nav .menus_items .icat_menus_item .menus_item_child { - margin-top: 14px; - border: 1px solid var(--icat-secondbg); -} -#nav .menus_items .menus_item .menus_item_child li a, #nav .menus_items .icat_menus_item .menus_item_child li a { - padding: 8px 34px; - text-align: center; -} -#travellings { - padding: 0 14px 0 0; -} - -/* PC菜单栏美化 */ -@supports not (selector(::-webkit-scrollbar)) { - html { - scrollbar-width: auto; - scrollbar-color: #bbb #bbb; - } -} - -#sidebar #sidebar-menus .menus_items .menus_item_child { - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - -o-box-orient: horizontal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-lines: multiple; - -moz-box-lines: multiple; - -o-box-lines: multiple; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -#sidebar #sidebar-menus .menus_items a.site-page, #sidebar .menus_item ul { +#sidebar #sidebar-menus .menus_items a.site-page { padding-left: 0; } -#sidebar #sidebar-menus .menus_item_child li { - width: calc(50% - 8px); - margin: 4px; -} -#sidebar #sidebar-menus .menus_item_child .site-page.child { - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -o-box-orient: vertical; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -moz-box-align: center; - -o-box-align: center; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; - padding: 8px; - border-radius: 12px; +#sidebar #sidebar-menus .menus_items .site-page { + position: relative; + display: block; + padding: 6px 30px 6px 22px; + color: var(--font-color); + font-size: 1.15em; border: var(--style-border-always); background: var(--icat-card-bg); font-size: 14px; -} -#nav.hide-menu #toggle-menu { - padding: 0 0 0 12px; -} -#sidebar #sidebar-menus .icat_menus_item .site-page { - text-align: center; - margin: 4px; - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -o-box-orient: vertical; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -moz-box-align: center; - -o-box-align: center; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; - padding: 8px 0; border-radius: 12px; - font-size: 14px; } -@media screen and (max-width: 768px) { - #sidebar #sidebar-menus .menus_items .site-page.group > i:last-child { - margin-top: 4px; - } - #sidebar #sidebar-menus .menus_items .icat_menus_item .site-page i:first-child { - text-align: center; - padding-left: 0; - } +#sidebar #sidebar-menus .menus_items .site-page i:first-child { + text-align: left; + padding-left: 10px; } -/* 子菜单美化 */ -#sidebar .open > .avatar-img img { - height: 100px; - width: 100px; - border-radius: 50%; -} -#sidebar .open > .avatar-img img { - border: 5px #fff solid; -} -#sidebar .open > .avatar-img::before { - bottom: 8px; - height: 12px; - width: 12px; -} -#sidebar .open > .avatar-img::before { - content: ''; +#nav #menus { + display: flex; + justify-content: center; + width: 100%; position: absolute; - left: 50%; - transform: translate(65%); - background: #6bdf8f; - border: 5px solid #fff; - border-radius: 50%; - transition: filter 375ms ease-in .2s,transform .3s; - z-index: 2; + left: 0; + margin: 0; + transform: translateZ(0); } -/* 头像美化 */ - -#sidebar #sidebar-menus .sidebar-site-data { - padding: 0; - margin-left: 10px; - background: var(--icat-card-bg); - border-radius: 12px; - border: var(--style-border-always); +#nav #blog-info { + flex-wrap: nowrap; + display: flex; + align-items: center; + z-index: 102; + max-width: fit-content; } -@media screen and (max-width: 768px) { - .site-data { - width: 94%; +@media screen and (max-width: 900px) { + #nav { + padding: 0 15px; + } + #nav-group { + padding: 0 0.2rem; + } + #rightside { + right: -42px; } } -/* 侧边栏的统计栏美化 */ +/* IPAD菜单栏调整 */ /*https://codepen.io/poojanahelia/pen/Exabvdy*/