adding media queries

AbdelStark · Aug 1, 2024 · ed0d63c · ed0d63c
1 parent cf84988
commit ed0d63c
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 3 deletions.
diff --git a/askeladd-dvm-marketplace/src/app/globals.css b/askeladd-dvm-marketplace/src/app/globals.css
@@ -68,6 +68,9 @@ body {
 .arcade-cabinet {
   position: relative;
   max-width: 740px;
+  width: 90%; 
+  margin: 2rem auto 4rem;
+  padding: 1rem; 
   margin: 2rem auto 4rem; 
   padding: 2rem;
   background-color: #111;
@@ -89,7 +92,7 @@ body {
 .cabinet-content {
   background-color: rgba(0,0,0,0.8);
   border: 2px solid var(--neon-pink);
-  padding: 2rem;
+  padding: 1rem;
   border-radius: 5px;
   position: relative;
   overflow: hidden;
@@ -181,6 +184,13 @@ body {
   border: 2px solid var(--neon-green);
   padding: 10px 0;
   z-index: 1000; 
+  font-size: 0.8rem; 
+}
+
+@media (max-width: 640px) {
+  .marquee {
+    font-size: 0.6rem;
+  }
 }
 
 .marquee span {
@@ -225,6 +235,44 @@ body {
   animation: glitch-animation 3s infinite linear alternate-reverse;
 }
 
+@media (max-width: 640px) {
+  .glitch {
+    font-size: 1.4rem;
+    word-break: break-word;
+    hyphens: auto;
+  }
+
+  .neon-text-sm {
+    font-size: 0.7rem;
+  }
+
+  .arcade-cabinet {
+    border-width: 8px;
+  }
+
+  .cabinet-content {
+    padding: 0.5rem; 
+  }
+
+  .game-screen {
+    padding: 1rem; 
+  }
+
+  input[type="number"] {
+    font-size: 0.8rem; 
+  }
+
+  .submit-job-button,
+  .verify-proof-button {
+    font-size: 0.8rem; 
+    padding: 0.4rem 0.8rem; 
+  }
+
+  .proof-container pre {
+    font-size: 0.6rem;
+  }
+}
+
 @keyframes glitch-animation {
   0% { clip-path: inset(71% 0 10% 0); text-shadow: 1px 0 var(--neon-pink), -1px 0 var(--neon-yellow); }
   20% { clip-path: inset(29% 0 71% 0); text-shadow: -1px 0 var(--neon-pink), 1px 0 var(--neon-yellow); }
@@ -315,4 +363,10 @@ input:focus, button:focus {
       transparent 50%,
       rgba(0, 0, 0, 0.3) 100%
     );
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
diff --git a/askeladd-dvm-marketplace/src/app/page.tsx b/askeladd-dvm-marketplace/src/app/page.tsx
@@ -362,8 +362,8 @@ export default function Home() {
 
           {jobId && (
             <div className="mt-8 text-center">
-              <p className="text-neon-orange">Job ID: <span className="break-all">{jobId}</span></p>
-              <p className="text-neon-yellow">Status: {proofStatus}</p>
+              <p className="text-neon-orange text-sm sm:text-base">Job ID: <span className="break-all">{jobId}</span></p>
+              <p className="text-neon-yellow text-sm sm:text-base">Status: {proofStatus}</p>
 
               {error && <p className="text-neon-red blink">Error: {error}</p>}
               {proof && (