Clients are now mobile friendly!!

enq89 · Aug 20, 2014 · ed10afd · ed10afd
1 parent 0e0666d
commit ed10afd
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ In order to get this super fantastic [Jekyll](http://jekyllrb.com) powered templ
 * Move/`cd` to a folder, always in your terminal, in which you want to insert the *Artists-Theme*
 * Run `git clone https://github.com/DevTips/Artists-Theme.git`
 * Then `cd Artists-Theme`
-* `jekyll serve -w` or `jekyll serve`
+* `jekyll serve --watch`
 * **DONE**
 
 Isn't it fantastic?
@@ -51,7 +51,7 @@ _A big thank you to these creators for contributing sample projects for the "wor
 ![The Design](/assets/img/the_design.jpg)
 
 
-_Artist Thmemes in the wild:_
+_Artist Themes in the wild:_
 - [limestudios](http://limestudios.net/)
 
 

diff --git a/_includes/clients.html b/_includes/clients.html
@@ -3,10 +3,16 @@
   <h3 id="clients">Clients</h3>
 
 
-
+  <div class="clients-mobile-nav">
+    {% for client in site.data.settings.clients %}
+    <span></span>
+    {% endfor %}
+  </div>
 
   <div class="clients-belt">
 
+
+
 
     {% for client in site.data.settings.clients %}
     <div class="client-unit">
@@ -36,7 +42,7 @@ <h3 id="clients">Clients</h3>
 
   <div class="clients-logos">
     {% for client in site.data.settings.clients %}
-    <div class="client-logo" style="background-image: url(/assets/img/clients/{{ client.logo }});"></div>
+    <img class="client-logo" src="/assets/img/clients/{{ client.logo }}" align="{{ client.logo }}">
     {% endfor %}
   </div>
 

diff --git a/assets/css/3-sections/clients.sass b/assets/css/3-sections/clients.sass
@@ -7,8 +7,8 @@
 
   .client-unit
     max-width: 750px
-    margin: 0 0 50px -375px
-    +position(absolute, 0px null null 50%)
+    margin: 50px auto
+    position: relative
     z-index: 1
     display: none
 
@@ -23,7 +23,8 @@
       img
         max-width: 100px
         border-radius: 50%  
-
+
+
       .client-name
         display: block
         text-transform: uppercase
@@ -41,31 +42,30 @@
       font-weight: 300
       margin-top: -10px
       position: relative
+
 
 
 
 // Logos
 .clients-logos
   position: relative
   max-width: 750px
-  margin: 350px auto 100px
+  margin: 0px auto 100px
   +display(flex)
-  +align-items(space-around)
-  +justify-content(center)
+  +align-items(flex-end)
+  +justify-content(space-around)
 
 
   .client-logo
-    height: 80px
-    min-width: 200px
-    background:
-      size: contain
-      position: center bottom
-      repeat: no-repeat
     cursor: pointer
-    margin: 0 20px
+    margin: 0 20px 20px
+    padding-bottom: 20px
+    border-bottom: 4px solid transparent
+    opacity: 0.5
 
     &.active-client
-      box-shadow: 0px 10px 0px $documentBackgroundColor, 0px 14px 0px $accent
+      opacity: 1
+      border-bottom: 4px solid $accent
 
 
 .client-quote-mark
@@ -96,11 +96,62 @@
 
   .client-control-prev
     +position(absolute, 50% null null 10px)
+
+// clients-mobile-nav
+.clients-mobile-nav
+  text-align: center
+  position: relative
+  z-index: 2
+  display: none
+
+  span
+    display: inline-block
+    +size(16px)
+    border-radius: 50%
+    border: solid 2px $bgcolor
+    margin: 0px 10px
+    cursor: pointer
+
+    &.active-client
+      border-color: $accent
 
 
 
+
+@media (max-width: 750px)
+  .clients-logos
+    +flex-wrap(wrap)
+
+  .clients-belt 
+    overflow-x: hidden
 
+    .client-unit.active-client
+      display: block
+      position: relative
+      margin-left: 0px
+      left: auto
 
+      .client-face
+        margin-bottom: 30px
+
+      .client-content
+        font-size: 16px
+        line-height: 1.5
+        padding: 0px 30px
+        max-width: 400px
+        margin: 0px auto
+
+      .client-quote-mark
+        left: 6px
+
+  .client-controls
+    display: none
+
+  .clients-logos
+    display: none
+
+  .clients-mobile-nav
+    display: block
 
 
 

diff --git a/assets/img/the_design.jpg b/assets/img/the_design.jpg
diff --git a/assets/js/functions.js b/assets/js/functions.js
@@ -64,8 +64,10 @@ function clientStuff() {
 
   $('.client-unit').first().addClass('active-client');
   $('.client-logo').first().addClass('active-client');
+  $('.clients-mobile-nav span').first().addClass('active-client');
 
-  $('.client-logo').click(function() {
+
+  $('.client-logo, .clients-mobile-nav span').click(function() {
     var $this = $(this),
         $siblings = $this.parent().children(),
         position = $siblings.index($this);