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

css

This commit is contained in:
xaoxuu 2022-10-09 13:42:03 +08:00
parent 93e6a5f9d2
commit 969b26fa1e
11 changed files with 39 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/css/_common/device.styl
View File

@ -1,10 +1,10 @@
.mobile-only .mobile-only
display: none display: none
@media screen and (max-width: $device-tablet) @media screen and (max-width: $device-mobile-max)
display: block !important display: block !important
.mobile-hidden .mobile-hidden
@media screen and (max-width: $device-tablet) @media screen and (max-width: $device-mobile-max)
display: none !important display: none !important
.float-panel .float-panel

1
source/css/_defines/const.styl
View File

@ -2,6 +2,7 @@
$device-mobile-375 = 375px $device-mobile-375 = 375px
$device-mobile-425 = 425px $device-mobile-425 = 425px
$device-mobile = 500px $device-mobile = 500px
$device-mobile-max = 667px
$device-tablet = 768px $device-tablet = 768px
$device-laptop = 1024px $device-laptop = 1024px
$device-desktop = 1440px $device-desktop = 1440px

2
source/css/_defines/theme.styl
View File

@ -30,7 +30,7 @@ set_darkmode()
--card: $dark-card --card: $dark-card
--theme-highlight: $color-theme --theme-highlight: $color-theme
--theme-bg: mix($color-theme, $dark-card, 10) --theme-bg: mix($color-theme, $dark-card, 10)
@media screen and (max-width: $device-tablet) @media screen and (max-width: $device-mobile-max)
--site-bg: $dark-site-bg-mobile --site-bg: $dark-site-bg-mobile
--card: darken($dark-card, 6) --card: darken($dark-card, 6)
--block: darken($dark-block, 4) --block: darken($dark-block, 4)

5
source/css/_layout/layout.styl
View File

@ -21,6 +21,11 @@
// iPad 竖屏 // iPad 竖屏
@media screen and (max-width: $device-tablet) @media screen and (max-width: $device-tablet)
:root
--width-left: 220px
// 手机布局
@media screen and (max-width: $device-mobile-max)
.mobile-only .mobile-only
display: block !important display: block !important
.l_body .l_body

2
source/css/_layout/main.styl
View File

@ -3,7 +3,7 @@
padding-bottom: "calc(1 * %s)" % var(--gap-l) padding-bottom: "calc(1 * %s)" % var(--gap-l)
@media screen and (min-width: 1400px) @media screen and (min-width: 1400px)
margin-left: "calc(2 * %s)" % var(--gap-l) margin-left: "calc(2 * %s)" % var(--gap-l)
margin-right: "calc(2 * %s + %s)" % (var(--gap-l) var(--width-left)) margin-right: "calc(2 * %s + %s / 2)" % (var(--gap-l) var(--width-left))
@media screen and (min-width: $device-tablet) @media screen and (min-width: $device-tablet)
padding-top: "calc(2 * %s)" % var(--gap-l) padding-top: "calc(2 * %s)" % var(--gap-l)
header header

2
source/css/_layout/partial/navbar.styl
View File

@ -54,6 +54,6 @@ nav.cap
a+a a+a
margin-left: 4px margin-left: 4px
@media screen and (max-width: $device-tablet) @media screen and (max-width: $device-mobile-max)
.nav-wrap .nav-wrap
margin-top: 0 margin-top: 0

2
source/css/_layout/tag-plugins/friends.styl
View File

@ -33,7 +33,7 @@
width: 16.66% width: 16.66%
@media screen and (max-width: 820px) @media screen and (max-width: 820px)
width: 20% width: 20%
@media screen and (max-width: $device-tablet) @media screen and (max-width: $device-mobile-max)
width: 16.66% width: 16.66%
@media screen and (max-width: $device-mobile) @media screen and (max-width: $device-mobile)
width: 25% width: 25%

2
source/css/_layout/tag-plugins/sites.styl
View File

@ -26,7 +26,7 @@
grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem) grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
@media screen and (max-width: 900px) @media screen and (max-width: 900px)
grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem) grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
@media screen and (max-width: $device-tablet) @media screen and (max-width: $device-mobile-max)
grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem) grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
@media screen and (max-width: $device-mobile) @media screen and (max-width: $device-mobile)
grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem) grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)

46
source/css/_layout/tag-plugins/timeline.styl
View File

