biografias

asociaciondag · Aug 12, 2023 · 93fee01 · 93fee01
1 parent d371430
commit 93fee01
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 9 deletions.
diff --git a/_includes/layout.vto b/_includes/layout.vto
@@ -70,16 +70,38 @@
           <img src="{{ speaker.img }}" alt="Retrato">
 
           <div class="speakers-person">
-            <h3>{{ speaker.title |> md(true) }}</h3>
+            <h3>
+              {{ speaker.title |> md(true) }}
+              &nbsp;&nbsp;
+              <button class="speakers-bio-link" onclick="this.parentElement.nextElementSibling.showModal()">
+                Ler biografía
+              </button>
+            </h3>
+
+            <dialog class="speakers-dialog">
+              <button class="speakers-dialog-close" onclick="this.parentElement.close()">Close</button>
+
+              <div class="speakers-bio">
+                {{ speaker.bio |> md }}
+              </div>
+
+              <ul class="speakers-links">
+              {{ for link of speaker.links }}
+                <li><a href="{{ link.url }}" target="_blank">{{ link.type }}</a></li>
+              {{ /for }}
+              </ul>
+            </dialog>
+
 
             {{ for event of speaker.items }}
-            <section>
+            <section class="speakers-event">
               <h4>{{ event.title |> md(true) }}</h4>
-              {{ event.description |> md }}
-
               <footer>
                 {{ event.footer |> md }}
               </footer>
+
+              {{ event.description |> md }}
+
             </section>
             {{ /for }}
           </div>

diff --git a/index.yml b/index.yml
@@ -134,13 +134,13 @@ speakers:
 
       items:
         - title: |
-            <em>Obradoiro</em>: 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: |
-            <em>Conferencia</em>: 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: |
-            <em>Conferencia</em>: 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: |
-            <em>Conferencia</em>: 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
@@ -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);