Merge pull request #212 from phuocng/add-banner

Add banner
2025-10-24 19:26:26 +02:00 · 2022-08-21 20:58:31 +07:00
parent e811d6a12c 5e2a734118
commit dbfaaf359c
10 changed files with 160 additions and 44 deletions
--- a/components/CssScanBanner.tsx
+++ b/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>
+);
--- a/components/Follow.tsx
+++ b/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>
+);
--- a/components/FooterBlock.tsx
+++ b/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>
--- a/components/HeaderBlock.tsx
+++ b/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>
--- a/layouts/PatternLayout.tsx
+++ b/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>
--- a/pages/index.tsx
+++ b/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>

--- a/styles/blocks/_css-scan.scss
+++ b/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);
+    }
+}
--- a/styles/blocks/_follow.scss
+++ b/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;
+    }
+}
--- a/styles/index.scss
+++ b/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';
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,34 +1,23 @@
 {
-  "compilerOptions": {
-    "outDir": "./dist/",
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "noImplicitAny": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "target": "esnext",
-    "jsx": "preserve",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "incremental": true
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "bin",
-    "node_modules"
-  ]
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "esModuleInterop": true,
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "target": "esnext",
+        "jsx": "preserve",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": false,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "incremental": true
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+    "exclude": ["bin", "node_modules"]
 }