Initial commit (v1.0.0)

Author: GavinGoGaming

.gitignore

@@ -0,0 +1,78 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Production builds
+/build
+/dist
+/.next
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+.nyc_output
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Storybook build outputs
+.out
+.storybook-out

README.md

@@ -0,0 +1,21 @@
+# mc.css
+mc.css lets you use Minecraft's design system in pure CSS, with extra features included with React.
+
+## Installation
+For just CSS, you can use a CDN:
+```css
+@import url("https://unpkg.com/@klashdevelopment/mc.css/styles/index.css");
+```
+```html
+<link rel="stylesheet" href="https://unpkg.com/@klashdevelopment/mc.css/styles/index.css" />
+```
+
+For CSS or React, you can use the NPM package:
+```sh
+npm install @klashdevelopment/mc.css
+```
+
+Then, import the react components:
+```tsx
+import { ... } from "@klashdevelopment/mc.css";
+```

demo.css

@@ -0,0 +1,53 @@
+html, body {
+    background: #ccc;
+    color: black;
+    width: 100%;
+    height: 100vh;
+    padding: 0;
+    margin: 0;
+    font-family: 'Minecraft', sans-serif;
+    letter-spacing: -0.5px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    padding: 5px 0;
+}
+
+main {
+    width: 100%;
+    min-height: 100vh;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.mc-container, .mc-button, .mc-input, .mc-tooltip {
+    width: fit-content;
+}
+.mc-window-content {
+    padding: 10px;
+}
+.mc-window-content img {
+    scale: 1.25;
+}
+.docs-item {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+.docs-item.row {
+    flex-direction: row;
+}
+.docs-item.row.end {
+    align-items: end;
+}
+
+.docs-grid { /* grid for 64x64 items with 8px gap */
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
+    gap: 8px;
+}