opdavies/oliverdavies.uk-old-sculpin
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add breadcrumbs for talks and posts

Browse source
This commit is contained in:
Oliver Davies 2017-11-19 15:03:07 +00:00
parent f62cd1d651
commit 3defaf676c
6 changed files with 56 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/less/main.less
View file

@ -58,7 +58,12 @@ main ul {
@apply .pl-4; @apply .pl-4;
} }
svg {
fill: currentColor;
}
@import "components/listing"; @import "components/listing";
@import "components/navbar";
@import "components/post"; @import "components/post";
@import "components/talk"; @import "components/talk";
@import "components/talks-table"; @import "components/talks-table";

2
source/_includes/nav.html.twig
View file

@ -1,4 +1,4 @@
<div class="border-bottom border-b border-grey-lighter mb-4"> <div class="navbar border-bottom border-b border-grey-lighter mb-6">
<header class="container mx-auto px-4 flex items-center"> <header class="container mx-auto px-4 flex items-center">
<div class="w-1/4"> <div class="w-1/4">
<a href="/" class="" title="Home"> <a href="/" class="" title="Home">

7
source/_includes/svg/chevron-right.twig Normal file
View file

@ -0,0 +1,7 @@
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="{{ class }}" style="{{ style }}">
<g stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<polygon id="Combined-Shape" points="12.9497475 10.7071068 13.6568542 10 8 4.34314575 6.58578644 5.75735931 10.8284271 10 6.58578644 14.2426407 8 15.6568542 12.9497475 10.7071068"></polygon>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 476 B

1
source/_layouts/default.html.twig
View file

@ -26,6 +26,7 @@
</head> </head>
<body class="text-grey-darkest text-sm leading-normal"> <body class="text-grey-darkest text-sm leading-normal">
{% include 'nav' %} {% include 'nav' %}
{% block breadcrumb %}{% endblock %}
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div> <div>

20
source/_layouts/post.html.twig
View file

@ -1,5 +1,25 @@
{% extends 'default' %} {% extends 'default' %}
{% block breadcrumb %}
<div class="breadcrumb bg-grey-lightest border border-b border-silver mb-6 -mt-6">
<div class="container mx-auto px-4">
<ul class="flex pl-0 mb-0">
<li class="list-reset flex items-center">
<a class="inline py-2" href="{{ site.url }}/">Home</a>
{% include "svg/chevron-right" with { class: 'text-grey-light mx-1', style: "height: 20px" } %}
</li>
<li class="list-reset flex items-center">
<a class="inline py-2" href="{{ site.url }}/blog">Blog</a>
{% include "svg/chevron-right" with { class: 'text-grey-light mx-1', style: "height: 20px" } %}
</li>
<li class="list-reset flex">
<span class="inline py-2">{{ page.title }}</span>
</li>
</ul>
</div>
</div>
{% endblock %}
{% block content_wrapper %} {% block content_wrapper %}
{% include 'post/header' %} {% include 'post/header' %}
{% include 'post/intro-image' %} {% include 'post/intro-image' %}

22
source/_layouts/talk.html.twig
View file

@ -1,7 +1,29 @@
{% extends 'page' %} {% extends 'page' %}
{% block breadcrumb %}
<div class="breadcrumb bg-grey-lightest border border-b border-silver mb-6 -mt-6">
<div class="container mx-auto px-4">
<ul class="flex pl-0 mb-0">
<li class="list-reset flex items-center">
<a class="inline py-2" href="{{ site.url }}/">Home</a>
{% include "svg/chevron-right" with { class: 'text-grey-light mx-1', style: "height: 20px" } %}
</li>
<li class="list-reset flex items-center">
<a class="inline py-2" href="{{ site.url }}/talks">Talks</a>
{% include "svg/chevron-right" with { class: 'text-grey-light mx-1', style: "height: 20px" } %}
</li>
<li class="list-reset flex">
<span class="inline py-2">{{ page.title }}</span>
</li>
</ul>
</div>
</div>
{% endblock %}
{% block content_wrapper %} {% block content_wrapper %}
<div> <div>
<h2>Abstract</h2>
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>