refactor(styles): organize stylus & style fixes
ppoffice
parent
c0e2cb1a9b
commit
ae6161ac09
|
|
@ -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">
|
||||
<br> A simple, delicate, and modern theme for the static site generator Hexo.
|
||||
<br>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
const moment = require('moment');
|
||||
const { Component, Fragment } = require('inferno');
|
||||
const Paginator = require('./misc/paginator');
|
||||
const ArticleMedia = require('./common/article-media');
|
||||
|
||||
module.exports = class extends Component {
|
||||
render() {
|
||||
|
|
@ -12,34 +13,22 @@ module.exports = class extends Component {
|
|||
function renderArticleList(posts, year, month = 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">
|
||||
<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">
|
||||
{posts.map(post => {
|
||||
const categories = [];
|
||||
post.categories.forEach((category, i) => {
|
||||
categories.push(<a class="has-link-grey" href={url_for(category.path)}>{category.name}</a>);
|
||||
if (i < post.categories.length - 1) {
|
||||
categories.push(' / ');
|
||||
}
|
||||
});
|
||||
return <article class="media">
|
||||
{has_thumbnail(post) ? <a href={url_for(post.link || post.path)} class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img class="thumbnail" src={get_thumbnail(post)} alt={post.title || get_thumbnail(post)} />
|
||||
</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>;
|
||||
const categories = post.categories.map(category => ({
|
||||
url: url_for(category.path),
|
||||
name: category.name
|
||||
}));
|
||||
return <ArticleMedia
|
||||
thumbnail={has_thumbnail(post) ? get_thumbnail(post) : null}
|
||||
url={url_for(post.link || post.path)}
|
||||
title={post.title}
|
||||
date={date(post.date)}
|
||||
dateXml={date_xml(post.date)}
|
||||
categories={categories} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
}
|
||||
};
|
||||
|
|
@ -26,24 +26,24 @@ module.exports = class extends Component {
|
|||
<div class="card">
|
||||
{/* Thumbnail */}
|
||||
{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)} />
|
||||
</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)} />
|
||||
</span>}
|
||||
</div> : null}
|
||||
{/* Metadata */}
|
||||
<div 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">
|
||||
<article class={`card-content article${'direction' in page ? ' ' + page.direction : ''}`} role="article">
|
||||
{page.layout !== 'page' ? <div class="article-meta size-small is-uppercase level is-mobile">
|
||||
<div class="level-left">
|
||||
{/* 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 */}
|
||||
{page.categories && page.categories.length ? <span class="level-item">
|
||||
{(() => {
|
||||
const categories = [];
|
||||
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) {
|
||||
categories.push(<span> / </span>);
|
||||
}
|
||||
|
|
@ -52,7 +52,7 @@ module.exports = class extends Component {
|
|||
})()}
|
||||
</span> : null}
|
||||
{/* 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 time = moment.duration((words / 150.0) * 60, 'seconds');
|
||||
|
|
@ -60,60 +60,47 @@ module.exports = class extends Component {
|
|||
})()}
|
||||
</span> : null}
|
||||
{/* Visitor counter */}
|
||||
{plugins && plugins.busuanzi === true ? <span class="level-item has-text-grey" id="busuanzi_container_page_pv"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: '<i class="far fa-eye"></i>' + _p('plugin.visit', ' <span id="busuanzi_value_page_pv">0</span>')
|
||||
}}></span> : null}
|
||||
{plugins && plugins.busuanzi === true ? <span class="level-item" id="busuanzi_container_page_pv" dangerouslySetInnerHTML={{
|
||||
__html: '<i class="far fa-eye"></i>' + _p('plugin.visit', ' <span id="busuanzi_value_page_pv">0</span>')
|
||||
}}></span> : null}
|
||||
</div>
|
||||
</div> : null}
|
||||
{/* Title */}
|
||||
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
|
||||
{index ? <a class="has-link-black-ter" href={url_for(page.link || page.path)}>{page.title}</a> : page.title}
|
||||
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal has-text-black-ter">
|
||||
{index ? <a class="link-muted" href={url_for(page.link || page.path)}>{page.title}</a> : page.title}
|
||||
</h1>
|
||||
{/* Content/Excerpt */}
|
||||
<div class="content" dangerouslySetInnerHTML={{ __html: index && page.excerpt ? page.excerpt : page.content }}></div>
|
||||
{/* Tags */}
|
||||
{!index && page.tags && page.tags.length ? <div class="level is-size-7 is-uppercase">
|
||||
<div class="level-start">
|
||||
<div class="level-item">
|
||||
<span class="is-size-6 has-text-grey has-mr-7">#</span>
|
||||
{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>
|
||||
{!index && page.tags && page.tags.length ? <div class="article-tags size-small is-uppercase mb-4">
|
||||
<span class="mr-2">#</span>
|
||||
{page.tags.map(tag => {
|
||||
return <a class="link-muted mr-2" rel="tag" href={url_for(tag.path)}>{tag.name}</a>;
|
||||
})}
|
||||
</div> : null}
|
||||
{/* "Read more" button */}
|
||||
{index && page.excerpt ? <div class="level is-mobile">
|
||||
<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}
|
||||
{index && page.excerpt ? <a class="article-more button is-small" href={`${url_for(page.path)}#more`}>{__('article.more')}</a> : null}
|
||||
{/* Share button */}
|
||||
{!index ? <Share config={config} page={page} helper={helper} /> : null}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{/* Donate button */}
|
||||
{!index ? <Donates config={config} helper={helper} /> : null}
|
||||
{/* Post navigation */}
|
||||
{!index && (page.prev || page.next) ? <div class="card card-transparent">
|
||||
<div class="level post-navigation is-flex-wrap is-mobile">
|
||||
{page.prev ? <div class="level-start">
|
||||
<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>
|
||||
<span class="level-item">{page.prev.title}</span>
|
||||
</a>
|
||||
</div> : null}
|
||||
{page.next ? <div class="level-end">
|
||||
<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>
|
||||
<i class="level-item fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</div> : null}
|
||||
</div>
|
||||
</div> : null}
|
||||
{!index && (page.prev || page.next) ? <nav class="post-navigation mt-4 level is-mobile">
|
||||
{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)}>
|
||||
<i class="level-item fas fa-chevron-left"></i>
|
||||
<span class="level-item">{page.prev.title}</span>
|
||||
</a>
|
||||
</div> : null}
|
||||
{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)}>
|
||||
<span class="level-item">{page.next.title}</span>
|
||||
<i class="level-item fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</div> : null}
|
||||
</nav> : null}
|
||||
{/* Comment */}
|
||||
{!index ? <Comment config={config} page={page} helper={helper} /> : null}
|
||||
</Fragment>;
|
||||
|
|
|
|||
|
|
@ -18,13 +18,13 @@ class Footer extends Component {
|
|||
return <footer class="footer">
|
||||
<div class="container">
|
||||
<div class="level">
|
||||
<div class="level-start has-text-centered-mobile">
|
||||
<a class="footer-logo is-block has-mb-6" href={siteUrl}>
|
||||
<div class="level-start">
|
||||
<a class="footer-logo is-block mb-2" href={siteUrl}>
|
||||
{logo && logo.text ? logo.text : <img src={logoUrl} alt={siteTitle} height="28" />}
|
||||
</a>
|
||||
<p class="is-size-7">
|
||||
<p class="size-small">
|
||||
<span dangerouslySetInnerHTML={{ __html: `© ${siteYear} ${author || siteTitle}` }}></span>
|
||||
Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> &
|
||||
Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> &
|
||||
<a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
|
||||
{showVisitorCounter ? <br /> : null}
|
||||
{showVisitorCounter ? <span id="busuanzi_container_site_uv"
|
||||
|
|
@ -32,7 +32,7 @@ class Footer extends Component {
|
|||
</p>
|
||||
</div>
|
||||
<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 => {
|
||||
const link = links[name];
|
||||
return <p class="control">
|
||||
|
|
|
|||
|
|
@ -136,7 +136,6 @@ module.exports = class extends Component {
|
|||
{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}
|
||||
{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={fontcdn('Ubuntu:400,600|Source+Code+Pro')} />
|
||||
{hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '9.12.0', 'styles/' + hlTheme + '.css')} /> : null}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ class Navbar extends Component {
|
|||
|
||||
return <nav class="navbar navbar-main">
|
||||
<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}>
|
||||
{logo && logo.text ? logo.text : <img src={logoUrl} alt={siteTitle} height="28" />}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ function getColumnVisibilityClass(columnCount, position) {
|
|||
}
|
||||
|
||||
function getColumnOrderClass(position) {
|
||||
return position === 'left' ? 'has-order-1' : 'has-order-3';
|
||||
return position === 'left' ? 'order-1' : 'order-3';
|
||||
}
|
||||
|
||||
function isColumnSticky(config, position) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const { cacheComponent } = require('../util/cache');
|
|||
|
||||
class Alipay extends Component {
|
||||
render() {
|
||||
const { title, qrcode, url_for } = this.props;
|
||||
const { title, qrcode } = this.props;
|
||||
if (!qrcode) {
|
||||
return <div class="notification is-danger">
|
||||
You forgot to set the <code>qrcode</code> for Alipay.
|
||||
|
|
@ -15,7 +15,7 @@ class Alipay extends Component {
|
|||
<i class="fab fa-alipay"></i>
|
||||
</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>;
|
||||
}
|
||||
}
|
||||
|
|
@ -24,8 +24,7 @@ module.exports = cacheComponent(Alipay, 'donate.alipay', props => {
|
|||
const { donate, helper } = props;
|
||||
|
||||
return {
|
||||
qrcode: donate.qrcode,
|
||||
title: helper.__('donate.' + donate.type),
|
||||
url_for: helper.url_for
|
||||
qrcode: helper.url_for(donate.qrcode)
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@ const { cacheComponent } = require('../util/cache');
|
|||
|
||||
class BuyMeACoffee extends Component {
|
||||
render() {
|
||||
const { title, url, url_for } = this.props;
|
||||
const { title, url } = this.props;
|
||||
if (!url) {
|
||||
return <div class="notification is-danger">
|
||||
You forgot to set the <code>url</code> for "Buy me a coffee".
|
||||
Please set it in <code>_config.yml</code>.
|
||||
</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)',
|
||||
'border-color': 'transparent',
|
||||
'color': 'white'
|
||||
|
|
@ -27,8 +27,7 @@ module.exports = cacheComponent(BuyMeACoffee, 'donate.buymeacoffee', props => {
|
|||
const { donate, helper } = props;
|
||||
|
||||
return {
|
||||
url: donate.url,
|
||||
title: helper.__('donate.' + donate.type),
|
||||
url_for: helper.url_for
|
||||
url: helper.url_for(donate.url),
|
||||
title: helper.__('donate.' + donate.type)
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@ const { cacheComponent } = require('../util/cache');
|
|||
|
||||
class Patreon extends Component {
|
||||
render() {
|
||||
const { title, url, url_for } = this.props;
|
||||
const { title, url } = this.props;
|
||||
if (!url) {
|
||||
return <div class="notification is-danger">
|
||||
You forgot to set the <code>url</code> for Patreon.
|
||||
Please set it in <code>_config.yml</code>.
|
||||
</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">
|
||||
<i class="fab fa-patreon"></i>
|
||||
</span>
|
||||
|
|
@ -23,8 +23,7 @@ module.exports = cacheComponent(Patreon, 'donate.petreon', props => {
|
|||
const { donate, helper } = props;
|
||||
|
||||
return {
|
||||
url: donate.url,
|
||||
title: helper.__('donate.' + donate.type),
|
||||
url_for: helper.url_for
|
||||
url: helper.url_for(donate.url),
|
||||
title: helper.__('donate.' + donate.type)
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@ module.exports = cacheComponent(Paypal, 'donate.paypal', props => {
|
|||
return {
|
||||
business: donate.business,
|
||||
currencyCode: donate.currency_code,
|
||||
title: helper.__('donate.' + donate.type),
|
||||
url_for: helper.url_for
|
||||
title: helper.__('donate.' + donate.type)
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const { cacheComponent } = require('../util/cache');
|
|||
|
||||
class Wechat extends Component {
|
||||
render() {
|
||||
const { title, qrcode, url_for } = this.props;
|
||||
const { title, qrcode } = this.props;
|
||||
if (!qrcode) {
|
||||
return <div class="notification is-danger">
|
||||
You forgot to set the <code>qrcode</code> for Wechat.
|
||||
|
|
@ -15,7 +15,7 @@ class Wechat extends Component {
|
|||
<i class="fab fa-weixin"></i>
|
||||
</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>;
|
||||
}
|
||||
}
|
||||
|
|
@ -24,8 +24,7 @@ module.exports = cacheComponent(Wechat, 'donate.wechat', props => {
|
|||
const { donate, helper } = props;
|
||||
|
||||
return {
|
||||
qrcode: donate.qrcode,
|
||||
title: helper.__('donate.' + donate.type),
|
||||
url_for: helper.url_for
|
||||
qrcode: helper.url_for(donate.qrcode),
|
||||
title: helper.__('donate.' + donate.type)
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ module.exports = class extends Component {
|
|||
<div class="columns">
|
||||
<div class={classname({
|
||||
column: true,
|
||||
'has-order-2': true,
|
||||
'order-2': true,
|
||||
'column-main': true,
|
||||
'is-12': columnCount === 1,
|
||||
'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
|
||||
|
|
|
|||
|
|
@ -38,18 +38,16 @@ module.exports = class extends Component {
|
|||
return elements;
|
||||
}
|
||||
|
||||
return <div class="card card-transparent">
|
||||
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
|
||||
<div class={`pagination-previous${current > 1 ? '' : ' is-invisible is-hidden-mobile'}`}>
|
||||
<a class="is-flex-grow has-text-black-ter" href={getPageUrl(current - 1)}>{prevTitle}</a>
|
||||
</div>
|
||||
<div class={`pagination-next${current < total ? '' : ' is-invisible is-hidden-mobile'}`}>
|
||||
<a class="is-flex-grow has-text-black-ter" href={getPageUrl(current + 1)}>{nextTitle}</a>
|
||||
</div>
|
||||
<ul class="pagination-list is-hidden-mobile">
|
||||
{pagination(current, total)}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>;
|
||||
return <nav class="pagination is-centered mt-4" role="navigation" aria-label="pagination">
|
||||
<div class={`pagination-previous${current > 1 ? '' : ' is-invisible is-hidden-mobile'}`}>
|
||||
<a href={getPageUrl(current - 1)}>{prevTitle}</a>
|
||||
</div>
|
||||
<div class={`pagination-next${current < total ? '' : ' is-invisible is-hidden-mobile'}`}>
|
||||
<a href={getPageUrl(current + 1)}>{nextTitle}</a>
|
||||
</div>
|
||||
<ul class="pagination-list is-hidden-mobile">
|
||||
{pagination(current, total)}
|
||||
</ul>
|
||||
</nav>;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ class AnimeJs extends Component {
|
|||
if (this.props.head) {
|
||||
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;
|
||||
return {
|
||||
head,
|
||||
url_for: helper.url_for
|
||||
jsUrl: helper.url_for('/js/animation.js')
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,16 +3,13 @@ const { cacheComponent } = require('../util/cache');
|
|||
|
||||
class BackToTop extends Component {
|
||||
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>
|
||||
<a id="back-to-top" title={title} href="javascript:;">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</a>
|
||||
<script src={url_for('/js/back-to-top.js')} defer={true}></script>
|
||||
<script src={jsUrl} defer={true}></script>
|
||||
</Fragment>;
|
||||
|
||||
}
|
||||
|
|
@ -20,9 +17,11 @@ class BackToTop extends Component {
|
|||
|
||||
module.exports = cacheComponent(BackToTop, 'plugin.backtotop', props => {
|
||||
const { helper, head } = props;
|
||||
if (head) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
head,
|
||||
title: helper.__('plugin.backtotop'),
|
||||
url_for: helper.url_for
|
||||
jsUrl: helper.url_for('/js/back-to-top.js')
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const { cacheComponent } = require('../util/cache');
|
|||
|
||||
class Gallery extends Component {
|
||||
render() {
|
||||
const { head, lightGallery, justifiedGallery, url_for } = this.props;
|
||||
const { head, jsUrl, lightGallery, justifiedGallery } = this.props;
|
||||
if (head) {
|
||||
return <Fragment>
|
||||
<link rel="stylesheet" href={lightGallery.cssUrl} />
|
||||
|
|
@ -13,7 +13,7 @@ class Gallery extends Component {
|
|||
return <Fragment>
|
||||
<script src={lightGallery.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>;
|
||||
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@ module.exports = cacheComponent(Gallery, 'plugin.gallery', props => {
|
|||
const { head, helper } = props;
|
||||
return {
|
||||
head,
|
||||
url_for: helper.url_for,
|
||||
jsUrl: helper.url_for('/js/gallery.js'),
|
||||
lightGallery: {
|
||||
jsUrl: helper.cdn('lightgallery', '1.6.8', 'dist/js/lightgallery.min.js'),
|
||||
cssUrl: helper.cdn('lightgallery', '1.6.8', 'dist/css/lightgallery.min.css')
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
const { Component, Fragment } = require('inferno');
|
||||
const { Component } = require('inferno');
|
||||
const { cacheComponent } = require('../util/cache');
|
||||
|
||||
class ProgressBar extends Component {
|
||||
render() {
|
||||
const { url_for, jsUrl } = this.props;
|
||||
const { jsUrl } = this.props;
|
||||
|
||||
return <Fragment>
|
||||
<link rel="stylesheet" href={url_for('/css/progressbar.css')} />
|
||||
<script src={jsUrl}></script>
|
||||
</Fragment>;
|
||||
return <script src={jsUrl}></script>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +15,6 @@ module.exports = cacheComponent(ProgressBar, 'plugin.progressbar', props => {
|
|||
return null;
|
||||
}
|
||||
return {
|
||||
url_for: helper.url_for,
|
||||
jsUrl: helper.cdn('pace-js', '1.0.2', 'pace.min.js')
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const { cacheComponent } = require('../util/cache');
|
|||
|
||||
class Baidu extends Component {
|
||||
render() {
|
||||
const { url, hint, url_for } = this.props;
|
||||
const { url, hint } = this.props;
|
||||
|
||||
const js = `(function ($) {
|
||||
$('.search-form').on('submit', function (e) {
|
||||
|
|
@ -23,7 +23,6 @@ class Baidu extends Component {
|
|||
})(document, jQuery);`;
|
||||
|
||||
return <Fragment>
|
||||
<link rel="stylesheet" href={url_for('/css/search.css')} />
|
||||
<div class="searchbox">
|
||||
<div class="searchbox-container">
|
||||
<div class="searchbox-input-wrapper">
|
||||
|
|
@ -44,7 +43,6 @@ module.exports = cacheComponent(Baidu, 'search.baidu', props => {
|
|||
|
||||
return {
|
||||
url: config.url,
|
||||
hint: helper.__('search.hint'),
|
||||
url_for: helper.url_for
|
||||
hint: helper.__('search.hint')
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const { cacheComponent } = require('../util/cache');
|
|||
|
||||
class Google extends Component {
|
||||
render() {
|
||||
const { cx, hint, url_for } = this.props;
|
||||
const { cx, hint } = this.props;
|
||||
|
||||
const js1 = `(function() {
|
||||
var cx = '${cx}';
|
||||
|
|
@ -51,7 +51,6 @@ class Google extends Component {
|
|||
})(document, jQuery);`;
|
||||
|
||||
return <Fragment>
|
||||
<link rel="stylesheet" href={url_for('/css/search.css')} />
|
||||
<div class="searchbox google-cse-search">
|
||||
<div class="searchbox-container">
|
||||
<div class="searchbox-input-wrapper">
|
||||
|
|
@ -82,7 +81,6 @@ module.exports = cacheComponent(Google, 'search.google', props => {
|
|||
|
||||
return {
|
||||
cx: search.cx,
|
||||
hint: helper.__('search.hint'),
|
||||
url_for: helper.url_for
|
||||
hint: helper.__('search.hint')
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const { cacheComponent } = require('../util/cache');
|
|||
|
||||
class Insight extends Component {
|
||||
render() {
|
||||
const { hint, translation, url_for } = this.props;
|
||||
const { hint, translation, contentUrl, jsUrl, cssUrl } = this.props;
|
||||
|
||||
const js = `(function (window) {
|
||||
var INSIGHT_CONFIG = {
|
||||
|
|
@ -14,14 +14,13 @@ class Insight extends Component {
|
|||
TAGS: '${translation.tags}',
|
||||
UNTITLED: '${translation.untitled}',
|
||||
},
|
||||
CONTENT_URL: '${url_for('/content.json')}',
|
||||
CONTENT_URL: '${contentUrl}',
|
||||
};
|
||||
window.INSIGHT_CONFIG = INSIGHT_CONFIG;
|
||||
})(window);`;
|
||||
|
||||
return <Fragment>
|
||||
<link rel="stylesheet" href={url_for('/css/search.css')} />
|
||||
<link rel="stylesheet" href={url_for('/css/insight.css')} />
|
||||
<link rel="stylesheet" href={cssUrl} />
|
||||
<div class="searchbox ins-search">
|
||||
<div class="searchbox-container ins-search-container">
|
||||
<div class="searchbox-input-wrapper">
|
||||
|
|
@ -34,7 +33,7 @@ class Insight extends Component {
|
|||
</div>
|
||||
</div>
|
||||
<script dangerouslySetInnerHTML={{ __html: js }}></script>
|
||||
<script src={url_for('/js/insight.js')} defer={true}></script>
|
||||
<script src={jsUrl} defer={true}></script>
|
||||
</Fragment>;
|
||||
}
|
||||
}
|
||||
|
|
@ -51,6 +50,8 @@ module.exports = cacheComponent(Insight, 'search.insight', props => {
|
|||
tags: helper.__('insight.tags'),
|
||||
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')
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ class Archives extends Component {
|
|||
<h3 class="menu-label">{title}</h3>
|
||||
<ul class="menu-list">
|
||||
{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-item">{archive.name}</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const { cacheComponent } = require('../util/cache');
|
|||
class Categories extends Component {
|
||||
renderList(categories, showCount) {
|
||||
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-item">{category.name}</span>
|
||||
</span>
|
||||
|
|
@ -12,7 +12,7 @@ class Categories extends Component {
|
|||
<span class="level-item tag">{category.count}</span>
|
||||
</span> : null}
|
||||
</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>);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ class Links extends Component {
|
|||
hostname = new URL(hostname).hostname;
|
||||
} catch (e) { }
|
||||
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-item">{i}</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -34,13 +34,13 @@ class Profile extends Component {
|
|||
<nav class="level">
|
||||
<div class="level-item has-text-centered" style="flex-shrink: 1">
|
||||
<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} />
|
||||
</figure>
|
||||
{author ? <p class="is-size-4 is-block">{author}</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">
|
||||
<i class="fas fa-map-marker-alt has-mr-7"></i>
|
||||
{location ? <p class="is-size-6 is-flex justify-content-center has-text-grey">
|
||||
<i class="fas fa-map-marker-alt mr-1"></i>
|
||||
<span>{location}</span>
|
||||
</p> : null}
|
||||
</div>
|
||||
|
|
@ -73,7 +73,7 @@ class Profile extends Component {
|
|||
</div>
|
||||
</nav>
|
||||
{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}
|
||||
{this.renderSocialLinks(socialLinks)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,22 @@
|
|||
const { Component } = require('inferno');
|
||||
const { cacheComponent } = require('../util/cache');
|
||||
const ArticleMedia = require('../common/article-media');
|
||||
|
||||
class RecentPosts extends Component {
|
||||
render() {
|
||||
const { title, thumbnail, posts } = this.props;
|
||||
const { title, posts } = this.props;
|
||||
|
||||
return <div class="card widget">
|
||||
<div class="card-content">
|
||||
<h3 class="menu-label">{title}</h3>
|
||||
{posts.map(post => {
|
||||
const categories = [];
|
||||
post.categories.forEach((category, i) => {
|
||||
categories.push(<a class="has-link-grey" href={category.url}>{category.name}</a>);
|
||||
if (i < post.categories.length - 1) {
|
||||
categories.push(' / ');
|
||||
}
|
||||
});
|
||||
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>;
|
||||
return <ArticleMedia
|
||||
thumbnail={post.thumbnail}
|
||||
url={post.url}
|
||||
title={post.title}
|
||||
date={post.date}
|
||||
dateXml={post.dateXml}
|
||||
categories={post.categories} />;
|
||||
})}
|
||||
</div>
|
||||
</div>;
|
||||
|
|
@ -37,18 +24,17 @@ class RecentPosts extends Component {
|
|||
}
|
||||
|
||||
module.exports = cacheComponent(RecentPosts, 'widget.recentposts', props => {
|
||||
const { site, config, helper } = props;
|
||||
const { get_thumbnail, url_for, __, date_xml, date } = helper;
|
||||
const { site, helper } = props;
|
||||
const { has_thumbnail, get_thumbnail, url_for, __, date_xml, date } = helper;
|
||||
if (!site.posts.length) {
|
||||
return null;
|
||||
}
|
||||
const thumbnail = config.article && config.article.thumbnail;
|
||||
const posts = site.posts.sort('date', -1).limit(5).map(post => ({
|
||||
url: url_for(post.link || post.path),
|
||||
title: post.title,
|
||||
date: date(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 => ({
|
||||
name: category.name,
|
||||
url: url_for(category.path)
|
||||
|
|
@ -56,7 +42,6 @@ module.exports = cacheComponent(RecentPosts, 'widget.recentposts', props => {
|
|||
}));
|
||||
return {
|
||||
posts,
|
||||
thumbnail,
|
||||
title: __('widget.recents')
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@ class SubscribeEmail extends Component {
|
|||
<input type="hidden" value={feedburnerId} name="uri" />
|
||||
<input type="hidden" name="loc" value="en_US" />
|
||||
<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" />
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input class="button is-link" type="submit" value={buttonTitle} />
|
||||
<input class="button is-primary" type="submit" value={buttonTitle} />
|
||||
</div>
|
||||
{description ? <p class="help">{description}</p> : null}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ class Tags extends Component {
|
|||
{tags.map(tag => <div class="control">
|
||||
<a class="tags has-addons" href={tag.url}>
|
||||
<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>
|
||||
</div>)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ class Toc extends Component {
|
|||
if ('id' in toc && 'index' in toc && 'text' in toc) {
|
||||
result = <li>
|
||||
<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>
|
||||
</a>
|
||||
{result}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,9 @@
|
|||
"mocha": "^6.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"ajv": "^6.10.2",
|
||||
"bulma-stylus": "0.8.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"hexo": "^4.0.0",
|
||||
"hexo-log": "^1.0.0",
|
||||
"hexo-pagination": "^1.0.0",
|
||||
|
|
@ -31,9 +34,7 @@
|
|||
"hexo-util": "^1.8.0",
|
||||
"inferno": "^7.3.3",
|
||||
"inferno-create-element": "^7.3.3",
|
||||
"moment": "^2.22.2",
|
||||
"ajv": "^6.10.2",
|
||||
"js-yaml": "^3.13.1",
|
||||
"deepmerge": "^4.2.2"
|
||||
"moment": "^2.22.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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%
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,478 +1,2 @@
|
|||
family-sans = "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif
|
||||
family-mono = "Source Code Pro", monospace, "Microsoft YaHei"
|
||||
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
|
||||
@import "base"
|
||||
@import "helper"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@
|
|||
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 => {
|
||||
element.style.transition = '0s';
|
||||
element.style.opacity = '0';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
/* eslint-disable node/no-unsupported-features/node-builtins */
|
||||
(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() {
|
||||
// wrap images with link and add caption if possible
|
||||
|
|
@ -27,9 +29,9 @@
|
|||
function adjustNavbar() {
|
||||
const navbarWidth = $('.navbar-main .navbar-start').outerWidth() + $('.navbar-main .navbar-end').outerWidth();
|
||||
if ($(document).outerWidth() < navbarWidth) {
|
||||
$('.navbar-main .navbar-menu').addClass('is-flex-start');
|
||||
$('.navbar-main .navbar-menu').addClass('justify-content-start');
|
||||
} else {
|
||||
$('.navbar-main .navbar-menu').removeClass('is-flex-start');
|
||||
$('.navbar-main .navbar-menu').removeClass('justify-content-start');
|
||||
}
|
||||
}
|
||||
adjustNavbar();
|
||||
|
|
|
|||
Loading…
Reference in New Issue