From c58809d959aaa40734cbffa910a11433cd657922 Mon Sep 17 00:00:00 2001
From: kaminorse <contact@kaminorse.com>
Date: Tue, 18 Nov 2025 13:17:13 +0900
Subject: [PATCH 1/2] =?UTF-8?q?#2=20fix=20modal=20size=20viewport=E2=86=92?=
 =?UTF-8?q?percentage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                      | 38 ++++++++++++++++++++++++++++++++--
 docs/index.html                |  2 +-
 src/sass/components/modal.scss |  4 ++--
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 9045c0d..b37888d 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,18 @@
-# smarphy
+# smarpy
 
-smartupcorp web design
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smartupcorp/smarpy/blob/main/LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/@smartupcorp/smarpy)](https://www.npmjs.com/package/@smartupcorp/smarpy)
+[![npm downloads](https://img.shields.io/npm/dm/@smartupcorp/smarpy)](https://www.npmjs.com/package/@smartupcorp/smarpy)
+
+[![NPM](https://nodei.co/npm/@smartupcorp/smarpy.png)](https://nodei.co/npm/@smartupcorp/smarpy/)
+
+## Overview
+
+smarpy is an open-source web design sass library.
+
+It uses `oklch()` to declare color palette.
+
+If you want to use in React Project, you can use [react-smarpy](https://github.com/smartupcorp/react-smarpy).
 
 ## Installation
 
@@ -9,3 +21,25 @@ smartupcorp web design
 ```node
 npm install @smartupcorp/smarpy
 ```
+
+### Use in CSS
+
+#### From CDN
+
+```html
+<link
+  rel="stylesheet"
+  type="text/css"
+  media="all"
+  href="https://unpkg.com/@smartupcorp/smarpy/dist/css/smarpy.min.css"
+/>
+```
+
+```html
+<link
+  rel="stylesheet"
+  type="text/css"
+  media="all"
+  href="https://unpkg.com/@smartupcorp/smarpy/dist/css/smarpy-utilities.min.css"
+/>
+```
diff --git a/docs/index.html b/docs/index.html
index b418ab9..581da4a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1331,7 +1331,7 @@
           <div class="modal">
             <div class="modal-content">
               <div class="container">
-                <div class="my-1rem">
+                <div class="p-1rem">
                   <div class="message">
                     <div class="message-header">.message</div>
                     <div class="message-body">
diff --git a/src/sass/components/modal.scss b/src/sass/components/modal.scss
index 7942680..1c890d9 100644
--- a/src/sass/components/modal.scss
+++ b/src/sass/components/modal.scss
@@ -7,13 +7,13 @@
   background-color: oklch(var(--#{variables.$prefix}color-default-back-oklch) / 0.75);
   display: none;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
   justify-content: center;
   left: 0;
   overflow: hidden;
   position: fixed;
   top: 0;
-  width: 100vw;
+  width: 100%;
   z-index: var(--#{variables.$prefix}z-index-modal);
   &.is-active {
     display: flex;

From 6abd3622d04a69cea0d097c6629ad11179a8cef3 Mon Sep 17 00:00:00 2001
From: kaminorse <contact@kaminorse.com>
Date: Tue, 18 Nov 2025 13:17:37 +0900
Subject: [PATCH 2/2] 0.0.2

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2fc3e8b..19c17b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@smartupcorp/smarpy",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@smartupcorp/smarpy",
-      "version": "0.0.1",
+      "version": "0.0.2",
       "license": "MIT",
       "devDependencies": {
         "autoprefixer": "^10.4.21",
diff --git a/package.json b/package.json
index 940714b..6098f97 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@smartupcorp/smarpy",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "smartupcorp web design library written by scss.",
   "main": "index.js",
   "scripts": {