Browse Source

fixed footer on mobile

main
Adrian Baumgart 1 month ago
parent
commit
1646b5688d
Signed by: exc_bad_access GPG Key ID: B6CC77BC47B56030
  1. 27
      components/Page.js
  2. 24
      package-lock.json
  3. 1
      package.json
  4. 10
      postcss.config.js
  5. 14
      styles/Page.module.css
  6. 2
      styles/globals.css

27
components/Page.js

@ -1,12 +1,29 @@
import Navbar from './Navbar';
import Footer from './Footer';
import styles from '../styles/Page.module.css';
import Head from 'next/head';
import { useEffect } from 'react';
export default function Page({ title, children }) {
useEffect(() => {
console.log('hi');
const appHeight = () => {
const doc = document.documentElement;
doc.style.setProperty('--app-height', `${window.innerHeight}px`);
};
window.addEventListener('resize', appHeight);
appHeight();
}, []);
return (
<div className="dark:bg-dark-primary w-full h-full min-h-screen mx-auto dark:text-white relative">
<Navbar title={title} />
<div className="pb-16">{children}</div>
<Footer />
</div>
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<div className={styles.frame}>
<Navbar title={title} />
<div className="pb-16">{children}</div>
<Footer />
</div>
</>
);
}

24
package-lock.json

@ -14,6 +14,7 @@
"devDependencies": {
"autoprefixer": "^10.2.4",
"postcss": "^8.2.6",
"postcss-100vh-fix": "^1.0.2",
"tailwindcss": "^2.0.3"
}
},
@ -2321,6 +2322,22 @@
"url": "https://opencollective.com/postcss/"
}
},
"node_modules/postcss-100vh-fix": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/postcss-100vh-fix/-/postcss-100vh-fix-1.0.2.tgz",
"integrity": "sha512-t7vqk9AfjI4fXmWlQCEiMZFFhi1hro4WlECINI1TV6Qh1XapUJE++gCmNr95F5Hen/+bz1OmO+SiSB9TZmFmSg==",
"dev": true,
"engines": {
"node": ">=10.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.1.0"
}
},
"node_modules/postcss-functions": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
@ -5372,6 +5389,13 @@
}
}
},
"postcss-100vh-fix": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/postcss-100vh-fix/-/postcss-100vh-fix-1.0.2.tgz",
"integrity": "sha512-t7vqk9AfjI4fXmWlQCEiMZFFhi1hro4WlECINI1TV6Qh1XapUJE++gCmNr95F5Hen/+bz1OmO+SiSB9TZmFmSg==",
"dev": true,
"requires": {}
},
"postcss-functions": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",

1
package.json

@ -15,6 +15,7 @@
"devDependencies": {
"autoprefixer": "^10.2.4",
"postcss": "^8.2.6",
"postcss-100vh-fix": "^1.0.2",
"tailwindcss": "^2.0.3"
}
}

10
postcss.config.js

@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

14
styles/Page.module.css

@ -0,0 +1,14 @@
.frame {
@apply w-full;
@apply relative;
min-height: 100vh;
min-height: var(--app-height) !important;
}
@media (prefers-color-scheme: dark) {
.frame {
@apply bg-dark-primary;
@apply text-white;
}
}

2
styles/globals.css

@ -2,6 +2,8 @@ html,
body {
padding: 0;
margin: 0;
min-height: 100vh;
position: relative;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

Loading…
Cancel
Save