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> </div>
</div> </div>
{{> modal.hbs }} {{> foot.hbs }}
<script src="/static/script.js?ver={{ build_num }}"></script>
</body> </body>
</html> </html>

View File

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

View File

@ -12,9 +12,5 @@
{{ /each }} {{ /each }}
</ul> </ul>
</section> </section>
<section class="copyright"> {{> copyright.hbs }}
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>
</div> </div>

View File

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