Visual updates v1.1

source/css/index.css

@@ -10,6 +10,7 @@ a {
 .primary-logo-link {
   color: inherit;
+  cursor: pointer;
 }
 .primary-logo-link:hover,
@@ -30,6 +31,7 @@ a {
 .priciple-heading {
+  margin-left: 1em;
 }
 .principle-heading-link {
@@ -39,20 +41,49 @@ a {
   color: inherit;
 }
+.principle-heading-link:hover,
+.principle-heading-link:focus {
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+
+.principle-heading-link:hover .priciple-heading-number-bubble,
+.principle-heading-link:focus .priciple-heading-number-bubble {
+  transform: scale(1.1);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
+}
+
+.principle-heading-link:hover .principle-heading-text,
+.principle-heading-link:focus .principle-heading-text {
+  text-decoration: underline;
+}
+
 .priciple-heading-number-bubble {
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 3.5em;
-  height: 3.5em;
+  width: 3em;
+  height: 3em;
   margin-right: .75em;
   background-color: #c6cacf;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
   border-radius: 50%;
   color: #ffffff;
+  font-size: 3.5rem;
+  font-weight: 700;
+  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
+  text-decoration: none;
+
+  transition:
+    transform .2s ease,
+    box-shadow .2s ease;
 }
 .priciple-heading-number-bubble:before {
@@ -60,7 +91,7 @@ a {
   display: block;
   color: #f0f2f5;
-  font-size: .4em;
+  font-size: .35em;
   font-weight: bold;
   text-transform: uppercase;
   text-align: center;
@@ -71,8 +102,87 @@ a {
 }
+.read-on-link {
+  display: inline-block;
+  margin-top: 1em;
+  padding: 1em 1.5em;
+  background-color: #d05131;
+  border-radius: 8px;
+
+  color: #ffffff;
+  font-size: 1.75rem;
+  cursor: pointer;
+
+  transition: background-color 0.2s ease;
+}
+
+.read-on-link:before {
+  content: 'Read on,';
+  color: #4d1e12;
+  font-size: 0.75em;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.read-on-link:after {
+  content: '→';
+  display: inline-block;
+
+  transition:
+    transform 0.5s ease,
+    padding-right 0.5s ease;
+}
+
+.read-on-link:hover:after,
+.read-on-link:focus:after {
+  transform: translateX(.25em);
+  padding-right: 1em;
+}
+
+.read-on-link:hover,
+.read-on-link:focus {
+  background-color: #c34d2f;
+
+  color: #f0f2f5;
+  text-decoration: none;
+}
+
+
+
+.maturity-model-table {
+
+}
+
+.maturity-model-table td {
+  border-top: 1px solid #c6cacf;
+  border-left: 1px solid #c6cacf;
+}
+
+.maturity-model-table thead td {
+  background-color: #d05131;
+  color: #f0f2f5;
+  text-align: center;
+}
+
+.maturity-model-table thead td:first-child {
+  text-align: left;
+}
+
+.maturity-model-table th:first-child {
+  min-width: 18vw;
+  background-color: #d6dae2;
+  border-top: 1px solid #e4e7ed;
+}
+
+.maturity-model-table tbody td:nth-child(even) {
+  background-color: rgba(220, 224, 229, 0.05);
+}
+
+
 .primary-footer {
+  padding-top: 0.3em;
+
   background-color: #d05131;
   color: #e4e7ed;
@@ -90,7 +200,7 @@ a {
 }
 .primary-footer-contributing-note {
-  margin-top: 3em;
+  margin-top: 2em;
   padding-top: .5em;
   padding-bottom: .5em;

source/index.html.haml

-%section#development-processes
-  %h2 Agile needs to evolve
-
-  %p
-    The first attempt to bring structure into software development was <strong>Waterfall</strong>, but it was extremely inflexible and rigid.
-
-  %p
-    People replaced Waterfall with <strong>Scrum</strong>. But some problems remained:<br/>
-    %ul
-      %li <strong>Scrum</strong> assumes you can estimate work accurately, which is not true in general.
-      %li As a result, it consumes a lot of time trying to plan and negotiate and strains the relationship between developers and managers
-
-  %p
-    <strong><a href="http://agilemanifesto.org" target="_blank">Agile</a></strong> fixed most of the problems of <strong>Scrum</strong>.
-    %ul
-      %li But it focuses only on the development process, not on setting requirements and doing deployments.
-      %li It doesn't work with large and distributed teams because verbal in-person communication doesn't scale
-      %li Somehow best engineering practices ended up being not a part of Agile.
-
-  =img("/images/evolution.png")
-
-  %p
-    <strong>Conversational Development</strong> is an evolution of <strong>Agile</strong> to make it work for the entire process and with large and/or distributed teams.
 %section#principles
@@ -34,44 +11,38 @@
       %li Does it work properly?
       %li Did it bring the expected value?
-    When all of these conversations are taken into account, reasoning about software development simplifies a lot, and can be summarized in these four principles:
-
-  .row(style="text-align:center")
-    .col-md-3.col-xs-6
-      1.
-      %a(href="shorten-cycle")
-        =img("/images/main-s.png")
-        Shorten the conversation cycle
-    .col-md-3.col-xs-6
-      2.
-      %a(href="thread-conversations")
-        =img("/images/main-t.png")
-        Thread the conversations through all stages
-    .col-md-3.col-xs-6
-      3.
-      %a(href="invite-everyone")
-        =img("/images/invite.png")
-        Invite everyone to the conversation
-    .col-md-3.col-xs-6
-      4.
-      %a(href="results-oriented")
-        =img("/images/main-r.png")
-        Result oriented conversations
+    When all of these conversations are taken into account, reasoning about software development simplifies a lot, and can be summarized in the following four principles.
   %p
     Moreover, most of engineering best practices arise naturally as an effect of Conversational Development principles application.
   %h3.priciple-heading
     %a.principle-heading-link(href="shorten-cycle")
-      %span.priciple-heading-number-bubble 1
-      %span.principle-heading-emphasis Shorten
-      &nbsp;the conversation cycle
-  =img("/images/main-s.png")
-  %p
-    Moreover, most of engineering best practices arise naturally as an effect of Conversational Development principles application.
+      %span.priciple-heading-number-bubble(style="background-image: url('/images/main-s.png')") 1
+      %span.principle-heading-text
+        %span.principle-heading-emphasis Shorten
+        the conversation cycle →
+  %h3.priciple-heading
+    %a.principle-heading-link(href="thread-conversations")
+      %span.priciple-heading-number-bubble(style="background-image: url('/images/main-t.png')") 2
+      %span.principle-heading-text
+        %span.principle-heading-emphasis Thread
+        the conversations through all stages →
+  %h3.priciple-heading
+    %a.principle-heading-link(href="invite-everyone")
+      %span.priciple-heading-number-bubble(style="background-image: url('/images/invite.png')") 3
+      %span.principle-heading-text
+        %span.principle-heading-emphasis Invite
+        everyone to the conversation →
+  %h3.priciple-heading
+    %a.principle-heading-link(href="results-oriented")
+      %span.priciple-heading-number-bubble(style="background-image: url('/images/main-r.png')") 4
+      %span.principle-heading-text
+        %span.principle-heading-emphasis Result oriented
+        conversations →
 %section#adopt
@@ -79,6 +50,34 @@
   %p The first step on the path of adoption will be to realize your current situation. Take a look at the <a href="maturity-model">Maturity Model</a> to get an idea of your processes maturity, possible problems, and potential for growth.
+
+
+%section#development-processes
+  %h2 Agile needs to evolve
+
+  %p
+    The first attempt to bring structure into software development was <strong>Waterfall</strong>, but it was extremely inflexible and rigid.
+
+  %p
+    People replaced Waterfall with <strong>Scrum</strong>. But some problems remained:<br/>
+    %ul
+      %li <strong>Scrum</strong> assumes you can estimate work accurately, which is not true in general.
+      %li As a result, it consumes a lot of time trying to plan and negotiate and strains the relationship between developers and managers
+
+  %p
+    <strong><a href="http://agilemanifesto.org" target="_blank">Agile</a></strong> fixed most of the problems of <strong>Scrum</strong>.
+    %ul
+      %li But it focuses only on the development process, not on setting requirements and doing deployments.
+      %li It doesn't work with large and distributed teams because verbal in-person communication doesn't scale
+      %li Somehow best engineering practices ended up being not a part of Agile.
+
+  =img("/images/evolution.png")
+
+  %p
+    <strong>Conversational Development</strong> is an evolution of <strong>Agile</strong> to make it work for the entire process and with large and/or distributed teams.
+
+
+
 %section#how-to-contribute
   %h2 How to contribute

source/invite-everyone.html.haml

-%h2 Invite everyone to the conversation
+%h2 Principle #3: Invite everyone to the conversation
 %p.hero Description: Instead of locking conversation on per-stage, per team, or per-speciality principle, leave the doors as open as possible.
@@ -43,4 +43,8 @@
 %ul
   %li Increases reuse of solutions, prevents duplicate work
   %li Increases shared knowledge
-  %li Ability to scale your organization by going remote & async
+  %li Ability to scale your organization by going remote & async
\ No newline at end of file
+
+
+%a.read-on-link(href="results-oriented")
+  Principle #4: Result oriented conversations

source/maturity-model.html.haml

@@ -5,7 +5,7 @@
   %p The table below should help you identify your processes maturity, possible problems, and potential for growth:
-  %table.table
+  %table.table.maturity-model-table
     %thead
       %tr
         %td
@@ -85,4 +85,4 @@
         %td
         %td GitLab inc.
         %td
-        %td
+        %td
\ No newline at end of file

source/results-oriented.html.haml

-%h2 Result oriented conversations
+%h2 Principle #4: Result oriented conversations
 %p.hero Stop measuring abstract things like story points or irrelevant things like hours. Instead proactively look for ways to connect your work to business metrics.
@@ -16,4 +16,8 @@
 %p Basically, you get what you measure. The more you measure results, the more results you get.
 .pictures
-  =img("/images/R1.png")
+  =img("/images/R1.png")
\ No newline at end of file
+
+
+%a.read-on-link(href="maturity-model")
+  Maturity Model

source/shorten-cycle.html.haml

@@ -72,3 +72,7 @@
   %li Multiple changes → Single changes (able to link problems to changes quickly)
   %li Deploy in weekend → Deploy on peak times (prioritize finding problems quickly)
   %li Human integration testing → Automated integration testing (test everything)
+
+
+%a.read-on-link(href="thread-conversations")
+  Principle #2: Thread the conversations through all stages

source/thread-conversations.html.haml

-%h2 Thread the conversations through all stages
+%h2 Principle #2: Thread the conversations through all stages
 %p.hero Instead of having multiple non-connected stage-related conversations have one going through all stages so that people who join later during the work could find the roots and restore the full picture.
@@ -31,6 +31,11 @@
   The reason for that is that it is the only way to measure the cycle time (and therefore, shorten it) and have result oriented conversations.
+
+%a.read-on-link(href="invite-everyone")
+  Principle #3: Invite everyone to the conversation
+
+
 :sass
   .center
-    text-align: center
+    text-align: center
\ No newline at end of file