index.html

<!DOCTYPE html>
<html>

<head>

  <title>Pocket Docs</title>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@catppuccin/highlightjs@0.1.4/css/catppuccin-mocha.css">
  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@catppuccin/highlightjs@0.1.4/css/catppuccin-latte.css"> -->
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlightjs-copy@1.0.5/dist/highlightjs-copy.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/highlightjs-copy@1.0.5/dist/highlightjs-copy.min.js"></script>

  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
  <script>
    hljs.highlightAll();
    hljs.addPlugin(new CopyButtonPlugin());
  </script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jyoungblood/pocketdocs@0.0.2/css/styles.css">
  <script src="https://cdn.jsdelivr.net/gh/jyoungblood/pocketdocs@0.0.2/js/scripts.js"></script>

  <!-- <link rel="stylesheet" href="./css/styles.css"> -->
  <!-- <script src="./js/scripts.js"></script> -->

</head>

<body>


  <section id="sidebar" class="mobile-hidden">

    <header onclick="dropdown_toggle()">

      <div class="title-container">

        <div class="logo">
          <a href="#">
            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
              stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 7h.01"></path>
              <path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20"></path>
              <path d="m20 7 2 .5-2 .5"></path>
              <path d="M10 18v3"></path>
              <path d="M14 17.75V21"></path>
              <path d="M7 18a6 6 0 0 0 3.84-10.61"></path>
            </svg>
          </a>
        </div>

        <div class="title">
          <a href="#">
            <strong>POCKET DOCS</strong>
            <span>v0.0.2</span>
          </a>
        </div>

      </div>

      <div class="dd-icon">
        <svg class="dd-open" stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z" fill="currentColor"></path></svg>        
        <svg class="dd-close" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"></path></svg>
      </div>

    </header>


    <nav>

      <ul>
        <li><a href="#installation">Installation</a></li>
      </ul>

      <ul>
        <li><a href="#getting-started">Getting Started</a></li>
        <ul>
          <li><a href="#core-concepts">Core Concepts</a></li>
          <li><a href="#code-samples">Code Samples</a></li>
        </ul>
      </ul>

      <ul>
        <li><a href="#next-steps">Next Steps</a></li>
      </ul>

    </nav>

  </section>


  <main>


    <article id="home">

      <div>

        <h1>POCKET DOCS</h1>
        <div class="subtitle">A small and simple documentation template.</div>
        
        <div class="download-button">
          <a href="https://github.com/jyoungblood/pocketdocs/archive/refs/tags/0.0.2.zip">&darr;&nbsp; pocketdocs-0.0.2.zip</a>
        </div>

        <div class="source-link">
          <a target="_blank" href="https://github.com/jyoungblood/pocketdocs">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
            <span>SOURCE</span>
          </a>
        </div>

      </div>

    </article>


    <article id="intro" style="padding: 6rem 0;">

      <div style="font-size: 1.25rem; max-width: 45rem; margin: auto; text-align: center;">
        <p>Lorem Ipsum is a dolor sit amet for consectetur adipiscing.</p>
        <p>It's designed to be simple and easy to use.</p>
        <p>It's <b>free</b> and <b>open source</b>.</p>
      </div>

    </article>


    <article>

      <h2 id="installation">Installation</h2>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>


      <div class="columns">

        <div>

          <h3>Installation</h3>

          <ul>
            <li><strong>Lorem</strong> - lorem ipsum dolor sit amet</li>            
            <li><strong>Ipsum</strong> - consectetur adipiscing elit</li>
            <li><strong>Dolor</strong> - sed do eiusmod tempor</li>
            <li><strong>Sit</strong> - incididunt ut labore</li>            
          </ul>

        </div>

        <div>

          <h3>Server Requirements</h3>

          <ul>
            <li><strong>Amet</strong> - ut enim ad minim veniam</li>
            <li><strong>Consectetur</strong> - quis nostrud exercitation ullamco</li>
            <li><strong>Adipiscing</strong> - laboris nisi ut aliquip ex ea</li>
            <li><strong>Elit</strong> - aute irure dolor in reprehenderit</li>
          </ul>

        </div>

      </div>


      <p>
        <small>* NOTE: consectetur adipiscing elit, sed do eiusmod tempor incididunt.</small>
      </p>


      <h3>Application Structure</h3>

      <p>
        Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia.
      </p>


      <h3>Included libraries</h3>

      <p>
        Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia.
      </p>


    </article>


    <article>

      <h2 id="getting-started">Getting Started</h2>
      
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>


      <h3 id="core-concepts">Core Concepts</h3>

      <div class="columns">

        <div>
          <ul>
            <li><strong>Lorem</strong> - lorem ipsum dolor sit amet</li>
            <li><strong>Ipsum</strong> - consectetur adipiscing elit</li>
            <li><strong>Dolor</strong> - sed do eiusmod tempor</li>
            <li><strong>Sit</strong> - incididunt ut labore</li>
          </ul>
        </div>

        <div style="padding-right: 3rem;">

          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex...
          </p>

        </div>

      </div>

      <p>
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore!
      </p>


      <h3 id="code-samples">Code Samples</h3>

      <p>
        Look at the source and notice how we're handling the code comments. There are some caveats that come with the territory using this highlighting library, but we're working on fixes to make this a little easier in the future.
      </p>

      <pre><code class="language-php">function literally($string){
  return $string;
}</code></pre>

      <p>
        And here's some HTML. Again, look at the source and notice how we have convert the tag characters to HTML entities.
      </p>

        <pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;&#123;&#123;title&#125;&#125;&lt;/title&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /&gt;
  &lt;link rel="stylesheet" href="/css/app.css" /&gt;
&lt;/head&gt;
&lt;body&gt;

  &lt;div class="header"&gt;&lt;h1&gt;Site Title&lt;/h1&gt;&lt;/div&gt;

  &lt;div class="container"&gt;
    {{outlet}}
  &lt;/div&gt;

  &lt;div class="footer"&gt;&amp;copy; &#123;&#123;year&#125;&#125; -- All rights reserved.&lt;/div&gt;

  &lt;script src="/js/vendor/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="/js/app.js"&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>


      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>


    </article>


    <article>

      <h2 id="next-steps">Next Steps</h2>
      
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>

    </article>


    <footer>
      <a href="https://jyoungblood.github.io/">&copy; 2048 JY ♥</a>
    </footer>


  </main>


</body>
</html>