adam/weddingplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tailwind + mobile friendly

Browse Source
This commit is contained in:
Adam Mohammed
2024-11-09 11:24:53 -05:00
parent 6f1785b814
commit 83a80dcae8
12 changed files with 137 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/views/layouts/application.html.erb
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title><%= content_for(:title) || "Weddingplan" %></title>
<title><%= content_for(:title) || "Jillian and Adam's Wedding" %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<%= csrf_meta_tags %>
@@ -13,26 +13,40 @@
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png">
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
</head>
<body>
<div id="container">
<div id="navbar">
<div id="logo">
A & J Wedding
<nav class="flex items-center justify-between flex-wrap bg-[#8fbc8f]">
<div class="text-4xl text-amber-100 fleur-de-leah-regular">
Jillian and Adam's Wedding
</div>
<div id="burger-menu" class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-amber-100 border-amber-100 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:w-auto lg:justify-end">
<div id="nav-links" class="text-md max-sm:hidden flex flex-col lg:flex-row lg:mr-4">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white mr-4">Ceremony & Reception</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white mr-4">Accommodations</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white mr-4">Dress</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white mr-4">Registry</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white">RSVP</a>
</div>
<ul>
<li>Order of Events</li>
<li>Travel</li>
<li>Accommodation</li>
<li>Dress</li>
<li>Gifts</li>
</ul>
</div>
<div id="main-content">
<%= yield %>
</div>
</nav>
<div id="main-content">
<%= yield %>
</div>
<script>
var burgerMenu = document.getElementById('burger-menu');
var navLinks = document.getElementById('nav-links');
burgerMenu.addEventListener('click', function() {
navLinks.classList.toggle("max-sm:hidden");
});
</script>
</body>
</html>