Update

Author: taufik-nurrohman

.factory/index.css.scss

@@ -183,6 +183,7 @@ abbr {
 
 audio,
 iframe,
+picture,
 video {
   display: block;
   height: auto;
@@ -248,7 +249,6 @@ code {
 details {
   > summary {
     @extend %label;
-    cursor: pointer;
     display: block;
     padding-left: 15px;
     position: relative;
@@ -381,14 +381,16 @@ legend {
 
 mark {
   background: #fff399;
-  color: inherit;
 }
 
 ol {
   list-style: decimal;
 }
 
-small,
+small {
+  @extend %small;
+}
+
 sub,
 sup {
   @extend %small;
@@ -432,19 +434,6 @@ pre {
   }
 }
 
-.aside {
-  width: 280px;
-}
-
-.body {
-  background: #fff;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
-  margin: 50px auto;
-  padding: 15px;
-  position: relative;
-  width: 900px;
-}
-
 button,
 input,
 output,
@@ -616,6 +605,43 @@ textarea {
   opacity: 0.6;
 }
 
+[role='button'] {
+  @extend button;
+  &:focus,
+  &:hover,
+  &:active {
+    color: #fff;
+    text-decoration: none;
+  }
+  &:not(:any-link) {
+    @extend :disabled;
+  }
+}
+
+[role='deletion'] {
+  @extend del;
+}
+
+[role='img'] {
+  @extend img;
+}
+
+[role='insertion'] {
+  @extend ins;
+}
+
+[role='link'] {
+  @extend a;
+}
+
+[role='mark'] {
+  @extend mark;
+}
+
+.aside {
+  width: 280px;
+}
+
 .banner {
   background: #f2f0f1;
   margin: 0;
@@ -635,6 +661,15 @@ textarea {
   }
 }
 
+.body {
+  background: #fff;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+  margin: 50px auto;
+  padding: 15px;
+  position: relative;
+  width: 900px;
+}
+
 .content {
   background: #fff linear-gradient(#f2f2f2, #fff) repeat-x 0 0;
   background-size: 100% 350px;
@@ -792,16 +827,6 @@ textarea {
   line-height: 45px;
   margin: 0;
   text-transform: uppercase;
-  ul,
-  li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-  }
   a {
     @extend %label;
     border: {
@@ -820,14 +845,26 @@ textarea {
       background: rgba(0, 0, 0, 0.045);
     }
   }
+  li,
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
   mark {
     background: rgba(0, 0, 0, 0.125);
   }
   li {
-    &:first-child a {
-      border-left-width: 0;
+    &:first-child {
+      a {
+        border-left-width: 0;
+      }
     }
   }
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+  }
   + h2 {
     display: none;
     + ul {
@@ -1045,39 +1082,6 @@ textarea {
   }
 }
 
-[role='button'] {
-  @extend button;
-  &:focus,
-  &:hover,
-  &:active {
-    color: #fff;
-    text-decoration: none;
-  }
-  &:not(:any-link) {
-    @extend :disabled;
-  }
-}
-
-[role='deletion'] {
-  @extend del;
-}
-
-[role='img'] {
-  @extend img;
-}
-
-[role='insertion'] {
-  @extend ins;
-}
-
-[role='link'] {
-  @extend a;
-}
-
-[role='mark'] {
-  @extend mark;
-}
-
 @import './_/x/alert';
 @import './_/x/comment';
 @import './_/x/markdown';

index.css

@@ -216,9 +216,9 @@ s {
   text-decoration: line-through;
 }
 
-small,
 sub,
-sup {
+sup,
+small {
   font-size: 90%;
 }
 
@@ -237,6 +237,7 @@ abbr[title]:hover {
 
 audio,
 iframe,
+picture,
 video {
   display: block;
   height: auto;
@@ -272,7 +273,6 @@ code {
 }
 
 details > summary {
-  cursor: pointer;
   display: block;
   padding-left: 15px;
   position: relative;
@@ -388,14 +388,12 @@ legend {
 mark,
 [role=mark] {
   background: #fff399;
-  color: inherit;
 }
 
 ol {
   list-style: decimal;
 }
 
-small,
 sub,
 sup {
   position: relative;
@@ -439,19 +437,6 @@ pre code {
   padding: 10px;
 }
 
-.aside {
-  width: 280px;
-}
-
-.body {
-  background: #fff;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
-  margin: 50px auto;
-  padding: 15px;
-  position: relative;
-  width: 900px;
-}
-
 button,
 [role=button],
 input[type=button],
@@ -589,6 +574,16 @@ textarea {
   opacity: 0.6;
 }
 
+[role=button]:focus,
+[role=button]:hover,
+[role=button]:active {
+  color: #fff;
+  text-decoration: none;
+}
+.aside {
+  width: 280px;
+}
+
 .banner {
   background: #f2f0f1;
   margin: 0;
@@ -607,6 +602,15 @@ textarea {
   display: none;
 }
 
+.body {
+  background: #fff;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+  margin: 50px auto;
+  padding: 15px;
+  position: relative;
+  width: 900px;
+}
+
 .content {
   background: #fff linear-gradient(#f2f2f2, #fff) repeat-x 0 0;
   background-size: 100% 350px;
@@ -761,16 +765,6 @@ textarea {
   margin: 0;
   text-transform: uppercase;
 }
-.nav ul,
-.nav li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.nav ul {
-  display: flex;
-  flex-wrap: wrap;
-}
 .nav a,
 .nav [role=link] {
   border-left: 1px solid rgba(255, 255, 255, 0.175);
@@ -790,6 +784,12 @@ textarea {
 .nav [role=link]:active {
   background: rgba(0, 0, 0, 0.045);
 }
+.nav li,
+.nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
 .nav mark,
 .nav [role=mark] {
   background: rgba(0, 0, 0, 0.125);
@@ -798,6 +798,10 @@ textarea {
 .nav li:first-child [role=link] {
   border-left-width: 0;
 }
+.nav ul {
+  display: flex;
+  flex-wrap: wrap;
+}
 .nav + h2 {
   display: none;
 }
@@ -992,12 +996,6 @@ textarea {
   display: table;
 }
 
-[role=button]:focus,
-[role=button]:hover,
-[role=button]:active {
-  color: #fff;
-  text-decoration: none;
-}
 [role=alert] {
   background: #ffffd8;
   border: 1px solid rgba(0, 0, 0, 0.125);