mirror of https://github.com/fantasticit/think.git
fix: fix body height
This commit is contained in:
parent
180eec9c19
commit
c932af5d0a
|
@ -1,16 +0,0 @@
|
||||||
import { useEffect } from 'react';
|
|
||||||
|
|
||||||
export function useSafari100vh() {
|
|
||||||
useEffect(() => {
|
|
||||||
const appHeight = () => {
|
|
||||||
const doc = document.documentElement;
|
|
||||||
doc.style.setProperty('--app-height', `${window.innerHeight}px`);
|
|
||||||
};
|
|
||||||
window.addEventListener('resize', appHeight);
|
|
||||||
appHeight();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('resize', appHeight);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
}
|
|
|
@ -1,13 +1,11 @@
|
||||||
import type { AppProps } from 'next/app';
|
import type { AppProps } from 'next/app';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import { useSafari100vh } from 'hooks/use-safari-100vh';
|
|
||||||
import { useTheme } from 'hooks/use-theme';
|
import { useTheme } from 'hooks/use-theme';
|
||||||
import 'viewerjs/dist/viewer.css';
|
import 'viewerjs/dist/viewer.css';
|
||||||
import 'styles/globals.scss';
|
import 'styles/globals.scss';
|
||||||
import 'tiptap/styles/index.scss';
|
import 'tiptap/styles/index.scss';
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps) {
|
function MyApp({ Component, pageProps }: AppProps) {
|
||||||
useSafari100vh();
|
|
||||||
useTheme();
|
useTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -5,8 +5,9 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
body,
|
||||||
body {
|
html {
|
||||||
|
height: 100%; /* Fill the window */
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@ -16,13 +17,8 @@ html:focus-within {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Set core body defaults */
|
|
||||||
body {
|
body {
|
||||||
height: 100vh;
|
margin: 0;
|
||||||
/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
|
|
||||||
height: var(--app-height);
|
|
||||||
line-height: 1.5;
|
|
||||||
text-rendering: optimizespeed;
|
|
||||||
|
|
||||||
/* stylelint-disable-next-line selector-id-pattern */
|
/* stylelint-disable-next-line selector-id-pattern */
|
||||||
> div#__next {
|
> div#__next {
|
||||||
|
@ -84,8 +80,8 @@ select {
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
transition-duration: .01ms !important;
|
transition-duration: 0.01ms !important;
|
||||||
animation-duration: .01ms !important;
|
animation-duration: 0.01ms !important;
|
||||||
animation-iteration-count: 1 !important;
|
animation-iteration-count: 1 !important;
|
||||||
scroll-behavior: auto !important;
|
scroll-behavior: auto !important;
|
||||||
}
|
}
|
||||||
|
@ -98,8 +94,8 @@ select {
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-radius: .5rem;
|
border-radius: 0.5rem;
|
||||||
transition: all .2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
*:hover {
|
*:hover {
|
||||||
|
|
Loading…
Reference in New Issue