Merge pull request #39 from lcfd/development

Update README and added a logo

README.md

@@ -1,4 +1,4 @@
-# Grigliata
+![logo](./assets/logo-colored.svg)
 
 A styled-components grid system.
 
@@ -10,6 +10,39 @@ A styled-components grid system.
 
 [Documentation](https://lcfd.github.io/grigliata/) that is also a demo.
 
+## A full example
+
+```jsx
+export const App = () => {
+  const ROW_PADDING = {
+    mobile: 0.5,
+    tabletPortrait: 0.5,
+    tabletLandscape: 0.5,
+    desktop: 0.5
+  };
+
+  return (
+    <div>
+      <Container>
+          <Row paddingLeft={ROW_PADDING} paddingRight={ROW_PADDING}>
+            <Column
+              columnWidth={{
+                mobile: 12,
+                tabletPortrait: 12,
+                tabletLandscape: 12,
+                desktop: 12
+              }}
+            >
+            <p>Content</p>
+          </Column>
+          </Row>
+      </Container>
+    </div>
+  )
+}
+```
+
+
 ## Development
 
 To test the package we suggest to use the [yalc](https://www.npmjs.com/package/yalc) package.

docs/docusaurus.config.js

@@ -5,7 +5,7 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 (
   module.exports = {
-    title: "Grigliata 🥩",
+    title: "Grigliata",
     tagline: "A styled-components grid system.",
     url: "https://lcfd.github.io",
     baseUrl: "/grigliata/",

docs/src/pages/about.md

@@ -4,6 +4,10 @@ title: About
 
 # About
 
+
+![logo](/img/logo-colored.svg)
+
+
 ![grigliata](/img/dustin-tramel-KuuQczwD4IA-unsplash.jpg)
 
 <small>Photo by <a href="https://unsplash.com/@dustintramel?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Dustin Tramel</a> on <a href="https://unsplash.com/s/photos/barbeque?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
@@ -15,7 +19,7 @@ A grid system made with styled components.
 
 ## The name?
 
-[Grigliata](https://it.wikipedia.org/wiki/Grigliata) is the italian name of Barbecue.
+[Grigliata](https://it.wikipedia.org/wiki/Grigliata) is the italian name of barbecue.
 
 Grigliata is a grid system.
 

docs/src/pages/index.js

@@ -1,18 +1,21 @@
-import React from "react";
-import clsx from "clsx";
-import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import styles from "./index.module.css";
+import LogoColoredSvg from "@site/static/img/logo-colored.svg";
+import Layout from "@theme/Layout";
+import clsx from "clsx";
+import React from "react";
 import HomepageFeatures from "../components/HomepageFeatures";
+import styles from "./index.module.css";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    // <header className={clsx("hero hero--primary", styles.heroBanner)}>
     <header className={clsx("hero", styles.heroBanner)}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
+        <div>
+          <LogoColoredSvg />
+        </div>
+        {/* <h1 className="hero__title">{siteConfig.title}</h1> */}
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link

docs/src/pages/index.module.css

@@ -3,19 +3,16 @@
   text-align: center;
   position: relative;
   overflow: hidden;
-  background-color: var(--ifm-color-primary);
-  background-image: linear-gradient(
-    160deg,
-    var(--ifm-color-primary-darkest) 0%,
-    var(--ifm-color-primary-darker) 100%
-  );
-  color: #fff;
 }
 
 @media screen and (max-width: 966px) {
   .heroBanner {
     padding: 2rem;
   }
+
+  .heroBanner svg {
+    max-width: 100%;
+  }
 }
 
 .buttons {