Merge pull request #212 from phuocng/add-banner

Add banner

components/CssScanBanner.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export const CssScanBanner = () => (
+    <a className="block-cssscan" href="https://gumroad.com/a/719368019" target="_blank">
+        <div className="block-cssscan__inner">
+            <p className="block-cssscan__title">Have you seen CSS Scan?</p>
+            <p className="block-cssscan__desc">The fastest and easiest way to check, copy and edit CSS.</p>
+            <p className="block-cssscan__more">Learn more →</p>
+            <img
+                className="block-cssscan__image"
+                src="https://toastlog.com/img/logos/cssscan.svg"
+                alt="CSS Scan logo"
+            />
+        </div>
+    </a>
+);

components/Follow.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export const Follow = () => (
+    <div className="block-follow">
+        If you find this site helpful, follow me on <a href="https://twitter.com/nghuuphuoc">Twitter</a> and{' '}
+        <a href="https://github.com/phuocng">GitHub</a> to get more useful content like this.
+    </div>
+);

components/FooterBlock.tsx

@@ -5,27 +5,27 @@ export const FooterBlock = () => (
     <footer className="block-footer">
         <div className="block-container">
             <Footer>
-                <FooterGroup title="Products">
+                <FooterGroup title="My products">
                     <FooterLink href="https://blur.page">Blur Page</FooterLink>
                     <FooterLink href="https://formvalidation.io">Form Validation</FooterLink>
                     <FooterLink href="https://intersectionobserver.io">IntersectionObserver Examples</FooterLink>
                     <FooterLink href="https://react-pdf-viewer.dev">React PDF Viewer</FooterLink>
                 </FooterGroup>
-                <FooterGroup title="Open sources">
+                <FooterGroup title="My open sources">
                     <FooterLink href="https://1loc.dev">1 LOC</FooterLink>
                     <FooterLink href="https://csslayout.io">CSS Layout</FooterLink>
                     <FooterLink href="https://getfrontend.tips">Front-end Tips</FooterLink>
                     <FooterLink href="https://htmldom.dev">HTML DOM</FooterLink>
                     <FooterLink href="https://thisthat.dev">this VS that</FooterLink>
                 </FooterGroup>
-                <FooterGroup title="Follow us">
-                    <FooterLink href="https://github.com/1milligram">GitHub</FooterLink>
+                <FooterGroup title="Follow me">
+                    <FooterLink href="https://github.com/phuocng">GitHub</FooterLink>
                     <FooterLink href="https://twitter.com/nghuuphuoc">Twitter</FooterLink>
                 </FooterGroup>
             </Footer>
 
             <div className="block-footer__copyright">
-                © 2020 — {new Date().getFullYear()}, 1 milligram. All rights reserved.
+                © 2020 — {new Date().getFullYear()}, Nguyen Huu Phuoc. All rights reserved.
             </div>
         </div>
     </footer>

components/HeaderBlock.tsx

@@ -6,7 +6,7 @@ export const HeaderBlock = () => {
     const [totalStars, setTotalStars] = React.useState(0);
 
     React.useEffect(() => {
-        fetch('https://api.github.com/repos/1milligram/csslayout')
+        fetch('https://api.github.com/repos/phuocng/csslayout')
             .then((res) => res.json())
             .then((data) => setTotalStars(data.stargazers_count))
             .catch(console.log);
@@ -27,7 +27,7 @@ export const HeaderBlock = () => {
                     <Link href="/" passHref>
                         <HeaderLogo />
                     </Link>
-                    <Link href="https://github.com/1milligram/csslayout">
+                    <Link href="https://github.com/phuocng/csslayout">
                         <a className="block-header__cta">GitHub {totalStars}★</a>
                     </Link>
                 </div>

layouts/PatternLayout.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import Head from 'next/head';
 import { Heading, Spacer } from '@1milligram/design';
 
-import { Ad } from '../components/Ad';
+import { CssScanBanner } from '../components/CssScanBanner';
+import { Follow } from '../components/Follow';
 import { Pattern } from '../constants/Pattern';
 import { slug } from '../utils/slug';
 import { Layout } from './Layout';
@@ -29,15 +30,14 @@ export const PatternLayout: React.FC<{
 
             <div className="block-container">
                 <div className="page-home__hero">
-                    <Spacer size="extraLarge" />
+                    <Spacer size="large" />
                     <Heading level={1}>{pattern}</Heading>
                     <Spacer size="large" />
-                    <div className="block-ad">
-                        <Ad />
-                    </div>
+                    <CssScanBanner />
                     <Spacer size="medium" />
                 </div>
                 {children}
+                <Follow />
                 <Spacer size="extraLarge" />
             </div>
         </Layout>

pages/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Heading, Spacer } from '@1milligram/design';
 
 import { CoverCard } from '../components/CoverCard';
+import { CssScanBanner } from '../components/CssScanBanner';
 import { Pattern } from '../constants/Pattern';
 import { Layout } from '../layouts/Layout';
 
@@ -14,6 +15,8 @@ const HomePage = () => {
                     <Heading level={1}>CSS Layout</Heading>
                     <Heading level={4}>Popular layouts and patterns made with CSS</Heading>
                     <Spacer size="large" />
+                    <CssScanBanner />
+                    <Spacer size="large" />
                     <div>Following covers are made with CSS only. Inspect them!</div>
                 </div>
 

styles/blocks/_css-scan.scss

@@ -0,0 +1,87 @@
+.block-cssscan {
+    font-family: -apple-system, system-ui, Roboto, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    color: #000;
+    text-decoration: none;
+    display: block;
+}
+
+.block-cssscan__inner {
+    max-width: 1024px;
+    background: #c2fbd7;
+    border-radius: 1rem;
+    padding: 2.5rem;
+    position: relative;
+    overflow: hidden;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0;
+    cursor: pointer;
+    text-align: left;
+}
+
+.block-cssscan__title {
+    font-size: 28px;
+    font-weight: bold;
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+.block-cssscan__desc {
+    opacity: 0.8;
+    color: #333;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.block-cssscan__more {
+    margin: 0;
+    margin-top: 2em;
+}
+
+.block-cssscan__image {
+    position: absolute;
+    transform: rotate(-7deg);
+    transition: all 0.3s;
+    top: 14%;
+    right: -37%;
+    width: 95%;
+    height: 95%;
+}
+
+.block-cssscan__inner:hover {
+    .block-cssscan__more {
+        text-decoration: underline;
+    }
+
+    .block-cssscan__image {
+        transform: scale(1.1) rotate(-7deg);
+        top: 10%;
+        right: -35%;
+    }
+}
+
+@media screen and (min-width: 0px) and (max-width: 1010px) {
+    .block-cssscan {
+        padding: 0;
+    }
+
+    .block-cssscan__inner {
+        margin-top: 2em;
+        min-height: 300px;
+        border-radius: 0;
+    }
+
+    .block-cssscan__image {
+        top: initial;
+        bottom: -14%;
+        width: 45%;
+        height: 45%;
+        right: -5%;
+    }
+
+    .block-cssscan__inner:hover .block-cssscan__image {
+        top: initial;
+        bottom: -10%;
+        right: -5%;
+        transform: scale(1.1) rotate(-7deg);
+    }
+}

styles/blocks/_follow.scss

@@ -0,0 +1,11 @@
+.block-follow {
+    background-color: #0465eb;
+    border-radius: 0.5rem;
+    color: #fff;
+    padding: 1rem;
+
+    a {
+        color: #fff;
+        text-decoration: underline;
+    }
+}

styles/index.scss

@@ -5,6 +5,8 @@
 @import 'blocks/browser-frame';
 @import 'blocks/code';
 @import 'blocks/cover';
+@import 'blocks/css-scan';
+@import 'blocks/follow';
 @import 'blocks/footer';
 @import 'blocks/header';
 @import 'blocks/layout';

tsconfig.json

@@ -8,11 +8,7 @@
         "moduleResolution": "node",
         "target": "esnext",
         "jsx": "preserve",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+        "lib": ["dom", "dom.iterable", "esnext"],
         "allowJs": true,
         "skipLibCheck": true,
         "strict": false,
@@ -22,13 +18,6 @@
         "isolatedModules": true,
         "incremental": true
     },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "bin",
-    "node_modules"
-  ]
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+    "exclude": ["bin", "node_modules"]
 }