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

Blog list styling

Browse source
This commit is contained in:
Oliver Davies 2018-09-04 21:01:35 +01:00
parent 3fdb15f5cd
commit f6f9f16900
4 changed files with 14 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -17,6 +17,7 @@
"laravel-mix": "^2.1.11", "laravel-mix": "^2.1.11",
"laravel-mix-purgecss": "^2.1.2", "laravel-mix-purgecss": "^2.1.2",
"laravel-mix-tailwind": "^0.1.0", "laravel-mix-tailwind": "^0.1.0",
"tailwindcss": "^0.6" "tailwindcss": "^0.6",
"tailwindcss-visuallyhidden": "^1.0.1"
} }
} }

22
source/blog.html
View file

@ -12,39 +12,25 @@ use: [posts]
<ul class="list-reset"> <ul class="list-reset">
{% for post in page.pagination.items %} {% for post in page.pagination.items %}
<li class="mb-12"> <li class="mb-12">
<h2 class="text-xl mb-1"> <h2 class="text-xl mb-2">
<a href="{{ post.url }}" class="no-underline hover:underline focus:underline text-black hover:text-grey-darker focus:text-grey-darker"> <a href="{{ post.url }}" class="no-underline hover:underline focus:underline text-black hover:text-grey-darker focus:text-grey-darker">
{{ post.title }} {{ post.title }}
</a> </a>
</h2> </h2>
<div>
<p class="text-grey-dark mb-2">{{ post.date|date('j F Y') }}</p>
</div>
{% include 'post/intro-image' with { page: post } %} {% include 'post/intro-image' with { page: post } %}
<div class="markdown mb-4"> <div class="markdown mb-4">
{% if post.summary %} {% if post.summary %}
{{ post.summary|markdown }} {{ post.summary|markdown }}
<div>
<a
class="button text-grey-darker rounded-lg border border-grey-light bg-grey-lightest no-underline hover:underline focus:underline"
href="{{ post.url }}"
>
Continue reading <span class="element-invisible">about {{ post.title }}
</a>
</div>
{% elseif post.blocks.excerpt %} {% elseif post.blocks.excerpt %}
{{ post.blocks.excerpt|markdown }} {{ post.blocks.excerpt|markdown }}
<div>
<a <a
class="button text-grey-darker rounded-lg border border-grey-light bg-grey-lightest no-underline hover:underline focus:underline"
href="{{ post.url }}" href="{{ post.url }}"
> class="inline-block bg-blue hover:bg-blue-dark focus:bg-blue-dark px-4 py-3 rounded no-underline hover:underline focus:underline text-white">
Continue reading <span class="element-invisible">about {{ post.title }} Read more
<span class="visuallyhidden">about {{ post.title }}</span>
</a> </a>
</div>
{% else %} {% else %}
{{ post.blocks.content|markdown }} {{ post.blocks.content|markdown }}
{% endif %} {% endif %}

1
tailwind.js
View file

@ -331,6 +331,7 @@ module.exports = {
center: true, center: true,
padding: '1rem', padding: '1rem',
}), }),
require('tailwindcss-visuallyhidden')(),
], ],
options: { options: {

4
yarn.lock
View file

@ -6928,6 +6928,10 @@ svgo@^1.0.0:
unquote "~1.1.1" unquote "~1.1.1"
util.promisify "~1.0.0" util.promisify "~1.0.0"
tailwindcss-visuallyhidden@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/tailwindcss-visuallyhidden/-/tailwindcss-visuallyhidden-1.0.1.tgz#ed67ecf6ee48ea0313b5c3c27498467f350be206"
tailwindcss@^0.6: tailwindcss@^0.6:
version "0.6.4" version "0.6.4"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-0.6.4.tgz#b0aa8a10c34d3fed7a5f32482ef92d5d416353ee" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-0.6.4.tgz#b0aa8a10c34d3fed7a5f32482ef92d5d416353ee"