Maidan-hackaton
diff --git a/‎_layouts/default.html
Lines changed: 3 additions & 1 deletion b/‎_layouts/default.html
Lines changed: 3 additions & 1 deletion
diff --git a/‎assets/main.scss
Lines changed: 32 additions & 67 deletions b/‎assets/main.scss
Lines changed: 32 additions & 67 deletions
@@ -12,6 +12,8 @@
     <script src="javascripts/main.js"></script>
   </head>
   <body class="js-enabled">
-    {{ content }}
+    <div id="wrapper" class="{{page.wrapper_class}}">
+      {{ content }}
+    </div>
   </body>
 </html>
@@ -130,50 +130,54 @@ html {
     }
   }
 
-  nav {
+  ol {
     padding-bottom: 3px;
+  }
 
-    li {
-      list-style: none;
-    }
-
+  li {
+    list-style: none;
     a {
       text-decoration: none;
-
+      font-weight: bold;
+  
       &:hover,
       &:focus,
       &:active{
-        .caption {
-          text-decoration: underline;
-        }
+        text-decoration: underline;
       }
     }
+  }
 
-    .caption {
-      font-weight: bold;
-    }
+  ol {
+    counter-reset: design-principles-counter;
+  }
 
-    .icon {
-      position: relative;
-      float: left;
-      margin-left: $margin*-1;
-      width: $margin*0.75;
-      text-align: right;
-      color: $grey-1;
-      white-space: nowrap;
+  li:before {
+    content: counter(design-principles-counter);
+    counter-increment: design-principles-counter;
+  }
 
-      @media (max-width: 640px) {
-        margin-left: 0;
-        width: $margin*0.5;
-        text-align: left;
-      }
-    }
+  li:before {
+    position: relative;
+    float: left;
+    margin-left: $margin*-1;
+    width: $margin*0.75;
+    text-align: right;
+    color: $grey-1;
+    white-space: nowrap;
+    display: inline-block;
 
-    .current .icon {
-      color: $text-color;
+    @media (max-width: 640px) {
+      margin-left: 0;
+      width: $margin*0.5;
+      text-align: left;
     }
   }
 
+  .current .icon {
+    color: $text-color;
+  }
+
   h2 {
     @include core-24;
     font-weight: bold;
@@ -230,45 +234,6 @@ html {
         }
       }
 
-      &#first:before {
-        content: "1";
-      }
-
-      &#second:before {
-        content: "2";
-      }
-
-      &#third:before {
-        content: "3";
-      }
-
-      &#fourth:before {
-        content: "4";
-      }
-
-      &#fifth:before {
-        content: "5";
-      }
-
-      &#sixth:before {
-        content: "6";
-      }
-
-      &#seventh:before {
-        content: "7";
-      }
-
-      &#eighth:before {
-        content: "8";
-      }
-
-      &#ninth:before {
-        content: "9";
-      }
-
-      &#tenth:before {
-        content: "10";
-      }
     }
 
     h1#first+h2 {