mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 22:26:33 +02:00
feat: Banner
This commit is contained in:
Phuoc Nguyen
@@ -1,25 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export const Ad: React.FC<{}> = () => {
|
||||
const containerRef = React.useRef<HTMLDivElement | null>(null);
|
||||
const source = 'https://cdn.carbonads.com/carbon.js?serve=CE7I6KQL&placement=csslayoutio';
|
||||
|
||||
React.useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) {
|
||||
return;
|
||||
}
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.src = source;
|
||||
script.async = true;
|
||||
script.id = '_carbonads_js';
|
||||
container.appendChild(script);
|
||||
|
||||
return () => {
|
||||
container.removeChild(script);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <div ref={containerRef} />;
|
||||
};
|
||||
@@ -1,24 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import Highlight, { defaultProps, Language } from 'prism-react-renderer';
|
||||
import theme from 'prism-react-renderer/themes/vsDark';
|
||||
|
||||
export const Code: React.FC<{
|
||||
children: string;
|
||||
language: Language;
|
||||
}> = ({ children, language }) => {
|
||||
return (
|
||||
<Highlight {...defaultProps} theme={theme} code={children.trim()} language={language}>
|
||||
{({ className, style, tokens, getLineProps, getTokenProps }) => (
|
||||
<pre className={`block-code ${className}`} style={{ ...style }}>
|
||||
{tokens.map((line, i) => (
|
||||
<div key={i} {...getLineProps({ line, key: i })}>
|
||||
{line.map((token, key) => (
|
||||
<span key={key} {...getTokenProps({ token, key })} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</pre>
|
||||
)}
|
||||
</Highlight>
|
||||
);
|
||||
};
|
||||
@@ -1,149 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { Pattern } from '../constants/Pattern';
|
||||
import { slug } from '../utils/slug';
|
||||
|
||||
interface CoverCardProps {
|
||||
pattern: Pattern;
|
||||
}
|
||||
|
||||
const CoverList = {
|
||||
// A
|
||||
[Pattern.Accordion]: dynamic(() => import('../patterns/accordion/Cover')),
|
||||
[Pattern.ArrowButtons]: dynamic(() => import('../patterns/arrow-buttons/Cover')),
|
||||
[Pattern.Avatar]: dynamic(() => import('../patterns/avatar/Cover')),
|
||||
[Pattern.AvatarList]: dynamic(() => import('../patterns/avatar-list/Cover')),
|
||||
// B
|
||||
[Pattern.Badge]: dynamic(() => import('../patterns/badge/Cover')),
|
||||
[Pattern.Breadcrumb]: dynamic(() => import('../patterns/breadcrumb/Cover')),
|
||||
[Pattern.ButtonWithIcon]: dynamic(() => import('../patterns/button-with-icon/Cover')),
|
||||
// C
|
||||
[Pattern.Card]: dynamic(() => import('../patterns/card/Cover')),
|
||||
[Pattern.CardLayout]: dynamic(() => import('../patterns/card-layout/Cover')),
|
||||
[Pattern.Centering]: dynamic(() => import('../patterns/centering/Cover')),
|
||||
[Pattern.Chip]: dynamic(() => import('../patterns/chip/Cover')),
|
||||
[Pattern.CircularNavigation]: dynamic(() => import('../patterns/circular-navigation/Cover')),
|
||||
[Pattern.CloseButton]: dynamic(() => import('../patterns/close-button/Cover')),
|
||||
[Pattern.ColorSwatch]: dynamic(() => import('../patterns/color-swatch/Cover')),
|
||||
[Pattern.ConcaveCorners]: dynamic(() => import('../patterns/concave-corners/Cover')),
|
||||
[Pattern.CookieBanner]: dynamic(() => import('../patterns/cookie-banner/Cover')),
|
||||
[Pattern.CornerRibbon]: dynamic(() => import('../patterns/corner-ribbon/Cover')),
|
||||
[Pattern.CurvedBackground]: dynamic(() => import('../patterns/curved-background/Cover')),
|
||||
[Pattern.CustomCheckboxButton]: dynamic(() => import('../patterns/custom-checkbox-button/Cover')),
|
||||
[Pattern.CustomRadioButton]: dynamic(() => import('../patterns/custom-radio-button/Cover')),
|
||||
// D
|
||||
[Pattern.DiagonalSection]: dynamic(() => import('../patterns/diagonal-section/Cover')),
|
||||
[Pattern.DockedAtCorner]: dynamic(() => import('../patterns/docked-at-corner/Cover')),
|
||||
[Pattern.DotLeader]: dynamic(() => import('../patterns/dot-leader/Cover')),
|
||||
[Pattern.DotNavigation]: dynamic(() => import('../patterns/dot-navigation/Cover')),
|
||||
[Pattern.Drawer]: dynamic(() => import('../patterns/drawer/Cover')),
|
||||
[Pattern.DropArea]: dynamic(() => import('../patterns/drop-area/Cover')),
|
||||
[Pattern.DropCap]: dynamic(() => import('../patterns/drop-cap/Cover')),
|
||||
[Pattern.Dropdown]: dynamic(() => import('../patterns/dropdown/Cover')),
|
||||
// F
|
||||
[Pattern.FadingLongSection]: dynamic(() => import('../patterns/fading-long-section/Cover')),
|
||||
[Pattern.FeatureComparison]: dynamic(() => import('../patterns/feature-comparison/Cover')),
|
||||
[Pattern.FeatureList]: dynamic(() => import('../patterns/feature-list/Cover')),
|
||||
[Pattern.FixedAtCorner]: dynamic(() => import('../patterns/fixed-at-corner/Cover')),
|
||||
[Pattern.FixedAtSide]: dynamic(() => import('../patterns/fixed-at-side/Cover')),
|
||||
[Pattern.FloatingLabel]: dynamic(() => import('../patterns/floating-label/Cover')),
|
||||
[Pattern.FolderStructure]: dynamic(() => import('../patterns/folder-structure/Cover')),
|
||||
[Pattern.FullBackground]: dynamic(() => import('../patterns/full-background/Cover')),
|
||||
[Pattern.FullScreenMenu]: dynamic(() => import('../patterns/full-screen-menu/Cover')),
|
||||
// H
|
||||
[Pattern.HolyGrail]: dynamic(() => import('../patterns/holy-grail/Cover')),
|
||||
// I
|
||||
[Pattern.InitialAvatar]: dynamic(() => import('../patterns/initial-avatar/Cover')),
|
||||
[Pattern.InputAddon]: dynamic(() => import('../patterns/input-addon/Cover')),
|
||||
[Pattern.InvertedCorners]: dynamic(() => import('../patterns/inverted-corners/Cover')),
|
||||
// K
|
||||
[Pattern.KeyboardShortcut]: dynamic(() => import('../patterns/keyboard-shortcut/Cover')),
|
||||
// L
|
||||
[Pattern.LayeredCard]: dynamic(() => import('../patterns/layered-card/Cover')),
|
||||
[Pattern.LinedPaper]: dynamic(() => import('../patterns/lined-paper/Cover')),
|
||||
// M
|
||||
[Pattern.MasonryGrid]: dynamic(() => import('../patterns/masonry-grid/Cover')),
|
||||
[Pattern.MediaObject]: dynamic(() => import('../patterns/media-object/Cover')),
|
||||
[Pattern.MegaMenu]: dynamic(() => import('../patterns/mega-menu/Cover')),
|
||||
[Pattern.Menu]: dynamic(() => import('../patterns/menu/Cover')),
|
||||
[Pattern.Modal]: dynamic(() => import('../patterns/modal/Cover')),
|
||||
// N
|
||||
[Pattern.NestedDropdowns]: dynamic(() => import('../patterns/nested-dropdowns/Cover')),
|
||||
[Pattern.Notification]: dynamic(() => import('../patterns/notification/Cover')),
|
||||
// O
|
||||
[Pattern.OverlayPlayButton]: dynamic(() => import('../patterns/overlay-play-button/Cover')),
|
||||
// P
|
||||
[Pattern.Pagination]: dynamic(() => import('../patterns/pagination/Cover')),
|
||||
[Pattern.PopoverArrow]: dynamic(() => import('../patterns/popover-arrow/Cover')),
|
||||
[Pattern.PresenceIndicator]: dynamic(() => import('../patterns/presence-indicator/Cover')),
|
||||
[Pattern.PreviousNextButtons]: dynamic(() => import('../patterns/previous-next-buttons/Cover')),
|
||||
[Pattern.PriceTag]: dynamic(() => import('../patterns/price-tag/Cover')),
|
||||
[Pattern.PricingTable]: dynamic(() => import('../patterns/pricing-table/Cover')),
|
||||
[Pattern.ProgressBar]: dynamic(() => import('../patterns/progress-bar/Cover')),
|
||||
[Pattern.PropertyList]: dynamic(() => import('../patterns/property-list/Cover')),
|
||||
// Q
|
||||
[Pattern.QuestionsAndAnswers]: dynamic(() => import('../patterns/questions-and-answers/Cover')),
|
||||
// R
|
||||
[Pattern.RadialProgressBar]: dynamic(() => import('../patterns/radial-progress-bar/Cover')),
|
||||
[Pattern.RadioButtonGroup]: dynamic(() => import('../patterns/radio-button-group/Cover')),
|
||||
[Pattern.RadioSwitch]: dynamic(() => import('../patterns/radio-switch/Cover')),
|
||||
[Pattern.Rating]: dynamic(() => import('../patterns/rating/Cover')),
|
||||
[Pattern.ResizableElement]: dynamic(() => import('../patterns/resizable-element/Cover')),
|
||||
[Pattern.Ribbon]: dynamic(() => import('../patterns/ribbon/Cover')),
|
||||
// S
|
||||
[Pattern.SameHeightColumns]: dynamic(() => import('../patterns/same-height-columns/Cover')),
|
||||
[Pattern.SearchBox]: dynamic(() => import('../patterns/search-box/Cover')),
|
||||
[Pattern.Separator]: dynamic(() => import('../patterns/separator/Cover')),
|
||||
[Pattern.Sidebar]: dynamic(() => import('../patterns/sidebar/Cover')),
|
||||
[Pattern.SimpleGrid]: dynamic(() => import('../patterns/simple-grid/Cover')),
|
||||
[Pattern.Slider]: dynamic(() => import('../patterns/slider/Cover')),
|
||||
[Pattern.SpinButton]: dynamic(() => import('../patterns/spin-button/Cover')),
|
||||
[Pattern.SplitNavigation]: dynamic(() => import('../patterns/split-navigation/Cover')),
|
||||
[Pattern.SplitScreen]: dynamic(() => import('../patterns/split-screen/Cover')),
|
||||
[Pattern.StackedCards]: dynamic(() => import('../patterns/stacked-cards/Cover')),
|
||||
[Pattern.StampBorder]: dynamic(() => import('../patterns/stamp-border/Cover')),
|
||||
[Pattern.Statistic]: dynamic(() => import('../patterns/statistic/Cover')),
|
||||
[Pattern.StatusLight]: dynamic(() => import('../patterns/status-light/Cover')),
|
||||
[Pattern.StepperInput]: dynamic(() => import('../patterns/stepper-input/Cover')),
|
||||
[Pattern.StickyFooter]: dynamic(() => import('../patterns/sticky-footer/Cover')),
|
||||
[Pattern.StickyHeader]: dynamic(() => import('../patterns/sticky-header/Cover')),
|
||||
[Pattern.StickySections]: dynamic(() => import('../patterns/sticky-sections/Cover')),
|
||||
[Pattern.StickyTableColumn]: dynamic(() => import('../patterns/sticky-table-column/Cover')),
|
||||
[Pattern.StickyTableHeaders]: dynamic(() => import('../patterns/sticky-table-headers/Cover')),
|
||||
[Pattern.Switch]: dynamic(() => import('../patterns/switch/Cover')),
|
||||
// T
|
||||
[Pattern.Tab]: dynamic(() => import('../patterns/tab/Cover')),
|
||||
[Pattern.Teardrop]: dynamic(() => import('../patterns/teardrop/Cover')),
|
||||
[Pattern.ThreeDimensionsCard]: dynamic(() => import('../patterns/three-dimensions-card/Cover')),
|
||||
[Pattern.Timeline]: dynamic(() => import('../patterns/timeline/Cover')),
|
||||
[Pattern.TogglePasswordVisibility]: dynamic(() => import('../patterns/toggle-password-visibility/Cover')),
|
||||
[Pattern.Tooltip]: dynamic(() => import('../patterns/tooltip/Cover')),
|
||||
[Pattern.TreeDiagram]: dynamic(() => import('../patterns/tree-diagram/Cover')),
|
||||
[Pattern.TriangleButtons]: dynamic(() => import('../patterns/triangle-buttons/Cover')),
|
||||
// U
|
||||
[Pattern.UploadButton]: dynamic(() => import('../patterns/upload-button/Cover')),
|
||||
// V
|
||||
[Pattern.ValidationIcon]: dynamic(() => import('../patterns/validation-icon/Cover')),
|
||||
[Pattern.VideoBackground]: dynamic(() => import('../patterns/video-background/Cover')),
|
||||
[Pattern.Voting]: dynamic(() => import('../patterns/voting/Cover')),
|
||||
// W
|
||||
[Pattern.Watermark]: dynamic(() => import('../patterns/watermark/Cover')),
|
||||
[Pattern.Wizard]: dynamic(() => import('../patterns/wizard/Cover')),
|
||||
// Z
|
||||
[Pattern.ZigzagTimeline]: dynamic(() => import('../patterns/zigzag-timeline/Cover')),
|
||||
};
|
||||
|
||||
export const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
|
||||
const Cover = CoverList[pattern];
|
||||
|
||||
return (
|
||||
<Link href={`/${slug(pattern)}`}>
|
||||
<a className="block-cover">
|
||||
<Cover />
|
||||
<h4 className="block-cover__name">{pattern}</h4>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
@@ -1,16 +0,0 @@
|
||||
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>
|
||||
);
|
||||
@@ -1,8 +0,0 @@
|
||||
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>
|
||||
);
|
||||
@@ -1,32 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { Footer, FooterGroup, FooterLink } from '@1milligram/design';
|
||||
|
||||
export const FooterBlock = () => (
|
||||
<footer className="block-footer">
|
||||
<div className="block-container">
|
||||
<Footer>
|
||||
<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="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 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()}, Nguyen Huu Phuoc. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
@@ -1,37 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
import * as React from 'react';
|
||||
import { Logo } from '@1milligram/design';
|
||||
|
||||
export const HeaderBlock = () => {
|
||||
const [totalStars, setTotalStars] = React.useState(0);
|
||||
|
||||
React.useEffect(() => {
|
||||
fetch('https://api.github.com/repos/phuocng/csslayout')
|
||||
.then((res) => res.json())
|
||||
.then((data) => setTotalStars(data.stargazers_count))
|
||||
.catch(console.log);
|
||||
}, []);
|
||||
|
||||
const HeaderLogo = React.forwardRef<HTMLAnchorElement, React.LinkHTMLAttributes<HTMLAnchorElement>>(
|
||||
(props, ref) => (
|
||||
<a href={props.href} onClick={props.onClick} ref={ref}>
|
||||
<Logo brand="CSS Layout" />
|
||||
</a>
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<header className="block-header">
|
||||
<div className="block-container">
|
||||
<div className="block-header__inner">
|
||||
<Link href="/" passHref>
|
||||
<HeaderLogo />
|
||||
</Link>
|
||||
<Link href="https://github.com/phuocng/csslayout">
|
||||
<a className="block-header__cta">GitHub {totalStars}★</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { Heading } from '@1milligram/design';
|
||||
|
||||
import { Pattern } from '../constants/Pattern';
|
||||
import { CoverCard } from './CoverCard';
|
||||
|
||||
export const RelatedPatterns: React.FC<{
|
||||
patterns: Pattern[];
|
||||
}> = ({ patterns }) => {
|
||||
return (
|
||||
<section>
|
||||
<Heading level={2}>See also</Heading>
|
||||
|
||||
<div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '1.5rem' }}>
|
||||
{patterns.map((pattern) => (
|
||||
<CoverCard key={pattern} pattern={pattern} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
12
contents/_includes/css-scan.njk
Normal file
12
contents/_includes/css-scan.njk
Normal file
@@ -0,0 +1,12 @@
|
||||
<a class="cssscan" href="https://gumroad.com/a/719368019" target="_blank">
|
||||
<div class="cssscan__inner">
|
||||
<p class="cssscan__title">Have you seen CSS Scan?</p>
|
||||
<p class="cssscan__desc">The fastest and easiest way to check, copy and edit CSS.</p>
|
||||
<p class="cssscan__more">Learn more →</p>
|
||||
<img
|
||||
class="cssscan__image"
|
||||
src="https://toastlog.com/img/logos/cssscan.svg"
|
||||
alt="CSS Scan logo"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
@@ -11,6 +11,9 @@ layout: layouts/base.njk
|
||||
</div>
|
||||
<a class="header__link header__link--primary" href="https://github.com/phuocng/csslayout">GitHub {{ github.stargazers }}★</a>
|
||||
</div>
|
||||
|
||||
{% include "css-scan.njk" %}
|
||||
|
||||
<div class="post">
|
||||
<h1 class="post__heading">{{ title }}</h1>
|
||||
<div class="post__content">{{ content | safe }}</div>
|
||||
|
||||
@@ -10,6 +10,8 @@ eleventyExcludeFromCollections: true
|
||||
<a class="hero__button" href="https://github.com/phuocng/csslayout">Star me on GitHub · {{ github.stargazers }}★</a>
|
||||
</div>
|
||||
|
||||
{% include "css-scan.njk" %}
|
||||
|
||||
<div class="category">
|
||||
<h2 class="category__name">Display</h2>
|
||||
<div class="category__posts">
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
import React from 'react';
|
||||
import Head from 'next/head';
|
||||
|
||||
// Design
|
||||
import '@1milligram/design/lib/styles/index.css';
|
||||
import '../styles/index.scss';
|
||||
|
||||
const MyApp: React.FC<{
|
||||
Component: any;
|
||||
pageProps: any;
|
||||
}> = ({ Component, pageProps }) => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</Head>
|
||||
<Component {...pageProps} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MyApp;
|
||||
@@ -1,52 +0,0 @@
|
||||
import Document, { Html, Head, Main, NextScript } from 'next/document';
|
||||
|
||||
class MyDocument extends Document {
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<meta charSet="utf-8" />
|
||||
<link rel="icon" href="/favicon.png" type="image/png" />
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||
<link rel="mask-icon" href="/mask-favicon.svg" color="#1975FF" />
|
||||
|
||||
<meta content="A collection of popular layouts and patterns made with CSS" name="description" />
|
||||
<meta
|
||||
content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template"
|
||||
name="keywords"
|
||||
/>
|
||||
<meta content="Nguyen Huu Phuoc" name="author" />
|
||||
<meta content="@nghuuphuoc" name="twitter:site" />
|
||||
<meta content="summary" name="twitter:card" />
|
||||
<meta
|
||||
content="A collection of popular layouts and patterns made with CSS"
|
||||
name="twitter:description"
|
||||
/>
|
||||
<meta content="A collection of popular layouts and patterns made with CSS" name="twitter:title" />
|
||||
|
||||
<meta content="A collection of popular layouts and patterns made with CSS" property="og:title" />
|
||||
<meta
|
||||
content="A collection of popular layouts and patterns made with CSS"
|
||||
property="og:description"
|
||||
/>
|
||||
<meta content="article" property="og:type" />
|
||||
<meta content="https://csslayout.io" property="og:url" />
|
||||
<meta content="CSS Layout" property="og:site_name" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?&family=Source+Code+Pro:wght@400&family=Inter:wght@400;700&display=swap"
|
||||
/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument;
|
||||
161
pages/index.tsx
161
pages/index.tsx
@@ -1,161 +0,0 @@
|
||||
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';
|
||||
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<Layout title="A collection of popular layouts and patterns made with CSS">
|
||||
<div className="block-container">
|
||||
<div className="page-home__hero">
|
||||
<Spacer size="extraLarge" />
|
||||
<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>
|
||||
|
||||
<div className="page-home__category">
|
||||
<Heading level={2}>Display</Heading>
|
||||
</div>
|
||||
<div className="page-home__collection">
|
||||
<CoverCard pattern={Pattern.Accordion} />
|
||||
<CoverCard pattern={Pattern.ArrowButtons} />
|
||||
<CoverCard pattern={Pattern.Avatar} />
|
||||
<CoverCard pattern={Pattern.AvatarList} />
|
||||
<CoverCard pattern={Pattern.Badge} />
|
||||
<CoverCard pattern={Pattern.Card} />
|
||||
<CoverCard pattern={Pattern.Centering} />
|
||||
<CoverCard pattern={Pattern.CloseButton} />
|
||||
<CoverCard pattern={Pattern.ColorSwatch} />
|
||||
<CoverCard pattern={Pattern.ConcaveCorners} />
|
||||
<CoverCard pattern={Pattern.CookieBanner} />
|
||||
<CoverCard pattern={Pattern.CornerRibbon} />
|
||||
<CoverCard pattern={Pattern.CurvedBackground} />
|
||||
<CoverCard pattern={Pattern.DiagonalSection} />
|
||||
<CoverCard pattern={Pattern.DockedAtCorner} />
|
||||
<CoverCard pattern={Pattern.DotLeader} />
|
||||
<CoverCard pattern={Pattern.DropArea} />
|
||||
<CoverCard pattern={Pattern.DropCap} />
|
||||
<CoverCard pattern={Pattern.FadingLongSection} />
|
||||
<CoverCard pattern={Pattern.FeatureComparison} />
|
||||
<CoverCard pattern={Pattern.FeatureList} />
|
||||
<CoverCard pattern={Pattern.FixedAtCorner} />
|
||||
<CoverCard pattern={Pattern.FixedAtSide} />
|
||||
<CoverCard pattern={Pattern.FolderStructure} />
|
||||
<CoverCard pattern={Pattern.FullBackground} />
|
||||
<CoverCard pattern={Pattern.InitialAvatar} />
|
||||
<CoverCard pattern={Pattern.InvertedCorners} />
|
||||
<CoverCard pattern={Pattern.KeyboardShortcut} />
|
||||
<CoverCard pattern={Pattern.LayeredCard} />
|
||||
<CoverCard pattern={Pattern.LinedPaper} />
|
||||
<CoverCard pattern={Pattern.MediaObject} />
|
||||
<CoverCard pattern={Pattern.OverlayPlayButton} />
|
||||
<CoverCard pattern={Pattern.PriceTag} />
|
||||
<CoverCard pattern={Pattern.PricingTable} />
|
||||
<CoverCard pattern={Pattern.PropertyList} />
|
||||
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
|
||||
<CoverCard pattern={Pattern.Ribbon} />
|
||||
<CoverCard pattern={Pattern.Separator} />
|
||||
<CoverCard pattern={Pattern.StackedCards} />
|
||||
<CoverCard pattern={Pattern.StampBorder} />
|
||||
<CoverCard pattern={Pattern.Statistic} />
|
||||
<CoverCard pattern={Pattern.StatusLight} />
|
||||
<CoverCard pattern={Pattern.StickyTableColumn} />
|
||||
<CoverCard pattern={Pattern.StickyTableHeaders} />
|
||||
<CoverCard pattern={Pattern.Teardrop} />
|
||||
<CoverCard pattern={Pattern.ThreeDimensionsCard} />
|
||||
<CoverCard pattern={Pattern.Timeline} />
|
||||
<CoverCard pattern={Pattern.TreeDiagram} />
|
||||
<CoverCard pattern={Pattern.TriangleButtons} />
|
||||
<CoverCard pattern={Pattern.VideoBackground} />
|
||||
<CoverCard pattern={Pattern.Voting} />
|
||||
<CoverCard pattern={Pattern.Watermark} />
|
||||
<CoverCard pattern={Pattern.ZigzagTimeline} />
|
||||
</div>
|
||||
|
||||
<div className="page-home__category">
|
||||
<Heading level={2}>Feedback</Heading>
|
||||
</div>
|
||||
<div className="page-home__collection">
|
||||
<CoverCard pattern={Pattern.Modal} />
|
||||
<CoverCard pattern={Pattern.Notification} />
|
||||
<CoverCard pattern={Pattern.PopoverArrow} />
|
||||
<CoverCard pattern={Pattern.ProgressBar} />
|
||||
<CoverCard pattern={Pattern.RadialProgressBar} />
|
||||
<CoverCard pattern={Pattern.ResizableElement} />
|
||||
<CoverCard pattern={Pattern.PresenceIndicator} />
|
||||
<CoverCard pattern={Pattern.Tooltip} />
|
||||
<CoverCard pattern={Pattern.ValidationIcon} />
|
||||
</div>
|
||||
|
||||
<div className="page-home__category">
|
||||
<Heading level={2}>Input</Heading>
|
||||
</div>
|
||||
<div className="page-home__collection">
|
||||
<CoverCard pattern={Pattern.ButtonWithIcon} />
|
||||
<CoverCard pattern={Pattern.Chip} />
|
||||
<CoverCard pattern={Pattern.CustomCheckboxButton} />
|
||||
<CoverCard pattern={Pattern.CustomRadioButton} />
|
||||
<CoverCard pattern={Pattern.FloatingLabel} />
|
||||
<CoverCard pattern={Pattern.InputAddon} />
|
||||
<CoverCard pattern={Pattern.RadioButtonGroup} />
|
||||
<CoverCard pattern={Pattern.RadioSwitch} />
|
||||
<CoverCard pattern={Pattern.Rating} />
|
||||
<CoverCard pattern={Pattern.SearchBox} />
|
||||
<CoverCard pattern={Pattern.Slider} />
|
||||
<CoverCard pattern={Pattern.SpinButton} />
|
||||
<CoverCard pattern={Pattern.StepperInput} />
|
||||
<CoverCard pattern={Pattern.Switch} />
|
||||
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
|
||||
<CoverCard pattern={Pattern.UploadButton} />
|
||||
</div>
|
||||
|
||||
<div className="page-home__category">
|
||||
<Heading level={2}>Layout</Heading>
|
||||
</div>
|
||||
<div className="page-home__collection">
|
||||
<CoverCard pattern={Pattern.CardLayout} />
|
||||
<CoverCard pattern={Pattern.HolyGrail} />
|
||||
<CoverCard pattern={Pattern.MasonryGrid} />
|
||||
<CoverCard pattern={Pattern.SameHeightColumns} />
|
||||
<CoverCard pattern={Pattern.Sidebar} />
|
||||
<CoverCard pattern={Pattern.SimpleGrid} />
|
||||
<CoverCard pattern={Pattern.SplitScreen} />
|
||||
<CoverCard pattern={Pattern.StickyFooter} />
|
||||
<CoverCard pattern={Pattern.StickyHeader} />
|
||||
<CoverCard pattern={Pattern.StickySections} />
|
||||
</div>
|
||||
|
||||
<div className="page-home__category">
|
||||
<Heading level={2}>Navigation</Heading>
|
||||
</div>
|
||||
<div className="page-home__collection">
|
||||
<CoverCard pattern={Pattern.Breadcrumb} />
|
||||
<CoverCard pattern={Pattern.CircularNavigation} />
|
||||
<CoverCard pattern={Pattern.DotNavigation} />
|
||||
<CoverCard pattern={Pattern.Drawer} />
|
||||
<CoverCard pattern={Pattern.Dropdown} />
|
||||
<CoverCard pattern={Pattern.FullScreenMenu} />
|
||||
<CoverCard pattern={Pattern.MegaMenu} />
|
||||
<CoverCard pattern={Pattern.Menu} />
|
||||
<CoverCard pattern={Pattern.NestedDropdowns} />
|
||||
<CoverCard pattern={Pattern.Pagination} />
|
||||
<CoverCard pattern={Pattern.PreviousNextButtons} />
|
||||
<CoverCard pattern={Pattern.SplitNavigation} />
|
||||
<CoverCard pattern={Pattern.Tab} />
|
||||
<CoverCard pattern={Pattern.Wizard} />
|
||||
</div>
|
||||
|
||||
<Spacer size="large" />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
83
styles/blocks/_css-scan.scss
Normal file
83
styles/blocks/_css-scan.scss
Normal file
@@ -0,0 +1,83 @@
|
||||
.cssscan {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cssscan__inner {
|
||||
background: #c2fbd7;
|
||||
border-radius: 0.5rem;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cssscan__title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cssscan__desc {
|
||||
opacity: 0.8;
|
||||
color: #333;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.cssscan__more {
|
||||
margin: 0;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.cssscan__image {
|
||||
position: absolute;
|
||||
transform: rotate(-7deg);
|
||||
transition: all 0.3s;
|
||||
top: 14%;
|
||||
right: -37%;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
.cssscan__inner:hover {
|
||||
.cssscan__more {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.cssscan__image {
|
||||
transform: scale(1.1) rotate(-7deg);
|
||||
top: 10%;
|
||||
right: -35%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 0px) and (max-width: 1024px) {
|
||||
.cssscan {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cssscan__inner {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.cssscan__image {
|
||||
top: initial;
|
||||
bottom: -14%;
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
right: -5%;
|
||||
}
|
||||
|
||||
.cssscan__inner:hover .cssscan__image {
|
||||
top: initial;
|
||||
bottom: -10%;
|
||||
right: -5%;
|
||||
transform: scale(1.1) rotate(-7deg);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
@import './common';
|
||||
|
||||
@import './blocks/category';
|
||||
@import './blocks/css-scan';
|
||||
@import './blocks/example';
|
||||
@import './blocks/hero';
|
||||
@import './blocks/follow';
|
||||
|
||||
Reference in New Issue
Block a user