malte70/hugo-paper
1
0
Fork 0
Code Activity

Add list dynamic background

Browse source
This commit is contained in:
nanxiaobei 2019-09-15 06:55:10 +08:00
parent 1b6c1399bb
commit ee1f7e5aee
3 changed files with 28 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
layouts/partials/footer.html
View file

@ -7,6 +7,6 @@
<span>Theme️ <a href="https://github.com/nanxiaobei/hugo-paper" rel="noopener" target="_blank">Paper</a></span> <span>Theme️ <a href="https://github.com/nanxiaobei/hugo-paper" rel="noopener" target="_blank">Paper</a></span>
</footer> </footer>
<script src="{{ "highlight.min.js" | absURL }}"></script> <script src="{{ "highlight.min.js" | absURL }}"></script>
<script>hljs.initHighlightingOnLoad();</script> <script src="{{ "main.js" | absURL }}"></script>
</body> </body>
</html> </html>

3
layouts/partials/header.html
View file

@ -38,6 +38,9 @@
{{ end }} {{ end }}
</head> </head>
<body class="{{if eq .Kind `page` }}single{{else}}list{{ if .IsHome }} home{{ end }}{{end}}"> <body class="{{if eq .Kind `page` }}single{{else}}list{{ if .IsHome }} home{{ end }}{{end}}">
{{if ne .Kind `page` }}
<div class="list-bg"></div>
{{end}}
<header class="header"> <header class="header">
<nav class="nav"> <nav class="nav">
{{ if .IsHome }} {{ if .IsHome }}

24
static/main.js Normal file
View file

@ -0,0 +1,24 @@
hljs.initHighlightingOnLoad();
const listBg = document.querySelector('.list-bg');
if (listBg) {
const halfAnHour = 1000 * 60 * 30;
function setListBgStyle() {
const now = new Date();
const time = now.getHours() + now.getMinutes() / 60;
let opacity = Math.abs(time - 14);
opacity = opacity > 12 ? 10 + Math.abs(opacity - 14) : opacity;
opacity = Number((opacity / 12).toFixed(2));
listBg.setAttribute('style', `opacity: ${opacity}`);
}
requestAnimationFrame(setListBgStyle);
setInterval(() => {
requestAnimationFrame(setListBgStyle);
}, halfAnHour);
}