Spaces:

gruhit-patel
/

connect-4-frontend

Running

App Files Files Community

Gruhit Patel commited on Apr 8, 2024

Commit

62670cf

verified ·

1 Parent(s): 15286cb

added responsiveness for mobiles

Browse files

Files changed (3) hide show

assets/index-CbVnnVg-.css +1 -0
assets/index-DrbJBren.js +0 -0
index.html +2 -2

assets/index-CbVnnVg-.css ADDED Viewed

	@@ -0,0 +1 @@

+ .App{display:flex;flex-direction:column;align-items:center}.board{display:flex;flex-direction:column;background-color:#6f3;width:90%;max-width:600px;height:60vh;padding:2%;border-radius:2%;box-shadow:0 0 2% #0003;overflow:hidden}.row{display:flex;justify-content:center}.cell{flex:1;padding-top:calc(100% / 7);background-color:#fff;margin:1%;border-radius:50%}.winning-cell{animation:glow 1s infinite alternate}@keyframes glow{0%{box-shadow:0 0 1% #0004ff80}to{box-shadow:0 0 2% #0004ff}}.play-button{display:flex;justify-content:center;align-items:center;position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);cursor:pointer}.play-icon{width:12%;height:auto;fill:#007bff}.reload-button{display:flex;justify-content:center;align-items:center;position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);cursor:pointer}.reload-icon{width:12%;height:auto;fill:#007bff}.options-container{position:absolute;left:50%;transform:translate(-50%)}@media only screen and (max-width: 768px){.board{height:auto}.cell{flex:1;padding-top:calc(100% / 6);margin:.5%;max-width:14.5%}.options-container{position:relative;top:calc(100% + 10px);left:50%;transform:translate(-50%);margin-top:10px}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@media only screen and (max-width: 768px){body{font-size:14px}}

assets/index-DrbJBren.js ADDED Viewed

The diff for this file is too large to render. See raw diff

index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
-    <script type="module" crossorigin src="/assets/index-DiZ2T6_p.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-cif1ZecR.css">
   </head>
   <body>
     <div id="root"></div>

     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
+    <script type="module" crossorigin src="/assets/index-DrbJBren.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CbVnnVg-.css">
   </head>
   <body>
     <div id="root"></div>