Merge pull request #272 from dphfox/pr-branding-updates

Branding updates

README.md

@@ -1,17 +1,28 @@
-<img align="left" src="./gh-assets/logo-dark-theme.svg#gh-dark-mode-only" alt="Fusion"><img align="left" src="./gh-assets/logo-light-theme.svg#gh-light-mode-only" alt="Fusion"><a href="https://elttob.uk/Fusion/"><img align="right" src="./gh-assets/link-docs.svg" alt="Docs"></a><a href="https://github.com/Elttob/Fusion/releases"><img align="right" src="./gh-assets/link-download.svg" alt="Download"></a><img src="./gh-assets/clearfloat.svg">
+<img align="left" src="./gh-assets/logo-dark-theme.svg#gh-dark-mode-only" alt="Fusion"><img align="left" src="./gh-assets/logo-light-theme.svg#gh-light-mode-only" alt="Fusion"><a href="https://elttob.uk/Fusion/latest"><img align="right" src="./gh-assets/link-docs.svg" alt="Docs"></a><a href="https://github.com/Elttob/Fusion/releases"><img align="right" src="./gh-assets/link-download.svg" alt="Download"></a><img src="./gh-assets/clearfloat.svg">
 
-Fusion is a modern reactive UI library, built specifically for [Roblox](https://developer.roblox.com/) and [Luau](https://luau-lang.org/).
+**Rediscover the joy of coding.**
 
-Build your UI with a declarative syntax that's easy to read and write.<br>
-Plug in live data with simple, flexible, truly reactive state management.<br>
-Deliver a fast, smooth experience to everyone - on mobile, console, PC or in VR.<br>
+Code is more dynamic, complex and intertwined than ever before. Errors cascade
+out of control, things update in the wrong order, and it's all connected by
+difficult, unreadable spaghetti.
 
-<a href="https://elttob.uk/Fusion/">
-Visit the Fusion documentation to learn more <img valign="middle" src="./gh-assets/icon-link-extern.svg" alt="(external link)" title="(external link)">
-</a>
+No longer. Fusion introduces modern 'reactive' concepts for managing code, so
+you can spend more time getting your logic right, and less time implementing
+buggy boilerplate code connections.
 
------
+Starting from simple roots, concepts neatly combine and build up with very little
+learning curve. At every stage, you can robustly guarantee what your code will
+do, and when you come back in six months, your code is easy to pick back up.
 
-## Contributing
+Piqued your interest? [Get going in minutes with our on-rails tutorial.](https://elttob.uk/Fusion/latest/tutorials)
 
-Please read [our contribution policies](/CONTRIBUTING.md) before opening an issue or pull request.
+## Issues & contributions
+
+Have you read [our contribution guide](/CONTRIBUTING.md)? It's a real page turner!
+
+We highly recommend reading it before opening an issue or pull request.
+
+## License
+
+Fusion is licensed freely under MIT. Go do cool stuff with it, and if you feel
+like it, give us a shoutout!

docs/assets/theme/admonition.css

@@ -1,4 +1,13 @@
 .md-typeset .admonition-title,
 .md-typeset summary {
 	background: none !important;
+}
+
+[dir="ltr"] .md-typeset :is(.admonition, details) {
+	border-radius: 0.25rem;
+	border-width: 0.1rem;
+}
+
+[data-md-color-scheme="fusiondoc-dark"] .md-typeset :is(.admonition, details) {
+	--md-code-bg-color:                var(--fusiondoc-grey-1);
 }

docs/assets/theme/api-reference.css

@@ -49,19 +49,19 @@
 
 .fusiondoc-api-pills > * {
 	padding: 0.25em 0.75em;
-	border-radius: 1em;
+	border-radius: 0.25rem;
 	height: 2em;
 	flex-shrink: 0;
 }
 
 .fusiondoc-api-pills .fusiondoc-api-pill-type {
-	background-color: var(--fusiondoc-accent-a20);
+	background-color: var(--fusiondoc-orange-a20);
 	color: var(--fusiondoc-accent-text);
 }
 
 .fusiondoc-api-pills .fusiondoc-api-pill-since {
-	background-color: var(--fusiondoc-accent-hover-a20);
-	color: var(--fusiondoc-accent-hover-text);
+	background-color: var(--fusiondoc-grey-a20);
+	color: var(--fusiondoc-fg-1);
 }
 
 .fusiondoc-api-breadcrumbs {

docs/assets/theme/code.css

@@ -19,7 +19,7 @@
 
 [data-md-color-scheme="fusiondoc-dark"] {
 	--md-code-fg-color:                var(--fusiondoc-grey-8);
-	--md-code-bg-color:                var(--fusiondoc-grey-0);
+	--md-code-bg-color:                var(--fusiondoc-grey-2);
 
 	--md-code-hl-color:                var(--fusiondoc-accent-a20);
 	--md-code-hl-number-color:         hsl(290, 60%, 70%);
@@ -36,6 +36,15 @@
 	--md-code-hl-variable-color:       var(--fusiondoc-grey-6);
 }
 
+.md-typeset code {
+	border-radius: 0.25rem;
+}
+
+.highlighttable .linenos {
+	border-bottom-left-radius: 0.25rem;
+	border-top-left-radius: 0.25rem;
+  }
+
 .highlighttable .linenodiv {
 	box-shadow: none;
 }
@@ -47,8 +56,8 @@
 .highlight .hll {
 	box-shadow:
 		inset 0.125rem 0 var(--fusiondoc-accent),
-		320px 0 var(--md-code-hl-color);
-
+		320px 0 var(--md-code-hl-color);	
+	background: linear-gradient(to left, var(--fusiondoc-accent-a20) 0%, var(--fusiondoc-accent-a10) 100%);
 }
 
 .highlighttable .linenodiv pre {

docs/assets/theme/fusiondoc.css

@@ -1,19 +1,20 @@
 :root {
-	--fusiondoc-grey-0: hsl(240, 5%, 2.5%);
-	--fusiondoc-grey-1: hsl(240, 5%, 5%);
-	--fusiondoc-grey-2: hsl(240, 5%, 10%);
-	--fusiondoc-grey-3: hsl(240, 5%, 20%);
-	--fusiondoc-grey-4: hsl(240, 5%, 30%);
-	--fusiondoc-grey-5: hsl(240, 5%, 50%);
-	--fusiondoc-grey-6: hsl(240, 5%, 60%);
-	--fusiondoc-grey-7: hsl(240, 5%, 80%);
-	--fusiondoc-grey-8: hsl(240, 5%, 90%);
-	--fusiondoc-grey-9: hsl(240, 5%, 92%);
-	--fusiondoc-grey-10: hsl(240, 5%, 95%);
-
-	--fusiondoc-grey-1-a80: hsl(240, 5%, 5%, 80%);
-	--fusiondoc-grey-2-a80: hsl(240, 5%, 10%, 80%);
-	--fusiondoc-grey-8-a80: hsl(240, 5%, 90%, 80%);
+	--fusiondoc-grey-0: #000000;
+	--fusiondoc-grey-1: #08001B;
+	--fusiondoc-grey-2: #201432;
+	--fusiondoc-grey-3: #36304f;
+	--fusiondoc-grey-4: #544c68;
+	--fusiondoc-grey-5: #716a87;
+	--fusiondoc-grey-6: #9189a7;
+	--fusiondoc-grey-7: #aeacc3;
+	--fusiondoc-grey-8: #d2cede;
+	--fusiondoc-grey-9: #F5F1FF;
+	--fusiondoc-grey-10: #ffffff;
+
+	--fusiondoc-grey-1-a80: #08001Bcc;
+	--fusiondoc-grey-2-a80: #201432cc;
+	--fusiondoc-grey-8-a80: #d2cedecc;
+	--fusiondoc-grey-9-a80: #F5F1FFcc;
 
 	--fusiondoc-orange: hsl(40, 100%, 50%);
 	--fusiondoc-orange-p1: hsl(40, 100%, 60%);
@@ -44,9 +45,10 @@
 }
 
 [data-md-color-scheme="fusiondoc-light"] {
-	--fusiondoc-bg-1: var(--fusiondoc-grey-8);
-	--fusiondoc-bg-1-a80: var(--fusiondoc-grey-8-a80);
-	--fusiondoc-bg-2: var(--fusiondoc-grey-9);
+	--fusiondoc-bg-0: var(--fusiondoc-grey-8);
+	--fusiondoc-bg-1: var(--fusiondoc-grey-9);
+	--fusiondoc-bg-1-a80: var(--fusiondoc-grey-9-a80);
+	--fusiondoc-bg-2: var(--fusiondoc-grey-10);
 	--fusiondoc-bg-3: var(--fusiondoc-grey-10);
 
 	--fusiondoc-fg-1: var(--fusiondoc-grey-2);
@@ -66,18 +68,19 @@
 	--fusiondoc-accent-hover-a20: var(--fusiondoc-grey-a20);
 
 	--fusiondoc-stroke: hsla(240, 5%, 0%, 15%);
-	--fusiondoc-smoke: hsla(240, 5%, 85%, 90%);
+	--fusiondoc-smoke: var(--fusiondoc-grey-9-a80);
 }
 
 [data-md-color-scheme="fusiondoc-dark"] {
-	--fusiondoc-bg-1: var(--fusiondoc-grey-2);
-	--fusiondoc-bg-1-a80: var(--fusiondoc-grey-2-a80);
-	--fusiondoc-bg-2: var(--fusiondoc-grey-3);
-	--fusiondoc-bg-3: var(--fusiondoc-grey-4);
+	--fusiondoc-bg-0: var(--fusiondoc-grey-2);
+	--fusiondoc-bg-1: var(--fusiondoc-grey-1);
+	--fusiondoc-bg-1-a80: var(--fusiondoc-grey-1-a80);
+	--fusiondoc-bg-2: var(--fusiondoc-grey-2);
+	--fusiondoc-bg-3: var(--fusiondoc-grey-3);
 
 	--fusiondoc-fg-1: var(--fusiondoc-grey-9);
-	--fusiondoc-fg-2: var(--fusiondoc-grey-8);
-	--fusiondoc-fg-3: var(--fusiondoc-grey-7);
+	--fusiondoc-fg-2: var(--fusiondoc-grey-9);
+	--fusiondoc-fg-3: var(--fusiondoc-grey-10);
 
 	--fusiondoc-accent: var(--fusiondoc-orange);
 	--fusiondoc-accent-light: var(--fusiondoc-orange-p2);
@@ -92,7 +95,7 @@
 	--fusiondoc-accent-hover-a20: var(--fusiondoc-grey-a20);
 
 	--fusiondoc-stroke: hsla(240, 5%, 100%, 15%);
-	--fusiondoc-smoke: hsla(240, 5%, 0%, 90%);
+	--fusiondoc-smoke: var(--fusiondoc-grey-1-a80);
 }
 
 [data-md-color-scheme="fusiondoc-light"] .fusiondoc-dark-theme-only,

docs/assets/theme/home.css

@@ -38,34 +38,35 @@
 
 #fusiondoc-home-main-inner {
 	max-width: 50rem;
-	background-color: var(--fusiondoc-bg-1-a80);
-	border: 1em solid transparent;
+	translate: calc(min(0px, 25rem - 50vw) * 0.75) 0;
+	background-color: var(--fusiondoc-bg-1);
+	border: 0.5em solid transparent;
+	border-radius: 0.75rem;
 }
 
 #fusiondoc-home-main-inner > h1 {
 	margin-bottom: 1rem;
 }
 
+#fusiondoc-home-main-inner > nav{
+	display: flex;
+	gap: 0.5em;
+}
+
 #fusiondoc-home-main-inner > nav > a {
-	display: inline-flex;
-	min-width: 15em;
-	padding: 0.75em 1em;
+	display: flex;
+	padding: 0.25rem 0.75rem;
 	background-color: var(--fusiondoc-fg-1);
 	color: var(--fusiondoc-bg-1);
 	font-weight: 600;
-	font-size: 0.8em;
+	font-size: 0.75rem;
 	transition: color 0s;
+	border-radius: 0.25rem;
+	transition: background-color 125ms;
 }
 
-#fusiondoc-home-main-inner > nav > a::after {
-	content: "→";
-	margin-left: auto;
-	margin-right: 0.2em;
-	transition: transform 0.2s ease;
-}
-
-#fusiondoc-home-main-inner > nav > a:hover::after {
-	transform: translateX(0.5em);
+#fusiondoc-home-main-inner > nav > a:is(:hover, :focus) {
+	background-color: var(--fusiondoc-accent);
 }
 
 #fusiondoc-home-scroll {
@@ -143,4 +144,11 @@
 		transform: translateY(0rem);
 		opacity: 1;
 	}
+}
+
+@media screen and (min-width: 160rem) {
+	.md-header[data-md-state=shadow] {
+		box-shadow: 0 1rem 1rem var(--fusiondoc-bg-1) !important;
+		background-color: var(--fusiondoc-bg-1);
+	}
 }