theme: add footer on mobile layout

This commit is contained in:
Peter Cai 2020-04-14 19:55:41 +08:00
parent ecc3e4bed8
commit 62555714e6
No known key found for this signature in database
GPG Key ID: 71F5FB4E4F3FD54F
6 changed files with 28 additions and 10 deletions

View File

@ -0,0 +1,5 @@
<section class="copyright">
Copyright © {{ cur_year }} {{ blog.title }}<br />
Powered by <a href="https://github.com/PeterCxy/paprika" target="_blank">paprika</a><br />
Hosted on <a href="https://workers.cloudflare.com/" target="_blank">Cloudflare Workers</a>
</section>

7
theme/default/foot.hbs Normal file
View File

@ -0,0 +1,7 @@
{{> modal.hbs }}
<!-- Footer is only needed on mobile -->
<!-- On desktop, put everything to sidebar -->
<div class="footer">
{{> copyright.hbs }}
</div>
<script src="/static/script.js?ver={{ build_num }}"></script>

View File

@ -25,7 +25,6 @@
</div>
</div>
</div>
{{> modal.hbs }}
<script src="/static/script.js?ver={{ build_num }}"></script>
{{> foot.hbs }}
</body>
</html>

View File

@ -16,7 +16,6 @@
<!-- We don't handle this in backend -->
</div>
</div>
{{> modal.hbs }}
<script src="/static/script.js?ver={{ build_num }}"></script>
{{> foot.hbs }}
</body>
</html>

View File

@ -12,9 +12,5 @@
{{ /each }}
</ul>
</section>
<section class="copyright">
Copyright © {{ cur_year }} {{ blog.title }}<br />
Powered by <a href="https://github.com/PeterCxy/paprika" target="_blank">paprika</a><br />
Hosted on <a href="https://workers.cloudflare.com/" target="_blank">Cloudflare Workers</a>
</section>
{{> copyright.hbs }}
</div>

View File

@ -141,6 +141,11 @@ blockquote {
margin-left: 0;
}
/* Footer -- Not needed on desktop */
.footer {
display: none;
}
/* Sidebar */
.sidebar {
float: left;
@ -226,7 +231,7 @@ blockquote {
color: #f06292;
}
.sidebar .copyright {
.copyright {
font-size: 0.6em;
color: rgb(200, 200, 200);
}
@ -451,6 +456,13 @@ blockquote {
.with-divider.with-divider-center-mobile::after {
margin-left: calc(50% - 20px) !important;
}
/* We need footer on mobile */
.footer {
display: block;
text-align: center;
width: 100%;
}
}
/* Modal <https://www.w3schools.com/howto/howto_css_modal_images.asp> */