Homepage finished for now

assets/css/custom.css

@@ -0,0 +1,90 @@
+.max-w-prose {
+    max-width: 85ch;
+  }
+
+/* From https://css.glass */
+.glass {
+  background: rgba(18, 47, 101, 0.25);
+  border-radius: 16px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid rgba(18, 47, 101, 0.35);
+  padding: 2rem;
+  margin-bottom: 2rem;
+  position: relative;
+  filter: saturate(0.9);
+  z-index: 2;
+}
+
+.background-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: -1;
+}
+
+.background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+  filter: blur(4px) saturate(0.65);
+}
+
+/* Header Button Styling */
+header nav ul li a, 
+header nav ul li button {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background-color: rgba(25, 25, 35, 0.25);
+  border-radius: 8px;
+  border: 1px solid rgba(25, 25, 35, 0.35);
+  transition: all 0.3s ease;
+}
+
+header nav ul li a:hover, 
+header nav ul li button:hover {
+  background-color: rgba(25, 25, 35, 0.4);
+  transform: scale(1.05);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+/* Search button specific styling */
+header button[id^="search-button"] {
+  padding: 0.5rem 1rem;
+  background-color: rgba(25, 25, 35, 0.25);
+  border-radius: 8px;
+  border: 1px solid rgba(25, 25, 35, 0.35);
+  transition: all 0.3s ease;
+}
+
+header button[id^="search-button"]:hover {
+  background-color: rgba(25, 25, 35, 0.4);
+  transform: scale(1.05);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+@keyframes gradientShift {
+  0% {
+    filter: saturate(0.9) hue-rotate(-15deg);
+  }
+  50% {
+    filter: saturate(0.9) hue-rotate(15deg);
+  }
+  100% {
+    filter: saturate(0.9) hue-rotate(-15deg);
+  }
+}
+
+article.glass {
+  animation: gradientShift 30s linear infinite;
+}

content/_index.md

@@ -1,9 +1,9 @@
 ---
-title: "Welcome!"
 description: "KarstTech LLC is a company which provides Technical and Scientific Consulting and Data Science services."
 ---
 
-{{< figure src="img/karsttech_logo_vert.png" class="m-auto mt-6 max-w-prose" >}}
+{{< figure src="img/karsttech_logo_vert.png" >}}
+
 
 {{< lead >}}
 KarstTech LLC provides Technical and Scientific Consulting services with a wide range of expertise.

layouts/partials/home/page.html

@@ -0,0 +1,14 @@
+<div class="background-container">
+  <img src="/neuron-purple.webp" alt="Background" class="background-image">
+</div>
+<article class="prose max-w-full dark:prose-invert glass">
+  {{ with .Title }}
+    <header>
+      <h1>{{ . | emojify }}</h1>
+    </header>
+  {{ end }}
+  <section>{{ .Content | emojify }}</section>
+</article>
+<section>
+  {{ partial "recent-articles.html" . }}
+</section> 

themes/congo

@@ -1 +1 @@
-Subproject commit 42306dbe6233095a8a04bf7d28bcbef01fa390ad
+Subproject commit 343ba2a4ae2b7cfec5a0873320e075c894bff304