Major homepage rework

docs/assets/overrides/home.html

@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+{% block content %}
+    <link rel="stylesheet" href="assets/stylesheet/home.css" />
+    {{ super() }}
+{% endblock %}

docs/assets/stylesheet/extra.css

@@ -0,0 +1,58 @@
+[data-md-color-scheme="slate"] {
+  --md-primary-fg-color:        #00FF90;
+  --md-primary-fg-color--light: #7FFFC7;
+  --md-primary-fg-color--dark:  #00FF90;
+	--md-accent-fg-color:         #7FFFC7;
+	--md-primary-bg-color:        #000000;
+	--md-accent-bg-color:         #000000;
+
+	--md-default-fg-color--light: #ffffff;
+
+	/* background tuning */
+	--md-default-bg-color: #001111;
+
+	/* code blocks */
+
+	--md-code-fg-color: #ffffff;
+	--md-code-bg-color: #000000;
+}
+
+[data-md-color-scheme="default"] {
+  --md-primary-fg-color:        #FF6A00;
+  --md-primary-fg-color--light: #FFB47F;
+  --md-primary-fg-color--dark:  #FF6A00;
+	--md-accent-fg-color:         #FFB47F;
+
+	--md-default-fg-color--light: #000000;
+
+	/* background tuning */
+	--md-default-bg-color: #ffffee;
+}
+
+.md-typeset h1 {
+	margin-bottom: 0;
+	font-weight: bold;
+}
+
+.md-typeset h2 {
+	font-weight: bold;
+	color: var(--md-default-fg-color--light);
+}
+
+
+.md-content {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 120em;
+}
+
+.md-grid {
+	margin-left: 1rem;
+	margin-right: 1rem;
+	max-width: none;
+}
+
+.highlight span.filename {
+	color: var(--md-default-fg-color--light);
+	font-family: var(--md-code-font-family);
+}

docs/assets/stylesheet/home.css

@@ -0,0 +1,106 @@
+.md-content {
+	max-width: none;
+	margin-left: 0;
+	margin-right: 0;
+	margin-top: 0;
+	--distance-to-top-of-page: 4.8rem;
+}
+
+[data-md-color-scheme="slate"] {
+	--background-img: url("../../assets/images/bg-dark.png");
+}
+
+[data-md-color-scheme="default"] {
+	--background-img: url("../../assets/images/bg-light.png");
+}
+
+
+@media screen and (max-width: 76.25rem) {
+	.md-content {
+		--distance-to-top-of-page: 2.4rem;
+	}
+}
+
+#catworkdoc-home {
+	background-image: var(--background-img);
+	background-position: center center;
+	background-size: cover;
+
+	width: 100%;
+	height: calc(100vh - var(--distance-to-top-of-page));
+  overflow-y: auto;
+
+	display: flex;
+	flex-direction: column;
+	align-items: left;
+	justify-content:end;
+}
+
+#catworkdoc-contentgradient {
+	margin: 0;
+	background: linear-gradient(
+		180deg, 
+		rgba(0,0,0,0) 0%, 
+		var(--md-default-bg-color) 100%
+	);
+	height: 100px;
+}
+
+#catworkdoc-lower-bg {
+	background: var(--md-default-bg-color);
+}
+
+#catworkdoc-margin {
+	margin-left: 5rem;
+	margin-right: 5rem;
+}
+
+#catworkdoc-homeInner {
+	display: flex;
+	flex-direction: column;
+	align-items: left;
+	justify-content:end;
+}
+
+#catworkdoc-noMargin {
+	line-height: 1em;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+#catworkdoc-noMarginBig {
+	line-height: 1em;
+	margin-top: 0;
+	margin-bottom: 0;
+	color: var(--md-default-fg-color--light);
+}
+
+#catworkdoc-content {
+	padding-left: 1rem;
+	padding-right: 1rem;
+	margin-left: auto;
+	margin-right: auto;
+	margin-bottom: 0;
+	max-width: 61em;
+}
+
+#catworkdoc-secondary-bg {
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+	background-color: var(--md-footer-bg-color)
+}
+
+.md-main__inner {
+	margin-top: 0;
+	margin-right: 0;
+	margin-left: 0;
+}
+
+.md-content__inner {
+	margin: 0;
+	padding-top: 0;
+}
+
+.md-content__inner::before {
+	height: 0;	
+}

