Fill in main page and make website usable on phone.

base_app/static/base_app/css/master.css

@@ -1,5 +1,4 @@
 body {
-  font-family: 'Comic Sans MS';
   color: #377ba8;
   background: #252525;
   font-size: 62.5%;
@@ -7,7 +6,6 @@ body {
 }
 
 h1, h2 {
-  font-family: 'Impact', serif;
   margin: 0;
   text-shadow: -2px -2px 0 #000, 2px -2px 0 #000,
                -2px 2px 0 #000, 2px 2px 0 #000;
@@ -32,10 +30,6 @@ a {
   color: #377ba8;
 }
 
-pre {
-  font-family: 'Comic Sans MS';
-}
-
 p {
   padding-right: 33%;
   font-size: 0.95rem;
@@ -83,35 +77,67 @@ h4 {
 }
 
 .navbar {
-  margin-left: -27%;
-  margin-top: 1%;
+  margin-left: -20.5%;
+  margin-top: 15%;
   width: 21%;
   border: 5px solid #ccc;
-  padding: 0.8%;
-  padding-left: 5%;
   background: #333;
   float: left;
   position: fixed;
   transition: margin-left 0.2s;
 }
-.navbar:hover {
-  margin-left: -5%;
-}
-.navbar:active {
-  margin-left: -5%;
+
+.navbar-active {
+  margin-left: 0%;
+  margin-top: 15%;
+  width: 21%;
+  border: 5px solid #ccc;
+  background: #333;
+  float: left;
+  position: fixed;
+  transition: margin-left 0.2s;
 }
 
+
 .navbar-block {
   font-size: 1.13rem;
   width: 95%;
-  padding: 5%;
-  padding-left: 5%;
-  margin: 5.8%;
-  margin-left: -7%;
+  padding-top: 5%;
+  padding-bottom: 5%;
+  margin-left: 2.5%;
   margin-top: 3%;
+  margin-bottom: 3%;
   float: left;
   color: white;
   background: #454545;
 }
 
+.navbar-button {
+  margin-left: 20.5%;
+  margin-top: 7%;
+  border: 5px solid #ccc;
+  border-radius: 40px;
+  background: #333;
+  float: left;
+  position: fixed;
+  transition: margin-left 0.2s;
+  font-size: 1.2rem;
+}
 
+@media only screen and (max-width: 604px) {
+    h1 {
+        font-size: 2rem;
+    }
+    h2 {
+        font-size: 1.8rem;
+    }
+    .navbar {
+        width: 80%;
+        margin-left: -76%;
+    }
+    .navbar-active {
+        width: 80%;
+        margin-left: 30%:
+    }
+
+}

base_app/static/base_app/js/master.js

@@ -0,0 +1,30 @@
+function init() {
+    let nav;
+    nav = document.getElementById("nav");
+    nav.state = new Object();
+    nav.state.open = false;
+}
+
+function navbar_click() {
+    let nav;
+    let navButton;
+
+    nav = document.getElementById("nav");
+    check = nav.hasOwnProperty("state")
+    if (!check) {
+        return;
+    }
+
+    if (!nav.state.open) {
+        nav.classList.add("navbar-active");
+        nav.classList.remove("navbar");
+        nav.children[3].innerHTML = "<"
+        nav.state.open = true;
+    }
+    else {
+        nav.classList.remove("navbar-active");
+        nav.classList.add("navbar");
+        nav.children[3].innerHTML = ">"
+        nav.state.open = false;
+    }
+}

base_app/templates/index.html

@@ -10,17 +10,51 @@
     <p>
         I am an open-source enthusiast and love teaching people important stuff
         about technology. Currently, I'm trying to start up a small business
-        based on web development and software support. There should be a section about this
-        somewhere around here soon™!
+        based on web development and software support. There should be a
+        section about this somewhere around here soon™!
+        
+    </p>
 
-    <p>
     <h3> Open Source </h3>
-    <h3> Cryptography </h3>
-    <h3> Ethical software </h3>
-    <h3>  </h3>
+    <p>
+        I contribute to a few projects.
+    </p>
     <ul>
-        <li> some fucking list </li>
+        <li><a href="https://www.python.org/">Python</a></li>
+        <li><a href="https://getfedora.org/">Fedora Project</a></li>
+        <li><a href="https://wiki.cachyos.org/">CachyOS</a></li>
+        <li><a href="https://www.blender.org/">Blender</a></li>
     </ul>
+    <p>
+        You can check out most of my contributions on <a href="https://github.com/Dormouse759/">my GitHub</a>
+    </p>
+    <h3> Cryptography </h3>
+    <p>
+        Cryptography is what keeps all of our data secure. My solutions don't
+        take security lightly. In any way you ever communicate with me, there
+        either already is some kind of cryptography invloved, or you can
+        request to validate my message using GPG. <b>Never</b> trust any
+        message from me that looks important, if it's not cryptographically
+        easy to verify.
+    </p>
+    <h3> Ethical software </h3>
+    <p>
+        Ethical software are programs that are written and deployed in such a way
+        that they have no way of containing any malicious code. All of the software
+        I recomment and/or provide here on my website are open-source programs.
+    </p>
+    <p>
+        Open-source
+        is the first fundamental stone of ethical software, it makes the source code
+        available to all programmers around the world so they can download, modify, redistribute
+        and check what the software is doing.
+    </p>
+    <p>
+        There are more ways to ensure that your software is ethical and even
+        <i>proprietary</i> software <b>may</b> be ethical. Read some of my
+        articles on my website (to be added) to learn what ethical software is.
+    </p>
+    <h3>  </h3>
 </div>
 {% endblock %}
 

base_app/templates/layout.html

@@ -18,9 +18,9 @@
         {% endblock %}
     </head>
 
-    <body>
+    <body onload="init()">
         {# NAVBAR #}
-        <div class="navbar">
+        <section class="navbar" id="nav">
 
             <a href="/">
                 <div class="navbar-block">
@@ -39,9 +39,14 @@
                 Curriculum Vitae
             </div>
             </a>
-
+            <div class="navbar-button"
+                 onclick="navbar_click()"
+                 >
+                >
             </div>
 
+        </section>
+
         {# CONTENT #}
             {% block content %}
             {% endblock %}
@@ -65,5 +70,8 @@
                 </div>
             </div>
         </footer>
+
+        <script src="{% static "base_app/js/master.js" %}"></script>
     </body>
+
 </html>