improve look and feel

web_dev/sas_web/meingoethopia/static/meingoethopia/css/index.css

@@ -0,0 +1,26 @@
+ul.meinlinks {
+    margin: 0.75em 0;
+    padding: 0 1em;
+    list-style: none;
+}
+ul.meinlinks li:before { 
+    content: "";
+    border-color: transparent #111;
+    border-style: solid;
+    border-width: 0.35em 0 0.35em 0.45em;
+    display: block;
+    height: 0;
+    width: 0;
+    left: -1em;
+    top: 0.9em;
+    position: relative;
+}
+
+ul.meinlinks a, ul.meinlinks a:visited {
+    text-decoration: none;
+    color: #9F2D17;
+}
+
+ul.meinlinks a:hover {
+    color: #48140a;
+}

web_dev/sas_web/meingoethopia/templates/meingoethopia/index.html

@@ -1,9 +1,17 @@
 {% extends "public/default.html" %}
+{% load static %}
 
 {% block content %}
-<p>Mein Goethopia!</p>
+<link rel="stylesheet" type="text/css" href="{% static "meingoethopia/css/index.css" %}">
+<p>Du möchtest einen Betrieb anmelden? Oder eine Partei gründen? Vielleicht sogar als Präsidentin
+kandidieren?</p>
+
+<p>Dann bist du hier genau richtig!</p>
+
+<ul class="meinlinks">
+    <li><a href="{% url "meingoethopia:betrieb_new" %}">Betrieb anmelden</a></li>
+    <li><a href="{% url "meingoethopia:partei_new" %}">Partei gründen</a></li>
+    <li><a href="{% url "meingoethopia:praesident_werden" %}">Als Präsidentin aufstellen lassen</a></li>
+</ul>
 
-<p><a href="{% url "meingoethopia:betrieb_new" %}">Betrieb anmelden</a></p>
-<p><a href="{% url "meingoethopia:partei_new" %}">Partei gründen</a></p>
-<p><a href="{% url "meingoethopia:praesident_werden" %}">Als Präsidentin aufstellen lassen</a></p>
 {% endblock %}

web_dev/sas_web/static/public/css/default.css

@@ -0,0 +1,4 @@
+#content{
+    margin-left: 5%;
+    margin-right: 5%;
+}

web_dev/sas_web/static/public/css/footer.css

@@ -0,0 +1,4 @@
+#footer {
+    margin-left: 2%;
+    margin-right: 2%;
+}

web_dev/sas_web/static/public/css/header.css

@@ -57,7 +57,7 @@ table td{
     color: black;
     outline: none;
 }
-ul {
+ul.navbar {
     list-style-type: none;
     position: relative;
     margin-left: 2%;
@@ -69,7 +69,7 @@ ul {
     border: none;
 }
 
-li {
+li.navbar {
     float: left;
     width: 30%;
     margin-top: 0.5%;
@@ -79,7 +79,7 @@ li {
     color: #929292;
 }
 
-li a {
+li.navbar a {
     display: block;
     color: #666;
     text-align: center;
@@ -89,11 +89,11 @@ li a {
     border-top-left-radius: 2.5px;
 }
 
-.active {
+li.navbar a.active {
     background: #9F2D17;
     color: white;
 }
 
-li a:hover:not(.active) {
+li.navbar a:hover:not(.active) {
     background: #929292;
 }

web_dev/sas_web/templates/public/default.html

@@ -1,6 +1,9 @@
 {% extends "public/base.html" %}
+{% load static %}
 
 {% block raw_content %}
+
+<link rel="stylesheet" type="text/css" href="{% static "public/css/default.css" %}">
 <div id="content">
     {% block content %}
     {% endblock %}

web_dev/sas_web/templates/public/footer.html

@@ -1,5 +1,6 @@
-<div id="footer">
+{% load static %}
 
+<link rel="stylesheet" type="text/css" href="{% static "public/css/footer.css" %}">
+<div id="footer">
     <p>(C) N.H. und C.M.</p>
-
 </div>

web_dev/sas_web/templates/public/header.html

@@ -29,10 +29,10 @@
         </tr>
     </table>
     <div id="navigation">
-    <ul>
-        <li><a {% if appname == "startpage" %}class="active"{% endif %} href="/">Gesetzesblatt</a></li>
-        <li><a {% if appname == "datenbank" %}class="active"{% endif %} href="{% url "datenbank:index" %}">Datenbank</a></li>
-        <li><a {% if appname == "meingoethopia" %}class="active"{% endif %} href="{% url "meingoethopia:index" %}">Mein Goethopia</a></li>         
+    <ul class="navbar">
+        <li class ="navbar"><a {% if appname == "startpage" %}class="active"{% endif %} href="/">Gesetzesblatt</a></li>
+        <li class="navbar"><a {% if appname == "datenbank" %}class="active"{% endif %} href="{% url "datenbank:index" %}">Datenbank</a></li>
+        <li class="navbar"><a {% if appname == "meingoethopia" %}class="active"{% endif %} href="{% url "meingoethopia:index" %}">Mein Goethopia</a></li>         
     </ul>
     </div>
 </div>