mobile compatibility

This commit is contained in:
AtHeartEngineer
2025-08-11 21:37:37 -04:00
parent 794a3ad533
commit c6a0fb13d2
5 changed files with 2300 additions and 400 deletions

Binary file not shown.

View File

@@ -2,7 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<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, user-scalable=no" />
<meta name="theme-color" content="#BBEFFF" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<title>2G1C</title> <title>2G1C</title>
<!-- Favicon --> <!-- Favicon -->

2625
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -4,12 +4,12 @@
"description": "2 Girls 1 Cheese website", "description": "2 Girls 1 Cheese website",
"main": "index.html", "main": "index.html",
"scripts": { "scripts": {
"dev": "npx http-server -p 3001 -o", "dev": "npx live-server --port=3001 --open=/",
"start": "npx http-server -p 3001", "start": "npx live-server --port=3001",
"build": "echo 'Static site - no build step required'" "build": "echo 'Static site - no build step required'"
}, },
"devDependencies": { "devDependencies": {
"http-server": "^14.1.1" "live-server": "^1.2.2"
}, },
"keywords": [ "keywords": [
"website", "website",

View File

@@ -57,15 +57,71 @@ h1 {
#content { #content {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; align-items: center;
flex-wrap: wrap;
gap: 2.5em;
padding: 0 4em;
} }
#content img { #content img {
max-height: 5em; max-height: 5em;
width: auto; width: auto;
} }
#content img.social { #content img.social {
max-height: 4em; max-height: 4em;
} }
/* Responsive Design for Mobile */
@media screen and (max-width: 768px) {
#content {
gap: 2em;
padding: 0 2em;
}
#content img {
max-height: 4em;
max-width: 100%;
}
#content img.social {
max-height: 3.5em;
}
/* Make social links more touch-friendly */
#content a {
display: flex;
justify-content: center;
align-items: center;
min-height: 60px;
min-width: 60px;
}
}
/* Extra small devices */
@media screen and (max-width: 480px) {
#content {
gap: 1.5em;
padding: 0 1.5em;
}
#content img {
max-height: 3.5em;
}
#content img.social {
max-height: 3em;
}
}
/* Landscape orientation on mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
#content {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 1.5em;
}
}