Merge branch 'visual-improvements-v1' into 'staging'

Visual updates v1

See merge request !15

Gemfile.lock

@@ -18,7 +18,6 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.10.0)
-    colored (1.2)
     compass (1.0.3)
       chunky_png (~> 1.2)
       compass-core (~> 1.0.2)
@@ -31,10 +30,6 @@ GEM
       sass (>= 3.3.0, < 3.5)
     compass-import-once (1.0.5)
       sass (>= 3.2, < 3.5)
-    configure-s3-website (1.7.1)
-      deep_merge (= 1.0.0)
-    deep_merge (1.0.0)
-    dotenv (1.0.2)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
@@ -109,11 +104,6 @@ GEM
     rb-fsevent (0.9.7)
     rb-inotify (0.9.7)
       ffi (>= 0.5.0)
-    s3_website (2.11.0)
-      colored (= 1.2)
-      configure-s3-website (= 1.7.1)
-      dotenv (~> 1.0)
-      thor (~> 0.18)
     sass (3.4.22)
     sprockets (2.12.4)
       hike (~> 1.2)
@@ -143,7 +133,6 @@ PLATFORMS
 DEPENDENCIES
   middleman (~> 3.4.0)
   middleman-livereload (~> 3.1.0)
-  s3_website
 BUNDLED WITH
-   1.12.3
+   1.13.7

source/css/index.css

+
+a {
+  color: #ef5b35;
+}
+
+.primary-logo {
+  text-align: center;
+  font-size: 120px;
+}
+
+.primary-logo-link {
+  color: inherit;
+  cursor: pointer;
+}
+
+.primary-logo-link:hover,
+.primary-logo-link:focus {
+  color: inherit;
+}
+
+.primary-logo-conv-piece {
+  color: #ef5b35;
+  font-weight: normal;
+}
+
+.primary-logo-dev-piece {
+  font-weight: bold;
+}
+
+
+
+
+.priciple-heading {
+  margin-left: 1em;
+}
+
+.principle-heading-link {
+  display: flex;
+  align-items: center;
+
+  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: 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 {
+  content: 'Principle';
+  display: block;
+
+  color: #f0f2f5;
+  font-size: .35em;
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.principle-heading-emphasis {
+  color: #ef5b35;
+}
+
+
+.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;
+  text-align: center;
+}
+.primary-footer a {
+  color: inherit;
+  border-bottom: 1px solid;
+}
+
+.primary-footer a:hover,
+.primary-footer a:focus {
+  color: #c6cacf;
+  text-decoration: none;
+}
+
+.primary-footer-contributing-note {
+  margin-top: 2em;
+  padding-top: .5em;
+  padding-bottom: .5em;
+
+  background-color: #c34d2f;
+}

source/index.html.haml

+
+
+%section#principles
+  %h2 Conversational Development Principles
+
+  %p
+    Software development consists of conversations around different things:
+    %ul
+      %li What can be improved?
+      %li How to implement it?
+      %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 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(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
+  %h2 Adopting Conversational Development
+
+  %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
@@ -23,49 +77,6 @@
     <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
-  %h2 Conversational Development Principles
-
-  %p
-    Software development consists of conversations around different things:
-    %ul
-      %li What can be improved?
-      %li How to implement it?
-      %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
-
-  %p
-    Moreover, most of engineering best practices arise naturally as an effect of Conversational Development principles application.
-
-
-%section#adopt
-  %h2 Adopting Conversational Development
-
-  %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#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/layouts/layout.html.haml

@@ -17,11 +17,13 @@
       <!-- Optional theme -->
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+      <link rel="stylesheet" href="/css/index.css">
+      <link rel="stylesheet" href="/css/likely.css">
+
       <!-- Latest compiled and minified JavaScript -->
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
       <script src="/js/likely.js"></script>
-      <link rel="stylesheet" href="/css/likely.css">
       <meta property="og:image" content="images/evolution.png" />
@@ -33,37 +35,33 @@
     -#= partial "twitter_card"
   %body{:class => page_classes}
-    .container{:style => "width: 860px"}
-      %h1
-        - if page_classes.to_s == "index"
-          ConvDev
-        - else
-          %a(href="/") ConvDev
+    .container{:style => ""}
+      %h1.primary-logo
+        %a.primary-logo-link(href="/")
+          %span.primary-logo-conv-piece> Conv
+          %span.primary-logo-dev-piece Dev
       = yield
     %br
     %br
-    %footer(style="text-align: center")
+    %footer.primary-footer
       :plain
         <!-- http://ilyabirman.net/projects/likely/ -->
         <div class="likely" data-url="http://conversationaldevelopment.com" data-title="Conversational Development - the evolution of Agile">
           <div class="twitter">Tweet</div>
           <div class="facebook">Share</div>
           <div class="linkedin">Link</div>
-          <div class="gplus">Plus</div>
         </div>
       %br
       %br
       Look for
       %a(href="https://twitter.com/search?q=%23convdev")#ConvDev
       on Twitter
-    %br
-    %br
-    %br
-  :sass
-    h1
-      text-align: center
-      font-size: 120px
+      %section.primary-footer-contributing-note
+        This page is generated from a
+        %a(href="https://gitlab.com/gitlab-com/conversationaldevelopment-com")public repo on GitLab.com
+        — merge requests with improvements are
+        %a(href="https://gitlab.com/gitlab-com/conversationaldevelopment-com/merge_requests") very welcome.

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