guillm/portulan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed responsive UI (I hope), added ability to scroll cards vertically, fixed cards offset on small screens, and other small changes
Some checks are pending
/ build (push) Waiting to run
Details
/ deploy (push) Blocked by required conditions
Details

Browse source
This commit is contained in:
Gu://em_ 2026-03-18 11:02:38 +01:00
parent e9ae13e69c
commit 59df9a3017
3 changed files with 51 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/pages/index.astro
View file

@ -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) => (

74
src/styles/common.css
View file

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

16
src/styles/mobile.css
View file

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