refactor: Format site files for 11ty

- Convert HTML pages into NJK templates - Add front matter to NJK templates - Modularize monolithic stylesheet
2025-08-18 23:28:46 -05:00
parent c9c5b89736
commit de71b2d663
89 changed files with 4471 additions and 989 deletions
--- a/_site/styles/gallery.css
+++ b/_site/styles/gallery.css
@@ -0,0 +1,194 @@
+/* |--↓-↓-↓  Start gallery.html  ↓-↓-↓--| */
+#main-gallery {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#gallery-top {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 95vw;
+  gap: 20px
+}
+
+#product-carousel-feature h2 {
+  font-size: 1.875rem;
+  text-align: center;
+  text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */
+  -0.5px -0.5px 1px #014038, /* Top-left base shadow */
+  -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */
+  0.5px -0.5px 1px #014038, /* Top-right base shadow */
+  0.5px 0.5px .5px #bdd4da, /* Bottom-right mid shadow */
+  -0.5px -0.5px .5px #bdd4da, /* Top-left mid shadow */
+  -0.5px 0.5px .5px #bdd4da, /* Bottom-left mid shadow */
+  0.5px -0.5px .5px #bdd4da, /* Top-right mid shadow */
+  0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */
+  -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */
+  -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */
+  0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */
+  color: #f7f7f7;
+  background-color: #96baa0;
+  border: solid #f7f7f7;
+  border-radius: 10px;
+  padding-left: 20px;
+  transform: translateX(30px);
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+#product-category-card {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: center;
+  width: 65vw;
+}
+
+#product-carousel {
+  display: flex; /* Flexbox layout for horizontal row */
+  gap: 20px; /* Space between product cards */
+  overflow-x: auto; /* Enable horizontal scrolling */
+  scroll-behavior: smooth; /* Smooth scrolling for buttons */
+  padding: 10px; /* Optional padding inside the carousel */
+  white-space: nowrap; /* Prevent wrapping to a new row */
+  transform: translateX(4vw);
+}
+
+.product-card {
+  display: inline-block; /* Ensure cards stay in a row */
+  min-width: 150px; /* Set the card size */
+  max-width: 200px;
+  max-height: auto;
+  flex: 0 0 auto; /* Prevent resizing of cards */
+  border: 1px solid #ddd; /* Optional border */
+  border-radius: 8px;
+  padding: 10px;
+  margin-left: 20px;
+  align-items: center;
+  text-align: center;
+  white-space: wrap;
+  background-color: #f7f7f7; /* Optional background */
+}
+
+.product-card img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 8px;
+  align-items: center;
+}
+
+#scroll-left, #scroll-right {
+  cursor: pointer; /* Show pointer to indicate clickable buttons */
+  background-color: #014038; /* Dark green background */
+  color: white;
+  border: none;
+  padding: 10px;
+  border-radius: 50%;
+  font-size: 1.5rem;
+  transform: translateX(4.5vw);
+}
+
+@media (max-width: 768px) {
+  .product-card {
+    min-width: 150px;
+    max-width: 200px;
+  }
+
+  #product-carousel {
+    gap: 5px;
+  }
+}
+
+
+#main-gallery #right-aside {
+  width: 25vw;
+}
+
+#main-gallery #right-aside h2 {
+  font-size: 1.675rem;
+  background-color: #bdd4da;
+  color: #014038;
+  border: solid #014038;
+  border-radius: 5px;
+  padding: 0 5px;
+  white-space: nowrap;
+  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+}
+
+#main-gallery .categories ul {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  list-style-type: none;
+}
+
+#main-gallery .categories ul li {
+  border: solid #014038;
+  border-radius: 5px;
+  background-color: #96baa0;
+  margin-top: 20px;
+  margin-right: 35px;
+  min-width: 100%;
+  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+}
+
+#main-gallery .categories a {
+  color: #014038;
+  font-size: 1.3rem;
+}
+
+button#cart-details {
+  background-color: #f7f7f7;
+  border: solid #014038;
+  border-radius: 15px;
+  color: #014038;
+  font-weight: bold;
+  font-size: 1.4em;
+  text-align: center; /* Align text horizontally */
+  height: 30px; /* Adjust height to fit text comfortably */
+  padding: 0 15px; /* Horizontal padding for spacing */
+  margin-top: 10px;
+  margin-bottom: 10px;
+  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3);
+  transform: translateX(-15vw) translateY(-5vh);
+  transition: background-color 0.3s ease, color 0.3s ease;
+  display: flex; /* Flexbox ensures content alignment */
+  align-items: center; /* Center text vertically */
+  justify-content: center; /* Center text horizontally */
+}
+
+button#cart-details:hover {
+  background-color: #014033;
+  color: #f7f7f7;
+  border: solid #f7f7f7;
+  border-radius: 15px;
+}
+
+.product-card {
+  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.add-to-cart-btn {
+  cursor: pointer;
+  background-color: #f7f7f7;
+  border: solid #014038;
+  color: #014038;
+  font-weight: bold;
+  border-radius: 5px;
+  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.add-to-cart-btn:hover {
+  background-color: #014038;
+  border: solid #f7f7f7;
+  color: #f7f7f7;
+  border-radius: 5px;
+  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+
+}
+/* |--↑-↑-↑   End gallery.html   ↑-↑-↑--| */