mirror of
https://github.com/gnu4cn/jenkins_book_zh.git
synced 2025-03-03 22:00:24 +08:00
Updated 'theme/index.hbs'.
This commit is contained in:
Hector PENG
parent
287e3334bb
commit
8d1840e42e
BIN
src/images/alipay-laxers.jpeg
Normal file
BIN
src/images/alipay-laxers.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
src/images/wechat-pay-hector.jpeg
Executable file
BIN
src/images/wechat-pay-hector.jpeg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
201
theme/index.hbs
201
theme/index.hbs
@ -38,6 +38,9 @@
|
||||
<link rel="stylesheet" href="{{ path_to_root }}fonts/fonts.css">
|
||||
{{/if}}
|
||||
|
||||
<link rel="prefetch" href="{{ path_to_root }}images/alipay-laxers.jpeg" />
|
||||
<link rel="prefetch" href="{{ path_to_root }}images/wechat-pay-hector.jpeg" />
|
||||
|
||||
<!-- Highlight.js Stylesheets -->
|
||||
<link rel="stylesheet" href="{{ path_to_root }}highlight.css">
|
||||
<link rel="stylesheet" href="{{ path_to_root }}tomorrow-night.css">
|
||||
@ -182,10 +185,8 @@
|
||||
<a href="{{git_repository_edit_url}}" title="Suggest an edit" aria-label="Suggest an edit">
|
||||
<i id="git-edit-button" class="fa fa-edit"></i>
|
||||
</a>
|
||||
{{/if}} ・
|
||||
<a href="https://books.xfoss.com" title="捐赠，donate" class="button" aria-label="捐赠，donate">
|
||||
打赏，donate
|
||||
</a>
|
||||
{{/if}}
|
||||
<button class="open-button">打 赏 💰</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -327,6 +328,30 @@
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
<!-- Donation dialog -->
|
||||
<dialog class="modal">
|
||||
<p>小额打赏，赞助 xfoss.com 长存......</p>
|
||||
|
||||
<div class="slider">
|
||||
<a href="#slide-1">微信</a> |
|
||||
<a href="#slide-2">支付宝</a>
|
||||
|
||||
<div class="slides">
|
||||
<div id="slide-1">
|
||||
<img src="{{ path_to_root }}images/wechat-pay-hector.jpeg" />
|
||||
</div>
|
||||
<div id="slide-2">
|
||||
<img src="{{ path_to_root }}images/alipay-laxers.jpeg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="close-button">Close</button>
|
||||
<p>若这里内容有帮助到你，请选择上述方式向 xfoss.com 捐赠。</p>
|
||||
</dialog>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-6NHZBVG5F6"></script>
|
||||
@ -337,4 +362,172 @@
|
||||
|
||||
gtag('config', 'G-6NHZBVG5F6');
|
||||
</script>
|
||||
<script>
|
||||
|
||||
const modal = document.querySelector('.modal');
|
||||
const openButton = document.querySelector('.open-button');
|
||||
const closeButton = document.querySelector('.close-button');
|
||||
|
||||
openButton.addEventListener('click', () => {
|
||||
modal.showModal();
|
||||
});
|
||||
|
||||
closeButton.addEventListener('click', () => {
|
||||
modal.close();
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
button {
|
||||
display: inline-block;
|
||||
margin: 5px auto;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
padding: 3px 8px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
background-color: #FFA12B;
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
transition: all 240ms linear;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
button:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
dialog {
|
||||
margin: 2% auto;
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
background-color: #eee;
|
||||
padding: 24px;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
dialog > p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
dialog > p:first-of-type {
|
||||
margin: 0 auto 20px;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
dialog > button {
|
||||
margin: 10px auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
|
||||
|
||||
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
/*
|
||||
scroll-snap-points-x: repeat(300px);
|
||||
scroll-snap-type: mandatory;
|
||||
*/
|
||||
}
|
||||
.slides::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.slides::-webkit-scrollbar-thumb {
|
||||
background: black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.slides::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.slides > div {
|
||||
scroll-snap-align: start;
|
||||
flex-shrink: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin-right: 50px;
|
||||
border-radius: 10px;
|
||||
background: #eee;
|
||||
transform-origin: center center;
|
||||
transform: scale(1);
|
||||
transition: transform 0.5s;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 100px;
|
||||
}
|
||||
.slides > div:target {
|
||||
/* transform: scale(0.8); */
|
||||
}
|
||||
.author-info {
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: white;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.author-info a {
|
||||
color: white;
|
||||
}
|
||||
img {
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slider > a {
|
||||
display: inline-flex;
|
||||
height: 1.5rem;
|
||||
background: white;
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
margin: 0 0 0.5rem 0;
|
||||
position: relative;
|
||||
}
|
||||
.slider > a:active {
|
||||
top: 1px;
|
||||
}
|
||||
.slider > a:focus {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* Don't need button navigation */
|
||||
@supports (scroll-snap-type) {
|
||||
.slider > a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user