chore: refactor styles to fit hexo-component-inferno 0.10
This commit is contained in:
ppoffice
parent
0587d69c4b
commit
0856a59d7f
|
|
@ -5,6 +5,33 @@ $article-font-size ?= 1.1rem
|
|||
|
||||
article
|
||||
&.media
|
||||
color: $text-light
|
||||
|
||||
a
|
||||
color: inherit
|
||||
|
||||
&:hover
|
||||
color: $primary
|
||||
|
||||
.image
|
||||
width: 64px
|
||||
height: 64px
|
||||
|
||||
img
|
||||
object-fit: cover
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
.title
|
||||
@extend .is-size-6
|
||||
margin-bottom: .25em
|
||||
|
||||
.date, .categories
|
||||
@extend .is-size-7
|
||||
|
||||
.categories
|
||||
@extend .is-uppercase
|
||||
|
||||
.media-content
|
||||
color: $text-light
|
||||
|
||||
|
|
@ -60,10 +87,11 @@ article
|
|||
footer
|
||||
strong + cite
|
||||
margin-left: .5em
|
||||
|
||||
|
||||
.message.message-immersive
|
||||
border-radius: 0
|
||||
margin: 0 0-($card-content-padding) $card-content-padding 0-($card-content-padding)
|
||||
margin: 0 0 - $card-content-padding $card-content-padding 0 - $card-content-padding
|
||||
|
||||
.message-body
|
||||
border: none
|
||||
|
||||
|
|
@ -116,7 +144,7 @@ article
|
|||
content: '\f25e'
|
||||
font-size: 200px
|
||||
font-family: 'Font Awesome 5 Brands'
|
||||
opacity: 0.1
|
||||
opacity: .1
|
||||
|
||||
.level-left
|
||||
flex-wrap: wrap
|
||||
|
|
@ -130,7 +158,7 @@ article
|
|||
@extend .mb-1
|
||||
|
||||
a
|
||||
@extend .size-small, .has-text-grey
|
||||
@extend .is-size-7, .has-text-grey
|
||||
|
||||
.licensing-meta
|
||||
.level-item
|
||||
|
|
@ -144,8 +172,8 @@ article
|
|||
vertical-align: bottom
|
||||
|
||||
h6
|
||||
@extend .size-small
|
||||
|
||||
@extend .is-size-7
|
||||
|
||||
a
|
||||
color: inherit
|
||||
|
||||
|
|
@ -156,6 +184,7 @@ a
|
|||
flex-shrink: 1
|
||||
word-wrap: break-word
|
||||
white-space: normal
|
||||
|
||||
&.article-nav-next
|
||||
span
|
||||
text-align: right
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@ $body-background-color ?= #f7f7f7
|
|||
$family-sans-serif ?= Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
|
||||
$family-code ?= 'Source Code Pro', monospace, 'Microsoft YaHei'
|
||||
|
||||
$size-7 ?= .85rem
|
||||
$size-small ?= .75rem
|
||||
|
||||
$primary ?= $blue
|
||||
$custom-colors ?= {
|
||||
grey-lightest: {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,15 @@ $donate-qrcode-max-width ?= 280px
|
|||
$donate-qrcode-shadow ?= $card-shadow
|
||||
$donate-qrcode-box-radius ?= $card-radius
|
||||
|
||||
$donate-button-colors ?= {
|
||||
'afdian': rgb(136, 95, 217),
|
||||
'alipay': rgb(0, 160, 232),
|
||||
'buymeacoffee': rgb(255, 221, 0),
|
||||
'paypal': rgb(254, 183, 0),
|
||||
'patreon': rgb(255, 66, 77),
|
||||
'wechat': rgb(26, 173, 25),
|
||||
}
|
||||
|
||||
.donate
|
||||
position: relative
|
||||
|
||||
|
|
@ -32,3 +41,18 @@ $donate-qrcode-box-radius ?= $card-radius
|
|||
&:last-child:not(:first-child)
|
||||
.qrcode
|
||||
right: -.75rem
|
||||
|
||||
for $name, $color in $donate-button-colors
|
||||
&[data-type={'"' + $name + '"'}]
|
||||
color: findColorInvert($color)
|
||||
background-color: $color
|
||||
border-color: transparent
|
||||
|
||||
&:active
|
||||
background-color: darken($color, 5%)
|
||||
|
||||
&:hover
|
||||
background-color: darken($color, 2.5%)
|
||||
|
||||
&:focus:not(:active)
|
||||
box-shadow: 0 0 0 .125em rgba($color, .25)
|
||||
|
|
|
|||
|
|
@ -138,15 +138,6 @@ for n in (0 .. 5)
|
|||
&:hover
|
||||
color: $primary !important
|
||||
|
||||
/* ---------------------------------
|
||||
* Font helpers
|
||||
* --------------------------------- */
|
||||
.size-small
|
||||
font-size: .85rem !important
|
||||
|
||||
.line-height-inherit
|
||||
line-height: inherit !important
|
||||
|
||||
/* ---------------------------------
|
||||
* Image helpers
|
||||
* --------------------------------- */
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@ $pagination-background-color ?= $button-background-color
|
|||
$post-navigation-fg ?= $grey
|
||||
|
||||
.pagination
|
||||
@extend .pagination.is-centered
|
||||
margin-top: 1.5rem
|
||||
|
||||
.pagination-link,
|
||||
.pagination-ellipsis,
|
||||
.pagination-previous,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
.widget
|
||||
.menu-list
|
||||
li
|
||||
ul
|
||||
margin-right: 0
|
||||
|
||||
.level
|
||||
margin-bottom: 0
|
||||
|
||||
.level-left, .level-right, .level-item
|
||||
flex-shrink: 1
|
||||
|
||||
.level-left, .level-right
|
||||
align-items: flex-start
|
||||
|
||||
.tag
|
||||
background: $light-grey
|
||||
color: $white-invert
|
||||
|
||||
.tags
|
||||
.tag:first-child
|
||||
background: $primary
|
||||
color: $primary-invert
|
||||
|
||||
.tag:last-child
|
||||
background: $light-grey
|
||||
color: $white-invert
|
||||
|
|
@ -40,7 +40,7 @@ module.exports = class extends Component {
|
|||
</div> : null}
|
||||
{/* Metadata */}
|
||||
<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">
|
||||
{page.layout !== 'page' ? <div class="article-meta is-size-7 is-uppercase level is-mobile">
|
||||
<div class="level-left">
|
||||
{/* Creation Date */}
|
||||
{page.date && <span class="level-item" dangerouslySetInnerHTML={{
|
||||
|
|
@ -89,14 +89,14 @@ module.exports = class extends Component {
|
|||
{!index && article && article.licenses && Object.keys(article.licenses)
|
||||
? <ArticleLicensing.Cacheable page={page} config={config} helper={helper} /> : null}
|
||||
{/* Tags */}
|
||||
{!index && page.tags && page.tags.length ? <div class="article-tags size-small mb-4">
|
||||
{!index && page.tags && page.tags.length ? <div class="article-tags is-size-7 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 ? <a class="article-more button is-small size-small" href={`${url_for(page.link || page.path)}#more`}>{__('article.more')}</a> : null}
|
||||
{index && page.excerpt ? <a class="article-more button is-small is-size-7" href={`${url_for(page.link || page.path)}#more`}>{__('article.more')}</a> : null}
|
||||
{/* Share button */}
|
||||
{!index ? <Share config={config} page={page} helper={helper} /> : null}
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ class Footer extends Component {
|
|||
<a class="footer-logo is-block mb-2" href={siteUrl}>
|
||||
{footerLogo}
|
||||
</a>
|
||||
<p class="size-small">
|
||||
<p class="is-size-7">
|
||||
<span dangerouslySetInnerHTML={{ __html: `© ${siteYear} ${author || siteTitle}` }}></span>
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ class Profile extends Component {
|
|||
followTitle,
|
||||
socialLinks
|
||||
} = this.props;
|
||||
return <div class="card widget">
|
||||
return <div class="card widget" data-type="profile">
|
||||
<div class="card-content">
|
||||
<nav class="level">
|
||||
<div class="level-item has-text-centered flex-shrink-1">
|
||||
|
|
@ -37,7 +37,7 @@ class Profile extends Component {
|
|||
<figure class="image is-128x128 mx-auto mb-2">
|
||||
<img class={'avatar' + (avatarRounded ? ' is-rounded' : '')} src={avatar} alt={author} />
|
||||
</figure>
|
||||
{author ? <p class="title is-size-4 is-block line-height-inherit">{author}</p> : null}
|
||||
{author ? <p class="title is-size-4 is-block" style={{'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">
|
||||
<i class="fas fa-map-marker-alt mr-1"></i>
|
||||
|
|
|
|||
|
|
@ -258,10 +258,6 @@ article.article
|
|||
.article-licensing
|
||||
background: $black-ter
|
||||
|
||||
.licensing-title
|
||||
a
|
||||
@extend .size-small, .has-text-grey
|
||||
|
||||
.content
|
||||
blockquote
|
||||
background: transparent
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
@import '../../include/style/timeline'
|
||||
@import '../../include/style/search'
|
||||
@import '../../include/style/codeblock'
|
||||
@import '../../include/style/widget'
|
||||
@import '../../include/style/donate'
|
||||
@import '../../include/style/plugin'
|
||||
@import '../../include/style/responsive'
|
||||
|
|
|
|||
Loading…
Reference in New Issue