Generated a new login area

4 files changed, 69 insertions, 13 deletions

diff --git a/static/css/login-area.css b/static/css/login-area.css
new file mode 100644
index 00000000..15351174
--- /dev/null
+++ b/static/css/login-area.css
@@ -0,0 +1,55 @@
+#login-area {
+    width: 250px;
+    height: 350px;
+    background: url('../images/backgrounds/login-area.png') no-repeat;
+    background-size: 250px 350px;
+    margin: auto;
+    padding: 0px;
+    border: 0px;
+    position: relative;
+}
+
+#login-form {
+    display: block;
+    padding-top: 151px;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+#login-form input[type=text], #login-form input[type=password] {
+    display: block;
+    margin: 0px auto 18px auto;
+    width: 180px;
+    font-size: 12px;
+    padding: 4px 8px;
+    background: transparent;
+    color: #54598E;
+    border-radius: 4px;
+}
+
+#login-form input::placeholder {
+    color: #787dab;
+}
+
+#login-form input[type=submit] {
+    width: 131px;
+    height: 26px;
+    cursor: pointer;
+    position: absolute;
+    bottom: 55px;
+    left: 61px;
+    border-radius: 2px;
+    background: transparent;
+}
+
+#login-area > #register-now-button {
+    display: block;
+    width: 60px;
+    height: 12px;
+    cursor: pointer;
+    border-radius: 2px;
+    position: absolute;
+    bottom: 30px;
+    right: 40px;
+    background: transparent;
+}
diff --git a/static/css/styles.css b/static/css/styles.css
index bed7d0be..072c68b7 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -310,16 +310,6 @@ blockquote {
     display: block;
 }
 
-#login-form div {
-    margin: 0px 0px 15px 0px;
-    padding: 0px;
-}
-
-#login-form span {
-    display: inline-block;
-    width: 70px;
-}
-
 #recent-posts h1 {
     margin: 0px;
     padding: 0px;
diff --git a/static/images/backgrounds/login-area.png b/static/images/backgrounds/login-area.png
new file mode 100644
index 00000000..49a68c7e
--- /dev/null
+++ b/static/images/backgrounds/login-area.png
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index ed260c6b..5aeecdc6 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -1,14 +1,25 @@
 {% load static %}
 {% comment %} Login Area {% endcomment %}
 {% if not user.is_authenticated %}
+<link rel="stylesheet" href="{% static 'css/login-area.css' %}">
 <div id="login-area">
-    <h2>Login</h2>
     <form method="post" action="{% url 'users:login' %}" id="login-form">
         <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
+        <input type="text" id="username" name="username" placeholder="Username" autocomplete="off" value="{{ request.GET.username }}">
+        <input type="password" id="password" name="password" placeholder="Password" autocomplete="off">
+        <input type="hidden" name="next" value="{{ request.path }}">
+        <input type="submit" value="">
+    </form>
+    <a href="{% url 'blog:register' %}" id="register-now-button"></a>
+</div>
+
+{% comment %} <div id="login-area">
+    <h2>Login</h2>
+        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
         <table style="width: 250px; border-spacing: 0; border-collapse: separate;">
             <tr>
                 <td style="width: 70px;"><label for="username"><b>Username:</b></label></td>
-                <td style="padding-top: 10px; width: 160px;"><input style="width: 150px;" type="text" id="username" name="username" placeholder="Username" autocomplete="off" value="{{ request.GET.username }}"></td>
+                <td style="padding-top: 10px; width: 160px;"></td>
             </tr>
             <tr>
                 <td style="width: 70px;"><label for="password"><b>Password:</b></label></td>
@@ -40,7 +51,7 @@
             {% endif %}
         {% endif %}
     {% endfor %}
-</div>
+</div> {% endcomment %}
 {% endif %}