logo and docs cosmetics

README.md

@@ -4,9 +4,8 @@
     </a>
 </p>
 
-<h1 align="center" style="font-weight: normal">Leptos-Use</h1>
-
-<p align="center"> Collection of essential Leptos utilities inspired by SolidJS-USE / VueUse</p>
+<h4 align="center">Collection of essential Leptos utilities</h4>
+<p align="center">Inspired by React-Use / VueUse / SolidJS-USE</p>
 
 <p align="center">
     <a href="https://leptos-use.rs"><b>Guide</b></a> • 
@@ -21,4 +20,6 @@
 [![MIT/Apache 2.0](https://img.shields.io/badge/license-MIT%2FApache-blue.svg)](https://github.com/synphonyte/leptos-use#license)
 [![Build Status](https://github.com/synphonyte/leptos-use/actions/workflows/ci.yml/badge.svg)](https://github.com/synphonyte/leptos-use/actions/workflows/ci.yml)
 
-This is still very much work in progress and all contributions are welcome!
+We only have just begun implementing the first dozen functions but they are already very usable and ergonomic.
+
+Missing a function? Open a ticket or PR!

docs/book/src/custom.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap');
+
 :root {
     --brand-color: #EF3939;
     --brand-color-dark: #9c2525;
@@ -80,3 +82,20 @@ li.chapter-item.affix a.active {
     border-left: 0 none;
     margin-left: 0;
 }
+
+#header-logo-container, h1.menu-title {
+    font-family: 'Quicksand', sans-serif;
+    letter-spacing: -0.7px;
+}
+
+h1, h2, h3, h4, h5, h6, li.part-title {
+    font-family: 'Quicksand', sans-serif;
+}
+
+h1 {
+    font-weight: 700;
+}
+
+h2, h3, h4 {
+    font-weight: 600;
+}

docs/logo.svg

@@ -1,15 +1,17 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 74 88" version="1.1" xmlns="http://www.w3.org/2000/svg"
+<svg width="100%" height="100%" viewBox="0 0 74 120" version="1.1" xmlns="http://www.w3.org/2000/svg"
      style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
     <style>
-        path.black {
+        @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
+
+        path.black, text {
             fill: #1e1838;
         }
 
         @media (prefers-color-scheme: dark) {
-            path.black {
-                fill: white;
+            path.black, text {
+                fill: #f3f3f3;
             }
         }
     </style>
@@ -25,4 +27,5 @@
     <path class="black"
           d="M68.458,29.9c-0.1,-0.3 -0.4,-0.9 -0.8,-1.6c-0.1,-0.3 -0.3,-0.5 -0.4,-0.8c-1.4,-2.3 -3.2,-5.4 -3.2,-5.4l-7.1,4.1l4.3,7.4c5.3,10.1 5.9,21.2 1.5,30.2c-4.8,9.6 -14.1,15 -25.8,15c-11.6,0 -20.9,-5.4 -25.5,-14.8c-4.4,-9 -3.8,-20.1 1.4,-30.2l4.3,-7.5l-7.1,-4.1c-0,0 -1.9,3 -3.2,5.3c-0.1,0.3 -0.3,0.6 -0.5,0.9c-0.4,0.6 -0.6,1.2 -0.8,1.5c-6.4,12.6 -7,26.6 -1.3,38.2c6,12.3 17.9,19.4 32.6,19.5l0.2,0c14.7,-0.1 26.6,-7.2 32.6,-19.5c5.8,-11.6 5.2,-25.5 -1.2,-38.2Z"
           style="fill-rule:nonzero;"/>
+    <text x="37" y="110" text-anchor="middle" style="font-family: 'Quicksand', sans-serif; font-size: 20px; letter-spacing: -0.8px;">Leptos-Use</text>
 </svg>