<!doctype html>
<html lang="{{ site.lang | default: "en-US" }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    {% seo %}
    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
    <script src="https://code.jquery.com/jquery-3.3.0.min.js" integrity="sha256-RTQy8VOmNlT6b2PIRur37p6JEBZUE7o8wPgMvu18MC4=" crossorigin="anonymous"></script>
    <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" integrity="sha256-3Jy/GbSLrg0o9y5Z5n1uw0qxZECH7C6OQpVBgNFYa0g=" crossorigin="anonymous"></script>
    <![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    {% include head-custom.html %}

    <style>
      .wrapper {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
      }
      .main-content {
        flex: 1;
      }
      .sidebar {
        flex: 1;
        padding: 200px;
        border-top: 1px solid #e0e0e0;
        background-color: #f8f9fa;
        min-width: 300px; /* Ensure a minimum width for the sidebar */
        margin-top: 80px; /* Push the sidebar further down */
      }
      .sidebar .twitter-timeline {
        display: block;
        margin-bottom: 20px; /* Space between tweets */
      }
      @media (min-width: 768px) {
        .wrapper {
          flex-direction: row; /* Stack elements horizontally on larger screens */
        }
        .main-content {
          flex: 2;
          margin-right: 2%;
          margin-left: 0%;
        }
        .sidebar {
          flex: 1;
          padding-left: 2%;
          border-left: 1px solid #e0e0e0;
          border-top: none; /* Remove top border for horizontal layout */
          margin-top: 30px; /* Reset margin for horizontal layout */
        }
      }
    </style>
  </head>
  <body>
    <header>
      <h1>{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
      <p>{{ page.description | default: site.description | default: site.github.project_tagline }}</p>
    </header>

    <div id="banner">
      <span id="logo"></span>

      <a href="{{ site.github.repository_url }}" class="button fork"><strong>View On GitHub</strong></a>
      {% if site.show_downloads %}
        <div class="downloads">
          <span>Downloads:</span>
          <ul>
            <li><a href="{{ site.github.zip_url }}" class="button">ZIP</a></li>
            <li><a href="{{ site.github.tar_url }}" class="button">TAR</a></li>
          </ul>
        </div>
      {% endif %}
    </div><!-- end banner -->

    <div class="wrapper">
      <div class="main-content">
        <section>
          {{ content }}
        </section>
      </div>

      <!-- Sidebar -->
      <aside class="sidebar">
        <h2>📢 Follow Us on Twitter</h2>
        <!-- Embed Twitter Feed 1 -->
        <a class="twitter-timeline" data-width="300" data-height="600" data-theme="dark" href="https://twitter.com/ARG_tech?ref_src=twsrc%5Etfw">Tweets by ARG_tech</a>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


      </aside>
    </div><!-- end wrapper -->

    <footer>
      {% if site.github.is_project_page %}
        <p>Project maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
      {% endif %}
      <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://twitter.com/mattgraham">mattgraham</a></small></p>
    </footer>
  </body>
</html>
