diff --git a/base_app/static/base_app/css/master.css b/base_app/static/base_app/css/master.css index c32f075..94227bc 100644 --- a/base_app/static/base_app/css/master.css +++ b/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%: + } + +} diff --git a/base_app/static/base_app/js/master.js b/base_app/static/base_app/js/master.js new file mode 100644 index 0000000..8410c3d --- /dev/null +++ b/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; + } +} diff --git a/base_app/templates/index.html b/base_app/templates/index.html index 8bc90f7..a43e833 100644 --- a/base_app/templates/index.html +++ b/base_app/templates/index.html @@ -10,17 +10,51 @@

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™! -

+

+

Open Source

-

Cryptography

-

Ethical software

-

+

+ I contribute to a few projects. +

+

+ You can check out most of my contributions on my GitHub +

+

Cryptography

+

+ 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. Never trust any + message from me that looks important, if it's not cryptographically + easy to verify. +

+

Ethical software

+

+ 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. +

+

+ 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. +

+

+ There are more ways to ensure that your software is ethical and even + proprietary software may be ethical. Read some of my + articles on my website (to be added) to learn what ethical software is. +

+

{% endblock %} diff --git a/base_app/templates/layout.html b/base_app/templates/layout.html index 93f48cc..18d73f5 100644 --- a/base_app/templates/layout.html +++ b/base_app/templates/layout.html @@ -18,9 +18,9 @@ {% endblock %} - + {# NAVBAR #} - + {# CONTENT #} {% block content %} @@ -65,5 +70,8 @@ + + +