compositor.json

{
  "name": "jxnblk/sploot",
  "version": "0.1.4",
  "libraries": {
    "xv": "^1.1.19"
  },
  "title": "Sploot",
  "branch": "",
  "style": {
    "name": "Default",
    "componentSet": {
      "nav": "nav/BasicNav",
      "header": "header/BannerHeader",
      "article": "article/BasicArticle",
      "footer": "footer/BasicFooter"
    },
    "fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif",
    "fontWeight": 400,
    "bold": 600,
    "lineHeight": 1.5,
    "typeScale": [
      72,
      48,
      24,
      20,
      16,
      14,
      12
    ],
    "monospace": "Menlo, monospace",
    "heading": {
      "fontFamily": null,
      "fontStyle": null,
      "fontWeight": 600,
      "lineHeight": 1.25,
      "textTransform": null,
      "letterSpacing": null,
      "h0": {},
      "h1": {},
      "h2": {},
      "h3": {},
      "h4": {},
      "h5": {},
      "h6": {}
    },
    "alternativeText": {},
    "space": [
      0,
      8,
      16,
      32,
      48,
      64,
      96
    ],
    "layout": {
      "maxWidth": 1024,
      "centered": false
    },
    "colors": {
      "text": "#111",
      "background": "#fff",
      "primary": "#08e",
      "secondary": "#059",
      "highlight": "#e08",
      "border": "#ddd",
      "muted": "#eee"
    },
    "border": {
      "width": 1,
      "radius": 2
    },
    "link": {},
    "button": {
      "hover": {
        "boxShadow": "inset 0 0 0 999px rgba(0, 0, 0, .125)"
      }
    },
    "input": {},
    "body": {
      "margin": 0
    },
    "breakpoints": {
      "xs": "@media screen and (max-width:40em)",
      "sm": "@media screen and (min-width:40em)",
      "md": "@media screen and (min-width:52em)",
      "lg": "@media screen and (min-width:64em)"
    }
  },
  "content": [
    {
      "component": "nav",
      "links": [
        {
          "href": "http://jxnblk.com/sploot",
          "text": "Home"
        },
        {
          "href": "https://github.com/jxnblk/sploot",
          "text": "GitHub"
        },
        {
          "href": "https://npmjs.com/package/sploot",
          "text": "npm"
        }
      ]
    },
    {
      "component": "header",
      "heading": "sploot",
      "subhead": "CSS linear-gradient function for creating split backgrounds",
      "children": [
        {
          "component": "ui/TweetButton",
          "text": "sploot: CSS linear-gradient function for creating split backgrounds",
          "url": "http://jxnblk.com/sploot"
        },
        {
          "component": "ui/GithubButton",
          "user": "jxnblk",
          "repo": "sploot"
        }
      ],
      "text": "v1.0.0",
      "backgroundImage": "https://hd.unsplash.com/photo-1455380579765-810023662ea2"
    },
    {
      "component": "article",
      "metadata": {
        "source": "github.readme"
      },
      "html": "\n\n<p><a href=\"https://travis-ci.org/jxnblk/sploot\"></a></p>\n<p></p>\n<pre>npm i sploot</pre><pre><span class=\"hljs-keyword\">import</span> sploot <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&apos;sploot&apos;</span>\n\n<span class=\"hljs-keyword\">const</span> style = {\n  backgroundImage: sploot()\n}\n<span class=\"hljs-comment\">// &apos;linear-gradient(180deg, cyan 50%, white 50%)&apos;</span></pre><pre><span class=\"hljs-comment\">// with options</span>\n<span class=\"hljs-keyword\">const</span> style = {\n  backgroundImage: sploot({\n    start: <span class=\"hljs-string\">&apos;tomato&apos;</span>,\n    end: <span class=\"hljs-string\">&apos;fuchsia&apos;</span>,\n    position: <span class=\"hljs-string\">&apos;25%&apos;</span>,\n    angle: <span class=\"hljs-number\">90</span>\n  })\n}</pre><p>MIT License</p>\n"
    },
    {
      "component": "footer",
      "links": [
        {
          "href": "https://github.com/jxnblk/sploot",
          "text": "GitHub"
        },
        {
          "href": "https://github.com/jxnblk",
          "text": "jxnblk"
        }
      ]
    }
  ]
}