people block

_cms.ts

@@ -13,6 +13,7 @@ import separatorBlock from "./_includes/blocks/separator/fields.ts";
 import calendarBlock from "./_includes/blocks/calendar/fields.ts";
 import speakersBlock from "./_includes/blocks/speakers/fields.ts";
 import ticketsBlock from "./_includes/blocks/tickets/fields.ts";
+import peopleBlock from "./_includes/blocks/people/fields.ts";
 
 const blocks = {
   type: "choose-list",
@@ -25,6 +26,7 @@ const blocks = {
     imageTextBlock,
     locationBlock,
     logosBlock,
+    peopleBlock,
     separatorBlock,
     speakersBlock,
     ticketsBlock,

_includes/blocks/faq/faq.css

@@ -7,9 +7,17 @@
     display: grid;
     row-gap: 2rem;
     column-gap: 4rem;
+    align-items: start;
 
     @media (width > 1050px) {
       grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
     }
   }
 }
+
+@media (width > 1050px) {
+  .block-faq-header {
+    position: sticky;
+    top: 120px;
+  }
+}

_includes/blocks/faq/faq.vto

@@ -1,6 +1,6 @@
 <section id="{{ block.id }}" class="block-faq theme {{ block.theme }}">
   <div>
-    <header>
+    <header class="block-faq-header">
       <h2 class="type-title">{{ block.title }}</h2>
     </header>
 

_includes/blocks/people/fields.ts

@@ -0,0 +1,25 @@
+export default {
+  type: "object",
+  name: "people",
+  fields: [
+    "title: text",
+    "id: text",
+    "description: markdown",
+    {
+      type: "object-list",
+      name: "items",
+      label: "People",
+      fields: [
+        "name: text",
+        {
+          type: "file",
+          name: "img",
+          label: "Image",
+          upload: "src:files/people",
+        },
+        "url: url",
+        "description: text",
+      ],
+    },
+  ],
+};

_includes/blocks/people/people.css

@@ -0,0 +1,60 @@
+.block-people {
+  display: grid;
+  grid-column: start / end;
+  row-gap: 2rem;
+  column-gap: 4rem;
+  align-items: start;
+
+  @media (width > 1050px) {
+    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
+  }
+}
+
+@media (width > 1050px) {
+  .block-people-header {
+    position: sticky;
+    top: 120px;
+  }
+}
+
+.block-people-list {
+  --width: 130px;
+  --img-size: 120px;
+
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, var(--width));
+  grid-column-gap: 2em;
+  grid-row-gap: 4em;
+  justify-content: space-around;
+  text-align: center;
+
+  &.is-center {
+    grid-template-columns: repeat(auto-fit, var(--width));
+    justify-content: center;
+  }
+
+  > li > a {
+    display: block;
+    text-decoration: none;
+  }
+
+  & h3 {
+    margin: 1em 0 .3em;
+  }
+
+  & p {
+    font-size: var(--font-0-size);
+    margin: 0;
+  }
+
+  & img {
+    width: var(--img-size);
+    height: var(--img-size);
+    object-fit: cover;
+    filter: saturate(0);
+    border-radius: .5rem;
+  }
+}

_includes/blocks/people/people.vto

@@ -0,0 +1,25 @@
+<section id="{{ block.id }}" class="block-people theme is-light width-box fox-fill">
+  {{ if block.title || block.description }}
+  <header class="block-people-header">
+    <h2 class="type-title">{{ block.title }}</h2>
+
+    <div class="block-people-description type-txt">
+      {{ block.description |> md }}
+    </div>
+  </header>
+  {{ /if }}
+
+  <ul class="block-people-list is-{{ block.size }}">
+    {{ for item of block.items }}
+    <li>
+      {{ if item.url }}<a href="{{ item.url }}">{{ /if }}
+      <img src="{{ item.img }}" alt="{{ item.name }}">
+
+      <h3 class="type-short-bold">{{ item.name }}</h3>
+      {{ if item.url }}</a>{{ /if }}
+
+      {{ item.description |> md }}
+    </li>
+    {{ /for }}
+  </ul>
+</section>

index.yml

@@ -400,6 +400,93 @@ blocks:
         url: 'https://singularity-hackers.com/'
   - type: separator
     width: is-default
