Host
- {{ site.data.companies[page.host].name }} -Speakers
--
- {% for talk in page.talks %}
- {% for speaker in talk.speakers %}
-
-
- {% if site.data.people[speaker].github %}
-
-
![{{ site.data.people[speaker].name }}](https://github.com/{{ site.data.people[speaker].github }}.png?size=30)
{{ site.data.people[speaker].name }}
-
- {% else %}
- {{ site.data.people[speaker].name }}
+ + -+++ +++ + {% if page.description %} ++ {{ page.date | date: '%d' }} + {{ month_name }} + {{ year }} +++ MEETUP +++ RUBY MEETUP + @ {{ host_name | upcase }} +
+{{ page.description }}
{% endif %} - - {% endfor %} - {% endfor %} - +- Charlas
++ ++- {% endfor %} -++ HOST + - {% for talk in page.talks %} -+ {% if host.image %} ++++ {% endif %} ++
++{{ host_name | upcase }}
+ {% if host.description %} +{{ host.description }}
+ {% endif %} + {% if host.url %} + + {{ host_domain }} + + {% endif %} +- {% assign speakers = "" | split: ',' %} + {% assign seen_speakers = "" | split: "," %} + {% assign any_speakers = false %} + {% for talk in page.talks %} + {% for speaker_key in talk.speakers %} + {% unless seen_speakers contains speaker_key %} + {% assign seen_speakers = seen_speakers | push: speaker_key %} + {% assign any_speakers = true %} + {% endunless %} + {% endfor %} + {% endfor %} - {% for speaker in talk.speakers %} - {% assign speakers = speakers | push: site.data.people[speaker].name %} - {% endfor %} + {% if any_speakers %} +-+ SPEAKERS + + {% endif %} +-
+ {% for speaker_key in seen_speakers %}
+ {% assign speaker = site.data.people[speaker_key] %}
+
-
+ {% if speaker.photo %}
+
+ {% elsif speaker.github %} +
+ {% else %}
+ {% assign speaker_name_parts = speaker.name | split: " " %}
+ {% assign speaker_initial_first = speaker_name_parts[0] | slice: 0 | upcase %}
+ {% if speaker_name_parts.size > 1 %}
+ {% assign speaker_last_part = speaker_name_parts | last %}
+ {% assign speaker_initial_last = speaker_last_part | slice: 0 | upcase %}
+ {% assign speaker_initials = speaker_initial_first | append: speaker_initial_last %}
+ {% else %}
+ {% assign speaker_initials = speaker_initial_first %}
+ {% endif %}
+
+ {% endif %}
+ ++{{ speaker.name | upcase }}
+ {% if speaker.role %} +{{ speaker.role }}
+ {% endif %} + +
+ {% endfor %}
+
- - {{ talk.title }} - -
{{ speakers | join: ", " }}
- ++++ {% if page.talks.size > 0 %} + ++ + 01 / {% if page.talks.size < 10 %}0{% endif %}{{ page.talks.size }} + + + {% endif %} -{{ talk.description }}
+
++-
+ {% for talk in page.talks %}
+
-
+
+ + {{ talk.title | upcase }} + +
- {% if talk.recording %} -- -- {% endif %} ++ {% for speaker_key in talk.speakers %} + {% assign speaker = site.data.people[speaker_key] %} + {% if speaker.photo %} +
- {% if talk.slides %} -
+ {% else %}
+ {% assign slide_name_parts = speaker.name | split: " " %}
+ {% assign slide_initial_first = slide_name_parts[0] | slice: 0 | upcase %}
+ {% if slide_name_parts.size > 1 %}
+ {% assign slide_initial_last = slide_name_parts | last | slice: 0 | upcase %}
+ {% assign slide_initials = slide_initial_first | append: slide_initial_last %}
+ {% else %}
+ {% assign slide_initials = slide_initial_first %}
+ {% endif %}
+
+ {% endif %}
+ {{ speaker.name }}{% unless forloop.last %}{% endunless %}
+ {% endfor %}
+ - -- {% endif %} + {% if talk.recording %} ++ ++ {% endif %} + {% if talk.slides %} ++ ++ {% endif %} + + {% if talk.topics or talk.duration %} + + {% endif %} +
+ {% endfor %}
+
{{ content }} + + {% if content and content != "" %} +{{ content }} + {% endif %} + + - - {% include footer.html %} + {% if page.talks.size > 0 %} + + {% endif %} + + {% include footer.html %} + diff --git a/_sass/meetups.scss b/_sass/meetups.scss index 8fe3147..bd0e8cd 100644 --- a/_sass/meetups.scss +++ b/_sass/meetups.scss @@ -1,5 +1,9 @@ #meetups { background-color: #F6EEEC; + display: flex; + flex-direction: column; + min-height: 100vh; + width: 100%; header { background-color: #3967D1; @@ -53,10 +57,12 @@ .meetup-event__date_year { align-items: center; + border-bottom: 2px solid #2851AE; display: flex; - padding: 1.5rem 8rem; font-weight: bold; justify-content: space-between; + margin: 2.75rem 0 0.875rem; + padding: 1.25rem 8rem 0.625rem; } ul { diff --git a/_sass/view.scss b/_sass/view.scss index 0250385..52c902a 100644 --- a/_sass/view.scss +++ b/_sass/view.scss @@ -1,65 +1,839 @@ -.view { - margin: 0 auto; - width: 85%; +$vm-blue: #3967D1; +$vm-yellow: #FFC24D; +$vm-cream: #F3EEED; +$vm-ink: #2E2E2E; +$vm-green: #397E78; +$vm-red: #E63946; +$vm-white: #ffffff; + +$vm-container: 1600px; +$vm-pad-x: 4rem; + +.page-meetup .meetup__default > div:first-child { + display: none; +} + +#view-meetup, +#view-meetup * { + box-sizing: border-box; +} + +#view-meetup { + background: $vm-cream; + color: $vm-ink; + font-family: 'Syncopate', sans-serif; + width: 100%; +} + +// ============================================================ +// Breadcrumb bar +// ============================================================ + +.view-meetup__breadcrumb { + background: $vm-blue; + color: $vm-white; + width: 100%; + + .breadcrumb__inner { + align-items: center; + display: flex; + gap: 1rem; + height: 48px; + justify-content: space-between; + margin: 0 auto; + max-width: $vm-container; + padding: 0 $vm-pad-x; + width: 100%; + } + + .breadcrumb__trail { + align-items: center; + display: flex; + flex-wrap: wrap; + font-size: 0.8125rem; + font-weight: 700; + gap: 0.875rem; + letter-spacing: 0.08em; + list-style: none; + margin: 0; + padding: 0; + } + + .breadcrumb__trail a { + color: $vm-white; + text-decoration: none; + + &:hover { + color: $vm-yellow; + } + } + + .breadcrumb__trail span[aria-hidden] { + color: rgba($vm-white, 0.55); + } + + .breadcrumb__current { + color: $vm-yellow; + } + + @media (max-width: 900px) { + .breadcrumb__inner { + height: auto; + padding: 1rem 1.5rem; + } + + .breadcrumb__trail { + font-size: 0.75rem; + } + } +} + +// ============================================================ +// Hero +// ============================================================ + +.view-meetup__hero { + background: $vm-cream; + width: 100%; + + .hero__inner { + border-bottom: 3px solid $vm-ink; + display: grid; + gap: 2.5rem; + grid-template-columns: 1fr; + margin: 0 auto; + max-width: $vm-container; + padding: 0.75rem $vm-pad-x 0.75rem; + width: 100%; + } + + .hero__left { + align-self: center; + display: flex; + flex-direction: column; + max-width: 660px; + min-width: 0; + } + + .hero__heading { + align-items: flex-start; + display: flex; + gap: 1.5rem; + } + + .date-badge { + align-items: center; + background: $vm-cream; + border: 2.5px solid $vm-blue; + border-radius: 12px; + box-shadow: 4px 4px 0 $vm-ink; + color: $vm-blue; + display: flex; + flex: 0 0 auto; + flex-direction: column; + font-weight: 700; + height: 120px; + justify-content: center; + min-width: 90px; + padding: 0.75rem; + text-align: center; + width: 90px; + } + + .date-badge__day { + font-size: 2rem; + line-height: 1; + } + + .date-badge__month { + font-size: 0.9375rem; + letter-spacing: 0.12em; + margin-top: 0.6rem; + } + + .date-badge__year { + font-size: 0.75rem; + letter-spacing: 0.1em; + margin-top: 0.4rem; + } + + .hero__title-block { + display: flex; + flex: 1 1 auto; + flex-direction: column; + gap: 0.5rem; + min-width: 0; + padding-top: 0.25rem; + } + + .hero__pill { + align-items: center; + background: transparent; + border: 1.5px solid rgba($vm-blue, 0.75); + border-radius: 10px; + color: $vm-blue; + display: inline-flex; + font-size: 0.75rem; + font-weight: 700; + height: 32px; + justify-content: center; + letter-spacing: 0.18em; + min-width: 92px; + padding: 0 0.75rem; + width: fit-content; + } + + .hero__title { + color: $vm-blue; + font-size: clamp(2rem, 4vw, 3.375rem); + font-weight: 700; + letter-spacing: -0.018em; + line-height: 1; + margin: 0; + } + + .hero__title-line { + display: block; + } + + .hero__description { + color: rgba($vm-ink, 0.82); + font-family: 'DM Sans', system-ui, sans-serif; + font-size: 1.125rem; + line-height: 1.6; + margin: 1.5rem 0 0; + max-width: 84%; + } - @media (min-width: 1024px) { - width: 65%; + @media (max-width: 980px) { + .hero__inner { + padding: 1rem 2rem 1rem; + } + + .hero__left { + max-width: none; + } } - section { + @media (max-width: 640px) { + .hero__heading { + flex-wrap: wrap; + gap: 1.25rem; + } + + .date-badge { + height: 104px; + min-width: 84px; + width: 84px; + } + + .date-badge__day { + font-size: 1.75rem; + } + } +} + +// ============================================================ +// Grid section +// ============================================================ + +.view-meetup__grid-section { + background: $vm-cream; + width: 100%; + + .grid-section__inner { + margin: 0 auto; + max-width: $vm-container; + padding: 1rem $vm-pad-x 1.5rem; width: 100%; - margin-top: 1.25rem; + } +} + +.view-meetup__grid { + display: grid; + gap: 1.5rem; + grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); + + @media (max-width: 980px) { + gap: 1.25rem; + grid-template-columns: 1fr; + } +} + +.view-meetup__col { + display: flex; + flex-direction: column; + gap: 1.375rem; + min-width: 0; +} + +.view-meetup__col--left { + .host-card { + flex: 1 1 auto; + } + + .speakers-card { + flex: 1.5 1 auto; + } +} + +.view-meetup__col--right { + .charla-destacada { + flex: 1; + } +} + +// ============================================================ +// Shared card +// ============================================================ + +.card { + background: $vm-white; + border: 3px solid $vm-blue; + border-radius: 16px; + display: flex; + flex-direction: column; + padding: 1.75rem; + position: relative; + + .card__label { + align-items: center; + background: $vm-green; + border-radius: 10px; + color: $vm-white; + display: inline-flex; + font-size: 0.6875rem; + font-weight: 700; + gap: 0.45rem; + height: 32px; + left: 1.5rem; + letter-spacing: 0.12em; + padding: 0 1.125rem; + position: absolute; + text-transform: uppercase; + top: -16px; + z-index: 1; + + &--speakers { + background: $vm-blue; + } + + &--charla { + background: $vm-red; + } + } + + .card__label-icon { + align-items: center; + display: inline-flex; + height: 0.8rem; + justify-content: center; + line-height: 1; + width: 0.8rem; + } + + .card__label-icon svg { + display: block; + height: 100%; + width: 100%; + } +} + +// ============================================================ +// Host card +// ============================================================ + +.host-card { + justify-content: center; + padding: 1.5rem 1.5rem; + + .host-card__body { + align-items: center; + display: flex; + gap: 1.5rem; + } + + .host-card__logo-tile { + align-items: center; + background: #F7F4F2; + border-radius: 10px; display: flex; + flex: 0 0 auto; + height: 104px; + justify-content: center; + padding: 1rem; + width: 104px; + } + + .host-card__logo { + display: block; + max-height: 100%; + max-width: 100%; + object-fit: contain; + } + + .host-card__info { + display: flex; + flex: 1 1 auto; flex-direction: column; - margin-bottom: 3rem; + min-width: 0; + } + + .host-card__name { + color: $vm-ink; + font-size: 1.8125rem; + font-weight: 700; + letter-spacing: 0.015em; + line-height: 1.05; + margin: 0 0 0.625rem; + text-decoration: none; + } + + .host-card__description { + color: rgba($vm-ink, 0.72); + font-family: 'DM Sans', system-ui, sans-serif; + font-size: 1rem; + line-height: 1.55; + margin: 0 0 0.875rem; + max-width: 38ch; + } + + .host-card__link { + align-items: baseline; + color: $vm-blue; + display: inline-flex; + font-family: 'DM Sans', system-ui, sans-serif; + font-size: 0.875rem; + font-weight: 600; + gap: 0.35rem; + letter-spacing: 0.02em; + margin-top: 0; + text-decoration: none; + word-break: break-all; + + &:hover, + &:focus-visible { + text-decoration: underline; + } + } + + .host-card__link-icon { + font-size: 0.9em; + line-height: 1; + opacity: 0.85; + } + + @media (max-width: 520px) { + .host-card__body { + flex-direction: column; + } + + .host-card__name { + font-size: 1.5rem; + } + + .host-card__link { + margin-top: 1rem; + } + } +} + +// ============================================================ +// Speakers card +// ============================================================ + +.speakers-card { + padding: 1.25rem 1.5rem 1.5rem; + + .speakers-list { + display: flex; + flex: 1 1 auto; + flex-direction: column; + justify-content: space-evenly; + list-style: none; + margin: 0; + padding: 0; + } + + .speaker { + align-items: flex-start; + display: flex; + gap: 1.125rem; + padding: 0.375rem 0; + + & + .speaker { + border-top: 1px solid rgba($vm-ink, 0.1); + } &:first-child { - margin-top: 4rem; + padding-top: 0.25rem; } } - a { - font-size: 1.25rem; + .speaker__avatar { + background: $vm-cream; + border-radius: 50%; + flex: 0 0 auto; + height: 92px; + object-fit: cover; + width: 92px; } - h2 { - margin-bottom: 1rem; - font-weight: bold; - font-size: 2.5rem; + .speaker__avatar--placeholder { + align-items: center; + color: rgba($vm-ink, 0.55); + display: flex; + font-family: 'Syncopate', sans-serif; + font-size: 1.5rem; + font-weight: 600; + justify-content: center; + letter-spacing: 0.04em; } - h3 { - margin-bottom: 1rem; - font-size: 1.25rem; + .speaker__info { + display: flex; + flex-direction: column; + min-width: 0; + padding-top: 0.5rem; + } + + .speaker__name { + color: $vm-blue; + font-size: 1.375rem; + font-weight: 700; + letter-spacing: 0.015em; + line-height: 1.1; + margin: 0; + text-decoration: none; + } + + .speaker__role { + color: rgba($vm-ink, 0.7); + font-family: 'DM Sans', system-ui, sans-serif; + font-size: 0.9375rem; + line-height: 1.45; + margin: 0.35rem 0 0; + } + + .speaker__socials { + display: flex; + flex-wrap: wrap; + gap: 0.375rem 1.25rem; + list-style: none; + margin: 0.625rem 0 0; + padding: 0; + + a { + align-items: baseline; + color: $vm-blue; + display: inline-flex; + font-family: 'DM Sans', system-ui, sans-serif; + font-size: 0.875rem; + font-weight: 600; + gap: 0.35rem; + letter-spacing: 0.02em; + text-decoration: none; + + &:hover, + &:focus-visible { + text-decoration: underline; + } + } + + .speaker__socials-arrow { + font-size: 0.9em; + line-height: 1; + opacity: 0.85; + } + } +} + +// ============================================================ +// Charla destacada card (right column) +// ============================================================ + +.charla-destacada { + flex: 1 1 auto; + padding: 1.25rem 1.5rem 1.25rem; + + .charla-destacada__header { + display: flex; + justify-content: flex-end; + margin-bottom: 0.5rem; + } + + .charla-destacada__counter { + color: $vm-blue; + font-size: 0.8125rem; + font-weight: 700; + letter-spacing: 0.12em; + } + + .carousel { + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-height: 0; + position: relative; + } + + .carousel__track { + display: flex; + flex: 1 1 auto; + list-style: none; + margin: 0; + min-height: 0; + overflow-x: auto; + padding: 0; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + + .slide { + display: flex; + flex: 0 0 100%; + flex-direction: column; + gap: 0.75rem; + justify-content: flex-start; + scroll-snap-align: start; + width: 100%; + } + + .slide__title { + font-size: 1.625rem; + font-weight: 700; + letter-spacing: -0.005em; + line-height: 1.2; + margin: 0; + max-width: 58%; overflow-wrap: break-word; + text-wrap: balance; + + a { + color: $vm-blue; + text-decoration: none; + + &:hover, + &:focus-visible { + text-decoration: underline; + } + } + } + + .slide__speakers { + align-items: center; + color: rgba($vm-ink, 0.7); + display: flex; + flex-wrap: wrap; + font-family: 'DM Sans', system-ui, sans-serif; + font-size: 0.9375rem; + gap: 0.5rem; + margin: 0; + min-height: 36px; + padding: 0; } - span { - font-weight: bold; + .slide__speaker-avatar { + border-radius: 50%; + height: 26px; + object-fit: cover; + width: 26px; + } + + .slide__speaker-avatar--placeholder { + background: $vm-cream; + display: inline-block; } .keep-aspect-ratio { + aspect-ratio: 16 / 9; + background: #111; + border-radius: 8px; + margin: 0; + margin-top: auto; + overflow: hidden; position: relative; width: 100%; - padding-top: 56.25%; - margin-bottom: 1.25rem; iframe { + border: 0; + height: 100%; + left: 0; position: absolute; top: 0; - left: 0; width: 100%; - height: 100%; } } - .talk { - margin-bottom: 2rem; + .slide__footer { + border-top: 1px solid rgba($vm-ink, 0.1); + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: space-between; + margin-top: 0; + padding-top: 1.25rem; + } + + .slide__meta { + align-items: center; + display: flex; + font-size: 0.75rem; + font-weight: 700; + gap: 0.625rem; + letter-spacing: 0.06em; + } - h3 { - a { - font-size: 1.75rem; - } + .slide__meta-label { + align-items: center; + background: $vm-green; + border-radius: 7px; + color: $vm-white; + display: inline-flex; + height: 28px; + padding: 0 0.75rem; + } + + .slide__meta--duracion .slide__meta-label { + background: $vm-blue; + } + + .slide__meta-value { + color: rgba($vm-ink, 0.85); + } + + .carousel__btn { + align-items: center; + background: $vm-white; + border: 2px solid $vm-blue; + border-radius: 50%; + color: $vm-blue; + cursor: pointer; + display: flex; + font-size: 1.25rem; + font-weight: 700; + height: 40px; + justify-content: center; + line-height: 1; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 40px; + z-index: 2; + + &:hover:not([disabled]) { + background: $vm-blue; + color: $vm-white; + } + + &[disabled] { + cursor: default; + opacity: 0.35; + } + } + + .carousel__btn--prev { + left: 8px; + } + + .carousel__btn--next { + right: 8px; + } + + .carousel__dots { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: center; + margin-top: 1.125rem; + } + + .carousel__dot { + background: rgba($vm-blue, 0.28); + border: 0; + border-radius: 999px; + cursor: pointer; + height: 8px; + padding: 0; + transition: background 0.2s ease, width 0.2s ease; + width: 8px; + + &:hover { + background: rgba($vm-blue, 0.55); + } + + &.is-active { + background: $vm-blue; + width: 26px; + } + + &:focus-visible { + outline: 2px solid $vm-blue; + outline-offset: 2px; + } + } + + @media (max-width: 640px) { + .carousel__btn--prev { + left: 4px; + } + + .carousel__btn--next { + right: 4px; + } + + .slide__footer { + align-items: flex-start; + flex-direction: column; + } + } +} + +// ============================================================ +// Footer bar +// ============================================================ + +.view-meetup__footer-bar { + background: $vm-cream; + border-top: 3px solid $vm-ink; + width: 100%; + + .footer-bar__inner { + margin: 0 auto; + max-width: $vm-container; + padding: 1.625rem $vm-pad-x; + text-align: center; + width: 100%; + } + + a { + color: $vm-blue; + font-size: 0.875rem; + font-weight: 700; + letter-spacing: 0.1em; + text-decoration: none; + text-transform: uppercase; + + &:hover { + text-decoration: underline; } } } + +// ============================================================ +// Optional body content after cards +// ============================================================ + +.view-meetup__content { + background: $vm-cream; + margin: 0 auto; + max-width: $vm-container; + padding: 0 $vm-pad-x 2rem; + width: 100%; +} diff --git a/assets/js/meetup_carousel.js b/assets/js/meetup_carousel.js new file mode 100644 index 0000000..20f89fb --- /dev/null +++ b/assets/js/meetup_carousel.js @@ -0,0 +1,120 @@ +(function () { + 'use strict'; + + function pad2(n) { + return n < 10 ? '0' + n : String(n); + } + + function initCarousel(root) { + var track = root.querySelector('[data-track]'); + var slides = root.querySelectorAll('[data-slide]'); + var prevBtn = root.querySelector('[data-prev]'); + var nextBtn = root.querySelector('[data-next]'); + var counter = root.closest('.charla-destacada').querySelector('[data-counter]'); + + if (!track || slides.length === 0) { + return; + } + + var total = slides.length; + var current = 0; + var dots = []; + + function scrollToIndex(index) { + var target = slides[index]; + if (!target) return; + target.scrollIntoView({ inline: 'start', behavior: 'smooth', block: 'nearest' }); + } + + // Build pagination dots so it is obvious at a glance that there are multiple talks. + if (total > 1) { + var dotsNav = document.createElement('div'); + dotsNav.className = 'carousel__dots'; + dotsNav.setAttribute('role', 'tablist'); + dotsNav.setAttribute('aria-label', 'Charlas de la meetup'); + for (var i = 0; i < total; i++) { + (function (index) { + var dot = document.createElement('button'); + dot.type = 'button'; + dot.className = 'carousel__dot'; + dot.setAttribute('role', 'tab'); + dot.setAttribute('aria-label', 'Ir a la charla ' + (index + 1) + ' de ' + total); + dot.addEventListener('click', function () { + scrollToIndex(index); + }); + dotsNav.appendChild(dot); + dots.push(dot); + })(i); + } + root.appendChild(dotsNav); + } + + function updateUI() { + if (counter) { + counter.textContent = pad2(current + 1) + ' / ' + pad2(total); + } + if (prevBtn) { + prevBtn.disabled = current === 0; + } + if (nextBtn) { + nextBtn.disabled = current === total - 1; + } + dots.forEach(function (dot, index) { + var active = index === current; + dot.classList.toggle('is-active', active); + if (active) { + dot.setAttribute('aria-current', 'true'); + } else { + dot.removeAttribute('aria-current'); + } + }); + } + + if (prevBtn) { + prevBtn.addEventListener('click', function () { + if (current > 0) scrollToIndex(current - 1); + }); + } + + if (nextBtn) { + nextBtn.addEventListener('click', function () { + if (current < total - 1) scrollToIndex(current + 1); + }); + } + + if ('IntersectionObserver' in window) { + var observer = new IntersectionObserver( + function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting && entry.intersectionRatio >= 0.6) { + var idx = Array.prototype.indexOf.call(slides, entry.target); + if (idx !== -1 && idx !== current) { + current = idx; + updateUI(); + } + } + }); + }, + { root: track, threshold: [0.6] } + ); + slides.forEach(function (slide) { + observer.observe(slide); + }); + } + + updateUI(); + } + + function init() { + var carousels = document.querySelectorAll('[data-carousel]'); + carousels.forEach(function (root) { + initCarousel(root); + }); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})(); -
+ {% if speaker.photo %}
+