added docs link, added sunset-like radial gradient to header bg, removed some header text, and tweaks to styling

theodoremoreland · theodoremoreland · commit 1498b00df573 · 2026-03-21T01:08:38.000-05:00
diff --git a/application/static/css/style.css b/application/static/css/style.css
@@ -40,14 +40,14 @@ body {
 h1 {
     margin: 0;
     padding: 0;
-    font-size: 1.2rem;
+    font-size: 1.6rem;
     font-family: custom-bold;
     color: inherit;
 }
 
 @media screen and (min-width: 760px) {
     h1 {
-        font-size: 1.85rem;
+        font-size: 2.5rem;
     }
 }
 
@@ -70,7 +70,6 @@ ul {
     padding: 0;
     overflow-x: hidden;
     border-bottom: 4px solid #0f6c79;
-    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
 }
 
 @media screen and (min-width: 760px) {
@@ -189,28 +188,35 @@ p {
     }
 }
 
-#analysis-preview {
+#preview-container {
+    z-index: 3;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+    height: 8rem;
+    margin: 0;
+    padding: 1rem;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+#analysis-preview, #docs-preview {
     --border-radius: 4px;
 
-    z-index: 99;
-    position: absolute;
-    top: 1%;
-    right: 1%;
-    height: 9%;
-    min-height: 70px;
+    position: relative;
+    height: 100%;
     aspect-ratio: 16/9;
     border-radius: var(--border-radius);
     box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
         rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
         rgba(0, 0, 0, 0.07) 0px 16px 16px;
 
-    @media screen and (min-width: 760px) {
-        & {
-            height: 10%;
-            min-height: 80px;
-        }
-    }
-
     & a {
         z-index: 3;
     }
@@ -219,7 +225,7 @@ p {
         opacity: 0;
     }
 
-    #text-container {
+    .text-container {
         z-index: 3;
         position: absolute;
         top: 0;
@@ -249,7 +255,7 @@ p {
         opacity: 0.4;
     }
 
-    #preview {
+    .preview {
         height: 100%;
         width: 100%;
         object-fit: cover;
@@ -266,11 +272,14 @@ p {
     min-height: 135px;
     height: 75%;
     width: 100%;
+    padding: 2rem;
+    box-sizing: border-box;
     overflow: hidden;
     text-align: center;
     line-height: 1.6;
     color: rgb(255, 253, 250);
-    background-color: rgb(255, 253, 250);
+    background-color: #c5c5c5;
+    background: radial-gradient(circle,#FF6000 24%,#FD9353 24% ,black 200%);
 }
 
 @media screen and (min-width: 760px) {
diff --git a/application/static/images/docs_preview.png b/application/static/images/docs_preview.png
diff --git a/application/templates/index.html b/application/templates/index.html
@@ -5,6 +5,7 @@
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="A REST API for Hawaii climate data with returns in JSON format.">
         <title>
             Hawaii Climate Data API
         </title>
@@ -14,16 +15,29 @@
     </head>
 
     <body>
-        <div id="analysis-preview">
-            <div id="text-container">
-                <a href="/analysis" title="Analysis of Hawaii climate data in the form of a Jupyter Notebook.">
-                    <button type="button">
-                        Analysis
-                    </button>
-                </a>
-                <div class="overlay"></div>
+        <div id="preview-container">
+            <div id="analysis-preview">
+                <div class="text-container">
+                    <a href="/analysis" title="Analysis of Hawaii climate data in the form of a Jupyter Notebook.">
+                        <button type="button">
+                            Analysis
+                        </button>
+                    </a>
+                    <div class="overlay"></div>
+                </div>
+                <img class="preview" src="../static/images/climate_analysis_preview.png" alt="climate analysis preview" />
+            </div>
+            <div id="docs-preview">
+                <div class="text-container">
+                    <a href="https://github.com/theodoremoreland/HawaiiClimateDataAPI" target="_blank" title="Documentation for the Hawaii Climate Data API.">
+                        <button type="button">
+                            Docs
+                        </button>
+                    </a>
+                    <div class="overlay"></div>
+                </div>
+                <img class="preview" src="../static/images/docs_preview.png" alt="API documentation preview" />
             </div>
-            <img id="preview" src="../static/images/climate_analysis_preview.png" alt="climate analysis preview" />
         </div>
         <ul>
             <li>
@@ -56,11 +70,8 @@
         </ul>
         <div class="intro">
             <h1>Hawaii Climate Data API</h1>
-            <p>A REST API with returns in JSON format. Supply date or date range to
-                <i>"/api/v2/aggregate/{start-date}/{end-date}"</i> to aggregate data by date (from 2010-01-01 to
-                2017-08-23).
-                For example: <a id="dynamic-example"
-                    href="/api/v2/aggregate/2016-04-16/2017-04-16">/api/v2/aggregate/2016-04-16/2017-04-16</a>
+            <p>
+                A REST API with returns in JSON format.
             </p>
             <div class="ocean">
                 <div class="wave"></div>
