MrDiderot/mischlabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve landing page mobile performance
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 9s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-20 18:24:11 +02:00
parent 75b8a66c62
commit 81ddb781ca
2 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -4,10 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MischLabs - Services</title> <title>MischLabs - Services</title>
<link rel="stylesheet" href="style.css?v=6"> <link rel="stylesheet" href="style.css?v=7">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div class="bg-glow bg-glow-1"></div> <div class="bg-glow bg-glow-1"></div>

27
style.css
View File

@@ -25,7 +25,7 @@ html {
} }
body { body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
min-height: 100vh; min-height: 100vh;
@@ -34,13 +34,15 @@ body {
align-items: center; align-items: center;
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
} }
/* ===== Background Glows ===== */ /* ===== Background Glows ===== */
.bg-glow { .bg-glow {
position: fixed; position: fixed;
border-radius: 50%; border-radius: 50%;
filter: blur(120px); filter: blur(80px);
opacity: 0.15; opacity: 0.15;
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 0;
@@ -181,6 +183,8 @@ main {
position: relative; position: relative;
overflow: visible; overflow: visible;
isolation: isolate; isolation: isolate;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
} }
.card > * { .card > * {
@@ -316,6 +320,10 @@ footer p {
/* ===== Responsive ===== */ /* ===== Responsive ===== */
@media (max-width: 768px) { @media (max-width: 768px) {
.bg-glow {
display: none;
}
header { header {
padding: 3rem 1.5rem 1.5rem; padding: 3rem 1.5rem 1.5rem;
} }
@@ -335,6 +343,11 @@ footer p {
.card { .card {
padding: 1.25rem; padding: 1.25rem;
animation: none;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
} }
.card-icon { .card-icon {
@@ -353,6 +366,16 @@ footer p {
} }
} }
@media (hover: none) {
.card::after {
display: none;
}
.card:hover {
transform: none;
}
}
@media (max-width: 480px) { @media (max-width: 480px) {
.card-banner { .card-banner {
flex-direction: column; flex-direction: column;