AtHeartEngineer/2g1c
1
0
Fork 0
mirror of https://github.com/AtHeartEngineer/2g1c.git synced 2026-01-07 22:23:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

mobile compatibility

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/Cheese2.afdesign~lock~
View File

Binary file not shown.

5
index.html
View File

@@ -2,7 +2,10 @@
<html lang="en">
<head>
<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>
<!-- Favicon -->

2625
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

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

64
style.css
View File

@@ -57,15 +57,71 @@ h1 {
#content {
display: flex;
justify-content: space-evenly;
width: 100%;
align-items: center;
flex-wrap: wrap;
gap: 2.5em;
padding: 0 4em;
}
#content img {
max-height: 5em;
width: auto;
max-height: 5em;
width: auto;
}
#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;
}
}