From 78dedd0fc7c8a2c984254c917bd9ce9e957f899a Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Sun, 21 Aug 2022 19:57:30 +0700 Subject: [PATCH 1/3] feat: Add follow block --- components/Follow.tsx | 7 +++++++ layouts/PatternLayout.tsx | 2 ++ styles/blocks/_follow.scss | 11 +++++++++++ styles/index.scss | 1 + 4 files changed, 21 insertions(+) create mode 100644 components/Follow.tsx create mode 100644 styles/blocks/_follow.scss diff --git a/components/Follow.tsx b/components/Follow.tsx new file mode 100644 index 0000000..ab07eec --- /dev/null +++ b/components/Follow.tsx @@ -0,0 +1,7 @@ +import * as React from 'react'; + +export const Follow = () => ( +
+ If you find this site helpful, follow me on Twitter and GitHub to get more useful content like this. +
+); diff --git a/layouts/PatternLayout.tsx b/layouts/PatternLayout.tsx index f485c23..8bf4c64 100644 --- a/layouts/PatternLayout.tsx +++ b/layouts/PatternLayout.tsx @@ -3,6 +3,7 @@ import Head from 'next/head'; import { Heading, Spacer } from '@1milligram/design'; import { Ad } from '../components/Ad'; +import { Follow } from '../components/Follow'; import { Pattern } from '../constants/Pattern'; import { slug } from '../utils/slug'; import { Layout } from './Layout'; @@ -38,6 +39,7 @@ export const PatternLayout: React.FC<{ {children} + diff --git a/styles/blocks/_follow.scss b/styles/blocks/_follow.scss new file mode 100644 index 0000000..6a663b3 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/styles/index.scss b/styles/index.scss index 8619a0d..6d2ac81 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -5,6 +5,7 @@ @import 'blocks/browser-frame'; @import 'blocks/code'; @import 'blocks/cover'; +@import 'blocks/follow'; @import 'blocks/footer'; @import 'blocks/header'; @import 'blocks/layout'; From 3bb07d8358f52a7b85d2b75e4e2ed29aab69686e Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Sun, 21 Aug 2022 19:59:09 +0700 Subject: [PATCH 2/3] feat: Update header and footer --- components/FooterBlock.tsx | 10 +++++----- components/HeaderBlock.tsx | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/FooterBlock.tsx b/components/FooterBlock.tsx index 3ce0374..414b13e 100644 --- a/components/FooterBlock.tsx +++ b/components/FooterBlock.tsx @@ -5,27 +5,27 @@ export const FooterBlock = () => (
- + Blur Page Form Validation IntersectionObserver Examples React PDF Viewer - + 1 LOC CSS Layout Front-end Tips HTML DOM this VS that - - GitHub + + GitHub Twitter
- © 2020 — {new Date().getFullYear()}, 1 milligram. All rights reserved. + © 2020 — {new Date().getFullYear()}, Nguyen Huu Phuoc. All rights reserved.
diff --git a/components/HeaderBlock.tsx b/components/HeaderBlock.tsx index eefb31e..8fe6af9 100644 --- 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 = () => { - + GitHub {totalStars}★ From 5e2a734118d638f2421bddfbfea6bb9e77d0f19e Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Sun, 21 Aug 2022 20:57:57 +0700 Subject: [PATCH 3/3] feat: Add new banner --- components/CssScanBanner.tsx | 16 +++++++ components/Follow.tsx | 5 ++- layouts/PatternLayout.tsx | 8 ++-- pages/index.tsx | 3 ++ styles/blocks/_css-scan.scss | 87 ++++++++++++++++++++++++++++++++++++ styles/blocks/_follow.scss | 2 +- styles/index.scss | 1 + tsconfig.json | 53 +++++++++------------- 8 files changed, 135 insertions(+), 40 deletions(-) create mode 100644 components/CssScanBanner.tsx create mode 100644 styles/blocks/_css-scan.scss diff --git a/components/CssScanBanner.tsx b/components/CssScanBanner.tsx new file mode 100644 index 0000000..c3b99b9 --- /dev/null +++ b/components/CssScanBanner.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; + +export const CssScanBanner = () => ( + +
+

Have you seen CSS Scan?

+

The fastest and easiest way to check, copy and edit CSS.

+

Learn more →

+ CSS Scan logo +
+ +); diff --git a/components/Follow.tsx b/components/Follow.tsx index ab07eec..433f7dc 100644 --- a/components/Follow.tsx +++ b/components/Follow.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; export const Follow = () => ( -
- If you find this site helpful, follow me on Twitter and GitHub to get more useful content like this. +
+ If you find this site helpful, follow me on Twitter and{' '} + GitHub to get more useful content like this.
); diff --git a/layouts/PatternLayout.tsx b/layouts/PatternLayout.tsx index 8bf4c64..6ae5cc1 100644 --- a/layouts/PatternLayout.tsx +++ b/layouts/PatternLayout.tsx @@ -2,7 +2,7 @@ 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'; @@ -30,12 +30,10 @@ export const PatternLayout: React.FC<{
- + {pattern} -
- -
+
{children} diff --git a/pages/index.tsx b/pages/index.tsx index 838d6f5..7f82d39 100644 --- 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 = () => { CSS Layout Popular layouts and patterns made with CSS + +
Following covers are made with CSS only. Inspect them!
diff --git a/styles/blocks/_css-scan.scss b/styles/blocks/_css-scan.scss new file mode 100644 index 0000000..403158d --- /dev/null +++ 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); + } +} diff --git a/styles/blocks/_follow.scss b/styles/blocks/_follow.scss index 6a663b3..585fe21 100644 --- a/styles/blocks/_follow.scss +++ b/styles/blocks/_follow.scss @@ -8,4 +8,4 @@ color: #fff; text-decoration: underline; } -} \ No newline at end of file +} diff --git a/styles/index.scss b/styles/index.scss index 6d2ac81..752d1cd 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -5,6 +5,7 @@ @import 'blocks/browser-frame'; @import 'blocks/code'; @import 'blocks/cover'; +@import 'blocks/css-scan'; @import 'blocks/follow'; @import 'blocks/footer'; @import 'blocks/header'; diff --git a/tsconfig.json b/tsconfig.json index 7d4a0c2..b9fc7d4 100644 --- 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"] }