New Get AlmaLinux page design

[sboldyreva]

There might be some typos/inaccuracies to fix

[bennyvasquez]

In addition to the couple things that I pointed out that you'll want to adjust for throughout, this PR doesn't seem to use any of the boostrap options for layout. Please adjust to use boostrap classes for layouts. This is ultimately cleaner and leads to reduced work for dynamic/mobile displays, as well as making it easier to understand the impact that they layout choices have. For example:

https://getbootstrap.com/docs/4.0/utilities/flex/
https://getbootstrap.com/docs/4.0/utilities/spacing/

You can see examples of that on this page:

https://github.com/AlmaLinux/almalinux.org/blob/master/layouts/members/single.html

[sboldyreva]

@bennyvasquez hi! I think I've updated the most to replace inline code with bootstrap, if you have a moment to take a look if that's the right direction.

Responsive design still requires polishing so meanwhile I'm going to finish with it

[trag-bot]

Pull request summary

• Removed redundant CSS rules for .itemAl_01, .items__01, and .itemAl_02 to streamline styles.
• Corrected a typo in the class name from .al-index-dowload-icon to .al-index-download-icon.
• Added new styles for the download content section, including hover effects for navigation links and dropdown items.
• Introduced a new .gap-30 class to manage spacing in the layout.
• Updated the English localization file (en.json) to include additional phrases related to AlmaLinux OS 10.0 and its images for Azure and Vagrant.
• Enhanced the download section with new download options for AlmaLinux OS versions 8.10, 9.6, and 10.0.
• Modified the HTML layout for the AlmaLinux download page to accommodate the new content structure.

[bennyvasquez]

@sboldyreva this looks much better to me! Because of my delay, though, there are some conflicts that need to be resolved. If you can get those corrected, then I'm happy to merge this in!

[bennyvasquez]

Thank you so much @sboldyreva! I'm just about ready to merge this, but I noticed we lost both the WSL and the LXC icons from the top, which has triggered two more questions for me:

1. What's the plan there? is there a reason that they were removed specifically?
2. are there any other things that were added or removed? There's not much in your initial comment to help clarify for me.

[sboldyreva]

@bennyvasquez each set of OS - version - architecture has now its own respective set of icons followed by the links. The very top set relates to AlmaLinux 10.0 x86_64. At the moment of creating this pull request, there were no available WSL and Incus and LXC images for them. That led to removing their icons from the set.

When updating versions&URL to the newest release, along with the team, I will check available images once again and place available on the download page. Meaning that if WSL and Incus and LXC are now available for any AlmaLinux version (10.0 or 10.1) and arch - the icons and link will be added to the required section :)

[bennyvasquez]

@sboldyreva I just realized that this PR was made before the implementation of prettier, and that is likely why it's failing now. I fixed the problem in the get-almalinux file, but now it's throwing an error on the elevate page. Can you merge master into your PR and then we can see if it continues to be a problem?

[alexiri]

@sboldyreva @bennyvasquez I think the problem is a superfluous </section> tag in line 5141 of layouts/get-almalinux/single.html (please double-check that the file still renders as expected, though). Here's how I found it, for next time:

1. Run prettier on layouts/get-almalinux/single.html, and it fails like this:

> prettier layouts/get-almalinux/single.html
layouts/get-almalinux/single.html
[error] layouts/get-almalinux/single.html: Error: An error occured during printing. Found invalid node root.
[error]     at Object.print (/home/alex/atomic_sig/almalinux.org/node_modules/prettier-plugin-go-template/lib/index.js:65:19)
...

This happens when prettier is unable to parse the structure of the file.

2. The go-template parser hides the real error, so we disable it for more clues. Edit .prettierrc and remove the "parser": "go-template" line, for example.
3. Run prettier again, this time it tells you where the issue is:

> prettier layouts/get-almalinux/single.html
layouts/get-almalinux/single.html
[error] layouts/get-almalinux/single.html: SyntaxError: Unexpected closing tag "section". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (5141:5)
[error]   5139 |         </div>
[error]   5140 |       </div>
[error] > 5141 |     </section>
[error]        |     ^^^^^^^^^^
[error]   5142 |   </div>
[error]   5143 |
[error]   5144 |   <script>

4. Delete the offending line, run prettier again to verify. If it's successful, it will print out the full file (with changes, potentially, but we can ignore them for now).
5. Restore .prettierrc to its original state (ie. with go-template), and run prettier again to make sure it still works.
6. Commit the change and then let prettier in the github action do its thing and make any final changes.

[sboldyreva]

@bennyvasquez not sure if I have fixed that, but I made some clean up