From f55cdf9897c1febce7994390412a41d7538307df Mon Sep 17 00:00:00 2001 From: Peter Cai Date: Sat, 11 Apr 2020 19:50:51 +0800 Subject: [PATCH] theme: add mobile support --- theme/default/head.hbs | 6 ++++ theme/default/home.hbs | 6 +--- theme/default/post.hbs | 6 +--- theme/default/sidebar.hbs | 4 +-- theme/default/static/script.js | 2 ++ theme/default/static/style.css | 50 +++++++++++++++++++++++++++++++++- 6 files changed, 61 insertions(+), 13 deletions(-) create mode 100644 theme/default/head.hbs diff --git a/theme/default/head.hbs b/theme/default/head.hbs new file mode 100644 index 0000000..3a5676a --- /dev/null +++ b/theme/default/head.hbs @@ -0,0 +1,6 @@ + + + + {{ #if title }}{{ title }} - {{ blog.title }}{{ else }}{{ blog.title }}{{ /if }} + + \ No newline at end of file diff --git a/theme/default/home.hbs b/theme/default/home.hbs index ba794e6..78688af 100644 --- a/theme/default/home.hbs +++ b/theme/default/home.hbs @@ -1,9 +1,5 @@ - - - {{ blog.title }} - - + {{> head.hbs}} {{> loading.hbs }}
diff --git a/theme/default/post.hbs b/theme/default/post.hbs index 912142c..f5557a6 100644 --- a/theme/default/post.hbs +++ b/theme/default/post.hbs @@ -1,9 +1,5 @@ - - - {{ title }} - {{ blog.title }} - - + {{> head.hbs}} {{> loading.hbs }}
diff --git a/theme/default/sidebar.hbs b/theme/default/sidebar.hbs index 0dd24d4..9e710dd 100644 --- a/theme/default/sidebar.hbs +++ b/theme/default/sidebar.hbs @@ -2,10 +2,10 @@
-
+
{{ blog.description }}
-
+
    {{ #each blog.theme_config.nav_links }}
  • {{ this.name }}
    • diff --git a/theme/default/static/script.js b/theme/default/static/script.js index 48a90ef..85ba7af 100644 --- a/theme/default/static/script.js +++ b/theme/default/static/script.js @@ -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; diff --git a/theme/default/static/style.css b/theme/default/static/style.css index 1c01257..8f472b9 100644 --- a/theme/default/static/style.css +++ b/theme/default/static/style.css @@ -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; + } } \ No newline at end of file