From 040f4af1089259c504eb6018c70721e471418553 Mon Sep 17 00:00:00 2001 From: tomkiel Date: Tue, 7 Oct 2025 22:46:35 -0300 Subject: [PATCH 1/3] feat: add buy a ticket section --- config/_default/menu/menu.en.toml | 10 +- config/_default/menu/menu.es.toml | 8 +- config/_default/menu/menus.pt-br.toml | 8 +- content/data/section/buyticket.json | 104 ++++++++++ src/assets/scss/components/_header.scss | 5 + src/assets/scss/main.scss | 1 + src/assets/scss/sections/_buy-ticket.scss | 178 ++++++++++++++++++ src/layouts/_partials/header.html | 1 + .../_partials/sections/buy-ticket.html | 66 +++++++ src/layouts/_partials/sections/keynotes.html | 2 +- src/layouts/_partials/svg/caramelo.svg | 16 +- src/layouts/home.html | 3 +- src/layouts/index.html | 1 + 13 files changed, 373 insertions(+), 30 deletions(-) create mode 100644 content/data/section/buyticket.json create mode 100644 src/assets/scss/sections/_buy-ticket.scss create mode 100644 src/layouts/_partials/sections/buy-ticket.html diff --git a/config/_default/menu/menu.en.toml b/config/_default/menu/menu.en.toml index ee7905e..314cb9f 100644 --- a/config/_default/menu/menu.en.toml +++ b/config/_default/menu/menu.en.toml @@ -4,13 +4,13 @@ url = "/" weight = 1 [[main]] -name = "About" -url = "#about" +name = "Keynotes" +url = "#keynotes" weight = 2 [[main]] -name = "Call for Papers" -url = "#cfp" +name = "Talks" +url = "#buy-a-ticket" weight = 3 [[main]] @@ -20,7 +20,7 @@ weight = 4 [[main]] name = "Sponsors" -url = "#sponsors/" +url = "#sponsors" weight = 5 [[main]] diff --git a/config/_default/menu/menu.es.toml b/config/_default/menu/menu.es.toml index f1cd6e2..b122b1e 100644 --- a/config/_default/menu/menu.es.toml +++ b/config/_default/menu/menu.es.toml @@ -4,13 +4,13 @@ url = "/" weight = 1 [[main]] -name = "Sobre" -url = "#about" +name = "Keynotes" +url = "#keynotes" weight = 2 [[main]] -name = "Envío de Charlas" -url = "#cfp" +name = "Charlas" +url = "#buy-a-ticket" weight = 3 [[main]] diff --git a/config/_default/menu/menus.pt-br.toml b/config/_default/menu/menus.pt-br.toml index 67eb41d..519b51c 100644 --- a/config/_default/menu/menus.pt-br.toml +++ b/config/_default/menu/menus.pt-br.toml @@ -4,13 +4,13 @@ url = "/" weight = 1 [[main]] -name = "Sobre" -url = "#about" +name = "Keynotes" +url = "#keynotes" weight = 2 [[main]] -name = "Submissão de Palestras" -url = "#cfp" +name = "Palestras" +url = "#buy-a-ticket" weight = 3 [[main]] diff --git a/content/data/section/buyticket.json b/content/data/section/buyticket.json new file mode 100644 index 0000000..d8cd232 --- /dev/null +++ b/content/data/section/buyticket.json @@ -0,0 +1,104 @@ +[ + { + "language": "pt-br", + "badge": "Grade de palestras em breve", + "title": "Enquanto finalizamos a programação, garanta seu ingresso", + "description": "Estamos cuidando de cada detalhe da grade com conteúdos que inspiram, informam e acolhem a comunidade Python. Assim que tudo estiver confirmado, avisaremos por aqui e nas redes sociais.", + "helper": "Ao comprar um ingresso você ajuda a viabilizar a PySul 2025 e mantém o evento acessível para toda a comunidade.", + "schedule": { + "title": "Programação", + "description": "Publicaremos a grade completa em breve.
Acesse o grupo no WhatsApp e Telegram ou companhe o Instagram para ser avisado em primeira mão." + }, + "cta": { + "label": "Comprar ingresso", + "link": "https://www.sympla.com.br/evento/python-sul-2025-porto-alegre/3092007?lang=pt" + }, + "tickets": [ + { + "name": "Cancioneira (meia-entrada)", + "tag": "50% off", + "description": "Quero acompanhar as palestras e faço parte do grupo com direito à meia-entrada." + }, + { + "name": "Vivente mateador (inteira)", + "description": "Quero acompanhar as palestras, compartilhar o mate e garantir meu certificado." + }, + { + "name": "Cusco de estância (inteira com camiseta)", + "description": "Quero acompanhar as palestras + todos os benefícios da modalidade padrão e garantir minha camiseta." + }, + { + "name": "Chimarrão de ouro (Também quero apoiar)", + "description": "Quero apoiar o evento e a comunidade, com agradecimento e brinde exclusivo ao final." + } + ] + }, + { + "language": "en", + "badge": "Talk schedule coming soon", + "title": "While we finalize the program, secure your ticket", + "description": "We’re taking care of every detail of the schedule, with content that inspires, informs, and embraces the Python community. Once everything is confirmed, we’ll announce it here and on social media.", + "helper": "By purchasing a ticket, you help make PySul 2025 possible and keep the event accessible for the entire community.", + "schedule": { + "title": "Schedule", + "description": "The full agenda will be published soon.
Join our WhatsApp and Telegram groups or follow us on Instagram to be notified first." + }, + "cta": { + "label": "Buy ticket", + "link": "https://www.sympla.com.br/evento/python-sul-2025-porto-alegre/3092007/?lang=en" + }, + "tickets": [ + { + "name": "Cancioneira (half-price ticket)", + "tag": "50% off", + "description": "I want to attend the talks and I’m eligible for the half-price ticket." + }, + { + "name": "Vivente Mateador (regular ticket)", + "description": "I want to attend the talks, share some mate, and get my participation certificate." + }, + { + "name": "Cusco de Estância (regular + T-shirt)", + "description": "I want to attend the talks, enjoy all regular benefits, and get an exclusive T-shirt." + }, + { + "name": "Chimarrão de Ouro (supporter ticket)", + "description": "I want to support the event and community, with a thank-you and an exclusive gift at the end." + } + ] + }, + { + "language": "es", + "badge": "Agenda de charlas próximamente", + "title": "Mientras terminamos la programación, asegurá tu entrada", + "description": "Estamos cuidando cada detalle del cronograma con contenidos que inspiran, informan y fortalecen a la comunidad Python. Apenas todo esté confirmado, lo anunciaremos por acá y en las redes sociales.", + "helper": "Al comprar una entrada ayudás a hacer posible la PySul 2025 y mantenés el evento accesible para toda la comunidad.", + "schedule": { + "title": "Programación", + "description": "Publicaremos la agenda completa muy pronto.
Unite al grupo de WhatsApp o Telegram, o seguí el Instagram para enterarte antes que nadie." + }, + "cta": { + "label": "Comprar entrada", + "link": "https://www.sympla.com.br/evento/python-sul-2025-porto-alegre/3092007/?lang=es" + }, + "tickets": [ + { + "name": "Cancionera (media entrada)", + "tag": "50% off", + "description": "Quiero asistir a las charlas y formo parte del grupo con derecho a media entrada." + }, + { + "name": "Viviente matero (entrada completa)", + "description": "Quiero participar en las charlas, compartir unos mates y asegurar mi certificado." + }, + { + "name": "Cusco de estancia (entrada + remera)", + "description": "Quiero asistir a las charlas, disfrutar de todos los beneficios de la modalidad estándar y llevarme mi remera." + }, + { + "name": "Mate de oro (también quiero apoyar)", + "description": "Quiero apoyar el evento y a la comunidad, con un agradecimiento y un regalo exclusivo al final." + } + ] + } +] \ No newline at end of file diff --git a/src/assets/scss/components/_header.scss b/src/assets/scss/components/_header.scss index 13d080b..bc22aa0 100644 --- a/src/assets/scss/components/_header.scss +++ b/src/assets/scss/components/_header.scss @@ -132,6 +132,11 @@ width: auto; margin-bottom: -$space-2; } + + svg { + width: $header-height; + margin-right: -1.5rem; + } } } } diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index bb1dcf6..eb6da10 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -26,6 +26,7 @@ @import "./sections/sponsors"; // Sponsors section @import "./sections/supporters"; // Supporters section @import "./sections/subscribe"; // Newsletter subscribe section +@import "./sections/buy-ticket"; // buy-ticket/tickets section @import "./sections/keynotes"; // Keynote speakers section @import "./pages/single-post"; // Single blog post layout diff --git a/src/assets/scss/sections/_buy-ticket.scss b/src/assets/scss/sections/_buy-ticket.scss new file mode 100644 index 0000000..259aa8e --- /dev/null +++ b/src/assets/scss/sections/_buy-ticket.scss @@ -0,0 +1,178 @@ +.buy-ticket { + @include responsive-container; + padding-block: $space-8; + background-color: var(--color-surface); + color: var(--color-text); + box-shadow: $box-shadow-strong; + overflow: hidden; + + @media (min-width: $breakpoint-lg) { + padding-block: $space-10; + } + + &__container { + display: grid; + gap: $space-8; + + @media (min-width: $breakpoint-lg) { + grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); + gap: $space-10; + } + } + + &__intro { + display: flex; + flex-direction: column; + gap: $space-4; + max-width: 60ch; + } + + &__badge { + width: fit-content; + padding: $space-1 $space-3; + border-radius: $radius-100; + background-color: rgba(map-get($blue, 600), 0.1); + color: map-get($blue, 700); + font-size: 0.875rem; + font-weight: 600; + letter-spacing: 0.02em; + text-transform: uppercase; + } + + &__title { + font-size: clamp(1.75rem, calc(1.5rem + 1vw), 2.25rem); + font-weight: 700; + color: var(--color-text-strong); + line-height: 1.2; + } + + &__description { + font-size: 1.0625rem; + line-height: 1.65; + color: var(--color-text); + } + + &__actions { + display: flex; + flex-direction: column; + gap: $space-3; + margin-top: $space-2; + + @media (min-width: $breakpoint-md) { + flex-direction: row; + align-items: center; + gap: $space-6; + } + } + + &__cta { + padding-inline: $space-6; + } + + &__helper { + font-size: 0.95rem; + line-height: 1.6; + color: var(--color-text-muted); + + @media (min-width: $breakpoint-md) { + max-width: 42ch; + } + } + + &__aside { + display: grid; + gap: $space-5; + } + + &__card { + padding: $space-6; + border-radius: $radius-6; + background: linear-gradient(135deg, rgba(map-get($py-teal, 500), 0.08), rgba(map-get($blue, 600), 0.12)); + border: 1px solid var(--color-border-subtle); + box-shadow: $box-shadow-md; + display: flex; + flex-direction: column; + gap: $space-3; + + &-title { + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text-strong); + } + + &-description { + font-size: 1rem; + line-height: 1.6; + color: var(--color-text); + } + } + + &__tickets { + display: grid; + gap: $space-4; + + @media (min-width: $breakpoint-md) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: $space-5; + } + } +} + +.ticket-card { + padding: $space-5 $space-4; + border-radius: $radius-5; + background-color: var(--color-bg-alt); + border: 1px solid var(--color-border); + box-shadow: $box-shadow-light; + display: flex; + flex-direction: column; + gap: $space-3; + transition: transform 0.2s ease, box-shadow 0.2s ease; + + &:hover { + transform: translateY(-4px); + box-shadow: $box-shadow-strong-hover; + } + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: $space-3; + } + + &__name { + font-size: 1.0625rem; + font-weight: 600; + color: var(--color-text-strong); + margin: 0; + } + + &__tag { + padding: $space-1 $space-3; + border-radius: $radius-100; + background-color: rgba(map-get($yellow, 500), 0.2); + color: map-get($yellow, 700); + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + white-space: nowrap; + } + + &__description { + font-size: 0.975rem; + line-height: 1.6; + color: var(--color-text); + } +} + +@media (prefers-reduced-motion: reduce) { + .ticket-card { + transition: none; + + &:hover { + transform: none; + } + } +} diff --git a/src/layouts/_partials/header.html b/src/layouts/_partials/header.html index e3e53e8..3ff6875 100644 --- a/src/layouts/_partials/header.html +++ b/src/layouts/_partials/header.html @@ -16,6 +16,7 @@ {{/* Show event logo or name */}} {{ $logo := resources.Get "images/logo_colored.png" }} {{ if $logo }} + {{ partial "svg/caramelo.svg" }} {{ else }} diff --git a/src/layouts/_partials/sections/buy-ticket.html b/src/layouts/_partials/sections/buy-ticket.html new file mode 100644 index 0000000..4daf696 --- /dev/null +++ b/src/layouts/_partials/sections/buy-ticket.html @@ -0,0 +1,66 @@ +{{ $currentLang := .Site.Language.Lang }} +{{ $eventData := .Site.Data.event }} + +{{ range where .Site.Data.section.buyticket "language" $currentLang }} +
+
+
+ {{ with .badge }} + {{ . }} + {{ end }} +

+ {{ .title }} +

+

+ {{ .description }} +

+
+ {{ with .cta }} + + {{ .label }} + {{ partial "svg/icons/external-link.svg" }} + + {{ else }} + + Buy ticket + + {{ end }} + {{ with .helper }} +

{{ . }}

+ {{ end }} +
+
+ +
+ {{ with .schedule }} +
+

{{ .title }}

+

{{ .description | safeHTML }}

+
+ {{ end }} + +
+ {{ range .tickets }} +
+
+

{{ .name }}

+ {{ with .tag }}{{ . }}{{ end }} +
+

{{ .description }}

+
+ {{ end }} +
+
+
+
+{{ end }} \ No newline at end of file diff --git a/src/layouts/_partials/sections/keynotes.html b/src/layouts/_partials/sections/keynotes.html index 2edfc1b..17b1f8e 100644 --- a/src/layouts/_partials/sections/keynotes.html +++ b/src/layouts/_partials/sections/keynotes.html @@ -4,7 +4,7 @@ {{ if eq $lang $currentLang }} {{ $section := $data }} -
+

{{ $section.title | safeHTML }} diff --git a/src/layouts/_partials/svg/caramelo.svg b/src/layouts/_partials/svg/caramelo.svg index 5935b42..7ebe1ae 100644 --- a/src/layouts/_partials/svg/caramelo.svg +++ b/src/layouts/_partials/svg/caramelo.svg @@ -24,21 +24,7 @@ - - - Bah tchê, - - que evento tri! - - + Date: Wed, 8 Oct 2025 00:12:22 -0300 Subject: [PATCH 2/3] feat: update blog list page --- src/assets/scss/pages/_content-list.scss | 47 +------- src/assets/scss/pages/list/_pagination.scss | 118 ++++++++++++++++++ src/i18n/en.toml | 4 + src/i18n/es.toml | 3 + src/i18n/pt-br.toml | 3 + src/layouts/_default/list.html | 125 ++++++++++++++------ src/layouts/_default/taxonomy.html | 24 ++++ 7 files changed, 241 insertions(+), 83 deletions(-) create mode 100644 src/assets/scss/pages/list/_pagination.scss create mode 100644 src/layouts/_default/taxonomy.html diff --git a/src/assets/scss/pages/_content-list.scss b/src/assets/scss/pages/_content-list.scss index bd350ee..ad77e67 100644 --- a/src/assets/scss/pages/_content-list.scss +++ b/src/assets/scss/pages/_content-list.scss @@ -1,3 +1,5 @@ +@import "./list/pagination"; + .card-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); @@ -125,47 +127,4 @@ } } } - - .pagination { - @include responsive-container; - padding-block: $space-6; - - &__wrapper { - @include flex-center; - gap: $space-2; - - .btn { - padding: $space-2 $space-4; - gap: $space-3; - } - - .separator { - line-height: 1; - padding: 0 $space-2; - padding-top: $space-4; - color: var(--color-content-list-separator); - } - } - - &__pages { - display: flex; - align-items: center; - gap: $space-1; - - .btn { - padding: $space-2 $space-4; - - &.active { - background-color: var(--color-content-list-page-active-bg); - border: 1px solid var(--color-content-list-page-active-border); - color: var(--color-content-list-page-active-text); - } - } - } - - &__ellipsis { - padding: 0 $space-2; - color: var(--color-content-list-ellipsis); - } - } -} \ No newline at end of file +} diff --git a/src/assets/scss/pages/list/_pagination.scss b/src/assets/scss/pages/list/_pagination.scss new file mode 100644 index 0000000..bd7a36d --- /dev/null +++ b/src/assets/scss/pages/list/_pagination.scss @@ -0,0 +1,118 @@ +.content-list-page { + .pagination { + @include responsive-container; + margin-top: $space-9; + padding-block: $space-6; + background-color: var(--color-surface); + border-top: 1px solid var(--color-border-subtle); + + &__wrapper { + @include flex-center; + flex-wrap: wrap; + gap: $space-3; + row-gap: $space-2; + } + + &__pages { + display: inline-flex; + align-items: center; + justify-content: center; + gap: $space-2; + padding: $space-1; + border-radius: $radius-6; + background-color: var(--color-surface-hover); + border: 1px solid var(--color-border-subtle); + box-shadow: $box-shadow-light; + } + + .btn { + @include flex-center; + min-width: 2.75rem; + min-height: 2.75rem; + padding-inline: $space-4; + border-radius: $radius-6; + font-size: 0.9375rem; + font-weight: 600; + letter-spacing: 0.01em; + line-height: 1; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + + &.outline { + background-color: var(--color-surface); + color: var(--color-text); + border: 1px solid var(--color-border-subtle); + box-shadow: none; + } + + &.outline:hover { + background-color: var(--color-surface-hover); + color: var(--color-accent); + border-color: var(--color-border); + } + + &.active { + background-color: var(--color-content-list-page-active-bg); + border-color: var(--color-content-list-page-active-border); + color: var(--color-content-list-page-active-text); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); + } + + &.disabled, + &[aria-disabled="true"] { + background-color: var(--color-surface); + color: var(--color-content-list-separator); + border-color: var(--color-border-subtle); + cursor: default; + opacity: 0.55; + box-shadow: none; + } + + &:focus-visible { + outline: none; + box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px #3b82f666; + } + + &:active:not(.disabled):not([aria-disabled="true"]) { + background-color: var(--color-surface-hover); + border-color: var(--color-border); + } + + svg { + width: $space-3 * 1.5; + height: $space-3 * 1.5; + } + } + + &__pages .btn { + padding-inline: $space-3; + min-width: 2.5rem; + + &:not(.active):hover { + background-color: var(--color-surface-hover); + color: var(--color-accent); + } + } + + &__wrapper .btn.prev, + &__wrapper .btn.next { + gap: $space-2; + } + + &__wrapper .btn.disabled, + &__wrapper .btn[aria-disabled="true"] { + pointer-events: none; + } + + @media (max-width: 640px) { + &__wrapper { + justify-content: space-between; + width: 100%; + } + + &__pages { + order: 3; + width: 100%; + } + } + } +} diff --git a/src/i18n/en.toml b/src/i18n/en.toml index 780bcde..50b255f 100644 --- a/src/i18n/en.toml +++ b/src/i18n/en.toml @@ -95,3 +95,7 @@ other = "More details here" [register_now] other = "Register Now" + + +[all_posts] +other = "All posts" \ No newline at end of file diff --git a/src/i18n/es.toml b/src/i18n/es.toml index c96b658..a843f04 100644 --- a/src/i18n/es.toml +++ b/src/i18n/es.toml @@ -95,3 +95,6 @@ other = "Más detalles aquí" [register_now] other = "Regístrate ahora" + +[all_posts] +other = "Todas postagens" \ No newline at end of file diff --git a/src/i18n/pt-br.toml b/src/i18n/pt-br.toml index b72e655..25b6806 100644 --- a/src/i18n/pt-br.toml +++ b/src/i18n/pt-br.toml @@ -95,3 +95,6 @@ other = "Mais detalhes aqui" [register_now] other = "Inscreva-se agora" + +[all_posts] +other = "Todas postagens" diff --git a/src/layouts/_default/list.html b/src/layouts/_default/list.html index 2f61b6d..f0ad7dd 100644 --- a/src/layouts/_default/list.html +++ b/src/layouts/_default/list.html @@ -1,4 +1,6 @@ {{ define "main" }} +{{ $listPages := .RegularPagesRecursive }} +{{ $paginator := .Paginate $listPages }}
@@ -22,6 +24,7 @@

+ {{ if ne .Type "past-events" }}
Filtrar por:
+ {{ $categoryButtons := slice }} + {{ with .Site.Taxonomies.categories }} + {{ range $name, $taxonomy := . }} + {{ $pagesInList := intersect $taxonomy.Pages $listPages }} + {{ $count := len $pagesInList }} + {{ if gt $count 0 }} + {{ with $taxonomy.Page }} + {{ $categoryButtons = $categoryButtons | append (dict "name" $name "page" . "count" $count) }} + {{ end }} + {{ end }} + {{ end }} + {{ end }} + {{ $categoryButtons = sort $categoryButtons "count" "desc" }} + {{ $visibleCategories := first 6 $categoryButtons }} + {{ $isTaxonomyPage := in (slice "taxonomy" "term") .Kind }}
- - - - + Todos + {{ range $visibleCategories }} + {{ $termName := .name }} + {{ $termPage := .page }} + {{ with $termPage }} + {{ $isActive := eq .RelPermalink $.RelPermalink }} + + {{ with .LinkTitle }}{{ . }}{{ else }}{{ title $termName }}{{ end }} + + {{ end }} + {{ end }}
+ {{ end }}

-

Todas postagens

+

+ {{ i18n "all_posts" }} +

Mostrando - {{ .RegularPagesRecursive | len }} - posts + {{ len $paginator.Pages }} + de {{ $paginator.TotalNumberOfElements }} posts
- {{ range (.Paginate .RegularPagesRecursive).Pages }} + {{ range $paginator.Pages }} {{ partial "core/card.html" . }} {{ end }}
-
- +
+ {{ end }} {{ partial "sections/subscribe.html" . }} -{{ end }} \ No newline at end of file +{{ end }} diff --git a/src/layouts/_default/taxonomy.html b/src/layouts/_default/taxonomy.html new file mode 100644 index 0000000..d5441b5 --- /dev/null +++ b/src/layouts/_default/taxonomy.html @@ -0,0 +1,24 @@ +{{ define "main" }} +
+
+
+

+ {{ .Title | safeHTML }} +

+
+
+ +
+
+
+ {{ if .Pages }} + {{ range .Pages.ByDate.Reverse }} + {{ partial "core/card.html" . }} + {{ end }} + {{ else }} +

No posts found in this taxonomy.

+ {{ end }} +
+
+
+{{ end }} \ No newline at end of file From f94c547c65e548504815406df41cd0ef1647d723 Mon Sep 17 00:00:00 2001 From: tomkiel Date: Wed, 8 Oct 2025 00:26:43 -0300 Subject: [PATCH 3/3] feat: update single page styles --- src/assets/scss/pages/_single-post.scss | 389 ++++++++++-------- .../scss/pages/single/_article-sidebar.scss | 93 ++--- .../scss/pages/single/_related-posts.scss | 34 +- .../scss/pages/single/_some-improves.scss | 84 ++-- 4 files changed, 279 insertions(+), 321 deletions(-) diff --git a/src/assets/scss/pages/_single-post.scss b/src/assets/scss/pages/_single-post.scss index 99454a8..40285d5 100644 --- a/src/assets/scss/pages/_single-post.scss +++ b/src/assets/scss/pages/_single-post.scss @@ -1,18 +1,24 @@ .single { background-color: var(--color-bg); color: var(--color-text); + padding-block: $space-10 $space-12; + + @media (min-width: $breakpoint-lg) { + padding-block: $space-12 $space-12; + } .page-header { background-color: var(--color-content-card-bg); + border-bottom: 1px solid var(--color-border-subtle); .featured-image { @include flex-center; width: 100%; - height: 12rem; + height: 14rem; margin-inline: auto; overflow: hidden; - background: var(--color-content-card-bg); - box-shadow: none; + background-color: var(--color-content-card-bg); + border-radius: $radius-6; img { width: 100%; @@ -25,118 +31,88 @@ } @media (min-width: $breakpoint-md) { - border-radius: 0; - width: 100%; - height: 25rem; + height: 24rem; + border-radius: $radius-7; } } - - @media (min-width: $breakpoint-lg) { - padding-block: 0; - } } .article { - padding-bottom: $space-8; - margin-top: -$space-12; + @include responsive-container; + margin: 0 auto; + padding: 0; .article-wrapper { - @include grid(2, $space-6); - grid-template-columns: 3fr 1fr; - padding: $space-8 0 0 $space-4; - background-color: var(--color-single-post-bg); - box-shadow: $box-shadow-md; - border-radius: $radius-6; - overflow: hidden; - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: $space-8; + padding: $space-6; + background-color: var(--color-surface); + border: 1px solid var(--color-border-subtle); + border-radius: $radius-7; + box-shadow: $box-shadow-light; + align-items: start; @media (min-width: $breakpoint-md) { - padding: $space-8 0 0 $space-8; - display: grid; + padding: $space-7; } - } - .article-content { - padding-right: 0; - border-right: none; - - @media (min-width: $breakpoint-md) { - padding-right: $space-8; - padding-bottom: 0; + @media (min-width: $breakpoint-lg) { + grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.2fr); + gap: $space-10; + padding: $space-8; } } - @media (min-width: $breakpoint-lg) { - @include responsive-container; - padding-bottom: $space-8; + .article-content { + display: flex; + flex-direction: column; + gap: $space-8; } } - .share-buttons { - @include flex-column-start; - gap: $space-4; + .article-header { + display: flex; + flex-direction: column; + gap: $space-5; padding-bottom: $space-6; + border-bottom: 1px solid var(--color-border-subtle); - &__label { - font-weight: 500; - color: var(--color-text-secondary); - } - - &__list { - display: flex; - flex-wrap: wrap; - gap: $space-4; - - .btn.outline { - padding: $space-3 $space-4; - border-color: var(--color-button-border-outline); - color: var(--color-button-text-outline); - font-weight: 400; - border-radius: $radius-6; - - &:hover { - background-color: var(--color-button-bg-outline-hover); - border-color: var(--color-button-border-outline-hover); - color: var(--color-button-text-outline-hover); - } - } + .article-title { + font-weight: 700; + color: var(--color-single-post-title); + margin-bottom: 0; + line-height: 1.2; } - @media (min-width: $breakpoint-lg) { - @include flex-end; + .article-description { + color: var(--color-text-secondary); + font-size: 1.05rem; + line-height: 1.5; } - } - - .article-header { - padding-block: $space-10 $space-4; - border-bottom: 1px solid var(--color-border); .article-meta { - @include flex-column-start; + display: flex; flex-wrap: wrap; - gap: $space-6; - color: var(--color-text-secondary); + gap: $space-4; + padding: $space-4; + background-color: var(--color-surface-hover); + border: 1px solid var(--color-border-subtle); + border-radius: $radius-6; - .meta-item, - time { - @include flex-center; - flex-wrap: nowrap; - gap: $space-2; - - svg { - width: $space-4; - height: $space-4; - stroke: currentColor; - } + .meta-item { + display: flex; + align-items: center; + gap: $space-3; + min-width: 16rem; .meta__avatar { width: $space-8; height: $space-8; border-radius: 50%; overflow: hidden; - flex-shrink: 0; box-shadow: none; + border: 1px solid var(--color-border-subtle); img { width: 100%; @@ -145,87 +121,125 @@ } } - .meta__author { - font-weight: 600; - color: var(--color-text); - } - } + .wrapper { + display: flex; + flex-direction: column; + gap: $space-1; + + .meta__author { + font-weight: 600; + color: var(--color-text); + } - .wrapper { - @include flex-column-start; + .meta-date { + @include flex-start; + gap: $space-2; + color: var(--color-text-secondary); - .meta-date { - @include flex-center; - gap: $space-2; + svg { + width: $space-4; + height: $space-4; + stroke: currentColor; + } + } } } } - .article-title { - font-weight: 700; - color: var(--color-single-post-title); - margin-bottom: $space-2; - text-align: left; + .article-tags { + @include flex-start; + align-items: center; + flex-wrap: wrap; + gap: $space-2; + margin: 0; + padding: 0; + list-style: none; + + .tag { + display: inline-flex; + align-items: center; + gap: $space-1; + padding: $space-1 $space-3; + background-color: var(--color-accent); + color: var(--color-text-on-accent); + border-radius: $radius-6; + font-size: 0.85rem; + font-weight: 600; + text-transform: capitalize; + height: fit-content; - @media (min-width: $breakpoint-md) { - margin-bottom: $space-6; + svg { + width: $space-3; + height: $space-3; + } } } + } - .article-description { - color: var(--color-text-secondary); - margin-bottom: $space-6; - line-height: 1.5; - } + .article-footer { + display: flex; + flex-direction: column; + gap: $space-6; + border-top: 1px solid var(--color-border-subtle); + padding-top: $space-6; } - .article-tags { - @include flex-center; - gap: $space-2; + .share-buttons { + display: flex; + flex-direction: column; + gap: $space-4; - .tag { - @include flex-center; - padding: $space-1 $space-3; + &__label { font-weight: 600; - text-transform: capitalize; - background-color: var(--color-accent); - color: var(--color-text-on-accent); - border-radius: $radius-6; - gap: $space-1; - - svg { - width: $space-3; - height: $space-3; - fill: var(--color-text-on-accent); - } + color: var(--color-text-secondary); + letter-spacing: 0.02em; } - } - .article-footer { - @include flex-between; - flex-wrap: wrap; - border-top: 1px solid var(--color-border); - padding-block: $space-6 $space-4; - gap: $space-4; + &__list { + display: flex; + flex-wrap: wrap; + gap: $space-3; - .article-meta { - margin-bottom: 0; + .btn { + border-radius: $radius-7; + padding: $space-2 $space-4; + border: 1px solid var(--color-border-subtle); + background-color: var(--color-surface); + color: var(--color-text); + font-weight: 500; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out; + + &:hover { + background-color: var(--color-surface-hover); + border-color: var(--color-border); + color: var(--color-accent); + transform: translateY(-2px); + } + + &:focus-visible { + outline: none; + box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px rgba(53, 132, 228, 0.35); + } + + svg { + width: $space-4; + height: $space-4; + } + } } } } .post-content { - padding-inline: 0; - overflow: hidden; - line-height: 1.7; - color: var(--color-text); - text-align: left; + display: flex; + flex-direction: column; + gap: $space-4; max-width: 70ch; + color: var(--color-text); + line-height: 1.75; @media (min-width: $breakpoint-md) { - padding-block: $space-6; - text-align: left; - margin-bottom: $space-6; + gap: $space-5; } h1, @@ -235,55 +249,50 @@ h5, h6 { color: var(--color-single-post-title); + margin: 0; margin-top: $space-8; - margin-bottom: $space-4; + margin-bottom: $space-3; line-height: 1.3; font-weight: 700; } + p { + margin: 0; + } + ul, ol { - margin-bottom: $space-4; + margin: 0; padding-left: $space-6; + display: grid; + gap: $space-2; } - li { - margin-bottom: $space-2; - list-style: disc; - - ul { - margin-top: $space-2; - padding-left: $space-6; - list-style: square; - - li { - list-style: circle; - } - } + li ul, + li ol { + margin-top: $space-2; } a { color: var(--color-accent); + font-weight: 500; text-decoration: none; - transition: color 0.2s ease; - padding: 0; &:hover { color: var(--color-accent-hover); + text-decoration: underline; } } blockquote { - border-left: 4px solid var(--color-border); - padding: $space-4 $space-6; + border-left: 3px solid var(--color-accent); + background-color: rgba(53, 132, 228, 0.08); + padding: $space-5 $space-6; margin: $space-6 0; color: var(--color-text-secondary); - font-style: italic; - background-color: var(--color-accent-100); border-radius: $radius-6; @media (min-width: $breakpoint-md) { - padding: $space-6 $space-8; margin: $space-8 0; } } @@ -291,8 +300,9 @@ code { background-color: var(--color-code-inline-bg); border-radius: $radius-6; - padding: $space-1 $space-2; + padding: 0.125rem $space-2; font-family: 'Fira Code', 'Monaco', 'Courier New', monospace; + font-size: 0.95rem; } pre { @@ -301,46 +311,59 @@ padding: $space-6; border-radius: $radius-6; overflow-x: auto; - margin-bottom: $space-8; - line-height: 1.5; + margin: $space-6 0; + line-height: 1.55; @media (min-width: $breakpoint-md) { - padding: $space-8; - margin-bottom: $space-10; + padding: $space-7; + margin: $space-8 0; } code { - background: none; - color: inherit; + background: transparent; padding: 0; + color: inherit; } } - img { - max-width: 100%; + img, + picture { + width: 100%; height: auto; - display: block; - margin-block: $space-6; border-radius: $radius-6; + margin: $space-6 0; box-shadow: none; + } - @media (min-width: $breakpoint-md) { - margin-block: $space-8; + table { + width: 100%; + border-collapse: collapse; + background-color: var(--color-surface); + border: 1px solid var(--color-border-subtle); + border-radius: $radius-6; + overflow: hidden; + + th, + td { + padding: $space-3; + border-bottom: 1px solid var(--color-border-subtle); + text-align: left; } - } - hr { - border: none; - border-top: 1px solid var(--color-border); - margin: $space-8 0; + thead th { + background-color: var(--color-surface-hover); + font-weight: 600; + } - @media (min-width: $breakpoint-md) { - margin: $space-10 0; + tbody tr:last-child td { + border-bottom: none; } } - p { - margin-bottom: $space-4; + hr { + border: none; + border-top: 1px solid var(--color-border-subtle); + margin: $space-8 0; } } @@ -375,4 +398,4 @@ } } -@import './single/some-improves'; \ No newline at end of file +@import './single/some-improves'; diff --git a/src/assets/scss/pages/single/_article-sidebar.scss b/src/assets/scss/pages/single/_article-sidebar.scss index 1f75621..3b5bfc4 100644 --- a/src/assets/scss/pages/single/_article-sidebar.scss +++ b/src/assets/scss/pages/single/_article-sidebar.scss @@ -1,101 +1,78 @@ .article-sidebar { - @include flex-column-center; + display: flex; + flex-direction: column; + gap: $space-5; width: 100%; - gap: $space-4; - overflow: hidden; - background-color: var(--color-bg); + padding-block: $space-4; @media (min-width: $breakpoint-md) { - margin-top: $space-6; - padding-inline: $space-2; - padding-block: $space-10; - gap: $space-6; - border-left: 1px solid var(--color-border); + padding-block: 0; + } + + @media (min-width: $breakpoint-lg) { + position: sticky; + top: $space-12; } .sidebar__section { - width: 100%; - background-color: var(--color-surface, #fff); + display: flex; + flex-direction: column; + gap: $space-3; + padding: $space-4; + background-color: var(--color-surface); + border: 1px solid var(--color-border-subtle); border-radius: $radius-6; - padding: $space-4 $space-3; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); - transition: background-color 0.25s ease, transform 0.2s ease; - - &:not(:last-child) { - margin-bottom: $space-2; - } + box-shadow: $box-shadow-light; + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; &:hover { - background-color: var(--color-surface-hover, #f8f9fa); transform: translateY(-2px); + box-shadow: $box-shadow-light-hover; } } .sidebar__title { - font-weight: 700; font-size: 0.95rem; - letter-spacing: 0.5px; - color: var(--color-text); - margin-bottom: $space-3; - padding-bottom: $space-4; + font-weight: 700; + letter-spacing: 0.04em; text-transform: uppercase; - border-bottom: 1px solid var(--color-border); + color: var(--color-text-secondary); } .sidebar__description { color: var(--color-text-secondary); line-height: 1.6; - font-size: 0.9rem; - margin-bottom: $space-3; + font-size: 0.95rem; } .sidebar__categories { list-style: none; - padding-left: 0; - padding-inline-start: 0; - - .sidebar__category { - width: 100%; - margin-bottom: $space-2; - } + padding: 0; + margin: 0; + display: grid; + gap: $space-2; } .sidebar__link { - @include flex-start; + @include flex-between; padding: $space-2 $space-3; - color: var(--color-text); border-radius: $radius-6; - transition: background-color 0.25s ease, color 0.25s ease, - transform 0.15s ease; + color: var(--color-text); + background-color: var(--color-surface-hover); + border: 1px solid transparent; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out; &:hover { background-color: var(--color-accent-100); + border-color: var(--color-border-subtle); color: var(--color-accent); transform: translateX(2px); } - &::before { - content: ''; - display: inline-block; - width: $space-1; - height: $space-1; - background-color: var(--color-accent); - border-radius: 50%; - margin-right: $space-3; - opacity: 0.6; - transition: opacity 0.25s ease; - } - - &:hover::before { - opacity: 1; - } - svg { - margin-left: $space-2; width: $space-4; height: $space-4; - stroke: var(--color-text); - transition: fill 0.25s ease; + stroke: currentColor; } } -} \ No newline at end of file +} diff --git a/src/assets/scss/pages/single/_related-posts.scss b/src/assets/scss/pages/single/_related-posts.scss index 709ee25..49e9c43 100644 --- a/src/assets/scss/pages/single/_related-posts.scss +++ b/src/assets/scss/pages/single/_related-posts.scss @@ -1,42 +1,38 @@ .related-posts { @include responsive-container; - max-width: 100%; - padding-block: $space-2; - - @media (min-width: $breakpoint-md) { - margin-top: $space-10; - padding-block: $space-10; - } + padding-block: $space-10; .section-title { font-weight: 700; color: var(--color-text); - margin-bottom: $space-8; text-align: center; + margin-bottom: $space-8; } .post-grid { - @include grid(1, $space-6); + display: grid; + gap: $space-6; @media (min-width: $breakpoint-md) { - @include grid(2, $space-6); + grid-template-columns: repeat(2, minmax(0, 1fr)); } - @media (min-width: ($breakpoint-lg)) { - @include grid(3, $space-6); + @media (min-width: $breakpoint-lg) { + grid-template-columns: repeat(3, minmax(0, 1fr)); } } .post-card { - background-color: var(--color-content-card-bg); + background-color: var(--color-surface); + border: 1px solid var(--color-border-subtle); border-radius: $radius-6; - box-shadow: $box-shadow-md; - overflow: hidden; - transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + box-shadow: $box-shadow-light; + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out; &:hover { - transform: translateY(0); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transform: translateY(-3px); + box-shadow: $box-shadow-light-hover; + border-color: var(--color-border); } } -} \ No newline at end of file +} diff --git a/src/assets/scss/pages/single/_some-improves.scss b/src/assets/scss/pages/single/_some-improves.scss index 91c87db..5d2ef86 100644 --- a/src/assets/scss/pages/single/_some-improves.scss +++ b/src/assets/scss/pages/single/_some-improves.scss @@ -1,71 +1,33 @@ .article-content { margin: 0 auto; + width: 100%; .post-content { font-size: 1.05rem; - line-height: 1.75; - color: var(--color-text); - - h2, h3 { - margin-top: $space-6; - margin-bottom: $space-3; - font-weight: 700; - line-height: 1.4; - } - - p { - margin-bottom: $space-4; - } + line-height: 1.8; } } -/* Share buttons modernizados */ .share-buttons { - margin-top: $space-8; - padding-top: $space-6; - border-top: 1px solid var(--color-border); - - .share-buttons__label { - display: block; - font-size: 0.9rem; - font-weight: 600; - margin-bottom: $space-3; - color: var(--color-text-secondary); - } + margin-top: 0; .share-buttons__list { - display: flex; - flex-wrap: wrap; - gap: $space-3; - - .btn { - display: flex; - align-items: center; - gap: $space-2; - border-radius: $radius-7; - padding: $space-2 $space-4; - font-size: 0.9rem; - font-weight: 500; - transition: background-color 0.25s ease, transform 0.15s ease; - - &:hover { - transform: translateY(-2px); - } - - &.linkedin:hover { - background-color: #0a66c2; - color: #fff; - } + .btn[href*="linkedin" i]:hover { + background-color: #0a66c2; + border-color: #0a66c2; + color: #fff; + } - &.facebook:hover { - background-color: #1877f2; - color: #fff; - } + .btn[href*="facebook" i]:hover { + background-color: #1877f2; + border-color: #1877f2; + color: #fff; + } - &.copy:hover { - background-color: var(--color-accent); - color: #fff; - } + .js-copy-link:hover { + background-color: var(--color-accent); + border-color: var(--color-accent); + color: var(--color-text-on-accent); } } } @@ -75,8 +37,9 @@ figure { } figcaption { - margin-top: -$space-8; + margin-top: $space-2; font-size: 0.875rem; + color: var(--color-text-secondary); } .image-banner { @@ -84,7 +47,6 @@ figcaption { overflow: hidden; width: 100%; aspect-ratio: 13 / 9; - object-fit: cover; border-radius: $radius-6; img { @@ -96,12 +58,12 @@ figcaption { } figcaption { - background-color: var(--color-bg); + background-color: rgba(0, 0, 0, 0.55); + color: #fff; position: absolute; bottom: $space-2; left: $space-4; - margin-top: $space-2; - text-align: center; padding: $space-1 $space-2; + border-radius: $radius-3; } -} \ No newline at end of file +}