milestone v0.10 (formerly andrew working)

[alo9507]

• [x] in menu, "Stakeholders" styling and size should match problem and solution
• [ ] need padding above "Robotics has a dirty little secret:"
• [x] who should join section: doesn't read well (both styling and layout issue), let's just make the 4 items a centered, bullet point list

dsp edit: moving and organizing to-dos by PR and using semver starting at 0.10 (completely arbitrary starting point)

[thedavidprice]

@alo9507 Thanks for starting to work on this!

Stakeholders list

Still a few things with your version that were making it hard to read I think. Go back to the rows and columns (see my screenshot below) and try this code (also remove blue background and white font color css):

<div class="t1">
    <p class="lead">Designing robots and looking to increase the intelligence and safety of your creations.</p>
</div>

<div class="t2">
    <p class="lead">Constructing AI or hardware for smart machines and seeking channels to easily distribute your products and services across this dynamic market.</p>
</div>

...etc...

"Dirty Secret" Section

The readability of this section has been hard for me. Naming some things that would help but are for a later time --> The copy itself needs to be improved. Another issue is the typography: text styling and leading (padding/margin) between elements. Also hard to read when text spans a full width at full screen.

I took a stab at some inline changes that seemed to help the readability for now. Please try the code below and add or improve as needed. (note: I should have just done a PR into your branch but got too far in. better workflow for next time.)

<section class="about" id="problem">
  <div class="container" style="position:relative">
    <h2 style="font-weight:bold;margin-top: 60px;" class="text-center display-4">Robotics has a dirty little secret:</h2>
    <h3 class="h2">Robotic 'brains' are holding robots down, literally</h3>
    <p class="lead">
      Robots with capabilities similar to humans have been unattainable because of physical limitations. The cognitive hardware for such robots is massive and immensely energy intensive, which makes them impracticle.
    </p>

    <h3 style="margin-top: 32px;" class="h2">
      Breakthroughs in cloud computing and connectivity permit a new approach.
    </h3>
    <p class="lead">
      Now the physical limitations can be overcome with cloud robots that share a ‘brain’ via cloud connectivity.
    </p>

    <h3 style="margin-top: 32px;" class="h2">
      <span style="font-style: italic">However</span>, current policy systems are not focused on cloud robots, lack the necessary expertise, or are too slow.
    </h3>
    <p style="" class="lead">Accordingly, a <span style="font-style: italic">gap</span> exists between tech advances and policy, and <span style="font-style: italic">the gap is widening</span></p>

    <div class="problem-content" style="margin-top: 48px;">
      <img class="gap" src="img/Gap_diag.svg">
    </div>

  </div>
</section>