提交 d3c46cf6 编写于 作者: EvanOne(文一)'s avatar EvanOne(文一)

refactor: Adjust class of the content in the site

上级 07efe131
......@@ -9,7 +9,7 @@
使用 `stun` 主题运行后,浏览器里显示:
`
n/layout.pug block content include ./_mixins/posts-sort.pug include ./_mixins/post-header.pug div.home-content.code-highlight if theme.post_list_paged.home include ./_components/recent-posts.pug include ./_components/pagination.pug else include ./_components/recent-posts.pug
n/layout.pug block content include ./_mixins/posts-sort.pug include ./_mixins/post-header.pug div.content.code-highlight if theme.post_list_paged.home include ./_components/recent-posts.pug include ./_components/pagination.pug else include ./_components/recent-posts.pug
`
原因是没有安装对 `pug` 的支持。文档和 READMD 都有提到:
......
......@@ -20,7 +20,8 @@ script.
var Stun = window.Stun || {};
var CONFIG = {
root: '!{ config.root }',
algolia: !{algolia},
algolia: !{ algolia },
fancybox: !{ theme.fancybox },
notification: {
copy_success: '!{ _p("notification.copy.success") }',
copy_error: '!{ _p("notification.copy.error") }'
......
......@@ -46,6 +46,9 @@ if theme.cdn && theme.cdn.css
if url
link(rel="stylesheet" href=url_for(url))
if theme.fancybox
link(rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css")
link(rel="stylesheet" href=`${url_for(theme.css)}/index.css?v=${stun_env("version")}`)
include ../_third-party/analytics/index.pug
......
if theme.gitment && theme.gitment.enable
div#comments.comments.main-content-layout
div#comments.comments.content
if theme.gitment.lazy
div#gitment-button(onclick="showGitment()")
!= _p("comment.gitment.button")
......@@ -7,13 +7,13 @@ if theme.gitment && theme.gitment.enable
else
div#gitment-container
else if theme.gitalk && theme.gitalk.enable
div#comments.comments.main-content-layout
div#comments.comments.content
div#gitalk-container
else if theme.livere && theme.livere.enable
div#comments.comments.main-content-layout
div#comments.comments.content
div#lv-container(data-id="city" data-uid=theme.livere.uid)
else if theme.disqus && theme.disqus.enable
div#comments.comments.main-content-layout
div#comments.comments.content
div#disqus_thread
else if theme.valine && theme.valine.enable
div#comments.comments.main-content-layout
div#comments.comments.content
......@@ -10,6 +10,9 @@ if theme.cdn && theme.cdn.js
if url
script(src=url_for(url))
if theme.fancybox
script(src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js")
if theme.canvas_ribbon && theme.canvas_ribbon.enable
- var ribbon = theme.canvas_ribbon;
script(src=theme.cdn.canvas_ribbon size=ribbon.size alpha=ribbon.alpha zIndex=ribbon.zIndex)
......
......@@ -3,7 +3,7 @@ extends ./_common/layout.pug
block content
include ./_mixins/posts-sort.pug
div.main-content-layout
div.content
div.archive-inner
if (site.posts.length === 0)
div.article-sort-title= _p("page.articles-empty")
......
......@@ -3,7 +3,7 @@ extends ./_common/layout.pug
block content
include ./_mixins/posts-sort.pug
div.main-content-layout
div.content
div.category-inner
div.article-sort-title= _p("page.categories") + " - " + page.category
+articleSort(page.posts)
......
......@@ -4,7 +4,7 @@ block content
include ./_mixins/posts-sort.pug
include ./_mixins/post-header.pug
div.home-content.code-highlight
div.content.home-content.code-highlight
if theme.post_list.paginate.home
include ./_components/recent-posts.pug
include ./_components/pagination.pug
......
......@@ -2,7 +2,7 @@ extends ./_common/layout.pug
block content
if (page.title === "tags")
div.tag-cloud.main-content-layout
div.content.tag-cloud
div.tag-cloud-title= _p("page.tags") + " - "
span.tag-cloud-num= site.tags.length
- var min_font = theme.tag_cloud ? theme.tag_cloud.min_size : 14
......@@ -11,13 +11,13 @@ block content
- var end_color = theme.tag_cloud ? theme.tag_cloud.end_color : "#1b9ef3"
div.tag-cloud-item!= tagcloud({min_font: min_font, max_font: max_font, amount: theme.tag_cloud.max_amount, color: true, start_color, end_color})
else if (page.title === "categories")
div.category.main-content
div.content.category
div.category-title= _p("page.categories") + " - "
span.category-num= site.categories.length
!= list_categories()
else if (page.title === "about")
div.about.main-content.code-highlight
div.content.headings.code-highlight
!= page.content
else
div.about.main-content.code-highlight
div.content.headings.code-highlight
!= page.content
......@@ -3,7 +3,7 @@ extends ./_common/layout.pug
block content
include ./_mixins/post-header.pug
div.main-content.code-highlight
div.content.headings.code-highlight
+postHeader(page)
div.post-body
......
......@@ -3,7 +3,7 @@ extends ./_common/layout.pug
block content
include ./_mixins/posts-sort.pug
div.main-content-layout
div.content
div.tag-inner
div.article-sort-title= _p("page.tags") + " - " + page.tag
+articleSort(page.posts)
......
......@@ -6,8 +6,7 @@
background-size: cover
if (hexo-config('footer.bg_image.enable'))
background-image: url(
hexo-config('footer.bg_image.url') || ' ')
background-image: url(hexo-config('footer.bg_image.url') || ' ')
a
clearAStyle()
......
$header-height = convert(
hexo-config('header.height') || '80vh')
$header-height = convert(hexo-config('header.height') || '80vh')
if (hexo-config('header.height'))
if (match('%', hexo-config('header.height')))
$header-height = unit(convert(
hexo-config('header.height')), 'vh')
$header-height = unit(convert(hexo-config('header.height')), 'vh')
#header
display: flex
......@@ -17,8 +15,8 @@ if (hexo-config('header.height'))
background-attachment: fixed
background-position: center
background-size: cover
flex-direction: column
transition: height .5s
flex-direction: column
$header-nav-color
.header-nav-menu a,
......@@ -32,13 +30,11 @@ $header-nav-color
&::after
color: $header-nav-link-hover-color
$header-nav-height = convert(
hexo-config('header.nav_height') || '50px')
$header-nav-height = convert(hexo-config('header.nav_height') || '50px')
if (hexo-config('header.nav_height'))
if (match('%', hexo-config('header.nav_height')))
$header-nav-height = unit(convert(
hexo-config('header.nav_height')), 'vh')
$header-nav-height = unit(convert(hexo-config('header.nav_height')), 'vh')
.header-nav
position: fixed
......@@ -89,17 +85,17 @@ $header-nav-item
span
float: left
margin: 0 1rem 0 0
a
clearAStyle()
display: block
text-decoration: none
transition: color .2s ease
@extend $header-nav-item
&.show
opacity: 1
visibility: visible
opacity: 1
.header-nav-search
float: right
......@@ -116,8 +112,7 @@ $header-nav-item
flex-direction: column
if (hexo-config('header.mask.enable'))
background-color: alpha(#000,
hexo-config('header.mask.opacity'))
background-color: alpha(#000, hexo-config('header.mask.opacity'))
.header-info-inner
display: flex
......
@import './sidebar.styl' if (hexo-config('sidebar.enable'))
@import './header.styl'
@import './main.styl'
@import './footer.styl'
@import './sidebar.styl' if hexo-config('sidebar.enable');
@import './post.styl'
@import './page.styl'
@import './notification.styl'
......
setUlStyle(content, hoverColor)
&::before
content: content
position: absolute
top: .04em
left: -1.5em
line-height: $line-height-base
color: $ul-list-color
transition: color .2s ease
transform: scale(.6)
@extend $font-face
&:hover
&::before
color: hoverColor
#container
display: flex
min-height: 100vh
......@@ -12,6 +28,7 @@
$content-position
margin: 0 auto
if (hexo-config('sidebar.enable'))
if (hexo-config('sidebar.position') == 'left')
$content-position
......@@ -20,9 +37,125 @@ if (hexo-config('sidebar.enable'))
$content-position
float: left
.home-content
font-size: $font-main-base
.headings
h1,
h2,
h3,
h4,
h5,
h6
position: relative
margin: 1.5rem 0 1rem
font-weight: $font-weight-bolder
line-height: $line-height-h
color: lighten($h-color, 15%)
cursor: pointer
if ($icon-h-link)
&:not(.post-title)::after
content: $icon-h-link
height: 100%
line-height: $line-height-h
color: $h-link-logo-color
opacity: 0
transition: opacity .1s ease
@extend $font-face
&:hover
&::after
opacity: 1
for size in 1 .. 6
h{size}
font-size: $h-font-size[size - 1]
&::after
margin-left: .8rem - .1 * size
.content
@extend $content-position
border-radius: 5px
padding: 2rem
font-size: $font-main-base
background-color: $white
& > :first-child
margin-top: 0
& > :last-child
margin-bottom: 0
img
max-width: 100%
vertical-align: convert(hexo-config('text_vertical_align_with_img') || 'bottom')
ul,
ol
margin: .5rem 0
padding-left: 2em
li
position: relative
if ($icon-ul-list-1 && ($icon-ul-list-2 && $icon-ul-list-3))
list-style-type: none
ul
li
setUlStyle($icon-ul-list-1, $ul-list-hover-color)
ul
li
setUlStyle($icon-ul-list-2, $ul-list-hover-color)
ul
li
setUlStyle($icon-ul-list-3, $ul-list-hover-color)
ol
counter-reset: ol-li
& > li
&::before
content: counter(ol-li) '.'
position: absolute
left: -1.5em
text-align: right
color: $blue-light
counter-increment: ol-li
blockquote
margin: 0 0 1rem
& > :first-child
margin-top: 0
& > :last-child
margin-bottom: 0
& + blockquote
padding-top: 0
figure
margin-top: 0
margin-bottom: 0
cite
&::before
content: '--'
padding: 0 .2em
table
border-spacing: 0
border-collapse: collapse
margin: 0 auto 1rem
min-width: 100%
th,
td
border: 1px solid #eee
.home-content
@extend .headings
padding: 0
background-color: transparent
setUlStyle(content, hoverColor)
&::before
content: content
position: absolute
top: .04em
left: -1.5em
line-height: $line-height-base
color: $ul-list-color
transition: color .2s ease
transform: scale(.6)
@extend $font-face
&:hover
&::before
color: hoverColor
$content-layout
border-radius: 5px
padding: 2rem
font-size: $font-main-base
background-color: $white
@extend $content-position
& > :first-child
margin-top: 0
& > :last-child
margin-bottom: 0
.main-content-layout
@extend $content-layout
$text_vertical_align_with_img = convert(
hexo-config('text_vertical_align_with_img') || 'bottom')
.main-content
@extend $content-layout
h1,
h2,
h3,
h4,
h5,
h6
&:not(.post-title)
position: relative
margin: 1.5rem 0 1rem
font-weight: $font-weight-bolder
line-height: $line-height-h
color: lighten($h-color, 15%)
cursor: pointer
if ($icon-h-link)
&:not(.post-title)::after
content: $icon-h-link
height: 100%
line-height: $line-height-h
color: $h-link-logo-color
opacity: 0
transition: opacity .1s ease
@extend $font-face
&:hover
&::after
opacity: 1
for size in 1 .. 6
h{size}
font-size: $h-font-size[size - 1]
&::after
margin-left: .8rem - .1 * size
img
max-width: 100%
vertical-align: $text_vertical_align_with_img
ul,
ol
margin: .5rem 0
padding-left: 2em
li
position: relative
if ($icon-ul-list-1 is defined && ($icon-ul-list-2 is defined && ($icon-ul-list-3 is defined)))
list-style-type: none
ul
li
setUlStyle($icon-ul-list-1, $ul-list-hover-color)
ul
li
setUlStyle($icon-ul-list-2, $ul-list-hover-color)
ul
li
setUlStyle($icon-ul-list-3, $ul-list-hover-color)
ol
counter-reset: ol-li
& > li
&::before
content: counter(ol-li) '.'
position: absolute
left: -1.5em
text-align: right
color: $blue-light
counter-increment: ol-li
blockquote
margin: 0 0 1rem
& > :first-child
margin-top: 0
& > :last-child
margin-bottom: 0
& + blockquote
padding-top: 0
figure
margin-top: 0
margin-bottom: 0
cite
&::before
content: '--'
padding: 0 .2em
table
border-spacing: 0
border-collapse: collapse
margin: 0 auto 1rem
min-width: 100%
th,
td
border: 1px solid #eee
.archive-inner,
.category-inner,
.tag-inner
......
$img_horizonal_align
margin: auto
if (hexo-config('img_horizonal_align') == 'left')
$img_horizonal_align
margin: 0 auto 0 0
else if (hexo-config('img_horizonal_align') == 'right')
$img_horizonal_align
margin: 0 0 0 auto
margin: 0 0 0 auto
.post-body,
#recent-posts
......@@ -27,10 +28,10 @@ else if (hexo-config('img_horizonal_align') == 'right')
if (hexo-config('post_widget.end_text.horizon_line'))
border-top: 1px dashed #e6e6e6
padding: 1rem 0 0
span
margin: 0 .1rem
&-copyright
position: relative
......
......@@ -17,12 +17,7 @@
#sidebar
display: none
.main-content,
.home-content
float: none
margin: 0 auto
.main-content-layout
.content
float: none
margin: 0 auto
......@@ -32,14 +27,10 @@
// $md-width: 992px
// -----------------------------------------
@media screen and (min-width: $md-width)
.main-content-layout,
.main-content,
.content,
.comments
width: $main-desktop
.home-content
width: $main-desktop
@media screen and (max-width: $md-width)
#header,
#footer
......@@ -52,16 +43,10 @@
#main
margin-bottom: 2rem
.main-content
.content
padding: 1.2rem
width: 100%
.home-content
width: 100%
.main-content-layout
width: 100%
// sm-width: 768px
// -----------------------------------------
@media screen and (min-width: $sm-width)
......@@ -102,7 +87,7 @@
.site-info-subtitle
font-size: 1rem
div.algolia-popup
left: 0
margin: 0 1rem
......@@ -128,14 +113,14 @@
.header-nav-search
span
display: none
div.algolia-results
max-height: 10rem
.algolia-hit-item
margin: 0
.main-content
.content
padding: 1rem
.post-header
......@@ -160,8 +145,8 @@
margin: 0 0 1.5rem
padding: 1rem 1.2rem
.main-content-layout
padding: 1.20rem
.content
padding: 1.2rem
.archive-inner
margin-left: .5rem
......
$sidebar-float = convert(
hexo-config('sidebar.position') || 'right')
$sidebar-width = convert(
hexo-config('sidebar.width') || '300px')
$sidebar-float = convert(hexo-config('sidebar.position') || 'right')
$sidebar-width = convert(hexo-config('sidebar.width') || '300px')
#sidebar
float: $sidebar-float
width: $sidebar-width
font-size: $font-sidebar-base
$sidebar-top = convert(
hexo-config('sidebar.offsetTop') || '30px')
$sidebar-top = convert(hexo-config('sidebar.offsetTop') || '30px')
.sidebar-inner
border-radius: 5px
......@@ -89,10 +86,8 @@ if (hexo-config('author.avatar.rounded'))
$avatar-rounded = 50%
$avatar-opacity = hexo-config('author.avatar.opacity') || 1
$avatar-animation = 'avatar-' + convert(
hexo-config('author.avatar.animation') || 'turn')
$text-align = convert(
hexo-config('social_setting.text_align') || 'center')
$avatar-animation = 'avatar-' + convert(hexo-config('author.avatar.animation') || 'turn')
$text-align = convert(hexo-config('social_setting.text_align') || 'center')
.sidebar-overview
.sidebar-author
......@@ -122,7 +117,7 @@ $text-align = convert(
.sidebar-cc
a
clearAStyle()
if (hexo-config('sidebar.horizon_line'))
&:not(:last-child)
border-bottom: 1px dashed #e6e6e6
......@@ -253,10 +248,8 @@ $text-align = convert(
margin-top: 0
padding-top: 0
$reading_progress_color = convert(
hexo-config('reading_progress.color') || '$blue-light')
$reading_progress_height = convert(
hexo-config('reading_progress.height') || '1px')
$reading_progress_color = convert(hexo-config('reading_progress.color') || '$blue-light')
$reading_progress_height = convert(hexo-config('reading_progress.height') || '1px')
.sidebar-progress
margin-top: .5em
......
@import './busuanzi.styl' if hexo-config('busuanzi.enable');
@import './busuanzi.styl' if (hexo-config('busuanzi.enable'))
......@@ -4,12 +4,9 @@
right: 1.5rem
bottom: 5vh
$back-to-top-rotate = convert(
hexo-config('back2top.icon.rotate') || '0')
$back-to-top-color = convert(
hexo-config('back2top.icon.color') || '#666')
$back-to-top-hover-color = convert(
hexo-config('back2top.icon.hover_color') || '#999')
$back-to-top-rotate = convert(hexo-config('back2top.icon.rotate') || '0')
$back-to-top-color = convert(hexo-config('back2top.icon.color') || '#666')
$back-to-top-hover-color = convert(hexo-config('back2top.icon.hover_color') || '#999')
.back-top-inner
i
......@@ -21,6 +18,6 @@ $back-to-top-hover-color = convert(
&:hover
color: $back-to-top-hover-color
cursor: pointer
&[data-popover][data-popover-pos="up"]:hover::before
&[data-popover][data-popover-pos='up']:hover::before
transform: translate(-50%, -125%)
$external-link-icon-color = convert(
hexo-config('external_link.icon.color') || '#aaa')
$external-link-icon-color = convert(hexo-config('external_link.icon.color') || '#aaa')
.external-link
margin: 0 1px 0 3px
......
@import './copyright.styl' if hexo-config('footer.copyright.enable');
@import './reward.styl' if hexo-config('reward.enable');
@import './back2top.styl' if hexo-config('back2top.enable');
@import './external-link.styl' if hexo-config('external_link.icon.enable');
@import './copyright.styl' if (hexo-config('footer.copyright.enable'))
@import './reward.styl' if (hexo-config('reward.enable'))
@import './back2top.styl' if (hexo-config('back2top.enable'))
@import './external-link.styl' if (hexo-config('external_link.icon.enable'))
@import './recent-posts.styl'
@import './pagination.styl'
@import './comments.styl'
@import './sticky-top.styl'
@import './copy.styl'
@import './analytics/index.styl'
@import './search/index.styl'
@import './algolia.styl' if hexo-config('algolia_search.enable');
@import './algolia.styl' if (hexo-config('algolia_search.enable'))
......@@ -5,11 +5,8 @@ else
$stick-top-position
right: 1.5rem
$stick-top-rotate = convert(
hexo-config('stick_top.rotate' || '0deg'))
$stick-top-color = convert(
hexo-config('stick_top.color' || '#999'))
$stick-top-rotate = convert(hexo-config('stick_top.rotate' || '0deg'))
$stick-top-color = convert(hexo-config('stick_top.color' || '#999'))
.sticky-top
position: absolute
......@@ -19,10 +16,10 @@ $stick-top-color = convert(
line-height: 1.5rem
text-align: center
@extend $stick-top-position
i
color: $stick-top-color
transform: scale(1.2) rotate($stick-top-rotate)
&[data-popover][data-popover-pos='up']:hover::before
transform: translate(-50%, -100%)
......@@ -42,11 +42,11 @@ img
border: $img-border-width solid $img-border-color
padding: .3rem
input[type="checkbox"]
vertical-align: middle
input[type='checkbox']
width: 1em
height: 1em
font-size: 1em
vertical-align: middle
hr
position: relative
......
......@@ -7,6 +7,7 @@
font-size: $font-post-title
word-wrap: break-word
color: $post-info-title-color
cursor: auto
&-link
display: inline-block
......@@ -34,6 +35,7 @@
h1
margin: 0
line-height: 1.6
cursor: pointer
.post-meta
*::before,
......@@ -61,7 +63,7 @@
&-reading-count
color: $post-info-reading-count-color
.leancloud_visitors
color: $post-info-reading-count-color
......
......@@ -43,9 +43,9 @@
color: $archives-right-time-color
transform: translate(0, 8%)
&__title
&__title
max-width: 80%
a
clearAStyle()
font-size: $font-main-base
......
......@@ -2,7 +2,6 @@
// -------------------------------------------
@import 'nib'
@import './_third-party/normalize.min.css'
// Project.
// -------------------------------------------
@import './var.styl'
......@@ -11,7 +10,6 @@
@import './_mixins'
@import './_common'
@import './_components'
// Custom styles by user.
// -------------------------------------------
@import './_custom'
......@@ -7,7 +7,7 @@ $(document).ready(function test () {
var lang = item
.getAttribute('class')
.split(/\s/)
.filter(function (e) { return e !== CODEBLOCK_CLASS_NAME});
.filter(function (e) { return e !== CODEBLOCK_CLASS_NAME; });
var codeHeader = $(
'<figcaption class="custom">' +
'<span>' + lang + '</span>' +
......@@ -38,7 +38,7 @@ $(document).ready(function test () {
} else { // Copy text.
container = $(this).parent()[0];
}
if (Stun.utils.copyText(container)) {
Stun.utils.popAlert('success', CONFIG.notification.copy_success);
} else {
......
......@@ -11,7 +11,7 @@ $(document).ready(function () {
}, 20, 100));
// Click the heading.
$('.main-content')
$('.content')
.find('h1,h2,h3,h4,h5,h6')
.on('click', function () {
scrollHeadingToTop('#' + $(this).attr('id'));
......
......@@ -55,8 +55,7 @@ $(document).ready(function () {
$view.velocity('fadeIn');
});
if ($('.main-content, .main-content-layout').height() <
$('#sidebar').height()) {
if ($('.content').height() < $('#sidebar').height()) {
$('#main').css('min-height', $('#main').height());
}
......@@ -170,7 +169,7 @@ $(document).ready(function () {
// Update the reading progress lines of post.
function readProgress () {
var $post = $('.main-content');
var $post = $('.content');
var scrollH = ($post[0] && $post[0].getBoundingClientRect().top * -1) || 0;
var percent = parseInt((scrollH /
......
......@@ -2,10 +2,10 @@ $(document).ready(function () {
CONFIG.shortcuts.switch_post && Stun.utils.registerSwitchPost();
CONFIG.back2top && Stun.utils.back2Top();
CONFIG.reward && Stun.utils.registerShowReward();
CONFIG.fancybox && CONFIG.utils.wrapImageWithFancyBox();
if (CONFIG.external_link.icon) {
var EXTERNAL_LINK_CONTAINER =
'.home-content, .main-content, .main-content-layout, #footer';
var EXTERNAL_LINK_CONTAINER = '.content, #footer';
Stun.utils.addIconToExternalLink(EXTERNAL_LINK_CONTAINER);
}
});
......@@ -140,6 +140,10 @@ Stun.utils = Stun.$u = {
} catch (e) {
return false;
}
},
// Wrap images with fancybox support.
wrapImageWithFancyBox: function () {
},
// Add a container outside the tables to make it scroll when needed.
addContainerToTable: function () {
......@@ -166,13 +170,17 @@ Stun.utils = Stun.$u = {
*/
addIconToExternalLink: function (selector) {
if (!$(selector)[0]) return;
var $icon = $(
'<i class="external-link fa fa-' +
CONFIG.external_link.icon_name +
'"></i>'
);
$icon.insertAfter($(selector).find('a[target="_blank"]'));
// Insert icon after link.
// $icon.insertAfter($(selector).find('a[target="_blank"]'));
// Insert icon inner link.
$(selector).find('a[target="_blank"]').append($icon);
},
// Back the page to top.
back2Top: function () {
......@@ -244,5 +252,5 @@ Stun.utils = Stun.$u = {
$(document).ready(function () {
Stun.utils.addContainerToTable();
Stun.utils.adjustImageSize();
Stun.utils.copyText()
Stun.utils.copyText();
});
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册