From 47f84a1e738686ccbc3ad8e1edbb614c25c51b09 Mon Sep 17 00:00:00 2001 From: edwardep Date: Sun, 30 Aug 2026 17:42:46 +0200 Subject: [PATCH 01/13] [Barcelona-2026] Modernize welcome page and trim social share buttons Limit social share buttons to email and LinkedIn via social_shares, and add a LinkedIn badge linking to the DevOpsDays Barcelona page. Rework the welcome page layout: replace the fixed-width two-column table with a flex layout that stacks on mobile, convert the "What's in Store?" list into cards, and add a call-to-action for sponsoring and contact. Recolour the page from the theme default blue and the previous purple to the palette of the Barcelona event logo, which fixes white-on-light-grey text at the bottom of the masthead. Co-Authored-By: Claude Opus 5 --- content/events/2026-barcelona/welcome.md | 251 ++++++++++++++++++----- data/events/2026/barcelona/main.yml | 3 + 2 files changed, 205 insertions(+), 49 deletions(-) diff --git a/content/events/2026-barcelona/welcome.md b/content/events/2026-barcelona/welcome.md index b759aeb1674..58dde0d13df 100644 --- a/content/events/2026-barcelona/welcome.md +++ b/content/events/2026-barcelona/welcome.md @@ -5,9 +5,21 @@ aliases = ["/events/2026-barcelona/"] Description = "DevOpsDays Barcelona 2026" +++ - +
+ +
+ {{< event_social_linkedin >}} + Follow DevOpsDays Barcelona on LinkedIn +
+ +
@@ -135,37 +273,52 @@ Description = "DevOpsDays Barcelona 2026"
-------- - - - - - - -
-

Hola, Barcelona! We're Back!

-

- After a long break, we're absolutely thrilled to announce that DevOpsDays is coming back to Barcelona in 2026! It's been over ten years since our last event here in 2013, and things in the world of DevOps have changed so much. We're really excited to bring the global DevOpsDays community back to our amazing city. -

-

- Get ready to meet up with fellow professionals, share what you've learned, and discover the newest ideas, tools, and ways of working in DevOps. Whether you've been doing this for ages or are just starting out, this is your chance to jump into open discussions, find fresh perspectives, and help make our local DevOps community even stronger. -

-

What's in Store?

-
    -
  • Great Talks: Hear from industry leaders and local experts on all sorts of topics, from making things automatic and using cloud tech to security and how companies are changing their ways.
    • -
  • Interactive Open Spaces: This is where the real magic happens! You can suggest and lead discussions on topics that matter most to you, creating natural learning and teamwork.
    • -
  • Plenty of Chances to Connect: Meet new people, build relationships, and share ideas in a friendly and welcoming setting.
    • -
-

- We're busy planning an awesome event, and we can't wait to welcome you back to DevOpsDays Barcelona. Keep an eye out for more details on how to get involved as a speaker, sponsor or even a volunteer. -

-

- Let's make this return bigger and better than ever before! -

-

- Got questions or want to help out? Don't hesitate to reach out – we'd love to chat! -

- 		- {{< event_logo >}} -
DevOpsDays Barcelona 2026 -
+
+ +
+
+

Hola, Barcelona! We're Back!

+

+ After a long break, we're absolutely thrilled to announce that DevOpsDays is coming back to Barcelona in 2026! It's been over ten years since our last event here in 2013, and things in the world of DevOps have changed so much. We're really excited to bring the global DevOpsDays community back to our amazing city. +

+

+ Get ready to meet up with fellow professionals, share what you've learned, and discover the newest ideas, tools, and ways of working in DevOps. Whether you've been doing this for ages or are just starting out, this is your chance to jump into open discussions, find fresh perspectives, and help make our local DevOps community even stronger. +

+
+ +
+ +

What's in Store?

+ +
+
+

Great Talks

+

Hear from industry leaders and local experts on all sorts of topics, from making things automatic and using cloud tech to security and how companies are changing their ways.

+
+
+

Interactive Open Spaces

+

This is where the real magic happens! You can suggest and lead discussions on topics that matter most to you, creating natural learning and teamwork.

+
+
+

Plenty of Chances to Connect

+

Meet new people, build relationships, and share ideas in a friendly and welcoming setting.

+
+
+ +

+ We're busy planning an awesome event, and we can't wait to welcome you back to DevOpsDays Barcelona. Keep an eye out for more details on how to get involved as a speaker, sponsor or even a volunteer. +

+

+ Let's make this return bigger and better than ever before! +

+ +
+

Want to be part of DevOpsDays Barcelona 2026?
Put your company in front of the local DevOps community, or just say hello — we'd love to chat.

