Docs: General improvements

README.md

@@ -11,7 +11,7 @@
 
 Check [the documentation](https://slothcss.devmount.com) to see it live in action. Sloth.css aims to be:
 
-- Lightweight (7.3KB gzipped)
+- Lightweight (7.5KB gzipped)
 - Responsive and mobile-friendly
 - Beautiful per default but heavily customisable
 - Working for all modern browsers

docs/assets/styles/docs.css

@@ -150,7 +150,7 @@ body {
   & > aside {
     background: var(--color-bg-base);
     position: fixed;
-    width: 14rem;
+    width: 15rem;
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: thin;
@@ -202,7 +202,7 @@ body {
     }
 
     nav {
-      padding: 0 1.5rem 1.5rem 1.5rem;
+      padding: 0 1.5rem 4rem 1.5rem;
       top: 3.5rem;
 
       ul {

docs/pages/getting-started/installation.md

@@ -32,7 +32,7 @@ If you just want to use the drop-in styles or the utility classes or the CSS com
 
 ### Install manually
 
-Download the latest [Sloth.css release]({{ repoUrl }}/releases) (7.3KB):
+Download the latest [Sloth.css release]({{ repoUrl }}/releases) (7.5KB):
 
 <button onclick="window.location.href='{{ repoUrl }}/releases'">Download Sloth.css</button>
 

docs/pages/index.md

@@ -8,17 +8,26 @@ notoc: true
   <img src="/assets/images/logo.svg" alt="Logo showing a sloth" class="w-32 h-32 rounded-full">
   <h1 class="m-2">Sloth.css</h1>
   <p>
-    A drop-in utility component CSS library for lazy mammals.<br />
-    Created by <a href="https://github.com/devmount">devmount</a>.
+    <a href="https://github.com/devmount/sloth.css/releases" target="_blank"><img src="https://img.shields.io/github/v/tag/devmount/sloth.css.svg?label=version&colorB=e5aa70&style=flat-square" alt="release" /></a>
+    <a href="https://github.com/devmount/sloth.css/commits/main" target="_blank"><img src="https://img.shields.io/github/last-commit/devmount/sloth.css?label=updated&color=e5aa70&style=flat-square" alt="last commit" /></a>
+    <a href="./LICENSE" target="_blank"><img src="https://img.shields.io/badge/license-MIT-e5aa70.svg?style=flat-square" alt="License MIT" /></a>
+    <a href="./.github/CONTRIBUTING.md" target="_blank"><img src="https://img.shields.io/badge/contributions-welcome-e5aa70.svg?style=flat-square" alt="contributions welcome" /></a>
   </p>
 </header>
 
+Sloth.css is a drop-in utility component CSS library, that aims to be:
+
+- Lightweight (7.5KB gzipped)
+- Responsive and mobile-friendly
+- Beautiful per default but heavily customisable
+- Working for all modern browsers
+
 ## Installation
 
 Include the following CSS file in your HTML head to get the complete package:
 
 ```html
-<!-- Sloth.css drop-in core styles, utility classes and components, ~14.5KB gzipped -->
+<!-- Sloth.css drop-in core styles, utility classes and components, ~7.5KB gzipped -->
 <link rel="stylesheet" href="{{ cdnUrl }}/sloth.min.css" />
 ```
 
@@ -33,7 +42,7 @@ Sloth.css can be used as drop-in CSS library, as utility class library or even w
 The drop-in core of Sloth.css provides styles for all plain HTML elements without the use of a single class. If you have a page using semantic markup, just include the following CSS file and everything will get some nice basic styling.
 
 ```html
-<!-- Sloth.css drop-in core styles, ~2.7KB gzipped -->
+<!-- Sloth.css drop-in core styles, ~3.1KB gzipped -->
 <link rel="stylesheet" href="{{ cdnUrl }}/sloth.core.min.css" />
 ```
 
@@ -42,17 +51,18 @@ The drop-in core of Sloth.css provides styles for all plain HTML elements withou
 If you want to create quick mockups without leaving your markup, you can use Sloth.css with utility classes. Just take a look at the docs to see, which ones are available. Those utility classes are a curated subset of Tailwind CSS classes (with a few exceptions and additions) and are meant to be extended and adapted by you for your project. I had several projects, where Tailwind was not necessary (or not possible or not wanted), so instead I used a convenient set of utility classes I curated myself and found, that those were mostly sufficient for those projects. So here they are.
 
 ```html
-<!-- Sloth.css utility classes, ~1.8KB gzipped -->
+<!-- Sloth.css utility classes, ~2.0KB gzipped -->
 <link rel="stylesheet" href="{{ cdnUrl }}/sloth.util.min.css" />
 ```
 
 ### Variant 3: CSS components collection
 
 If you need more advanced elements on your page, you can use Sloth.css with prestyled components included. Badges, Cards, Modals, Tooltips and more - take a look at the complete list in the docs.
 
-<p class="callout accent">
-  This is still work-in-progress. There will be more components coming soon<sup><small>TM</small></sup>
-</p>
+```html
+<!-- Sloth.css CSS components, ~6.4KB gzipped -->
+<link rel="stylesheet" href="{{ cdnUrl }}/sloth.comp.min.css" />
+```
 
 ## License
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@devmount/sloth.css",
   "version": "0.4.0",
-  "description": "A drop-in utility component CSS-only library for lazy mammals.",
+  "description": "A drop-in utility component CSS library for lazy mammals.",
   "main": "sloth.min.css",
   "files": [
     "./*.css",
@@ -15,7 +15,8 @@
     "build": "npm run build:complete && npm run build:core && npm run build:util && npm run build:comp",
     "publish": "npm run build && npm publish",
     "docs:serve": "npx @11ty/eleventy --serve",
-    "docs:build": "npx @11ty/eleventy"
+    "docs:build": "npx @11ty/eleventy",
+    "check:size": "gzip -c sloth.min.css | wc -c"
   },
   "keywords": [
     "css",

src/sloth.comp.css

@@ -1,3 +1,4 @@
 /* Components */
 @import '_config.css';
+@import '_core.css';
 @import '_components.css';