diff --git a/scripts/tags/link-grid.js b/scripts/tags/link-grid.js new file mode 100644 index 0000000..ea464a4 --- /dev/null +++ b/scripts/tags/link-grid.js @@ -0,0 +1,19 @@ +/* global hexo */ + +'use strict'; + +function linkGrid(args, content) { + const links = content.split('\n').map(item => { + const args = item.split('|').map(arg => arg.trim()); + if (args[0][0] === '%') return ''; + return `
+ +

${args[0]}

${args[2] || args[1]}

+ +
`; + }); + return ``; +} + +hexo.extend.tag.register('linkgrid', linkGrid, {ends: true}); +hexo.extend.tag.register('lg', linkGrid, {ends: true}); diff --git a/source/css/_common/scaffolding/tags/link-grid.styl b/source/css/_common/scaffolding/tags/link-grid.styl new file mode 100644 index 0000000..aadc0f9 --- /dev/null +++ b/source/css/_common/scaffolding/tags/link-grid.styl @@ -0,0 +1,101 @@ +.post-body .link-grid { + display: grid; + grid-gap: 1.5rem 1.5rem; + grid-template-columns: 1fr 1fr; + padding: 1.5rem; + user-select: none; + + +mobile() { + grid-template-columns: 1fr; + } + + div { + border: solid #ddd; + box-shadow: 1rem 1rem 0.5rem gray; + height: 5rem; + transition: background 0.3s; + padding: 0.5rem; + position: relative; + + &:hover { + animation: shake 0.5s; + background: rgba(230,244,250,.5); + } + + &:active { + box-shadow: 0.5rem 0.5rem 0.25rem gray; + transform: translate(0.2rem, 0.2rem); + } + + img { + border: 1px solid #ddd; + border-radius: 50%; + box-sizing: border-box; + height: 5rem; + left: 0.5rem; + padding: 3px; + position: absolute; + top: 0.5rem; + width: 5rem; + } + + p { + margin: 0 1rem 0 6rem; + + &:first-of-type { + font-size: 1.2em; + } + + &:last-of-type { + font-size: 0.8em; + line-height: 1.3rem; + opacity: 0.7; + } + } + + a { + border: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } +} + +@keyframes shake { + 0% { + transform: translate(1pt, 1pt) rotate(0deg); + } + 10% { + transform: translate(-1pt, -2pt) rotate(-1deg); + } + 20% { + transform: translate(-3pt, 0pt) rotate(1deg); + } + 30% { + transform: translate(3pt, 2pt) rotate(0deg); + } + 40% { + transform: translate(1pt, -1pt) rotate(1deg); + } + 50% { + transform: translate(-1pt, 2pt) rotate(-1deg); + } + 60% { + transform: translate(-3pt, 1pt) rotate(0deg); + } + 70% { + transform: translate(3pt, 1pt) rotate(-1deg); + } + 80% { + transform: translate(-1pt, -1pt) rotate(1deg); + } + 90% { + transform: translate(1pt, 2pt) rotate(0deg); + } + 100% { + transform: translate(1pt, -2pt) rotate(-1deg); + } +} diff --git a/source/css/_common/scaffolding/tags/tags.styl b/source/css/_common/scaffolding/tags/tags.styl index 56cc2c9..3093eb4 100644 --- a/source/css/_common/scaffolding/tags/tags.styl +++ b/source/css/_common/scaffolding/tags/tags.styl @@ -1,6 +1,7 @@ @import 'blockquote-center'; @import 'group-pictures'; @import 'label'; +@import 'link-grid'; @import 'tabs'; @import 'note' if (hexo-config('note.style') != 'disabled');