add navigation and visitor form

markgoho · Jan 15, 2024 · b98d45e · b98d45e
1 parent 0ccad94
commit b98d45e
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 9 deletions.
diff --git a/hugo/assets/styles.scss b/hugo/assets/styles.scss
@@ -106,11 +106,42 @@ p + p {
   align-items: center;
 
   .content-container {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr min-content;
+    grid-template-areas:
+      'logo title'
+      'logo nav';
     align-items: center;
     gap: var(--size-fluid-3);
   }
 
+  .site-nav {
+    grid-area: nav;
+  }
+
+  .nav-list {
+    display: flex;
+    padding: 0;
+    margin: 0;
+    gap: var(--size-fluid-3);
+    list-style: none;
+  }
+
+  .nav-list-item {
+    padding: 0;
+  }
+
+  .nav-list-item a {
+    padding: 0;
+    margin: 0;
+    text-decoration: none;
+  }
+
+  .home-link {
+    grid-area: logo;
+  }
+
   .wrapper {
     grid-column: 2;
     container: wrapper / inline-size;
@@ -119,7 +150,9 @@ p + p {
   .gloria-deo-logo {
     max-inline-size: 10rem;
   }
+
   .title-container {
+    grid-area: title;
     display: flex;
     flex-direction: column;
   }
@@ -145,10 +178,15 @@ p + p {
 }
 
 @container wrapper (width <= 50ch) {
-  .content-container {
+  .header .content-container {
+    display: flex;
     flex-direction: column;
     text-align: center;
   }
+
+  .header .nav-list {
+    flex-direction: column;
+  }
 }
 
 .main {

diff --git a/hugo/content/visitor-form.md b/hugo/content/visitor-form.md
@@ -0,0 +1,5 @@
+---
+title: Visitor Interest Form
+description: Information for families who are interested in visiting Gloria Deo.
+type: visitor-form
+---
diff --git a/hugo/layouts/partials/footer.html b/hugo/layouts/partials/footer.html
@@ -1,5 +1,7 @@
 <div class="footer-container">
-  <div>Gloria Deo Classical Cooperative</div>
-  <div>Copyright 2024</div>
-  <a href="//moodle.gloriadeocooperative.org">Moodle Login</a>
+  <div class="left-column">
+    <div>Gloria Deo Classical Cooperative</div>
+    <div>Copyright 2024</div>
+    <a href="//moodle.gloriadeocooperative.org">Moodle Login</a>
+  </div>
 </div>
diff --git a/hugo/layouts/partials/header.html b/hugo/layouts/partials/header.html
@@ -1,6 +1,6 @@
 <div class="wrapper">
   <div class="content-container">
-    <a href="/">
+    <a class="home-link" href="/">
       <svg
         class="gloria-deo-logo"
         width="886"
@@ -27,5 +27,12 @@
       <div class="title">Gloria Deo</div>
       <div class="subtitle">Classical Cooperative</div>
     </div>
+    <nav class="site-nav">
+      <ul class="nav-list">
+        <li class="nav-list-item">
+          <a href="/visitor-information">Visitor Information</a>
+        </li>
+      </ul>
+    </nav>
   </div>
 </div>
diff --git a/hugo/layouts/visitor-form/single.html b/hugo/layouts/visitor-form/single.html
@@ -0,0 +1,14 @@
+{{ define "main" }}
+  <div class="content">
+    <h1>Visitor Form</h1>
+    <iframe
+      src="https://docs.google.com/forms/d/e/1FAIpQLSeO0DHcSPq-r0Q03l4J0rqxPhsMrvOKkLeclnXrAF5WWDo2Cw/viewform?embedded=true"
+      width="100%"
+      height="2350"
+      frameborder="0"
+      marginheight="0"
+      marginwidth="0"
+      >Loading...</iframe
+    >
+  </div>
+{{ end }}
diff --git a/hugo/layouts/visitor-information/single.html b/hugo/layouts/visitor-information/single.html
@@ -73,9 +73,9 @@ <h2>Understand Gloria Deo</h2>
     </ul>
     <h2>Let Us Know You're Interested</h2>
     <p>
-      Complete this form and expect a follow-up call from a member of our group.
-      We ask that you bring all your children that would participate in the
-      co-op as well.
+      Complete our <a href="/visitor-form">visitor interest form</a> and expect
+      a follow-up call from a member of our group. We ask that you bring all
+      your children that would participate in the co-op as well.
     </p>
     <p>
       Appointments are required for co-op visitation. Teachers will prepare for