New design with better mobile styling #32
Draft
Conversation
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
Add BigText.astro to handle the sections with alternating large text.
Fix color style in TagOrnament.astro. Add paragraph spacing.
Use fragments to pass in the BigText contents. Add multiple weights of Barlow and Barlow Condensed.
Remove style block from BaseLayout.astro.
Tweak vertical spacing.
Use BigText for the news and code summary headers.
Use NavLink again for header and footer links. Convert HeaderLogo to use Tailwind. Update anchor styles.
Add 1u, 2u, etc. and 1col, 2col, etc. based on the 40px unit as a theme spacing. Add mainClass prop to BaseLayout.astro to style the container.
Use large digits for the getting started steps. Add BigHeading.astro component to show large uppercase text. Move the join the conversation item first. Tweak GitHubEventCard.tsx to use stone colors.
Rework project page. Add class props to BigHeading and OptionalAnchor. Add utility functions for trim-* styles.
Center the steps on Getting Started. Reduce width of About page. Add Button component. Tweak image sizing in projects. Tweak styling of GitHub events cards. Use routed.svg for the Routed project.
Tweak NewsSummary.astro and CodeSummary.astro formatting.
Slide in different kinds of volunteers, one at a time.
Fix TeamMember.astro to use new props. Update deps. Remove tailwind.config.js since we're using v4.
Remove "formerly C4SF" from header and add a note in the footer. Tweak Donate button.
BigText: stack on mobile; md+ row with anchor; responsive heading/body sizes; style indentation cleanup. BlogListItem: stack on mobile, responsive thumbnail width (w-full md:w-4col), and responsive title sizes. ProjectSummaryItem: switch thumbnails to 2:1 aspect on mobile with non-distorting fit, revert to square on md+; wrap DefaultThumbnail in aspect container; update sizes attr; stack layout and responsive title. Card: mobile-first refactor to flex-col md:flex-row; remove embedded @media block; responsive typography and alignment. NewsSummaryItem: scale date/title for mobile readability. FooterNav: stack columns on mobile using responsive grid; increase tap targets spacing. HeaderNav: ensure mobile menu overlays content, remove top border line; Donate button not full width. Global: increase base html font-size to 14px (smallest screens). Layout: maintain 920px max-width with responsive horizontal padding.
🚀 Preview URLhttps://pr-32.sfcivictech-pr-builds.pages.dev Last updated: 2025-08-31T01:16:40Z |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
No description provided.