New responsive UI for tablets

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import "../styles/common.css";
 import "../styles/mobile.css";
+import "../styles/tablet.css";
 import data from "../data/content.json";
 const { cards, website_title, website_logo } = data;
 ---

src/styles/tablet.css

@@ -0,0 +1,191 @@
+/*-Tablet-Screen-----------------------------------------------------*/
+
+@media (max-width: 1210px) AND (min-width: 800px) {
+    /*-Page----------------------------------------------------------*/
+
+    html,
+    body {
+        width: 100vw;
+        min-height: 100vh;
+        height: auto;
+
+        margin: 0;
+        padding: 0;
+
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    body {
+        font-family: "Inter";
+        background-color: #000;
+        background-size: cover;
+        background-attachment: fixed;
+    }
+
+    /*-Header--------------------------------------------------------*/
+
+    .site-header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 20;
+
+        width: 100vw;
+        height: 5.5rem;
+
+        background: #00000090;
+        backdrop-filter: blur(10px);
+        /*mask: linear-gradient(black, black, transparent);*/
+
+        box-sizing: border-box;
+        display: block;
+    }
+
+    .header-row {
+        position: relative;
+
+        width: 100vw;
+        height: 5.5rem;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .logo {
+        position: absolute;
+        top: 1.3rem;
+        left: 1.3rem;
+        z-index: 2;
+
+        width: 3rem;
+        height: 3rem;
+
+        margin: 0;
+        padding: 0;
+
+        display: block;
+        pointer-events: auto;
+    }
+
+    .site-title {
+        width: 100%;
+        z-index: 2;
+
+        margin: 0;
+
+        flex: 0 1 auto;
+
+        font-size: 2.2em;
+        font-family: "Inter";
+        font-weight: 600;
+        color: #eaeaea;
+        text-align: center;
+        letter-spacing: 0.1rem;
+        line-height: 1;
+        user-select: none;
+    }
+
+    .welcome-title {
+        display: none;
+    }
+
+    /*-Texts---------------------------------------------------------*/
+
+    h1,
+    h2 {
+        position: static;
+        transform: none;
+        z-index: 1;
+
+        margin-top: 2.5rem;
+        margin-bottom: 0.5rem;
+
+        font-size: 2.2em;
+        text-align: center;
+    }
+
+    h2 {
+        font-size: 1.3em;
+        margin-top: 1.2rem;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    /*-Cards---------------------------------------------------------*/
+
+    .card-container {
+        position: relative;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 22rem;
+
+        min-height: 0;
+        height: calc(100vh - 5.5rem);
+        width: 80vw;
+        max-width: 1200px; /* Prevents from getting too wide */
+
+        margin: 0 auto; /* 'auto' centers it horizontally */
+        padding-bottom: 10%;
+
+        display: grid;
+        /* 2 equal columns ('1fr' means 1 fraction of available space) */
+        grid-template-columns: repeat(2, 1fr);
+        overflow: visible;
+        gap: 3rem;
+    }
+
+    .card {
+        position: relative;
+        width: 100%;
+        /*max-width: 300px;*/
+        height: auto;
+        min-height: 14rem;
+
+        margin: 0;
+        padding: 1.4rem;
+
+        background-color: #121212;
+        box-sizing: border-box;
+    }
+
+    .card::after {
+        border-radius: 1.2em;
+        filter: drop-shadow(#00000080 0 1em 20px);
+    }
+
+    .card > img {
+        position: absolute;
+        top: 10%;
+        left: 6%;
+        width: 3em;
+        height: 3em;
+    }
+
+    .card-title {
+        position: absolute;
+        top: 12%;
+        left: 23%;
+
+        font-family: "IBM Plex Mono";
+        font-weight: 500;
+        font-size: 1.6em;
+        color: #eaeaea;
+    }
+
+    .card-desc {
+        position: static;
+        width: 100%;
+
+        margin-top: 6em;
+        margin-left: 0;
+
+        font-size: 1.2em;
+        color: #eaeaea;
+        text-align: center;
+    }
+}