diff --git a/_includes/layout.vto b/_includes/layout.vto
index f4929fa..e0fdcc4 100644
--- a/_includes/layout.vto
+++ b/_includes/layout.vto
@@ -70,16 +70,38 @@
-
{{ speaker.title |> md(true) }}
+
+ {{ speaker.title |> md(true) }}
+
+
+
+
+
+
{{ for event of speaker.items }}
-
+
{{ event.title |> md(true) }}
- {{ event.description |> md }}
-
+
+ {{ event.description |> md }}
+
{{ /for }}
diff --git a/index.yml b/index.yml
index 2cbbfee..e4b4548 100644
--- a/index.yml
+++ b/index.yml
@@ -134,13 +134,13 @@ speakers:
items:
- title: |
- Obradoiro: Deseño gráfico a través de *motion*
+ **Obradoiro**: Deseño gráfico a través de *motion*
description: |
Desenvolveranse animacións que representen valores e ideas. O propósito do obradoiro é ser capaces de representar un comportamento audiovisual en base a un concepto creativo a partir dunha lista proposta. Mediante o uso de formas ou tipografía, crearase unha presentación onde se amose o comportamento audiovisual a partir de dous conceptos máximo. O resultado serán tres aplicacións animadas.
footer:
VENRES 3 NOVEMBRO | 10:00 h | DIDAC
- title: |
- Conferencia: Thru Studio, deseño gráfico a través do movemento
+ **Conferencia**: Thru Studio, deseño gráfico a través do movemento
description: |
A conferencia fará un repaso por algúns dos proxectos do estudio para explicar en base a case studies como se poden deseñar identidades gráficas a través da animación.
footer:
@@ -164,7 +164,7 @@ speakers:
url: https://www.linkedin.com/company/oiko-design-office/
items:
- title: |
- Conferencia: Ipsum lorem, ipsum lorem
+ **Conferencia**: Ipsum lorem, ipsum lorem
description: |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
footer:
@@ -183,7 +183,7 @@ speakers:
img: /img/relatoras/maria-agra.jpg
items:
- title: |
- Conferencia: Web3 e deseño centrado en usuario na era do blockchain e dos NFTs
+ **Conferencia**: Web3 e deseño centrado en usuario na era do blockchain e dos NFTs
description: |
As tecnoloxías web3 como o *blockchain,* as aplicacións descentralizadas (dApps) e os tokens non funxibles (NFT) están a revolucionar a experiencia das persoas usuarias ao introducir novas formas de interactuar con Internet. A charla explorará o impacto de web3 nese sentido, incluíndo as oportunidades e retos que presentan estas tecnoloxías.
footer:
diff --git a/styles.css b/styles.css
index c9142db..b5b66de 100644
--- a/styles.css
+++ b/styles.css
@@ -186,6 +186,7 @@ html {
justify-content: center;
padding: 5vw;
text-align: center;
+ line-height: 1.5;
& a {
color: var(--red);
@@ -242,6 +243,26 @@ html {
margin: 1em 0;
}
}
+ .speakers-bio-link {
+ background: none;
+ border: none;
+ padding: 1em;
+ color: var(--red);
+ font-size: 1rem;
+ cursor: pointer;
+ vertical-align: middle;
+ font-weight: bold;
+ background: var(--black-5);
+
+ &:focus {
+ outline: 0;
+ }
+
+ &:hover {
+ background-color: var(--red);
+ color: var(--main-color);
+ }
+ }
& article {
display: grid;
@@ -252,8 +273,9 @@ html {
}
> div {
- padding: 4rem;
+ padding: 2rem 4rem;
padding-right: 0;
+ align-self: center;
}
}
@@ -269,6 +291,82 @@ html {
}
}
}
+.speakers-dialog {
+ max-width: 90vw;
+ width: 500px;
+ padding: 0;
+ border: none;
+ line-height: 1.5;
+}
+.speakers-bio {
+ padding: 2rem;
+}
+.speakers-links {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ gap: 1px;
+
+ & a {
+ display: block;
+ padding: 1em;
+ background: var(--red);
+ color: var(--color-main);
+ font-weight: bold;
+ text-decoration: none;
+ transition: background-color 200ms;
+
+ &:hover {
+ background-color: var(--black-5);
+ }
+ }
+}
+.speakers-dialog-close {
+ display: block;
+ margin: 0 0 0 auto;
+ border: none;
+ border-radius: 0;
+ padding: 1em;
+ background: var(--green);
+ color: var(--color-main);
+ font-weight: bold;
+ cursor: pointer;
+
+ &:focus {
+ outline: 0;
+ }
+
+ &:hover {
+ background-color: var(--black-5);
+ }
+}
+.speakers-event {
+ line-height: 1.5;
+
+ & h4 {
+ margin: 0;
+ font-size: 1.2em;
+ line-height: 1.3;
+
+ & strong {
+ font-style: normal;
+ font-weight: normal;
+ }
+ }
+
+ & footer {
+ text-transform: uppercase;
+ font-size: 0.9em;
+
+ & p {
+ margin-top: .25em;
+ }
+ }
+
+ + .speakers-event {
+ margin-top: 2rem;
+ }
+}
.location {
background: var(--black-10);