[Feature] add responsive design for mobile (#4)

.github/workflows/merge_request.yml

@@ -12,7 +12,7 @@ jobs:
       matrix:
         node-version: [latest]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
           version: latest
@@ -27,11 +27,6 @@ jobs:
         run: pnpm run lint
       - name: Build
         run: pnpm run build
-
-  preview-bump-version:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
       - name: Preview Bump version
         id: tag_version
         uses: mathieudutour/github-tag-action@v6.1

.github/workflows/release.yml

@@ -3,12 +3,17 @@ on:
   push:
     branches:
       - main
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
 jobs:
   release:
     permissions: write-all
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Bump version and push tag
         id: tag_version
         uses: mathieudutour/github-tag-action@v6.1
@@ -20,3 +25,21 @@ jobs:
           tag: ${{ steps.tag_version.outputs.new_tag }}
           name: Release ${{ steps.tag_version.outputs.new_tag }}
           body: ${{ steps.tag_version.outputs.changelog }}
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

package.json

@@ -20,9 +20,9 @@
 		"@commitlint/config-conventional": "^18.4.3",
 		"@pandacss/astro": "^0.18.3",
 		"@pandacss/dev": "^0.18.3",
-		"@typescript-eslint/eslint-plugin": "^6.12.0",
-		"@typescript-eslint/parser": "^6.12.0",
-		"astro": "^3.6.0",
+		"@typescript-eslint/eslint-plugin": "^6.13.1",
+		"@typescript-eslint/parser": "^6.13.1",
+		"astro": "^3.6.3",
 		"eslint": "^8.54.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-define-config": "^1.24.1",

panda.config.ts

@@ -15,7 +15,7 @@ const globalCss = defineGlobalStyles({
 		fontFamily: 'Inter'
 	},
 	main: {
-		width: '60%',
+		width: {base: '70%', xlDown: '80%'},
 		margin: '50px auto',
 		padding: '50px',
 		backgroundColor: 'secondary',
@@ -27,7 +27,7 @@ const globalCss = defineGlobalStyles({
 		marginBottom: '50px',
 		textAlign: 'center',
 		fontWeight: 600,
-		fontSize: '2.5em',
+		fontSize: {base: '2.5em', mdDown: '1.5em'},
 		lineHeight: 1.2,
 		color: 'text'
 	}
@@ -43,6 +43,12 @@ export default defineConfig({
 		dark: '[data-color-mode=dark] &'
 	},
 	theme: {
+		extend: {
+			breakpoints: {
+				sm: '412px',
+				md: '993px'
+			}
+		},
 		tokens: defineTokens({
 			colors: {
 				link: {value: '#00a8e6', description: 'Color of URI links'}