add home specific code styles

tinacms · Jul 24, 2020 · 86af663 · 86af663
1 parent ee35cce
commit 86af663
Show file tree

Hide file tree

Showing 3 changed files with 196 additions and 4 deletions.
diff --git a/components/styles/CodeHome.tsx b/components/styles/CodeHome.tsx
@@ -0,0 +1,190 @@
+export default {
+  'code[class*="language-"]': {
+    color: '#2F3031',
+    background: 'none',
+    textShadow: '0 1px white',
+    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+    textAlign: 'left',
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    wordWrap: 'normal',
+    lineHeight: '1.5',
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: '4',
+    WebkitHyphens: 'none',
+    MozHyphens: 'none',
+    msHyphens: 'none',
+    hyphens: 'none',
+  },
+  'pre[class*="language-"]': {
+    color: '#2F3031',
+    background: '#EBFDFB',
+    textShadow: '0 1px white',
+    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+    textAlign: 'left',
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    wordWrap: 'normal',
+    lineHeight: '1.5',
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: '4',
+    WebkitHyphens: 'none',
+    MozHyphens: 'none',
+    msHyphens: 'none',
+    hyphens: 'none',
+    padding: '3em',
+    margin: '0',
+    overflow: 'auto',
+  },
+  'pre[class*="language-"]::-moz-selection': {
+    textShadow: 'none',
+    background: '#80AFE9',
+  },
+  'pre[class*="language-"] ::-moz-selection': {
+    textShadow: 'none',
+    background: '#80AFE9',
+  },
+  'code[class*="language-"]::-moz-selection': {
+    textShadow: 'none',
+    background: '#80AFE9',
+  },
+  'code[class*="language-"] ::-moz-selection': {
+    textShadow: 'none',
+    background: '#80AFE9',
+  },
+  'pre[class*="language-"]::selection': {
+    textShadow: 'none',
+    background: '#80AFE9',
+  },
+  'pre[class*="language-"] ::selection': {
+    textShadow: 'none',
+    background: '#80AFE9',
+  },
+  'code[class*="language-"]::selection': {
+    textShadow: 'none',
+    background: '#80AFE9',
+  },
+  'code[class*="language-"] ::selection': {
+    textShadow: 'none',
+    background: '#80AFE9',
+  },
+  ':not(pre) > code[class*="language-"]': {
+    background: '#f5f2f0',
+    padding: '.1em',
+    borderRadius: '.3em',
+    whiteSpace: 'normal',
+  },
+  comment: {
+    color: '#A3AFBD',
+  },
+  prolog: {
+    color: '#A3AFBD',
+  },
+  doctype: {
+    color: '#A3AFBD',
+  },
+  cdata: {
+    color: '#A3AFBD',
+  },
+  punctuation: {
+    color: '#999',
+  },
+  '.namespace': {
+    Opacity: '.7',
+  },
+  property: {
+    color: '#C61075',
+  },
+  tag: {
+    color: '#C61075',
+  },
+  boolean: {
+    color: '#C61075',
+  },
+  number: {
+    color: '#C61075',
+  },
+  constant: {
+    color: '#C61075',
+  },
+  symbol: {
+    color: '#C61075',
+  },
+  deleted: {
+    color: '#C61075',
+  },
+  selector: {
+    color: '#58A41D',
+  },
+  'attr-name': {
+    color: '#58A41D',
+  },
+  string: {
+    color: '#58A41D',
+  },
+  char: {
+    color: '#58A41D',
+  },
+  builtin: {
+    color: '#58A41D',
+  },
+  inserted: {
+    color: '#58A41D',
+  },
+  operator: {
+    color: '#BB7A3E',
+    background: 'hsla(0, 0%, 100%, .5)',
+  },
+  entity: {
+    color: '#BB7A3E',
+    background: 'hsla(0, 0%, 100%, .5)',
+    cursor: 'help',
+  },
+  url: {
+    color: '#BB7A3E',
+    background: 'hsla(0, 0%, 100%, .5)',
+  },
+  '.language-css .token.string': {
+    color: '#BB7A3E',
+    background: 'hsla(0, 0%, 100%, .5)',
+  },
+  '.style .token.string': {
+    color: '#BB7A3E',
+    background: 'hsla(0, 0%, 100%, .5)',
+  },
+  atrule: {
+    color: '#4096FF',
+  },
+  'attr-value': {
+    color: '#4096FF',
+  },
+  keyword: {
+    color: '#4096FF',
+  },
+  function: {
+    color: '#DD4A68',
+  },
+  'class-name': {
+    color: '#DD4A68',
+  },
+  regex: {
+    color: '#e90',
+  },
+  important: {
+    color: '#e90',
+    fontWeight: 'bold',
+  },
+  variable: {
+    color: '#e90',
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+  italic: {
+    fontStyle: 'italic',
+  },
+}
diff --git a/components/styles/home.module.scss b/components/styles/home.module.scss
@@ -665,12 +665,13 @@
 .whyGrid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  grid-gap: 10em 10em;
+  grid-gap: 7em 10em;
   padding: 6em 0;
   grid-auto-flow: row;
 }
 
 .whyGridContent {
+  padding-top: 3em;
   h3 {
     position: relative;
     display: block;

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -19,6 +19,7 @@ import {
 import TinaLogomarkSvg from 'public/svg/tina-logomark.svg'
 import WhyTinaBackground from 'public/svg/why-tina-background.svg'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import codeTheme from 'components/styles/CodeHome'
 
 interface Library {
   id: string
@@ -404,12 +405,12 @@ const HomePage = (props: any) => {
                 </p>
               </div>
               <div className={styles.whyGridCode}>
-                <SyntaxHighlighter language="javascript">
+                <SyntaxHighlighter language="javascript" style={codeTheme}>
                   {codeString}
                 </SyntaxHighlighter>
               </div>
               <div className={styles.whyGridCode}>
-                <SyntaxHighlighter language="javascript">
+                <SyntaxHighlighter language="javascript" style={codeTheme}>
                   {codeString}
                 </SyntaxHighlighter>
               </div>
@@ -435,7 +436,7 @@ const HomePage = (props: any) => {
                 </p>
               </div>
               <div className={styles.whyGridCode}>
-                <SyntaxHighlighter language="javascript">
+                <SyntaxHighlighter language="javascript" style={codeTheme}>
                   {codeString}
                 </SyntaxHighlighter>
               </div>