add workflow

.github/workflows/astro.yml

@@ -0,0 +1,50 @@
+name: Deploy to Pages
+
+on:
+    push:
+        branches: ["main"]
+    workflow_dispatch:
+
+permissions:
+    contents: read
+    pages: write
+    id-token: write
+
+concurrency:
+    group: "pages"
+    cancel-in-progress: false
+
+jobs:
+    build:
+        name: Build
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Setup Node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "20"
+
+            - name: Install dependencies
+              run: npm i
+
+            - name: Build with Astro
+              run: npm run astro build
+
+            - name: Upload artifact
+              uses: actions/upload-pages-artifact@v3
+              with:
+                  path: dist
+
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+        needs: build
+        runs-on: ubuntu-latest
+        name: Deploy
+        steps:
+            - name: Deploy to GitHub Pages
+              id: deployment
+              uses: actions/deploy-pages@v4

src/pages/index.astro

@@ -17,7 +17,7 @@ import "../styles/index.css"
     </button>
     <section id="bar">
         <div id="bars">
-            <div></div><div></div><div></div><div></div>
+            <div></div><div></div><div></div>
             <div id="available"><div id="played"></div></div>
         </div>
     </section>

src/styles/index.css

@@ -6,7 +6,7 @@
 #bar {
     & #bars {
         display: grid;
-        grid-template-columns: 1fr 2fr 4fr 8fr 16fr;
+        grid-template-columns: 1fr 2fr 4fr 8fr;
         gap: 0.3rem;
         & * {
             background-color: rgba(255, 255, 255, 20%);