diff --git a/bin/generateScreenshot.ts b/bin/generateScreenshot.ts
new file mode 100644
index 0000000..b39e2ef
--- /dev/null
+++ b/bin/generateScreenshot.ts
@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+// Run this script from the root folder
+// $ npm run screenshot slug-of-pattern-here
+
+const puppeteer = require('puppeteer');
+
+const main = () => {
+ const args = process.argv;
+ if (!args || !Array.isArray(args) || args.length < 2) {
+ console.log('Please specific the pattern: npm run screenshot slug-of-pattern-here');
+ return;
+ }
+
+ const pattern = args[2];
+
+ (async () => {
+ const browser = await puppeteer.launch();
+
+ const page = await browser.newPage();
+ await page.goto(`http://localhost:1234/patterns/${pattern}`);
+
+ await page.waitForSelector('.demo__live');
+ const element = await page.$('.demo__live');
+ await element.screenshot({
+ path: `public/assets/patterns/${pattern}.png`
+ });
+ await page.close();
+
+ await browser.close();
+ })();
+};
+
+main();
diff --git a/bin/generateScreenshots.ts b/bin/generateScreenshots.ts
deleted file mode 100644
index c5410d9..0000000
--- a/bin/generateScreenshots.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-#!/usr/bin/env node
-
-const puppeteer = require('puppeteer');
-
-import Pattern from '../client/constants/Pattern';
-import slug from '../client/helpers/slug';
-
-process.setMaxListeners(0);
-
-(async () => {
- const browser = await puppeteer.launch();
-
- await Promise.all(
- Object.entries(Pattern).map(async ([_, patternName]) => {
- const page = await browser.newPage();
- const pattern = slug(patternName);
- await page.goto(`http://localhost:1234/patterns/${pattern}`);
-
- await page.waitForSelector('.demo');
- const element = await page.$('.demo');
- await element.screenshot({
- path: `public/assets/patterns/${pattern}.png`
- });
- await page.close();
- })
- );
-
- await browser.close();
-})();
diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 2087a26..544d891 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -43,6 +43,7 @@ enum Pattern {
HolyGrail = 'Holy grail',
InitialAvatar = 'Initial avatar',
InputAddon = 'Input addon',
+ InvertedCorners = 'Inverted corners',
KeyboardShortcut = 'Keyboard shortcut',
LayeredCard = 'Layered card',
LinedPaper = 'Lined paper',
diff --git a/client/index.css b/client/index.css
index 5f1b632..942a095 100644
--- a/client/index.css
+++ b/client/index.css
@@ -41,20 +41,18 @@ a {
max-width: 80rem;
padding: 0 1rem;
}
-.content {
- display: flex;
- margin: 4rem 0;
-}
.main {
flex: 1;
- overflow: auto;
+ overflow: hidden;
+ padding: 4rem 0;
}
.sidebar {
display: none;
+ padding: 4rem 0;
}
/* Sidebar */
-.sidebar__inner {
+.sidebar__inner {
position: sticky;
top: 1rem;
}
@@ -80,7 +78,7 @@ a {
font-size: 2rem;
line-height: 1.5;
text-align: center;
- text-transform: capitalize;
+ text-transform: uppercase;
}
.hero__subheading {
color: var(--color-gray-9);
@@ -101,11 +99,11 @@ pre {
color: #FFF;
font-family: "Source Code Pro", monospace;
font-size: 1rem;
- height: 100%;
line-height: 1.5;
margin: 0px;
- overflow: auto;
+ overflow-x: auto;
padding: 1rem;
+ white-space: pre;
}
.token.tag,
@@ -158,6 +156,9 @@ pre {
/* Responsive */
@media (min-width: 640px) {
+ .content {
+ display: flex;
+ }
.sidebar {
display: block;
flex: 0 0 8rem;
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index b1346f5..8eb088f 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -136,6 +136,7 @@ const ExplorePage = () => {
+
diff --git a/client/patterns/inverted-corners/Cover.tsx b/client/patterns/inverted-corners/Cover.tsx
new file mode 100644
index 0000000..83b319a
--- /dev/null
+++ b/client/patterns/inverted-corners/Cover.tsx
@@ -0,0 +1,43 @@
+/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc
+ */
+
+import * as React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+ return (
+
+
+
+ );
+};
+
+export default Cover;
diff --git a/client/patterns/inverted-corners/Details.tsx b/client/patterns/inverted-corners/Details.tsx
new file mode 100644
index 0000000..aa9ad02
--- /dev/null
+++ b/client/patterns/inverted-corners/Details.tsx
@@ -0,0 +1,101 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc
+ */
+
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+import Heading from '../../components/Heading';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+import './inverted-corners.css';
+
+const Details: React.FC<{}> = () => {
+ return (
+
+
+
+
+
+
+
+
+ ...
+
+`}
+css={`
+:root {
+ --inverted-corners-background: #52525B;
+ --inverted-corners-size: 2rem;
+}
+
+.inverted-corners {
+ background-color: var(--inverted-corners-background);
+
+ /* Used to position the corner */
+ position: relative;
+}
+
+.inverted-corners::before {
+ content: '';
+
+ /* Absolute position */
+ bottom: calc(-2 * var(--inverted-corners-size));
+ left: 0;
+ position: absolute;
+
+ /* Size */
+ height: calc(2 * var(--inverted-corners-size));
+ width: var(--inverted-corners-size);
+
+ /* Border */
+ background-color: transparent;
+ border-top-left-radius: var(--inverted-corners-size);
+ box-shadow: var(--inverted-corners-background)
+ 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
+}
+`}
+ >
+
+
+
+
+
+ );
+};
+
+export default Details;
diff --git a/client/patterns/inverted-corners/inverted-corners.css b/client/patterns/inverted-corners/inverted-corners.css
new file mode 100644
index 0000000..b9b022b
--- /dev/null
+++ b/client/patterns/inverted-corners/inverted-corners.css
@@ -0,0 +1,53 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc
+ */
+
+:root {
+ --inverted-corners-background: #52525B;
+ --inverted-corners-size: 2rem;
+}
+
+.inverted-corners {
+ background-color: var(--inverted-corners-background);
+
+ /* Used to position the corner */
+ position: relative;
+
+ /* Misc */
+ height: 100%;
+}
+
+.inverted-corners::before {
+ content: '';
+
+ /* Absolute position */
+ bottom: calc(-2 * var(--inverted-corners-size));
+ left: 0;
+ position: absolute;
+
+ /* Size */
+ height: calc(2 * var(--inverted-corners-size));
+ width: var(--inverted-corners-size);
+
+ /* Border */
+ background-color: transparent;
+ border-top-left-radius: var(--inverted-corners-size);
+ box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
+}
+
+/* Use case */
+.inverted-corners--speech {
+ /* Border radius */
+ border-bottom-right-radius: var(--inverted-corners-size);
+ border-top-left-radius: var(--inverted-corners-size);
+ border-top-right-radius: var(--inverted-corners-size);
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Misc */
+ color: #FFF;
+}
\ No newline at end of file
diff --git a/client/placeholders/BrowserFrame.tsx b/client/placeholders/BrowserFrame.tsx
index 6dda299..acae7c8 100644
--- a/client/placeholders/BrowserFrame.tsx
+++ b/client/placeholders/BrowserFrame.tsx
@@ -15,17 +15,13 @@ interface BrowserFrameProps {
const BrowserFrame: React.FC = ({ children, css, html }) => {
return (
-
-
-
-
-
-
-
+ <>
+
+
{children}
-