feature: Set up basic layout and styles

This commit is contained in:
Keith Solomon
2025-05-24 12:22:24 -05:00
parent bd7e54d7c7
commit 89c725a282
7 changed files with 475 additions and 58 deletions

16
views/footer.ejs Normal file
View File

@@ -0,0 +1,16 @@
<footer class="bg-gray-800 text-white p-4 mt-8">
<div class="container mx-auto text-center">
<div class="flex justify-center gap-8 items-center mb-4">
<p>&copy; <%= new Date().getFullYear() %> <%= title %>. All rights reserved.</p>
<p>Powered by <a href="https://example.com" class="text-bodylinks">Your Company</a></p>
</div>
<p>
<a href="/privacy" class="text-blue-400">Privacy Policy</a> |
<a href="/terms" class="text-blue-400">Terms of Service</a>
</p>
</div>
</footer>
</main>
</body>
</html>

32
views/header.ejs Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap">
<title>
<%= title %>
</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<main class="">
<header class="bg-gray-200 w-full">
<div class="container mx-auto flex justify-between items-center text-gray-800 p-4">
<div class="flex items-center">
<!-- <img src="/images/logo.png" alt="Logo" class="h-8 mr-2"> -->
<h1 class=""><%= title %></h1>
</div>
<nav>
<ul class="flex space-x-4">
<li><a href="/" class="text-white hover:text-gray-400">Home</a></li>
<li><a href="/about" class="text-white hover:text-gray-400">About</a></li>
<li><a href="/contact" class="text-white hover:text-gray-400">Contact</a></li>
</ul>
</nav>
</div>
</header>

View File

@@ -1,12 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1 class="text-4xl mb-2"><%= title %></h1>
<hr class="my-4">
<p>Welcome to <%= title %></p>
</body>
</html>
<%- include('header'); -%>
<article class="container mx-auto py-4">
<h2>Welcome to the <%= title %> EJS Template</h2>
<p>This is a simple example of using EJS for templating.</p>
</article>
<%- include('footer'); -%>