Add banner overlay for landing page

[jonfroehlich]

Had the monthly NSF Crowd+AI meeting with all PIs. We are working on our accessiblecommunities.org website. As such, I'd love to build awareness for this (and other things that might arise). I'd like to consider adding a banner overlay like the "GitHub Fork Me"

Screenshot from this codepen

Here's code to do so thanks to ChatGPT4:

Sure, I can help with that. Here's a simple example of how you can create an angled banner on the right side of a website using HTML and CSS.

Sure, here's the updated HTML and CSS with the class name changed to ps-news-ribbon:

HTML:

<a href="#" class="ps-news-ribbon" title="News on PS">News on PS</a>

CSS:

.ps-news-ribbon {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    background-color: #ff7300;
    color: #fff;
    text-align: center;
    line-height: 50px;
    letter-spacing: 1px;
    transform: rotate(45deg);
    transform-origin: top right;
    text-decoration: none;
    font-family: Arial, sans-serif;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
.ps-news-ribbon:hover {
    background-color: #ff3300;
}

You can adjust the properties as needed to fit your website's design. Remember to replace the # in the href attribute with the URL of your news page.

[misaugstad]

So just the landing page? Or would it be over the navbar everywhere?

[jonfroehlich]

Just landing page Sent from phone

…

On Fri, Nov 17, 2023 at 12:43 PM Michael Saugstad ***@***.***> wrote: So just the landing page? Or would it be over the navbar everywhere? — Reply to this email directly, view it on GitHub <#3425 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAML55I6RXV3BLGK5U7ZC73YE7D7XAVCNFSM6AAAAAA7OTRDNCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJXGA4DCNJSGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[arohan-agate]

just to clarify, should the banner link to accessiblecommunities.org?

[misaugstad]

Yes please! And can you have the URL in the application.conf file and read from that? It will make it easy to switch out the link in the future.

And actually you should make it so that if the string is empty for that config, it doesn't show the banner at all! And we should start with it not showing the banner because it looks like the website isn't ready yet... But you can test with that URL for now!