<!DOCTYPE html> <!-- https://youtu.be/lYVKbAn5Od0?t=1269 -->
<html lang="en">
  <head>


    <meta charset="utf-8">

    <!-- this is what prevents the text & images from shrinking in the mobile versions -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <!-- NOTE: this full-width.ejs element wrapps another element inside of it -->
    <!-- ...so if you link to Alpine.js as shown below, Alpine.js will actually fire twice -->
    <!-- ...this would cause problems; the myArray inside ./scripts/scripts.js for example,  -->
    <!-- ...would get iterated on twice, in layoutsandpartials.ejs and you would 6 pets instead of 3 -->
    <!-- <script src="//unpkg.com/alpinejs" defer></script> -->

    <!-- NOTE: the layout must have this link in order for tailwind to work on the partials, but the layout cannot be styled with tailwind -->
    <link rel="stylesheet" type="text/css" href="..public/tailwind-css/styles.css">
    <title>The Layout</title>
  </head>
  <style>
    .custom-styles:hover {
      background-color: rgb(209, 154, 136);
      color: rgb(87, 50, 37);
      transition: 1s;
    }
    .custom-styles {
      background-color: rgb(201, 201, 201);
      padding: 20px;
      margin: 20px;
      color: rgb(64, 64, 64);
      text-align: center
    };
  </style>
  <body>
    <div class="py-14">
      <!-- <p class="custom-styles italic tracking-wider fixed top-0 inset-x-0">This is the top line of text in the <strong>full-width.ejs</strong> file in the <strong>'/views/layouts'</strong> directory w/non-tailwind styling the hovering effects + tailwind italics & wide tracking</p> -->
        <%- include('../partials/navbar.ejs') %>
        <main><%- body %></main>
      <div class="custom-styles font-serif italic tracking-wider">
        <p>This is the bottom line of text in the <strong class="font-mono">full-width.ejs</strong> file in the <strong class="font-mono">'/views/layouts'</strong> directory w/non-tailwind styling the hovering effects + tailwind italics & wide tracking just to test everything out</p>
        <br><br>
        <p class="text-justify">The purpose of this file located at: <strong class="font-mono">'./views/layouts/full-width.ejs'</strong> is to serve as a primary wrapper for all other <strong class="font-mono">'.ejs'</strong> files that will be put inside of it.&nbsp; There is no need to have more than one layout file for the RAM & UCS websites since the only partials being used in them will be one navbar and one footer for each website.&nbsp; If we wanted different footers or navbars across different parts of a single website, we would need multiple layouts to accomplish this.&nbsp; In practice, the layout file (that contains the very text you are reading right now) would contain no such text and would merely serve as a startpoint to orient the navbar (top) to the different webpages in the website (middle) as well as the footer (bottom).&nbsp;  An alternative strategy would be to put the code for both the navbar & footer right in this layout file (you are currently reading from) but that would start to make for an extremly large layout file, especially as the footer grows to include elements such as contact and careers info.  </p>
    </div>
      <%- include('../partials/footer.ejs') %>
    </div>
  </body>
</html>
