[RZB-2500047]: added contact page; fix global css

Author: xkeshav

src/assets/styles/about.css

@@ -1,9 +1,11 @@
 .container__about {
-  display: block;
+  display: grid;
+  justify-content: center;
+  height: 90vh;
   padding: 1rem;
 
   & .moto {
     color: #3a8657;
     font-size: 2rem;
   }
-}
+}

src/assets/styles/contact.css

@@ -0,0 +1,40 @@
+.contact__info {
+  margin-inline-start: 1rem;
+}
+
+.container__contact {
+  box-sizing: border-box;
+}
+
+.contact__message {
+  @apply text-sm md:p-[1rem];
+  margin-top: 4px;
+}
+
+.custom__input {
+  @apply md:tracking-widest;
+}
+
+.container__form {
+  @apply flex flex-grow items-center justify-start max-sm:justify-center md:mr-36;
+}
+
+.contact__form {
+  @apply w-full p-4;
+}
+
+.section__grid {
+  @apply grid items-center gap-1;
+}
+
+.center__text {
+  @apply top-[1rem] mt-5 text-center;
+}
+
+.contact__button--group {
+  @apply mt-8 flex justify-end;
+}
+
+.contact__button {
+  @apply w-36 max-sm:w-full;
+}

src/assets/styles/globals.css

@@ -63,6 +63,7 @@
     font-family: "Roboto", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif,
       system-ui;
     font-size: 16px;
+    margin: 0;
     background-color: var(--background);
     color: var(--text);
   }
@@ -108,8 +109,8 @@
 
   main {
     display: grid;
-    gap: 4px;
-    grid-template-columns: 20rem 1fr;
+    gap: 0.30rem;
+    grid-template-columns: minmax(0, auto) 1fr;
     grid-auto-flow: column;
     grid-template-areas: "sidebar content";
     padding: 2rem;
@@ -160,12 +161,13 @@
     border-width: 0;
   }
 
-  .layout {
-    border-right: 3px solid darkslategray;
-  }
 
   .link__active,
   .text__active {
     @apply text-customLight-active dark:text-customDark-active;
   }
+
+  .content {
+    min-height: 100vh;
+  }
 }

src/assets/styles/header.css

@@ -1,5 +1,3 @@
-@import url(./globals.css);
-
 .header {
   position: fixed;
   top: 0;
@@ -73,4 +71,4 @@
   width: 2rem;
   border-radius: 50%;
   cursor: pointer;
-}
+}

src/assets/styles/sample.css

@@ -0,0 +1,64 @@
+.container__sample {
+  box-sizing: border-box;
+  padding: 1rem;
+  margin: auto;
+  font-size: 1.35rem;
+  line-height: 1.5;
+
+  & :where(h2, h3) {
+    padding-block: 1rem;
+  }
+
+  >p {
+    margin-block: 1.5rem;
+  }
+
+  h2 {
+    font-size: 2rem;
+  }
+
+  h3 {
+    font-size: 1.75rem;
+  }
+
+  ul {
+    list-style: auto;
+    padding: 1rem;
+
+    li>p {
+      margin: 0.25rem;
+    }
+  }
+
+  a {
+    color: rgb(103, 103, 201);
+  }
+
+  section {
+    ul {
+      list-style-type: none;
+
+      & li {
+        margin-inline: 1rem;
+
+        &:nth-child(2) {
+          &::before {
+            content: "\272D";
+          }
+        }
+
+        &::before {
+          content: "\26BE";
+          /* baseball U+26BE */
+        }
+
+        &:nth-child(3)::before {
+          content: "\27F0";
+          /* Second item: Star */
+          font-size: large;
+          color: rgb(149, 124, 33);
+        }
+      }
+    }
+  }
+}

src/assets/styles/setting.css

@@ -27,9 +27,9 @@
         outline: 1px solid slateblue;
       }
 
-      &:hover {
+      /*&:hover {
         transform: scale(1.05) rotate(45deg);
-      }
+      }*/
     }
 
     .setting__panel {
@@ -41,7 +41,6 @@
       width: 20rem;
       height: 20rem;
       background-color: hwb(20 68% 16%);
-      border: 1px solid red;
       border-radius: 4px;
       padding: 0.74rem;
       transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -73,13 +72,13 @@
         justify-content: center;
         gap: 10px;
         font-weight: 600;
-        font-size: 1rem;
+        font-size: 1.5rem;
         letter-spacing: 0.01em;
         touch-action: pinch-zoom;
 
         &:hover:not(.close) {
           background-color: color(xyz 0.02 0.01 0.02);
-          /*transform: translateY(-3px);*/
+          transform: translateY(-3px);
         }
 
         &.close {
@@ -140,7 +139,7 @@
       }
     }
 
