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

New responsive UI for mobile devices
Some checks failed
/ build (push) Has been cancelled
Details
/ deploy (push) Has been cancelled
Details

Browse source
This commit is contained in:
Gu://em_ 2026-03-16 17:31:19 +01:00
parent ed03be8bde
commit e9ae13e69c
3 changed files with 230 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

204
src/styles/mobile.css Normal file
View file

@ -0,0 +1,204 @@
/*-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 Styles---------------------------------------------*/
@media (max-width: 600px) {
/*-Page----------------------------------------------------------*/
html,
body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
font-family: "Inter";
background-color: #000;
}
.halo {
width: 100vw;
height: 100vh;
}
/*-Header--------------------------------------------------------*/
.site-header {
position: fixed;
top: 0;
left: 0;
z-index: 20;
width: 100vw;
height: 5.5rem;
background: 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;
}
/*-Cards---------------------------------------------------------*/
.card-container {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 5.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100vw;
min-height: 0;
height: calc(100vh - 5.5rem);
margin: 0;
padding: 10rem 1rem 1rem 1rem;
gap: 1rem;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
background: transparent;
}
.card {
position: relative;
width: 90vw;
max-width: 420px;
height: auto;
min-height: 14rem;
margin: 1rem 0;
padding: 1.2rem 1rem;
background-color: #121212;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.card::after {
border-radius: 1.2em;
filter: drop-shadow(#00000080 0 1em 20px);
}
.card > img {
position: static;
width: 3em;
height: 3em;
margin-bottom: 0.8em;
margin-right: 0;
margin-top: 0.2em;
flex-shrink: 0;
display: block;
}
.card-title {
position: static;
margin-bottom: 0.5em;
margin-top: 0.2em;
margin-left: 0;
font-size: 1.7em;
font-weight: 600;
color: #eaeaea;
text-align: center;
}
.card-desc {
position: static;
width: 100%;
margin-top: 1em;
margin-left: 0;
font-size: 1em;
color: #eaeaea;
text-align: center;
}
}