Improve the layout of the community page

[patricoferris]

The community page of the ocaml.org site could use an improved layout, particularly on mobile devices. Currently the first section containing the community icon, the introductory text, the logos and stickers link (and images) render a little awkwardly on smaller screens (see screenshot).

Hopefully you can agree this looks awkward, it would be good to improve this. Some ideas are:

• To remove the community icon altogether
• Ensure good layout of the two logos on smaller screens

I'm open to any other design options too so please feel free to suggest some.

@Aditi-1400 is this something you'd be interested in doing as part of #1245? Please leave a comment if you are interested or if you are not :))

[Aditi-1400]

Yes, I would definitely like to work on this one :). I'll get started and get back to you if I have queries.
Thank you :)

[Aditi-1400]

@patricoferris
So, to proceed with improving the layout, I built the website locally, I made a few changes in the styles and the end product looks like this.

However before proceeding further, I have a few doubts, since it's my first time contributing to a large codebase.
1.I am not really familiar with makefile, but, if I am getting it right, after making the changes, I'll have to run the make command, copy the changes in style to site/css/ocamlorg.css and then create a pull request.
2. How many changes can I make? For now, I've just added a few classes to the elements and added their styles in ocamlorg.css file itself with a comment to separate it from the rest. It looks like:

3. Do I create a new issue for other suggestions that I have for the page, or should I just specify them here?

Also, I haven't changed the fonts, it's my system font, but, for some reason, I am not getting Domine on my local build.

[patricoferris]

Great work @Aditi-1400 🎉

Responding to your questions:

1.I am not really familiar with makefile, but, if I am getting it right, after making the changes, I'll have to run the make command, copy the changes in style to site/css/ocamlorg.css and then create a pull request.

The CSS for the site is in site/css/ocamlorg.css if you added it to ocaml.org/css/ocamlorg.css then yes you will need to copy it back to the other file and submit that. The ocaml.org directory is just the build result, it is in the .gitignore so it will be ignored and will be removed if you run make clean, don't lose your work!

2. How many changes can I make? For now, I've just added a few classes to the elements and added their styles in ocamlorg.css file itself with a comment to separate it from the rest.

Your changes, in my opinion, already look great! I would raise a PR with just those ones and then a separate PR/issue to discuss the other changes you had in my mind. Keeping things separate and small helps the review process and increases the likelihood that your PR will be merged sooner as a consequence.

Interesting problem with the font -- does the main ocaml.org site get the font?

Thanks again for contribution :))

[Aditi-1400]

The CSS for the site is in site/css/ocamlorg.css if you added it to ocaml.org/css/ocamlorg.css then yes you will need to copy it back to the other file and submit that. The ocaml.org directory is just the build result, it is in the .gitignore so it will be ignored and will be removed if you run make clean, don't lose your work!

Alright! :)

Interesting problem with the font -- does the main ocaml.org site get the font?

Yeah, the main ocaml.org gets the font, it's just a problem with the local build.

Thanks again for contribution :))

My pleasure, it's really exciting to be a part of the community and I am liking every bit of it. :D

[Aditi-1400]

Hey, @patricoferris, I am kind of stuck here :(
So I'll just list out the steps I followed.

1. Made some of the changes in site/community/index.md, site/community/index.fr.md and site/css/ocamorgl.css.
   i.The changes are:
   
   Something similar in the index.fr.md.
2. However when I run the make command after making these changes I end up with:
   
   And an empty file for index.fr.html.
3. Also I've tried doing it by running make clean and then building again, without make clean and building and I end up getting a weird result every time. I think I am probably missing out on a command or something, could you please help me out a little here? :|
   Thank you

[patricoferris]

@Aditi-1400 hmmm that does seem a little strange -- sometimes you do have to run make clean which is a bit unfortunate. Could you push the code to a branch and then paste a link here, it's much easier if I can see the code on Github/check it out locally to see what's going on and give you some help :))

[Aditi-1400]

Okay sure :)

[Aditi-1400]

Hey @patricoferris , I've pushed the changes to community-page branch in my forked repo here:
https://github.com/Aditi-1400/ocaml.org/tree/community-page
Would it be convenient for you to review the problem if i create a pull request, or is this okay?

[patricoferris]

Hi @Aditi-1400 thank you for your patience, please do not hesitate to ping me on here if I leave something like this for a few days :))

I checked out your code and think I found the bug. Omd isn't happy with the spaces between class and the class name "stickers" -- Aditi-1400@8785e6b#diff-fe705115e32260aef853334ffffd67671cb7c45106a0c1e9f7120e6b779a85c4R16

If you remove them it should all work :)) Feel free to open a PR with these changes, thanks again for the contribution.

[Aditi-1400]

Oh dear! 🤦‍♀️ Thank you :))! That solved it !

[avsm]

Fixed in #1296