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

Add figure partial

Browse source
This commit is contained in:
Oliver Davies 2019-07-15 12:33:30 +01:00
parent baf9ac5809
commit a5a4bdd465
2 changed files with 36 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
source/_partials/figure.html.twig Normal file
View file

@ -0,0 +1,8 @@
<figure class="block">
<img src="{{ image.src }}" alt="{{ image.alt }}" class="p-1 border">
{% if caption %}
<figcaption class="mt-2 mb-0 italic text-sm text-center text-gray-800">
{{ caption }}
</figcaption>
{% endif %}
</figure>

45
source/_posts/rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
View file

@ -108,30 +108,41 @@ This was the first page that I rebuilt - the Environments page for an applicatio
Vue Router is configured to show the
<figure>
<img src="/images/blog/rebuilding-acquia-vue-tailwind/3-environments.png" alt="A screenshot of the rebuilt Environments page." class="border border-grey-light p-1">
<figcaption>The rebuilt Environments page for an application.</figcaption>
</figure>
{% include 'figure' with {
image: {
src: '/images/blog/rebuilding-acquia-vue-tailwind/3-environments.png',
alt: 'A screenshot of the rebuilt Environments page.',
},
caption: 'The rebuilt Environments page for an application.',
} %}
## The applications page
<figure>
<img src="/images/blog/rebuilding-acquia-vue-tailwind/1-applications.png" alt="A screenshot of the rebuilt Applications page." class="border border-gray-300 p-2">
<figcaption>The rebuilt Applications page.</figcaption>
</figure>
{% include 'figure' with {
image: {
src: '/images/blog/rebuilding-acquia-vue-tailwind/1-applications-grid.png',
alt: 'The rebuild Applications page, with applications displayed in a grid.',
},
caption: 'The rebuilt Applications page - grid view',
} %}
<figure>
<img src="/images/blog/rebuilding-acquia-vue-tailwind/2-applications-list.png" alt="A screenshot of the rebuilt Applications page as a list." class="border border-grey-light p-1">
<figcaption>The rebuilt Applications page.</figcaption>
</figure>
{% include 'figure' with {
image: {
src: '/images/blog/rebuilding-acquia-vue-tailwind/2-applications-list.png',
alt: 'The rebuild Applications page, with applications displayed as a list.',
},
caption: 'The rebuilt Applications page - list view',
} %}
## An environment page
<figure>
<img src="/images/blog/rebuilding-acquia-vue-tailwind/3-environment.png" alt="A screenshot of the rebuilt page for an environment within an application." class="border border-gray-300 p-2">
<figcaption>The rebuilt page for an environment within an application.</figcaption>
</figure>
{% include 'figure' with {
image: {
src: '/images/blog/rebuilding-acquia-vue-tailwind/4-environment.png',
alt: 'A screenshot of the rebuilt Environment page.',
},
caption: 'The rebuilt page for an environment within an application.',
} %}
[github]: https://github.com/opdavies/rebuilding-acquia
[netlify]: https://rebuilding-acquia.oliverdavies.uk