WIP Visual updates v1

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;
+}
+
+.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 {
+}
+
+.principle-heading-link {
+  display: flex;
+  align-items: center;
+
+  color: inherit;
+}
+
+.priciple-heading-number-bubble {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  width: 3.5em;
+  height: 3.5em;
+  margin-right: .75em;
+
+  background-color: #c6cacf;
+  border-radius: 50%;
+
+  color: #ffffff;
+}
+
+.priciple-heading-number-bubble:before {
+  content: 'Principle';
+  display: block;
+
+  color: #f0f2f5;
+  font-size: .4em;
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.principle-heading-emphasis {
+  color: #ef5b35;
+}
+
+
+
+.primary-footer {
+  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: 3em;
+  padding-top: .5em;
+  padding-bottom: .5em;
+
+  background-color: #c34d2f;
+}

source/index.html.haml

@@ -61,6 +61,18 @@
   %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
+       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.
+
+
 %section#adopt
   %h2 Adopting Conversational Development

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.