Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add UCSF Acute Care Innovation Center Logo. #378

Merged
merged 2 commits into from
Oct 20, 2023

Conversation

richardxia
Copy link
Member

This logo is being added to both the Partners and Sponsors block as well as to the Impact Page, under the Hosted Partners section.

Since we wanted to add a hyperlink to their website, this also includes some code changes to those components to allow for optional hyperlinks.

Partners and Sponsors block on the home page:

Screen Shot 2023-10-19 at 6 45 11 PM

Impact Page:

Screen Shot 2023-10-19 at 6 45 01 PM

BTW, @schroerbrian, since the raw image of their logo that we got was huge (like over 5000 px wide), I ended up resizing them to something a lot smaller, to avoid forcing visitors to download huge images that are ultimately rendered at much smaller sizes. This is actually something that Gatsby's supposed to handle out of the box, but we're kind of using Gatsby wrong, so it isn't easy without doing some larger refactoring.

I added two different resized versions, since the Partners and Sponsors block has much smaller images than the Impact page, since I targeted approximately a 2x resolution of the rendered image (for Retina displays). Feel free to grab them for the SF Service Guide site if you want, src/pages/impact/ucsf-acute-care-innovation-center-logo.png is the larger one that's probably better for the SF Service Guide pages.

This logo is being added to both the Partners and Sponsors block as well
as to the Impact Page, under the Hosted Partners section.

Since we wanted to add a hyperlink to their website, this also includes
some code changes to those components to allow for optional hyperlinks.
@@ -111,6 +111,7 @@ iframe,
img,
svg,
video {
max-width: 100%;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I forgot that I should probably briefly explain this. In #370, I got rid of the legacy style sheets, but had copy over a few of the reset styles manually over to our new site's stylesheet. This one was actually originally in the old reset styles, but I had missed copying it over because it didn't look like any of the images at the time needed it. Since I'm trying to add images at 2x resolution so that they look nicer on high density displays, like Apple Retina displays, we really need this so that images don't grow wider than their parent element.

Copy link

@schroerbrian schroerbrian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks for resizing those images!

@richardxia richardxia enabled auto-merge (squash) October 20, 2023 19:42
@richardxia richardxia merged commit d83f474 into main Oct 20, 2023
2 checks passed
@richardxia richardxia deleted the add-ucsf-accute-care-innovation-center-logo branch October 20, 2023 19:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants