Merge pull request #433 from pastelsky/new-prism-theme

New dark prism theme

Author: SpaceK33z

styles/index.scss

@@ -46,6 +46,40 @@ a {
   }
 }
 
+details:focus, summary:focus{
+  outline: none;
+  background: rgba(255,255,255,0.03);
+  border-radius: 2px;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  /* Style details arrow if on webkit */
+
+  details summary::-webkit-details-marker {
+    color: getColor(malibu);
+  }
+
+  summary::-webkit-details-marker {
+    display: none
+  }
+  summary:after {
+    content: "\F103";
+    float: left;
+    position: relative;
+    left: -2px;
+    text-align: center;
+    font-family: icons;
+    color: lighten(getColor(denim), 10%)
+  }
+
+  details[open] summary:after {
+    content: "\F101";
+    font-family: icons;
+  }
+}
+
+
+
 ::selection {
   background: transparentize(getColor(malibu), 0.65);
 }

styles/markdown.scss

@@ -1,8 +1,7 @@
 // Markdown styling is based on https://gist.github.com/tuzz/3331384.
-
 @import 'vars';
 @import 'functions';
-@import '~prismjs/themes/prism-funky';
+@import 'prism-theme';
 
 .page__content,
 .splash__section {
@@ -166,31 +165,43 @@
     white-space: nowrap;
     background-color: transparentize(getColor(fiord), 0.94);
     border-radius: 3px;
-    text-shadow: 0 1px 0 transparentize(getColor(white), 0.5);
-    color: getColor(elephant);
+    text-shadow: 0 1px 0 transparentize(getColor(white), 0.4);
   }
 
   pre {
-    background-color:getColor(mine-shaft);
+    background-color: rgba(238, 238, 238, 0.35);
+    background-color: getColor(elephant);
     font-size: 13px;
     line-height: 19px;
     overflow: auto;
-    padding: 6px 10px;
+    padding: 8px 16px;
     border-radius: 3px;
 
     code {
       margin: 0;
       padding: 0;
       white-space: pre;
       border: none;
-      color:getColor(concrete);
       background: transparent;
-      text-shadow: none;
+      text-shadow: 0 1px 0 transparentize(darken(getColor(elephant), 10%), 0.5);
+      color: desaturate(getColor(malibu), 40%);
 
       .code-details-summary-span {
         margin-left: -15px;
         cursor: pointer;
       }
+
+      a {
+        border-bottom: 1px dotted getColor(denim);
+      }
+
+      .code-link {
+        position: relative;
+
+        &:hover {
+          color: lighten(getColor(denim), 15%);
+        }
+      }
     }
 
     code, tt {

styles/prism-theme.scss

@@ -0,0 +1,109 @@
+@import 'functions';
+
+code[class*="lang-"],
+pre[class*="lang-"] {
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  tab-size: 4;
+  hyphens: none;
+  //color: getColor(fiord);
+  color: desaturate(getColor(malibu), 40%);
+
+  a {
+    color: inherit;
+  }
+}
+
+/* Code blocks */
+pre[class*="lang-"] {
+  padding: .4em .8em;
+  margin: .5em 0;
+  overflow: auto;
+  //background-color: rgba(238,238,238,0.35);
+  background-color: getColor(elephant);
+}
+
+/* Inline code */
+:not(pre) > code[class*="lang-"] {
+  padding: .2em;
+  border-radius: .3em;
+  box-shadow: none;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #77858c;
+}
+
+.token.punctuation {
+  color: #e1e6e9;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.function{
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol {
+  color: desaturate(darken(getColor(malibu), 15%), 15%);
+}
+
+.token.selector,
+.token.string,
+.token.char,
+.token.builtin,
+.token.regex,
+.token.attr-value,
+.token.important {
+  color: desaturate(#2dd271, 25%)
+}
+
+.token.inserted {
+  color: #9df29d;
+}
+
+.token.deleted {
+  color: #f79494;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.toke.variable {
+  color: #a9becc;
+}
+
+.token.atrule,
+.token.attr-name,
+.token.keyword,
+.token.function {
+  color: darken(desaturate(getColor(malibu), 30%), 15%);
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}