PeterCxy/paprika
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

theme: add mobile support

Browse source
This commit is contained in:
Peter Cai 2020-04-11 19:50:51 +08:00
parent f714591b25
commit f55cdf9897
No known key found for this signature in database
GPG key ID: 71F5FB4E4F3FD54F
6 changed files with 61 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
theme/default/head.hbs Normal file
View file

@ -0,0 +1,6 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ #if title }}{{ title }} - {{ blog.title }}{{ else }}{{ blog.title }}{{ /if }}</title>
<link rel="stylesheet" href="/static/style.css?ver={{ build_num }}" />
</head>

6
theme/default/home.hbs
View file

@ -1,9 +1,5 @@
<html lang="{{ blog.lang }}">
<head>
<meta charset="UTF-8">
<title>{{ blog.title }}</title>
<link rel="stylesheet" href="/static/style.css?ver={{ build_num }}"/>
</head>
{{> head.hbs}}
<body>
{{> loading.hbs }}
<div class="page-wrapper">

6
theme/default/post.hbs
View file

@ -1,9 +1,5 @@
<html lang="{{ blog.lang }}">
<head>
<meta charset="UTF-8">
<title>{{ title }} - {{ blog.title }}</title>
<link rel="stylesheet" href="/static/style.css?ver={{ build_num }}"/>
</head>
{{> head.hbs}}
<body>
{{> loading.hbs }}
<div class="page-wrapper">

4
theme/default/sidebar.hbs
View file

@ -2,10 +2,10 @@
<section class="avatar">
<img src="{{ blog.theme_config.avatar_url }}" />
</section>
<section class="introduction with-divider with-divider-right">
<section class="introduction with-divider with-divider-right with-divider-center-mobile">
{{ blog.description }}
</section>
<section class="links with-divider with-divider-right">
<section class="links with-divider with-divider-right with-divider-center-mobile">
<ul>
{{ #each blog.theme_config.nav_links }}
<li><a href="{{ this.url }}">{{ this.name }}</a></li>

2
theme/default/static/script.js
View file

@ -16,6 +16,8 @@ window.onbeforeunload = (ev) => {
window.onload = function() {
let content = document.getElementsByClassName("content");
if (content.length == 0) return;
// Don't do this on mobile; it's horrible
if (window.matchMedia("(max-width: 1000px)").matches) return;
let level = 0;
let maxLevel = 0;

50
theme/default/static/style.css
View file

@ -52,7 +52,6 @@ body {
padding-top: 10px;
width: 60vw;
max-width: 1000px;
min-width: 600px;
padding-bottom: 15px;
text-align: left;
}
@ -336,4 +335,53 @@ h5 {
.toc ul ul ul ul ul {
margin-left: 20px;
}
/* For mobile / small-screen devices */
@media screen and (max-width: 1000px) {
/* From this width, make content fill the entire screen */
.page-wrapper {
left: 5vw;
width: 90vw;
}
}
@media screen and (max-width: 600px) {
/* From this width, use mobile layout */
.sidebar {
position: relative;
float: none;
width: 80%;
margin-left: 10%;
text-align: center;
}
.sidebar .copyright {
display: none;
}
.sidebar .links {
margin-bottom: 30px;
}
/* Show nav links horizontally */
.sidebar .links ul {
display: flex;
justify-content: center;
padding-left: 10px;
}
.sidebar .links ul li {
display: list-item;
margin-right: 10px;
}
.post-list, .content {
margin-left: 0;
width: 100%;
}
.with-divider.with-divider-center-mobile::after {
margin-left: calc(50% - 20px) !important;
}
}