search

marinebon / www_marinebon2

MBON Website 2021 Rebuild in progress
https://marinebon2.netlify.app/
MIT License
1 stars 1 forks source link

homepage design improvements #32

Open 7yl4r opened 3 years ago

7yl4r commented 3 years ago
7yl4r commented 3 years ago

This above-top-nav addition will mean that we don't need to worry about making the top nav taller. #20

7yl4r commented 3 years ago

The javascript that controls the hiding above-navbar seems complicated. I found a file named auto-hiding-navbar.js which sounds promising but it operates on elements with the class auto-hiding-navbar only and that class is not in the page html.

If this is handled by the ark framework then it would be in this big js file.

What I see happening in the html inspector is a small change in the div:

<!-- before scrolling -->
<header class="ark-header ark-header-mobile-fixed header-no-pills header header-sticky navbar-fixed-top header-has-topbar fg-text-dark ffb-header-design">

<!-- after scrolling -->
<header class="ark-header ark-header-mobile-fixed header-no-pills header header-sticky navbar-fixed-top header-has-topbar fg-text-dark ffb-header-design header-shrink">

so basically header-shrink gets added to the list of classes and this triggers a CSS transition that collapses the bar. That css appears to live in the ark style.css (big file) here.

torieketcham commented 3 years ago

I've created a logo file for the white background area above the nav - it's attached. I can work on the smaller logo within the nav as well. I'll probably simplify it so that it just has the MBON lettering and nothing else.

Is there anything you wanted me to do re: accessing the ark files?

mbon-logo

7yl4r commented 3 years ago

I think I have all the ark files I would need but it is a bit of work to get this done. The existing nav at the top is positioned dynamically too - so I think we need to rewrite the js+css that does that too.

7yl4r commented 2 years ago

I have made the easy changes to get things looking more like ioos.noaa.gov.

I think adding the above-nav MBON logo is not worth the amount of work it will take, but I can revisit if requested.

Do we still want to simplify the top-left MBON logo? I think the "Marine Biodiversity Observation Network" text is too small.

The GEOBON logo could use some cleanup too. It looks like it is being clipped and some antialiasing on the white edges would help.

The background image I took from the IOOS page is too small vertically for our page. Related: I think the "intro" section is too big - maybe we move that image down into another section? We also need to think about where that clickable thematic/regional image will go (#34). ioos.noaa.gov has text only in the intro so maybe we should do the same.

torieketcham commented 2 years ago

I can work on simplifying the MBON logo, and I'll also try to find an image that fits better for the background. I agree that the intro image is too large. I'll remove it for now and place it somewhere else.

I think we were talking about putting the GEOBON logo in the footer, right? It definitely needs to be cleaned up either way, which I can do.

On Thu, Oct 7, 2021 at 1:13 PM Tylar @.***> wrote:

I have made the easy changes to get things looking more like ioos.noaa.gov .

I think adding the above-nav MBON logo is not worth the amount of work it will take, but I can revisit if requested.

Do we still want to simplify the top-left MBON logo? I think the "Marine Biodiversity Observation Network" text is too small.

The GEOBON logo could use some cleanup too. It looks like it is being clipped and some antialiasing on the white edges would help.

The background image I took from the IOOS page is too small vertically for our page. Related: I think the "intro" section is too big - maybe we move that image down into another section? We also need to think about where that clickable thematic/regional image will go (#34 https://github.com/marinebon/www_marinebon2/issues/34). ioos.noaa.gov has text only in the intro so maybe we should do the same.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/marinebon/www_marinebon2/issues/32#issuecomment-937992892, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKTSOFVBIIBXJKTRPDRF6M3UFXIL5ANCNFSM5CBYNMAQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

7yl4r commented 2 years ago

RE the background image: I just stumbled into a bg_video option for widgets. It may be that we could use a video instead of an image. That might look even nicer. Just a thought.

torieketcham commented 2 years ago

Yes, I think that's a great idea.

On Thu, Oct 14, 2021 at 11:23 AM Tylar @.***> wrote:

RE the background image: I just stumbled into a bg_video option for widgets. It may be that we could use a video instead of an image. That might look even nicer. Just a thought.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/marinebon/www_marinebon2/issues/32#issuecomment-943464954, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKTSOFR6SZFEYFQJHFRBU43UG3YYRANCNFSM5CBYNMAQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.