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

refactor(style): minor style fixes and improve

pull/588/head
ppoffice 2020-01-04 00:32:07 -05:00
parent 4d3fec581a
commit 4b899bb38a
11 changed files with 54 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
include/util/console.js
View File

@ -1,6 +1,6 @@
let chalk;
try {
chalk = require('chalk');
chalk = require('chalk'); // eslint-disable-line node/no-extraneous-require
} catch (e) { }
module.exports = new Proxy({}, {
@ -8,8 +8,8 @@ module.exports = new Proxy({}, {
if (chalk) {
return chalk[prop];
}
return function () {
return function() {
return arguments.length === 1 ? arguments[0] : arguments;
}.bind(obj);
};
}
});

2
layout/common/article-media.jsx
View File

@ -20,7 +20,7 @@ module.exports = class extends Component {
</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="title is-6"><a href={url} class="link-muted">{title}</a></p>
<p class="is-uppercase">{categoryTags.length ? categoryTags : null}</p>
</div>
</article>;

4
layout/common/article.jsx
View File

@ -66,7 +66,7 @@ module.exports = class extends Component {
</div>
</div> : null}
{/* Title */}
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal has-text-black-ter">
<h1 class="title is-3 is-size-4-mobile">
{index ? <a class="link-muted" href={url_for(page.link || page.path)}>{page.title}</a> : page.title}
</h1>
{/* Content/Excerpt */}
@ -79,7 +79,7 @@ module.exports = class extends Component {
})}
</div> : null}
{/* "Read more" button */}
{index && page.excerpt ? <a class="article-more button is-small" href={`${url_for(page.path)}#more`}>{__('article.more')}</a> : null}
{index && page.excerpt ? <a class="article-more button is-small size-small" href={`${url_for(page.path)}#more`}>{__('article.more')}</a> : null}
{/* Share button */}
{!index ? <Share config={config} page={page} helper={helper} /> : null}
</article>

2
layout/common/comment.jsx
View File

@ -12,7 +12,7 @@ module.exports = class extends Component {
return <div class="card">
<div class="card-content">
<h3 class="title is-5 has-text-weight-normal">{__('article.comments')}</h3>
<h3 class="title is-5">{__('article.comments')}</h3>
{(() => {
try {
const Comment = require('../comment/' + comment.type);

2
layout/common/footer.jsx
View File

@ -36,7 +36,7 @@ class Footer extends Component {
{Object.keys(links).map(name => {
const link = links[name];
return <p class="control">
<a class={`button is-white ${link.icon ? 'is-large' : ''}`} target="_blank" rel="noopener" title={name} href={link.url}>
<a class={`button is-transparent ${link.icon ? 'is-large' : ''}`} target="_blank" rel="noopener" title={name} href={link.url}>
{link.icon ? <i class={link.icon}></i> : name}
</a>
</p>;

6
layout/misc/paginator.jsx
View File

@ -27,12 +27,12 @@ module.exports = class extends Component {
for (const i of range) {
if (l) {
if (i - l === 2) {
elements.push(<li><a class="pagination-link has-text-black-ter" href={getPageUrl(l + 1)}>{l + 1}</a></li>);
elements.push(<li><a class="pagination-link" href={getPageUrl(l + 1)}>{l + 1}</a></li>);
} else if (i - l !== 1) {
elements.push(<li><span class="pagination-ellipsis has-text-black-ter" dangerouslySetInnerHTML={{ __html: '&hellip;' }}></span></li>);
elements.push(<li><span class="pagination-ellipsis" dangerouslySetInnerHTML={{ __html: '&hellip;' }}></span></li>);
}
}
elements.push(<li><a class={`pagination-link${c === i ? ' is-current' : ' has-text-black-ter'}`} href={getPageUrl(i)}>{i}</a></li>);
elements.push(<li><a class={`pagination-link${c === i ? ' is-current' : ''}`} href={getPageUrl(i)}>{i}</a></li>);
l = i;
}
return elements;

14
layout/widget/profile.jsx
View File

@ -9,7 +9,7 @@ class Profile extends Component {
}
return <div class="level is-mobile">
{links.filter(link => typeof link === 'object').map(link => {
return <a class="level-item button is-white is-marginless"
return <a class="level-item button is-transparent is-marginless"
target="_blank" rel="noopener" title={link.name} href={link.url}>
{'icon' in link ? <i class={link.icon}></i> : link.name}
</a>;
@ -32,14 +32,14 @@ class Profile extends Component {
return <div class="card widget">
<div class="card-content">
<nav class="level">
<div class="level-item has-text-centered" style="flex-shrink: 1">
<div class="level-item has-text-centered flex-shrink-1">
<div>
<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}
{author ? <p class="title is-size-4 is-block line-height-inherit">{author}</p> : null}
{authorTitle ? <p class="is-size-6 is-block">{authorTitle}</p> : null}
{location ? <p class="is-size-6 is-flex justify-content-center has-text-grey">
{location ? <p class="is-size-6 is-flex justify-content-center">
<i class="fas fa-map-marker-alt mr-1"></i>
<span>{location}</span>
</p> : null}
@ -51,7 +51,7 @@ class Profile extends Component {
<div>
<p class="heading">{counter.post.title}</p>
<a href={counter.post.url}>
<p class="title has-text-weight-normal">{counter.post.count}</p>
<p class="title">{counter.post.count}</p>
</a>
</div>
</div>
@ -59,7 +59,7 @@ class Profile extends Component {
<div>
<p class="heading">{counter.category.title}</p>
<a href={counter.category.url}>
<p class="title has-text-weight-normal">{counter.category.count}</p>
<p class="title">{counter.category.count}</p>
</a>
</div>
</div>
@ -67,7 +67,7 @@ class Profile extends Component {
<div>
<p class="heading">{counter.tag.title}</p>
<a href={counter.tag.url}>
<p class="title has-text-weight-normal">{counter.tag.count}</p>
<p class="title">{counter.tag.count}</p>
</a>
</div>
</div>

28
source/css/base.styl
View File

@ -25,6 +25,8 @@ $fullhd ?= 1472px
$shadow ?= 0 4px 10px rgba(0, 0, 0, 0.05)
$title-weight ?= $weight-normal
$control-height ?= 2.25em
$button-padding-vertical ?= calc(0.375em - 1px)
@ -121,14 +123,14 @@ $colors = merge($colors, $custom-colors)
.navbar-end
margin-left: 0
.title
color: $black-ter
.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
@ -268,14 +270,18 @@ figure.highlight
/* ---------------------------------
* Custom Element/Component styles
* --------------------------------- */
* --------------------------------- */
.button.is-transparent
@extend .button.is-white
background: transparent !important
article
&.media
.media-content
color: $grey
.title
margin: 0
line-height: inherit
color: $black-ter
&.article
.article-meta,
.article-tags
@ -307,8 +313,6 @@ footer.footer
+mobile()
justify-content: center
margin-top: 1rem
.button
background: transparent
.navbar-logo,
.footer-logo
@ -321,6 +325,8 @@ footer.footer
height: 100% !important
.pagination
.pagination-link,
.pagination-ellipsis,
.pagination-previous,
.pagination-next
a
@ -470,6 +476,10 @@ footer.footer
.qrcode
right: -0.75rem
.gallery-item
.caption
color: $grey
+mobile()
#toc
display: none
@ -503,9 +513,9 @@ footer.footer
line-height: 24px
outline: none
transform: translateY(120px)
.fade-in
&.fade-in
opacity: 1
.rise-up
&.rise-up
transform: translateY(0)
.pace

10
source/css/helper.styl
View File

@ -87,7 +87,7 @@ for n in (0..5)
* --------------------------------- */
for n in (0..5)
.order-{n}
order: n
order: n !important
.justify-content-start
@ -96,6 +96,9 @@ for n in (0..5)
.justify-content-center
justify-content: center !important
.flex-shrink-1
flex-shrink: 1 !important
/* ---------------------------------
* Color helpers
@ -110,7 +113,10 @@ for n in (0..5)
* Font helpers
* --------------------------------- */
.size-small
font-size: .85rem
font-size: .85rem !important
.line-height-inherit
line-height: inherit !important
/* ---------------------------------

12
source/js/animation.js
View File

@ -14,9 +14,11 @@
element.style.opacity = '0';
});
document.querySelector('body > .navbar').style.transform = 'translateY(-100px)';
['.column-main > .card',
[
'.column-main > .card, .column-main > .pagination, .column-main > .post-navigation',
'.column-left > .card, .column-right-shadow > .card',
'.column-right > .card'].forEach(selector => {
'.column-right > .card'
].forEach(selector => {
$(selector).forEach(element => {
element.style.transition = '0s';
element.style.opacity = '0';
@ -30,9 +32,11 @@
element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
});
document.querySelector('body > .navbar').style.transform = 'translateY(0)';
['.column-main > .card',
[
'.column-main > .card, .column-main > .pagination, .column-main > .post-navigation',
'.column-left > .card, .column-right-shadow > .card',
'.column-right > .card'].forEach(selector => {
'.column-right > .card'
].forEach(selector => {
let i = 1;
$(selector).forEach(element => {
setTimeout(() => {

2
source/js/main.js
View File

@ -9,7 +9,7 @@
if ($(this).parent('a').length === 0) {
$(this).wrap('<a class="gallery-item" href="' + $(this).attr('src') + '"></a>');
if (this.alt) {
$(this).after('<div class="has-text-centered is-size-6 has-text-grey caption">' + this.alt + '</div>');
$(this).after('<p class="has-text-centered is-size-6 caption">' + this.alt + '</p>');
}
}
});