Here is the HTML source... if you could debug the background rendering issue right away that would be awesome and in the meanwhile I'll work on getting you the finalized graphics to include.

This is the new powered by Apache logo (it goes to the right of the two logo spots on the bottom right, theres a fedora powered by logo in its slot right now):

https://www.apache.org/foundation/press/kit/poweredBy/pb-apache.PNG

We'll probably need to scale it down.

Working on the Fedora one.

Not sure if its ok to chime in here (new to contributing). Regrading the background issue. It looks like the page is using floats in the children so adding overflow: auto to the html and body selectors could fix it. I have only been able to test on firefox on 1920x1080 nothing else below 4k.

phenomenon

We need a new default page for apache/httpd and nginx in Fedora 34 to match the new Fedora logo we will be rolling out in F34.

The page is a static HTML page with CSS in the header. It has two images which will ship in the fedora-logos package.

This is what it currently looks like:

I started implementing an updated design for the page, but I ran into an issue I haven't had time to debug - the page looks fine full screen on a ~4k monitor but if you put it in a sized down window / smaller screen the gradient breaks at the bottom and I'm not 100% sure what's going on yet.

How about setting a fixed background to resolve the issue?
Additionally, making that page responsive will be great when viewing from mobile or an convertible laptop in tablet mode.

Here is the HTML source... if you could debug the background rendering issue right away that would be awesome and in the meanwhile I'll work on getting you the finalized graphics to include.

I am working on this and will complete it by tonight, will try to make it more responsive towards other screen sizes as @luya said.

@duffy The default font for fedora is Cantarell 11pt as per this link.
https://www.reddit.com/r/Fedora/comments/k4xwtl/what_are_the_default_fonts_for_fedora/

I have changed a few things in this page to give it a cleaner look:
1. created css file and shifted the styling components to it (can be used as default for further webpages)
2. changed column defaults and introduced the grid boxing in columns
3. Made the columns sizing changeable as per screen sizes - desktop and mobile, can be further improved.
4. updated fonts of the webpage to Monserrat for heading and quicksand for paragraphs
5. Changed the link colors: when visited - light blue, when unvisited- bright green, when hovered: dark blue (i think this can still be improved, but giving the white stroke to the links made them unclear to read.)
6. removed white border from logo graphics
7. fixed the rendering bug with the background gradient when the page is sized down
8. changed the header to include a larger fedora graphic
9. added section padding

Further improvements which can be made:
1. maybe the gradient looks a bit offbeat, can it be switched to a solid color?
2. fonts
3. adding graphics

Updated: I forgot to change the hovered images border, gave them shadow instead.

@somya23 oh ok great! I've just tested this out. Some feedback:

