yexuejc/solo-skins
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

https://github.com/b3log/solo/issues/12805 first screen

Browse Source
This commit is contained in:
Van 2019-07-09 18:25:11 +08:00
parent d7e7b8da21
commit 7788ba3799
No known key found for this signature in database
GPG Key ID: 7059B8783A78F16C
7 changed files with 388 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Bubble/css/base.css
View File

File diff suppressed because one or more lines are too long

319
Bubble/css/base.scss
View File

@ -32,7 +32,7 @@ $fade-lighter: rgba(255, 255, 255, .8) !default;
$gray: #738a94 !default; $gray: #738a94 !default;
$black: #15171a !default; $black: #15171a !default;
$black-bg: #090a0b !default; $black-bg: #090a0b !default;
$link: #26a8ed !default; $link: rgb(119, 182, 255) !default;
body { body {
background-color: #f4f8fb; background-color: #f4f8fb;
@ -49,11 +49,63 @@ a {
.ft__a { .ft__a {
color: $gray; color: $gray;
&:hover { &:hover {
color: rgba($gray, .8); color: rgba($gray, .8);
} }
} }
.fn {
&__progress {
position: fixed;
right: 0;
top: 0;
left: 0;
width: 100%;
height: 2px;
border: none;
background: transparent;
-webkit-appearance: none;
z-index: 1;
&::-webkit-progress-value {
background-color: $link;
transition: width 0.2s ease 0s, opacity 0.6s ease 0s;
}
&::-webkit-progress-bar {
background-color: transparent;
}
}
}
@keyframes fade-in-down {
0% {
opacity: 0;
transform: translateY(-10px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
.wrapper { .wrapper {
max-width: 1040px; max-width: 1040px;
margin: 0 auto; margin: 0 auto;
@ -61,10 +113,15 @@ a {
} }
.header { .header {
color: #fff;
position: relative; position: relative;
#canvas {
position: absolute;
}
&--index { &--index {
height: 100vh; height: 100vh;
&:before { &:before {
content: ""; content: "";
height: 100%; height: 100%;
@ -75,89 +132,113 @@ a {
background-size: cover; background-size: cover;
} }
} }
&--article {
background-color: $black-bg; //&--article {
height: 64px; // background-color: $black-bg;
.header__title { // height: 64px;
display: none; // .header__title {
} // display: none;
.header__nav a { // }
margin-bottom: 0; // .header__nav a {
line-height: 64px; // margin-bottom: 0;
} // line-height: 64px;
} // }
&--other { //}
height: 407px; //&--other {
.header__title { // height: 407px;
display: none; // .header__title {
} // display: none;
&:before { // }
content: ""; // &:before {
height: 100%; // content: "";
position: absolute; // height: 100%;
background: url("../images/header-bg.jpg") no-repeat center center; // position: absolute;
width: 100%; // background: url("../images/header-bg.jpg") no-repeat center center;
top: 0; // width: 100%;
background-size: cover; // top: 0;
filter: brightness(48%); // background-size: cover;
} // filter: brightness(48%);
.header__nav a { // }
margin-bottom: 0; // .header__nav a {
line-height: 64px; // margin-bottom: 0;
} // line-height: 64px;
} // }
//}
&__title { &__title {
position: relative; position: relative;
text-align: center; align-items: center;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
} }
&__h1 { &__h1 {
font-size: 30px; letter-spacing: -1px;
padding-top: 140px; font-weight: 700;
font-weight: normal; font-size: 50px;
img { text-shadow: 0 3px 6px rgba(0, 0, 0, .3);
height: 32px; animation: fade-in-down 1s both;
width: 32px; animation-delay: .5s;
margin-right: 10px;
}
a { a {
color: #fff; color: #fff;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: $fade-lighter; color: $fade-lighter;
} }
} }
} }
&__h2 {
font-size: 20px; &__desc {
font-weight: 300; margin-top: 10px;
margin: 5px 0 70px;
color: $fade-lighter; color: $fade-lighter;
line-height: 24px; line-height: 24px;
} text-shadow: 0 3px 6px rgba(0, 0, 0, .3);
&__nav { animation: fade-in-down .9s both;
position: relative; animation-delay: .3s;
a {
font-size: 13px;
float: left;
line-height: 24px;
color: $fade-lighter;
margin: 0 20px 90px 0;
&:hover {
color: #fff;
text-decoration: none;
}
}
img { &--title {
height: 14px; font-size: 20px;
width: 14px; font-weight: 400;
margin-right: 5px;
}
svg {
margin-top: 5px;
} }
} }
&__down {
animation: bounce 4s 2s infinite;
color: $fade-lighter;
height: 34px;
width: 34px;
position: absolute;
bottom: 10px;
cursor: pointer;
}
//&__nav {
// position: relative;
// a {
// font-size: 13px;
// float: left;
// line-height: 24px;
// color: $fade-lighter;
// margin: 0 20px 90px 0;
// &:hover {
// color: #fff;
// text-decoration: none;
// }
// }
//
// img {
// height: 14px;
// width: 14px;
// margin-right: 5px;
// }
//
// svg {
// margin-top: 5px;
// }
//}
} }
.footer { .footer {
@ -165,8 +246,10 @@ a {
padding: 20px 0; padding: 20px 0;
background-color: $black-bg; background-color: $black-bg;
color: #fff; color: #fff;
a { a {
color: $fade-lighter; color: $fade-lighter;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
@ -182,6 +265,7 @@ a {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -20px; margin: 0 -20px;
.item { .item {
flex: 1 1 300px; flex: 1 1 300px;
overflow: hidden; overflow: hidden;
@ -193,6 +277,7 @@ a {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #fff; background-color: #fff;
&--large { &--large {
flex-direction: row; flex-direction: row;
flex: 1 1 100%; flex: 1 1 100%;
@ -208,15 +293,18 @@ a {
flex: unset; flex: unset;
} }
} }
&:hover { &:hover {
box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04); box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04);
transform: translate3D(0, -1px, 0) scale(1.02); transform: translate3D(0, -1px, 0) scale(1.02);
} }
&__cover { &__cover {
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
height: 200px; height: 200px;
} }
&__main { &__main {
padding: 25px; padding: 25px;
box-sizing: border-box; box-sizing: border-box;
@ -224,6 +312,7 @@ a {
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
} }
&__tag { &__tag {
display: inline-block; display: inline-block;
margin-bottom: 4px; margin-bottom: 4px;
@ -233,22 +322,27 @@ a {
font-weight: 500; font-weight: 500;
letter-spacing: .5px; letter-spacing: .5px;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: rgba($gray, 0.8); color: rgba($gray, 0.8);
} }
} }
&__title { &__title {
margin-bottom: 10px; margin-bottom: 10px;
a { a {
color: $black; color: $black;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: rgba($black, 0.8); color: rgba($black, 0.8);
} }
} }
sup { sup {
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
@ -260,6 +354,7 @@ a {
line-height: 24px; line-height: 24px;
color: $black; color: $black;
flex: 1; flex: 1;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: rgba($black, 0.8); color: rgba($black, 0.8);
@ -270,6 +365,7 @@ a {
float: right; float: right;
margin-top: 18px; margin-top: 18px;
color: $gray; color: $gray;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: rgba($gray, 0.8); color: rgba($gray, 0.8);
@ -279,6 +375,7 @@ a {
&__avatar { &__avatar {
margin-top: 10px; margin-top: 10px;
float: left; float: left;
img { img {
height: 32px; height: 32px;
width: 32px; width: 32px;
@ -302,11 +399,13 @@ a {
line-height: 30px; line-height: 30px;
font-size: 12px; font-size: 12px;
margin: 0 5px 40px; margin: 0 5px 40px;
&:hover, &:hover,
&--active { &--active {
opacity: 0.68; opacity: 0.68;
text-decoration: none; text-decoration: none;
} }
&--omit { &--omit {
background-color: transparent; background-color: transparent;
color: $black; color: $black;
@ -316,13 +415,16 @@ a {
.article { .article {
background-color: #fff; background-color: #fff;
&__bottom { &__bottom {
background-color: #fff; background-color: #fff;
position: relative; position: relative;
.fn__flex { .fn__flex {
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -20px; margin: 0 -20px;
} }
.item { .item {
position: relative; position: relative;
flex: 1 1 300px; flex: 1 1 300px;
@ -333,6 +435,7 @@ a {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
@ -344,16 +447,19 @@ a {
background-size: cover; background-size: cover;
filter: brightness(48%); filter: brightness(48%);
} }
h3 { h3 {
color: #fff; color: #fff;
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;
} }
ul { ul {
padding-left: 0; padding-left: 0;
position: relative; position: relative;
list-style: none; list-style: none;
} }
a { a {
display: block; display: block;
border-bottom: 1px solid rgba($gray, .8); border-bottom: 1px solid rgba($gray, .8);
@ -363,6 +469,7 @@ a {
} }
} }
} }
&__top { &__top {
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -372,6 +479,7 @@ a {
height: 60px; height: 60px;
transition: all .3s ease; transition: all .3s ease;
z-index: 1; z-index: 1;
.title { .title {
float: left; float: left;
margin-left: 20px; margin-left: 20px;
@ -379,9 +487,11 @@ a {
font-size: 22px; font-size: 22px;
} }
} }
&__share { &__share {
float: right; float: right;
position: relative; position: relative;
.item { .item {
height: 60px; height: 60px;
width: 60px; width: 60px;
@ -392,32 +502,41 @@ a {
color: #fdc200; color: #fdc200;
cursor: pointer; cursor: pointer;
transition: all .3s ease; transition: all .3s ease;
svg { svg {
height: 20px; height: 20px;
width: 20px; width: 20px;
} }
&[data-type="wechat"] { &[data-type="wechat"] {
color: #3caf36; color: #3caf36;
&:hover { &:hover {
background-color: #3caf36; background-color: #3caf36;
} }
} }
&[data-type="twitter"] { &[data-type="twitter"] {
color: #18a3fa; color: #18a3fa;
&:hover { &:hover {
background-color: #18a3fa; background-color: #18a3fa;
} }
} }
&[data-type="weibo"] { &[data-type="weibo"] {
color: #f93; color: #f93;
&:hover { &:hover {
background-color: #f93; background-color: #f93;
} }
} }
&:hover { &:hover {
color: #fff; color: #fff;
background-color: #fdc200; background-color: #fdc200;
} }
&__qr { &__qr {
position: absolute; position: absolute;
top: 61px; top: 61px;
@ -425,42 +544,30 @@ a {
} }
} }
} }
&__progress {
position: absolute;
right: 0;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
border: none;
background: transparent;
-webkit-appearance: none;
&::-webkit-progress-value {
background-color: $link;
}
&::-webkit-progress-bar {
background-color: transparent;
}
}
.item { .item {
&__meta { &__meta {
padding-top: 76px; padding-top: 76px;
font-size: 14px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
color: rgba($gray, .8); color: rgba($gray, .8);
a { a {
color: $gray; color: $gray;
} }
} }
&__title { &__title {
font-size: 28px; font-size: 28px;
margin-bottom: 40px; margin-bottom: 40px;
sup { sup {
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
color: rgba($gray, .8); color: rgba($gray, .8);
} }
} }
&__cover { &__cover {
height: 800px; height: 800px;
background-size: cover; background-size: cover;
@ -470,15 +577,18 @@ a {
border-radius: 5px; border-radius: 5px;
filter: sepia(0.2) contrast(1.3) opacity(.86); filter: sepia(0.2) contrast(1.3) opacity(.86);
} }
&__content { &__content {
padding: 70px 100px 0; padding: 70px 100px 0;
box-sizing: border-box; box-sizing: border-box;
background-color: #fff; background-color: #fff;
&--article { &--article {
margin-top: -164px; margin-top: -164px;
position: relative; position: relative;
} }
} }
&__tip { &__tip {
margin-bottom: 40px; margin-bottom: 40px;
border-radius: 5px; border-radius: 5px;
@ -489,6 +599,7 @@ a {
background: #f4f8fb; background: #f4f8fb;
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
&:hover { &:hover {
box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04); box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04);
transform: translate3D(0, -1px, 0) scale(1.02); transform: translate3D(0, -1px, 0) scale(1.02);
@ -515,10 +626,12 @@ a {
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
li.current a, li.current a,
a:hover { a:hover {
color: $link; color: $link;
} }
a { a {
display: block; display: block;
margin-top: -24px; margin-top: -24px;
@ -537,6 +650,7 @@ a {
content: ''; content: '';
border-radius: 50%; border-radius: 50%;
} }
&.current:before { &.current:before {
background-color: $link; background-color: $link;
} }
@ -546,11 +660,13 @@ a {
.comment { .comment {
background-color: #f4f8fb; background-color: #f4f8fb;
position: relative; position: relative;
&__wrapper { &__wrapper {
margin: 0 auto; margin: 0 auto;
padding: 0 100px 0.1px; padding: 0 100px 0.1px;
box-sizing: border-box; box-sizing: border-box;
} }
&-body-ref { &-body-ref {
position: absolute; position: absolute;
left: 80px; left: 80px;
@ -592,8 +708,10 @@ a {
color: rgba($gray, .8); color: rgba($gray, .8);
float: left; float: left;
line-height: 40px; line-height: 40px;
a { a {
color: $gray; color: $gray;
&:hover { &:hover {
color: rgba($gray, .8); color: rgba($gray, .8);
} }
@ -628,6 +746,7 @@ a {
.other { .other {
position: relative; position: relative;
&__title { &__title {
margin: -220px 0 5px; margin: -220px 0 5px;
color: #fff; color: #fff;
@ -635,14 +754,17 @@ a {
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
} }
&__meta { &__meta {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
&--list { &--list {
margin-bottom: 154px; margin-bottom: 154px;
} }
} }
&__content { &__content {
background-color: #fff; background-color: #fff;
padding: 70px 100px; padding: 70px 100px;
@ -650,15 +772,18 @@ a {
box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03); box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
border-radius: 5px; border-radius: 5px;
} }
&__item { &__item {
line-height: 20px; line-height: 20px;
margin: 10px; margin: 10px;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
&--archive { &--archive {
width: 187px; width: 187px;
display: inline-block; display: inline-block;
} }
span, div { span, div {
color: $gray; color: $gray;
font-size: 12px; font-size: 12px;
@ -671,28 +796,36 @@ a {
@media (max-width: 768px) { @media (max-width: 768px) {
.header { .header {
padding: 10px 0; padding: 10px 0;
&__h1 { &__h1 {
padding-top: 60px; padding-top: 60px;
} }
&__h2 { &__h2 {
margin-bottom: 40px; margin-bottom: 40px;
} }
&__nav { &__nav {
.fn__right { .fn__right {
float: none; float: none;
} }
a { a {
margin: 0 10px 0 0; margin: 0 10px 0 0;
} }
} }
&--article { &--article {
height: auto; height: auto;
.header__nav a { .header__nav a {
line-height: 24px; line-height: 24px;
} }
} }
&--other { &--other {
height: 360px; height: 360px;
.header__nav a { .header__nav a {
line-height: 24px; line-height: 24px;
} }
@ -702,8 +835,10 @@ a {
.articles { .articles {
position: initial; position: initial;
margin: 10px -5px 0 -5px; margin: 10px -5px 0 -5px;
.item { .item {
margin: 0 5px 10px; margin: 0 5px 10px;
&--large { &--large {
flex-direction: column; flex-direction: column;
flex: 1 1 300px; flex: 1 1 300px;
@ -723,6 +858,7 @@ a {
.pagination { .pagination {
margin-top: 0; margin-top: 0;
margin-bottom: 5px; margin-bottom: 5px;
&__item { &__item {
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -739,9 +875,11 @@ a {
.article { .article {
&__top { &__top {
height: 40px; height: 40px;
.title { .title {
display: none; display: none;
} }
.toc { .toc {
display: block; display: block;
float: left; float: left;
@ -750,29 +888,36 @@ a {
cursor: pointer; cursor: pointer;
} }
} }
&__share .item { &__share .item {
height: 40px; height: 40px;
width: 40px; width: 40px;
padding: 10px 0; padding: 10px 0;
} }
.item { .item {
&__meta { &__meta {
padding-top: 40px; padding-top: 40px;
} }
&__cover { &__cover {
display: none; display: none;
} }
&__content { &__content {
padding: 10px 10px 0; padding: 10px 10px 0;
&--article { &--article {
margin-top: -20px; margin-top: -20px;
} }
} }
} }
&__bottom { &__bottom {
.fn__flex { .fn__flex {
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }
.item { .item {
margin: 10px 0 0 0; margin: 10px 0 0 0;
} }
@ -783,6 +928,7 @@ a {
&__title { &__title {
padding: 10px 0; padding: 10px 0;
} }
&__wrapper { &__wrapper {
padding: 0 10px 0.1px; padding: 0 10px 0.1px;
} }
@ -791,6 +937,7 @@ a {
.item { .item {
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
&__avatar { &__avatar {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -801,10 +948,12 @@ a {
&__title { &__title {
margin-top: -280px; margin-top: -280px;
} }
&__content { &__content {
padding: 20px; padding: 20px;
margin: 40px auto 10px; margin: 40px auto 10px;
} }
&__meta--list { &__meta--list {
margin-bottom: 40px; margin-bottom: 40px;
} }

3
Bubble/footer.ftl
View File

@ -53,6 +53,9 @@
<script type="text/javascript" src="${staticServePath}/js/lib/compress/pjax.min.js" charset="utf-8"></script> <script type="text/javascript" src="${staticServePath}/js/lib/compress/pjax.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}" <script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"
charset="utf-8"></script> charset="utf-8"></script>
<script type="text/javascript"
src="${staticServePath}/skins/${skinDirName}/js/circleMagic${miniPostfix}.js?${staticResourceVersion}"
charset="utf-8"></script>
<script type="text/javascript" <script type="text/javascript"
src="${staticServePath}/skins/${skinDirName}/js/common${miniPostfix}.js?${staticResourceVersion}" src="${staticServePath}/skins/${skinDirName}/js/common${miniPostfix}.js?${staticResourceVersion}"
charset="utf-8"></script> charset="utf-8"></script>

129
Bubble/js/circleMagic.js Normal file
View File

@ -0,0 +1,129 @@
;(function ($) {
$.fn.circleMagic = function (options) {
var width, height, canvas, ctx, animateHeader = true;
var circles = [];
var settings = $.extend({
color: 'rgba(255,255,255,.5)',
radius: 10,
density: 0.3,
clearOffset: 0.2
}, options);
// Main
var container = this['0'];
initContainer();
addListeners();
function initContainer() {
width = container.offsetWidth;
height = container.offsetHeight;
// create canvas element
initCanvas();
canvas = document.getElementById('canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
// create circles
for (var x = 0; x < width * settings.density; x++) {
var c = new Circle();
circles.push(c);
}
animate();
}
//Init canvas element
function initCanvas() {
var canvasElement = document.createElement('canvas');
canvasElement.id = 'canvas';
container.appendChild(canvasElement);
canvasElement.parentElement.style.overflow = 'hidden';
}
// Event handling
function addListeners() {
window.addEventListener('scroll', scrollCheck, false);
window.addEventListener('resize', resize, false);
}
function scrollCheck() {
if (document.body.scrollTop > height) {
animateHeader = false;
}
else {
animateHeader = true;
}
}
function resize() {
width = container.clientWidth;
height = container.clientHeight;
container.height = height + 'px';
canvas.width = width;
canvas.height = height;
}
function animate() {
if (animateHeader) {
ctx.clearRect(0, 0, width, height);
for (var i in circles) {
circles[i].draw();
}
}
requestAnimationFrame(animate);
}
function randomColor() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
var alpha = Math.random().toPrecision(2);
return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
}
// Canvas manipulation
function Circle() {
var that = this;
// constructor
(function () {
that.pos = {};
init();
})();
function init() {
that.pos.x = Math.random() * width;
that.pos.y = height + Math.random() * 100;
that.alpha = 0.1 + Math.random() * settings.clearOffset;
that.scale = 0.1 + Math.random() * 0.3;
that.speed = Math.random();
if (settings.color === 'random') {
that.color = randomColor();
}
else {
that.color = settings.color;
}
}
this.draw = function () {
if (that.alpha <= 0) {
init();
}
that.pos.y -= that.speed;
that.alpha -= 0.0005;
ctx.beginPath();
ctx.arc(that.pos.x, that.pos.y, that.scale * settings.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = that.color;
ctx.fill();
ctx.closePath();
};
}
}
})(jQuery);

11
Bubble/js/common.js
View File

@ -29,6 +29,17 @@
var Skin = { var Skin = {
init: function () { init: function () {
Util.initPjax() Util.initPjax()
$('#headerDown').click(function () {
$('html, body').animate({scrollTop: $(window).height()}, 300)
})
$(window).scroll(function (event) {
$('.fn__progress').attr('value', parseInt($(window).scrollTop())).
attr('max', parseInt($('body').outerHeight() -
$(window).height()))
})
$('.header').circleMagic();
}, },
initArticle: function () { initArticle: function () {
page.share() page.share()

11
Bubble/macro-header.ftl
View File

@ -18,13 +18,20 @@
--> -->
<#macro header type> <#macro header type>
<progress class="fn__progress"></progress>
<header class="header header--${type}"> <header class="header header--${type}">
<canvas id="canvas"></canvas>
<div class="wrapper header__title"> <div class="wrapper header__title">
<h1 class="header__h1 fn__flex-inline"> <h1 class="header__h1 fn__flex-inline">
<img src="${faviconURL}">
<a href="${servePath}" rel="start" class="header__title">${blogTitle}</a> <a href="${servePath}" rel="start" class="header__title">${blogTitle}</a>
</h1> </h1>
<h2 class="header__h2">${blogSubtitle}</h2> <h2 class="header__desc header__desc--title">${blogSubtitle}</h2>
<div class="header__desc">
${noticeBoard}
</div>
<svg class="header__down" id="headerDown" viewBox="0 0 32 32" width="100%" height="100%">
<path d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"></path>
</svg>
</div> </div>
</header> </header>
</#macro> </#macro>

1
Bubble/side.ftl
View File

@ -17,6 +17,7 @@
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
--> -->
<img src="${faviconURL}">
<nav class="wrapper header__nav fn__clear"> <nav class="wrapper header__nav fn__clear">
<a href="${servePath}" rel="start"> <a href="${servePath}" rel="start">
<#if type == 'article'> <#if type == 'article'>