Add captions to screenshots.

Author: realor

src/assets/css/styles.css

@@ -287,11 +287,6 @@ a
   color: var(--link-color);
 }
 
-main a:hover
-{
-  text-decoration: underline;
-}
-
 code
 {
   overflow-wrap: break-word;
@@ -535,6 +530,17 @@ a.github > img
   outline: 1px solid var(--scrollbar-color);
 }
 
+figure
+{
+  margin: 0;
+  margin-top: 10px;
+}
+
+figure figcaption
+{
+  font-size: 0.9rem;
+}
+
 @media (max-width: 768px), (max-height: 500px)
 {
   header button.menu-toggle.image-button

src/assets/img/screenshots/screenshot-3.png

@@ -24,19 +24,24 @@ language: ca
   <section class="screenshots">
 
   {% macro screenshot(id, title) %}
-  <a href="/assets/img/screenshots/screenshot-{{ id }}.png" title="Captura {{ id }}">
-    <img src="/assets/img/screenshots/screenshot-{{ id }}.png" alt="{{ title }}">
+  <a href="/assets/img/screenshots/screenshot-{{ id }}.png">
+    <figure>
+      <img src="/assets/img/screenshots/screenshot-{{ id }}.png" alt="{{ title }}">
+      <figcaption>{{ title }}</figcaption>
+    </figure>
   </a>
   {% endmacro %}
 
-   {{ screenshot(1, "") }}
+   {{ screenshot(1, "Consulta de les propietats d'un objecte") }}
 
-   {{ screenshot(2, "") }}
+   {{ screenshot(2, "Eina de simulació d'ombres") }}
 
-   {{ screenshot(3, "") }}
+   {{ screenshot(3, "Gestió d'incidències a través del servei BCF") }}
 
-   {{ screenshot(4, "") }}
+   {{ screenshot(4, "Navegació per l'interior d'un edifici amb visualització de dades sensorials") }}
 
+   {{ screenshot(5, "Model digital de ciutat generat a partir d'informació provinent d'un servidor GIS") }}
+   
   </section>
 
 </div>

src/assets/img/screenshots/screenshot-5.png

@@ -24,19 +24,24 @@ language: en
   <section class="screenshots">
 
   {% macro screenshot(id, title) %}
-  <a href="/assets/img/screenshots/screenshot-{{ id }}.png" title="Screenshot {{ id }}">
-    <img src="/assets/img/screenshots/screenshot-{{ id }}.png" alt="{{ title }}">
+  <a href="/assets/img/screenshots/screenshot-{{ id }}.png">
+    <figure>
+      <img src="/assets/img/screenshots/screenshot-{{ id }}.png" alt="{{ title }}">
+      <figcaption>{{ title }}</figcaption>
+    </figure>
   </a>
   {% endmacro %}
 
-   {{ screenshot(1, "") }}
+  {{ screenshot(1, "Querying the properties of an object") }}
 
-   {{ screenshot(2, "") }}
+  {{ screenshot(2, "Shadow simulation tool") }}
 
-   {{ screenshot(3, "") }}
+  {{ screenshot(3, "Issue management through the BCF service") }}
 
-   {{ screenshot(4, "") }}
+  {{ screenshot(4, "Navigation inside a building with sensor data visualization") }}
 
+  {{ screenshot(5, "Digital city model generated from GIS server information") }}
+  
   </section>
 
 </div>

src/ca/index.njk

@@ -24,19 +24,24 @@ language: es
   <section class="screenshots">
 
   {% macro screenshot(id, title) %}
-  <a href="/assets/img/screenshots/screenshot-{{ id }}.png" title="Screenshot {{ id }}">
-    <img src="/assets/img/screenshots/screenshot-{{ id }}.png" alt="{{ title }}">
+  <a href="/assets/img/screenshots/screenshot-{{ id }}.png">
+    <figure>
+      <img src="/assets/img/screenshots/screenshot-{{ id }}.png" alt="{{ title }}">
+      <figcaption>{{ title }}</figcaption>
+    </figure>
   </a>
   {% endmacro %}
 
-   {{ screenshot(1, "") }}
+  {{ screenshot(1, "Consulta de las propiedades de un objeto") }}
 
-   {{ screenshot(2, "") }}
+  {{ screenshot(2, "Herramienta de simulación de sombras") }}
 
-   {{ screenshot(3, "") }}
+  {{ screenshot(3, "Gestión de incidencias a través del servicio BCF") }}
 
-   {{ screenshot(4, "") }}
+  {{ screenshot(4, "Navegación por el interior de un edificio con visualización de datos sensoriales") }}
 
+  {{ screenshot(5, "Modelo digital de ciudad generado a partir de información procedente de un servidor GIS") }}   
+   
   </section>
 
 </div>