docs/index.md

@@ -1,22 +1,33 @@
 ---
+  template: home.html
+  title: Catwork
   hide:
     - toc
     - navigation
 ---
 
-<div align="center" markdown>
-# Catwork
-
-## The cat framework, written by cats, for cats!
-
-Catwork is a tiny, ergonomic, declarative framework for creating runtime code.
+<div id="catworkdoc-home" markdown>
+<p id="catworkdoc-contentgradient" />
+<div id="catworkdoc-lower-bg" markdown>
+<div id="catworkdoc-margin" markdown>
+<div id="catworkdoc-homeInner" markdown>
+<h1 id="catworkdoc-noMarginBig">Catwork</h1>
+<b id="catworkdoc-noMarginBig">The cat framework, written by cats, for cats!</b>
+<p id="catworkdoc-noMargin">Catwork is a tiny, ergonomic, declarative framework for creating runtime code.</p>
+</div>
 
 [:fontawesome-solid-cat: Download Catwork](https://github.com/metatablecatgames/catwork/releases/download/v0.4.4/catwork.rbxm){ .md-button .md-button--primary}
 [API Reference](reference/index.md){ .md-button}
+
+<div align="center" markdown>
+:octicons-arrow-down-16: Learn what Catwork has to offer! :octicons-arrow-down-16:
 </div>
 
----
+</div>
+</div>
+</div>
 
+<div id="catworkdoc-content" markdown>
 ## Weave dependencies with asynchronous design patterns.
 
 Catwork implements all of its code through Fragments! These allow you to manage
@@ -103,8 +114,15 @@ local LoadingScreenManager = Catwork.Fragment {
 }
 ```
 
----
+</div>
 
-# Lets go on an adventure together
+<div id="catworkdoc-secondary-bg" markdown>
+<div id="catworkdoc-margin" markdown>
+<div id="catworkdoc-content" markdown>
 
-Ready to start with Catwork? Then lets go into the tutorials!
+# Lets go on an adventure together 
+
+<p style="margin-bottom: 0;">Ready to start with Catwork? Then lets go into the tutorials!</p>
+</div>
+</div>
+</div>

docs/reference/index.md

@@ -1,3 +1,8 @@
+---
+  hide:
+    - toc
+---
+
 # API Reference
 
 This is a reference for methods within Catwork. These explain the inner workings

mkdocs.yml

@@ -1,5 +1,6 @@
 site_name: Catwork
 repo_url: https://github.com/metatablecatgames/catwork
+site_url: https://metatablecatgames.github.io/catwork
 repo_name: metatablecatgames/catwork
 
 theme:
@@ -8,18 +9,20 @@ theme:
 
   palette:
     - scheme: default
+      media: "(prefers-color-scheme: light)"
       toggle:
         icon: material/weather-sunny
         name: Switch to dark mode
 
     # Palette toggle for dark mode
     - scheme: slate
+      media: "(prefers-color-scheme: dark)"
       toggle:
         icon: material/weather-night
         name: Switch to light mode
   font:
-    text: PT Sans
-    code: PT Mono
+    text: Montserrat
+    code: JetBrains Mono 
 
   features:
     - navigation.tabs
@@ -34,7 +37,7 @@ theme:
     - content.code.select
     - content.code.annotate
 
-
+  custom_dir: docs/assets/overrides
   name: material
 
 extra:
@@ -43,7 +46,7 @@ extra:
       link: https://tech.lgbt/@metatablecat
 
 extra_css:
-  - stylesheet/extra.css
+  - assets/stylesheet/extra.css
 
 nav:
   - Home: index.md
@@ -56,6 +59,7 @@ nav:
       - Template: reference/catwork/template.md
     - Errors: reference/errors.md
 
+copyright: metatablecatgames 2024 - MIT License
 
 markdown_extensions:
   - admonition
@@ -79,4 +83,4 @@ markdown_extensions:
       guess_lang: false
   - pymdownx.emoji:
       emoji_index: !!python/name:material.extensions.emoji.twemoji
-      emoji_generator: !!python/name:material.extensions.emoji.to_svg
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg