github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(styles): organize stylus & style fixes

pull/588/head
ppoffice 2019-12-29 01:07:07 -05:00
parent c0e2cb1a9b
commit ae6161ac09
39 changed files with 848 additions and 802 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,4 +1,4 @@
<p align="center" class="has-mb-6"> <p align="center" class="mb-2">
<img class="not-gallery-item" height="48" src="https://ppoffice.github.io/hexo-theme-icarus/img/logo.svg"> <img class="not-gallery-item" height="48" src="https://ppoffice.github.io/hexo-theme-icarus/img/logo.svg">
<br> A simple, delicate, and modern theme for the static site generator Hexo. <br> A simple, delicate, and modern theme for the static site generator Hexo.
<br> <br>

39
layout/archive.jsx
View File

@ -1,6 +1,7 @@
const moment = require('moment'); const moment = require('moment');
const { Component, Fragment } = require('inferno'); const { Component, Fragment } = require('inferno');
const Paginator = require('./misc/paginator'); const Paginator = require('./misc/paginator');
const ArticleMedia = require('./common/article-media');
module.exports = class extends Component { module.exports = class extends Component {
render() { render() {
@ -12,34 +13,22 @@ module.exports = class extends Component {
function renderArticleList(posts, year, month = null) { function renderArticleList(posts, year, month = null) {
const time = moment([page.year, page.month ? page.month - 1 : null].filter(i => i !== null)); const time = moment([page.year, page.month ? page.month - 1 : null].filter(i => i !== null));
return <div class="card widget"> return <div class="card">
<div class="card-content"> <div class="card-content">
<h3 class="tag is-link">{month === null ? year : time.locale(language).format('MMMM YYYY')}</h3> <h3 class="tag is-primary">{month === null ? year : time.locale(language).format('MMMM YYYY')}</h3>
<div class="timeline"> <div class="timeline">
{posts.map(post => { {posts.map(post => {
const categories = []; const categories = post.categories.map(category => ({
post.categories.forEach((category, i) => { url: url_for(category.path),
categories.push(<a class="has-link-grey" href={url_for(category.path)}>{category.name}</a>); name: category.name
if (i < post.categories.length - 1) { }));
categories.push(' / '); return <ArticleMedia
} thumbnail={has_thumbnail(post) ? get_thumbnail(post) : null}
}); url={url_for(post.link || post.path)}
return <article class="media"> title={post.title}
{has_thumbnail(post) ? <a href={url_for(post.link || post.path)} class="media-left"> date={date(post.date)}
<p class="image is-64x64"> dateXml={date_xml(post.date)}
<img class="thumbnail" src={get_thumbnail(post)} alt={post.title || get_thumbnail(post)} /> categories={categories} />;
</p>
</a> : null}
<div class="media-content">
<div class="content">
<time class="has-text-grey is-size-7 is-block is-uppercase"
dateTime={date_xml(post.date)}>{date(post.date)}</time>
<a class="title has-link-black-ter is-size-6 has-text-weight-normal"
href={url_for(post.link || post.path)} >{post.title}</a>
{categories.length ? <p class="is-size-7 is-uppercase">{categories}</p> : null}
</div>
</div>
</article>;
})} })}
</div> </div>
</div> </div>

28
layout/common/article-media.jsx Normal file
View File

@ -0,0 +1,28 @@
const { Component } = require('inferno');
module.exports = class extends Component {
render() {
const { thumbnail, url, title, date, dateXml, categories } = this.props;
const categoryTags = [];
categories.forEach((category, i) => {
categoryTags.push(<a class="link-muted" href={category.url}>{category.name}</a>);
if (i < categories.length - 1) {
categoryTags.push(' / ');
}
});
return <article class="media">
{thumbnail ? <a href={url} class="media-left">
<p class="image is-64x64">
<img class="thumbnail" src={thumbnail} alt={title} />
</p>
</a> : null}
<div class="media-content size-small">
<p><time dateTime={dateXml}>{date}</time></p>
<p><a href={url} class="title is-size-6 has-text-weight-normal link-muted">{title}</a></p>
<p class="is-uppercase">{categoryTags.length ? categoryTags : null}</p>
</div>
</article>;
}
};

79
layout/common/article.jsx
View File

@ -26,24 +26,24 @@ module.exports = class extends Component {
<div class="card"> <div class="card">
{/* Thumbnail */} {/* Thumbnail */}
{has_thumbnail(page) ? <div class="card-image"> {has_thumbnail(page) ? <div class="card-image">
{index ? <a href={url_for(page.link || page.path)} class="image is-7by1"> {index ? <a href={url_for(page.link || page.path)} class="image is-7by3">
<img class="thumbnail" src={get_thumbnail(page)} alt={page.title || get_thumbnail(page)} /> <img class="thumbnail" src={get_thumbnail(page)} alt={page.title || get_thumbnail(page)} />
</a> : <span class="image is-7by1"> </a> : <span class="image is-7by3">
<img class="thumbnail" src={get_thumbnail(page)} alt={page.title || get_thumbnail(page)} /> <img class="thumbnail" src={get_thumbnail(page)} alt={page.title || get_thumbnail(page)} />
</span>} </span>}
</div> : null} </div> : null}
{/* Metadata */} {/* Metadata */}
<div class={`card-content article${'direction' in page ? ' ' + page.direction : ''}`} role="article"> <article class={`card-content article${'direction' in page ? ' ' + page.direction : ''}`} role="article">
{page.layout !== 'page' ? <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto"> {page.layout !== 'page' ? <div class="article-meta size-small is-uppercase level is-mobile">
<div class="level-left"> <div class="level-left">
{/* Date */} {/* Date */}
<time class="level-item has-text-grey" dateTime={date_xml(page.date)}>{date(page.date)}</time> <time class="level-item" dateTime={date_xml(page.date)}>{date(page.date)}</time>
{/* Categories */} {/* Categories */}
{page.categories && page.categories.length ? <span class="level-item"> {page.categories && page.categories.length ? <span class="level-item">
{(() => { {(() => {
const categories = []; const categories = [];
page.categories.forEach((category, i) => { page.categories.forEach((category, i) => {
categories.push(<a class="has-link-grey" href={url_for(category.path)}>{category.name}</a>); categories.push(<a class="link-muted" href={url_for(category.path)}>{category.name}</a>);
if (i < page.categories.length - 1) { if (i < page.categories.length - 1) {
categories.push(<span>&nbsp;/&nbsp;</span>); categories.push(<span>&nbsp;/&nbsp;</span>);
} }
@ -52,7 +52,7 @@ module.exports = class extends Component {
})()} })()}
</span> : null} </span> : null}
{/* Read time */} {/* Read time */}
{article && article.readtime && article.readtime === true ? <span class="level-item has-text-grey"> {article && article.readtime && article.readtime === true ? <span class="level-item">
{(() => { {(() => {
const words = getWordCount(page._content); const words = getWordCount(page._content);
const time = moment.duration((words / 150.0) * 60, 'seconds'); const time = moment.duration((words / 150.0) * 60, 'seconds');
@ -60,60 +60,47 @@ module.exports = class extends Component {
})()} })()}
</span> : null} </span> : null}
{/* Visitor counter */} {/* Visitor counter */}
{plugins && plugins.busuanzi === true ? <span class="level-item has-text-grey" id="busuanzi_container_page_pv" {plugins && plugins.busuanzi === true ? <span class="level-item" id="busuanzi_container_page_pv" dangerouslySetInnerHTML={{
dangerouslySetInnerHTML={{ __html: '<i class="far fa-eye"></i>' + _p('plugin.visit', '&nbsp;&nbsp;<span id="busuanzi_value_page_pv">0</span>')
__html: '<i class="far fa-eye"></i>' + _p('plugin.visit', '&nbsp;&nbsp;<span id="busuanzi_value_page_pv">0</span>') }}></span> : null}
}}></span> : null}
</div> </div>
</div> : null} </div> : null}
{/* Title */} {/* Title */}
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal"> <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal has-text-black-ter">
{index ? <a class="has-link-black-ter" href={url_for(page.link || page.path)}>{page.title}</a> : page.title} {index ? <a class="link-muted" href={url_for(page.link || page.path)}>{page.title}</a> : page.title}
</h1> </h1>
{/* Content/Excerpt */} {/* Content/Excerpt */}
<div class="content" dangerouslySetInnerHTML={{ __html: index && page.excerpt ? page.excerpt : page.content }}></div> <div class="content" dangerouslySetInnerHTML={{ __html: index && page.excerpt ? page.excerpt : page.content }}></div>
{/* Tags */} {/* Tags */}
{!index && page.tags && page.tags.length ? <div class="level is-size-7 is-uppercase"> {!index && page.tags && page.tags.length ? <div class="article-tags size-small is-uppercase mb-4">
<div class="level-start"> <span class="mr-2">#</span>
<div class="level-item"> {page.tags.map(tag => {
<span class="is-size-6 has-text-grey has-mr-7">#</span> return <a class="link-muted mr-2" rel="tag" href={url_for(tag.path)}>{tag.name}</a>;
{page.tags.map(tag => { })}
return <a class="has-link-grey has-mr-6" rel="tag" href={url_for(tag.path)}>{tag.name}</a>;
})}
</div>
</div>
</div> : null} </div> : null}
{/* "Read more" button */} {/* "Read more" button */}
{index && page.excerpt ? <div class="level is-mobile"> {index && page.excerpt ? <a class="article-more button is-small" href={`${url_for(page.path)}#more`}>{__('article.more')}</a> : null}
<div class="level-start">
<div class="level-item">
<a class="button is-size-7 is-light" href={`${url_for(page.path)}#more`}>{__('article.more')}</a>
</div>
</div>
</div> : null}
{/* Share button */} {/* Share button */}
{!index ? <Share config={config} page={page} helper={helper} /> : null} {!index ? <Share config={config} page={page} helper={helper} /> : null}
</div> </article>
</div> </div>
{/* Donate button */} {/* Donate button */}
{!index ? <Donates config={config} helper={helper} /> : null} {!index ? <Donates config={config} helper={helper} /> : null}
{/* Post navigation */} {/* Post navigation */}
{!index && (page.prev || page.next) ? <div class="card card-transparent"> {!index && (page.prev || page.next) ? <nav class="post-navigation mt-4 level is-mobile">
<div class="level post-navigation is-flex-wrap is-mobile"> {page.prev ? <div class="level-start">
{page.prev ? <div class="level-start"> <a class={`article-nav-prev level level-item${!page.prev ? ' is-hidden-mobile' : ''} link-muted`} href={url_for(page.prev.path)}>
<a class={`level level-item has-link-grey${!page.prev ? ' is-hidden-mobile' : ''} article-nav-prev`} href={url_for(page.prev.path)}> <i class="level-item fas fa-chevron-left"></i>
<i class="level-item fas fa-chevron-left"></i> <span class="level-item">{page.prev.title}</span>
<span class="level-item">{page.prev.title}</span> </a>
</a> </div> : null}
</div> : null} {page.next ? <div class="level-end">
{page.next ? <div class="level-end"> <a class={`article-nav-next level level-item${!page.next ? ' is-hidden-mobile' : ''} link-muted`} href={url_for(page.next.path)}>
<a class={`level level-item has-link-grey${!page.next ? ' is-hidden-mobile' : ''} article-nav-next`} href={url_for(page.next.path)}> <span class="level-item">{page.next.title}</span>
<span class="level-item">{page.next.title}</span> <i class="level-item fas fa-chevron-right"></i>
<i class="level-item fas fa-chevron-right"></i> </a>
</a> </div> : null}
</div> : null} </nav> : null}
</div>
</div> : null}
{/* Comment */} {/* Comment */}
{!index ? <Comment config={config} page={page} helper={helper} /> : null} {!index ? <Comment config={config} page={page} helper={helper} /> : null}
</Fragment>; </Fragment>;

10
layout/common/footer.jsx
View File

@ -18,13 +18,13 @@ class Footer extends Component {
return <footer class="footer"> return <footer class="footer">
<div class="container"> <div class="container">
<div class="level"> <div class="level">
<div class="level-start has-text-centered-mobile"> <div class="level-start">
<a class="footer-logo is-block has-mb-6" href={siteUrl}> <a class="footer-logo is-block mb-2" href={siteUrl}>
{logo && logo.text ? logo.text : <img src={logoUrl} alt={siteTitle} height="28" />} {logo && logo.text ? logo.text : <img src={logoUrl} alt={siteTitle} height="28" />}
</a> </a>
<p class="is-size-7"> <p class="size-small">
<span dangerouslySetInnerHTML={{ __html: `&copy; ${siteYear} ${author || siteTitle}` }}></span> <span dangerouslySetInnerHTML={{ __html: `&copy; ${siteYear} ${author || siteTitle}` }}></span>
&nbsp;&nbsp;Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & &nbsp;&nbsp;Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>&nbsp;&&nbsp;
<a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a> <a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
{showVisitorCounter ? <br /> : null} {showVisitorCounter ? <br /> : null}
{showVisitorCounter ? <span id="busuanzi_container_site_uv" {showVisitorCounter ? <span id="busuanzi_container_site_uv"
@ -32,7 +32,7 @@ class Footer extends Component {
</p> </p>
</div> </div>
<div class="level-end"> <div class="level-end">
{Object.keys(links).length ? <div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle"> {Object.keys(links).length ? <div class="field has-addons">
{Object.keys(links).map(name => { {Object.keys(links).map(name => {
const link = links[name]; const link = links[name];
return <p class="control"> return <p class="control">

1
layout/common/head.jsx
View File

@ -136,7 +136,6 @@ module.exports = class extends Component {
{canonical_url ? <link rel="canonical" href={canonical_url} /> : null} {canonical_url ? <link rel="canonical" href={canonical_url} /> : null}
{rss ? <link rel="alternative" href={url_for(rss)} title={config.title} type="application/atom+xml" /> : null} {rss ? <link rel="alternative" href={url_for(rss)} title={config.title} type="application/atom+xml" /> : null}
{favicon ? <link rel="icon" href={url_for(favicon)} /> : null} {favicon ? <link rel="icon" href={url_for(favicon)} /> : null}
<link rel="stylesheet" href={cdn('bulma', '0.7.2', 'css/bulma.css')} />
<link rel="stylesheet" href={iconcdn()} /> <link rel="stylesheet" href={iconcdn()} />
<link rel="stylesheet" href={fontcdn('Ubuntu:400,600|Source+Code+Pro')} /> <link rel="stylesheet" href={fontcdn('Ubuntu:400,600|Source+Code+Pro')} />
{hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '9.12.0', 'styles/' + hlTheme + '.css')} /> : null} {hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '9.12.0', 'styles/' + hlTheme + '.css')} /> : null}

2
layout/common/navbar.jsx
View File

@ -30,7 +30,7 @@ class Navbar extends Component {
return <nav class="navbar navbar-main"> return <nav class="navbar navbar-main">
<div class="container"> <div class="container">
<div class="navbar-brand is-flex-center"> <div class="navbar-brand justify-content-center">
<a class="navbar-item navbar-logo" href={siteUrl}> <a class="navbar-item navbar-logo" href={siteUrl}>
{logo && logo.text ? logo.text : <img src={logoUrl} alt={siteTitle} height="28" />} {logo && logo.text ? logo.text : <img src={logoUrl} alt={siteTitle} height="28" />}
</a> </a>

2
layout/common/widgets.jsx
View File

@ -48,7 +48,7 @@ function getColumnVisibilityClass(columnCount, position) {
} }
function getColumnOrderClass(position) { function getColumnOrderClass(position) {
return position === 'left' ? 'has-order-1' : 'has-order-3'; return position === 'left' ? 'order-1' : 'order-3';
} }
function isColumnSticky(config, position) { function isColumnSticky(config, position) {

7
layout/donate/alipay.jsx
View File

@ -3,7 +3,7 @@ const { cacheComponent } = require('../util/cache');
class Alipay extends Component { class Alipay extends Component {
render() { render() {
const { title, qrcode, url_for } = this.props; const { title, qrcode } = this.props;
if (!qrcode) { if (!qrcode) {
return <div class="notification is-danger"> return <div class="notification is-danger">
You forgot to set the <code>qrcode</code> for Alipay. You forgot to set the <code>qrcode</code> for Alipay.
@ -15,7 +15,7 @@ class Alipay extends Component {
<i class="fab fa-alipay"></i> <i class="fab fa-alipay"></i>
</span> </span>
<span>{title}</span> <span>{title}</span>
<span class="qrcode"><img src={url_for(qrcode)} alt={title} /></span> <span class="qrcode"><img src={qrcode} alt={title} /></span>
</a>; </a>;
} }
} }
@ -24,8 +24,7 @@ module.exports = cacheComponent(Alipay, 'donate.alipay', props => {
const { donate, helper } = props; const { donate, helper } = props;
return { return {
qrcode: donate.qrcode,
title: helper.__('donate.' + donate.type), title: helper.__('donate.' + donate.type),
url_for: helper.url_for qrcode: helper.url_for(donate.qrcode)
}; };
}); });

9
layout/donate/buymeacoffee.jsx
View File

@ -3,14 +3,14 @@ const { cacheComponent } = require('../util/cache');
class BuyMeACoffee extends Component { class BuyMeACoffee extends Component {
render() { render() {
const { title, url, url_for } = this.props; const { title, url } = this.props;
if (!url) { if (!url) {
return <div class="notification is-danger"> return <div class="notification is-danger">
You forgot to set the <code>url</code> for &quot;Buy me a coffee&quot;. You forgot to set the <code>url</code> for &quot;Buy me a coffee&quot;.
Please set it in <code>_config.yml</code>. Please set it in <code>_config.yml</code>.
</div>; </div>;
} }
return <a class="button donate" href={url_for(url)} style={{ return <a class="button donate" href={url} style={{
'background-color': 'rgba(255,128,62,.87)', 'background-color': 'rgba(255,128,62,.87)',
'border-color': 'transparent', 'border-color': 'transparent',
'color': 'white' 'color': 'white'
@ -27,8 +27,7 @@ module.exports = cacheComponent(BuyMeACoffee, 'donate.buymeacoffee', props => {
const { donate, helper } = props; const { donate, helper } = props;
return { return {
url: donate.url, url: helper.url_for(donate.url),
title: helper.__('donate.' + donate.type), title: helper.__('donate.' + donate.type)
url_for: helper.url_for
}; };
}); });

9
layout/donate/patreon.jsx
View File

@ -3,14 +3,14 @@ const { cacheComponent } = require('../util/cache');
class Patreon extends Component { class Patreon extends Component {
render() { render() {
const { title, url, url_for } = this.props; const { title, url } = this.props;
if (!url) { if (!url) {
return <div class="notification is-danger"> return <div class="notification is-danger">
You forgot to set the <code>url</code> for Patreon. You forgot to set the <code>url</code> for Patreon.
Please set it in <code>_config.yml</code>. Please set it in <code>_config.yml</code>.
</div>; </div>;
} }
return <a class="button is-danger donate" href={url_for(url)} target="_blank" rel="noopener"> return <a class="button is-danger donate" href={url} target="_blank" rel="noopener">
<span class="icon is-small"> <span class="icon is-small">
<i class="fab fa-patreon"></i> <i class="fab fa-patreon"></i>
</span> </span>
@ -23,8 +23,7 @@ module.exports = cacheComponent(Patreon, 'donate.petreon', props => {
const { donate, helper } = props; const { donate, helper } = props;
return { return {
url: donate.url, url: helper.url_for(donate.url),
title: helper.__('donate.' + donate.type), title: helper.__('donate.' + donate.type)
url_for: helper.url_for
}; };
}); });

3
layout/donate/paypal.jsx
View File

@ -32,7 +32,6 @@ module.exports = cacheComponent(Paypal, 'donate.paypal', props => {
return { return {
business: donate.business, business: donate.business,
currencyCode: donate.currency_code, currencyCode: donate.currency_code,
title: helper.__('donate.' + donate.type), title: helper.__('donate.' + donate.type)
url_for: helper.url_for
}; };
}); });

9
layout/donate/wechat.jsx
View File

@ -3,7 +3,7 @@ const { cacheComponent } = require('../util/cache');
class Wechat extends Component { class Wechat extends Component {
render() { render() {
const { title, qrcode, url_for } = this.props; const { title, qrcode } = this.props;
if (!qrcode) { if (!qrcode) {
return <div class="notification is-danger"> return <div class="notification is-danger">
You forgot to set the <code>qrcode</code> for Wechat. You forgot to set the <code>qrcode</code> for Wechat.
@ -15,7 +15,7 @@ class Wechat extends Component {
<i class="fab fa-weixin"></i> <i class="fab fa-weixin"></i>
</span> </span>
<span>{title}</span> <span>{title}</span>
<span class="qrcode"><img src={url_for(qrcode)} alt={title} /></span> <span class="qrcode"><img src={qrcode} alt={title} /></span>
</a>; </a>;
} }
} }
@ -24,8 +24,7 @@ module.exports = cacheComponent(Wechat, 'donate.wechat', props => {
const { donate, helper } = props; const { donate, helper } = props;
return { return {
qrcode: donate.qrcode, qrcode: helper.url_for(donate.qrcode),
title: helper.__('donate.' + donate.type), title: helper.__('donate.' + donate.type)
url_for: helper.url_for
}; };
}); });

2
layout/layout.jsx
View File

@ -23,7 +23,7 @@ module.exports = class extends Component {
<div class="columns"> <div class="columns">
<div class={classname({ <div class={classname({
column: true, column: true,
'has-order-2': true, 'order-2': true,
'column-main': true, 'column-main': true,
'is-12': columnCount === 1, 'is-12': columnCount === 1,
'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2, 'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,

24
layout/misc/paginator.jsx
View File

@ -38,18 +38,16 @@ module.exports = class extends Component {
return elements; return elements;
} }
return <div class="card card-transparent"> return <nav class="pagination is-centered mt-4" role="navigation" aria-label="pagination">
<nav class="pagination is-centered" role="navigation" aria-label="pagination"> <div class={`pagination-previous${current > 1 ? '' : ' is-invisible is-hidden-mobile'}`}>
<div class={`pagination-previous${current > 1 ? '' : ' is-invisible is-hidden-mobile'}`}> <a href={getPageUrl(current - 1)}>{prevTitle}</a>
<a class="is-flex-grow has-text-black-ter" href={getPageUrl(current - 1)}>{prevTitle}</a> </div>
</div> <div class={`pagination-next${current < total ? '' : ' is-invisible is-hidden-mobile'}`}>
<div class={`pagination-next${current < total ? '' : ' is-invisible is-hidden-mobile'}`}> <a href={getPageUrl(current + 1)}>{nextTitle}</a>
<a class="is-flex-grow has-text-black-ter" href={getPageUrl(current + 1)}>{nextTitle}</a> </div>
</div> <ul class="pagination-list is-hidden-mobile">
<ul class="pagination-list is-hidden-mobile"> {pagination(current, total)}
{pagination(current, total)} </ul>
</ul> </nav>;
</nav>
</div>;
} }
}; };

4
layout/plugin/animejs.jsx
View File

@ -6,7 +6,7 @@ class AnimeJs extends Component {
if (this.props.head) { if (this.props.head) {
return <style dangerouslySetInnerHTML={{ __html: 'body>.footer,body>.navbar,body>.section{opacity:0}' }}></style>; return <style dangerouslySetInnerHTML={{ __html: 'body>.footer,body>.navbar,body>.section{opacity:0}' }}></style>;
} }
return <script src={this.props.url_for('/js/animation.js')}></script>; return <script src={this.props.jsUrl}></script>;
} }
} }
@ -15,6 +15,6 @@ module.exports = cacheComponent(AnimeJs, 'plugin.animejs', props => {
const { helper, head } = props; const { helper, head } = props;
return { return {
head, head,
url_for: helper.url_for jsUrl: helper.url_for('/js/animation.js')
}; };
}); });

13
layout/plugin/back_to_top.jsx
View File

@ -3,16 +3,13 @@ const { cacheComponent } = require('../util/cache');
class BackToTop extends Component { class BackToTop extends Component {
render() { render() {
const { head, title, url_for } = this.props; const { title, jsUrl } = this.props;
if (head) {
return <link rel="stylesheet" href={url_for('/css/back-to-top.css')} />;
}
return <Fragment> return <Fragment>
<a id="back-to-top" title={title} href="javascript:;"> <a id="back-to-top" title={title} href="javascript:;">
<i class="fas fa-chevron-up"></i> <i class="fas fa-chevron-up"></i>
</a> </a>
<script src={url_for('/js/back-to-top.js')} defer={true}></script> <script src={jsUrl} defer={true}></script>
</Fragment>; </Fragment>;
} }
@ -20,9 +17,11 @@ class BackToTop extends Component {
module.exports = cacheComponent(BackToTop, 'plugin.backtotop', props => { module.exports = cacheComponent(BackToTop, 'plugin.backtotop', props => {
const { helper, head } = props; const { helper, head } = props;
if (head) {
return null;
}
return { return {
head,
title: helper.__('plugin.backtotop'), title: helper.__('plugin.backtotop'),
url_for: helper.url_for jsUrl: helper.url_for('/js/back-to-top.js')
}; };
}); });

6
layout/plugin/gallery.jsx
View File

@ -3,7 +3,7 @@ const { cacheComponent } = require('../util/cache');
class Gallery extends Component { class Gallery extends Component {
render() { render() {
const { head, lightGallery, justifiedGallery, url_for } = this.props; const { head, jsUrl, lightGallery, justifiedGallery } = this.props;
if (head) { if (head) {
return <Fragment> return <Fragment>
<link rel="stylesheet" href={lightGallery.cssUrl} /> <link rel="stylesheet" href={lightGallery.cssUrl} />
@ -13,7 +13,7 @@ class Gallery extends Component {
return <Fragment> return <Fragment>
<script src={lightGallery.jsUrl} defer={true}></script> <script src={lightGallery.jsUrl} defer={true}></script>
<script src={justifiedGallery.jsUrl} defer={true}></script> <script src={justifiedGallery.jsUrl} defer={true}></script>
<script src={url_for('/js/gallery.js')} defer={true}></script> <script src={jsUrl} defer={true}></script>
</Fragment>; </Fragment>;
} }
@ -23,7 +23,7 @@ module.exports = cacheComponent(Gallery, 'plugin.gallery', props => {
const { head, helper } = props; const { head, helper } = props;
return { return {
head, head,
url_for: helper.url_for, jsUrl: helper.url_for('/js/gallery.js'),
lightGallery: { lightGallery: {
jsUrl: helper.cdn('lightgallery', '1.6.8', 'dist/js/lightgallery.min.js'), jsUrl: helper.cdn('lightgallery', '1.6.8', 'dist/js/lightgallery.min.js'),
cssUrl: helper.cdn('lightgallery', '1.6.8', 'dist/css/lightgallery.min.css') cssUrl: helper.cdn('lightgallery', '1.6.8', 'dist/css/lightgallery.min.css')

10
layout/plugin/progressbar.jsx
View File

@ -1,14 +1,11 @@
const { Component, Fragment } = require('inferno'); const { Component } = require('inferno');
const { cacheComponent } = require('../util/cache'); const { cacheComponent } = require('../util/cache');
class ProgressBar extends Component { class ProgressBar extends Component {
render() { render() {
const { url_for, jsUrl } = this.props; const { jsUrl } = this.props;
return <Fragment> return <script src={jsUrl}></script>;
<link rel="stylesheet" href={url_for('/css/progressbar.css')} />
<script src={jsUrl}></script>
</Fragment>;
} }
} }
@ -18,7 +15,6 @@ module.exports = cacheComponent(ProgressBar, 'plugin.progressbar', props => {
return null; return null;
} }
return { return {
url_for: helper.url_for,
jsUrl: helper.cdn('pace-js', '1.0.2', 'pace.min.js') jsUrl: helper.cdn('pace-js', '1.0.2', 'pace.min.js')
}; };
}); });

6
layout/search/baidu.jsx
View File

@ -3,7 +3,7 @@ const { cacheComponent } = require('../util/cache');
class Baidu extends Component { class Baidu extends Component {
render() { render() {
const { url, hint, url_for } = this.props; const { url, hint } = this.props;
const js = `(function ($) { const js = `(function ($) {
$('.search-form').on('submit', function (e) { $('.search-form').on('submit', function (e) {
@ -23,7 +23,6 @@ class Baidu extends Component {
})(document, jQuery);`; })(document, jQuery);`;
return <Fragment> return <Fragment>
<link rel="stylesheet" href={url_for('/css/search.css')} />
<div class="searchbox"> <div class="searchbox">
<div class="searchbox-container"> <div class="searchbox-container">
<div class="searchbox-input-wrapper"> <div class="searchbox-input-wrapper">
@ -44,7 +43,6 @@ module.exports = cacheComponent(Baidu, 'search.baidu', props => {
return { return {
url: config.url, url: config.url,
hint: helper.__('search.hint'), hint: helper.__('search.hint')
url_for: helper.url_for
}; };
}); });

6
layout/search/google_cse.jsx
View File

@ -3,7 +3,7 @@ const { cacheComponent } = require('../util/cache');
class Google extends Component { class Google extends Component {
render() { render() {
const { cx, hint, url_for } = this.props; const { cx, hint } = this.props;
const js1 = `(function() { const js1 = `(function() {
var cx = '${cx}'; var cx = '${cx}';
@ -51,7 +51,6 @@ class Google extends Component {
})(document, jQuery);`; })(document, jQuery);`;
return <Fragment> return <Fragment>
<link rel="stylesheet" href={url_for('/css/search.css')} />
<div class="searchbox google-cse-search"> <div class="searchbox google-cse-search">
<div class="searchbox-container"> <div class="searchbox-container">
<div class="searchbox-input-wrapper"> <div class="searchbox-input-wrapper">
@ -82,7 +81,6 @@ module.exports = cacheComponent(Google, 'search.google', props => {
return { return {
cx: search.cx, cx: search.cx,
hint: helper.__('search.hint'), hint: helper.__('search.hint')
url_for: helper.url_for
}; };
}); });

13
layout/search/insight.jsx
View File

@ -3,7 +3,7 @@ const { cacheComponent } = require('../util/cache');
class Insight extends Component { class Insight extends Component {
render() { render() {
const { hint, translation, url_for } = this.props; const { hint, translation, contentUrl, jsUrl, cssUrl } = this.props;
const js = `(function (window) { const js = `(function (window) {
var INSIGHT_CONFIG = { var INSIGHT_CONFIG = {
@ -14,14 +14,13 @@ class Insight extends Component {
TAGS: '${translation.tags}', TAGS: '${translation.tags}',
UNTITLED: '${translation.untitled}', UNTITLED: '${translation.untitled}',
}, },
CONTENT_URL: '${url_for('/content.json')}', CONTENT_URL: '${contentUrl}',
}; };
window.INSIGHT_CONFIG = INSIGHT_CONFIG; window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);`; })(window);`;
return <Fragment> return <Fragment>
<link rel="stylesheet" href={url_for('/css/search.css')} /> <link rel="stylesheet" href={cssUrl} />
<link rel="stylesheet" href={url_for('/css/insight.css')} />
<div class="searchbox ins-search"> <div class="searchbox ins-search">
<div class="searchbox-container ins-search-container"> <div class="searchbox-container ins-search-container">
<div class="searchbox-input-wrapper"> <div class="searchbox-input-wrapper">
@ -34,7 +33,7 @@ class Insight extends Component {
</div> </div>
</div> </div>
<script dangerouslySetInnerHTML={{ __html: js }}></script> <script dangerouslySetInnerHTML={{ __html: js }}></script>
<script src={url_for('/js/insight.js')} defer={true}></script> <script src={jsUrl} defer={true}></script>
</Fragment>; </Fragment>;
} }
} }
@ -51,6 +50,8 @@ module.exports = cacheComponent(Insight, 'search.insight', props => {
tags: helper.__('insight.tags'), tags: helper.__('insight.tags'),
untitled: helper.__('insight.untitled') untitled: helper.__('insight.untitled')
}, },
url_for: helper.url_for contentUrl: helper.url_for('/content.json'),
jsUrl: helper.url_for('/js/insight.js'),
cssUrl: helper.url_for('/css/insight.css')
}; };
}); });

2
layout/widget/archives.jsx
View File

@ -15,7 +15,7 @@ class Archives extends Component {
<h3 class="menu-label">{title}</h3> <h3 class="menu-label">{title}</h3>
<ul class="menu-list"> <ul class="menu-list">
{items.map(archive => <li> {items.map(archive => <li>
<a class="level is-marginless" href={archive.url}> <a class="level is-mobile is-marginless" href={archive.url}>
<span class="level-start"> <span class="level-start">
<span class="level-item">{archive.name}</span> <span class="level-item">{archive.name}</span>
</span> </span>

4
layout/widget/categories.jsx
View File

@ -4,7 +4,7 @@ const { cacheComponent } = require('../util/cache');
class Categories extends Component { class Categories extends Component {
renderList(categories, showCount) { renderList(categories, showCount) {
return categories.map(category => <li> return categories.map(category => <li>
<a class="level is-marginless" href={category.url}> <a class="level is-mobile is-marginless" href={category.url}>
<span class="level-start"> <span class="level-start">
<span class="level-item">{category.name}</span> <span class="level-item">{category.name}</span>
</span> </span>
@ -12,7 +12,7 @@ class Categories extends Component {
<span class="level-item tag">{category.count}</span> <span class="level-item tag">{category.count}</span>
</span> : null} </span> : null}
</a> </a>
{category.children.length ? <ul>{this.renderList(category.children, showCount)}</ul> : null} {category.children.length ? <ul class="mr-0">{this.renderList(category.children, showCount)}</ul> : null}
</li>); </li>);
} }

2
layout/widget/links.jsx
View File

@ -16,7 +16,7 @@ class Links extends Component {
hostname = new URL(hostname).hostname; hostname = new URL(hostname).hostname;
} catch (e) { } } catch (e) { }
return <li> return <li>
<a class="level is-mobile" href="<%- links[i] %>" target="_blank" rel="noopener"> <a class="level is-mobile is-mobile" href="<%- links[i] %>" target="_blank" rel="noopener">
<span class="level-left"> <span class="level-left">
<span class="level-item">{i}</span> <span class="level-item">{i}</span>
</span> </span>

8
layout/widget/profile.jsx
View File

@ -34,13 +34,13 @@ class Profile extends Component {
<nav class="level"> <nav class="level">
<div class="level-item has-text-centered" style="flex-shrink: 1"> <div class="level-item has-text-centered" style="flex-shrink: 1">
<div> <div>
<figure class="image is-128x128 has-mb-6"> <figure class="image is-128x128 mx-auto mb-2">
<img class={avatarRounded ? 'is-rounded' : ''} src={avatar} alt={author} /> <img class={avatarRounded ? 'is-rounded' : ''} src={avatar} alt={author} />
</figure> </figure>
{author ? <p class="is-size-4 is-block">{author}</p> : null} {author ? <p class="is-size-4 is-block">{author}</p> : null}
{authorTitle ? <p class="is-size-6 is-block">{authorTitle}</p> : null} {authorTitle ? <p class="is-size-6 is-block">{authorTitle}</p> : null}
{location ? <p class="is-size-6 is-flex is-flex-center has-text-grey"> {location ? <p class="is-size-6 is-flex justify-content-center has-text-grey">
<i class="fas fa-map-marker-alt has-mr-7"></i> <i class="fas fa-map-marker-alt mr-1"></i>
<span>{location}</span> <span>{location}</span>
</p> : null} </p> : null}
</div> </div>
@ -73,7 +73,7 @@ class Profile extends Component {
</div> </div>
</nav> </nav>
{followLink ? <div class="level"> {followLink ? <div class="level">
<a class="level-item button is-link is-rounded" href={followLink} target="_blank" rel="noopener">{followTitle}</a> <a class="level-item button is-primary is-rounded" href={followLink} target="_blank" rel="noopener">{followTitle}</a>
</div> : null} </div> : null}
{this.renderSocialLinks(socialLinks)} {this.renderSocialLinks(socialLinks)}
</div> </div>

39
layout/widget/recent_posts.jsx
View File

@ -1,35 +1,22 @@
const { Component } = require('inferno'); const { Component } = require('inferno');
const { cacheComponent } = require('../util/cache'); const { cacheComponent } = require('../util/cache');
const ArticleMedia = require('../common/article-media');
class RecentPosts extends Component { class RecentPosts extends Component {
render() { render() {
const { title, thumbnail, posts } = this.props; const { title, posts } = this.props;
return <div class="card widget"> return <div class="card widget">
<div class="card-content"> <div class="card-content">
<h3 class="menu-label">{title}</h3> <h3 class="menu-label">{title}</h3>
{posts.map(post => { {posts.map(post => {
const categories = []; return <ArticleMedia
post.categories.forEach((category, i) => { thumbnail={post.thumbnail}
categories.push(<a class="has-link-grey" href={category.url}>{category.name}</a>); url={post.url}
if (i < post.categories.length - 1) { title={post.title}
categories.push(' / '); date={post.date}
} dateXml={post.dateXml}
}); categories={post.categories} />;
return <article class="media">
{thumbnail ? <a href={post.url} class="media-left">
<p class="image is-64x64">
<img class="thumbnail" src={post.thumbnail} alt={post.title} />
</p>
</a> : null}
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" dateTime={post.dateXml}>{post.date}</time></div>
<a href={post.url} class="title has-link-black-ter is-size-6 has-text-weight-normal">{post.title}</a>
{categories.length ? <p class="is-size-7 is-uppercase">{categories}</p> : null}
</div>
</div>
</article>;
})} })}
</div> </div>
</div>; </div>;
@ -37,18 +24,17 @@ class RecentPosts extends Component {
} }
module.exports = cacheComponent(RecentPosts, 'widget.recentposts', props => { module.exports = cacheComponent(RecentPosts, 'widget.recentposts', props => {
const { site, config, helper } = props; const { site, helper } = props;
const { get_thumbnail, url_for, __, date_xml, date } = helper; const { has_thumbnail, get_thumbnail, url_for, __, date_xml, date } = helper;
if (!site.posts.length) { if (!site.posts.length) {
return null; return null;
} }
const thumbnail = config.article && config.article.thumbnail;
const posts = site.posts.sort('date', -1).limit(5).map(post => ({ const posts = site.posts.sort('date', -1).limit(5).map(post => ({
url: url_for(post.link || post.path), url: url_for(post.link || post.path),
title: post.title, title: post.title,
date: date(post.date), date: date(post.date),
dateXml: date_xml(post.date), dateXml: date_xml(post.date),
thumbnail: thumbnail ? get_thumbnail(post) : null, thumbnail: has_thumbnail(post) ? get_thumbnail(post) : null,
categories: post.categories.map(category => ({ categories: post.categories.map(category => ({
name: category.name, name: category.name,
url: url_for(category.path) url: url_for(category.path)
@ -56,7 +42,6 @@ module.exports = cacheComponent(RecentPosts, 'widget.recentposts', props => {
})); }));
return { return {
posts, posts,
thumbnail,
title: __('widget.recents') title: __('widget.recents')
}; };
}); });

4
layout/widget/subscribe_email.jsx
View File

@ -14,14 +14,14 @@ class SubscribeEmail extends Component {
<input type="hidden" value={feedburnerId} name="uri" /> <input type="hidden" value={feedburnerId} name="uri" />
<input type="hidden" name="loc" value="en_US" /> <input type="hidden" name="loc" value="en_US" />
<div class="field has-addons"> <div class="field has-addons">
<div class="control has-icons-left"> <div class="control has-icons-left is-expanded">
<input class="input" name="email" type="email" placeholder="Email" /> <input class="input" name="email" type="email" placeholder="Email" />
<span class="icon is-small is-left"> <span class="icon is-small is-left">
<i class="fas fa-envelope"></i> <i class="fas fa-envelope"></i>
</span> </span>
</div> </div>
<div class="control"> <div class="control">
<input class="button is-link" type="submit" value={buttonTitle} /> <input class="button is-primary" type="submit" value={buttonTitle} />
</div> </div>
{description ? <p class="help">{description}</p> : null} {description ? <p class="help">{description}</p> : null}
</div> </div>

2
layout/widget/tags.jsx
View File

@ -17,7 +17,7 @@ class Tags extends Component {
{tags.map(tag => <div class="control"> {tags.map(tag => <div class="control">
<a class="tags has-addons" href={tag.url}> <a class="tags has-addons" href={tag.url}>
<span class="tag">{tag.name}</span> <span class="tag">{tag.name}</span>
{showCount ? <span class="tag is-grey">{tag.count}</span> : null} {showCount ? <span class="tag is-grey-lightest">{tag.count}</span> : null}
</a> </a>
</div>)} </div>)}
</div> </div>

2
layout/widget/toc.jsx
View File

@ -85,7 +85,7 @@ class Toc extends Component {
if ('id' in toc && 'index' in toc && 'text' in toc) { if ('id' in toc && 'index' in toc && 'text' in toc) {
result = <li> result = <li>
<a class="is-flex" href={'#' + toc.id}> <a class="is-flex" href={'#' + toc.id}>
<span class="has-mr-6">{toc.index}</span> <span class="mr-2">{toc.index}</span>
<span>{toc.text}</span> <span>{toc.text}</span>
</a> </a>
{result} {result}

7
package.json
View File

@ -23,6 +23,9 @@
"mocha": "^6.2.2" "mocha": "^6.2.2"
}, },
"peerDependencies": { "peerDependencies": {
"ajv": "^6.10.2",
"bulma-stylus": "0.8.0",
"deepmerge": "^4.2.2",
"hexo": "^4.0.0", "hexo": "^4.0.0",
"hexo-log": "^1.0.0", "hexo-log": "^1.0.0",
"hexo-pagination": "^1.0.0", "hexo-pagination": "^1.0.0",
@ -31,9 +34,7 @@
"hexo-util": "^1.8.0", "hexo-util": "^1.8.0",
"inferno": "^7.3.3", "inferno": "^7.3.3",
"inferno-create-element": "^7.3.3", "inferno-create-element": "^7.3.3",
"moment": "^2.22.2",
"ajv": "^6.10.2",
"js-yaml": "^3.13.1", "js-yaml": "^3.13.1",
"deepmerge": "^4.2.2" "moment": "^2.22.2"
} }
} }

15
source/css/back-to-top.css
View File

@ -1,15 +0,0 @@
#back-to-top {
position: fixed;
padding: 8px 0;
transition: 0.4s ease opacity, 0.4s ease width, 0.4s ease transform, 0.4s ease border-radius;
opacity: 0;
line-height: 24px;
outline: none;
transform: translateY(120px);
}
#back-to-top.fade-in {
opacity: 1;
}
#back-to-top.rise-up {
transform: translateY(0);
}

545
source/css/base.styl Normal file
View File

@ -0,0 +1,545 @@
bulma-stylus-root = "../../../../node_modules/bulma-stylus/stylus"
/* ---------------------------------
* Override Bulma CSS Framework
* --------------------------------- */
$body-size ?= 14px
$body-background-color ?= #f7f7f7
$family-sans-serif ?= Ubuntu, Roboto, "Open Sans", "Microsoft YaHei", sans-serif
$family-code ?= "Source Code Pro", monospace, "Microsoft YaHei"
$primary ?= $blue
$custom-colors ?= {
grey-lightest: {
'1': $grey-lightest
'2': $grey-darker
}
}
$gap ?= 64px
$tablet ?= 769px
$desktop ?= 1088px
$widescreen ?= 1280px
$fullhd ?= 1472px
$shadow ?= 0 4px 10px rgba(0, 0, 0, 0.05)
$control-height ?= 2.25em
$button-padding-vertical ?= calc(0.375em - 1px)
$card-radius ?= $radius
$card-media-margin ?= 0.75rem
$card-shadow ?= $shadow, 0 0 1px rgba(0,0,0,0.1)
$content-heading-weight ?= $weight-normal
$article-size ?= 1.1rem
// FIXME: https://github.com/groenroos/bulma-stylus/issues/11
@import bulma-stylus-root + "/utilities/initial-variables"
@import bulma-stylus-root + "/utilities/functions"
@import bulma-stylus-root + "/utilities/derived-variables"
$colors = merge($colors, $custom-colors)
@import bulma-stylus-root + "/utilities/animations"
@import bulma-stylus-root + "/utilities/mixins"
@import bulma-stylus-root + "/utilities/controls"
@import bulma-stylus-root + "/base/_all"
@import bulma-stylus-root + "/components/_all"
@import bulma-stylus-root + "/elements/_all"
@import bulma-stylus-root + "/form/_all"
@import bulma-stylus-root + "/grid/_all"
@import bulma-stylus-root + "/layout/_all"
/* ---------------------------------
* Custom Layout
* --------------------------------- */
+widescreen()
.is-1-column .container
.is-2-column .container
max-width: $desktop - 2 * $gap
width: $desktop - 2 * $gap
+fullhd()
.is-2-column .container
max-width: $widescreen - 2 * $gap
width: $widescreen - 2 * $gap
.is-1-column .container
max-width: $desktop - 2 * $gap
width: $desktop - 2 * $gap
+tablet()
.column-main,
.column-left,
.column-right,
.column-right-shadow
&.is-sticky
align-self: flex-start
position: -webkit-sticky
position: sticky
top: .75rem
.column-right-shadow
&.is-sticky
top: 1.5rem
+mobile()
.section
padding: 1.5rem 1rem
.navbar-main
box-shadow: $shadow
.navbar-menu,
.navbar-start,
.navbar-end
align-items: stretch
display: flex
padding: 0
flex-shrink: 0
.navbar-menu
flex-grow: 1
flex-shrink: 0
overflow-x: auto
.navbar-start
justify-content: flex-start
margin-right: auto
.navbar-end
justify-content: flex-end
margin-left: auto
.navbar-item
display: flex
align-items: center
padding: 1.25rem 0.75rem
&.is-active
color: $primary
background-color: transparent
+until($navbar-breakpoint)
.navbar-menu
justify-content: center
box-shadow: none
.navbar-start
margin-right: 0
.navbar-end
margin-left: 0
.card
border-radius: $card-radius
& + .card,
& + .column-right-shadow
margin-top: 1.5rem
&.card-transparent
box-shadow: none
background: transparent
.card-image
overflow: hidden
border-top-left-radius: $card-radius
border-top-right-radius: $card-radius
.media + .media
border: none
margin-top: 0
.content
h1
font-size: 1.75em
h2
font-size: 1.5em
h3
font-size: 1.25em
h4
font-size: 1.125em
h5
font-size: 1em
pre
font-size: 0.85em
code
padding: 0
background: transparent
blockquote
footer
strong + cite
margin-left: 0.5em
/* ---------------------------------
* Font icon fixes
* --------------------------------- */
.fa, .fab, .fal, .far, .fas
line-height: inherit
/* ---------------------------------
* Fix Gist Snippet
* --------------------------------- */
.gist
table
tr:hover
background: transparent
td
border: none
.file
all: initial
/* ---------------------------------
* Fix code highlight
* --------------------------------- */
figure.highlight
padding: 0
width: 100%
position: relative
margin: 1em 0 1em !important
&.folded
.highlight-body
height: 0
pre,
table tr:hover
color: inherit
background: transparent
table
width: auto
tr td
border: none
tr:not(:first-child) td
padding-top: 0
tr:not(:last-child) td
padding-bottom: 0
pre
padding: 0
overflow: visible
.line,
code .hljs
line-height: 1.5rem
figcaption,
.gutter
background: rgba(200, 200, 200, 0.15)
figcaption
padding: .3em .75em
text-align: left
font-style: normal
font-size: .8em
&:after
clear: both
content: " "
display: table
span
font-weight: 500
font-family: $family-code
.fold
a
color: #9a9a9a
a
float: right
margin-left: 0.5em
.fold
margin-right: 0.5em
cursor: pointer
.highlight-body
overflow: auto
.gutter
text-align: right
.tag,
.title,
.number,
.section
display: inherit
font: inherit
margin: inherit
padding: inherit
background: inherit
height: inherit
text-align: inherit
vertical-align: inherit
min-width: inherit
border-radius: inherit
/* ---------------------------------
* Custom Element/Component styles
* --------------------------------- */
article
&.media
.media-content
color: $grey
.title
line-height: inherit
color: $black-ter
&.article
.article-meta,
.article-tags
color: $grey
.article-meta
overflow-x: auto
margin-bottom: 0.5rem
.article-more
@extend .button.is-light
.content
font-size: $article-size
blockquote.pullquote
float: right
max-width: 50%
font-size: 1.15rem
position: relative
a
word-wrap: break-word
footer.footer
background: $white
.level-start
+mobile()
text-align: center
.level-end
.field
flex-wrap: wrap
align-items: center
+mobile()
justify-content: center
margin-top: 1rem
.button
background: transparent
.navbar-logo,
.footer-logo
img
max-height: 1.75rem
.thumbnail
object-fit: cover
width: 100% !important
height: 100% !important
.pagination
.pagination-previous,
.pagination-next
a
color: $black-ter
.pagination-link,
.pagination-previous,
.pagination-next
border: none
background: $white
box-shadow: $shadow
.pagination-link.is-current
background: $primary
.post-navigation
color: $grey
flex-wrap: wrap
justify-content: space-around
.level-item
margin-bottom: 0
.searchbox
display: none
top: 0
left: 0
width: 100%
height: 100%
z-index: 100
background: rgba(0, 0, 0, 0.7)
&.show
display: block
&,
.searchbox-container
position: fixed
.searchbox-container
overflow: hidden
.searchbox-selectable
cursor: pointer
.searchbox-input-wrapper
position: relative
.searchbox-input
width: 100%
border: none
outline: none
font-size: 16px
box-shadow: none
font-weight: 200
border-radius: 0
background: #fff
line-height: 20px
box-sizing: border-box
padding: 12px 28px 12px 20px
border-bottom: 1px solid #e2e2e2
.searchbox-close
top: 50%
right: 6px
width: 20px
height: 20px
line-height: 20px
font-size: 16px
margin-top: -11px
position: absolute
text-align: center
display: inline-block
&:hover
color: $primary
.searchbox-result-wrapper
left: 0
right: 0
top: 45px
bottom: 0
overflow-y: auto
position: absolute
.searchbox-container
left: 50%
top: 100px
width: 540px
z-index: 101
bottom: 100px
margin-left: -270px
box-sizing: border-box
@media screen and (max-width: 559px), screen and (max-height: 479px)
.searchbox .searchbox-container
top: 0
left: 0
margin: 0
width: 100%
height: 100%
background: #f7f7f7
.timeline
margin-left: 1rem
padding-left: 1.5rem
padding-top: 1rem
border-left: 1px solid hsl(0, 0%, 86%)
.media
position: relative
&:before,
&:last-child:after
content: ''
display: block
position: absolute
left: calc(-5px - 1.5rem)
&:before
width: 9px
height: 9px
top: 1.3rem
background: hsl(0, 0%, 86%)
border-radius: 50%
&:first-child:before
top: 0.3rem
&:last-child:after
top: calc(1.3rem + 9px)
width: 9px
bottom: 0
background: white
&:first-child:last-child:after
top: calc(0.3rem + 9px)
.rtl
direction: rtl
.level
&, &.is-mobile
.level-item:not(:last-child)
margin-left: 0.75rem
margin-right: 0
.donate
position: relative
.qrcode
display: none
position: absolute
z-index: 99
bottom: 2.5em
line-height: 0
overflow: hidden
border-radius: 4px
box-shadow: 0 4px 10px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.2)
img
max-width: 280px
&:hover
.qrcode
display: block
&:first-child:not(:last-child)
.qrcode
left: -0.75rem
&:last-child:not(:first-child)
.qrcode
right: -0.75rem
+mobile()
#toc
display: none
position: fixed
margin: 1rem
left: 0
right: 0
bottom: 0
z-index: 100
max-height: calc(100vh - 2rem)
overflow-y: auto
#toc-mask
display: none
position: fixed
top: 0
left: 0
right: 0
bottom: 0
z-index: 99
background: rgba(0, 0, 0, 0.7)
#toc,
#toc-mask
&.is-active
display: block
#back-to-top
position: fixed
padding: 8px 0
transition: 0.4s ease opacity, 0.4s ease width, 0.4s ease transform, 0.4s ease border-radius
opacity: 0
line-height: 24px
outline: none
transform: translateY(120px)
.fade-in
opacity: 1
.rise-up
transform: translateY(0)
.pace
user-select: none
pointer-events: none
.pace-progress
top: 0
right: 100%
width: 100%
height: 2px
z-index: 2000
position: fixed
background: $primary
.pace-inactive
display: none
// Overflow table
.table-overflow
overflow-x: auto
table
width: auto!important
th
word-break: keep-all
// Video container
.video-container
position: relative
padding-bottom: 56.25%
padding-top: 25px
height: 0
iframe
position: absolute
top: 0
left: 0
width: 100%
height: 100%

126
source/css/helper.styl Normal file
View File

@ -0,0 +1,126 @@
/* ---------------------------------
* Spacing helpers
* --------------------------------- */
$spacer ?= 1rem
$spacers ?= 0, $spacer * .25, $spacer * .5, $spacer, $spacer * 1.5, $spacer * 3
for n in (0..5)
.ml-{n}
margin-left: $spacers[n] !important
.mr-{n}
margin-right: $spacers[n] !important
.mx-{n}
@extend .ml-{n}, .mr-{n}
.ml-n{n}
margin-left: - $spacers[n] !important
.mr-n{n}
margin-right: - $spacers[n] !important
.mx-n{n}
@extend .ml-n{n}, .mr-n{n}
.mt-{n}
margin-top: $spacers[n] !important
.mb-{n}
margin-bottom: $spacers[n] !important
.my-{n}
@extend .mt-{n}, .mb-{n}
.mt-n{n}
margin-top: - $spacers[n] !important
.mb-n{n}
margin-bottom: - $spacers[n] !important
.my-n{n}
@extend .mt-n{n}, .mb-n{n}
.pl-{n}
padding-left: $spacers[n] !important
.pr-{n}
padding-right: $spacers[n] !important
.px-{n}
@extend .pl-{n}, .pr-{n}
.pl-n{n}
padding-left: - $spacers[n] !important
.pr-n{n}
padding-right: - $spacers[n] !important
.px-n{n}
@extend .pl-n{n}, .pr-n{n}
.pt-{n}
padding-top: $spacers[n] !important
.pb-{n}
padding-bottom: $spacers[n] !important
.py-{n}
@extend .pt-{n}, .pb-{n}
.pt-n{n}
padding-top: - $spacers[n] !important
.pb-n{n}
padding-bottom: - $spacers[n] !important
.py-n{n}
@extend .pt-n{n}, .pb-n{n}
.ml-auto
margin-left: auto !important
.mr-auto
margin-right: auto !important
.mx-auto
@extend .ml-auto, .mr-auto
.mt-auto
margin-top: auto !important
.mb-auto
margin-bottom: auto !important
.my-auto
@extend .mt-auto, .mb-auto
.pl-auto
margin-left: auto !important
.pr-auto
margin-right: auto !important
.px-auto
@extend .pl-auto, .pr-auto
.pt-auto
margin-top: auto !important
.pb-auto
margin-bottom: auto !important
.py-auto
@extend .pt-auto, .pb-auto
/* ---------------------------------
* Flex helpers
* --------------------------------- */
for n in (0..5)
.order-{n}
order: n
.justify-content-start
justify-content: start !important
.justify-content-center
justify-content: center !important
/* ---------------------------------
* Color helpers
* --------------------------------- */
.link-muted
color: inherit
&:hover
color: $primary !important
/* ---------------------------------
* Font helpers
* --------------------------------- */
.size-small
font-size: .85rem
/* ---------------------------------
* Image helpers
* --------------------------------- */
.image.is-7by3
padding-top: 42.8%
img
bottom: 0
left: 0
position: absolute
right: 0
top: 0

22
source/css/progressbar.css
View File

@ -1,22 +0,0 @@
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #3273dc;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}

94
source/css/search.css
View File

@ -1,94 +0,0 @@
.searchbox {
display: none;
perspective: 50em;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
transform-origin: 0%;
perspective-origin: top center;
}
.searchbox.show {
display: block;
}
.searchbox, .searchbox .searchbox-container {
position: fixed;
}
.searchbox .searchbox-container {
overflow: hidden;
}
.searchbox .searchbox-selectable {
cursor: pointer;
}
.searchbox .searchbox-input-wrapper {
position: relative;
}
.searchbox .searchbox-input-wrapper .searchbox-input {
width: 100%;
border: none;
outline: none;
font-size: 16px;
box-shadow: none;
font-weight: 200;
border-radius: 0;
background: #fff;
line-height: 20px;
box-sizing: border-box;
padding: 12px 28px 12px 20px;
border-bottom: 1px solid #e2e2e2;
}
.searchbox .searchbox-input-wrapper .searchbox-close {
top: 50%;
right: 6px;
width: 20px;
height: 20px;
line-height: 20px;
font-size: 16px;
margin-top: -11px;
position: absolute;
text-align: center;
display: inline-block;
}
.searchbox .searchbox-input-wrapper .searchbox-close:hover {
color: #3273dc;
}
.searchbox .searchbox-result-wrapper {
left: 0;
right: 0;
top: 45px;
bottom: 0;
overflow-y: auto;
position: absolute;
}
.searchbox .searchbox-container {
left: 50%;
top: 100px;
width: 540px;
z-index: 101;
bottom: 100px;
margin-left: -270px;
box-sizing: border-box;
}
@media screen and (max-width: 559px), screen and (max-height: 479px) {
.searchbox .searchbox-container {
top: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
background: #f7f7f7;
}
}

480
source/css/style.styl
View File

@ -1,478 +1,2 @@
family-sans = "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif @import "base"
family-mono = "Source Code Pro", monospace, "Microsoft YaHei" @import "helper"
gap = 64px
screen-tablet = 769px
screen-desktop = 1088px
screen-widescreen = 1280px
screen-fullhd = 1472px
/* ---------------------------------
* Override CSS Framework
* --------------------------------- */
html
font-size: 14px
body
background-color: #f7f7f7
body, button, input, select, textarea
font-family: family-sans
@media screen and (min-width: screen-widescreen)
.is-1-column .container
.is-2-column .container
max-width: screen-desktop - 2 * gap
width: screen-desktop - 2 * gap
@media screen and (min-width: screen-fullhd)
.is-2-column .container
max-width: screen-widescreen - 2 * gap
width: screen-widescreen - 2 * gap
.is-1-column .container
max-width: screen-desktop - 2 * gap
width: screen-desktop - 2 * gap
@media screen and (max-width: screen-tablet - 1)
.section
padding: 1.5rem 1rem
@media screen and (min-width: screen-tablet)
.column-main,
.column-left,
.column-right,
.column-right-shadow
&.is-sticky
align-self: flex-start
position: -webkit-sticky
position: sticky
top: .75rem
.column-right-shadow
&.is-sticky
top: 1.5rem
.tag
&.is-grey
background: #e7e7e7
.card
border-radius: 4px
box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.1)
& + .card,
& + .column-right-shadow
margin-top: 1.5rem
&.card-transparent
box-shadow: none
background: transparent
.card-image
overflow: hidden
border-top-left-radius: 4px
border-top-right-radius: 4px
img.thumbnail
object-fit: cover
width: 100%
height: 100%
.navbar-logo,
.footer-logo
img
max-height: 1.75rem
.navbar-main
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)
.navbar-menu,
.navbar-start,
.navbar-end
align-items: stretch
display: flex
padding: 0
flex-shrink: 0
.navbar-menu
flex-grow: 1
flex-shrink: 0
overflow-x: auto
.navbar-start
justify-content: flex-start
margin-right: auto
.navbar-end
justify-content: flex-end
margin-left: auto
.navbar-item
display: flex
align-items: center
padding: 1.25rem 0.75rem
&.is-active
color: hsl(217, 71%, 53%)
background-color: transparent
@media screen and (max-width: screen-desktop - 1)
.navbar-menu
justify-content: center
box-shadow: none
.navbar-start
margin-right: 0
.navbar-end
margin-left: 0
.footer
background: white
.field
.button
background: transparent
.widget
.media
border: none
.media + .media
margin-top: 0
.menu-list li ul
margin-right: 0
.menu-list a.level
display: flex
.has-text-centered figure.image
margin: auto
.pagination
.pagination-link:not(.is-current), .pagination-previous, .pagination-next
background: white
border: none
.pagination-link, .pagination-previous, .pagination-next
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)
.post-navigation
justify-content: space-around
.level-item
margin-bottom: 0
.timeline
margin-left: 1rem
padding-left: 1.5rem
padding-top: 1rem
border-left: 1px solid hsl(0, 0%, 86%)
.media
position: relative
&:before,
&:last-child:after
content: ''
display: block
position: absolute
left: calc(-5px - 1.5rem)
&:before
width: 9px
height: 9px
top: 1.3rem
background: hsl(0, 0%, 86%)
border-radius: 50%
&:first-child:before
top: 0.3rem
&:last-child:after
top: calc(1.3rem + 9px)
width: 9px
bottom: 0
background: white
&:first-child:last-child:after
top: calc(0.3rem + 9px)
.article
.article-meta
margin-bottom: 0.5rem !important
.content
font-size: 1.1rem
blockquote.pullquote
float: right
max-width: 50%
font-size: 1.15rem
position: relative
a
word-wrap: break-word
.rtl
direction: rtl
.level
&, &.is-mobile
.level-item:not(:last-child)
margin-left: 0.75rem
margin-right: 0
.donate
position: relative
.qrcode
display: none
position: absolute
z-index: 99
bottom: 2.5em
line-height: 0
overflow: hidden
border-radius: 4px
box-shadow: 0 4px 10px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.2)
overflow: hidden
img
max-width: 280px
&:hover
.qrcode
display: block
&:first-child:not(:last-child)
.qrcode
left: -0.75rem
&:last-child:not(:first-child)
.qrcode
right: -0.75rem
@media screen and (max-width: screen-tablet - 1)
#toc
display: none
position: fixed
margin: 1rem
left: 0
right: 0
bottom: 0
z-index: 100
max-height: calc(100vh - 2rem)
overflow-y: auto
#toc-mask
display: none
position: fixed
top: 0
left: 0
right: 0
bottom: 0
z-index: 99
background: rgba(0, 0, 0, 0.7)
#toc,
#toc-mask
&.is-active
display: block
/* ---------------------------------
* Custom modifiers
* --------------------------------- */
.is-borderless
border: none
.is-size-7
font-size: 0.85rem !important
.is-7by1
padding-top: 42.8%
img
bottom: 0
left: 0
position: absolute
right: 0
top: 0
.is-overflow-x-auto
overflow-x: auto !important
.is-flex-grow
flex-grow: 1 !important
.is-flex-wrap
flex-wrap: wrap !important
.is-flex-start
justify-content: start !important
.is-flex-center
justify-content: center !important
.is-flex-middle
align-items: center !important
.has-order-1
order: 1
.has-order-2
order: 2
.has-order-3
order: 3
.has-mr-6
margin-right: 0.5em !important
.has-mb-6
margin-bottom: 0.5em !important
.has-mr-7
margin-right: 0.25em !important
.has-link-grey,
.has-link-black-ter
transition: 0.2s ease
&:hover
color: hsl(217, 71%, 53%) !important
.has-link-grey
color: hsl(0, 0%, 48%) !important
.has-link-black-ter
color: hsl(0, 0%, 14%) !important
@media screen and (max-width: screen-tablet - 1)
.has-text-centered-mobile
text-align: center !important
.is-flex-center-mobile
justify-content: center !important
.has-mt-5-mobile
margin-top: 1em !important
/* ---------------------------------
* Font icon fixes
* --------------------------------- */
.fa, .fab, .fal, .far, .fas
line-height: inherit
/* ---------------------------------
* Fix content elements
* --------------------------------- */
.content
h1, h2, h3, h4, h5, h6
font-weight: 400
h1
font-size: 1.75em
h2
font-size: 1.5em
h3
font-size: 1.25em
h4
font-size: 1.125em
h5
font-size: 1em
code, pre
font-family: family-mono
pre
font-size: 0.85em
code
padding: 0
background: transparent
& > code,
:not(pre) > code
font-size: 0.85em
color: hsl(348, 100%, 61%)
blockquote
footer
strong + cite
margin-left: 0.5em
/* ---------------------------------
* Fix code highlight
* --------------------------------- */
figure.highlight
padding: 0
width: 100%
position: relative
margin: 1em 0 1em !important
&.folded
.highlight-body
height: 0
pre,
table tr:hover
color: inherit
background: transparent
table
width: auto
tr td
border: none
tr:not(:first-child) td
padding-top: 0
tr:not(:last-child) td
padding-bottom: 0
pre
padding: 0
overflow: visible
.line,
code .hljs
line-height: 1.5rem
figcaption,
.gutter
background: rgba(200, 200, 200, 0.15)
figcaption
padding: .3em .75em
text-align: left
font-style: normal
font-size: .8em
&:after
clear: both
content: " "
display: table
span
font-weight: 500
font-family: family-mono
.fold
a
color: #9a9a9a
a
float: right
margin-left: 0.5em
.fold
margin-right: 0.5em
cursor: pointer
.highlight-body
overflow: auto
.gutter
text-align: right
.tag,
.title,
.number,
.section
display: inherit
font: inherit
margin: inherit
padding: inherit
background: inherit
height: inherit
text-align: inherit
vertical-align: inherit
min-width: inherit
border-radius: inherit
/* ---------------------------------
* Overflow Table
* --------------------------------- */
.table-overflow
overflow-x: auto
table
width: auto!important
th
word-break: keep-all
/* ---------------------------------
* Fix Video
* --------------------------------- */
.video-container
position: relative
padding-bottom: 56.25%
padding-top: 25px
height: 0
iframe
position: absolute
top: 0
left: 0
width: 100%
height: 100%
/* ---------------------------------
* Fix Gist Snippet
* --------------------------------- */
.gist
table
tr:hover
background: transparent
td
border: none
.file
all: initial

6
source/js/animation.js
View File

@ -3,6 +3,12 @@
return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments)); return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments));
} }
if ($('.columns .column-right-shadow').length && !$('.columns .column-right-shadow')[0].children.length) {
for (const child of $('.columns .column-right')[0].children) {
$('.columns .column-right-shadow')[0].append(child.cloneNode(true));
}
}
$('body > .navbar, body > .section, body > .footer').forEach(element => { $('body > .navbar, body > .section, body > .footer').forEach(element => {
element.style.transition = '0s'; element.style.transition = '0s';
element.style.opacity = '0'; element.style.opacity = '0';

8
source/js/main.js
View File

@ -1,6 +1,8 @@
/* eslint-disable node/no-unsupported-features/node-builtins */ /* eslint-disable node/no-unsupported-features/node-builtins */
(function($, moment, ClipboardJS, config) { (function($, moment, ClipboardJS, config) {
$('.columns .column-right-shadow').append($('.columns .column-right').children().clone()); if (!$('.columns .column-right-shadow').children().length) {
$('.columns .column-right-shadow').append($('.columns .column-right').children().clone());
}
$('.article img:not(".not-gallery-item")').each(function() { $('.article img:not(".not-gallery-item")').each(function() {
// wrap images with link and add caption if possible // wrap images with link and add caption if possible
@ -27,9 +29,9 @@
function adjustNavbar() { function adjustNavbar() {
const navbarWidth = $('.navbar-main .navbar-start').outerWidth() + $('.navbar-main .navbar-end').outerWidth(); const navbarWidth = $('.navbar-main .navbar-start').outerWidth() + $('.navbar-main .navbar-end').outerWidth();
if ($(document).outerWidth() < navbarWidth) { if ($(document).outerWidth() < navbarWidth) {
$('.navbar-main .navbar-menu').addClass('is-flex-start'); $('.navbar-main .navbar-menu').addClass('justify-content-start');
} else { } else {
$('.navbar-main .navbar-menu').removeClass('is-flex-start'); $('.navbar-main .navbar-menu').removeClass('justify-content-start');
} }
} }
adjustNavbar(); adjustNavbar();