• Cantarell being the default font in the GNOME desktop on Fedora is different than a font being installed by default. Fedora has many fonts installed by default. It's important that the font that we use is installed in Fedora itself rather than using the Google APIs. We don't want these pages phoning home to Google due to privacy and other issues involved, so we need to rely on fonts that are present in Fedora. (We also don't want to pull in any other external resources for similar reasons.)

• I like the colors you picked for the links, they look great!

• I noticed you included Quicksand - that's not a font we use in Fedora media.

• The background fix looks great! I tested it out here and it worked well.

• The CSS should be included in the header - because of how this is packaged, it needs to all be in one index.html file. I'm trying to minimize the number of changes to the fedora-logos package to the fewest possible and I think adding a new file (the style.css) would introduce risk I cant take on right now :(

• I don't see the code for the large Fedora graphic at the top but that's fine, I haven't provided the actual file yet anyway :)

• So the background issue is still there in Firefox on my Fedora 33 system - now at full size and small size. I think fixed background is the right way to do this as @luya mentioned, can you give that a try?

• I'd kill the hover effect on the small logo images placeholders... they should just be flat without any motion or effects!

Does this sound doable?

Yups! I realized that using Google APIs might be risky, I'll research for some other relatable fonts. Should I continue with Montserrat, it looks good too?
I'll try to make a single file and do the other css changes soon too. Thanks for reviewing !
Also, I'll test on firefox and find the fault we are facing with the background, my inner Sherlock is happy to have a challenge to solve, haha. :D

@somya23 I did a little investigation - I would say let's continue with Montserrat (use Montserrat Bold for the headers and Montserrat Regular for the body copy and I'll try to make it available in Fedora. Have it fall back to sans-serif in case that doesn't work out.

@duffy Update:
1. fixed background from repeating - gradient continued in single form even in all screen sizes
2. added CSS elements back to index.html
3. fixed the image hovering to flat
4. continued with Montserrat (use Montserrat Bold for the headers and Montserrat Regular for the body)
5. tested on firefox, opera, and chrome- no breakage of gradient

@somya23 great work! thanks! I will work on getting those gfx to you this afternoon so we can finish this out and get it packaged!!

cc: @carlwgeorge (for Caddy)

Hey @somya - so the logos got complicated, there is weird logic baked into webserver config files that changes to logo, i needed @mattdm 's help to track them down.

here's screenshots of what I have from your work. I made some small adjustments to account for the green of the nginx logo standing out better against the gradient, there was a broken with no open around the vendor logo so i removed that, and i added padding on large monitors because i think the text was hard to read with the line lengths getting stretched so wide.

with the new (not yet packaged) apache logo

with the nginx logo

new HTML

Next steps:
- ~~work trademark statement from apache into webpage footer~~
- ~~optimize new Fedora powered by button and the vendor buttons~~
- ~~file tickets against httpd in different OSes to get the icon changed + added required trademark statement~~

Quick update with trademark statements added:

Optimized new powered by buttons:

apache

fedora (it's designed for a colored background)

We'll need a variant for the Caddy web server too, I think?

@ngompa - @mattdm had tried to get Caddy running to see what it did but it didn't work. To be included on this page any web server needs to symlink /poweredby.png to their logo of choice

Like this? https://src.fedoraproject.org/rpms/caddy/blob/0cffe898031c1f652f12d48b9acfb607cd46c1ea/f/caddy.spec#_171-176

F34 bug
https://bugzilla.redhat.com/show_bug.cgi?id=1934739

RHEL/CentOS Stream bug (not sure if I filed this right, sigh)
https://bugzilla.redhat.com/show_bug.cgi?id=1934741

@duffy hey the logos look amazing, but I guess the dark gradient around them doesn't give them much perspective view. We can try creating simple white or light colored logos to represent apache and nginx maybe. KInd of like this- https://designmodo.com/wp-content/uploads/2015/07/17.jpg

@somya23 that would be ideal! we don't have much control over the logos though, it would require special permission to modify them in that way. :-(

Quick update with trademark statements added:

The trademark section can be revamped by either emcompassing in a white box or at least have a white line separating it from the main content like in this https://designmodo.com/wp-content/uploads/2015/07/17.jpg

@ngompa ah ok let me see if I can find that graphic and test it out

@somya23 that's an interesting idea to separate the trademark lines. can we step back a little bit on that - can you clarify the issue to resolve there? is the trademark text too distracting or close to the main text? is this something additional padding couldn't resolve itself?

@ngompa is this the mark you see on the page when you run it?

@duffy Personally it gave a kind of an incomplete look, like, it is kind of expected to have a trademark in the footer of the website. It looks too small and kind of blends in with the main text. Also, in a smaller screen, the text kind of gets cut off. Adding a white box with padding may prevent this from happening.

@ngompa is this the mark you see on the page when you run it?

Yes, that's the one. @carlwgeorge got that from upstream.

@ngompa - it looks like they have a white variant, which would work better on this page. If I was able to source that is @carlwgeorge able to update it in the pkg? (is he the maint?) https://avatars.githubusercontent.com/u/12955528?s=200&v=4

@duffy He is, yes.

@somya23 how about this

@ngompa @carlwgeorge here's the updated logo and screenshot of it in the page:

@ngompa @carlwgeorge filed a bz here, let me know if this isnt the proper place to file the request: https://bugzilla.redhat.com/show_bug.cgi?id=1934864

Update with Caddy trademark message

Could we add a short paragraph for Caddy configuration as well?

For systems using Caddy: You should now put your content in a location of your choice and edit the root configuration directive in the Caddy configuration file /etc/caddy/Caddyfile.

@carlwgeorge Great idea! What do you think?

@somya23 how about this

@duffy I tested in firefox, it looks great, but I guess in chrome the trademark section still gets cut off. Should I try and fix that? and is there any other task left for me in this issue?

@somya23 oooh! yes! I didn't test in chrome! Would you mind testing in Chrome and fixing the trademark section issue there? Do you have access to Microsoft Edge at all? It might be good to test that too.

@duffy ya I have edge too, let me try in both.

@duffy Updates:
1. Fixed the trademark sizing
2. Tested in chrome, firefox, and egde- all working fine
3. EXTRA SUGGESTION- I felt like the page looked a bit incomplete, so I added white separators above trademark and logo section, it gives a cleaner look.
I have attached both the index files with and without white separators.

Hi @somya23, great work, thanks for the fixes! I think the version without the lines is cleaner / fits more with the Fedora aesthetic (we don't typically use thin keylines.)

I updated your unlined version by adding the Caddy text back (I think you accidentally grabbed an old version - I guess I should have set up a proper repo / version control for this, lol.) I also added some font size changes to the first line and made some highlights / text cuts to tighten the text and make it more easily skimmable.

Great! It looks pretty good right now. So, what else work is left in this page? 😍

I need to submit the new HTML to the fedora-logos ticket, so I'll work on that now! let's keep it open while everything is getting packaged but generally i think this design is done. thanks for your great work @somya23 ! :)

Pull request for this work:
https://pagure.io/fedora-logos/pull-request/13

I also need to request the soft dependency of julietaula-montserrat-base-web-fonts on fedora-logos.

This is included in F34 and works so closing. Thanks again @somya23 !

@duffy My pleasure! I had fun doing this! :D