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; }