mirror of
https://github.com/AtHeartEngineer/2g1c.git
synced 2026-01-09 23:18:03 -05:00
mobile compatibility
This commit is contained in:
Binary file not shown.
@@ -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
2625
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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",
|
||||||
|
|||||||
64
style.css
64
style.css
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user