3 files changed, 52 insertions, 23 deletions

diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css
index ede930137..7110cd6ad 100644
--- a/assets/css/alaveteli-org.css
+++ b/assets/css/alaveteli-org.css
@@ -94,12 +94,12 @@ h3 {
 @media (min-width: 47.5em) {
   .nav-position {
     position: absolute;
-    top: 0.6em;
+    top: 0.4em;
     left: 180px; } }
 @media (min-width: 56.88889em) {
   .nav-position {
     left: 240px;
-    top: 0.5em; } }
+    top: 0.35em; } }
 
 .site-nav ul {
   margin-top: 0;
@@ -146,7 +146,7 @@ h3 {
   -o-user-select: none;
   user-select: none;
   position: absolute;
-  top: 0.1em;
+  top: 0.4em;
   right: 5em;
   display: inline-block;
   padding: 0.3em 0.75em;
@@ -267,8 +267,10 @@ h3 {
   background-color: #974495;
   overflow: hidden; }
   .how-does-it-work img {
-    position: relative;
-    bottom: -1px; }
+    position: relative; }
+    @media (min-width: 56.88889em) {
+      .how-does-it-work img {
+        bottom: -1px; } }
   @media (min-width: 30em) {
     .how-does-it-work {
       padding-top: 0;
@@ -374,7 +376,10 @@ h3 {
       background-position: left center;
       padding: 1em 0; }
       .features__item--primary h3, .features__item--primary p {
-        padding-left: 53%; } }
+        padding-left: 63%; } }
+  @media (min-width: 65em) {
+    .features__item--primary h3, .features__item--primary p {
+      padding-left: 53%; } }
   .features__item--primary h3 {
     font-size: 1.4em; }
 
@@ -607,12 +612,14 @@ h3 {
 .deployment__link {
   margin-top: 0;
   margin-bottom: 0.5em;
-  font-size: 0.888888889em;
-  text-overflow: ellipsis;
-  text-overflow: ellipsis;
-  /* Required for text-overflow to do anything */
-  white-space: nowrap;
-  overflow: hidden; }
+  font-size: 0.888888889em; }
+  .deployment__link a {
+    display: block;
+    text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    /* Required for text-overflow to do anything */
+    white-space: nowrap;
+    overflow: hidden; }
   @media (min-width: 56.88889em) {
     .deployment__link {
       font-size: 1em; } }
diff --git a/assets/css/global.css b/assets/css/global.css
index a012992ab..117c0b845 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -349,7 +349,7 @@ table {
   margin: 0 auto;
   position: relative; }
 
-.unstyled-list, .unstyled, .sidebar ul, .list-of-blog-posts, .definitions {
+.unstyled-list, .unstyled, .breadcrumb, .sidebar ul, .list-of-blog-posts, .definitions {
   margin-left: 0;
   padding-left: 0;
   list-style: none outside none; }
@@ -849,6 +849,18 @@ ul {
     .secondary-content-column:first-child {
       padding-left: 0; } }
 
+.breadcrumb {
+  padding: 8px 0; }
+  .breadcrumb li {
+    display: inline;
+    font-size: 0.75em; }
+    .breadcrumb li:after {
+      content: '/';
+      margin: 0 0.33em;
+      color: #e4e3dd; }
+    .breadcrumb li a {
+      color: #787774; }
+
 .sidebar ul {
   -webkit-column-count: 2;
   -moz-column-count: 2;
diff --git a/assets/sass/alaveteli-org.scss b/assets/sass/alaveteli-org.scss
index aee838dab..e33f15251 100644
--- a/assets/sass/alaveteli-org.scss
+++ b/assets/sass/alaveteli-org.scss
@@ -80,12 +80,12 @@ h3 {
 .nav-position {
     @media (min-width: 47.5em) {
         position: absolute;
-        top: 0.6em;
+        top: 0.4em;
         left: 180px;
     }
     @media (min-width: $large-screen) {
         left: 240px;
-        top: 0.5em;
+        top: 0.35em;
     }
 }
 
@@ -145,7 +145,7 @@ h3 {
   -o-user-select: none;
   user-select: none;
   position: absolute;
-  top: 0.1em;
+  top: 0.4em;
   right: 5em;
   @media (min-width: $medium-screen) {
     right: 10em;
@@ -306,7 +306,9 @@ h3 {
   overflow: hidden;
   img {
         position: relative;
-        bottom: -1px;
+        @media(min-width: $large-screen) {
+            bottom: -1px;
+        }
   }
   @media(min-width: $medium-screen) {
     .how-does-it-work__slide {
@@ -446,6 +448,11 @@ h3 {
         background-position: left center;
         padding: 1em 0;
         h3, p {
+            padding-left: 63%;
+        }
+    }
+    @media (min-width: 65em) {
+        h3, p {
             padding-left: 53%;
         }
     }
@@ -738,11 +745,14 @@ h3 {
     margin-top: 0;
     margin-bottom: 0.5em;
     font-size: 0.888888889em;
-    text-overflow: ellipsis;
-    text-overflow: ellipsis;
-    /* Required for text-overflow to do anything */
-    white-space: nowrap;
-    overflow: hidden;
+    a {
+        display: block;
+        text-overflow: ellipsis;
+        text-overflow: ellipsis;
+        /* Required for text-overflow to do anything */
+        white-space: nowrap;
+        overflow: hidden;
+    }
     @media (min-width: $large-screen) {
         font-size: 1em;
     }
@@ -782,7 +792,7 @@ h3 {
     .deployment__title,
     .deployment__country,
     .deployment__link {
-            margin-left: 37%;
+        margin-left: 37%;
     }
 }