fix: overflows and other misc style improvements

7 files changed, 83 insertions, 55 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 20b107c..a5657c9 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -39,5 +39,5 @@ name = "author"
   custom_css = []
   description = "an example site for hugo theme TeXify"
   enable_mathjax = true
-  footnote = "Follow me on <a class=link href=https://github.com/queensferryme>GitHub</a>, <a class=link href=https://twitter.com/queensferryme>Twitter</a> or <a class=link href=/index.xml>RSS</a><br><a class=link href=https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh target=_blank rel=noopener>CC BY-NC-SA 4.0</a>"
+  footnote = "Follow me on <a class=link href=https://github.com/queensferryme>GitHub</a>, <a class=link href=https://twitter.com/queensferryme>Twitter</a> or <a class=link href=/index.xml>RSS</a> | <a class=link href=https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh target=_blank rel=noopener>CC BY-NC-SA 4.0</a>"
   keywords = ["hugo", "latex", "theme"]
diff --git a/layouts/_default/index.html b/layouts/_default/index.html
index 3386563..69c5b9a 100644
--- a/layouts/_default/index.html
+++ b/layouts/_default/index.html
@@ -28,6 +28,7 @@
         <div class="content">{{ .Summary }}</div>
       </div>
       {{ end }}
+      {{ if or $paginator.HasPrev $paginator.HasNext}}
       <div class="paginator">
         {{ if $paginator.HasPrev }}
         <a class="link" href="{{ $paginator.Prev.URL }}">← prev</a>
@@ -40,6 +41,7 @@
         <a></a>
         {{ end }}
       </div>
+      {{ end }}
     </main>
     {{ partial "footer.html" . }}
   </div>
diff --git a/static/css/common.css b/static/css/common.css
index 1eae1ca..9e54258 100644
--- a/static/css/common.css
+++ b/static/css/common.css
@@ -77,12 +77,20 @@ a {
     text-decoration: none;
 }
 
+time {
+    color: gray;
+    margin-left: 1rem;
+    min-width: 5rem;
+}
+
 #wrapper {
     background-color: #FAFAFA;
     display: flex;
     flex-direction: column;
     font-family: 'Latin Modern Roman', 'Times New Roman', serif;
     min-height: 100vh;
+    padding: 1rem;
+    word-break: break-word;
 }
 
 .link {
@@ -90,6 +98,14 @@ a {
     text-decoration: underline;
 }
 
+.paginator {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 2rem;
+}
+
 ::-webkit-scrollbar {
     height: 8px;
     width: 8px;
@@ -111,18 +127,18 @@ a {
     flex-direction: column;
 }
 
-#header > h1 {
-    font-size: 2.8rem;
-    margin: 1.1rem 0;
-    text-align: center;
+@media screen and (min-width: 768px) {
+    #header > h1 {
+        font-size: 2.8rem;
+    }
 }
 
 #header > nav {
-    max-width: 768px;
-    display: inherit;
+    display: flex;
     flex-direction: row;
     justify-content: space-around;
-    width: 100vw;
+    max-width: 768px;
+    width: 100%;
 }
 
 #header > nav > span > a {
@@ -136,17 +152,9 @@ a {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: 2rem;
-    width: 100vw;
-}
-
-#main > .paginator {
-    align-items: flex-end;
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-    justify-items: flex-end;
-    justify-content: space-between;
+    max-width: 768px;
+    padding: 2rem 0;
+    width: calc(100% - 2rem);
 }
 
 /* footer */
@@ -154,10 +162,10 @@ a {
 #footer {
     align-items: center;
     display: flex;
-    flex-direction: column;
-    margin-bottom: .5rem;
+    font-size: .9rem;
+    flex-direction: column;;
 }
 
-#footer .footnote {
+#footer > .footnote {
     text-align: center;
 }
diff --git a/static/css/content.css b/static/css/content.css
index 413f449..fa0fc31 100644
--- a/static/css/content.css
+++ b/static/css/content.css
@@ -1,3 +1,11 @@
+.content .MathJax {
+    overflow-x: auto;
+}
+
+.content :last-child {
+    margin-bottom: 0;
+}
+
 .content a {
     color: #AA0000;
     text-decoration: underline;
@@ -11,10 +19,26 @@
     content: "]";
 }
 
+.content blockquote,
+.content div,
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6,
+.content p,
+.content pre,
+.content ol,
+.content table,
+.content ul {
+    margin-bottom: 1rem;
+}
+
 .content blockquote {
     border-left: black 2px solid;
     font-style: italic;
-    padding: 1px 2rem;
+    padding: 1rem 0 1rem 2rem;
 }
 
 .content code {
@@ -28,7 +52,6 @@
 .content h1, .content h2, .content h3,
 .content h4, .content h5, .content h6 {
     line-height: 1.5;
-    margin: 1rem 0;
 }
 
 .content h1 {
@@ -60,7 +83,6 @@
 }
 
 .content p {
-    margin: 1rem 0;
     text-align: justify;
 }
 
@@ -77,6 +99,11 @@
     padding: 0;
 }
 
+.content table {
+    display: block;
+    overflow-x: auto;
+}
+
 .content td, .content th {
     border: #575C61 1px solid;
     padding: .1rem .5rem;
diff --git a/static/css/index.css b/static/css/index.css
index 10dc90e..65e9e83 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,7 +1,3 @@
-#main {
-    max-width: 768px;
-}
-
 #main > .post + .post {
     margin-top: 1rem;
 }
@@ -11,19 +7,19 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    margin-bottom: .5rem;
-    text-align: justify;
 }
 
 #main > .post > h2 > time {
-    color: gray;
-    display: inline-block;
     font-size: 1rem;
     font-weight: normal;
-    margin-left: 1rem;
-    min-width: 5rem;
 }
 
-#main > .post > div {
-    margin-left: 2rem;
+#main > .post > .content {
+    padding-top: 1rem;
+}
+
+@media screen and (min-width: 768px) {
+    #main > .post > div {
+        margin-left: 2rem;
+    }
 }
diff --git a/static/css/list.css b/static/css/list.css
index e80f92c..434fe7f 100644
--- a/static/css/list.css
+++ b/static/css/list.css
@@ -1,12 +1,6 @@
-#main {
-    max-width: 768px;
-}
-
 #main > .post-group > ul {
-    border-left: gray solid 1px;
     list-style-type: none;
-    margin-left: 1rem;
-    padding: .5rem 0 .5rem 2rem;
+    padding-left: 2rem;
 }
 
 #main > .post-group > ul > li {
@@ -14,12 +8,17 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    line-height: 2;
+    line-height: 1.6;
+    padding: .8rem 0;
 }
 
 #main > .post-group > ul > li > time {
-    color: gray;
-    margin-left: 1rem;
-    min-width: 5rem;
     text-align: right;
 }
+
+@media screen and (min-width: 768px) {
+    #main > .post-group > ul {
+        border-left: gray solid 1px;
+        margin-left: 1rem;
+    }
+}
diff --git a/static/css/single.css b/static/css/single.css
index eef8953..5a27aa4 100644
--- a/static/css/single.css
+++ b/static/css/single.css
@@ -1,11 +1,7 @@
-#main {
-    max-width: 768px;
-}
-
 #main > h1 {
-    font-size: 2.6rem;
+    text-align: center;
 }
 
-#main > .content {
-    margin-top: 1.2rem;
+#main > div + .content {
+    padding-top: 1rem;
 }