Merge branch 'refactor/button-styles' into 'cosmocode'

moved inline styles to base.css and button.css and adjusted button styles

See merge request wikimedia/foerderbarometer!2

input/static/css/base.css

@@ -0,0 +1,24 @@
+ul > li {
+    list-style-type: none;
+}
+
+ul {
+    padding-left: 10px;
+}
+
+label.required::after {
+    content: ' *';
+    color: red;
+}
+
+.spacer-15 {
+    height: 15%;
+}
+
+.spacer-5 {
+    height: 5%;
+}
+
+.page-centered {
+    text-align: center;
+}

input/static/css/button.css

@@ -0,0 +1,23 @@
+.page-centered .button-login {
+    width: 40vw;
+    height: 6vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 4vh;
+    margin: 0 auto;
+    background-color: #79AEC8;
+    color: #000000;
+    text-decoration: none;
+    padding: 10px 15px;
+}
+
+.page-centered .button-login:hover {
+    background-color: #659DB8;
+}
+
+.page-centered .button-login:focus-visible {
+    outline: 2px solid #000;
+    outline-offset: 2px;
+}

input/templates/input/index.html

@@ -1,69 +1,38 @@
 {% load static %}
-
+{% load i18n %}
 
 <link rel="stylesheet" type="text/css" href="{% static 'admin/css/base.css' %}"/>
 <link rel="stylesheet" type="text/css" href="{% static 'admin/css/widgets.css' %}"/>
+<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}"/>
+<link rel="stylesheet" type="text/css" href="{% static 'css/button.css' %}">
 
-
+<div class="page-centered">
-{% load i18n %}
+    <div class="spacer-5"></div>
-
+    <p role="heading" aria-level="1">
-{% csrf_token %}
-
-
-<center>
-  <style>
-    ul > li {
-      list-style-type: none;
-    }
-    ul {
-      padding-left: 10;
-    }
-    label.required::after {
-      content: ' *';
-      color: red;
-    }
-    .div15 {
-      height: 15%;
-    }
-    .div5 {
-      height: 5%;
-    }
-    .button1 {
-      width: 40vw;
-      height: 6vh;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-weight: bold;
-      font-size: 4vh;
-    }
-      
-  </style>
-
-<div class="div5"></div>
-<p>
         Herzlich willkommen im Förderanfrageportal von Wikimedia Deutschland!
     </p>
-<div class="div5"></div>
+    <div class="spacer-5"></div>
-<!-- <a href="http://fdb-devel.wikimedia.de/extern"style="float:right;padding-right:10%;">OAUTH</a>
-<a href="http://fdb-devel.wikimedia.de/extern" style="float:left;padding-left:10%;">OAUTH</a> -->
     <p>
-<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Figuren_klein.jpg"><p>
+        <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Figuren_klein.jpg">
-Um eine Unterstützungsleistung im Rahmen der Förderangebote anfragen zu können, verifiziere dich bitte mit deinem Wikimedia-Konto. 
+    </p>
+    <p>
+        Um eine Unterstützungsleistung im Rahmen der Förderangebote anfragen zu können, verifiziere dich bitte mit
+        deinem Wikimedia-Konto.
         <br>Weitere Informationen und Hintergründe findest du unter
         <a href="https://de.wikipedia.org/wiki/Wikipedia:Förderung/Förderangebote">
             Förderportal</a> in der deutschsprachigen Wikipedia.
-<p>
+    </p>
-<div class="div5"></div>
+    <div class="spacer-5"></div>
-<div class="button button1"><a href="/extern"><div class="button1_text">Anmelden</div></a></div>
+    <a href="/extern" class="button button-login">Anmelden</a>
-<div class="div5"></div>
+    <div class="spacer-5"></div>
-<div class="div5"></div>
+    <div class="spacer-5"></div>
-<br>Für alle Fragen wende dich gern an das <a href="https://de.wikipedia.org/wiki/Wikipedia:Förderung/Wikimedia_Deutschland">Team Communitys und Engagement</a>.
+    <br>Für alle Fragen wende dich gern an das <a
-<br>Für interessierte Hacker gibts auch den <a href="https://srcsrv.wikimedia.de/beba/foerderbarometer">Sourcecode</a> zum Formular und was damit passiert.
+        href="https://de.wikipedia.org/wiki/Wikipedia:Förderung/Wikimedia_Deutschland">Team Communitys und
+    Engagement</a>.
+    <br>Für interessierte Hacker gibts auch den <a
+        href="https://srcsrv.wikimedia.de/beba/foerderbarometer">Sourcecode</a> zum Formular und was damit passiert.
     <p>
         <a href="https://www.wikimedia.de/impressum/">Impressum</a>
-<p>
+    </p>
-</center>
+</div>
-
-