Game Grid Upadate

- Changed CSS file name for the game grid
- Dynamically changes the number of games depending on the size of the users screen
- increased the size of images
- games will now properly center themselves within the center of the page

known issue
- messes up the setting page as it uses the same file (plan on making the settings its own grid CSS)

Author: christian26004

css/blogDexStyle.css

@@ -0,0 +1,57 @@
+* {
+   box-sizing: border-box;
+}
+
+.row {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   gap: 3px;
+}
+
+.row > * {
+   max-width: 300px; /* must be same px count as minmax */
+   justify-self: center;
+}
+
+.bodyMain {
+   background: opacity 1;
+   padding: 20px;
+   font-family: Arial;
+}
+
+.main {
+   max-width: 100%;
+   margin: auto;
+   padding: 0 20px;
+}
+
+.content {
+   color: white;
+   padding: 5px;
+   border-radius: 5px;
+}
+
+.content img {
+   height: 180px;
+}
+
+.content h4 {
+   overflow: hidden;
+   text-overflow: ellipsis;
+   white-space: nowrap;
+   word-break: break-word;
+}
+
+.content:hover {
+   background: rgba(59, 59, 59, 0.3);
+   backdrop-filter: blur(2px);
+}
+
+.content:active {
+   background: rgba(92, 92, 92, 0.3);
+   backdrop-filter: blur(2px);
+}
+
+.show {
+   display: block;
+}

css/gameGrid.css

@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
-   <link rel="stylesheet" href="css/blogDexStyle.css">
+   <link rel="stylesheet" href="css/gameGrid.css">
    <link rel="stylesheet" href="css/seasonal.css">
    <link rel='icon' href="img/favicon-32x32.png">
    <meta name="description"

index.html

@@ -6,7 +6,7 @@
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/style.css">
-   <link rel="stylesheet" href="../css/blogDexStyle.css">
+   <link rel="stylesheet" href="../css/gameGrid.css">
    <link rel="stylesheet" href="../css/seasonal.css">
    <link rel='icon' href="../img/favicon-32x32.png">
 </head>