feat: add initial documentation for SQLSpec (#100)

Introduce foundational documentation including getting started guides, contributing instructions, and an overview of SQLSpec's features and usage. This enhances the project's accessibility for new users and contributors.

Author: cofin

docs/Makefile

@@ -4,14 +4,14 @@
   --brand-font-size-lg: 5rem;
   --brand-font-size-md: 4rem;
   --brand-font-size-sm: 2.5rem;
-  --brand-font-size-xs: 1.8rem;
-  --brand-font-size-xxs: 1.6rem;
+  --brand-font-size-xs: 2rem;       /* Increased from 1.8rem */
+  --brand-font-size-xxs: 1.9rem;    /* Increased from 1.6rem */
 
   --brand-letter-spacing-xl: 0.25em;
   --brand-letter-spacing-lg: 0.2em;
   --brand-letter-spacing-md: 0.1em;
   --brand-letter-spacing-sm: 0.05em;
-  --brand-letter-spacing-xs: 0.03em;
+  --brand-letter-spacing-xs: 0.04em;  /* Increased from 0.03em */
 }
 
 html.light {
@@ -56,12 +56,8 @@ html[class] .title-with-logo .brand-text {
   text-align: center;
   line-height: 1.4;
   max-width: 100%;
-  word-break: break-word;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  hyphens: auto;
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
+  white-space: nowrap;
+  overflow: visible;
   transition: color var(--sl-transition), text-shadow var(--sl-transition);
 }
 
@@ -86,13 +82,29 @@ html.dark .title-with-logo .brand-text {
   flex: 0 0 auto;
 }
 
-/* Large screens */
-@media (min-width: 1200px) {
+/* Extra large screens */
+@media (min-width: 1400px) {
   html[class] .title-with-logo .brand-text {
     font-size: var(--brand-font-size-xl);
   }
 }
 
+/* Large screens */
+@media (min-width: 1200px) and (max-width: 1399px) {
+  html[class] .title-with-logo .brand-text {
+    font-size: var(--brand-font-size-lg);
+    letter-spacing: var(--brand-letter-spacing-lg);
+  }
+}
+
+/* Medium screens - prevent wrapping with sidebar */
+@media (min-width: 992px) and (max-width: 1199px) {
+  html[class] .title-with-logo .brand-text {
+    font-size: var(--brand-font-size-md);
+    letter-spacing: var(--brand-letter-spacing-md);
+  }
+}
+
 /* Medium-small screens */
 @media (max-width: 991px) {
   html[class] .title-with-logo .brand-text {
@@ -133,6 +145,39 @@ html.dark .title-with-logo .brand-text {
   }
 }
 
+/* Hide logo text in header to reduce redundancy */
+.sy-head-brand strong {
+  display: none;
+}
+
+/* Ensure brand text is semantically correct h1 */
+html[class] .title-with-logo h1.brand-text {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+/* Adjust spacing after brand text for better flow */
+.title-with-logo + p {
+  margin-top: 2rem;
+}
+
+/* Subtle fade-in animation for brand text */
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.title-with-logo .brand-text {
+  animation: fadeInScale 0.6s ease-out;
+}
+
 /* Preserve existing layout styles */
 #badges img {
   margin-top: 0;