From 2338da969d3bc1b2bc26df9f7192dd20a0906c5b Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Sun, 31 May 2020 23:06:44 +0800 Subject: Switch to prism.js --- assets/scss/_fuji-style/_components.scss | 35 +++++++ assets/scss/_fuji-style/_content.scss | 161 +++++++++++++++++++++++++++++++ assets/scss/_fuji-style/_footer.scss | 10 ++ assets/scss/_fuji-style/_header.scss | 25 +++++ assets/scss/_fuji-style/_sidebar.scss | 69 +++++++++++++ 5 files changed, 300 insertions(+) create mode 100644 assets/scss/_fuji-style/_components.scss create mode 100644 assets/scss/_fuji-style/_content.scss create mode 100644 assets/scss/_fuji-style/_footer.scss create mode 100644 assets/scss/_fuji-style/_header.scss create mode 100644 assets/scss/_fuji-style/_sidebar.scss (limited to 'assets/scss/_fuji-style') diff --git a/assets/scss/_fuji-style/_components.scss b/assets/scss/_fuji-style/_components.scss new file mode 100644 index 0000000..429d869 --- /dev/null +++ b/assets/scss/_fuji-style/_components.scss @@ -0,0 +1,35 @@ +.btn { + position: fixed; + right: 1.5rem; + bottom: 1.5rem; + width: 2.5rem; + height: 5rem; + display: flex; + justify-content: space-between; + flex-direction: column; + + div { + flex: 0 1 auto; + width: 2.5rem; + height: 2.5rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + + &:first-child { + border-radius: 0.25rem 0.25rem 0 0; + font-size: 1.25rem; + } + + &:last-child { + border-radius: 0 0 0.25rem 0.25rem; + font-size: 1.3rem; + } + } +} + +#post-aplayer { + margin: 0 0.125rem 1.25rem 0.125rem; + font-family: inherit; +} diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss new file mode 100644 index 0000000..fcb4f3b --- /dev/null +++ b/assets/scss/_fuji-style/_content.scss @@ -0,0 +1,161 @@ +.content { + padding: 1.5rem 1.5rem 0 1.5rem; // same as sidebar +} + +.post { + // paddings between posts + &:not(:first-child) { + padding: 1.5rem 0; + } + + &:first-child { + padding: 0 0 1.5rem 0; + } +} + +.post-title { + font-size: $font-size-1; +} + +.post-meta { + margin: 0.5rem 0.25rem 1rem 0.25rem; // little space + white-space: nowrap; + overflow-x: scroll; + + time, + span:not(:last-child) { + padding-right: 1.5rem; + } + + &::-webkit-scrollbar { + display: none; // WebKit + } + + scrollbar-width: none; // Firefox + -ms-overflow-style: none; // Microsoft + + i { + font-size: 0.875rem; + } +} + +.post-summary { + margin: 0 0.1rem; // little space + + p:last-child { + margin-bottom: 0; // remove margin-bottom of last para in summary + } + + h1, + h2, + h3, + h4, + h5, + h6 { + display: none; // hide h1-h6 in post summary + } +} + +.post-meta-archive { + margin: 0.5rem 0.25rem 0 0.25rem; // little space + white-space: nowrap; + overflow-x: scroll; + + time, + span:not(:last-child) { + padding-right: 1.5rem; + } + + &::-webkit-scrollbar { + display: none; // WebKit + } + + scrollbar-width: none; // Firefox + -ms-overflow-style: none; // Microsoft +} + +.pagination { + text-align: center; + padding: 1rem 0; + font-size: 1.125rem; + + & > div { + display: inline-block; + width: 2rem; + height: 2rem; + + &.pag-item { + padding: 0 0.25rem; + + a { + vertical-align: middle; + } + } + } + + i { + padding: 0 0.25rem; + vertical-align: middle; + } +} + +.page-info { + padding: 0 0.1rem 1.5rem 0.1rem; +} + +// single page part +article { + padding-bottom: 1.5rem; + + .post-content { + margin: 1.25rem 0.1rem 0 0.1rem; + } +} + +.license { + margin-bottom: 1.5rem; +} + +.post-loading { + margin: 0 0 1.5rem 0; + padding-top: 1.5rem; + text-align: center; + + i { + font-size: 1.25rem; + } + + p { + margin: 0.5rem 0 0 0; + } +} + +.markdown-body { + h1 { + font-size: $font-size-1; + margin-top: 1.5rem; + } + + h2 { + font-size: $font-size-2; + margin-top: 1.375rem; + } + + h3 { + font-size: $font-size-3; + margin-top: 1.25rem; + } + + h4 { + margin-top: 1.25rem; + } + + ul { + list-style-type: circle; + } + + img { + max-width: 98%; + margin: 0 0.25rem 0.5rem 0.25rem; + } +} diff --git a/assets/scss/_fuji-style/_footer.scss b/assets/scss/_fuji-style/_footer.scss new file mode 100644 index 0000000..ab1bde1 --- /dev/null +++ b/assets/scss/_fuji-style/_footer.scss @@ -0,0 +1,10 @@ +footer { + .footer { + padding: 2rem 1.5rem; + text-align: center; + + i { + font-size: 0.875rem; + } + } +} diff --git a/assets/scss/_fuji-style/_header.scss b/assets/scss/_fuji-style/_header.scss new file mode 100644 index 0000000..29afe07 --- /dev/null +++ b/assets/scss/_fuji-style/_header.scss @@ -0,0 +1,25 @@ +header { + .header { + padding: 1.75rem 1.5rem 2rem 1.5rem; + } + + .title-main { + font-size: 2.5rem; + font-family: 'Product Sans', -apple-system, BlinkMacSystemFont, monospace; + font-weight: 700; + white-space: nowrap; + } + + .title-sub { + margin: 0 0.1rem; + display: block; + white-space: nowrap; + + &::-webkit-scrollbar { + display: none; // WebKit + } + + scrollbar-width: none; // Firefox + -ms-overflow-style: none; // Microsoft + } +} diff --git a/assets/scss/_fuji-style/_sidebar.scss b/assets/scss/_fuji-style/_sidebar.scss new file mode 100644 index 0000000..132a22f --- /dev/null +++ b/assets/scss/_fuji-style/_sidebar.scss @@ -0,0 +1,69 @@ +.sidebar { + padding: 1.5rem 1.5rem 1.5rem 0; // no left padding on big screen +} + +.sidebar-item { + &:not(:last-child) { + margin-bottom: 1rem; // space betreen sidebar items + } + + h3 { + margin-bottom: 0.25rem; // space betreen head3 & lists + } + + ul { + list-style-type: none; + margin: 0 0.1rem; // little space + } + + & > div, + & > nav { + margin: 0 0.1rem; // little space + } + + & > img { + margin: 0.5rem 0.25rem 0 0.25rem; + width: 100%; + border-radius: 2px; + } +} + +@media screen and (max-width: $width-md) { + .sidebar { + padding: 1.5rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + } + + .sidebar-item { + width: 40%; // max 2 modules per line + + // space only at first 2 modules + .sidebar-pages, + .sidebar-tags { + margin-bottom: 1rem; + } + + .sidebar-links, + .sidebar-bgm { + margin-bottom: 0; + } + + & > img { + margin: 0.5rem 0.25rem 0 0.25rem; + width: 75%; + border-radius: 0.25rem; + } + } +} + +// single page part +.sidebar-toc { + ul ul { + font-size: 0.875rem; + padding-left: 0.5rem; + margin-bottom: 0.25rem; + } +} -- cgit v1.2.3 From da23836b5dfe2d39cda0d89768dadd59b22a9baf Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Mon, 1 Jun 2020 21:49:10 +0800 Subject: DisqusJS support added --- assets/scss/_fuji-style/_content.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'assets/scss/_fuji-style') diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss index fcb4f3b..e45658b 100644 --- a/assets/scss/_fuji-style/_content.scss +++ b/assets/scss/_fuji-style/_content.scss @@ -159,3 +159,7 @@ article { margin: 0 0.25rem 0.5rem 0.25rem; } } + +#disqus_thread { + padding: 1.25rem 0; +} -- cgit v1.2.3 From 3df71601ae866aff9c2ae060ed1ac7407807fcc4 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Wed, 3 Jun 2020 13:58:49 +0800 Subject: New comment area & opt out of font awesome --- assets/scss/_fuji-style/_components.scss | 2 +- assets/scss/_fuji-style/_content.scss | 76 ++++++++++++++------------------ 2 files changed, 35 insertions(+), 43 deletions(-) (limited to 'assets/scss/_fuji-style') diff --git a/assets/scss/_fuji-style/_components.scss b/assets/scss/_fuji-style/_components.scss index 429d869..88af65a 100644 --- a/assets/scss/_fuji-style/_components.scss +++ b/assets/scss/_fuji-style/_components.scss @@ -24,7 +24,7 @@ &:last-child { border-radius: 0 0 0.25rem 0.25rem; - font-size: 1.3rem; + font-size: 1.5rem; } } } diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss index e45658b..92190a6 100644 --- a/assets/scss/_fuji-style/_content.scss +++ b/assets/scss/_fuji-style/_content.scss @@ -18,24 +18,18 @@ } .post-meta { - margin: 0.5rem 0.25rem 1rem 0.25rem; // little space - white-space: nowrap; - overflow-x: scroll; + display: flex; + align-items: center; + margin: 0.5rem 0.1rem 1rem 0.1rem; // little space + flex-wrap: wrap; - time, - span:not(:last-child) { - padding-right: 1.5rem; + span { + display: flex; + align-items: center; } - &::-webkit-scrollbar { - display: none; // WebKit - } - - scrollbar-width: none; // Firefox - -ms-overflow-style: none; // Microsoft - - i { - font-size: 0.875rem; + span:not(:last-child) { + padding-right: 1.5rem; } } @@ -57,46 +51,36 @@ } .post-meta-archive { - margin: 0.5rem 0.25rem 0 0.25rem; // little space - white-space: nowrap; - overflow-x: scroll; + display: flex; + align-items: center; + margin: 0.5rem 0.1rem 1rem 0.1rem; // little space + flex-wrap: wrap; - time, span:not(:last-child) { padding-right: 1.5rem; } - - &::-webkit-scrollbar { - display: none; // WebKit - } - - scrollbar-width: none; // Firefox - -ms-overflow-style: none; // Microsoft } .pagination { - text-align: center; - padding: 1rem 0; - font-size: 1.125rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + line-height: 1.25rem; + padding: 1.25rem 0; - & > div { - display: inline-block; + div { + display: flex; + align-items: center; + justify-content: center; width: 2rem; height: 2rem; - &.pag-item { - padding: 0 0.25rem; - - a { - vertical-align: middle; - } + a { + display: flex; + align-items: center; } } - - i { - padding: 0 0.25rem; - vertical-align: middle; - } } .page-info { @@ -160,6 +144,14 @@ article { } } +.post-comment { + span.post-comment-notloaded { + display: flex; + align-items: center; + justify-content: center; + } +} + #disqus_thread { padding: 1.25rem 0; } -- cgit v1.2.3 From 8e1c40916aa880388fbac104641f3e7c84335847 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Thu, 4 Jun 2020 18:10:44 +0800 Subject: Update metadata & fix comment checker --- assets/scss/_fuji-style/_content.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'assets/scss/_fuji-style') diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss index 92190a6..03add33 100644 --- a/assets/scss/_fuji-style/_content.scss +++ b/assets/scss/_fuji-style/_content.scss @@ -53,7 +53,7 @@ .post-meta-archive { display: flex; align-items: center; - margin: 0.5rem 0.1rem 1rem 0.1rem; // little space + margin: 0.5rem 0.1rem 0 0.1rem; // little space flex-wrap: wrap; span:not(:last-child) { -- cgit v1.2.3