Update meta tags

README.md

@@ -7,9 +7,9 @@ A collection of popular layouts and patterns made with CSS:
 * 🎉No CSS hacks
 * 🎉Real use cases
 * Good practices (coming soon)
-* Accessibility (coming soon)
+* Accessibility Support (coming soon)
 
-[![CSS Layout](/public/assets/screenshot.png)](https://csslayout.io/)
+[![CSS Layout](/public/assets/screenshot.png)](https://csslayout.io)
 
 ## Why
 
@@ -23,44 +23,26 @@ They are powered by modern CSS features such as flexbox and grid.
 They are great starting points to 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 => lint(tslint))
-    .then(r => lazyLoad(@loadable/component))
-    .then(r => optimizeAndBundle(webpack))
-    .then(r => exportHtml(react-snap))
-    .then(r => deploy(Netlify))
-    .then(r => {
-        expect(r).is(scalableCode);
-        expect(r).is(superFastWebsite);
-        expect(r).is(seoFriendly);
-    })
-    .finally(() => {/* Give me 1 star */}) 🎉
-~~~
-
 ## Running it on local
 
 - Clone the project:
 
-~~~ console
+```console
 $ git clone https://github.com/phuoc-ng/csslayout
-~~~
+```
 
 - Install the dependencies:
 
-~~~ console
+```console
 $ cd csslayout
 $ npm install
-~~~
+```
 
 - Run it on the local:
 
-~~~ console
+```console
 $ npm run dev-server
-~~~
+```
 
 Visit http://localhost:1234 to see it in action.
 
@@ -70,9 +52,9 @@ PRs are welcomed. If you thing there are any missing useful layouts or patterns,
 
 It's important to note that you should run the following command to lint the code:
 
-~~~ console
+```console
 $ npm run lint
-~~~
+```
 
 If there is any issue, it will be logged in the `tslint.log` file.
 
@@ -89,52 +71,17 @@ Be my friend on
 
 You might be interested in my products:
 
-<table>
+_Products_
-    <tbody>
+* [Blur Page - A browser extension to hide sensitive information on a web page](https://blur.page)
-        <tr valign="top">
+* [Check Browsers Support - A browser extension to check browser compatibility without leaving your tab](https://checkbrowsers.support")
-            <td width="25%" align="center">
+* [Fake Numbers - Generate fake and valid numbers](https://fakenumbers.io)
-                <h3>1 LOC (3.3k★)</h3>
+* [Form Validation - The best validation library for JavaScript](https://formvalidation.io)
-                <a href="https://1loc.dev">Favorite JavaScript utilities in single line of code</a>
+* [React PDF Viewer - A React component to view a PDF document](https://react-pdf-viewer.dev)
-            </td>
+
-            <td width="25%" align="center">
+_Resources_
-                <h3>Blur Page</h3>
+* [1LOC - Favorite JavaScript utilities in single line of code](https://1loc.dev)
-                <a href="https://blur.page">A browser extension to hide sensitive information on a web page</a>
+* [CSS Layout - A collection of popular layouts and patterns made with CSS](https://csslayout.io)
-            </td>
+* [HTML DOM - How to manage HTML DOM with vanilla JavaScript](https://htmldom.dev)
-            <td width="25%" align="center">
+* [Responsive Design Patterns - A collection of patterns to create a responsive web page](https://responsive.page)
-                <h3>Check Browsers Support</h3>
+* [Super tiny, quick tips, tricks and best practices of front-end development](https://getfrontend.tips)
-                <a href="https://checkbrowsers.support">A browser extension to check browser compatibility without leaving your tab</a>
+* [this VS that - The differences between ___ and ___ in the front-end development](https://thisthat.dev)
-            </td>
-            <td width="25%" align="center">
-                <h3>CSS Layout (2.7k★)</h3>
-                <a href="https://csslayout.io">A collection of popular layouts and patterns made with CSS</a>
-            </td>
-        </tr>
-        <tr valign="top">
-            <td width="25%" align="center">
-                <h3>Fake Numbers</h3>
-                <a href="https://fakenumbers.io">Generate fake and valid numbers</a>
-            </td>
-            <td width="25%" align="center">
-                <h3>Form Validation</h3>
-                <a href="https://formvalidation.io">The best validation library for JavaScript</a>
-            </td>
-            <td width="25%" align="center">
-                <h3>HTML DOM (3.1k★)</h3>
-                <a href="https://htmldom.dev">How to manage HTML DOM with vanilla JavaScript</a>
-            </td>
-            <td width="25%" align="center">
-                <h3>React PDF Viewer</h3>
-                <a href="https://react-pdf-viewer.dev">A React component to view a PDF document</a>
-            </td>
-        </tr>
-        <tr valign="top">
-            <td width="25%" align="center">
-                <h3>this VS that</h3>
-                <a href="https://thisthat.dev">The differences between ___ and ___ in the front-end development</a>
-            </td>
-            <td width="25%" align="center"></td>
-            <td width="25%" align="center"></td>
-            <td width="25%" align="center"></td>
-        </tr>
-    </tbody>
-</table>

client/index.css

@@ -88,6 +88,7 @@ pre {
     box-shadow: none;
     color: #FFF;
     font-family: "Source Code Pro", monospace;
+    font-size: 1.25rem;
     height: 100%;
     line-height: 1.5;
     margin: 0px;

client/index.html

@@ -4,6 +4,19 @@
     <title>CSS layout</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="Nguyen Huu Phuoc" />
+    <meta name="description" content="A collection of popular layouts and patterns made with CSS" />
+
+    <meta name="twitter:site" content="@nghuuphuoc" />
+    <meta name="twitter:title" content="A collection of popular layouts and patterns made with CSS" />
+    <meta name="twitter:description" content="A collection of popular layouts and patterns made with CSS" />
+    <meta name="twitter:creator" content="@nghuuphuoc" />
+    <meta name="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
+
+    <meta property="og:site_name" content="1 LOC" />
+    <meta property="og:title" content="A collection of popular layouts and patterns made with CSS" />
+    <meta property="og:description" content="A collection of popular layouts and patterns made with CSS" />
+    <meta property="og:url" content="https://csslayout.io" />
+    <meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
 
     <link href="/assets/favicon.png" rel="icon">
     <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&family=Lato&display=swap" rel="stylesheet">