';
- if (order == '-date') {
- el += newerIcon;
- } else {
- el += olderIcon;
- }
- el += '
' + content + '
';
- if (order == '-date') {
- el += olderIcon;
- } else {
- el += newerIcon;
+ el += '';
return el;
}
-function postTimenode(args, content) {
- args = args.join(' ').split(', ');
- var header = args[0];
- return `
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
`;
+function layoutNodeContent(content) {
+ var el = '';
+ el += '
';
+ if (content && content.length > 0) {
+ el += hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('');
+ }
+ el += '
';
+ return el;
+}
+
+
+function postTimeline(args, content) {
+ var el = '';
+ const nodeBlock = //g;
+ let match;
+ var arr = content.split(nodeBlock).filter((item, i) => {
+ return item.trim().length > 0;
+ });
+ if (arr.length < 1) {
+ return el;
+ }
+ var nodes = [];
+ arr.forEach((item, i) => {
+ if (item.startsWith('node ')) {
+ nodes.push({
+ header: item
+ });
+ } else if (nodes.length > 0) {
+ var node = nodes[nodes.length-1];
+ if (node.body === undefined) {
+ node.body = item;
+ } else {
+ node.body += '\n' + item;
+ }
+ }
+ });
+
+ el += '
';
+ nodes.forEach((node, i) => {
+ el += '
';
+ el += layoutNodeTitle(node.header.substring(5));
+ el += layoutNodeContent(node.body);
+ el += '
';
+ });
+
+ el += '
';
+ return el;
}
hexo.extend.tag.register('timeline', postTimeline, {ends: true});
-
-hexo.extend.tag.register('timenode', postTimenode, {ends: true});
diff --git a/source/css/_custom.styl b/source/css/_custom.styl
index 56f2b55..24a8df3 100644
--- a/source/css/_custom.styl
+++ b/source/css/_custom.styl
@@ -83,3 +83,4 @@ $boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1)
$boxshadow-float = 0 4px 8px 0px rgba(0, 0, 0, 0.1)
$boxshadow-card-float = 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1)
$boxshadow-button = 0 0 2px 0px rgba(0, 0, 0, 0.04), 0 0 8px 0px rgba(0, 0, 0, 0.04)
+$boxshadow-block = 0 1px 4px 0px rgba(0, 0, 0, 0.02), 0 2px 8px 0px rgba(0, 0, 0, 0.02)
diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl
index a6cd0d1..056d840 100644
--- a/source/css/_layout/md.styl
+++ b/source/css/_layout/md.styl
@@ -3,6 +3,7 @@ article.md
padding: 1rem
color: var(--text-p1)
line-height: 1.7
+ word-break: break-word
article.md.excerpt
p
diff --git a/source/css/_layout/tag-plugins/copy.styl b/source/css/_layout/tag-plugins/copy.styl
index 06d8bcb..e95c3ee 100644
--- a/source/css/_layout/tag-plugins/copy.styl
+++ b/source/css/_layout/tag-plugins/copy.styl
@@ -7,7 +7,7 @@
overflow: hidden
max-width: 100%
display: flex
- width: 360px
+ width: 320px
&[width='max']
width: 100%
@media screen and (max-width: $device-mobile-425)
diff --git a/source/css/_layout/tag-plugins/timeline.styl b/source/css/_layout/tag-plugins/timeline.styl
index fc871a1..d6050e8 100644
--- a/source/css/_layout/tag-plugins/timeline.styl
+++ b/source/css/_layout/tag-plugins/timeline.styl
@@ -1,76 +1,68 @@
.tag-plugin.timeline
position: relative
- display: block
margin: 1rem 0
- padding-top: 1rem
- padding-bottom: 1rem
+ padding-left: 16px
&:before
content: ''
+ position: absolute
z-index: 0
- position: absolute
- background: var(--block-border)
- width: 2px
- left: 16px
- top: 1rem
- bottom: 1rem
- >svg.icon:first-child, >svg.icon:last-child
- position: absolute
- z-index: 1
- fill: var(--block-border)
- height 16px
- width: 16px
- margin-left: 9px
- >svg.icon:first-child
- margin-top: -1rem
- >svg.icon:last-child
- margin-bottom: 1rem
-
-.tag-plugin.timenode
- position: relative
- background: var(--card)
- border: 1px solid var(--theme)
- border-radius: $border-block
- margin-top: 1rem
- margin-bottom: 1rem
- .header
- line-height: 1.2
- background: var(--theme-bg)
- border-top-left-radius: "calc(%s - 1px)" % $border-block
- border-top-right-radius: "calc(%s - 1px)" % $border-block
- border-bottom: 1px solid var(--theme)
- display: flex
- justify-content: space-between
- align-items: center
- span
- font-weight: 500
- color: var(--text-p1)
- padding: 0.75rem 16px
- a
- visibility: hidden
- margin-left: 4px
- padding: 0.4rem 8px
- margin-right: 8px
- line-height: 0
- border-radius: 4px
- color: var(--text-p1)
- &:hover
- color: $color-link
- .body
- padding: 0.5rem 1rem
- p,.highlight,ol,ul
- margin: 0.5rem 0
-
-.tag-plugin.timenode:hover
- .header a
- visibility: visible
+ background: var(--block-hover)
+ width: 4px
+ left: 0px
+ border-radius: 8px
+ top: .5rem
+ bottom: 0
.tag-plugin.timeline .timenode
- --theme-bg: alpha(#888, 0.05)
+ position: relative
+ display: flex
+ flex-direction: column
+ align-items: flex-start
+ &[highlight] .header:before
+ background: $color-theme
+ &+.timenode
+ margin-top: 1rem
+ &:hover .header
+ p
+ color: var(--text-p1)
+ &:before
+ background: $color-theme
+ height: 16px
+ top: 'calc(50% - 0.5 * %s)' % @height
-.tag-plugin.timeline[order='-date'] .timenodes>.timenode:first-child
- --theme: alpha($c-blue, 0.25)
- --theme-bg: alpha($c-blue, 0.05)
+.tag-plugin.timeline .header
+ display: flex
+ align-items: center
+ position: relative
+ p
+ margin: .25rem 0
+ font-size: $fs-12
+ font-weight: 700
+ color: var(--text-p3)
+ font-family: $ff-code
+ a
+ color: inherit
+ font-weight: inherit
+ &:before
+ content: ''
+ position: absolute
+ left: -16px
+ width: 4px
+ border-radius: 12px
+ height: 4px
+ top: 'calc(50% - 0.5 * %s)' % @height
+ background: var(--text-p4)
+ trans3 background height top
-.tag-plugin.timeline[order='date'] .timenodes>:last-child
- --theme: alpha($c-blue, 0.25)
- --theme-bg: alpha($c-blue, 0.05)
+
+.tag-plugin.timeline .body
+ background: var(--card)
+ border-radius: 12px
+ border-top-left-radius: 2px
+ padding: 0.5rem 1rem
+ margin-top: 4px
+ box-shadow: $boxshadow-block
+ &:empty
+ display: none
+ p,.highlight,ol,ul,.tag-plugin
+ margin: .5rem 0