Corrected BEM nesting depths

.sass-lint.yml

@@ -71,7 +71,7 @@ rules:
       - break-at-device
       - break-from-device
       - break-to-device
-  nesting-depth: 0
+  nesting-depth: 2
   no-color-keywords: 2
   no-color-literals: 2
   no-css-comments: 2

src/assets/stylesheets/_config.scss

@@ -55,8 +55,6 @@ $break-devices: (
 
 // Primary and accent colors
 $md-color-primary:         $clr-indigo-500;
-$md-color-primary--light:  $clr-indigo-100;
-$md-color-primary--dark:   $clr-indigo-700;
 $md-color-accent:          $clr-indigo-a200;
 
 // Shades of black

src/assets/stylesheets/_shame.scss

@@ -24,17 +24,26 @@
 // Nothing to see here, move along
 // ----------------------------------------------------------------------------
 
-
 .md-search__suggest {
+  @include z-depth(8);
+
   background: $md-color-white;
   border-radius: 0 0 px2rem(3px) px2rem(3px);
   color: #000000;
   text-align: left;
   border-top: px2rem(1px) solid $md-color-black--lightest;
-  display: none;
+  display: none; // TODO: doesnt work due to display: none;
+  opacity: 0;
+
+  // overflow: auto;
+  transition: opacity .3s;
+  // pointer-events: none;
+
 
   .md-search__input:focus ~ & {
+    // animation: anima .3s;
     display: block;
+    opacity: 1;
   }
 }
 
@@ -67,6 +76,10 @@
   }
 }
 
+.md-search-term {
+
+}
+
 .checklist {
 
   li {
@@ -163,21 +176,13 @@ mark {
   }
 }
 
-article {
+.md-button {
-  overflow: auto;
-}
-.floater {
-  display: none;
   float: right;
   margin-top: 9px;
   font-size: 13px;
   padding-left: 2.6rem;
-
+  font-weight: 700;
-  &::before {
+  text-transform: uppercase;
-    @extend %md-icon;
-
-    content: "edit";
-  }
 }
 
 .task-list-item {
@@ -188,9 +193,9 @@ article {
   margin: 0 4px 0.25em -20px;
   vertical-align: middle;
 }
-
+//
-
+//
-
+//
 .task-list-item {
   position: relative;
 }
@@ -221,3 +226,11 @@ article {
   content: "✔";
   color: #1EBB52;
 }
+
+.codehilite .hll {
+  background: #FFFF00;
+  display: block;
+  margin: 0 -16px;
+  padding: 0 16px;
+}
+

src/assets/stylesheets/base/_typeset.scss

@@ -169,6 +169,7 @@ code {
   pre {
     margin: 2.0rem 0;
     padding: 1.0rem 1.2rem;
+    border-radius: 0.2rem;
     background: #F7F7F7;
     color: #37474F;
     font-size: 85%;

src/assets/stylesheets/helpers/_break.scss

@@ -30,17 +30,17 @@
 /// @example
 ///   $break-devices: (
 ///     mobile: (
-///       portrait:  px2em(220px)  px2em(479px),
+///       portrait:  220px  479px,
-///       landscape: px2em(480px)  px2em(719px)
+///       landscape: 480px  719px
 ///     ),
 ///     tablet: (
-///       portrait:  px2em(720px)  px2em(959px),
+///       portrait:  720px  959px,
-///       landscape: px2em(960px)  px2em(1199px)
+///       landscape: 960px  1199px
 ///     ),
 ///     screen: (
-///       small:     px2em(1200px) px2em(1599px),
+///       small:     1200px 1599px,
-///       medium:    px2em(1600px) px2em(1999px),
+///       medium:    1600px 1999px,
-///       large:     px2em(2000px)
+///       large:     2000px
 ///     )
 ///   );
 ///

src/assets/stylesheets/layout/_content.scss

@@ -41,6 +41,9 @@
   &__inner {
     margin: 2.4rem 1.6rem;
 
+    // Hack: this is necessary for floating the edit button
+    overflow: auto;
+
     // [screen small +]: Add space for table of contents
     @include break-from-device(screen small) {
       margin: 2.4rem;

src/assets/stylesheets/layout/_footer.scss

@@ -29,15 +29,16 @@
   position: absolute;
   bottom: 0;
   width: 100%;
+}
 
 // Pagination container
-  &-pagination {
+.md-footer-pagination {
   background: $md-color-black;
   color: $md-color-white;
 }
 
 // Footer navigation
-  &-nav {
+.md-footer-nav {
   padding: 0.4rem;
   overflow: auto;
 
@@ -109,4 +110,3 @@
     font-size: 1.5rem;
   }
 }
-}

src/assets/stylesheets/layout/_header.scss

@@ -36,9 +36,10 @@
   background: $md-color-primary;
   color: $md-color-white;
   z-index: 1;
+}
 
 // Navigation within header
-  &-nav {
+.md-header-nav {
   padding: 0.4rem;
 
   // Header icon
@@ -74,4 +75,3 @@
     line-height: 4.8rem;
   }
 }
-}

src/assets/stylesheets/layout/_search.scss

@@ -67,6 +67,7 @@
     // [tablet +]: Header-embedded search
     @include break-from-device(tablet) {
       padding: 0.4rem;
+      padding-right: 3.2rem;
     }
   }
 
@@ -106,6 +107,7 @@
   &__input {
     padding: 0 0.8rem 0 6.4rem;
     border-radius: px2rem(2px);
+    text-overflow: ellipsis;
 
     // Placeholder and icon color in active state
     + .md-search__icon,
@@ -128,7 +130,7 @@
       transition: width            0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0),
                   background-color 0.25s,
                   color            0.25s;
-      background: $md-color-white--lightest;
+      background: $md-color-black--lighter;
       color: $md-color-white;
       font-size: ms(0);
 
@@ -141,14 +143,15 @@
 
       // Hovered search field
       &:hover {
-        background: $md-color-white--lighter;
+        background: $md-color-white--lightest;
       }
 
       // Active search field
       &:focus {
-        width: 72.8rem;
+        width: 66.8rem;
         background: $md-color-white;
         color: $md-color-black;
+        text-overflow: none;
 
         // Placeholder and icon color in active state
         + .md-search__icon,

src/assets/stylesheets/layout/_source.scss

@@ -34,7 +34,7 @@
   padding: 0 1.2rem;
   transition: opacity 0.25s;
   font-size: 1.3rem;
-  line-height: 1.4;
+  line-height: 1.2;
   white-space: nowrap;
   vertical-align: middle;
 
@@ -86,10 +86,39 @@
     overflow: hidden;
   }
 
-  // Repository statistics
+  // Source facts (statistics etc.)
-  &__stats {
+  &__facts {
+    margin: 0;
+    padding: 0;
     color: $md-color-white--light;
     font-size: 1.1rem;
     font-weight: 700;
+    list-style-type: none;
+  }
+
+  // Fact
+  &__fact {
+    float: left;
+    transform: translateY(0%);
+    transition: opacity   0.25s,
+                transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
+    opacity: 1;
+
+    &--hidden {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+
+    &::before {
+      margin: 0 0.2rem;
+      content: "\00B7";
+    }
+
+    &:first-child {
+
+      &::before {
+        display: none;
+      }
+    }
   }
 }