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 @@ Retrato
-

{{ speaker.title |> md(true) }}

+

+ {{ speaker.title |> md(true) }} +    + +

+ + + + +
+ {{ speaker.bio |> md }} +
+ + +
+ {{ 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);