スタイルを調整

o-tr · Jul 16, 2024 · 49b3e0e · 49b3e0e
1 parent 2e0a168
commit 49b3e0e
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 33 deletions.
diff --git a/src/App.css b/src/App.css
@@ -3,6 +3,9 @@
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
 }
 
 .logo {
@@ -41,6 +44,19 @@
   color: #888;
 }
 
+.packages{
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.package{
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
 .package .meta{
   display: flex;
   flex-direction: row;

diff --git a/src/App.tsx b/src/App.tsx
@@ -12,40 +12,42 @@ function App() {
     <>
       <a href={`vcc://vpm/addRepo?url=${manifests.url}`}>Add to VCC</a>
       <h1>ootr's vpm repository</h1>
-      {Object.entries(manifests.packages).map(([packageName, packageItem]) => {
-        const versions = Object.entries(packageItem.versions);
-        const latestVersion = versions[0][1];
-        return <div key={packageName} className='package' id={packageName}>
-          <h2>{latestVersion.displayName} ( {packageName} )</h2>
-          <p>{latestVersion.description}</p>
-          <div className='meta'>
-            <span>Author: {latestVersion.author.name}</span>
-            <span>Unity: {latestVersion.unity}</span>
-            <span>License: {latestVersion.license}</span>
-          </div>
-          <table className='versions'>
-            <tr>
-              <th>version</th>
-              <th>dependencies</th>
-              <th>link</th>
-            </tr>
-            {versions.map(([version, packageItem]) => {
-              return <tr key={version} className='version'>
-                <td>{packageItem.version}</td>
-                <td className='list'>
-                  {Object.entries(packageItem.vpmDependencies).map(([packageName, version]) => {
-                    if (manifests.packages[packageName]) {
-                      return <a key={packageName} href={`#${packageName}`}>{packageName}@{version}</a>
-                    }
-                    return <span key={packageName}>{packageName}@{version}</span>
-                  })}
-                </td>
-                <td><a href={packageItem.url}>Download</a></td>
+      <div className='packages'>
+        {Object.entries(manifests.packages).map(([packageName, packageItem]) => {
+          const versions = Object.entries(packageItem.versions);
+          const latestVersion = versions[0][1];
+          return <div key={packageName} className='package' id={packageName}>
+            <h2>{latestVersion.displayName} ( {packageName} )</h2>
+            <p>{latestVersion.description}</p>
+            <div className='meta'>
+              <span>Author: {latestVersion.author.name}</span>
+              <span>Unity: {latestVersion.unity}</span>
+              <span>License: {latestVersion.license}</span>
+            </div>
+            <table className='versions'>
+              <tr>
+                <th>version</th>
+                <th>dependencies</th>
+                <th>link</th>
               </tr>
-            })}
-          </table>
-        </div>
-      })}
+              {versions.map(([version, packageItem]) => {
+                return <tr key={version} className='version'>
+                  <td>{packageItem.version}</td>
+                  <td className='list'>
+                    {Object.entries(packageItem.vpmDependencies).map(([packageName, version]) => {
+                      if (manifests.packages[packageName]) {
+                        return <a key={packageName} href={`#${packageName}`}>{packageName}@{version}</a>
+                      }
+                      return <span key={packageName}>{packageName}@{version}</span>
+                    })}
+                  </td>
+                  <td><a href={packageItem.url}>Download</a></td>
+                </tr>
+              })}
+            </table>
+          </div>
+        })}
+      </div>
     </>
   )
 }

diff --git a/src/index.css b/src/index.css
@@ -13,6 +13,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 a {
   font-weight: 500;
   color: #646cff;