diff --git a/client/components/SampleCode.tsx b/client/components/SampleCode.tsx index c210a4b..8359734 100644 --- a/client/components/SampleCode.tsx +++ b/client/components/SampleCode.tsx @@ -4,15 +4,21 @@ import highlight from '../helpers/highlight'; interface SampleCodeProps { code: string; + fullHeight?: boolean; lang: string; } -const SampleCode: React.FC = ({ code, lang }) => { +const SampleCode: React.FC = ({ code, fullHeight = false, lang }) => { return code === '' ? <> : ( 
             );
diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index bc567e3..e8e6681 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -1,4 +1,5 @@
 enum Pattern {
+    AvatarList = 'Avatar list',
     Badge = 'Badge',
     Breadcrumb = 'Breadcrumb',
     ButtonWithIcon = 'Button with icon',
@@ -8,6 +9,8 @@ enum Pattern {
     DotLeader = 'Dot leader',
     DotNavigation = 'Dot navigation',
     DropArea = 'Drop area',
+    DropCap = 'Drop cap',
+    Dropdown = 'Dropdown',
     FeatureList = 'Feature list',
     FixedAtCorner = 'Fixed at corner',
     FloatingLabel = 'Floating label',
@@ -18,6 +21,7 @@ enum Pattern {
     Modal = 'Modal',
     Notification = 'Notification',
     Pagination = 'Pagination',
+    PresenceIndicator = 'Presence indicator',
     PreviousNextButtons = 'Previous next buttons',
     PricingTable = 'Pricing table',
     PropertyList = 'Property list',
@@ -40,6 +44,7 @@ enum Pattern {
     Switch = 'Switch',
     Tab = 'Tab',
     TogglePasswordVisibility = 'Toggle password visibility',
+    UploadButton = 'Upload button',
     Wizard = 'Wizard',
 }
 
diff --git a/client/helpers/highlight.ts b/client/helpers/highlight.ts
index 44884ce..96a2ff0 100755
--- a/client/helpers/highlight.ts
+++ b/client/helpers/highlight.ts
@@ -1,6 +1,8 @@
 import hljs from 'highlight.js/lib/highlight'; // tslint:disable-line
+import javascript from 'highlight.js/lib/languages/javascript'; // tslint:disable-line
 import html from 'highlight.js/lib/languages/xml'; // tslint:disable-line
 
+hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('html', html);
 
 const highlight = (input: string, language: string) => {
@@ -8,7 +10,7 @@ const highlight = (input: string, language: string) => {
     const { value } = hljs.highlight(lang, input);
     const highlighted = value.replace('&', '&').trim();
 
-    return `${highlighted}`;
+    return `${highlighted}`;
 };
 
 export default highlight;
diff --git a/client/index.css b/client/index.css
index 812caae..1185715 100644
--- a/client/index.css
+++ b/client/index.css
@@ -10,8 +10,6 @@ input[type="email"], input[type="number"], input[type="password"], input[type="t
 }
 .hljs, code {
     font-family: 'Source Code Pro', monospace;
-}
-code {
     font-size: 14px;
 }
 .drop-cap:first-letter {
diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx
index 63782e5..3fcd9dd 100644
--- a/client/layouts/DetailsLayout.tsx
+++ b/client/layouts/DetailsLayout.tsx
@@ -49,9 +49,6 @@ const DetailsLayout: React.FC = ({ title, children }) => {
                 style={{
                     border: '1px solid rgba(0, 0, 0, 0.2)',
                     borderBottomColor: 'transparent',
-                    borderTopLeftRadius: '16px',
-                    borderTopRightRadius: '16px',
-                    marginTop: '32px',
                     position: 'relative',
                 }}
             >
diff --git a/client/layouts/Footer.tsx b/client/layouts/Footer.tsx
index dee9e6f..e9caff6 100644
--- a/client/layouts/Footer.tsx
+++ b/client/layouts/Footer.tsx
@@ -5,8 +5,8 @@ const Footer: React.FC<{}> = () => {
         

@@ -32,7 +32,6 @@ const Footer: React.FC<{}> = () => {
                 >
                     
  • 
                         
     = () => {
                 >
                     
  • 
                         
     = ({ children }) => {
@@ -11,66 +12,26 @@ const Layout: React.FC<{}> = ({ children }) => {
         
    
             {children}
             
    
-            
+            
    
+                 lint(r))                           /* tslint */
+    .then((r) => lazyLoad(r))                       /* @loadable/component */
+    .then((r) => optimizeAndBundle(r))              /* webpack */
+    .then((r) => exportHtml(r))                     /* react-snap */
+    .then((r) => deploy(r))                         /* Netlify */
+    .then((r) => {
+        expect(r).is(scalableCode);
+        expect(r).is(superFastWebsite);
+        expect(r).is(seoFriendly);
+    })
+    .finally(() => {/* Give me 1 star */}) 🎉       /* https://github.com/phuoc-ng/csslayout */
+`}
+                />
+            
    
         
    
     );
 };
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 57bb5cf..c93b560 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -30,8 +30,6 @@ const ExplorePage = () => {
                 style={{
                     border: '1px solid rgba(0, 0, 0, 0.2)',
                     borderBottomColor: 'transparent',
-                    borderTopLeftRadius: '16px',
-                    borderTopRightRadius: '16px',
                     marginTop: '32px',
                     position: 'relative',
                 }}
@@ -85,6 +83,7 @@ const ExplorePage = () => {
                     
 
                     
    
+                        
                         
                         
                         
@@ -94,6 +93,8 @@ const ExplorePage = () => {
                         
                         
                         
+                        
+                        
                         
                         
                         
@@ -103,6 +104,7 @@ const ExplorePage = () => {
                         
                         
                         
+                        
                         
                         
                         
@@ -121,6 +123,7 @@ const ExplorePage = () => {
                         
                         
                         
+                        
                         
                     
    
                 
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 3ffb173..935fba9 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -17,8 +17,6 @@ const HomePage = () => {
                 style={{
                     border: '1px solid rgba(0, 0, 0, 0.2)',
                     borderBottomColor: 'transparent',
-                    borderTopLeftRadius: '8px',
-                    borderTopRightRadius: '8px',
                     marginTop: '64px',
                 }}
             >
@@ -197,6 +195,7 @@ const HomePage = () => {
                         
                         
                         
+                        
                         
                         
                         
@@ -206,6 +205,8 @@ const HomePage = () => {
                         
                         
                         
+                        
+                        
                         
                         
                         
@@ -215,6 +216,7 @@ const HomePage = () => {
                         
                         
                         
+                        
                         
                         
                         
@@ -233,6 +235,7 @@ const HomePage = () => {
                         
                         
                         
+                        
                         
                     
    • 
                 
diff --git a/client/patterns/avatar-list/Cover.tsx b/client/patterns/avatar-list/Cover.tsx
new file mode 100644
index 0000000..3bbd3f4
--- /dev/null
+++ b/client/patterns/avatar-list/Cover.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        
+            
    
+                {
+                    Array(3).fill(null).map((_, i) => {
+                        return (
+                            
    
+                                
    
+                                    {i + 1}
+                                
    
+                            
    
+                        );
+                    })
+                }
+            
    
+        
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/avatar-list/Details.tsx b/client/patterns/avatar-list/Details.tsx
new file mode 100644
index 0000000..e4a39fa
--- /dev/null
+++ b/client/patterns/avatar-list/Details.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Avatar: React.FC<{}> = ({ children }) => {
+    return (
+        
    
+            {children}
+        
    
+    );
+};
+
+const Details: React.FC<{}> = () => {
+    return (
+        
+            
    
+                
+                            
    
+                            
    
+                            
    
+                            
    
+                            
    +5
    
+                        
    
+                    )}
+                    source={`
+
    
+    
+    
    
+        
    
+            
+            ...
+        
    
+    
    
+
+    
+    ...
+
    
+`}
+                />
+            
+            
+    );
+};
+
+export default Details;
diff --git a/client/patterns/docked-at-corner/Details.tsx b/client/patterns/docked-at-corner/Details.tsx
index 8329dae..eeb3c45 100644
--- a/client/patterns/docked-at-corner/Details.tsx
+++ b/client/patterns/docked-at-corner/Details.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
 import Heading from '../../components/Heading';
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -138,6 +140,7 @@ const Details: React.FC<{}> = () => {
                     
                 
             
+            
         
     );
 };
diff --git a/client/patterns/drop-cap/Cover.tsx b/client/patterns/drop-cap/Cover.tsx
new file mode 100644
index 0000000..533ea47
--- /dev/null
+++ b/client/patterns/drop-cap/Cover.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        
+            
    
+                
    
+                    
    
+                        
+                    
    
+                    
    
+                        
    
+                        
    
+                        
    
+                        
    
+                        
    
+                        
    
+                        
    
+                    
    
+                
    
+                
    
+                    
    
+                    
    
+                    
    
+                    
    
+                    
    
+                
    
+            
    
+        
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/drop-cap/Details.tsx b/client/patterns/drop-cap/Details.tsx
new file mode 100644
index 0000000..f17e8d9
--- /dev/null
+++ b/client/patterns/drop-cap/Details.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import './dropcap.css';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import Square from '../../placeholders/Square';
+
+const Details: React.FC<{}> = () => {
+    return (
+        
+            
    
+                
+                            
    
+                                
    
+                                    Cascading Style Sheets (CSS) is a style sheet language used for
+                                    describing the presentation of a document written in a markup
+                                    language like HTML. CSS is a cornerstone technology of the World Wide Web,
+                                    alongside HTML and JavaScript.
+                                
    
+                            
    
+                        
    
+                    )}
+                    source={`
+
+
+
    
+    ...
+
    
+`}
+                />
+            
+            
+    );
+};
+
+export default Details;
diff --git a/client/patterns/drop-cap/dropcap.css b/client/patterns/drop-cap/dropcap.css
new file mode 100644
index 0000000..8959409
--- /dev/null
+++ b/client/patterns/drop-cap/dropcap.css
@@ -0,0 +1,9 @@
+.p-drop-cap:first-letter {
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    float: left;
+    font-size: 64px;
+    font-weight: 700;
+    line-height: 1;
+    margin: 0 8px 0 0;
+    padding: 0 8px; 
+}
diff --git a/client/patterns/dropdown/Cover.tsx b/client/patterns/dropdown/Cover.tsx
new file mode 100644
index 0000000..e45d4a4
--- /dev/null
+++ b/client/patterns/dropdown/Cover.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+import Triangle from '../../placeholders/Triangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        
+            
    
+                
    
+                    
+                
    
+                
    
+                    
    
+                        
+                    
    
+                    
    
+                        
    
+                    
    
+                    
    
+                        
    
+                    
    
+                
    
+            
    
+        
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/dropdown/Details.tsx b/client/patterns/dropdown/Details.tsx
new file mode 100644
index 0000000..1644afb
--- /dev/null
+++ b/client/patterns/dropdown/Details.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+
+import './dropdown.css';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import Triangle from '../../placeholders/Triangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        
+            
    
+                
    
+                    Move the mouse over the button to see the dropdown.
+                
    
+                
+                            
    
+                                
+
+                                
    
+                                    
    
+                                        
+                                    
    
+                                
    
+                            
    
+                            
    
+                            
+                            
    
+                        
    
+                    )}
+                    source={`
+
+
+
    
+    
+    
+
+    
+    
    
+        ...
+    
    
+
    
+`}
+                />
+            
+            
+            
+    );
+};
+
+export default Details;
diff --git a/client/patterns/dropdown/dropdown.css b/client/patterns/dropdown/dropdown.css
new file mode 100644
index 0000000..955fb6d
--- /dev/null
+++ b/client/patterns/dropdown/dropdown.css
@@ -0,0 +1,7 @@
+.p-dropdown-content {
+    display: none;
+}
+
+.p-dropdown:hover .p-dropdown-content {
+    display: block;
+}
diff --git a/client/patterns/floating-label/Details.tsx b/client/patterns/floating-label/Details.tsx
index 683f53d..f3eb89f 100644
--- a/client/patterns/floating-label/Details.tsx
+++ b/client/patterns/floating-label/Details.tsx
@@ -25,7 +25,7 @@ const Details: React.FC<{}> = () => {
                             }}
                         >
                             
     = () => {
                     )}
                     source={`
 
 
-
    
+
    
     
     
 
diff --git a/client/patterns/floating-label/floating-label.css b/client/patterns/floating-label/floating-label.css
index c07ed08..90355e8 100644
--- a/client/patterns/floating-label/floating-label.css
+++ b/client/patterns/floating-label/floating-label.css
@@ -1,8 +1,8 @@
-.floating-container label {
+.p-floating-container label {
     opacity: 0;
 }
 
-.floating-container input:not(:placeholder-shown) + label {
+.p-floating-container input:not(:placeholder-shown) + label {
     background: #FFF;
     transform: translate(0, -50%);
     opacity: 1;
diff --git a/client/patterns/menu/Details.tsx b/client/patterns/menu/Details.tsx
index bc0d17a..248b9df 100644
--- a/client/patterns/menu/Details.tsx
+++ b/client/patterns/menu/Details.tsx
@@ -33,7 +33,7 @@ const Details: React.FC<{}> = () => {
                                 }}
                             >
                                 
     = () => {
                                     
    
                                 
    
                                 
     = () => {
                                     
    
                                 
    
                                 
     = () => {
                                     
    Ctrl + X
    
                                 
    
                                 
     = () => {
                                     
    Ctrl + C
    
                                 
    
                                 
     = () => {
                                     
                                 
    
                                 
     = () => {
                                 
    
                                 
    
                                 
     = () => {
+    return (
+        
+            
    
+                
    
+                    
    
+                
    
+            
    
+        
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/presence-indicator/Details.tsx b/client/patterns/presence-indicator/Details.tsx
new file mode 100644
index 0000000..9ef9b89
--- /dev/null
+++ b/client/patterns/presence-indicator/Details.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        
+            
    
+                
+                            
    
+                                
+                                
    
+                            
    
+                        
    
+                    )}
+                    source={`
+
    
+    
+    ...
+
+    
+    
    
+
    
+`}
+                />
+            
    
+            
+        
+    );
+};
+
+export default Details;
diff --git a/client/patterns/rating/Details.tsx b/client/patterns/rating/Details.tsx
index 6f4ca6f..06964a3 100644
--- a/client/patterns/rating/Details.tsx
+++ b/client/patterns/rating/Details.tsx
@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                                 justifyContent: 'center',
                             }}
                         >
-                            
    
+                            
    
                                 
                                 
                                 
@@ -29,7 +29,7 @@ const Details: React.FC<{}> = () => {
                     )}
                     source={`
 
 
-
    
-    
-    
-    
-    
-    
+
    
+    
+    
+    
+    
+    
 
    
 `}
                 />
diff --git a/client/patterns/rating/Star.tsx b/client/patterns/rating/Star.tsx
index acae76c..9e97923 100644
--- a/client/patterns/rating/Star.tsx
+++ b/client/patterns/rating/Star.tsx
@@ -8,7 +8,7 @@ interface StarProps {
 
 const Star: React.FC = ({ isActive }) => {
     return (
-        
     );
diff --git a/client/patterns/rating/star.css b/client/patterns/rating/star.css
index d44bd5b..049148d 100644
--- a/client/patterns/rating/star.css
+++ b/client/patterns/rating/star.css
@@ -1,4 +1,4 @@
-.rating {
+.p-rating {
     align-items: center;
     display: flex;
     font-size: 32px;
@@ -6,18 +6,20 @@
     flex-direction: row-reverse;
 }
 
-.rating .star:hover, .rating .star:hover ~ .star {
+.p-rating .p-rating-star:hover,
+.p-rating .p-rating-star:hover ~ .p-rating-star {
     color: transparent;
 }
 
-.rating .star:hover:before, .rating .star:hover ~ .star:before {
+.p-rating .p-rating-star:hover:before,
+.p-rating .p-rating-star:hover ~ .p-rating-star:before {
     color: #00449e;
     content: '\2605';
     left: 0;
     position: absolute;
 }
 
-.star {
+.p-rating-star {
     background-color: transparent;
     border: transparent;
     margin: 0 2px;
diff --git a/client/patterns/upload-button/Cover.tsx b/client/patterns/upload-button/Cover.tsx
new file mode 100644
index 0000000..7b5e65b
--- /dev/null
+++ b/client/patterns/upload-button/Cover.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        
+            
    
+                
    
+                    
    
+                        
+                            
+                        
+                    
    
+                    
+                
    
+            
    
+        
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/upload-button/Details.tsx b/client/patterns/upload-button/Details.tsx
new file mode 100644
index 0000000..3277dde
--- /dev/null
+++ b/client/patterns/upload-button/Details.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        
+            
    
+                
    
+                    You can click the button to choose a file.
+                
    
+                
+                            
    
+                                
    
+                                    
+                                    
    
+                                        
+                                            
+                                        
+                                    
    
+                                    
+                                
    
+                            
    
+                        
    
+                    )}
+                    source={`
+
    
+    
+    
+
+    
+    
    ...
    
+
+    
+    ...
+
    
+`}
+                />
+            
    
+        
+    );
+};
+
+export default Details;
diff --git a/client/placeholders/BrowserFrame.tsx b/client/placeholders/BrowserFrame.tsx
index 3a35c38..1f85c28 100644
--- a/client/placeholders/BrowserFrame.tsx
+++ b/client/placeholders/BrowserFrame.tsx
@@ -102,13 +102,14 @@ const BrowserFrame: React.FC = ({ content, source }) => {
                         height: '100%',
                         left: 0,
                         opacity: isContentActive ? 0 : 1,
+                        overflow: 'scroll',
                         position: 'absolute',
                         top: 0,
                         transform: 'rotateY(180deg)',
                         width: '100%',
                     }}
                 >
-                    
+                    
                 
    
             
    
         
    
diff --git a/client/types/hightlight.d.ts b/client/types/hightlight.d.ts
index 257398c..981d895 100644
--- a/client/types/hightlight.d.ts
+++ b/client/types/hightlight.d.ts
@@ -7,5 +7,5 @@ declare module 'highlight.js/lib/highlight' {
     function registerLanguage(name: string, language: any): void;
 }
 
-declare module 'highlight.js/lib/languages/xml' {
-}
+declare module 'highlight.js/lib/languages/javascript' {}
+declare module 'highlight.js/lib/languages/xml' {}
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 39daf10..063a222 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -5,22 +5,28 @@
     https://csslayout.io/patterns/split-screen
     https://csslayout.io/patterns/sticky-footer
     https://csslayout.io/patterns/sticky-header
+    https://csslayout.io/patterns/avatar-list
     https://csslayout.io/patterns/badge
     https://csslayout.io/patterns/breadcrumb
     https://csslayout.io/patterns/button-with-icon
     https://csslayout.io/patterns/card
     https://csslayout.io/patterns/centering
     https://csslayout.io/patterns/docked-at-corner
+    https://csslayout.io/patterns/dot-leader
     https://csslayout.io/patterns/dot-navigation
     https://csslayout.io/patterns/drop-area
+    https://csslayout.io/patterns/drop-cap
+    https://csslayout.io/patterns/dropdown
     https://csslayout.io/patterns/feature-list
     https://csslayout.io/patterns/fixed-at-corner
+    https://csslayout.io/patterns/floating-label
     https://csslayout.io/patterns/input-addon
     https://csslayout.io/patterns/media-object
     https://csslayout.io/patterns/menu
     https://csslayout.io/patterns/modal
     https://csslayout.io/patterns/notification
     https://csslayout.io/patterns/pagination
+    https://csslayout.io/patterns/presence-indicator
     https://csslayout.io/patterns/previous-next-buttons
     https://csslayout.io/patterns/pricing-table
     https://csslayout.io/patterns/progress-bar
@@ -39,5 +45,6 @@
     https://csslayout.io/patterns/switch
     https://csslayout.io/patterns/tab
     https://csslayout.io/patterns/toggle-password-visibility
+    https://csslayout.io/patterns/upload-button
     https://csslayout.io/patterns/wizard
 
\ No newline at end of file
diff --git a/vendors/highlight.js@9.12.0/dracula.min.css b/vendors/highlight.js@9.12.0/dracula.min.css
deleted file mode 100644
index 8e84c0c..0000000
--- a/vendors/highlight.js@9.12.0/dracula.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.hljs{display:block;overflow-x:auto;padding:0.5em;background:#282a36}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-link{color:#8be9fd}.hljs-function .hljs-keyword{color:#ff79c6}.hljs,.hljs-subst{color:#f8f8f2}.hljs-string,.hljs-title,.hljs-name,.hljs-type,.hljs-attribute,.hljs-symbol,.hljs-bullet,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#f1fa8c}.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#6272a4}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-title,.hljs-section,.hljs-doctag,.hljs-type,.hljs-name,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}
\ No newline at end of file
diff --git a/vendors/highlight.js@9.12.0/theme.min.css b/vendors/highlight.js@9.12.0/theme.min.css
new file mode 100644
index 0000000..16e4b1d
--- /dev/null
+++ b/vendors/highlight.js@9.12.0/theme.min.css
@@ -0,0 +1 @@
+.hljs{display:block;overflow-x:auto;padding:.5em;background:#282828}.hljs,.hljs-subst{color:#ebdbb2}.hljs-deletion,.hljs-formula,.hljs-keyword,.hljs-link,.hljs-selector-tag{color:#fb4934}.hljs-built_in,.hljs-emphasis,.hljs-name,.hljs-quote,.hljs-strong,.hljs-title,.hljs-variable{color:#83a598}.hljs-attr,.hljs-params,.hljs-template-tag,.hljs-type{color:#fabd2f}.hljs-builtin-name,.hljs-doctag,.hljs-literal,.hljs-number{color:#8f3f71}.hljs-code,.hljs-meta,.hljs-regexp,.hljs-selector-id,.hljs-template-variable{color:#fe8019}.hljs-addition,.hljs-meta-string,.hljs-section,.hljs-selector-attr,.hljs-selector-class,.hljs-string,.hljs-symbol{color:#b8bb26}.hljs-attribute,.hljs-bullet,.hljs-class,.hljs-function,.hljs-function .hljs-keyword,.hljs-meta-keyword,.hljs-selector-pseudo,.hljs-tag{color:#8ec07c}.hljs-comment{color:#928374}.hljs-link_label,.hljs-literal,.hljs-number{color:#d3869b}.hljs-comment,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-strong,.hljs-tag{font-weight:bold}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index b3b7f20..1de72e4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -22,7 +22,7 @@ module.exports = {
     entry: {
         'vendor-styles': [
             './vendors/normalize.css@8.0.1/normalize.css',
-            './vendors/highlight.js@9.12.0/dracula.min.css',
+            './vendors/highlight.js@9.12.0/theme.min.css',
         ],
         // The CSS for client should come after `vendor-styles`
         client: './client/index.tsx',