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-08 16:48:13 +08:00
parent cbc16f9a88
commit ce712c4dec
9 changed files with 103 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
_config.yml
View File

@ -25,7 +25,7 @@ sidebar:
# about: '[关于](/about/)'
# Sidebar widgets
widget_layout:
index: [welcome, recent] # for home/wiki/categories/tags/archives/404 pages
index: [welcome, recent, ghuser_mini] # for home/wiki/categories/tags/archives/404 pages
page: [welcome, toc] # for pages using 'layout:page'
post: [toc, repo_info] # for pages using 'layout:post'
wiki: [toc, repo_info, wiki_more] # for pages using 'layout:wiki'
@ -47,6 +47,13 @@ sidebar:
layout: ghuser
api: https://api.github.com
username: # your github login username
avatar: true
ghuser_mini:
layout: ghuser
header: # GitHub Info
api: https://api.github.com
username: # your github login username
avatar: false
# welcome
welcome:
layout: markdown

21
layout/_partial/sidebar/widgets/ghuser.ejs
View File

@ -23,18 +23,25 @@ function layoutDiv() {
}
el += '<div class="widget-wrap" id="github-user">';
el += '<div class="widget-body fs14 stellar-ghinfo-api" api="' + item.api + '/users/' + item.username + '">';
el += '<div><img no-lazy class="avatar" type="img" id="avatar_url" src="' + config.avatar + '"></div>';
// username
el += '<div class="username" type="text" id="name" href="https://github.com/' + item.username + '">';
el += item.username;
// header
if (item.header && item.header.length > 0) {
el += '<div class="widget-header cap dis-select">';
el += '<span class="name">' + item.header + '</span>';
el += '</div>';
el += '<p type="text" id="bio"></p>';
}
// body
el += '<div class="widget-body stellar-ghinfo-api" api="' + item.api + '/users/' + item.username + '">';
if (item.avatar) {
el += '<div class="avatar" ><img no-lazy type="img" id="avatar_url" src="' + config.avatar + '"></div>';
}
// username
el += '<p class="username" type="text" id="name" href="https://github.com/' + item.username + '">&nbsp;</p>';
el += '<p class="bio" type="text" id="bio">&nbsp;</p>';
el += '<div class="buttons">';
btns.forEach((btn, i) => {
el += '<a class="btn" href="' + btn.href + '">';
el += '<span class="title" type="text" id="' + btn.key + '"></span>';
el += '<span class="title" type="text" id="' + btn.key + '">0</span>';
el += '<span class="desc">' + btn.desc + '</span>';
el += '</a>';
});

25
source/css/_common/base.styl
View File

@ -15,32 +15,9 @@ a
// md > a
p:not([class]), li:not([class])
a:not([class])
position: relative
margin: 0 1px
padding: 2px
&:after
content: ''
position: absolute
border-radius: 2px
bottom: 0
left: 2px
right: 2px
height: 1px
opacity: 0.5
background: $color-link
trans1: all
&:hover
border-bottom: none
color: $color-link
// color: darken($color-hover, 10)
// background: alpha($color-hover, 0.08)
&:after
height: 100%
opacity: 0.2
bottom: 0
left: 0
right: 0
// background-color: alpha($color-hover, 0.08)
text-decoration: underline
hr
color: var(--text-meta)

29
source/css/_layout/md.styl
View File

@ -129,3 +129,32 @@ article.md img
border-radius: $border-image
margin: auto
display: block
article.md
p:not([class]), li:not([class])
a:not([class])
position: relative
text-decoration: none
&:after
content: ''
position: absolute
border-radius: 2px
bottom: 0
left: 2px
right: 2px
height: 1px
opacity: 0.5
background: $color-link
trans1: all
&:hover
border-bottom: none
color: $color-link
// color: darken($color-hover, 10)
// background: alpha($color-hover, 0.08)
&:after
height: 100%
opacity: 0.2
bottom: 0
left: 0
right: 0
// background-color: alpha($color-hover, 0.08)

4
source/css/_layout/partial/paginator.styl
View File

@ -12,6 +12,10 @@
&:hover
.paginator
text-align: center
&.next
border-left: 1px dashed var(--block-border)
&.prev
border-right: 1px dashed var(--block-border)
.current
font-family: $ff-code
color: var(--text-p3)

27
source/css/_layout/sidebar/ghuser.styl
View File

