From e1b4c6efa231b097e0ea5ebfbb6b6bbc174f3a1d Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Thu, 1 Apr 2021 16:04:59 +0700 Subject: [PATCH] Tweak colors --- .babelrc | 2 +- client/components/SampleCode.tsx | 9 ---- client/components/coverCard.css | 2 +- client/components/heading.css | 3 +- client/index.css | 76 ++++++++++++++++++++++++++-- client/layouts/footer.css | 7 +-- client/layouts/header.css | 2 +- client/pages/homePage.css | 8 +-- client/placeholders/browserFrame.css | 4 +- 9 files changed, 90 insertions(+), 23 deletions(-) diff --git a/.babelrc b/.babelrc index e070296..f9a34ac 100644 --- a/.babelrc +++ b/.babelrc @@ -3,7 +3,7 @@ "@loadable/babel-plugin", ["prismjs", { "languages": ["css", "html", "javascript", "jsx", "tsx"], - "theme": "twilight", + // "theme": "okaidia", "css": true }] ], diff --git a/client/components/SampleCode.tsx b/client/components/SampleCode.tsx index 409a1d2..cafb366 100644 --- a/client/components/SampleCode.tsx +++ b/client/components/SampleCode.tsx @@ -19,15 +19,6 @@ const SampleCode: React.FC = ({ code, fullHeight = false, lang : ( 
             );
diff --git a/client/components/coverCard.css b/client/components/coverCard.css
index 242d4b4..2247ed7 100644
--- a/client/components/coverCard.css
+++ b/client/components/coverCard.css
@@ -5,7 +5,7 @@
 
 .cover {
     align-items: center;
-    color: var(--text-color);
+    color: var(--color-gray-9);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
diff --git a/client/components/heading.css b/client/components/heading.css
index be15e9a..11077a6 100644
--- a/client/components/heading.css
+++ b/client/components/heading.css
@@ -4,6 +4,7 @@
  */
 
 .heading {
+    color: var(--color-gray-9);
     display: grid;
     font-size: 2rem;
     grid-template-columns: 1fr auto 1fr;
@@ -13,6 +14,6 @@
 .heading::before,
 .heading::after {
     align-self: center;
-    border-top: 0.25rem double var(--text-color);
+    border-top: 0.25rem double var(--color-gray-9);
     content: '';
 }
diff --git a/client/index.css b/client/index.css
index f35b8bf..4f05de5 100644
--- a/client/index.css
+++ b/client/index.css
@@ -5,7 +5,11 @@
 
 :root {
     --background-color: #e7d900;
-    --text-color: #111827;
+    --color-blue-6: #2563EB;
+    --color-gray-2: #E5E7EB;
+    --color-gray-5: #6B7280;
+    --color-gray-8: #27272A;
+    --color-gray-9: #111827;
 } 
 body {
     font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -60,19 +64,85 @@ a {
     width: 20rem;
 }
 .hero__heading {
-    color: var(--text-color);
+    color: var(--color-gray-9);
     font-size: 2rem;
     line-height: 1.5;
     text-align: center;
     text-transform: capitalize;
 }
 .hero__subheading {
-    color: var(--text-color);
+    color: var(--color-gray-9);
     font-size: 1.5rem;
     line-height: 1.5;
     text-align: center;
 }
 
+/*
+Prism theme
+Credit to https://github.com/tailwindlabs/tailwindcss.com/blob/master/src/css/prism.css
+*/
+pre {
+    background: var(--color-gray-8);
+    border: none;
+    border-radius: 0px;
+    box-shadow: none;
+    color: #FFF;
+    font-family: "Source Code Pro", monospace;
+    height: 100%;
+    line-height: 1.5;
+    margin: 0px;
+    overflow: auto;
+    padding: 1rem;
+}
+
+.token.tag,
+.token.class-name,
+.token.selector,
+.token.selector .class,
+.token.function {
+    color: #E879F9;
+}
+
+.token.attr-name,
+.token.keyword,
+.token.rule,
+.token.operator,
+.token.pseudo-class,
+.token.important {
+    color: #22D3EE;
+}
+
+.token.attr-value,
+.token.class,
+.token.string,
+.token.number,
+.token.unit,
+.token.color {
+    color: #BEF264;
+}
+
+.token.punctuation,
+.token.module,
+.token.property {
+    color: #BAE6FD;
+}
+
+.token.atapply .token:not(.rule):not(.important) {
+    color: inherit;
+}
+
+.language-shell .token:not(.comment) {
+    color: inherit;
+}
+
+.language-css .token.function {
+    color: inherit;
+}
+
+.token.comment {
+    color: #A1A1AA;
+}
+
 /* Responsive */
 @media (min-width: 640px) {
     .sidebar {
diff --git a/client/layouts/footer.css b/client/layouts/footer.css
index e5d4061..2457bdf 100644
--- a/client/layouts/footer.css
+++ b/client/layouts/footer.css
@@ -7,7 +7,8 @@
     padding: 2rem 0;
 }
 .footer__about {
-    border-bottom: 1px solid rgba(0, 0, 0, .3);
+    border-bottom: 1px solid var(--color-gray-2);
+    color: var(--color-gray-9);
     display: flex;
     margin-bottom: 1rem;
     padding-bottom: 1rem;
@@ -17,7 +18,7 @@
 }
 .footer__social {
     margin-left: 0.5rem;
-    color: var(--text-color);
+    color: var(--color-gray-5);
 }
 .footer__grid {
     margin-left: -1rem;
@@ -37,7 +38,7 @@
     margin: 0.25rem 0;
 }
 .footer__product a {
-    color: var(--text-color);
+    color: var(--color-gray-5);
 }
 @media (min-width: 640px) {
     .footer__grid {
diff --git a/client/layouts/header.css b/client/layouts/header.css
index d54ee0c..68b06d6 100644
--- a/client/layouts/header.css
+++ b/client/layouts/header.css
@@ -16,6 +16,6 @@
     margin-right: auto;
 }
 .header__nav a {
-    color: var(--text-color);
+    color: var(--color-gray-9);
     margin-left: 1rem;
 }
\ No newline at end of file
diff --git a/client/pages/homePage.css b/client/pages/homePage.css
index 84735f2..50504da 100644
--- a/client/pages/homePage.css
+++ b/client/pages/homePage.css
@@ -15,12 +15,13 @@
     width: 50%;
 }
 .home__icon {
-    color: #1e1d6e;
+    color: var(--color-blue-6);
     margin-bottom: 1rem;
 }
 .home__title {
+    color: var(--color-gray-5);
     font-size: 1.5rem;
-    font-weight: 500;
+    font-weight: 600;
 }
 
 .home__patterns {
@@ -42,6 +43,7 @@
     z-index: 10;
 }
 .home__heading {
+    color: var(--color-gray-9);
     font-size: 4rem;
     font-weight: 600;
     margin-bottom: 1rem;
@@ -49,7 +51,7 @@
 .home__explore {
     background-color: var(--background-color);
     border-radius: 0.4rem;
-    color: var(--text-color);
+    color: var(--color-gray-9);
     font-size: 1.5rem;
     font-weight: 600;
     padding: 1rem 2rem;
diff --git a/client/placeholders/browserFrame.css b/client/placeholders/browserFrame.css
index 995ef74..06dde34 100644
--- a/client/placeholders/browserFrame.css
+++ b/client/placeholders/browserFrame.css
@@ -7,12 +7,14 @@
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 0.25rem;
 }
+
 .demo__live {
     height: 32rem;
 }
+
 .demo__css,
 .demo__html {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
     height: 16rem;
     overflow: auto;
 }
\ No newline at end of file