Fixed responsive UI (I hope), added ability to scroll cards vertically, fixed cards offset on small screens, and other small changes

src/pages/index.astro

@@ -14,6 +14,7 @@ const { cards, website_title, website_logo } = data;
         <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
         <!-- DISABLED because it prevents the font from loading -->
         <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>{website_title}</title>
     </head>
 
@@ -32,6 +33,22 @@ const { cards, website_title, website_logo } = data;
             </div>
         </header>
 
+        <script>
+            window.addEventListener(
+                "wheel",
+                function (e) {
+                    if (e.deltaY !== 0) {
+                        e.preventDefault();
+                        window.scrollBy({
+                            left: e.deltaY,
+                            behavior: "auto",
+                        });
+                    }
+                },
+                { passive: false },
+            );
+        </script>
+
         <div class="card-container">
             {
                 cards.map((card) => (

src/styles/common.css

@@ -1,17 +1,9 @@
 /*-Impports----------------------------------------------------------*/
-/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap'); */
+
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 
 /*-Fonts----------------------------------------------------------*/
 
-/* @font-face {
-    font-family: 'IBM Plex Mono';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/ibmplexmono/v19/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format('woff2');
-  } */
-
 /*-Page----------------------------------------------------------*/
 
 html,
@@ -22,29 +14,19 @@ body {
 
 body {
     user-select: none;
-    /* background: radial-gradient(circle at 50% 200%,#353be5 0%, #353be5 45%, #00000000 80%); */
-    background-color: #000000;
-    /* background-image: url(assets/svg/background.svg); */
-
-    background-size: cover;
-    background-attachment: fixed;
-    padding: 0;
-
-    font-family: "Inter";
-}
-
-.halo {
-    position: fixed;
-    z-index: 0;
-
-    height: 100vh;
-    width: 100vw;
     background: radial-gradient(
         circle at 50% 200%,
         #353be5 0%,
         #353be5 45%,
         #00000000 80%
     );
+    background-color: #000000;
+
+    background-size: cover;
+    background-attachment: fixed;
+    padding: 0;
+
+    font-family: "Inter";
 }
 
 /*-Texts----------------------------------------------------------*/
@@ -54,7 +36,6 @@ h1 {
     top: 27%;
     left: 50%;
     transform: translate(-50%, -50%); /*Center (compensate size)*/
-    z-index: -1;
 
     color: #eaeaea;
     text-align: center;
@@ -70,7 +51,6 @@ h2 {
     top: 16%;
     left: 50%;
     transform: translate(-50%, -50%); /*Center (compensate size)*/
-    z-index: -1;
 
     color: white;
     text-align: center;
@@ -88,35 +68,39 @@ h2 {
     z-index: 1;
 
     height: 40%;
-    /* width: 200%; */
 
-    /*Calculate offset to center the second card*/
+    /*Calculate offset to center the second card (if possible) */
     /* screen_width - (card1_width + card2_margins)/2 */ /* Width includes margins */
-    /*TODO to correct (maybe JS or css rules)*/
+    padding-left: calc(max(50vw - ((500px + 2rem) + (500px + 6rem) / 2), 4rem));
-    margin-left: calc(50vw - ((500px + 4rem) + (500px + 6rem) / 2));
+    padding-right: 4rem;
 
-    display: flex; /* Flexbox */
+    display: flex;
-    flex-direction: row; /* Align content horizontally */
+    flex-direction: row;
-    justify-content: center;
+    justify-content: flex-start;
-    overflow: visible; /*Prevent cards shadows to be cut off*/
+    gap: 4rem;
+    align-items: center; /* Vertical alignment */
+
+    overflow: visible; /* Prevent cards shadows to be cut off */
+
+    /* Hide scrollbar for Chrome and Safari */
+    /*&::-webkit-scrollbar {
+        display: none;
+    }*/
+    /* Hide scrollbar for IE, Edge and Firefox */
+    /*-ms-overflow-style: none;
+    scrollbar-width: none;*/
 }
 
 .card {
     position: relative;
     top: 0px;
+    width: 500px;
+    height: 290px;
 
-    width: 31.2rem;
+    margin-top: 4rem;
-    height: 18rem;
 
-    margin-top: 2%;
-    margin-bottom: 2%;
-    margin-left: 2rem;
-    margin-right: 2rem;
-
-    color: #ffffff00; /*Temporary*/
     background-color: #121212;
 
-    /* padding: 20px; */
     border: 4px solid transparent;
     border-radius: 1.4em;
     background-clip: padding-box;

src/styles/mobile.css

@@ -1,9 +1,6 @@
-/*-Imports----------------------------------------------------------*/
+/*-Phone-Screen-----------------------------------------------------*/
-/*@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");*/
 
-/*-Phone Screen Styles---------------------------------------------*/
+@media (max-width: 800px) {
-
-@media (max-width: 600px) {
     /*-Page----------------------------------------------------------*/
 
     html,
@@ -20,11 +17,6 @@
         background-color: #000;
     }
 
-    .halo {
-        width: 100vw;
-        height: 100vh;
-    }
-
     /*-Header--------------------------------------------------------*/
 
     .site-header {
@@ -54,6 +46,8 @@
     }
 
     .logo {
+        display: none;
+
         position: absolute;
         top: 1.3rem;
         left: 1.3rem;
@@ -65,7 +59,7 @@
         margin: 0;
         padding: 0;
 
-        display: block;
+        /*display: block;*/
         pointer-events: auto;
     }