From ab6935d372f76a56aa91318ca36be127abe78f88 Mon Sep 17 00:00:00 2001 From: jmal Date: Fri, 6 Nov 2020 18:02:03 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E7=BD=91=E7=AB=99?= =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/article.scss | 18 ++- src/styles/markdown.scss | 92 ++++++++++++++- src/views/public/article/ArticleTop.vue | 3 +- src/views/public/article/SidebarNav.vue | 59 ++++++++++ src/views/public/article/all.min.css | 5 - src/views/public/article/index.vue | 101 +++++++++-------- src/views/public/articles/index.vue | 124 +++++++++++---------- src/views/setting/articles/blogManager.vue | 2 +- 8 files changed, 280 insertions(+), 124 deletions(-) create mode 100644 src/views/public/article/SidebarNav.vue delete mode 100644 src/views/public/article/all.min.css diff --git a/src/styles/article.scss b/src/styles/article.scss index 8733ad0..1537d29 100644 --- a/src/styles/article.scss +++ b/src/styles/article.scss @@ -3,6 +3,7 @@ backdrop-filter: saturate(180%) blur(1px); background-color: rgba(255,255,255,0.5); color: #272936; + z-index: 999; } .article-header { height: 70vh; @@ -80,18 +81,27 @@ } } -@media screen and (max-width: 759px) { +@media screen and (max-width: 768px) { .blog-title { font-size: 1.75rem; font-weight: 400; margin-bottom: .5rem; } + + .cover-wrapper .cover .cover-body { + padding-bottom: 68px; + .title { + font-size: 2rem; + font-weight: 400; + } + } + + .article-header .inner { + padding-bottom: 80px; + } } @media (min-width: 768px){ - .article-header .inner { - padding-top: 3.75rem; - } .navbar>.container-fluid { max-width: 720px; } diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss index cdd3af0..8e3cea2 100644 --- a/src/styles/markdown.scss +++ b/src/styles/markdown.scss @@ -28,6 +28,11 @@ background: -webkit-linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important; background: linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important; } + +.nav-link-label { + margin-left: 0.25rem; +} + /deep/ #top { padding: .75rem 1rem; line-height: 2; @@ -36,7 +41,6 @@ position: fixed; top: 0; z-index: 891; - display: none; /* border-bottom: 1px solid #201c29; */ -webkit-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; @@ -87,9 +91,6 @@ flex-wrap: wrap; .nav-item { margin: 0 10px; - .nav-link-label { - margin-left: 0.25rem; - } } } .side-toolbar-list { @@ -660,9 +661,92 @@ .pre-numbering { } +#toggle-nav { + display: none; + position: fixed; + top: .625rem; + left: .625rem; + z-index: 891; + -webkit-transition: 0.5s ease all; + -moz-transition: 0.5s ease all; + -ms-transition: 0.5s ease all; + -o-transition: 0.5s ease all; + transition: 0.5s ease all; +} + +#sidebar-nav { + width: 20rem; + height: 100%; + position: absolute; + left: -20rem; + top: 0; + bottom: 0; + overflow-y: auto; + overflow-x: hidden; + padding-bottom: 6.25rem; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + -webkit-transition: 0.5s ease all; + -moz-transition: 0.5s ease all; + -ms-transition: 0.5s ease all; + -o-transition: 0.5s ease all; + transition: 0.5s ease all; + .author { + text-align: center; + padding-top: 2.5rem; + padding-bottom: 2.5rem; + min-width: 12.5rem; + img { + border-radius: 7rem; + width: 7rem; + height: 7rem; + } + } + .menu { + margin-top: 1.875rem; + li a { + color: #333; + padding: 0.375rem 1.75rem; + position: relative; + line-height: 2.25rem; + display: block; + font-size: 1.25rem; + text-align: center; + font-weight: 300; + -webkit-transition: color 0.2s linear; + -moz-transition: color 0.2s linear; + -ms-transition: color 0.2s linear; + -o-transition: color 0.2s linear; + transition: color 0.2s linear; + } + li a:hover{ + background: #efefef; + color: #333; + } + } +} + +#body { + overflow: hidden; + -webkit-transition: 0.5s ease all; + -moz-transition: 0.5s ease all; + -ms-transition: 0.5s ease all; + -o-transition: 0.5s ease all; + transition: 0.5s ease all; +} + + @media screen and (max-width: 425px){ .pre-numbering { display: none; } } +@media (max-width: 767.98px) { + .animateIn { + transform: translateY(-100%); + } + #toggle-nav { + display: block; + } +} diff --git a/src/views/public/article/ArticleTop.vue b/src/views/public/article/ArticleTop.vue index 973766b..67aac43 100644 --- a/src/views/public/article/ArticleTop.vue +++ b/src/views/public/article/ArticleTop.vue @@ -4,7 +4,6 @@ {{setting.siteName}}