From 86a8da1a23ca8231bf363d92cf814e1b5ffd3302 Mon Sep 17 00:00:00 2001
From: MoyuScript <i@moyu.moe>
Date: Mon, 8 Jan 2018 22:21:11 +0800
Subject: [PATCH] Update website styles

---
 docs/configuration.md        |  2 +-
 www/src/components/footer.js | 15 +++++++++++++--
 www/src/layouts/index.css    | 13 +++++++++++++
 www/src/pages/index.js       | 18 ++++++++++++++++--
 4 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index dd77ce2..85553e2 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -1,5 +1,5 @@
 ---
-title: "Configuration"
+title: "Options"
 description: "Explore the different configuration options available for html2canvas"
 previousUrl: "/getting-started"
 previousTitle: "Getting Started"
diff --git a/www/src/components/footer.js b/www/src/components/footer.js
index ad2b25a..85410a4 100644
--- a/www/src/components/footer.js
+++ b/www/src/components/footer.js
@@ -4,14 +4,25 @@ export default () =>
     <footer
         css={{
             backgroundColor: '#558b2f',
-            color: 'rgba(255,255,255,0.8)',
+            color: 'rgba(255,255,255, 0.8)',
             fontWeight: 300,
             minHeight: '50px',
             lineHeight: '50px',
             padding: '10px 0px'
         }}
     >
-        <div css={{margin: '0 auto', width: '85%'}}>
+        <div
+            css={{
+                margin: '0 auto',
+                fontSize: '10.5px',
+                textAlign: 'center',
+                '@media(min-width: 1000px)': {
+                    textAlign: 'left',
+                    width: '85%',
+                    fontSize: '14.5px'
+                }
+            }}
+        >
             Created by{' '}
             <a href="https://hertzen.com" css={{color: '#fff', fontWeight: 'bold'}}>
                 Niklas von Hertzen
diff --git a/www/src/layouts/index.css b/www/src/layouts/index.css
index 1c96277..c5933ee 100644
--- a/www/src/layouts/index.css
+++ b/www/src/layouts/index.css
@@ -36,9 +36,22 @@ table {
     border: 1px solid #ddd;
 }
 
+table tr:nth-child(odd) {
+    background-color: #f9f9f9;
+}
+
 th {
     padding: 8px;
     border: 1px solid #ddd;
+    border-bottom-width: 2px;
+}
+
+td {
+    padding: 8px;
+}
+
+th:first-child, td:first-child {
+    padding-left: 8px;
 }
 
 :not(pre) > code {
diff --git a/www/src/pages/index.js b/www/src/pages/index.js
index 8345dd9..94a46cd 100644
--- a/www/src/pages/index.js
+++ b/www/src/pages/index.js
@@ -65,7 +65,14 @@ export default ({data}) => {
                             }
                         }}
                     >
-                        <div>
+                        <div
+                            css={{
+                                display: 'none',
+                                '@media(min-width: 1000px)': {
+                                    display: 'block'
+                                }
+                            }}
+                        >
                             <h4>HTML</h4>
                             <div
                                 css={{marginRight: '5px'}}
@@ -79,7 +86,14 @@ export default ({data}) => {
                                 }}
                             />
                         </div>
-                        <div>
+                        <div
+                            css={{
+                                display: 'none',
+                                '@media(min-width: 1000px)': {
+                                    display: 'block'
+                                }
+                            }}
+                        >
                             <h4>JavaScript</h4>
                             <div
                                 css={{marginLeft: '5px'}}