Updated covid-tracability project with GIF and link
Also, the button flex container has been improved by allowing the
buttons to wrap, instead of being squeezed in a very small space without
wrapping.
Change-Id: I7d12687b71eeeaa801d341c00417b01bf0456d6e
diff --git a/img/covid_tracability_fme.gif b/img/covid_tracability_fme.gif
new file mode 100644
index 0000000..c8d0115
--- /dev/null
+++ b/img/covid_tracability_fme.gif
Binary files differ
diff --git a/index.html b/index.html
index 9b9f6f5..f18d4b2 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,7 @@
<div class="mdc-layout-grid__cell project-cell">
<div class="project-card mdc-card">
- <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/covid_tracability_fme.png');"></div>
+ <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/covid_tracability_fme.gif');"></div>
<div class="project-card__primary">
<h3 class="project-card__title mdc-typography mdc-typography--headline6">Covid Tracability tool for the FME</h3>
<h4 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Sep 2020 - Currently</h4>
@@ -49,6 +49,9 @@
<a href="https://github.com/delefme/covid-tracability-backend" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple">
<span class="mdc-button__ripple"></span> Backend Git repo
</a>
+ <a href="https://delefme.github.io/covid-tracability/" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple">
+ <span class="mdc-button__ripple"></span> Live web app
+ </a>
</div>
</div>
</div>
diff --git a/styles.css b/styles.css
index 8b31d8b..eac3bdc 100644
--- a/styles.css
+++ b/styles.css
@@ -52,6 +52,10 @@
border-bottom: dashed 1px gray;
}
+.project-card .mdc-card__actions .mdc-card__action-buttons {
+ flex-wrap: wrap;
+}
+
@media (min-width: 1400px) {
.project-cell {
width: auto;
