[Barcelona-2026] Modernize welcome page and trim social share buttons - #16099
Open
edwardep wants to merge 13 commits into
Open
[Barcelona-2026] Modernize welcome page and trim social share buttons#16099edwardep wants to merge 13 commits into
edwardep wants to merge 13 commits into
Conversation
✅ Deploy Preview for devopsdays-web ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
edwardep
marked this pull request as draft
August 30, 2026 15:45
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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
…s 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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
PR devopsdays#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 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019QnMBxaFA8mQPFP1QrEkyo
edwardep
force-pushed
the
bcn-3-fix-social-links
branch
from
September 1, 2026 17:52
67861d2 to
62e698a
Compare
…tion The theme sets outline: none on :focus, so tabbing through the new cards and the call-to-action buttons moved an invisible cursor. Both now take a 3px #0A5771 :focus-visible ring, and the card's hover lift is dropped under prefers-reduced-motion. The same destination was going by three names: a "Tickets" card linking to "Register now", a "Get your ticket" button, and a Registration item in the nav. The nav and the page own the name, so the card is Registration and every control that goes there says Register. Same for the program: the card no longer offers a "schedule" that no other part of the site mentions. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019QnMBxaFA8mQPFP1QrEkyo
Both card rows were running the same cyan / amber / crimson sequence, which made the page read as one long rainbow and gave the program, speakers and registration cards no more weight than the three describing the event. The "What's in Store?" cards lose their accent bars and coloured titles and go back to cream with a hairline border and navy titles. They describe the conference rather than asking for anything, so they can be quiet. The action strip keeps the three colours and is now the only place they appear. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019QnMBxaFA8mQPFP1QrEkyo
The theme leaves 7px under an h2. "The Program Is Live" and "What's in Store?" never showed it, because the card grids under them carry a 1.5rem top margin that wins the collapse. "Hola, Barcelona! We're Back!" is followed by a paragraph with no top margin, so it was the one 32px heading on the page sitting 7px off its own text. It now gets the same 1.5rem as the other two. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019QnMBxaFA8mQPFP1QrEkyo
…elcome page's design The welcome page's 300 lines of CSS lived in its own <style> block, which is fine for one page and unworkable for four. It moves to static/events/2026-barcelona/main.css and every page links it, the same way Caceres 2023 and 2024 do. Nothing about the welcome page changes. The stylesheet grows the pieces the other three pages need: .bcn-lead for an opening statement, .bcn-panel for a block that sits apart from the prose, .bcn-stat for a figure, .bcn-map for the embed, and a rule pulling the theme's <h1> onto the same 1000px measure as the text under it. Sponsor drops its own purple palette - it was the only page not using the logo colours - and reuses the cards, the panel and the call to action. Its four filled stat blocks were mixing two attendance figures with the date and the venue; the figures stay as two tiles that wear ink rather than a fill, and the date and venue move into the opening line where they belong. Conduct and location were unstyled markdown. They now sit in the same 1000px column at the same body size, with the venue details as a facts block and the map filling the column. The code of conduct text is unchanged except that the reporting paragraphs move into a panel, the only crimson on the page, with the organizers' address added - it is the thing someone needs to find fast. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019QnMBxaFA8mQPFP1QrEkyo
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 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019QnMBxaFA8mQPFP1QrEkyo
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 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019QnMBxaFA8mQPFP1QrEkyo
edwardep
marked this pull request as ready for review
September 1, 2026 21:29
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Reworks the five DevOpsDays Barcelona 2026 event pages onto one visual design. All changes are scoped to this event: no theme files are touched, and the only new file is the event's own stylesheet. Rebased on
mainafter #16101, so the program, speakers and registration pages that PR added are untouched here.One stylesheet instead of five
The welcome page had grown ~300 lines of inline
<style>. That moves tostatic/events/2026-barcelona/main.cssand every page links it, the same pattern 2023-caceres and 2024-caceres already use. The pages then share one set of components rather than four copies drifting apart.Welcome
social_shares: ["email", "linkedin"]— the event has no Twitter or Facebook presence, so those buttons pointed nowhere. Added anevent_social_linkedinbadge to the body: the key was configured but never rendered, so there was no actual link to the event's LinkedIn page.<table>becomes a flex layout that stacks on narrow screens; the "What's in Store?" list becomes cards.outline: noneon:focus, so tabbing through the new cards and buttons moved an invisible cursor — both take a:focus-visiblering, and the card hover lift is dropped underprefers-reduced-motion.Sponsor
Dropped its own purple palette — it was the only page not using the logo colours — and reused the shared cards, panel and call to action. Its four filled stat blocks mixed two attendance figures with the date and the venue; the figures stay as two tiles, and the date and venue move into the opening line where a reader looks for them. Copy is otherwise unchanged.
Conduct
Was unstyled markdown. The code of conduct text is unchanged, with three changes: the reporting paragraphs are wrapped in a call-out where they already stood (the only crimson on the page, since "how do I report this" is what someone needs to find fast), the organizers' address is added to it, and the redundant "Conference Code of Conduct"
<h2>is dropped because the theme already prints the page title as an<h1>. Nothing is reworded and no paragraph is reordered: a word-level diff of the prose is 373 words to 381, the difference being that heading removed, the call-out's "If You Need Help" heading, and the address line.Location
Was unstyled markdown. Venue, address, neighbourhood and dates now lead as a facts block, followed by the existing prose, with the map filling the column instead of sitting in a 450×250 box.
Contact
The organizer cards come from the theme's
list_organizersshortcode, so the markup is untouched — only the surface it lands on:orderfixes it without touching the shortcode.height: 300px, which showed a different amount of each person depending on their photo.≥1200px.col-xl-3inside the site's 1000px measure left ~220px a card, too narrow for a bio.<h4>outshouting the name it belongs to; it is a label now. The employer wears Bootstrap's.text-muted(#6c757d), too light to read at that size. The social icons come down fromfa-2x.🤖 Generated with Claude Code