[ADD] css styles for different screens

RicardoBritoBrens · Jul 6, 2023 · cb873f1 · cb873f1
1 parent 8fbb872
commit cb873f1
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 83 deletions.
diff --git a/index.html b/index.html
@@ -6,6 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="styles.css" />
     <link rel="stylesheet" type="text/css" href="on-off-switch-button.css" />
+     <!-- Media-specific CSS files -->
+    <link rel="stylesheet" media="(max-width: 768px)" href="styles-small.css">
+    <link rel="stylesheet" media="(min-width: 769px) and (max-width: 1024px)" href="styles-medium.css">
+    <link rel="stylesheet" media="(min-width: 1025px)" href="styles-large.css">
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/icon?family=Material+Icons"

diff --git a/styles-large.css b/styles-large.css
@@ -0,0 +1,87 @@
+@import url("https://fonts.googleapis.com/css?family=Lato:100&display=swap");
+
+/* Styles for screens with a minimum width of 1025px */
+@media (min-width: 1025px) {
+
+.body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-image: url(https://wallpapercave.com/dwp1x/wp2794478.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    font-family: "Lato", sans-serif;
+  }
+
+  .player-icon-image {
+    height: 25px;
+    width: 28px;
+  }
+
+  button {
+    color: white;
+    width: 180px;
+    height: 60px;
+    cursor: pointer;
+    background: transparent;
+    border: 1px solid #91c9ff;
+    outline: none;
+    transition: 1s ease-in-out;
+    font-size: larger;
+  }
+
+  .board {
+    width: 550px;
+    height: 550px;
+    background-color: white;
+  }
+
+  .board-inner {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    background-color: #91c9ff;
+    width: 550px;
+    height: 550px;
+  }
+
+  .box {
+    margin: 15px;
+    width: 150px;
+    height: 150px;
+    background-color: white;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .o {
+    background-image: url(assets/o.png);
+  }
+
+  .x {
+    background-image: url(assets/x.png);
+  }
+
+  .you-win-div {
+    background-color: cadetblue;
+    align-items: center;
+  }
+
+  .center-div {
+    border: 1px solid;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 25px;
+  }
+
+  .center-div-non-solid {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 25px;
+  }
+  }
diff --git a/styles-medium.css b/styles-medium.css
@@ -0,0 +1,15 @@
+@import url("https://fonts.googleapis.com/css?family=Lato:100&display=swap");
+
+/* Styles for screens with a maximum width of 1024px */
+@media (max-width: 1024px) {
+    .body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        background-image: url(https://wallpapercave.com/dwp1x/wp2794478.jpg);
+        background-repeat: no-repeat;
+        background-size: cover;
+        font-family: "Lato", sans-serif;
+      }      
+  }
diff --git a/styles-small.css b/styles-small.css
@@ -0,0 +1,17 @@
+@import url("https://fonts.googleapis.com/css?family=Lato:100&display=swap");
+
+/* Styles for screens with a maximum width of 768px */
+@media (max-width: 768px) {
+    .body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        background-image: url(https://wallpapercave.com/dwp1x/wp2794478.jpg);
+        background-repeat: no-repeat;
+        background-size: cover;
+        font-family: "Lato", sans-serif;
+      }
+
+    /* Modify other styles as needed */
+  }
diff --git a/styles.css b/styles.css
@@ -1,87 +1,5 @@
 @import url("https://fonts.googleapis.com/css?family=Lato:100&display=swap");
 
-.body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  background-image: url(https://wallpapercave.com/dwp1x/wp2794478.jpg);
-  background-repeat: no-repeat;
-  background-size: cover;
-  font-family: "Lato", sans-serif;
-}
-
-.player-icon-image {
-  height: 25px;
-  width: 28px;
-}
-
-button {
-  color: white;
-  width: 180px;
-  height: 60px;
-  cursor: pointer;
-  background: transparent;
-  border: 1px solid #91c9ff;
-  outline: none;
-  transition: 1s ease-in-out;
-  font-size: larger;
-}
-
-.board {
-  width: 550px;
-  height: 550px;
-  background-color: white;
-}
-
-.board-inner {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  background-color: #91c9ff;
-  width: 550px;
-  height: 550px;
-}
-
-.box {
-  margin: 15px;
-  width: 150px;
-  height: 150px;
-  background-color: white;
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-
-.o {
-  background-image: url(assets/o.png);
-}
-
-.x {
-  background-image: url(assets/x.png);
-}
-
-.you-win-div {
-  background-color: cadetblue;
-  align-items: center;
-}
-
-.center-div {
-  border: 1px solid;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 25px;
-}
-
-.center-div-non-solid {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 25px;
-}
-
 .display-none {
   display: none;
-}
+}