Identify some quick design and code improvements to the site

[ericronne]

The cluster.ipfs.io landing page was recently updatedd, but a quick design/content/tech review might highlight some spots for additional improvement. (Hopefully the vibe for this initiative can be more "hackathon" than "epic")

A few avenues to explore/tasks …

Content

• Rework it into a hierarchical format (as opposed to a bulleted list), and modify to engage any key user groups we've identified. Note: this will have to be a first-pass level of effort, since we have no content strategist/writer atm *

*Have user groups been defined @hsanjuan? 😆

Tech

• Audit to see where the code be simplified, and dependencies reduced (eg re css libraries, fonts, themes, js code) (@cwaring? ) site wide

UX/Visual design

• Improve type scaling (consider Tachyons?) site wide

• Solidify the grid structure/fix margins site wide

• Break up the content (into panels?), in order to improve flow and make the page more engaging

• Add more color below the fold

• Add a high-profile call to action to the hero (above-the-fold) area

• Add a clear call to action at the bottom of the content area ("Get started" eg)

• Create implementation issues as needed, and

• Bang em out

Plus anything else i'm missing.

Current landing page

[hsanjuan]

One of the things that I find worrying is that we load a bunch of things and I don't know what for. This is a very static site. I want to minimize the amount of styling to something that be easily controlled:

  <script src="./js/jquery-2.x.min.js"></script>                              <- Why? I really don't want FadeIns or anything.

    <link rel="stylesheet" href="./css/nucleus.css">                       <- Why?
    <link rel="stylesheet" href="./css/fontawesome-all.min.css"> <- Only use like 5, can we import less?
    <link rel="stylesheet" href="./css/hybrid.css">                         <- Why?
    <link rel="stylesheet" href="./css/featherlight.min.css">         <- Why?
    <link rel="stylesheet" href="./css/perfect-scrollbar.min.css"> <- Why???
    <link rel="stylesheet" href="./css/auto-complete.css">          <- Why? Can we extract the necessary? Auto-complete is only in a search box. It can't be so hard to style a single input field.
    <link rel="stylesheet" href="./css/hybrid.css">                       <- Again?
    <link rel="stylesheet" href="./css/fontawesome-all.min.css"> <- Again?
    <link rel="stylesheet" href="./css/tachyons.min.css"/>           <- Already had discussion about this. I find the css classes they add barely documented, hard to understand. But ok.
    <link rel="stylesheet" href="./fonts/fonts.css"/>                     <- Why?
    <script async defer src="./buttons.js"></script>
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans" rel="stylesheet">     <- Can we not load 3rd party fonts? Can we use default fonts or is that crazy? Can we distribute the fonts with the site at least?
    <link rel="stylesheet" href="./css/theme.css">                    <- Comes from `hugo-theme-learn`: How much of this is used? Can the couple of things be blended with `main.css`? 
    <link rel="stylesheet" href="./css/hugo-theme.css">           <- Comes from `hugo-theme-learn`: How much of this is used? Can the couple of things be blended with `main.css`?
    <link rel="stylesheet" href="./css/main.css"/> <- This is the actual original CSS file that is generated from less and that is easy to understand and goes to the point.

    <style type="text/css">
      :root #header + #content > #left > #rlblock_left{
          display:none !important;
      }
      
        :not(pre) > code + span.copy-to-clipboard {
            display: none;
        }
      

• The documentation menu does not support adding external links to it
• H1 are huge, H2 small, H3 almost invisible:
  • This should look better: https://cluster.ipfs.io/documentation/deployment/setup/
• Could hugo autogenerate page-index at the top of each documentation page with links to each section in the page?
• <code> tags look ok in some places, but inside tables etc maybe not so good https://cluster.ipfs.io/documentation/reference/configuration/

* Rework it into a hierarchical format (as opposed to a bulleted list), and modify to engage any key user groups we've identified. _Note: this will have to be a first-pass level of effort, since we have no content strategist/writer atm_ *

*Have user groups been defined @hsanjuan? laughing

Not sure what content needs hierarchical format vs bulleted list ?

User groups are: IPFS user for the frontpage. System administrators for the docs mostly, we need to add a section focused on users that just join existing clusters but that's not written yet.