+ Sponsor the conference + Contact us +
+ +
diff --git a/data/events/2026/barcelona/main.yml b/data/events/2026/barcelona/main.yml index 767d9ffae35..eefbf4196eb 100644 --- a/data/events/2026/barcelona/main.yml +++ b/data/events/2026/barcelona/main.yml @@ -34,6 +34,9 @@ location: "Barcelona" # Defaults to city, but you can make it the venue name. # location_address: "c/ Pujades, 118, 08005 Barcelona" #Optional - use the street address of your venue. This will show up on the welcome page if set. Also used by the event_map shortcode! +# Which social share buttons to show. We only have email and LinkedIn. +social_shares: ["email", "linkedin"] + # Optional - Social badges # These can be used in the body of any page via matching shortcodes. See sample: https://devopsdays.org/events/2025-denver/welcome/ event_social_linkedin: "https://linkedin.com/company/devopsdays-bcn/" # Change this to the url to your Linkedin group, company, or page. From c03f365682516d3f9772efb29755e38db0c2660f Mon Sep 17 00:00:00 2001 From: edwardep Date: Sun, 30 Aug 2026 18:03:52 +0200 Subject: [PATCH 02/13] [Barcelona-2026] Colour the card titles and hide the share row Make the "What's in Store?" card titles bold and give each one its card's accent colour, darkened so it stays readable on the cream background. Hide the share row. Its email icon shares the page by mail, which reads as a second Contact button next to the real one, and its LinkedIn icon posts to the visitor's own feed rather than linking to ours. Both are covered more clearly by the Contact button and the LinkedIn badge below it. Co-Authored-By: Claude Opus 5 --- content/events/2026-barcelona/welcome.md | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/content/events/2026-barcelona/welcome.md b/content/events/2026-barcelona/welcome.md index 58dde0d13df..024fe867919 100644 --- a/content/events/2026-barcelona/welcome.md +++ b/content/events/2026-barcelona/welcome.md @@ -35,14 +35,24 @@ Description = "DevOpsDays Barcelona 2026" color: #fff; } - /* Share icons and the masthead Contact button: outlined rather than filled, - so they sit quietly on the navy instead of competing with it. */ - a.jssocials-share-link, a.event-cta-button { + /* Hide the "share this page" row. Its email icon shares the page by mail, + which reads as a second Contact button, and its LinkedIn icon posts to the + visitor's own feed rather than linking to ours. Both jobs are done more + clearly by the Contact button and the Follow badge below. + Note: social_shares: [] would not work here - an empty list is falsy in + Hugo, so footer_scripts.html falls back to showing all four buttons. */ + #share { + display: none; + } + + /* Masthead buttons: outlined rather than filled, so they sit quietly on the + navy instead of competing with it. */ + a.event-cta-button { background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.65); color: #fff; } - a:hover.jssocials-share-link, a:hover.event-cta-button { + a:hover.event-cta-button { background-color: rgba(255, 255, 255, 0.15); color: #fff; } @@ -138,8 +148,13 @@ Description = "DevOpsDays Barcelona 2026" margin-top: 0; margin-bottom: 0.75rem; font-size: 1.1rem; + font-weight: 700; color: #111224; } + /* Title picks up the card's accent, darkened so it stays readable on cream. */ + .bcn-card.amber h3 { color: #A34E12; } + .bcn-card.crimson h3 { color: #C00E38; } + .bcn-card.cyan h3 { color: #076A85; } .bcn-card p { margin-bottom: 0; font-size: 0.93rem; From bbb61eac60fde7bd0edf0669ac2b435382db8d20 Mon Sep 17 00:00:00 2001 From: edwardep Date: Sun, 30 Aug 2026 18:08:19 +0200 Subject: [PATCH 03/13] [Barcelona-2026] Bleed the masthead to the screen edges and soften its sides Run the masthead the full width of the viewport and fade the navy to white at both sides, so the dark band no longer meets the white page on a hard edge. The masthead is itself the .col-md-12, so Bootstrap's flex basis and max-width have to be overridden for the width to take effect. The fade distance and the horizontal padding share one custom property, so the text always starts where the fade ends at any viewport width, and past the 1600px container it aligns with the content below. Co-Authored-By: Claude Opus 5 --- content/events/2026-barcelona/welcome.md | 40 ++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/content/events/2026-barcelona/welcome.md b/content/events/2026-barcelona/welcome.md index 024fe867919..996e3f9c233 100644 --- a/content/events/2026-barcelona/welcome.md +++ b/content/events/2026-barcelona/welcome.md @@ -10,11 +10,45 @@ Description = "DevOpsDays Barcelona 2026" /* Masthead: navy instead of the theme default blue-to-grey, so white text stays legible all the way down to the venue address. */ + /* Full-bleed masthead. It is itself the .col-md-12, so Bootstrap's + flex: 0 0 100% / max-width: 100% has to be overridden or the width is + clamped to the container. The navy then fades to white at both sides so a + hard dark block does not butt against the white page. + + --bcn-inset is both the fade distance and the horizontal padding, so the + text always begins exactly where the fade has finished. Past the 1600px + container width it becomes the real gutter, which lines the masthead text + up with the content below it. */ .welcome-page-masthead { - background: #111224; - background: linear-gradient(#111224, #232A52); - border-bottom: 4px solid #00BAEB; + --bcn-inset: max(6vw, calc(50vw - 800px)); + flex: 0 0 100vw; + width: 100vw; + max-width: none; + margin-top: 0; + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); + padding-left: var(--bcn-inset); + padding-right: var(--bcn-inset); + border-bottom: 0; font-size: +1em; + background: #111224; + background: + linear-gradient(to right, + #fff 0, + rgba(255, 255, 255, 0) var(--bcn-inset), + rgba(255, 255, 255, 0) calc(100% - var(--bcn-inset)), + #fff 100%), + linear-gradient(to top, + #00BAEB 0, #00BAEB 4px, + rgba(0, 186, 235, 0) 4px), + linear-gradient(#111224, #232A52); + } + + /* 100vw does not account for the scrollbar; stop the overhang from creating + a horizontal scroll. Safe here - the theme has no sticky or fixed + positioning for this to break. */ + body { + overflow-x: hidden; } .welcome-page-masthead, .welcome-page-masthead a { From c923eaa522fb8f68e853543142a254d3edb53f67 Mon Sep 17 00:00:00 2001 From: edwardep Date: Sun, 30 Aug 2026 20:57:57 +0200 Subject: [PATCH 04/13] [Barcelona-2026] Drop the masthead side fade and lighten the blue Remove the fade to white at the sides and keep the background running the full width of the viewport. Replace the near-black navy with a lighter teal-blue taken from the logo, running from #12789A at the top to #0A5771 at the bottom. White text needs the depth: the gradient darkens downward so the small date and venue text sits on the strongest contrast (5.0:1 at the top, 8.0:1 at the bottom). The bottom rule moves from cyan to the logo's amber, which reads more clearly now that the background is itself blue. Co-Authored-By: Claude Opus 5 --- content/events/2026-barcelona/welcome.md | 32 ++++++++++-------------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/content/events/2026-barcelona/welcome.md b/content/events/2026-barcelona/welcome.md index 996e3f9c233..149a884afa9 100644 --- a/content/events/2026-barcelona/welcome.md +++ b/content/events/2026-barcelona/welcome.md @@ -12,15 +12,18 @@ Description = "DevOpsDays Barcelona 2026" stays legible all the way down to the venue address. */ /* Full-bleed masthead. It is itself the .col-md-12, so Bootstrap's flex: 0 0 100% / max-width: 100% has to be overridden or the width is - clamped to the container. The navy then fades to white at both sides so a - hard dark block does not butt against the white page. + clamped to the container. - --bcn-inset is both the fade distance and the horizontal padding, so the - text always begins exactly where the fade has finished. Past the 1600px - container width it becomes the real gutter, which lines the masthead text - up with the content below it. */ + The blue is a lighter, logo-derived teal rather than near-black navy, but + it still has to carry white text: it runs from #12789A at the top (5.1:1 + against white) to #0A5771 at the bottom (7.8:1), deepening as it goes so + the small venue and date text sits on the strongest contrast. + + --bcn-inset matches the container's own padding below 1600px and becomes + the real gutter above it, so the masthead text lines up with the content + underneath at every width. */ .welcome-page-masthead { - --bcn-inset: max(6vw, calc(50vw - 800px)); + --bcn-inset: max(15px, calc(50vw - 800px)); flex: 0 0 100vw; width: 100vw; max-width: none; @@ -29,19 +32,10 @@ Description = "DevOpsDays Barcelona 2026" margin-right: calc(50% - 50vw); padding-left: var(--bcn-inset); padding-right: var(--bcn-inset); - border-bottom: 0; + border-bottom: 4px solid #F9CD34; font-size: +1em; - background: #111224; - background: - linear-gradient(to right, - #fff 0, - rgba(255, 255, 255, 0) var(--bcn-inset), - rgba(255, 255, 255, 0) calc(100% - var(--bcn-inset)), - #fff 100%), - linear-gradient(to top, - #00BAEB 0, #00BAEB 4px, - rgba(0, 186, 235, 0) 4px), - linear-gradient(#111224, #232A52); + background: #12789A; + background: linear-gradient(#12789A, #0A5771); } /* 100vw does not account for the scrollbar; stop the overhang from creating From 17346816399a307b9d96a4c9ce2abf41300558f0 Mon Sep 17 00:00:00 2001 From: edwardep Date: Sun, 30 Aug 2026 23:05:05 +0200 Subject: [PATCH 05/13] [Barcelona-2026] Align the masthead text with the content below it The body copy sits in a 1000px column centred in the viewport, not against the container edge, so the masthead text started well to its left on wider screens. Track that column instead: the inset is the distance from the screen edge to it, 50vw - 500px, falling back to the container padding once the column stops being 1000px wide. Co-Authored-By: Claude Opus 5 --- content/events/2026-barcelona/welcome.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/content/events/2026-barcelona/welcome.md b/content/events/2026-barcelona/welcome.md index 149a884afa9..78ce586cada 100644 --- a/content/events/2026-barcelona/welcome.md +++ b/content/events/2026-barcelona/welcome.md @@ -19,11 +19,13 @@ Description = "DevOpsDays Barcelona 2026" against white) to #0A5771 at the bottom (7.8:1), deepening as it goes so the small venue and date text sits on the strongest contrast. - --bcn-inset matches the container's own padding below 1600px and becomes - the real gutter above it, so the masthead text lines up with the content - underneath at every width. */ + --bcn-inset aligns the masthead text with the body copy below it. That + copy sits in .bcn-wrap, a 1000px column centred in the viewport, so the + inset is the distance from the screen edge to that column: 50vw - 500px. + Below roughly 1030px the column is no longer 1000px wide and hugs the + container padding instead, which is what the 15px floor picks up. */ .welcome-page-masthead { - --bcn-inset: max(15px, calc(50vw - 800px)); + --bcn-inset: max(15px, calc(50vw - 500px)); flex: 0 0 100vw; width: 100vw; max-width: none; From 44e1e67f1302492eaf94b7f02e81e92d0ad8691a Mon Sep 17 00:00:00 2001 From: edwardep Date: Sun, 30 Aug 2026 23:52:41 +0200 Subject: [PATCH 06/13] [Barcelona-2026] Rework the masthead and enlarge the body text Masthead: show only the event name and the dates. The venue and the address are hidden here and kept in the Location row below, so they are read once rather than twice. They are hidden in CSS rather than blanked in main.yml because the location page's map, the Location row and the schema.org event metadata all read those fields. Set the location to the venue name, which the field is meant for, and drop the repeated city name from the summary line. Between them the masthead went from naming Barcelona four times to twice. Enlarge the title and let it scale with the viewport, and undo the theme's generic h1 capitalize rule, which was rendering the wordmark as "Devopsdays" rather than lowercase. Body: lift the content column to roughly 16px with a roomier line height. The theme's root is 14px, so the copy was rendering small and light. Move the logo beside the whole upper block rather than beside the first paragraph alone. Co-Authored-By: Claude Opus 5 --- content/events/2026-barcelona/welcome.md | 100 +++++++++++++++-------- data/events/2026/barcelona/main.yml | 4 +- 2 files changed, 66 insertions(+), 38 deletions(-) diff --git a/content/events/2026-barcelona/welcome.md b/content/events/2026-barcelona/welcome.md index 78ce586cada..1db270d74f2 100644 --- a/content/events/2026-barcelona/welcome.md +++ b/content/events/2026-barcelona/welcome.md @@ -53,17 +53,32 @@ Description = "DevOpsDays Barcelona 2026" .welcome-page-date { font-weight: 700; } - .welcome-page-masthead-venue { - font-weight: 600; + /* Bigger title, now that the masthead carries only the name and the dates. + text-transform: none undoes the theme's generic h1 capitalize rule, which + was rendering the wordmark as "Devopsdays". Lowercase is how devopsdays + sets its own name, here and in the site nav and footer. */ + .welcome-page-masthead h1.welcome-page { + font-size: clamp(2.6rem, 5vw, 3.8rem); + line-height: 1.1; + margin-bottom: 0.4rem; + text-transform: none; + } + + /* Drop the venue and the address from the masthead - both still appear in + the Location row below. The fields stay in main.yml because the location + page's map, the Location row and the schema.org event metadata all read + them, so this has to be done here rather than by blanking the config. + The two
that follow them go too, or they leave the gap behind. */ + .welcome-page-masthead-venue, + .welcome-page-masthead-venue + br, + .welcome-page-masthead-venue + br + span, + .welcome-page-masthead-venue + br + span + br { + display: none; } .e-summary { font-size: +1em; font-weight: 700; } - a.p-location, a.p-location:hover, a.p-location:active { - font-weight: 600; - color: #fff; - } /* Hide the "share this page" row. Its email icon shares the page by mail, which reads as a second Contact button, and its LinkedIn icon posts to the @@ -96,9 +111,14 @@ Description = "DevOpsDays Barcelona 2026" max-height: 70px; } + /* The theme sets html { font-size: 14px }, so a bare rem here is 14px and + body copy renders small and light. Lift the whole column to ~16px with a + roomier line height. */ .bcn-wrap { max-width: 1000px; margin: 0 auto; + font-size: 1.15rem; + line-height: 1.65; } /* Follow line, sits directly under the masthead */ @@ -129,30 +149,31 @@ Description = "DevOpsDays Barcelona 2026" margin-bottom: 0.35rem; } - /* Intro: copy beside the logo on desktop, stacked on mobile */ - .bcn-intro { + /* Top section: the logo sits beside everything from the LinkedIn line down + to the end of the intro copy, centred against that whole block rather + than against the first paragraph. Stacks on mobile. */ + .bcn-top { display: flex; flex-wrap: wrap; gap: 2rem; - align-items: flex-start; - margin: 2rem 0; + align-items: center; + margin: 1.5rem 0 2.5rem; } - .bcn-intro-copy { - flex: 1 1 320px; + .bcn-top-main { + flex: 1 1 340px; min-width: 0; } - .bcn-intro-logo { + .bcn-top-logo { flex: 0 1 260px; text-align: center; margin: 0 auto; } - .bcn-intro-logo img { + .bcn-top-logo img { max-width: 100%; height: auto; } - .bcn-intro h2 { + .bcn-top-main h2 { margin-top: 0; - color: #111224; } /* "What's in Store?" cards */ @@ -177,7 +198,7 @@ Description = "DevOpsDays Barcelona 2026" .bcn-card h3 { margin-top: 0; margin-bottom: 0.75rem; - font-size: 1.1rem; + font-size: 1.35rem; font-weight: 700; color: #111224; } @@ -187,7 +208,8 @@ Description = "DevOpsDays Barcelona 2026" .bcn-card.cyan h3 { color: #076A85; } .bcn-card p { margin-bottom: 0; - font-size: 0.93rem; + font-size: 1.1rem; + line-height: 1.6; } /* Bottom call to action */ @@ -228,6 +250,9 @@ Description = "DevOpsDays Barcelona 2026"
+
+
+
{{< event_social_linkedin >}} Follow DevOpsDays Barcelona on LinkedIn @@ -320,20 +345,23 @@ Description = "DevOpsDays Barcelona 2026"
-
-
-

Hola, Barcelona! We're Back!

-

- After a long break, we're absolutely thrilled to announce that DevOpsDays is coming back to Barcelona in 2026! It's been over ten years since our last event here in 2013, and things in the world of DevOps have changed so much. We're really excited to bring the global DevOpsDays community back to our amazing city. -

-

- Get ready to meet up with fellow professionals, share what you've learned, and discover the newest ideas, tools, and ways of working in DevOps. Whether you've been doing this for ages or are just starting out, this is your chance to jump into open discussions, find fresh perspectives, and help make our local DevOps community even stronger. -

-
- +

Hola, Barcelona! We're Back!

+ +

+ After a long break, we're absolutely thrilled to announce that DevOpsDays is coming back in 2026! It's been over ten years since our last event here in 2013, and things in the world of DevOps have changed so much. We're really excited to bring the global DevOpsDays community back to our amazing city. +

+ +

+ Get ready to meet up with fellow professionals, share what you've learned, and discover the newest ideas, tools, and ways of working in DevOps. Whether you've been doing this for ages or are just starting out, this is your chance to jump into open discussions, find fresh perspectives, and help make our local DevOps community even stronger. +

+ +
+ + +

What's in Store?

@@ -344,24 +372,24 @@ Description = "DevOpsDays Barcelona 2026"

Hear from industry leaders and local experts on all sorts of topics, from making things automatic and using cloud tech to security and how companies are changing their ways.

-

Interactive Open Spaces

+

Open Spaces

This is where the real magic happens! You can suggest and lead discussions on topics that matter most to you, creating natural learning and teamwork.

-

Plenty of Chances to Connect

+

Time to Connect

Meet new people, build relationships, and share ideas in a friendly and welcoming setting.

- We're busy planning an awesome event, and we can't wait to welcome you back to DevOpsDays Barcelona. Keep an eye out for more details on how to get involved as a speaker, sponsor or even a volunteer. + We're busy planning an awesome event, and we can't wait to welcome you back. Keep an eye out for more details on how to get involved as a speaker, sponsor or even a volunteer.

Let's make this return bigger and better than ever before!

-

Want to be part of DevOpsDays Barcelona 2026?
Put your company in front of the local DevOps community, or just say hello — we'd love to chat.

+

Got questions or want to help out?
Don't hesitate to reach out – we'd love to chat!

Sponsor the conference Contact us
diff --git a/data/events/2026/barcelona/main.yml b/data/events/2026/barcelona/main.yml index eefbf4196eb..bbf18fcd935 100644 --- a/data/events/2026/barcelona/main.yml +++ b/data/events/2026/barcelona/main.yml @@ -2,7 +2,7 @@ name: "2026-barcelona" # The name of the event. Four digit year with the city na year: "2026" # The year of the event. Make sure it is in quotes. city: "Barcelona" # The displayed city name of the event. Capitalize it. event_twitter: "devopsdays" # Change this to the twitter handle for your event such as devopsdayschi or devopsdaysmsp -description: "Devopsdays is coming to Barcelona!" # Edit this to suit your preferences +description: "After more than ten years, we're back!" # Edit this to suit your preferences ga_tracking_id: "" # If you have your own Google Analytics tracking ID, enter it here. Example: "UA-74738648-1" # All dates are in unquoted 2026-MM-DDTHH:MM:SS+TZ:TZ, like this: @@ -30,7 +30,7 @@ registration_link: "" # If you have a custom registration link, enter it here. T # # coordinates: "" # No longer used -location: "Barcelona" # Defaults to city, but you can make it the venue name. +location: "BAU, Centre Universitari d'Arts i Disseny" # Defaults to city, but you can make it the venue name. # location_address: "c/ Pujades, 118, 08005 Barcelona" #Optional - use the street address of your venue. This will show up on the welcome page if set. Also used by the event_map shortcode! From 62e698a50b50e5e7cacd0352600feef41b63df88 Mon Sep 17 00:00:00 2001 From: edwardep Date: Tue, 1 Sep 2026 19:48:34 +0200 Subject: [PATCH 07/13] [Barcelona-2026] Give the program, speakers and tickets their own place PR #16101 opened registration and published the program and the speaker list, and added a row for each to the facts box. Those three are now the reason to be on this page, so they get a strip of linked cards between the intro and "What's in Store?" instead of a line of small print each. The facts box goes back to being facts - dates, location, contact. Sponsors keeps its button at the foot of the page, so no link appears twice. The closing copy still said to watch for news on speaking and volunteering while the CFP was open. It now points at the program and the speakers, and the bottom call to action leads with the ticket rather than the sponsorship. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_019QnMBxaFA8mQPFP1QrEkyo --- content/events/2026-barcelona/welcome.md | 122 ++++++++++++++++------- 1 file changed, 84 insertions(+), 38 deletions(-) diff --git a/content/events/2026-barcelona/welcome.md b/content/events/2026-barcelona/welcome.md index 1db270d74f2..e1faff79d90 100644 --- a/content/events/2026-barcelona/welcome.md +++ b/content/events/2026-barcelona/welcome.md @@ -212,6 +212,59 @@ Description = "DevOpsDays Barcelona 2026" line-height: 1.6; } + /* The three things that are live now: program, speakers and tickets. A + strip of linked cards rather than three more lines in the facts box - + these are what we want a visitor to act on, not more small print. The + whole card is the link; the arrow is decoration. Left accent bar instead + of the top bar the "What's in Store?" cards use, so the two grids do not + read as the same kind of thing. */ + .bcn-actions { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin: 1.5rem 0 2.5rem; + } + .bcn-action { + flex: 1 1 240px; + display: block; + border: 1px solid #e6e6ea; + border-left: 4px solid #00BAEB; + border-radius: 6px; + padding: 1.1rem 1.35rem; + background: #fff; + color: #1a1a1a !important; + text-decoration: none !important; + transition: box-shadow 0.15s ease, transform 0.15s ease; + } + .bcn-action:hover { + box-shadow: 0 4px 14px rgba(17, 18, 36, 0.12); + transform: translateY(-2px); + } + .bcn-action-title { + display: block; + font-size: 1.35rem; + font-weight: 700; + margin-bottom: 0.3rem; + color: #076A85; + } + .bcn-action p { + margin: 0; + font-size: 1.05rem; + line-height: 1.55; + } + .bcn-action-go { + display: block; + margin-top: 0.6rem; + font-weight: 600; + color: #076A85; + } + .bcn-action.amber { border-left-color: #F9CD34; } + .bcn-action.amber .bcn-action-title, + .bcn-action.amber .bcn-action-go { color: #A34E12; } + .bcn-action.crimson { border-left-color: #F11647; } + .bcn-action.crimson .bcn-action-title, + .bcn-action.crimson .bcn-action-go { color: #C00E38; } + /* Bottom call to action */ .bcn-cta { background: #FFFCF0; @@ -278,14 +331,10 @@ Description = "DevOpsDays Barcelona 2026" -
-
- Register -
-
- {{< event_link page="registration" text="Register to attend the conference!" >}} -
-
+ -
-
- Program -
-
- View the {{< event_link page="program" text="program." >}} -
-
- -
-
- Speakers -
-
- Check out the {{< event_link page="speakers" text="speakers!" >}} -
-
- -
-
- Sponsors -
-
- {{< event_link page="sponsor" text="Sponsor the conference!" >}} -
-
- {{< event_map >}} + + +

+ Visit the BAU campus site +

+ - + + diff --git a/content/events/2026-barcelona/sponsor.md b/content/events/2026-barcelona/sponsor.md index 8d8e7f769e2..5ecd8d58f7d 100644 --- a/content/events/2026-barcelona/sponsor.md +++ b/content/events/2026-barcelona/sponsor.md @@ -4,138 +4,44 @@ Type = "event" Description = "Sponsor devopsdays Barcelona 2026" +++ - + -
+
- +

DevOpsDays comes back to Barcelona on 13–14 November 2026 at BAU, Centre Universitari d'Arts i Disseny – the first time since 2013. Sponsoring puts your company alongside a trusted, community-driven event with global reach and local impact.

-

Why Sponsor DevOpsDays Barcelona 2026?

+

Why Sponsor?

-
-
-

Brand Recognition And Awareness

+
+
+

Brand Recognition

Your brand will be identified as a contributor to our community with promotional opportunities consistent with your level of sponsorship.

-
-

Reach the Right Audience

+
+

The Right Audience

Your sponsorship positions your brand in front of a focused, high-quality audience of engineers and technology leaders who value authentic learning, collaboration, and community.

-
+

Recruiting

DevOpsDays Barcelona provides access to a concentrated talent pool across multiple technology disciplines and levels of experience.

-
-

Audience & Attendee Demographics

-

DevOpsDays Barcelona will host over 220 attendees, including:

+

Who You'll Meet

+ +
+
+ 220+ + Conference attendees on Saturday +
+
+ 75+ + Workshop attendees on Friday +
+
+ +
+

Who Comes to DevOpsDays Barcelona

  • Developers and Engineers from across the DevOps landscape
  • Tech Leaders and Managers interested in DevOps transformations
    • @@ -145,30 +51,11 @@ Description = "Sponsor devopsdays Barcelona 2026"
- - - diff --git a/content/events/2026-barcelona/welcome.md b/content/events/2026-barcelona/welcome.md index 2f899a31df7..5c8001d14a2 100644 --- a/content/events/2026-barcelona/welcome.md +++ b/content/events/2026-barcelona/welcome.md @@ -4,319 +4,7 @@ Type = "welcome" aliases = ["/events/2026-barcelona/"] Description = "DevOpsDays Barcelona 2026" +++ - +
diff --git a/static/events/2026-barcelona/main.css b/static/events/2026-barcelona/main.css new file mode 100644 index 00000000000..1be9af91803 --- /dev/null +++ b/static/events/2026-barcelona/main.css @@ -0,0 +1,433 @@ +/* Palette sampled from the DevOpsDays Barcelona logo: + navy #111224 · cyan #00BAEB · amber #F9CD34 · crimson #F11647 · cream #FFFCF0 */ + +/* Masthead: navy instead of the theme default blue-to-grey, so white text + stays legible all the way down to the venue address. */ +/* Full-bleed masthead. It is itself the .col-md-12, so Bootstrap's + flex: 0 0 100% / max-width: 100% has to be overridden or the width is + clamped to the container. + + The blue is a lighter, logo-derived teal rather than near-black navy, but + it still has to carry white text: it runs from #12789A at the top (5.1:1 + against white) to #0A5771 at the bottom (7.8:1), deepening as it goes so + the small venue and date text sits on the strongest contrast. + + --bcn-inset aligns the masthead text with the body copy below it. That + copy sits in .bcn-wrap, a 1000px column centred in the viewport, so the + inset is the distance from the screen edge to that column: 50vw - 500px. + Below roughly 1030px the column is no longer 1000px wide and hugs the + container padding instead, which is what the 15px floor picks up. */ +.welcome-page-masthead { + --bcn-inset: max(15px, calc(50vw - 500px)); + flex: 0 0 100vw; + width: 100vw; + max-width: none; + margin-top: 0; + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); + padding-left: var(--bcn-inset); + padding-right: var(--bcn-inset); + border-bottom: 4px solid #F9CD34; + font-size: +1em; + background: #12789A; + background: linear-gradient(#12789A, #0A5771); +} + +/* 100vw does not account for the scrollbar; stop the overhang from creating + a horizontal scroll. Safe here - the theme has no sticky or fixed + positioning for this to break. */ +body { + overflow-x: hidden; +} +.welcome-page-masthead, +.welcome-page-masthead a { + color: #fff; +} +.welcome-page-date { + font-weight: 700; +} +/* Bigger title, now that the masthead carries only the name and the dates. + text-transform: none undoes the theme's generic h1 capitalize rule, which + was rendering the wordmark as "Devopsdays". Lowercase is how devopsdays + sets its own name, here and in the site nav and footer. */ +.welcome-page-masthead h1.welcome-page { + font-size: clamp(2.6rem, 5vw, 3.8rem); + line-height: 1.1; + margin-bottom: 0.4rem; + text-transform: none; +} + +/* Drop the venue and the address from the masthead - both still appear in + the Location row below. The fields stay in main.yml because the location + page's map, the Location row and the schema.org event metadata all read + them, so this has to be done here rather than by blanking the config. + The two
that follow them go too, or they leave the gap behind. */ +.welcome-page-masthead-venue, +.welcome-page-masthead-venue + br, +.welcome-page-masthead-venue + br + span, +.welcome-page-masthead-venue + br + span + br { + display: none; +} +.e-summary { + font-size: +1em; + font-weight: 700; +} + +/* Hide the "share this page" row. Its email icon shares the page by mail, + which reads as a second Contact button, and its LinkedIn icon posts to the + visitor's own feed rather than linking to ours. Both jobs are done more + clearly by the Contact button and the Follow badge below. + Note: social_shares: [] would not work here - an empty list is falsy in + Hugo, so footer_scripts.html falls back to showing all four buttons. */ +#share { + display: none; +} + +/* Masthead buttons: outlined rather than filled, so they sit quietly on the + navy instead of competing with it. */ +a.event-cta-button { + background-color: transparent; + border: 1px solid rgba(255, 255, 255, 0.65); + color: #fff; +} +a:hover.event-cta-button { + background-color: rgba(255, 255, 255, 0.15); + color: #fff; +} + +.content-text { + width: 100%; + margin: 0 auto; +} + +div.sponsor-row img.img-fluid { + max-height: 70px; +} + +/* The theme sets html { font-size: 14px }, so a bare rem here is 14px and + body copy renders small and light. Lift the whole column to ~16px with a + roomier line height. */ +.bcn-wrap { + max-width: 1000px; + margin: 0 auto; + font-size: 1.15rem; + line-height: 1.65; +} + +/* Follow line, sits directly under the masthead */ +.bcn-follow { + display: flex; + align-items: center; + gap: 0.6rem; + margin: 1.25rem 0 1.5rem; + font-weight: 600; + color: #111224; +} +.bcn-follow a.social-li { + font-size: 1.6rem; + color: #111224; + text-decoration: none; +} +.bcn-follow a.social-li:hover { + color: #00BAEB; +} + +/* Dates / Location / Contact */ +.bcn-facts { + border-left: 4px solid #00BAEB; + padding-left: 1.25rem; + margin-bottom: 2rem; +} +.bcn-facts .row { + margin-bottom: 0.35rem; +} + +/* Top section: the logo sits beside everything from the LinkedIn line down + to the end of the intro copy, centred against that whole block rather + than against the first paragraph. Stacks on mobile. */ +.bcn-top { + display: flex; + flex-wrap: wrap; + gap: 2rem; + align-items: center; + margin: 1.5rem 0 2.5rem; +} +.bcn-top-main { + flex: 1 1 340px; + min-width: 0; +} +.bcn-top-logo { + flex: 0 1 260px; + text-align: center; + margin: 0 auto; +} +.bcn-top-logo img { + max-width: 100%; + height: auto; +} +.bcn-top-main h2 { + margin-top: 0; +} + +/* "What's in Store?" cards. Deliberately plain - cream fill, one hairline + border, navy titles. They describe the event rather than asking for + anything, and the logo colours are spent on the action strip above. */ +.bcn-card-grid { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin: 1.5rem 0 2.5rem; +} +.bcn-card { + flex: 1 1 220px; + border: 1px solid #e6e6ea; + border-radius: 6px; + padding: 1.25rem 1.5rem; + background: #FFFCF0; + color: #1a1a1a; +} +.bcn-card h3 { + margin-top: 0; + margin-bottom: 0.75rem; + font-size: 1.35rem; + font-weight: 700; + color: #111224; +} +.bcn-card p { + margin-bottom: 0; + font-size: 1.1rem; + line-height: 1.6; +} + +/* The three things that are live now: program, speakers and tickets. A + strip of linked cards rather than three more lines in the facts box - + these are what we want a visitor to act on, not more small print. The + whole card is the link; the arrow is decoration. This is the only place + on the page carrying the three logo colours - the "What's in Store?" + cards below stay plain, so the two grids do not read as the same kind of + thing and the eye lands here first. */ +.bcn-actions { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin: 1.5rem 0 2.5rem; +} +.bcn-action { + flex: 1 1 240px; + display: block; + border: 1px solid #e6e6ea; + border-left: 4px solid #00BAEB; + border-radius: 6px; + padding: 1.1rem 1.35rem; + background: #fff; + color: #1a1a1a !important; + text-decoration: none !important; + transition: box-shadow 0.15s ease, transform 0.15s ease; +} +.bcn-action:hover { + box-shadow: 0 4px 14px rgba(17, 18, 36, 0.12); + transform: translateY(-2px); +} +/* The theme clears the outline on :focus, so a keyboard user has no way of + telling which card or button they are on. Put one back, in the darker end + of the masthead teal so it reads against both the white cards and the + cream call to action. */ +.bcn-action:focus-visible, +.bcn-btn:focus-visible { + outline: 3px solid #0A5771; + outline-offset: 3px; +} +@media (prefers-reduced-motion: reduce) { + .bcn-action { + transition: none; + } + .bcn-action:hover { + transform: none; + } +} +.bcn-action-title { + display: block; + font-size: 1.35rem; + font-weight: 700; + margin-bottom: 0.3rem; + color: #076A85; +} +.bcn-action p { + margin: 0; + font-size: 1.05rem; + line-height: 1.55; +} +.bcn-action-go { + display: block; + margin-top: 0.6rem; + font-weight: 600; + color: #076A85; +} +.bcn-action.amber { border-left-color: #F9CD34; } +.bcn-action.amber .bcn-action-title, +.bcn-action.amber .bcn-action-go { color: #A34E12; } +.bcn-action.crimson { border-left-color: #F11647; } +.bcn-action.crimson .bcn-action-title, +.bcn-action.crimson .bcn-action-go { color: #C00E38; } + +/* Bottom call to action */ +.bcn-cta { + background: #FFFCF0; + border: 1px solid #e6e6ea; + border-top: 4px solid #F11647; + border-radius: 8px; + padding: 1.75rem 2rem; + margin: 2rem 0; + text-align: center; + color: #1a1a1a; +} +.bcn-btn { + display: inline-block; + background: #D8123F; + color: #fff !important; + padding: 0.65rem 1.75rem; + border-radius: 5px; + font-weight: 600; + text-decoration: none; + margin: 0.4rem; +} +.bcn-btn:hover { + background: #B00E34; + color: #fff !important; +} +.bcn-btn.outline { + background: transparent; + border: 2px solid #111224; + color: #111224 !important; +} +.bcn-btn.outline:hover { + background: #111224; + color: #fff !important; +} + +/* --------------------------------------------------------------------------- + Shared across the event's pages + Everything above is the welcome page. Everything below is used by welcome, + sponsor, conduct and location alike, so that the four read as one site + rather than four one-off stylesheets. + --------------------------------------------------------------------------- */ + +/* Every heading on the page gets the same air under it. The card grids carry + their own 1.5rem top margin, which collapses against this to the same gap, + so a heading followed by prose and a heading followed by cards match. */ +.bcn-wrap h2 { + margin-bottom: 1.5rem; +} + +/* On every page but welcome the theme prints its own

above our column, + full container width. Pull it onto the same 1000px measure so the title + lines up with the text underneath it instead of starting further left. */ +.content-text > h1:not(.welcome-page) { + max-width: 1000px; + margin-left: auto; + margin-right: auto; +} + +/* The opening statement of a page, on the same cyan rule as the facts block + on the welcome page. */ +.bcn-lead { + border-left: 4px solid #00BAEB; + padding-left: 1.25rem; + margin: 0 0 2rem; + font-size: 1.2rem; + line-height: 1.6; + color: #1a1a1a; +} + +/* A full-width relative of .bcn-card, for a block of prose or a list that + needs to sit apart from the run of the page. */ +.bcn-panel { + border: 1px solid #e6e6ea; + border-radius: 6px; + padding: 1.25rem 1.5rem; + margin: 1.5rem 0; + background: #FFFCF0; + color: #1a1a1a; +} +.bcn-panel > :first-child { + margin-top: 0; +} +.bcn-panel > :last-child { + margin-bottom: 0; +} +.bcn-panel h3 { + margin-top: 0; + margin-bottom: 0.75rem; + font-size: 1.35rem; + font-weight: 700; + color: #111224; +} +.bcn-panel ul { + margin-bottom: 0; + padding-left: 1.2rem; +} + +/* The one panel that has to be found in a hurry: how to report a code of + conduct problem. White rather than cream so it lifts off the page, and the + only crimson on it, because it is the only alarm on the site. */ +.bcn-panel.alert { + background: #fff; + border-left: 4px solid #F11647; +} +.bcn-panel.alert h3 { + color: #C00E38; +} + +/* Attendance figures on the sponsor page. Two numbers is not a chart, so + these are stat tiles - and the number wears ink rather than sitting on a + filled block, so it reads as a fact rather than as a badge. */ +.bcn-stats { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin: 1.5rem 0 2.5rem; +} +.bcn-stat { + /* Do not grow. Two tiles stretched across a 1000px column leave most of + each one empty; sized to their content they read as a pair of facts. */ + flex: 0 1 260px; + border: 1px solid #e6e6ea; + border-left: 4px solid #00BAEB; + border-radius: 6px; + padding: 1.1rem 1.35rem; + background: #fff; +} +.bcn-stat-number { + display: block; + font-size: 2.4rem; + line-height: 1.1; + font-weight: 700; + color: #111224; +} +.bcn-stat-label { + display: block; + margin-top: 0.35rem; + font-size: 1rem; + line-height: 1.4; + color: #55555f; +} + +/* The embedded map is a fixed-size iframe from the shortcode. Let it fill the + column instead. */ +.bcn-map { + margin: 1.5rem 0 2rem; +} +.bcn-map iframe { + width: 100%; + max-width: 100%; + height: 380px; + border: 1px solid #e6e6ea; + border-radius: 6px; +} + +/* Section break, in place of the markdown --- the code of conduct used. */ +.bcn-rule { + border: 0; + border-top: 1px solid #e6e6ea; + margin: 2.5rem 0; +} From c34c4cd1b126a6aae4ff956dd97dfca97ada25bb Mon Sep 17 00:00:00 2001 From: edwardep Date: Tue, 1 Sep 2026 21:43:25 +0200 Subject: [PATCH 12/13] [Barcelona-2026] Rebuild the contact page on the shared design The page was an email line, a bold "Our local team" and the theme's organizer cards. It now opens with who we are and how to reach us: the LinkedIn follow line from the welcome page, then the address on its own in a call-out, since that is what the page is for. The organizer cards come from the theme's shortcode, so the markup is not ours - only the surface it lands on: - The portrait moves to the top of the card. The shortcode prints the name first, so a two-line name pushed that card's photo below its neighbours'; the card is a flex column, so order does this without touching the markup. - Portraits are cropped square. The theme pins them to height: 300px, which showed a different amount of each person depending on their photo. - "Organizer" was an h4 and outshouted the name it belongs to. It is a label now, and the name is the loudest thing on the card. - The employer wears Bootstrap's .text-muted, an !important utility at #6c757d that is too light to read at that size. - The social icons drop from fa-2x to the text's weight and take the page's ink, with the logo cyan on hover and the same focus ring as everything else. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_019QnMBxaFA8mQPFP1QrEkyo --- content/events/2026-barcelona/contact.md | 21 ++++- static/events/2026-barcelona/main.css | 102 +++++++++++++++++++++++ 2 files changed, 121 insertions(+), 2 deletions(-) diff --git a/content/events/2026-barcelona/contact.md b/content/events/2026-barcelona/contact.md index 628969f6003..524c1c182dc 100644 --- a/content/events/2026-barcelona/contact.md +++ b/content/events/2026-barcelona/contact.md @@ -4,11 +4,28 @@ Type = "event" Description = "Contact information for DevOpsDays Barcelona 2026" +++ -If you'd like to contact us by email: {{< email_organizers >}} + -**Our local team** +
+ +

DevOpsDays Barcelona is put together by a volunteer team from the local community. Whether you want to sponsor the conference, help out on the day, or just ask a question, we would like to hear from you.

+ +
+ {{< event_social_linkedin >}} + Follow DevOpsDays Barcelona on LinkedIn +
+ +
+

Email the organizers
One of the team will get back to you.

+

{{< email_organizers >}}

+
+ +

Our Local Team

{{< list_organizers >}} +
{{< list_core >}} + +
diff --git a/static/events/2026-barcelona/main.css b/static/events/2026-barcelona/main.css index 1be9af91803..9210d4a86e3 100644 --- a/static/events/2026-barcelona/main.css +++ b/static/events/2026-barcelona/main.css @@ -431,3 +431,105 @@ div.sponsor-row img.img-fluid { border-top: 1px solid #e6e6ea; margin: 2.5rem 0; } + +/* The organizer cards come from the theme's list_organizers shortcode, so the + markup is not ours to change - only the surface it lands on. Bootstrap's + card chrome comes off and the pieces are re-ranked: the person's name is the + loudest thing on the card, not the word "Organizer". */ +.bcn-wrap .organizer-card { + margin-bottom: 1.5rem; +} +.bcn-wrap .organizer-card .card { + display: flex; + flex-direction: column; + height: 100%; + border: 1px solid #e6e6ea; + border-radius: 6px; + overflow: hidden; + background: #fff; +} +/* order: the shortcode prints the name before the portrait, so a two-line + name pushed that card's photo below its neighbours'. The card is a flex + column, so the photo is pulled to the top without touching the markup and + the photos line up across a row whatever the names do. */ +.bcn-wrap .organizer-card .card-header { + order: 2; + padding: 1rem 1rem 0.65rem; + background: transparent; + border-bottom: 0; +} +.bcn-wrap .organizer-card .card-header h3 { + margin: 0; + font-size: 1.15rem; + font-weight: 700; + line-height: 1.3; + color: #111224; +} +/* The role is set as an h4, which had it outshouting the name it belongs to. + It is a label, so it is sized and spaced like one. */ +.bcn-wrap .organizer-card .card-header h4 { + margin: 0.3rem 0 0; + font-size: 0.8rem; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: #55555f; +} +/* Portraits arrive at whatever aspect ratio each person sent. Crop them all to + the same square so the grid does not stagger. */ +.bcn-wrap .organizer-card .organizer-image { + order: 1; + width: 100%; + /* The theme pins img.organizer-image to height: 300px, which both ignores + the aspect ratio below and leaves a different amount of each person + showing. Hand the height back to the ratio. */ + height: auto; + aspect-ratio: 1 / 1; + object-fit: cover; +} +.bcn-wrap .organizer-card .card-block { + order: 3; + padding: 1rem; +} +/* Bootstrap's .text-muted is too light to read at this size. */ +.bcn-wrap .organizer-card .card-subtitle { + font-size: 0.9rem; + font-weight: 600; + /* The shortcode tags the employer with Bootstrap's .text-muted, which is + an !important utility - #6c757d is too light to read at this size. */ + color: #55555f !important; +} +.bcn-wrap .organizer-card .card-text { + font-size: 0.95rem; + line-height: 1.55; + color: #1a1a1a; +} +/* fa-2x put the social icons above the bio in the visual order. Bring them + down to the text's weight and give them the page's ink. */ +.bcn-wrap .organizer-card .card-block .fa-2x { + font-size: 1.4rem; +} +.bcn-wrap .organizer-card .card-block a { + color: #111224; +} +.bcn-wrap .organizer-card .card-block a:hover { + color: #00BAEB; +} +.bcn-wrap .organizer-card .card-block a:focus-visible { + outline: 3px solid #0A5771; + outline-offset: 3px; +} + +/* The address is the point of the contact page, so it is the biggest thing in + the block that carries it. */ +.bcn-email { + margin: 0.4rem 0 0; + font-size: 1.35rem; + font-weight: 700; +} +.bcn-email a { + color: #C00E38; +} +.bcn-email a:hover { + color: #8F0A2A; +} From 1de87975972c8a00ce99a596a75e800a060ed24d Mon Sep 17 00:00:00 2001 From: edwardep Date: Tue, 1 Sep 2026 21:51:32 +0200 Subject: [PATCH 13/13] [Barcelona-2026] Three organizers per row, not four The shortcode asks for four across on a wide screen (col-xl-3). That is fine at the theme's full container width, but inside the 1000px column the rest of the site is set to it leaves about 220px a card, and a bio at that width wraps every third or fourth word. Overriding the xl column to a third gives each card about 300px, which fits a name on one line and a readable bio, without widening the measure. Below 1200px the shortcode's own col-lg-4 and col-md-6 already step down to three and two, so only the xl case needs saying. The bio goes back up to 1rem now that there is room for it. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_019QnMBxaFA8mQPFP1QrEkyo --- static/events/2026-barcelona/main.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/static/events/2026-barcelona/main.css b/static/events/2026-barcelona/main.css index 9210d4a86e3..db1905ab24c 100644 --- a/static/events/2026-barcelona/main.css +++ b/static/events/2026-barcelona/main.css @@ -439,6 +439,18 @@ div.sponsor-row img.img-fluid { .bcn-wrap .organizer-card { margin-bottom: 1.5rem; } +/* The shortcode asks for four across on a wide screen (col-xl-3). Inside our + 1000px column that is about 220px a card, which is too narrow for a bio - + every third or fourth word wraps. Three across gives each card about 300px + without widening the measure the rest of the site is set to. Below 1200px + the shortcode's own col-lg-4 and col-md-6 already step down to three and + two, so only the xl case needs saying. */ +@media (min-width: 1200px) { + .bcn-wrap .organizer-card { + flex: 0 0 33.3333%; + max-width: 33.3333%; + } +} .bcn-wrap .organizer-card .card { display: flex; flex-direction: column; @@ -500,7 +512,7 @@ div.sponsor-row img.img-fluid { color: #55555f !important; } .bcn-wrap .organizer-card .card-text { - font-size: 0.95rem; + font-size: 1rem; line-height: 1.55; color: #1a1a1a; }