Breadcrumbs, základní styly

remotes/1726908188925722499/search
Emil Miler 4 years ago
parent b3011bc481
commit 5879f3ef7f

@ -26,6 +26,7 @@ header {
justify-content: space-between;
height: 6rem;
max-width: 1250px;
width: 100%;
}
a.logo {
@ -213,3 +214,43 @@ div.rambotron {
}
}
}
div.breadcrumbs {
border-top: 1px solid #D8DEE9;
.wrap {
margin: 0 auto;
display: flex;
max-width: 1250px;
width: 100%;
}
a.home {
display: flex;
align-items: center;
}
ul {
display: flex;
margin-left: .9rem;
li {
display: flex;
align-items: center;
&::before {
content: "\203A";
margin: 0 1em;
font-weight: bold;
color: #D8DEE9;
}
a {
display: inline-block;
padding: 1rem;
&:hover { text-decoration: underline }
}
}
}
}

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23"><path d="M0 0h23v23H0z" fill="none"/><path d="M18.182 20H4.818a.952.952 0 01-.955-.949v-8.542H1L10.858 1.6a.959.959 0 011.285 0L22 10.509h-2.864v8.542a.952.952 0 01-.954.949zm-5.727-1.9h4.773V8.76L11.5 3.583 5.773 8.76v9.34h4.773v-5.693h1.909z" fill="#88c0d0"/></svg>

After

Width:  |  Height:  |  Size: 330 B

@ -1,5 +1,18 @@
{% extends "base.html" %}
{% block extra %}
<div class="breadcrumbs">
<div class="wrap">
<a href="{{ config.base_url }}" class="home"><img src="{{ get_url(path="home.svg") }}" alt="Home"></a>
<ul>
<li><a href="">Item</a></li>
<li><a href="">Item</a></li>
<li><a href="">Item</a></li>
</ul>
</div>
</div>
{% endblock %}
{% block content %}
<section>
<h1>{{ page.title }}</h1>

Loading…
Cancel
Save