breadcrumbs, small fixes

3 files changed, 108 insertions, 10 deletions

diff --git a/weblog/static/weblog/css/weblog.css b/weblog/static/weblog/css/weblog.css
index 0b7c4e6..000549f 100755
--- a/weblog/static/weblog/css/weblog.css
+++ b/weblog/static/weblog/css/weblog.css
@@ -53,6 +53,7 @@ hr{
     border: none;
     height: 1px;
     background: linear-gradient(to right, rgba(0, 0, 0, 0), #3e3e3e, rgba(0, 0, 0, 0));
+    margin: 2em 0;
 }
 
 .navbar{
@@ -60,7 +61,7 @@ hr{
 }
 
 .nav-container{
-    padding: 0.5em 3em;
+    padding: 1.5em 4em;
 }
 
 .navbar-brand, .navbar-brand:visited{
@@ -69,6 +70,103 @@ hr{
     font-size: 1.5em;
 }
 
+.weblog-categories,
+.archive-list{
+    display: block;
+}
+
+.weblog-categories{
+    list-style: none;
+}
+
+.weblog-categories li a{
+    padding: 1em;
+}
+
+.weblog-categories li a.active{
+    background-color: #0055a0;
+}
+
+.breadcrumb{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    overflow: hidden;
+    background-color: #2e2e2e;
+}
+
+.breadcrumb li{
+    float: left;
+    background-color: #2e2e2e;
+}
+
+.breadcrumb li a{
+    position: relative;
+    display: block;
+    float: left;
+    padding: 0.5em 55px;
+    background: #0080a0;
+    color: #dedede;
+}
+
+.breadcrumb li a::after{
+    content: " ";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-top: 50px solid transparent;
+    border-bottom: 50px solid transparent;
+    border-left: 30px solid #0080a0;
+    top: 50%;
+    margin-top: -50px;
+    left: 100%;
+    z-index: 2;
+    transition: 0.3s;
+}
+
+.breadcrumb li a::before{
+    content: " ";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-top: 50px solid transparent;
+    border-bottom: 50px solid transparent;
+    border-left: 30px solid #dedede;
+    top: 50%;
+    margin-top: -50px;
+    margin-left: 1px;
+    left: 100%;
+    z-index: 1;
+}
+
+.breadcrumb li a:hover{
+    background-color: #0055a0;
+}
+
+.breadcrumb li a:hover::after{
+    border-left-color: #0055a0;
+}
+
+.breadcrumb li:first-child a{
+    padding-left: 1em;
+}
+
+.breadcrumb li:last-child a{
+    background-color: transparent;
+}
+
+.breadcrumb li:last-child a::after{
+    border-left: 30px solid #2e2e2e;
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select{
+    width: 100%;
+}
+
 .blog-container{
     position: relative;
 }
@@ -83,7 +181,7 @@ hr{
 }
 
 .weblog-sidebar{
-    padding: 1em;
+    padding: 1em 2em;
 }
 
 .blog-content{
diff --git a/weblog/templates/weblog/sidebar_categories.html b/weblog/templates/weblog/sidebar_categories.html
index 7e7fa5c..370d6b8 100755
--- a/weblog/templates/weblog/sidebar_categories.html
+++ b/weblog/templates/weblog/sidebar_categories.html
@@ -1,11 +1,11 @@
 {% load i18n %}
 {% if categories %}
 <h3>{% trans 'Categories' context 'Post categories' %}</h3>
-<div class="list-group weblog-categories">
+<ul class="weblog-categories">
     {% for category in categories %}
-    <a href="{% url 'weblog:CategoryIndex' category_slug=category.slug %}" class="list-group-item{% if category.slug == selected_cat_slug %} active{% endif %}">
+    <li><a href="{% url 'weblog:CategoryIndex' category_slug=category.slug %}" {% if category.slug == selected_cat_slug %}class="active"{% endif %}>
         {{ category.name }}
-    </a>
+        </a></li>
     {% endfor %}
 </div>
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/weblog/templates/weblog/weblog.html b/weblog/templates/weblog/weblog.html
index a9acbdf..035ca20 100755
--- a/weblog/templates/weblog/weblog.html
+++ b/weblog/templates/weblog/weblog.html
@@ -5,14 +5,14 @@
 {% block blog_block %}
 <ul class="breadcrumb">
     {% if breadcrumbs %}
-    <li class="breadcrumb-item"><a href="{% url 'weblog:Index' %}">{{ blog_title }}</a></li>
+    <li><a href="{% url 'weblog:Index' %}">{{ blog_title }}</a></li>
     {% for crumb in breadcrumbs %}
     {% if forloop.last %}
-    <li class="breadcrumb-item active">{{ crumb.name }}</li>
-    {% else %}<li class="breadcrumb-item"><a href="{{ crumb.url }}">{{ crumb.name }}</a></li>{% endif %}
+    <li><a href="#">{{ crumb.name }}</a></li>
+    {% else %}<li><a href="{{ crumb.url }}">{{ crumb.name }}</a></li>{% endif %}
     {% endfor %}
     {% else %}
-    <li class="breadcrumb-item active"><a href="{% url 'weblog:Index' %}">{{ blog_title }}</a></li>
+    <li><a href="{% url 'weblog:Index' %}">{{ blog_title }}</a></li>
     {% endif %}
 </ul>
 <div class="blog-wrapper">