app.css in lookbook-0.7.0

- old
+ new

@@ -56,11 +56,11 @@
     @apply bg-gray-400;
   }
 }
 
 @layer components {
-  #nav > ul > li > div {
+  .unsectioned > #nav > ul > li > div {
     @apply py-1 border-b border-gray-300;
   }
 
   .nav-toggle {
     @apply flex items-center cursor-pointer pr-3 hover:bg-gray-200 hover:bg-opacity-50;
@@ -85,21 +85,21 @@
   .code .line {
     @apply leading-relaxed;
   }
 
   .code.numbered {
-    @apply relative pt-3;
+    @apply relative;
   }
 
   .code.numbered:before {
     content: "";
     left: 2.7em;
     @apply absolute top-0 bottom-0 border-r border-gray-200;
   }
 
   .code.numbered .line {
-    padding-left: calc(2.7em + 8px);
+    padding-left: calc(2.7em + 14px);
     @apply relative;
   }
 
   .code .line-number {
     display: inline-block;
@@ -111,9 +111,21 @@
     @apply font-mono text-right text-gray-400 flex-none text-xs absolute left-0;
   }
 
   .code .line-content {
     @apply flex-none pr-4;
+  }
+
+  .prose .code {
+    @apply !bg-white border border-gray-300 text-gray-600 my-8 text-sm rounded-md py-4 overflow-auto max-w-3xl w-full mx-auto;
+  }
+
+  .prose .code:not(.numbered) .line {
+    @apply px-4;
+  }
+
+  .prose .embed {
+    @apply my-8;
   }
 
   .resize-handle {
     @apply flex items-center justify-center h-full w-full border-gray-300 bg-white hover:bg-indigo-100 hover:bg-opacity-20 text-gray-400 hover:text-gray-700 transition select-none touch-none;
   }