change layout

arturbien · Aug 24, 2024 · 396ebc9 · 396ebc9
1 parent 9d957cd
commit 396ebc9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -47,6 +47,7 @@
   <style>
     * {
       box-sizing: border-box;
+      margin: 0;
     }
     html,
     body {
@@ -62,41 +63,64 @@
       max-width: 800px;
       margin: 0 auto;
       padding: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
+    .container {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      top: 80px;
+    }
     h1 {
       color: black;
       font-size: 80px;
+      line-height: 1;
+      margin-bottom: 32px;
     }
     @media screen and (min-width: 768px) {
       h1 {
-        font-size: 120px;
+        font-size: 140px;
+        margin-bottom: 32px;
       }
     }
 
     pre {
       background-color: #f4f4f4;
       border: 1px solid #ddd;
       border-radius: 4px;
-      padding: 15px;
+      padding: 12px;
       overflow-x: auto;
+      text-align: left;
+    }
+    .code-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
     }
-
     code {
+      display: block;
       font-family: "Courier New", Courier, monospace;
+      font-size: 14px;
+    }
+
+    #releastBalloonsButton {
+      width: 100%;
     }
   </style>
   <body>
     <div class="container">
       <h1>Balloons</h1>
-
-      <h2>Usage</h2>
-      <pre><code>npm install balloons-js</code></pre>
-      <pre><code>import { balloons } from 'balloons-js';
-
+      <div class="code-wrapper">
+        <pre><code>npm install balloons-js</code></pre>
+        <pre><code>import { balloons } from "balloons-js";
+
 balloons();</code></pre>
-
-      <button id="releastBalloonsButton">Release Balloons</button>
+        <button id="releastBalloonsButton">Release Balloons</button>
+      </div>
     </div>
     <script src="script.js"></script>
   </body>

diff --git a/package.json b/package.json
@@ -23,12 +23,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/arturbien/balloons.git"
+    "url": "https://github.com/arturbien/balloons-js.git"
   },
   "bugs": {
-    "url": "https://github.com/arturbien/balloons/issues"
+    "url": "https://github.com/arturbien/balloons-js/issues"
   },
-  "homepage": "https://github.com/arturbien/balloons#readme",
+  "homepage": "https://github.com/arturbien/balloons-js#readme",
   "devDependencies": {
     "typescript": "^4.9.5",
     "rollup": "^2.79.1",