@ -1,25 +1,32 @@
.widget-wrap#github-user
.widget-header+.widget-body
margin: 0.75rem 0
.widget-wrap#github-user .widget-body
display: flex
flex-direction: column
align-items: center
text-align: center
background: var(--card)
border-radius: $border-card
padding: 2rem 1rem 1rem
margin: 'calc(%s + 1.25rem)' % var(--gap-p) 0
padding: 1rem
.widget-wrap#github-user .widget-body .avatar
display: block
border-radius: 100%
margin: auto
max-width: 80%
margin: 1rem auto 1.25rem auto
max-width: 75%
overflow: hidden
img
display: block
@media screen and (max-width: $device-tablet)
max-width: 50%
.widget-wrap#github-user .widget-body .username
font-weight: 900
font-size: $fs-h2
margin-top: 1.5rem
color: var(--text-p0)
margin: 0.5rem 0
.widget-wrap#github-user .widget-body .bio
font-size: $fs-13
margin: 0.5rem 0
.widget-wrap#github-user .widget-body .follow
font-weight: 500
@ -36,14 +43,14 @@
justify-content: center
trans1: background
svg
margin-right: 4px
margin-right: 6px
&:hover
background: $color-hover
.widget-wrap#github-user .widget-body .buttons
margin: 0.75rem 0
margin: 1rem 0
align-self: stretch
display: grid
grid-gap: 2px

5
source/css/_layout/tag-plugins/about.styl
View File

@ -1,6 +1,9 @@
article.md.content>.tag-plugin.about:first-child
margin-top: 0
.tag-plugin.about
background: var(--block)
border-radius: $border-block
border-radius: $border-card
padding: 3rem 2rem 2rem
.about-header
display flex

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

@ -100,11 +100,13 @@
display: flex
flex-wrap: wrap
justify-content: space-between
align-items: center
align-items: stretch
position: sticky
position: -webkit-sticky
bottom: -0.5rem
background: var(--card)
.key, .value
line-height: 1
&:empty
display: none
.label:first-child
@ -113,45 +115,50 @@
margin-right: 0
.tag-plugin.timeline.stellar-timeline-api .body .footer .labels
display: flex
flex-wrap: wrap
font-size: $fs-12
line-height: 1.8
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
border: 1px dashed var(--block-border)
border: 1px dashed var(--block)
display: flex
align-items: center
.tag-plugin.timeline.stellar-timeline-api .body .footer .label
color: white
text-shadow: 0 0 2px rgba(0, 0, 0, 0.3)
border-width: 1px
border-style: solid
display: flex
align-items: center
.tag-plugin.timeline.stellar-timeline-api .body .footer a.comments
border-radius: 64px
border: 1px solid var(--block-border)
display: flex
align-items: center
border-radius: 4px
padding: 0 0.5rem
color: inherit
color: white
trans1: all
margin-left: 2px
background: $color-theme
.key
margin-right: 4px
&:hover
background: $color-theme
border: 1px solid $color-theme
color: var(--card)
background: var(--text-p1)
border: 1px solid var(--text-p1)
background: $color-hover
.tag-plugin.timeline.stellar-timeline-api .body .footer .label,
.tag-plugin.timeline.stellar-timeline-api .body .footer .reaction
margin: 0 0.25rem
border-radius: 64px
margin: 0 2px
border-radius: 4px
padding: 0 0.5rem
.key
margin-right: 4px

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

@ -67,7 +67,7 @@ const StellarTimeline = {
var cell = '<div class="timenode" index="' + i + '">';
cell += '<div class="header">';
let date = new Date(item.created_at);
cell += '<p>' + date + '</p>';
cell += '<p>' + date.toString().replace(/\sGMT([^.]*)/i, "") + '</p>';
cell += '</div>';
cell += '<div class="body">';
cell += '<p class="title">' + item.title + '</p>';
@ -75,8 +75,8 @@ const StellarTimeline = {
cell += '<div class="footer">';
cell += '<div class="labels">';
item.labels.forEach((label, i) => {
cell += '<div class="label ' + label.name + '" style="background:#' + label.color + '">';
cell += label.name;
cell += '<div class="label ' + label.name + '" style="background:#' + label.color + '12;border-color:#' + label.color + '22">';
cell += '<span>' + label.name + '</span>';
cell += '</div>';
});
cell += '</div>';