@ -105,44 +105,40 @@
position: -webkit-sticky position: -webkit-sticky
bottom: -0.5rem bottom: -0.5rem
background: var(--card) background: var(--card)
.key, .value span
line-height: 1 line-height: 1.8
&:empty &:empty
display: none display: none
.label:first-child
margin-left: 0
a.comments a.comments
margin-right: 0 margin-right: 0
.tag-plugin.timeline.stellar-timeline-api .body .footer .labels .tag-plugin.timeline.stellar-timeline-api .body .footer .flex
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
font-size: $fs-12 font-size: $fs-12
line-height: 1.8
align-items: stretch align-items: stretch
.tag-plugin.timeline.stellar-timeline-api .body .footer .reactions
display: flex
align-items: stretch
flex-wrap: wrap
font-size: $fs-13
line-height: 1.8
.reaction .reaction
border: 1px dashed var(--block) border-color: var(--block)
display: flex border-style: dashed
align-items: center .item
.tag-plugin.timeline.stellar-timeline-api .body .footer .label
border-width: 1px border-width: 1px
border-style: solid border-style: solid
margin: 2px
border-radius: 4px
padding: 0 0.5rem
display: flex display: flex
align-items: center align-items: center
&.comments
border-width: 0
&:first-child
margin-left: 0
&:last-child
margin-right: 0
.key
margin-right: 4px
.tag-plugin.timeline.stellar-timeline-api .body .footer a.comments .tag-plugin.timeline.stellar-timeline-api .body .footer a.comments
display: flex
align-items: center
border-radius: 4px border-radius: 4px
padding: 0 0.5rem padding: 0 0.5rem
color: white color: white
@ -154,11 +150,3 @@
&:hover &:hover
background: $color-hover background: $color-hover
.tag-plugin.timeline.stellar-timeline-api .body .footer .label,
.tag-plugin.timeline.stellar-timeline-api .body .footer .reaction
margin: 0 2px
border-radius: 4px
padding: 0 0.5rem
.key
margin-right: 4px

2
source/css/_layout/tag-plugins/toc.styl
View File

@ -33,6 +33,6 @@ details.toc[open] >div.body
margin-top: 0 margin-top: 0
@media screen and (max-width: $device-tablet) @media screen and (max-width: $device-mobile-max)
.tag-plugin.toc[display=mobile] .tag-plugin.toc[display=mobile]
display: block !important display: block !important

10
source/js/plugins/timeline.js
View File

@ -73,26 +73,26 @@ const StellarTimeline = {
cell += '<p class="title">' + item.title + '</p>'; cell += '<p class="title">' + item.title + '</p>';
cell += marked.parse(item.body); cell += marked.parse(item.body);
cell += '<div class="footer">'; cell += '<div class="footer">';
cell += '<div class="labels">'; cell += '<div class="flex labels">';
item.labels.forEach((label, i) => { item.labels.forEach((label, i) => {
cell += '<div class="label ' + label.name + '" style="background:#' + label.color + '12;border-color:#' + label.color + '22">'; cell += '<div class="item label ' + label.name + '" style="background:#' + label.color + '12;border-color:#' + label.color + '22">';
cell += '<span>' + label.name + '</span>'; cell += '<span>' + label.name + '</span>';
cell += '</div>'; cell += '</div>';
}); });
cell += '</div>'; cell += '</div>';
cell += '<div class="reactions">'; cell += '<div class="flex reactions">';
if (item.reactions.total_count > 0) { if (item.reactions.total_count > 0) {
for (let key of Object.keys(StellarTimeline.reactions)) { for (let key of Object.keys(StellarTimeline.reactions)) {
let num = item.reactions[key]; let num = item.reactions[key];
if (num > 0) { if (num > 0) {
cell += '<div class="reaction ' + key + '">'; cell += '<div class="item reaction ' + key + '">';
cell += '<span class="key ' + key + '">' + StellarTimeline.reactions[key] + '</span>'; cell += '<span class="key ' + key + '">' + StellarTimeline.reactions[key] + '</span>';
cell += '<span class="value ' + key + '">' + item.reactions[key] + '</span>'; cell += '<span class="value ' + key + '">' + item.reactions[key] + '</span>';
cell += '</div>'; cell += '</div>';
} }
} }
} }
cell += '<a class="comments" href="' + item.html_url + '">'; cell += '<a class="item comments" href="' + item.html_url + '">';
cell += '<span class="key comments">💬</span>'; cell += '<span class="key comments">💬</span>';
cell += '<span class="value comments">' + item.comments + '</span>'; cell += '<span class="value comments">' + item.comments + '</span>';
cell += '</a>'; cell += '</a>';