modal size

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"
+/>
+```

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">

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": {

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;