{"version":3,"sources":["webpack:///./src/pages/styleguide.js"],"names":["content","join","paragraph","ExternalLink","href","children","target","rel","StyleGuide","props","location","title","to","description","alt","src","className","data-language","class","cellspacing","cellpadding","controls","type","width","height"],"mappings":"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","file":"component---src-pages-styleguide-js-2c60e9d8cae4a8ebfe67.js","sourcesContent":["import React from 'react';\nimport License from '../components/license';\nimport Layout from '../components/layout';\nimport SEO from '../components/seo';\n\nconst content = [\n  'Cupcake ipsum dolor sit amet gummi bears candy.',\n  'Gummi bears jelly apple pie toffee candy canes.',\n  'Marshmallow oat cake pie lollipop ice cream apple pie oat cake.',\n  'Gummies dragée candy canes.',\n].join(' ');\nconst paragraph = <p>{content}</p>;\n\nconst ExternalLink = ({ href, children }) => (\n  <a href={href} target=\"_blank\" rel=\"noopener noreferrer\">{children}</a>\n);\n\nconst StyleGuide = (props) => (\n  <Layout location={props.location} title=\"Homepage\" to=\"/\">\n    <SEO title=\"Style Guide\" description=\"Style Guide of Website\" location={props.location} />\n    <header>\n      <h1>Style Guide</h1>\n      <p>\n        This style guide was based on <ExternalLink href=\"https://www.chenhuijing.com/styleguide/\">\n          Style Guide\n        </ExternalLink> created by <ExternalLink href=\"https://www.chenhuijing.com/\">\n          Chen Hui Jing\n        </ExternalLink>.\n      </p>\n    </header>\n    <article>\n      <section>\n        <header><h1>Headings</h1></header>\n        <h1>Heading 1</h1>\n        <h2>Heading 2</h2>\n        <h3>Heading 3</h3>\n        <h4>Heading 4</h4>\n        <h5>Heading 5</h5>\n        <h6>Heading 6</h6>\n      </section>\n      <hr />\n      <section>\n        <header><h1>Headings with Text</h1></header>\n        <h1>Heading 1</h1>\n        {paragraph}\n        <h2>Heading 2</h2>\n        {paragraph}\n        <h3>Heading 3</h3>\n        {paragraph}\n        <h4>Heading 4</h4>\n        {paragraph}\n        <h5>Heading 5</h5>\n        {paragraph}\n        <h6>Heading 6</h6>\n        {paragraph}\n      </section>\n      <hr />\n      <section>\n        <header>\n          <h1>Generic Content</h1>\n          {paragraph}\n          {paragraph}\n          <p>\n            <img\n              alt=\"Placeholder Image and Some Alt Text\"\n              src=\"http://lorempixel.com/400/200/sports\"\n              title=\"A title element for this placeholder image.\"\n            />\n          </p>\n          {paragraph}\n          <blockquote>\n            \"Computers will not be perfected until they can compute\n            how much more than the estimate the job will cost.\"\n          </blockquote>\n        </header>\n      </section>\n      <hr />\n      <section>\n        <header><h1>Text Elements</h1></header>\n        <p>The <a href=\"#\">a element</a> example</p>\n        <p>The <abbr>abbr element</abbr> and an <abbr title=\"Abbreviation\">abbr</abbr> element with title examples</p>\n        <p>The <acronym title=\"A Cowboy Ran One New York Marathon\">ACRONYM</acronym> element example</p>\n        <p>The <b>b element</b> example</p>\n        <p>The <cite>cite element</cite> example</p>\n        <p>The <code>code element</code> example</p>\n        <p>The <em>em element</em> example</p>\n        <p>The <del>del element</del> example</p>\n        <p>The <dfn>dfn element</dfn> and <dfn title=\"Title text\">dfn element with title</dfn> examples</p>\n        <p>The <i>i element</i> example</p>\n        <p>The <ins>ins element</ins> example</p>\n        <p>The <kbd>kbd element</kbd> example</p>\n        <p>The <mark>mark element</mark> example</p>\n        <p>The <q>q element</q> example</p>\n        <p>The <q>q element <q>inside</q> a q element</q> example</p>\n        <p>The <s>s element</s> example</p>\n        <p>The <samp>samp element</samp> example</p>\n        <p>The <small>small element</small> example</p>\n        <p>The <span>span element</span> example</p>\n        <p>The <strong>strong element</strong> example</p>\n        <p>The <sub>sub element</sub> example</p>\n        <p>The <sup>sup element</sup> example</p>\n        <p>The <u>u element</u> example</p>\n        <p>The <var>var element</var> example</p>\n        <p>The <ruby>ruby element<rp>(</rp><rt>注音符号</rt><rp>)</rp></ruby> example</p>\n      </section>\n      <hr />\n      <section>\n        <header><h1>Monospace / Preformatted</h1></header>\n        <p>Code block wrapped in \"pre\" and \"code\" tags</p>\n        <div className=\"gatsby-highlight\" data-language=\"javascript\">\n          <pre className=\"language-javascript\">\n            <code class=\"language-javascript\">\n              <span class=\"token comment\">// Loop through Divs using Javascript.</span>\n              {'\\n'}\n              <span class=\"token keyword\">var</span> divs <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelectorAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> i<span class=\"token punctuation\">;</span>\n              {'\\n\\n'}\n              <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span>i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\">&lt;</span> divs<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">;</span> <span class=\"token operator\">++</span>i<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{'{'}</span>\n              {'\\n'}\n              {'  divs'}<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>color <span class=\"token operator\">=</span> <span class=\"token string\">\"green\"</span><span class=\"token punctuation\">;</span>\n              {'\\n'}\n              <span class=\"token punctuation\">{'}'}</span>\n            </code>\n          </pre>\n        </div>\n        <p>Monospace Text wrapped in \"pre\" tags</p>\n        <pre>{paragraph}</pre>\n      </section>\n      <hr />\n      <section>\n        <header><h1>List Types</h1></header>\n        <h3>Ordered List</h3>\n        <ol>\n          <li>List Item 1</li>\n          <li>List Item 2</li>\n          <li>List Item 3</li>\n        </ol>\n        <h3>Unordered List</h3>\n        <ul>\n          <li>List Item 1</li>\n          <li>List Item 2</li>\n          <li>List Item 3</li>\n        </ul>\n        <h3>Definition List</h3>\n        <dl>\n          <dt>Definition List Term 1</dt>\n          <dd>This is a definition list description.</dd>\n          <dt>Definition List Term 2</dt>\n          <dd>This is a definition list description.</dd>\n          <dt>Definition List Term 3</dt>\n          <dd>This is a definition list description.</dd>\n        </dl>\n      </section>\n      <hr />\n      <section>\n        <header><h1>Tables</h1></header>\n        <table cellspacing=\"0\" cellpadding=\"0\">\n          <tbody>\n            <tr>\n              <th>Table Header 1</th>\n              <th>Table Header 2</th>\n              <th>Table Header 3</th>\n            </tr>\n            <tr>\n              <td>Division 1</td>\n              <td>Division 2</td>\n              <td>Division 3</td>\n            </tr>\n            <tr class=\"even\">\n              <td>Division 1</td>\n              <td>Division 2</td>\n              <td>Division 3</td>\n            </tr>\n            <tr>\n              <td>Division 1</td>\n              <td>Division 2</td>\n              <td>Division 3</td>\n            </tr>\n          </tbody>\n        </table>\n      </section>\n      <hr />\n      <section>\n        <header><h1>Media Elements</h1></header>\n        <p>The Audio Element:</p>\n        <audio controls=\"controls\">\n          <source src=\"http://www.w3schools.com/tags/horse.ogg\" type=\"audio/ogg\" />\n          <source src=\"http://www.w3schools.com/tags/horse.mp3\" type=\"audio/mpeg\" />\n          Your browser does not support the audio element.\n        </audio>\n        <p>The Video Element:</p>\n        <video width=\"320\" height=\"240\" controls=\"controls\">\n          <source src=\"http://www.w3schools.com/tags/movie.mp4\" type=\"video/mp4\" />\n          <source src=\"http://www.w3schools.com/tags/movie.ogg\" type=\"video/ogg\" />\n          Your browser does not support the video tag.\n        </video>\n      </section>\n      <hr />\n      <footer>\n        <License />\n      </footer>\n    </article>\n  </Layout>\n);\n\nexport default StyleGuide;\n"],"sourceRoot":""}