add stars

css/games.css

@@ -24,27 +24,52 @@ game img {
     justify-self: left;
     margin-right: auto;
 }
-game h1 {
+#holder h1 {
     font-size: 14px;
     margin: 15px;
-    max-width: 50%;
+    width: 100%;
+    text-align: right;
+    height: 70%;
 }
-#games {
+#holder {
+    width: 70%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+#star {
+    width: 10%;
+    justify-self: right;
+    margin-left: auto;
+    margin-right: 15px;
+    transition-duration: 0.25s;
+}
+#star:hover {
+    transform: scale(1.1);
+    filter: drop-shadow(0 0 5px var(--color-1))
+}
+#games, #starredgames {
     width: 90vw;
-    height: 100%;
     display: flex;
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
-    min-height: calc(100vh - (18px * 2 + 5px * 2 + 20px * 2));
+    height: 100%;
     gap: 0px;
 }
 
 #noResults, #loadingMsg {
-    font-size: 28px;
+    font-size: 24px;
     color: var(--color-1);
-    text-shadow: var(--color-1) 0 0 10px;
 }
-#noResults {
+#starredHeader, #allHeader {
+    font-size: 32px;
+    color: var(--color-1);
+}
+#noResults, #starredHeader, #allHeader {
     display: none;
+}
+body {
+    justify-content: flex-start;
 }

css/loader.css

@@ -23,7 +23,7 @@
 }
 #infobox img {
     height: 100%;
-    margin: 1.5%;
+    margin: 0.5%;
     aspect-ratio: 1 / 1;
     border-radius: 8px;
 }

css/main.css

@@ -25,6 +25,7 @@ body {
 }
 body {
     animation: 1s ease-out loadIn;
+    user-select: none;
 }
 @keyframes loadIn {
     from {opacity: 0;transform: translateY(-32px);}
@@ -67,4 +68,7 @@ h3 {
 p {
     font-size: 16px;
     margin: 2px;
+}
+img {
+	image-rendering: pixelated;
 }