-    &:has([popover]:popover-open) {
+    &:has(:popover-open) {
       .setting__trigger {
         background-color: rgb(106, 202, 119);
         transform: scale(1.05) rotate(45deg);

src/components/DrawKeyboard.astro

@@ -113,8 +113,6 @@ import { IMAGE_DIR, colorBox, fontBox, numberBox } from "@/utils/draw";
   });
 
   document.addEventListener("keydown", handleKeyPress);
-
-  console.log("Welcome to abcdkbd.com - Enhanced Interactive Learning");
 </script>
 
 <style>

src/components/Puzzle.astro

@@ -434,7 +434,7 @@ import Settings from "@/components/Settings.astro";
       // Add event listener for the Confirm Selection button
       //document.getElementById("confirmSelectionBtn").addEventListener("click", handleConfirmSelection);
 
-      // Mouse events for drag selection
+      // Mouse events for drag selectionPsetting
       gridElement.addEventListener("mousedown", handleDragStart);
       gridElement.addEventListener("mousemove", handleDragMove);
       document.addEventListener("mouseup", handleDragEnd);

src/content/article/terms.md

@@ -3,7 +3,7 @@ title: "Terms & Conditions"
 author: "Admin"
 ---
 
-Welcome to COMPANY-NAME! These terms and conditions outline the rules and regulations for the use of COMPANY-NAME's Website, located at [COMPANY-NAME.com](https://www.COMPANY-NAME.com).
+Welcome to RecursiveZero! These terms and conditions outline the rules and regulations for the use of RecursiveZero's Website, located at [RecursiveZero.com](https://www.recursivezero.com).
 
 By accessing this website, we assume you accept these terms and conditions. Do not continue to use [Your Company
 Name] if you do not agree to take all of the terms and conditions stated on this page.
@@ -16,22 +16,22 @@ interchangeable and therefore as referring to same.
 
 ## Cookies
 
-We employ the use of cookies. By accessing COMPANY-NAME, you agreed to use cookies in agreement with the COMPANY-NAME's Privacy Policy.
+We employ the use of cookies. By accessing RecursiveZero, you agreed to use cookies in agreement with the RecursiveZero's Privacy Policy.
 
 Most interactive websites use cookies to let us retrieve the user's details for each visit. Cookies are used by
 our website to enable the functionality of certain areas to make it easier for people visiting our website. Some
 of our affiliate/advertising partners may also use cookies.
 
 ## License
 
-Unless otherwise stated, COMPANY-NAME and/or its licensors own the intellectual property rights for all material on COMPANY-NAME. All intellectual property rights are reserved.
-You may access this from COMPANY-NAME for your own personal use subjected to restrictions set in these terms and conditions.
+Unless otherwise stated, RecursiveZero and/or its licensors own the intellectual property rights for all material on RecursiveZero. All intellectual property rights are reserved.
+You may access this from RecursiveZero for your own personal use subjected to restrictions set in these terms and conditions.
 
 ### You must not
 
-- Republish material from COMPANY-NAME
-- Sell, rent, or sub-license material from COMPANY-NAME
-- Reproduce, duplicate or copy material from COMPANY-NAME
-- Redistribute content from COMPANY-NAME
+- Republish material from RecursiveZero
+- Sell, rent, or sub-license material from RecursiveZero
+- Reproduce, duplicate or copy material from RecursiveZero
+- Redistribute content from RecursiveZero
 
 If you have any questions about our Terms and Conditions, please [contact us](/contact)

src/layouts/Base.astro

@@ -6,6 +6,8 @@ import Header from "@/layouts/common/Header";
 import Menu from "@/layouts/common/Menu";
 import { siteConfig } from "@/site-config";
 
+//import "@/assets/styles/globals.css";
+
 const {
   meta: { title, description = siteConfig.description, ogImage, articleDate }
 } = Astro.props;
@@ -14,21 +16,6 @@ const {
 <html lang={siteConfig.lang}>
   <head>
     <BaseHead title={title} description={description} ogImage={ogImage} date={articleDate} />
-    <style>
-      body {
-        min-height: 100vh;
-        margin: 0;
-      }
-      .main {
-        padding: 2rem;
-        display: grid;
-        grid-template-columns: auto 1fr;
-        gap: 1rem;
-      }
-      .content {
-        min-height: 100vh;
-      }
-    </style>
   </head>
   <body id="body" class="body__container">
     <ThemeProvider />