gruvbox syntax highlight

hugo gen chromastyles --style=gruvbox > syntax.scss

2 files changed, 359 insertions, 4 deletions

diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 40155e5..2e1df53 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -1,8 +1,5 @@
 @import "tachyons/css/tachyons";
-
-div.highlight pre {
-  overflow-x: scroll;
-}
+@import "syntax";
 
 .header ul {
   clear: both;
@@ -149,6 +146,10 @@ div.highlight pre {
   p code {
     @extend .bg-black-30, .ph1, .br2;
   }
+
+  div.highlight pre.chroma {
+    @extend .br2, .overflow-x-scroll;
+  }
 }
 footer {
   a {
diff --git a/assets/scss/syntax.scss b/assets/scss/syntax.scss
new file mode 100644
index 0000000..1163569
--- /dev/null
+++ b/assets/scss/syntax.scss
@@ -0,0 +1,354 @@
+/* Background */
+.bg {
+  color: #ebdbb2;
+  background-color: #282828;
+}
+/* PreWrapper */
+.chroma {
+  color: #ebdbb2;
+  background-color: #282828;
+}
+/* Other */
+.chroma .x {
+}
+/* Error */
+.chroma .err {
+}
+/* CodeLine */
+.chroma .cl {
+}
+/* LineLink */
+.chroma .lnlinks {
+  outline: none;
+  text-decoration: none;
+  color: inherit;
+}
+/* LineTableTD */
+.chroma .lntd {
+  vertical-align: top;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+/* LineTable */
+.chroma .lntable {
+  border-spacing: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+/* LineHighlight */
+.chroma .hl {
+  background-color: #3d3d3d;
+}
+/* LineNumbersTable */
+.chroma .lnt {
+  white-space: pre;
+  -webkit-user-select: none;
+  user-select: none;
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: #756d59;
+}
+/* LineNumbers */
+.chroma .ln {
+  white-space: pre;
+  -webkit-user-select: none;
+  user-select: none;
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: #756d59;
+}
+/* Line */
+.chroma .line {
+  display: flex;
+}
+/* Keyword */
+.chroma .k {
+  color: #fe8019;
+}
+/* KeywordConstant */
+.chroma .kc {
+  color: #fe8019;
+}
+/* KeywordDeclaration */
+.chroma .kd {
+  color: #fe8019;
+}
+/* KeywordNamespace */
+.chroma .kn {
+  color: #fe8019;
+}
+/* KeywordPseudo */
+.chroma .kp {
+  color: #fe8019;
+}
+/* KeywordReserved */
+.chroma .kr {
+  color: #fe8019;
+}
+/* KeywordType */
+.chroma .kt {
+  color: #fabd2f;
+}
+/* Name */
+.chroma .n {
+}
+/* NameAttribute */
+.chroma .na {
+  color: #b8bb26;
+  font-weight: bold;
+}
+/* NameBuiltin */
+.chroma .nb {
+  color: #fabd2f;
+}
+/* NameBuiltinPseudo */
+.chroma .bp {
+}
+/* NameClass */
+.chroma .nc {
+}
+/* NameConstant */
+.chroma .no {
+  color: #d3869b;
+}
+/* NameDecorator */
+.chroma .nd {
+}
+/* NameEntity */
+.chroma .ni {
+  color: #fabd2f;
+}
+/* NameException */
+.chroma .ne {
+  color: #fb4934;
+}
+/* NameFunction */
+.chroma .nf {
+  color: #fabd2f;
+}
+/* NameFunctionMagic */
+.chroma .fm {
+}
+/* NameLabel */
+.chroma .nl {
+  color: #fb4934;
+}
+/* NameNamespace */
+.chroma .nn {
+}
+/* NameOther */
+.chroma .nx {
+}
+/* NameProperty */
+.chroma .py {
+}
+/* NameTag */
+.chroma .nt {
+  color: #fb4934;
+}
+/* NameVariable */
+.chroma .nv {
+}
+/* NameVariableClass */
+.chroma .vc {
+}
+/* NameVariableGlobal */
+.chroma .vg {
+}
+/* NameVariableInstance */
+.chroma .vi {
+}
+/* NameVariableMagic */
+.chroma .vm {
+}
+/* Literal */
+.chroma .l {
+}
+/* LiteralDate */
+.chroma .ld {
+}
+/* LiteralString */
+.chroma .s {
+  color: #b8bb26;
+}
+/* LiteralStringAffix */
+.chroma .sa {
+  color: #b8bb26;
+}
+/* LiteralStringBacktick */
+.chroma .sb {
+  color: #b8bb26;
+}
+/* LiteralStringChar */
+.chroma .sc {
+  color: #b8bb26;
+}
+/* LiteralStringDelimiter */
+.chroma .dl {
+  color: #b8bb26;
+}
+/* LiteralStringDoc */
+.chroma .sd {
+  color: #b8bb26;
+}
+/* LiteralStringDouble */
+.chroma .s2 {
+  color: #b8bb26;
+}
+/* LiteralStringEscape */
+.chroma .se {
+  color: #b8bb26;
+}
+/* LiteralStringHeredoc */
+.chroma .sh {
+  color: #b8bb26;
+}
+/* LiteralStringInterpol */
+.chroma .si {
+  color: #b8bb26;
+}
+/* LiteralStringOther */
+.chroma .sx {
+  color: #b8bb26;
+}
+/* LiteralStringRegex */
+.chroma .sr {
+  color: #b8bb26;
+}
+/* LiteralStringSingle */
+.chroma .s1 {
+  color: #b8bb26;
+}
+/* LiteralStringSymbol */
+.chroma .ss {
+  color: #83a598;
+}
+/* LiteralNumber */
+.chroma .m {
+  color: #d3869b;
+}
+/* LiteralNumberBin */
+.chroma .mb {
+  color: #d3869b;
+}
+/* LiteralNumberFloat */
+.chroma .mf {
+  color: #d3869b;
+}
+/* LiteralNumberHex */
+.chroma .mh {
+  color: #d3869b;
+}
+/* LiteralNumberInteger */
+.chroma .mi {
+  color: #d3869b;
+}
+/* LiteralNumberIntegerLong */
+.chroma .il {
+  color: #d3869b;
+}
+/* LiteralNumberOct */
+.chroma .mo {
+  color: #d3869b;
+}
+/* Operator */
+.chroma .o {
+  color: #fe8019;
+}
+/* OperatorWord */
+.chroma .ow {
+  color: #fe8019;
+}
+/* Punctuation */
+.chroma .p {
+}
+/* Comment */
+.chroma .c {
+  color: #928374;
+  font-style: italic;
+}
+/* CommentHashbang */
+.chroma .ch {
+  color: #928374;
+  font-style: italic;
+}
+/* CommentMultiline */
+.chroma .cm {
+  color: #928374;
+  font-style: italic;
+}
+/* CommentSingle */
+.chroma .c1 {
+  color: #928374;
+  font-style: italic;
+}
+/* CommentSpecial */
+.chroma .cs {
+  color: #928374;
+  font-style: italic;
+}
+/* CommentPreproc */
+.chroma .cp {
+  color: #8ec07c;
+}
+/* CommentPreprocFile */
+.chroma .cpf {
+  color: #8ec07c;
+  font-style: italic;
+}
+/* Generic */
+.chroma .g {
+}
+/* GenericDeleted */
+.chroma .gd {
+  color: #282828;
+  background-color: #fb4934;
+}
+/* GenericEmph */
+.chroma .ge {
+  color: #83a598;
+  text-decoration: underline;
+}
+/* GenericError */
+.chroma .gr {
+  background-color: #fb4934;
+  font-weight: bold;
+}
+/* GenericHeading */
+.chroma .gh {
+  color: #b8bb26;
+  font-weight: bold;
+}
+/* GenericInserted */
+.chroma .gi {
+  color: #282828;
+  background-color: #b8bb26;
+}
+/* GenericOutput */
+.chroma .go {
+  color: #504945;
+}
+/* GenericPrompt */
+.chroma .gp {
+}
+/* GenericStrong */
+.chroma .gs {
+}
+/* GenericSubheading */
+.chroma .gu {
+  color: #b8bb26;
+  font-weight: bold;
+}
+/* GenericTraceback */
+.chroma .gt {
+  background-color: #fb4934;
+  font-weight: bold;
+}
+/* GenericUnderline */
+.chroma .gl {
+}
+/* TextWhitespace */
+.chroma .w {
+}