mirror/typecho-joe
2
0
Fork 0
mirror of https://dl.bcrjl.com/ghg/HaoOuBa/Joe.git synced 2026-02-17 13:10:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
haoouba
2021-02-13 15:12:18 +08:00
parent 0ff08cbbc0
commit 2d1ecf1e0c
10 changed files with 527 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/joe.global.css
View File

File diff suppressed because one or more lines are too long

181
assets/css/joe.global.scss
View File

@@ -469,19 +469,108 @@
}
&__slideout {
position: fixed;
top: 0;
top: 55px;
bottom: 0;
left: 0;
width: 70%;
width: 80%;
z-index: 990;
background: var(--background);
background: var(--classD);
transform: translate3d(-100%, 0, 0);
visibility: hidden;
transition: transform 0.35s, visibility 0.35s;
overflow-y: auto;
padding: 135px 15px 15px;
&::-webkit-scrollbar {
display: none;
}
&.active {
visibility: visible;
transform: translate3d(0, 0, 0);
}
&-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
object-fit: cover;
z-index: -1;
}
&-author {
display: flex;
margin-bottom: 15px;
background: var(--background);
border-radius: var(--radius-wrap);
overflow: hidden;
padding: 15px;
box-shadow: var(--box-shadow);
.avatar {
width: 50px;
height: 50px;
margin-right: 10px;
border-radius: var(--radius-inner);
}
.info {
.link {
display: block;
line-height: 25px;
font-size: 15px;
font-weight: 500;
color: var(--main);
}
.motto {
line-height: 25px;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--routine);
}
}
}
&-menu {
background: var(--background);
padding: 10px 15px;
border-radius: var(--radius-wrap);
overflow: hidden;
box-shadow: var(--box-shadow);
.link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
color: var(--main);
transition: color 0.15s;
a {
transition: color 0.15s;
color: var(--routine);
}
.icon {
width: 13px;
height: 13px;
fill: var(--minor);
transition: transform 0.15s, fill 0.15s;
}
&.in {
color: var(--theme);
a {
color: var(--theme);
}
.icon {
fill: var(--theme);
transform: rotate(90deg);
}
}
}
.slides {
display: none;
border-left: 1px solid var(--classC);
padding-left: 15px;
.link {
color: var(--routine);
}
}
}
}
}
@@ -960,48 +1049,50 @@
&:last-child {
border-bottom: none;
}
.information .title {
display: flex;
align-items: center;
margin-bottom: 10px;
.badge {
height: 20px;
line-height: 20px;
background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
color: #fff;
font-size: 12px;
margin-right: 5px;
border-radius: 2px;
padding: 0 8px;
white-space: nowrap;
}
h6 {
color: var(--main);
white-space: nowrap;
.information {
.title {
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
color: var(--main);
font-size: 18px;
line-height: 24px;
transition: color 0.35s;
font-weight: normal;
&:hover {
color: var(--theme);
}
.badge {
height: 20px;
line-height: 20px;
background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
color: #fff;
font-size: 12px;
margin-right: 5px;
border-radius: 2px;
padding: 0 8px;
white-space: nowrap;
vertical-align: 2px;
}
}
.abstract {
display: -webkit-box;
-webkit-line-clamp: 2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
color: var(--minor);
word-break: break-all;
line-height: 22px;
opacity: 0.85;
}
}
.information .abstract {
display: -webkit-box;
-webkit-line-clamp: 2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
color: var(--minor);
word-break: break-all;
line-height: 22px;
font-size: 13px;
opacity: 0.85;
}
.line {
position: absolute;
@@ -1027,7 +1118,7 @@
li {
&::after {
content: '/';
color: #e1e1e1;
color: var(--seat);
padding: 0 5px;
}
&:last-child::after {
@@ -1550,10 +1641,18 @@
}
pre[class*='language-'] {
position: relative;
padding: 30px 15px 12px;
margin: 0 0 15px;
padding: 30px 0 0;
border-radius: var(--radius-inner);
font-size: 14px;
overflow: hidden !important;
code[class*='language-'] {
display: block;
max-width: 100%;
overflow: auto;
padding: 0 15px 12px;
border-radius: var(--radius-inner);
}
&::after {
content: '';
position: absolute;
@@ -1562,6 +1661,7 @@
width: 100%;
height: 30px;
background: #2d2d2d;
border-radius: var(--radius-inner) var(--radius-inner) 0 0;
}
&::before {
content: '';
@@ -2298,9 +2398,8 @@
display: flex;
align-items: center;
position: absolute;
top: 10px;
left: 50%;
transform: translate(-50%);
bottom: 10px;
left: 10px;
li {
width: 20px;
height: 20px;

2
assets/css/joe.responsive.css
View File

File diff suppressed because one or more lines are too long

327
assets/css/joe.responsive.scss
View File

@@ -141,79 +141,122 @@ html {
height: 180px;
}
}
.joe_index__banner-recommend {
gap: 10px;
.item {
height: 100px;
}
}
.joe_index__hot-list {
overflow-x: auto;
grid-template-columns: repeat(4, 200px);
&::-webkit-scrollbar {
display: none;
}
}
.joe_index__ad-link .image {
height: 120px;
}
.joe_index__title-notice {
display: none;
}
.joe_index__title-title .item {
margin-right: 15px;
}
.joe_list__item {
.information {
.title {
h6 {
font-size: 16px;
.joe_index {
&__banner {
&-recommend {
gap: 10px;
.item {
height: 100px;
}
}
.abstract {
max-height: 46px;
}
}
&.none {
.information {
height: 130px;
}
}
&.multiple {
.thumbnail {
grid-template-rows: 80px;
gap: 10px;
}
}
&.single {
.thumbnail {
height: 150px;
}
}
&.default {
padding-bottom: 47px;
.thumbnail {
width: 120px;
min-width: 120px;
height: 80px;
min-height: 80px;
margin-right: 10px;
time {
&__hot {
&-list {
overflow-x: auto;
grid-template-columns: repeat(4, 200px);
&::-webkit-scrollbar {
display: none;
}
}
}
&__ad {
&-link {
.image {
height: 120px;
}
}
}
&__title {
&-notice {
display: none;
}
&-title {
.item {
display: none;
&:nth-child(1),
&:nth-child(2) {
display: block;
}
}
}
}
}
.joe_list {
&__item {
.information {
.title {
font-size: 16px;
}
.abstract {
display: none;
}
}
.meta {
.last {
display: none !important;
}
}
&.single {
.thumbnail {
height: 150px;
margin-bottom: 0;
time {
display: none;
}
}
}
&.default {
.information {
.title {
font-size: 15px;
}
}
.thumbnail {
width: 120px;
min-width: 120px;
height: 80px;
min-height: 80px;
margin-right: 10px;
time {
display: none;
}
}
.title {
margin-bottom: 0;
}
.abstract {
margin-top: auto;
}
.meta {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
.items {
width: 100%;
li {
display: none;
&:nth-child(1) {
display: block;
}
&:nth-child(2) {
display: block;
margin-left: auto;
}
&::after {
display: none;
}
}
}
}
}
&.multiple {
.thumbnail {
grid-template-rows: 70px;
gap: 10px;
}
}
&.none {
.information {
height: 120px;
}
.abstract {
display: -webkit-box;
font-size: 13px;
max-height: 45px;
}
}
}
@@ -226,17 +269,6 @@ html {
justify-content: center;
}
}
.joe_detail {
&__friends {
grid-template-columns: repeat(1, 1fr);
}
&__article {
font-size: 14px;
&-player {
height: 230px;
}
}
}
.joe_video {
&__list-item {
grid-template-columns: repeat(3, 1fr);
@@ -261,6 +293,101 @@ html {
&__list-item .thumb {
height: 100px;
}
&__play-player {
height: 200px;
}
}
.joe_detail {
&__title {
font-size: 18px;
}
&__count {
&-information {
width: 100%;
.avatar {
display: none;
}
.meta {
width: 100%;
height: unset;
.author {
display: none;
}
.item {
justify-content: center;
span:nth-child(2),
span:nth-child(3) {
display: none;
}
}
}
}
&-created {
display: none;
}
&::after {
display: none;
}
}
&__friends {
grid-template-columns: repeat(1, 1fr);
}
&__article {
font-size: 14px;
&-player {
height: 220px;
}
pre[class*='language-'] {
font-size: 13px;
}
}
}
.joe_comment {
position: relative;
&__title {
font-size: 20px;
text-align: left;
}
&__respond-type {
position: absolute;
top: 15px;
right: 15px;
}
&__respond-form {
.head {
display: block;
border-bottom: none;
.list {
border-bottom: 1px solid var(--classB);
&:nth-child(2) {
&::before,
&::after {
display: none;
}
}
}
}
.body .text{
height: 140px;
}
}
.comment-list__item-contain .term .avatar {
width: 34px;
height: 34px;
margin-right: 10px;
}
.comment-list__item-contain .term .content .user .agent {
display: none;
}
.comment-list__item-children {
padding-left: 0;
}
.comment-list__item .joe_comment__respond {
margin-left: 0;
&-type {
position: static;
}
}
}
}
}
@@ -357,4 +484,58 @@ html .noaside {
grid-template-rows: 130px;
}
}
@media (max-width: 768px) {
.joe_wallpaper {
&__list {
grid-template-columns: repeat(2, 1fr);
}
}
.joe_detail {
&__friends {
grid-template-columns: repeat(1, 1fr);
}
}
.joe_video {
&__list-item {
grid-template-columns: repeat(3, 1fr);
.item .thumb {
height: 140px;
}
}
&__source-list {
grid-template-columns: repeat(3, 1fr);
}
}
.joe_index {
&__banner {
&-recommend {
gap: 10px;
.item {
height: 100px;
}
}
}
&__ad {
&-link {
.image {
height: 120px;
}
}
}
}
.joe_list {
&__item {
&.single {
.thumbnail {
height: 150px;
}
}
&.multiple {
.thumbnail {
grid-template-rows: 70px;
}
}
}
}
}
}

21
assets/js/joe.global.js
View File

@@ -357,13 +357,13 @@ document.addEventListener('DOMContentLoaded', () => {
if ($('.joe_header__slideout').hasClass('active')) {
$('body').css('overflow', '')
$('.joe_mask').removeClass('active')
$('.joe_header__above-slide').removeClass("active")
$('.joe_header__slideout').removeClass("active")
$('.joe_header__above-slide').removeClass('active')
$('.joe_header__slideout').removeClass('active')
} else {
$('body').css('overflow', 'hidden')
$('.joe_mask').addClass('active')
$('.joe_header__above-slide').addClass("active")
$('.joe_header__slideout').addClass("active")
$('.joe_header__above-slide').addClass('active')
$('.joe_header__slideout').addClass('active')
}
})
}
@@ -397,4 +397,17 @@ document.addEventListener('DOMContentLoaded', () => {
$('.joe_header__above-slide').removeClass('active')
})
}
/* 移动端侧边栏 */
{
$('.joe_header__slideout-menu .panel').on('click', function () {
const panelBox = $(this).parent().parent()
console.log(panelBox);
/* 清除全部内容 */
panelBox.find('.panel').not($(this)).removeClass('in')
panelBox.find('.panel-body').not($(this).siblings('.panel-body')).stop().hide('fast')
/* 激活当前的内容 */
$(this).toggleClass('in').siblings('.panel-body').stop().toggle('fast')
})
}
})

12
assets/js/joe.index.js
View File

@@ -36,8 +36,7 @@ document.addEventListener('DOMContentLoaded', () => {
</a>
<div class="information">
<a href="${_.permalink}" class="title" title="${_.title}">
<span class="badge" style="display: ${_.type === 'sticky' ? 'block' : 'none'}">置顶</span>
<h6>${_.title}</h6>
<span class="badge" style="display: ${_.type === 'sticky' ? 'inline-block' : 'none'}">置顶</span>${_.title}
</a>
<a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a>
<div class="meta">
@@ -63,8 +62,7 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="line"></div>
<div class="information">
<a href="${_.permalink}" class="title" title="${_.title}">
<span class="badge" style="display: ${_.type === 'sticky' ? 'block' : 'none'}">置顶</span>
<h6>${_.title}</h6>
<span class="badge" style="display: ${_.type === 'sticky' ? 'inline-block' : 'none'}">置顶</span>${_.title}
</a>
<div class="meta">
<ul class="items">
@@ -100,8 +98,7 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="line"></div>
<div class="information">
<a href="${_.permalink}" class="title" title="${_.title}">
<span class="badge" style="display: ${_.type === 'sticky' ? 'block' : 'none'}">置顶</span>
<h6>${_.title}</h6>
<span class="badge" style="display: ${_.type === 'sticky' ? 'inline-block' : 'none'}">置顶</span>${_.title}
</a>
<a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a>
</div>
@@ -136,8 +133,7 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="line"></div>
<div class="information">
<a href="${_.permalink}" class="title" title="${_.title}">
<span class="badge" style="display: ${_.type === 'sticky' ? 'block' : 'none'}">置顶</span>
<h6>${_.title}</h6>
<span class="badge" style="display: ${_.type === 'sticky' ? 'inline-block' : 'none'}">置顶</span>${_.title}
</a>
<a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a>
<div class="meta">