Games page, maplist page (#153)

Co-authored-by: Wolfboy248 <105884620+Wolfboy248@users.noreply.github.com>

1 files changed, 90 insertions, 0 deletions

diff --git a/frontend/src/components/pages/home.css b/frontend/src/components/pages/home.css
new file mode 100644
index 0000000..072b12b
--- /dev/null
+++ b/frontend/src/components/pages/home.css
@@ -0,0 +1,90 @@
+* {
+    scrollbar-width: thin;
+}
+
+.homepage-panel {
+    background-color: #202232;
+    margin: 10px 10px;
+    padding: 10px;
+    border-radius: 24px;
+    overflow: hidden;
+    flex: 1 1 100%;
+    align-items: stretch;
+    width: 100%;
+}
+
+.homepage-panel-title-div {
+    background-color: #2B2E46;
+    width: fit-content;
+    padding: 5px 18px;
+    border-radius: 200px;
+    font-family: BarlowSemiCondensed-SemiBold;
+    font-size: 32px;
+    margin-bottom: 10px;
+}
+
+.stats-div {
+    background-color: #2B2E46;
+    border-radius: 24px;
+    text-align: center;
+    display: grid;
+    padding: 10px 0px;
+    width: 100%;
+}
+
+.stats-div span {
+    font-family: BarlowSemiCondensed-Regular;
+    font-size: 18px;
+}
+
+.stats-div span>b {
+    font-family: BarlowSemiCondensed-SemiBold;
+    font-size: 42px;
+}
+
+.record-title div {
+    --padding: 20px;
+    width: calc(100% - calc(var(--padding * 2)));
+    height: 32px;
+    border-radius: 200px;
+    font-size: 18px;
+    display: grid;
+    grid-template-columns: calc(20% - 3.6px) calc(25% - 4.5px) calc(15% - 2.7px) calc(15% - 2.7px) calc(25% - 4.5px);
+    text-align: center;
+    padding: 0px var(--padding);
+    vertical-align: middle;
+    align-items: center;
+    font-family: BarlowSemiCondensed-SemiBold;
+}
+
+.record-title::after {
+    content: "";
+    display: flex;
+    width: 100%;
+    height: 3px;
+    background-color: #2B2E46;
+    margin-bottom: 5px;
+}
+
+.recommended-map-img {
+    width: 250px;
+    border-radius: 24px;
+    margin-bottom: 0;
+    border: 7px solid #2B2E46;
+}
+
+.difficulty-bar-home {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 20% 20% 20% 20% 20%;
+    align-items: center;
+    margin: 5px;
+    margin-top: 16px;
+}
+
+.difficulty-point {
+    background: #2B2E46;
+    height: 3px;
+    margin: 5px;
+    border-radius: 10px;
+}