iotcat
/
hexo-theme-volantis
mirror of https://github.com/IoTcat/hexo-theme-volantis.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css

Browse Source
master
xaoxuu 4 years ago
parent 695372bf9d
commit b58dc3f3f1
13 changed files with 277 additions and 216 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      layout/_partial/article.ejs
  2. 2
      layout/_third-party/fancybox.ejs
  3. 4
      layout/_widget/qrcode.ejs
  4. 9
      scripts/tags/btns.js
  5. 18
      scripts/tags/fancybox.js
  6. 5
      scripts/tags/tabs.js
  7. 3
      source/css/_layout/article.styl
  8. 197
      source/css/_layout/tag-plugins.styl
  9. 147
      source/css/_tag-plugins/btns.styl
  10. 4
      source/css/_tag-plugins/note.styl
  11. 44
      source/css/_tag-plugins/p.styl
  12. 0
      source/css/_tag-plugins/tabs.styl
  13. 58
      source/css/_third-party/fancybox.styl

2
layout/_partial/article.ejs
Unescape View File

@ -6,7 +6,7 @@
<section class="article typo">
<div class="article-entry" itemprop="articleBody">
<% (post.photos||[]).forEach(function(photo){ %>
<fancybox><img src='<%- url_for(photo) %>'/></fancybox>
<div class='fancybox'><img src='<%- url_for(photo) %>'/></div>
<% }) %>
<%- post.content %>
<% if(theme.layout.on_post.article_footer && (page.layout == 'post')){ %>

2
layout/_third-party/fancybox.ejs vendored
Unescape View File

@ -1,7 +1,7 @@
<script src="<%- theme.plugins.fancybox.js %>"></script>
<script>
let LAZY_LOAD_IMAGE = "<%- config.lazyload %>";
$(".article-entry").find("fancybox").find("img").each(function () {
$(".article-entry").find("div.fancybox").find("img").each(function () {
var element = document.createElement("a");
$(element).attr("data-fancybox", "gallery");
$(element).attr("href", $(this).attr("src"));

4
layout/_widget/qrcode.ejs
Unescape View File

@ -4,10 +4,10 @@
<div class='content article-entry'>
<% (item.images||[]).forEach(function(url){ %>
<% if (item.fancybox == true) { %>
<fancybox><img src='<%- url_for(url) %>'
<div class='fancybox'><img src='<%- url_for(url) %>'
<% if (item.height) { %>
height='<%- item.height %>'
<% } %>></fancybox>
<% } %>></div>
<% } else { %>
<img src='<%- url_for(url) %>'
<% if (item.height) { %>

9
scripts/tags/btns.js
Unescape View File

@ -0,0 +1,9 @@
'use strict';
function postBtns(args, content) {
return `<div class="btns ${args.join(' ')}">
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
</div>`;
}
hexo.extend.tag.register('btns', postBtns, {ends: true});

18
scripts/tags/fancybox.js
Unescape View File

@ -0,0 +1,18 @@
'use strict';
function postFancybox(args, content) {
args = args.join(' ').split(',');
var cls = args[0];
var col = Number(args[1]) || 0;
if (col > 0) {
return `<div class="fancybox ${cls}" col='${col}'>
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
</div>`;
} else {
return `<div class="fancybox ${cls}">
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
</div>`;
}
}
hexo.extend.tag.register('fancybox', postFancybox, {ends: true});

5
scripts/tabs.js → scripts/tags/tabs.js
Unescape View File

@ -1,9 +1,8 @@
/**
* tabs.js | https://theme-next.org/docs/tag-plugins/tabs
* note.js
* transplant from hexo-theme-next
*/
/* global hexo */
'use strict';
function postTabs(args, content) {

3
source/css/_layout/article.styl
Unescape View File

@ -82,7 +82,6 @@
margin-bottom: $gap-line
text-align: $textalign-p
max-width: 100%
overflow: auto
&.has-jax
@ -279,7 +278,7 @@
justify-content: center
padding-left: $gap
padding-right: $gap
&>fancybox, &>img
&>.fancybox, &>img
margin: 0 $gap * 0.5
img

197
source/css/_layout/tag-plugins.styl
Unescape View File

@ -1,197 +0,0 @@
// p
p
&[small]
font-size: $fontsize-meta
&[large]
font-size: $fontsize-large
line-height: 1.3
&[huge]
font-size: $fontsize-huge
line-height: 1.3
&[ultra]
font-size: $fontsize-ultra
line-height: 1.3
&[small],&[large],&[huge],&[ultra]
margin: 0
padding: 0
&[bold]
font-weight: bold
&[left]
text-align: left
&[center]
text-align: center
&[right]
text-align: right
red,p[red]
color: $color-mac-red
yellow,p[yellow]
color: $color-mac-yellow
green,p[green]
color: $color-mac-green
cyan,p[cyan]
color: $color-mac-cyan
blue,p[blue]
color: $color-md-blue
gray,p[gray]
color: #666
// btn
.article
p>btn,li>btn
a
line-height: 1.5em
background: $color-theme
color: $color-inner
padding: 2px 3px 0px 3px
margin: 2px
border-radius: 2px
trans()
&:hover
color: $color-inner
text-decoration: none
background: $color-hover
&[regular]
a
line-height: 3
padding: 9px 16px 7px 16px
i
margin-right: 2px
&[large]
a
line-height: 3
padding: 11px 40px 9px 40px
i
margin: 0 5px 0 -2px
&[center]
display: block
text-align: center
// btns
btns
font-weight: bold
&,b,p,a
font-size: $fontsize-meta
color: $color-p
display: flex
flex-wrap: wrap
margin: 0 -0.5 * $gap
align-items: flex-start
&[wide]
a
padding-left: $gap*2
padding-right: $gap*2
&[fill]
a
flex-grow: 1
width: auto
&[around]
justify-content: space-around
&[center]
justify-content: center
&[grid2]
a
width: "calc(100%/2 - %s)" % $gap
@media screen and (max-width: $device-laptop)
width: "calc(100%/2 - %s)" % $gap
@media screen and (max-width: $device-tablet)
width: "calc(100%/2 - %s)" % $gap
@media screen and (max-width: $device-mobile)
width: "calc(100%/1 - %s)" % $gap
&[grid3]
a
width: "calc(100%/3 - %s)" % $gap
@media screen and (max-width: $device-laptop)
width: "calc(100%/3 - %s)" % $gap
@media screen and (max-width: $device-tablet)
width: "calc(100%/3 - %s)" % $gap
@media screen and (max-width: $device-mobile)
width: "calc(100%/1 - %s)" % $gap
&[grid4]
a
width: "calc(100%/4 - %s)" % $gap
@media screen and (max-width: $device-laptop)
width: "calc(100%/3 - %s)" % $gap
@media screen and (max-width: $device-tablet)
width: "calc(100%/3 - %s)" % $gap
@media screen and (max-width: $device-mobile)
width: "calc(100%/2 - %s)" % $gap
&[grid5]
a
width: "calc(100%/5 - %s)" % $gap
@media screen and (max-width: $device-laptop)
width: "calc(100%/4 - %s)" % $gap
@media screen and (max-width: $device-tablet)
width: "calc(100%/3 - %s)" % $gap
@media screen and (max-width: $device-mobile)
width: "calc(100%/2 - %s)" % $gap
a
trans()
margin: $gap * 0.5
margin-top: "calc(2.25 * %s + 32px)" % $gap
min-width: 120px
font-weight: bold
display: flex
justify-content: flex-start
align-content: center
align-items: center
flex-direction: column
padding: $gap * 0.5
text-align: center
&>img:first-child, &>i:first-child
trans()
height: 64px
width: 64px
box-shadow: $boxshadow-card
&[auto]
width: auto
margin: $gap $gap * 0.5 $gap * 0.25 $gap * 0.5
margin-top: "calc(-1.25 * %s - 32px)" % $gap
border: 2px solid $color-card
background: $color-inner
line-height: 60px
font-size: 28px
&>i:first-child
color: $color-inner
background: $color-theme
background: $color-block
border-radius: 4px
p,b
margin: .25em
font-weight: normal
line-height: 1.25
word-wrap: break-word
b
font-weight: bold
line-height: 1.3
img
margin: .4em auto
&:hover
text-decoration: none
&:not([href])
cursor: default
color: inherit
&[href]:hover
background: alpha($color-hover, 15%)
&,b
color: $color-hover
&>img:first-child, &>i:first-child
transform: scale(1.1) translateY(-8px)
box-shadow: $boxshadow-float
&>i:first-child
background:$color-hover
&[circle] > a
&>img:first-child, &>i:first-child
border-radius: 32px
&[rounded] > a
&>img:first-child, &>i:first-child
border-radius: 16px

147
source/css/_tag-plugins/btns.styl
Unescape View File

@ -0,0 +1,147 @@
.article
p>btn,li>btn
a
line-height: 1.5em
background: $color-theme
color: $color-inner
padding: 2px 3px 0px 3px
margin: 2px
border-radius: 2px
trans()
&:hover
color: $color-inner
text-decoration: none
background: $color-hover
&[regular]
a
line-height: 3
padding: 9px 16px 7px 16px
i
margin-right: 2px
&[large]
a
line-height: 3
padding: 11px 40px 9px 40px
i
margin: 0 5px 0 -2px
&[center]
display: block
text-align: center
// btns
div.btns
margin: 0 -0.5 * $gap
&,b,p,a
font-size: $fontsize-meta
color: $color-p
&,>p
display: flex
flex-wrap: wrap
align-items: flex-start
overflow: visible
&.wide>p>a,&.wide>a
padding-left: $gap*2
padding-right: $gap*2
&.fill>p>a,&.fill>a
flex-grow: 1
width: auto
&.around
&,>p
justify-content: space-around
&.center
&,>p
justify-content: center
&.grid2>p>a,&.grid2>a
width: "calc(100%/2 - %s)" % $gap
@media screen and (max-width: $device-laptop)
width: "calc(100%/2 - %s)" % $gap
@media screen and (max-width: $device-tablet)
width: "calc(100%/2 - %s)" % $gap
@media screen and (max-width: $device-mobile)
width: "calc(100%/1 - %s)" % $gap
&.grid3>p>a,&.grid3>a
width: "calc(100%/3 - %s)" % $gap
@media screen and (max-width: $device-laptop)
width: "calc(100%/3 - %s)" % $gap
@media screen and (max-width: $device-tablet)
width: "calc(100%/3 - %s)" % $gap
@media screen and (max-width: $device-mobile)
width: "calc(100%/1 - %s)" % $gap
&.grid4>p>a,&.grid4>a
width: "calc(100%/4 - %s)" % $gap
@media screen and (max-width: $device-laptop)
width: "calc(100%/3 - %s)" % $gap
@media screen and (max-width: $device-tablet)
width: "calc(100%/3 - %s)" % $gap
@media screen and (max-width: $device-mobile)
width: "calc(100%/2 - %s)" % $gap
&.grid5>p>a,&.grid5>a
width: "calc(100%/5 - %s)" % $gap
@media screen and (max-width: $device-laptop)
width: "calc(100%/4 - %s)" % $gap
@media screen and (max-width: $device-tablet)
width: "calc(100%/3 - %s)" % $gap
@media screen and (max-width: $device-mobile)
width: "calc(100%/2 - %s)" % $gap
a
trans()
margin: $gap * 0.5
margin-top: "calc(1.25 * %s + 32px)" % $gap
min-width: 120px
font-weight: bold
display: flex
justify-content: flex-start
align-content: center
align-items: center
flex-direction: column
padding: $gap * 0.5
text-align: center
&>img:first-child, &>i:first-child
trans()
height: 64px
width: 64px
box-shadow: $boxshadow-card
&.auto
width: auto
margin: $gap $gap * 0.5 $gap * 0.25 $gap * 0.5
margin-top: "calc(-1.25 * %s - 32px)" % $gap
border: 2px solid $color-card
background: $color-inner
line-height: 60px
font-size: 28px
&>i:first-child
color: $color-inner
background: $color-theme
background: $color-block
border-radius: 4px
p,b
margin: .25em
font-weight: normal
line-height: 1.25
word-wrap: break-word
b
font-weight: bold
line-height: 1.3
img
margin: .4em auto
&:hover
text-decoration: none
&:not([href])
cursor: default
color: inherit
&[href]:hover
background: alpha($color-hover, 15%)
&,b
color: $color-hover
&>img:first-child, &>i:first-child
transform: scale(1.1) translateY(-8px)
box-shadow: $boxshadow-float
&>i:first-child
background:$color-hover
&.circle>p a, &.circle a
&>img:first-child, &>i:first-child
border-radius: 32px
&.rounded>p a, &.rounded a
&>img:first-child, &>i:first-child
border-radius: 16px

4
source/css/_tag-plugins/note.styl
Unescape View File

@ -52,7 +52,7 @@ div.note
border-left: $border-codeblock solid mix($color-text, $color-card, 50)
&::before
color: mix($color-text, $color-card, 50)
content: '\f14b'
content: '\f054'
&.quote
background: bg($color-md-blue)
@ -104,6 +104,8 @@ div.note
content: '\f019'
&.up::before
content: '\f102'
&.undo::before
content: '\f2ea'
&.clear

44
source/css/_tag-plugins/p.styl
Unescape View File

@ -0,0 +1,44 @@
article
p
&[left]
text-align: left
&[center]
text-align: center
&[right]
text-align: right
p
&[small]
font-size: $fontsize-meta
&[large]
font-size: $fontsize-large
line-height: 1.3
&[huge]
font-size: $fontsize-huge
line-height: 1.3
&[ultra]
font-size: $fontsize-ultra
line-height: 1.3
&[small],&[large],&[huge],&[ultra]
margin: 0
padding: 0
&[bold]
font-weight: bold
red,p[red]
color: $color-mac-red
yellow,p[yellow]
color: $color-mac-yellow
green,p[green]
color: $color-mac-green
cyan,p[cyan]
color: $color-mac-cyan
blue,p[blue]
color: $color-md-blue
gray,p[gray]
color: #666

0
source/css/_layout/tabs.styl → source/css/_tag-plugins/tabs.styl
Unescape View File

58
source/css/_third-party/fancybox.styl vendored
Unescape View File

@ -1,11 +1,51 @@
fancybox
display: flex
justify-content: center
align-items: center
div.fancybox
margin: $gap-line 0
$sp = 1px
a
margin: 0 1px
padding: 0
overflow: hidden
align-items: stretch
border-radius: 2px
@media screen and (max-width: $device-mobile)
margin: 0 .5px
>img
margin: 0
border-radius: 1px
br
display: none !important
&,>p
display: flex
justify-content: center
align-items: center
flex-wrap: nowrap
padding: 0 !important
&[col]>p
flex-wrap: wrap
justify-content: flex-start
&[col='2']>p>a
width: "calc(50% - 2 * %s)" % $sp
&[col='3']>p>a
width: "calc(33.33% - 2 * %s)" % $sp
&[col='4']>p>a
width: "calc(25% - 2 * %s)" % $sp
&[col='5']>p>a
width: "calc(20% - 2 * %s)" % $sp
&[col='6']>p>a
width: "calc(16.66% - 2 * %s)" % $sp
&[col='7']>p>a
width: "calc(14.2857% - 2 * %s)" % $sp
&[col='8']>p>a
width: "calc(12.5% - 2 * %s)" % $sp
>p
margin: 0
a
margin: $sp
padding: 0
line-height: 0
&.left,&.left>p
justify-content: flex-start
&.center,&.center>p
justify-content: center
&.right,&.right>p
justify-content: flex-end
&.stretch,&.stretch>p
align-items: stretch
img
transform: scale(1.5)

Write Preview
Loading…
Cancel
Save