diff --git a/README.md b/README.md index 3f1ca04..1cb2117 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,19 @@ They are powered by modern CSS features such as flexbox and grid. They are great starting points and could be picked and customized easily for each specific need. By composing them, you can have any possible layout that exists in the real life. +The entire website is powered by + +~~~ javascript +this + .madeWith([react,typescript]) + .then(r => lazyLoad(@loadable/component)) + .then(r => optimizeAndBundle(webpack)) + .then(r => exportHtml(react-snap)) + .then(r => deploy(Netlify)) + .assert([scalableCode, superFastWebsite, seoFriendly]) + .done(/* Give me 1 star */) 🎉 +~~~ + ## Running it on local - Clone the project: @@ -44,7 +57,7 @@ $ npm install $ npm run dev-server ~~~ -Visit http://localhost:8080 to see it in action. +Visit http://localhost:1234 to see it in action. ## Contributing diff --git a/client/Explore.tsx b/client/Explore.tsx index 0dfcad3..3839339 100644 --- a/client/Explore.tsx +++ b/client/Explore.tsx @@ -12,18 +12,64 @@ const Home = () => { return ( -
- CSS Layout +
+ + .home +
-
-

Explore

+
+

+ Explore +

-

Here is the collection of patterns

+

+ Here is the collection of patterns +

-
+
@@ -35,7 +81,7 @@ const Home = () => {
-
+
diff --git a/client/Home.tsx b/client/Home.tsx index 704974e..2935c1d 100644 --- a/client/Home.tsx +++ b/client/Home.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { Link } from 'react-router-dom'; +import './home.css'; + import CoverCard from './components/CoverCard'; import Pattern from './constants/Pattern'; import useDocumentTitle from './hooks/useDocumentTitle'; @@ -11,11 +13,31 @@ const Home = () => { return ( -
-
+
+

CSS Layout

@@ -33,37 +55,75 @@ const Home = () => { a collection of popular layouts and patterns made with CSS -
-
    -
  • -
    Zero dependencies
    -
    🎉
    -
    • -
  • -
    No frameworks
    -
    🎉
    -
    • -
  • -
    No CSS hacks
    -
    🎉
    -
    • -
  • -
    Real use cases
    -
    🎉
    -
    • -
  • -
    Good practices
    -
    soon
    -
    • -
  • -
    Accessibility
    -
    soon
    -
    • +
    +
      +
    • .awesome {
      • +
        +
      • +
        zero-dependencies:
        +
        🎉;
        +
        • +
      • +
        no-frameworks:
        +
        🎉;
        +
        • +
      • +
        no-css-hacks:
        +
        🎉;
        +
        • +
      • +
        real-use-cases:
        +
        🎉;
        +
        • +
      • +
        good-practices:
        +
        + soon +
        + ; +
        • +
      • +
        accessibility:
        +
        + soon +
        + ; +
        • +
      +
    • }
-
+
{
{ + + + + + + + + + + + + + +
diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx index d862514..b358a41 100644 --- a/client/components/CoverCard.tsx +++ b/client/components/CoverCard.tsx @@ -14,10 +14,27 @@ const CoverCard: React.FC = ({ pattern }) => {
-

{pattern}

+

+ {pattern} +

); diff --git a/client/components/Heading.tsx b/client/components/Heading.tsx index 0c6de4a..e728459 100644 --- a/client/components/Heading.tsx +++ b/client/components/Heading.tsx @@ -6,8 +6,24 @@ interface HeadingProps { const Heading: React.FC = ({ title }) => { return ( -
-

{title}

+
+

+ {title} +

); }; diff --git a/client/home.css b/client/home.css new file mode 100644 index 0000000..9f0f776 --- /dev/null +++ b/client/home.css @@ -0,0 +1,12 @@ +.home-cards { + animation: slide 60s linear infinite; +} + +@keyframes slide{ + 0% { + transform: translate3d(0, 0, 0); + } + 100% { + transform: translate3d(0, -600px, 0); + } +} diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx index bae7ebc..1949902 100644 --- a/client/layouts/DetailsLayout.tsx +++ b/client/layouts/DetailsLayout.tsx @@ -13,12 +13,64 @@ const DetailsLayout: React.FC = ({ title, children }) => { return ( -
- CSS Layout +
+ + .home + +
~
+ + .explore +
-
-

{title}

- +
+

+ {title} +

{children}
diff --git a/client/layouts/Footer.tsx b/client/layouts/Footer.tsx index bf9882a..2d3f683 100644 --- a/client/layouts/Footer.tsx +++ b/client/layouts/Footer.tsx @@ -4,106 +4,154 @@ import Heading from '../components/Heading'; const Footer: React.FC<{}> = () => { return ( -
- +
+
); diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx index 9d99df5..4cddafb 100644 --- a/client/layouts/Layout.tsx +++ b/client/layouts/Layout.tsx @@ -11,6 +11,55 @@ const Layout: React.FC<{}> = ({ children }) => {
{children}
); }; diff --git a/public/images/screenshot.png b/public/images/screenshot.png index 9fd930f..500b2b4 100644 Binary files a/public/images/screenshot.png and b/public/images/screenshot.png differ diff --git a/webpack.config.js b/webpack.config.js index d68cb86..c4cd15d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -71,6 +71,7 @@ module.exports = { devServer: { contentBase: path.join(__dirname, 'dist'), historyApiFallback: true, + port: 1234, }, plugins, // See https://webpack.js.org/guides/caching/