landing page config

thecdil · Oct 25, 2023 · 25aab3d · 25aab3d
1 parent 3874aec
commit 25aab3d
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/_includes/index/alluvial.html b/_includes/index/alluvial.html
@@ -3,8 +3,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <body>
 
+    <p><b>A sociocultural and sociopolitical research project</b> tracking the blight and subsequent loss of the American Chestnut on Appalachian families and communities.
+        <blockquote
+  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">Explore the diagram below to connect oral histories to the topics they explore. Line thickness relates to the number of emotion tags of each narrator.</p></blockquote>
+
 {% include index/alluvial.svg %}
 
+<div class="callout">
+    <div class="callout-header">Note:</div>
+    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
+    <div class="callout-container">
+      <p>This collection is a work in development. In the future, additional features may be incorporated and all narrators will have functioning Oral History as Data pages as <a href="/items/chestnut051.html">Sara</a> and <a href="/items/chestnut050.html">Savannah</a> do currently.</p></p>
+    </div>
+  </div>
 
 </body>
 </html>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -2,6 +2,52 @@
 # generic page layout
 layout: default
 ---
+
+<style>
+
+/* Callout box - fixed position at the bottom of the page */
+.callout {
+
+  position: static;
+  bottom: 30px;
+  margin-right: 30px;
+  margin-left: 30px;
+  margin-bottom: 180px;
+  max-width: 1200px;
+  max-height: 45px;
+}
+
+/* Callout header */
+.callout-header {
+  padding: 15px 15px;
+  background: #008080;
+  font-size: 30px;
+  color: white;
+}
+
+/* Callout container/body */
+.callout-container {
+  padding: 15px;
+  background-color: #cce6e6;
+  color: black
+}
+
+/* Close button */
+.closebtn {
+  position: absolute;
+  top: 5px;
+  right: 15px;
+  color: white;
+  font-size: 30px;
+  cursor: pointer;
+}
+
+/* Change color on mouse-over */
+.closebtn:hover {
+  color: lightgrey;
+}
+
+</style>
 <div class="container my-4">
   {{ content }}
 </div>