+  - type: people
+    title: Mecenas
+    description: |
+      Estas personas han contribuido con su mecenazgo a que la
+      #TRG23 sea posible, asegurando la sostenibilidad del evento.
+    items:
+    - name: Daniel Ramos
+      url: https://twitter.com/danielramosl
+      img: /files/people/danielramos.jpg
+    - name: David Pardo
+      url: https://twitter.com/dei_biz
+      img: /files/people/davidpardo.jpg
+    - name: Daniel Torres-Burriel
+      url: https://twitter.com/torresburriel
+      img: /files/people/torres-burriel.png
+    - name: Guillermo Montoya
+      url: https://twitter.com/Gmfdsr
+      img: /files/people/GuillermoTRG_2.jpg
+    - name: Dimas Suarez
+      url: https://massuarez.es/
+      img: /files/people/dimas.jpg
+    - name: Fátima Ballesteros
+      url: https://www.linkedin.com/in/fatima-ballesteros-11b1183b/
+      img: /files/people/fatima.jpg
+    - name: Alejandro San Nicolás
+      url: https://www.linkedin.com/in/alejandrosnicolas/
+      img: /files/people/alejandro.jpg
+    - name: Juán Gil Miqueo
+      url: https://twitter.com/juan_miqueo
+      img: /files/people/juan-miqueo.jpeg
+    - name: Roberto Canales
+      url: https://www.linkedin.com/in/rcanales/
+      img: /files/people/roberto_canales.jpg
+    - name: Diego Mariño
+      url: https://twitter.com/diegomarino
+      img: /files/people/diego-marino.jpeg
+    - name: Jorge Galindo
+      url: https://twitter.com/Jorge__Galindo
+      img: /files/people/jorge-galindo.jpeg
+    - name: Jesús López
+      url: https://www.linkedin.com/in/jsulopzs
+      img: /files/people/jesus-lopez.jpeg
+    - name: Toño de la Torre
+      url: https://twitter.com/adelatorrefoss
+      img: /files/people/tono-de-la-torre.jpeg
+    - name: Juan Carlos Vez Vázquez
+      url: https://www.linkedin.com/in/juancarlosvezvazquez/
+      img: /files/people/juan-carlos.jpeg
+    - name: Jordi Mon Companys
+      url: https://twitter.com/JordiMonPMM
+      img: /files/people/jordi.jpeg
+    - name: Boris Gragera
+      url: https://www.linkedin.com/in/borisgragera/
+      img: /files/people/boris.jpeg
+    - name: Francisco José Gómez Rojo
+      url: https://www.linkedin.com/in/fjgomez/
+      img: /files/people/francisco-jose.jpeg
+    - name: Pablo Lara
+      url: https://twitter.com/_pablolc
+      img: /files/people/pablo_lara.jpeg
+    - name: Jose Luis Cases
+      url: http://twitter.com/jlcasesES
+      img: /files/people/jose-luis-cases.jpeg
+    - name: Daniel López
+      url: http://twitter.com/vomkriege
+      img: /files/people/daniel-lopez.jpeg
+    - name: Ricardo Bartolomé
+      url: https://www.linkedin.com/in/ricardobartolome/
+      img: /files/people/ricardo-bartolome.jpeg
+    - name: Álvaro Amor
+      url: https://www.linkedin.com/in/alvaroamor/
+      img: /files/people/alvaro-amor.jpeg
+    - name: Elisardo González
+      url: https://twitter.com/odrasile
+      img: /files/people/elisardo.jpg
+    - name: Guillermo de Haro
+      url: https://www.linkedin.com/in/guillermodeharo/
+      img: /files/people/guillermo-de-haro.jpeg
+    - name: Alejandro Gómez
+      url: https://twitter.com/agomezmoron
+      img: /files/people/alejandro_gomez.jpeg
+    - name: Juanjo Mata
+      url: https://twitter.com/jjmata
+      img: /files/people/juanjo.jpg
+    - name: Diego R. Losada
+      url: https://twitter.com/diegorlosada
+      img: /files/people/diego-losada.jpeg
   - type: pdf
     title: Cómo patrocinar
     id: patrocinio

styles/home.css

@@ -14,10 +14,8 @@
   background-image: image-set(url("../files/img-home.png") 2x);
   background-repeat: no-repeat;
   background-position: right calc(66% + 300px) bottom;
+  background-size: clamp(600px, 50vw, 800px) auto;
 
-  @media (width < 1200px) {
-    background-size: 600px auto;
-  }
   @media (width < 600px) {
     background-position: center bottom;
     background-size: 100% auto;

styles/main.css

@@ -20,6 +20,7 @@
 @import "blocks/logos/logos.css" layer(blocks);
 @import "blocks/separator/separator.css" layer(blocks);
 @import "blocks/pdf/pdf.css" layer(blocks);
+@import "blocks/people/people.css" layer(blocks);
 @import "blocks/text/text.css" layer(blocks);
 @import "blocks/video/video.css" layer(blocks);
 @import "blocks/speakers/speakers.css" layer(blocks);