diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9bce013..869d8ed 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -14,6 +14,7 @@ const { cards, website_title, website_logo } = data;
+
{website_title}
@@ -32,6 +33,22 @@ const { cards, website_title, website_logo } = data;
+
+
{
cards.map((card) => (
diff --git a/src/styles/common.css b/src/styles/common.css
index 8d7fe51..2e760d7 100644
--- a/src/styles/common.css
+++ b/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)*/
- margin-left: calc(50vw - ((500px + 4rem) + (500px + 6rem) / 2));
+ padding-left: calc(max(50vw - ((500px + 2rem) + (500px + 6rem) / 2), 4rem));
+ padding-right: 4rem;
- display: flex; /* Flexbox */
- flex-direction: row; /* Align content horizontally */
- justify-content: center;
- overflow: visible; /*Prevent cards shadows to be cut off*/
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ 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;
- height: 18rem;
+ margin-top: 4rem;
- 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;
diff --git a/src/styles/mobile.css b/src/styles/mobile.css
index 82c268e..59a631a 100644
--- a/src/styles/mobile.css
+++ b/src/styles/mobile.css
@@ -1,9 +1,6 @@
-/*-Imports----------------------------------------------------------*/
-/*@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-----------------------------------------------------*/
-/*-Phone Screen Styles---------------------------------------------*/
-
-@media (max-width: 600px) {
+@media (max-width: 800px) {
/*-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;
}