Update footer and header of the doc site

* Corresponding to that of the main site

Author: srydell

docs/packaging/tolc_theme/base.html

@@ -50,12 +50,12 @@
             </div>
 
             <div id="navbar-links" class="navbar-menu has-background-black">
-                <div class="navbar-start">
-                </div>
                 <div class="navbar-end">
                     <a class="navbar-item is-size-5" href="https://tolc.io">Getting Started</a>
                     <a id="active-item" class="navbar-item is-size-5" href="https://docs.tolc.io/">Docs</a>
                     <a class="navbar-item is-size-5" href="https://tolc.io/live">Live Demo</a>
+                    <a class="navbar-item is-size-5" href="https://tolc.io/products">Products</a>
+                    <a class="navbar-item is-size-5" href="https://tolc.io/account">Account</a>
                 </div>
             </div>
         </nav>
@@ -77,35 +77,52 @@
             </div>
         </div>
 
-        <footer id="footer" class="footer has-background-black">
-            <div class="columns is-vcentered is-centered has-text-centered">
-                <div class="column is-one-quarter">
+        <footer id="footer" class="footer first-content has-background-black">
+            <div class="columns has-text-justified has-text-centered">
+                <div class="column is-2">
                 </div>
-                <div class="column is-one-quarter is-size-5">
+                <div class="column is-3 is-size-5">
+                    <h1 class="mt-2 mb-5 has-text-weight-bold has-text-white">General</h1>
                     <p class="mt-2 mb-2">
                         <a class="link pt-2 pb-2" href="https://docs.tolc.io/">About</a>
                     </p>
+                    <p class="mt-2 mb-2">
+                        <a class="link" href="https://tolc.io/products">Products</a>
+                    </p>
                     <p class="mt-2 mb-2">
                         <a class="link" href="https://tolc.io/contact">Contact</a>
                     </p>
                     <p class="mt-2 mb-2">
                         <a class="link" href="https://tolc.io/newsletter">Newsletter</a>
                     </p>
                 </div>
-                <div class="column is-one-quarter is-size-3">
+                <div class="column is-3 is-size-5">
+                    <h1 class="mt-2 mb-5 has-text-weight-bold has-text-white">Legal</h1>
+                    <p class="mt-2 mb-2">
+                        <a class="link" href="https://tolc.io/legal/privacy_policy">Privacy Policy</a>
+                    </p>
+                    <p class="mt-2 mb-2">
+                        <a class="link" href="https://tolc.io/legal/terms_of_service">Terms of Service</a>
+                    </p>
+                    <p class="mt-2 mb-2">
+                        <a class="link" href="https://tolc.io/legal/license">License</a>
+                    </p>
+                </div>
+                <div class="column is-2 is-size-5">
+                    <h1 class="mt-2 mb-5 has-text-weight-bold is-size-5 has-text-white">Keep In Touch</h1>
                     <p class="mt-2 mb-2">
                         <a class="link mx-1" href="https://github.com/Tolc-Software/tolc">
-                            <i class="fab fa-github"></i>
+                            <i class="fab fa-github fa-lg"></i>
                         </a>
                         <a class="link mx-1" href="https://discord.gg/NwDxCGztjN">
-                            <i class="fab fa-discord"></i>
+                            <i class="fab fa-discord fa-lg"></i>
                         </a>
                         <a class="link mx-1" href="mailto:hello@tolc.io">
-                            <i class="fas fa-envelope"></i>
+                            <i class="fas fa-envelope fa-lg"></i>
                         </a>
                     </p>
                 </div>
-                <div class="column is-one-quarter">
+                <div class="column is-2">
                 </div>
             </div>
         </footer>

docs/packaging/tolc_theme/css/theme.css

@@ -39,3 +39,11 @@ html, body {
 .link:hover {
 	color: #00dcff !important;
 }
+
+.has-text-white {
+	color: #fff !important;
+}
+
+.has-text-weight-bold {
+	font-weight: 700 !important;
+}

docs/packaging/tolc_theme/css/tolc/footer.css

@@ -14,3 +14,4 @@
 	-moz-transform:rotate(180deg);
 	-o-transform:rotate(180deg);
 }
+