<?php 
  // the query to set the posts per page to 3
  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
  $args = array('posts_per_page' => 30, 'paged' => $paged );
  query_posts($args); 
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="canonical" href="https://blablabla.com" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors" />
    <meta name="generator" content="Hugo 0.84.0" />
    <title>Starter Template · Bootstrap v5.0</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />

    <!-- fontawesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <!-- masonry -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="//npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
    <script src="//npmcdn.com/isotope-masonry-horizontal@2/masonry-horizontal.js"></script>

    <!-- <link rel="stylesheet" href="style.css" /> -->
    <link href="<?php echo get_template_directory_uri() . '/template-parts/home/css/style.css'; ?>" rel="stylesheet" />
  </head>

  <body>
    <header class="col-lg-8 mx-auto py-md-1 header-container" style="position: sticky; top: 0; width: 100%">
      <div class="row" style="height: 100%">
        <div
          class="col-xs-12 col-md-2 header-company-logo-container"
          style="display: flex; flex-direction: column; justify-content: center; align-items: center"
        >
          <div
            class="header-company-logo"
            style="
              background-image: url('https://unblast.com/wp-content/themes/unblast-beta/images/unblast.svg');
              background-size: contain;
              background-position: center;
              background-repeat: no-repeat;
            "
          ></div>
        </div>
        <div class="col-xs-12 col-md-8">
          <div class="row" style="height: 100%; align-items: center">
            <div
              class="col-12 search-box-container"
              style="display: flex; flex-direction: column; justify-content: center; align-items: center"
            >
              <div id="search-box">
                <div style="display: flex; justify-content: flex-end; align-items: center">
                  <div class="input-group">
                    <input
                      type="text"
                      class="form-control search-input"
                      aria-label="Dollar amount (with dot and two decimal places)"
                      placeholder="Search"
                    />
                  </div>
                  <div style="position: relative; right: 30px; width: 0px">
                    <i class="fas fa-search"></i>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="col-12 links-container"
              style="display: none; flex-direction: column; justify-content: center; align-items: center"
            >
              <div style="width: 100%">
                <ul>
                  <li><a href="#" class="head-nav-link">Mockups</a></li>
                  <li><a href="#" class="head-nav-link">Fonts</a></li>
                  <li><a href="#" class="head-nav-link">Templates</a></li>
                  <li><a href="#" class="head-nav-link">Graphics</a></li>
                  <li><a href="#" class="head-nav-link">Colors</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="masonary-container">
      <div class="grid">
        <div class="grid-item grid-item--height2">
          <h3>Selective Free Design Resources to Download</h3>
          <label>
            Selection of fine and free design resources made by the world's best designers. Unblast selects the best of
            the best, therefore putting at your hands quality resources such as mockups, fonts, templates, graphics and
            save you tons of searching hours.
          </label>
        </div>

<?php
  if ( have_posts() ) {

    // Load posts loop.
    while ( have_posts() ) {
      the_post();

      get_template_part( 
        'template-parts/content/content', 
        get_theme_mod( 'display_excerpt_or_full_post', 'excerpt' ) 
      );
    }

    // Previous/next page navigation.
    twenty_twenty_one_the_posts_navigation();

  } else {

    // If no content, include the "No posts found" template.
    get_template_part( 'template-parts/content/content-none' );

  }
?>

      </div>
    </div>

    <div style="background-color: white">
      <div
        class="py-5"
        style="
          padding-top: 5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 3rem;
        "
      >
        <div class="mx-3" style="text-align: center; letter-spacing: 4px">
          47,124,359 DOWNLOADS & COUNTING - 6061 GRAPHICS ♡ 臺四即文善公作
        </div>
        <div style="display: flex; flex-direction: column; gap: 1rem">
          <div>Never miss another freebie, subscribe below :)</div>
          <div>
            <input
              type="text"
              class="form-control email-input"
              placeholder="Your email address"
              aria-label="Username"
              aria-describedby="basic-addon1"
            />
          </div>
        </div>
        <div class="mx-5" style="display: flex; flex-direction: column; align-items: center; gap: 1rem">
          <div class="row footer-row" style="width: 100%">
            <!-- <div class="col-xs-12" style="display: flex; justify-content: center; gap: 1rem"> -->
            <div class="row">
              <div class="col-6 col-md-2"><a href="#">About</a></div>
              <div class="col-6 col-md-2"><a href="#">Submit</a></div>
              <div class="col-6 col-md-2"><a href="#">License</a></div>
              <div class="col-6 col-md-2"><a href="#">進變果沒致</a></div>
              <div class="col-6 col-md-2"><a href="#">Privacy Policy</a></div>
              <div class="col-6 col-md-2"><a href="#">Contact</a></div>
            </div>
            <!-- </div> -->
          </div>
          <div class="row footer-row justify-content-center">
            <div class="col-3 col-md-2 my-3"><a href="#">Photoshop Graphics </a></div>
            <div class="col-3 col-md-2 my-3"><a href="#">Photoshop Mockups</a></div>
            <div class="col-3 col-md-2 my-3"><a href="#">Vector Graphics</a></div>
            <div class="col-3 col-md-2 my-3"><a href="#">Sketch Resources</a></div>
            <div class="col-3 col-md-2 my-3"><a href="#">臺四即文善公</a></div>
            <div class="col-3 col-md-2 my-3"><a href="#">Design Articles</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="copyright-line">
      <div>© 2023 Unblast. All rights reserved.</div>
      <div>by louislabs.</div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
      crossorigin="anonymous"
    ></script>

    <!-- fontawesome -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js"
      integrity="sha512-2bMhOkE/ACz21dJT8zBOMgMecNxx0d37NND803ExktKiKdSzdwn+L7i9fdccw/3V06gM/DBWKbYmQvKMdAA9Nw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <script src="scripts.js"></script>

    <script>
      // external js: isotope.pkgd.js, masonry-horizontal.js

      $(".grid").isotope({
        layoutMode: "masonryHorizontal",
        itemSelector: ".grid-item",
        masonryHorizontal: {
          rowHeight: 200 + 1,
          gutter: 2,
        },
      });
    </script>
  </body>
</html>
