mindhas403/blueskychan.dev
1
0
Fork 0
mirror of https://github.com/blueskychan-dev/blueskychan.dev.git synced 2025-07-08 07:41:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixing scrollbar and all support for smaller display device.

Browse source
This commit is contained in:
Phapoom Saksri 2024-07-27 22:06:16 +07:00
parent b05b10073a
commit dca873e930
3 changed files with 12 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/pages/_app.jsx
View file

@ -26,6 +26,7 @@ function MyApp({ Component, pageProps }) {
}
}, [stright])
return <Component {...pageProps} />
}

5
src/pages/post/[slug].jsx
View file

@ -30,15 +30,14 @@ export async function getStaticProps({ params: { slug } }) {
export default function PostPage({ frontmatter, content }) {
const postTags = frontmatter.tags.map((tag) => (
<div
className="inline-block border rounded-md font-bold text-lg mr-1 py-0.5 px-2.5 overflow-y-auto"
className="inline-block border rounded-md font-bold text-lg mr-1 py-0.5 px-2.5"
key={tag.toString()}
>
{tag}
</div>
))
const proseClass =
"prose p-4 prose-invert prose-neutral mx-auto bg-gray-700/50 backdrop-blue-md backdrop-blur-md h-100 overflow-y-auto"
"prose p-4 prose-invert prose-neutral mx-auto bg-gray-700/50 backdrop-blue-md backdrop-blur-md h-100 overflow-y-auto h-screen"
return (
<>
<Head>

9
src/styles/globals.css
View file

@ -20,5 +20,14 @@ body {
@media only screen and (orientation: portrait) {
body {
--background-image: url("/mobile.jpg");
overflow: auto;
}
}
/* In case if device height is less than 900px */
/* Notice: This design for small screen and mobile devices, scroll bar still be shown, will fix in next commit! <3 */
@media only screen and (max-height: 900px) {
body {
overflow: auto;
}
}