feat: 适配小屏自适应
This commit is contained in:
Ivan Li
parent
ad881bde93
commit
6f959b1d30
|
|
@ -1,8 +1,14 @@
|
|||
.wrapper {
|
||||
@apply bg-green-400 text-white min-h-screen;
|
||||
@apply absolute top-0 left-0 right-0 bottom-0 sm:static;
|
||||
@apply -translate-x-full transform transition-transform sm:transition-none sm:translate-x-0;
|
||||
:global(.dark) & {
|
||||
@apply bg-gray-800 text-gray-400;
|
||||
}
|
||||
|
||||
&.focusOpen {
|
||||
@apply translate-x-0;
|
||||
}
|
||||
}
|
||||
.sidebar {
|
||||
@apply overflow-hidden flex flex-col fixed top-0;
|
||||
|
|
@ -11,8 +17,9 @@
|
|||
}
|
||||
|
||||
.avatar {
|
||||
@apply w-16 h-16;
|
||||
@apply md:w-36 md:h-36 rounded-full;
|
||||
@apply w-36 h-36 rounded-full;
|
||||
@apply sm:w-16 sm:h-16;
|
||||
@apply md:w-36 md:h-36;
|
||||
@apply mx-auto md:my-8 flex-none;
|
||||
|
||||
:global(.dark) & {
|
||||
|
|
@ -21,14 +28,14 @@
|
|||
}
|
||||
|
||||
.name {
|
||||
@apply md:text-3xl md:tracking-wide font-mono;
|
||||
@apply sm:text-base md:text-3xl text-3xl md:tracking-wide font-mono;
|
||||
@apply md:my-8 my-4 flex-none select-all;
|
||||
}
|
||||
.nav {
|
||||
@apply my-auto text-left self-center;
|
||||
}
|
||||
.navItem {
|
||||
@apply leading-8 md:text-lg cursor-pointer my-2;
|
||||
@apply leading-8 md:text-lg sm:text-base text-lg cursor-pointer my-2;
|
||||
@apply tracking-widest;
|
||||
small {
|
||||
@apply text-xs md:inline hidden;
|
||||
|
|
@ -1,19 +1,28 @@
|
|||
import React, { FC } from "react";
|
||||
import styles from "./global-layout.module.css";
|
||||
import Image from "next/image";
|
||||
import React, { FC, MouseEventHandler } from "react";
|
||||
import styles from "./global-sidebar.module.css";
|
||||
import Link from "next/link";
|
||||
import classnames from 'classnames';
|
||||
import classnames from "classnames";
|
||||
|
||||
const fullName = `${process.env.NEXT_PUBLIC_FIRST_NAME} ${process.env.NEXT_PUBLIC_LAST_NAME}`;
|
||||
|
||||
interface Props {
|
||||
className: string;
|
||||
focusOpen?: boolean;
|
||||
onClick?: MouseEventHandler;
|
||||
}
|
||||
|
||||
export const GlobalSidebar: FC<Props> = ({className}) => {
|
||||
|
||||
export const GlobalSidebar: FC<Props> = ({
|
||||
className,
|
||||
focusOpen = false,
|
||||
onClick,
|
||||
}) => {
|
||||
return (
|
||||
<div className={classnames(className, styles.wrapper)}>
|
||||
<div
|
||||
className={classnames(className, styles.wrapper, {
|
||||
[styles.focusOpen]: focusOpen,
|
||||
})}
|
||||
onClick={onClick}
|
||||
>
|
||||
<aside className={classnames(className, styles.sidebar)}>
|
||||
<img className={styles.avatar} src="/images/avatar.png" />
|
||||
<h2 className={styles.name}>{fullName}</h2>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,13 @@
|
|||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@apollo/client": "^3.3.16",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.35",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
||||
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||
"apollo-link-scalars": "^2.1.3",
|
||||
"babel-plugin-superjson-next": "^0.3.0",
|
||||
"classnames": "^2.2.6",
|
||||
"clsx": "^1.1.1",
|
||||
"date-fns": "^2.22.1",
|
||||
"graphql": "^15.5.0",
|
||||
"graphql-scalars": "^1.10.0",
|
||||
|
|
@ -1227,6 +1231,51 @@
|
|||
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "0.2.35",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
|
||||
"integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==",
|
||||
"hasInstallScript": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-svg-core": {
|
||||
"version": "1.2.35",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
|
||||
"integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.35"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||
"version": "5.15.3",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
|
||||
"integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.35"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/react-fontawesome": {
|
||||
"version": "0.1.14",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
|
||||
"integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
||||
"react": ">=16.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullhuman/postcss-purgecss": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
|
||||
|
|
@ -3499,6 +3548,14 @@
|
|||
"mimic-response": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
|
||||
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
|
||||
|
|
@ -10611,6 +10668,35 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "0.2.35",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
|
||||
"integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
|
||||
},
|
||||
"@fortawesome/fontawesome-svg-core": {
|
||||
"version": "1.2.35",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
|
||||
"integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.35"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "5.15.3",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
|
||||
"integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.35"
|
||||
}
|
||||
},
|
||||
"@fortawesome/react-fontawesome": {
|
||||
"version": "0.1.14",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
|
||||
"integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
|
||||
"requires": {
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"@fullhuman/postcss-purgecss": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
|
||||
|
|
@ -12531,6 +12617,11 @@
|
|||
"mimic-response": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"clsx": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
|
||||
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
|
||||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -11,9 +11,13 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@apollo/client": "^3.3.16",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.35",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
||||
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||
"apollo-link-scalars": "^2.1.3",
|
||||
"babel-plugin-superjson-next": "^0.3.0",
|
||||
"classnames": "^2.2.6",
|
||||
"clsx": "^1.1.1",
|
||||
"date-fns": "^2.22.1",
|
||||
"graphql": "^15.5.0",
|
||||
"graphql-scalars": "^1.10.0",
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
@apply flex;
|
||||
}
|
||||
.sidebar {
|
||||
@apply md:w-64 w-32 flex-none;
|
||||
@apply w-full md:w-64 sm:w-32 flex-none;
|
||||
}
|
||||
.primary {
|
||||
@apply flex-auto;
|
||||
@apply flex-auto w-screen min-w-0;
|
||||
@apply bg-gray-100 text-gray-700;
|
||||
:global(.dark) & {
|
||||
@apply bg-gray-700 text-gray-300;
|
||||
|
|
@ -20,4 +20,16 @@
|
|||
:global(.dark) & {
|
||||
@apply bg-gray-800;
|
||||
}
|
||||
}
|
||||
.headerBtn {
|
||||
@apply sm:hidden text-green-400;
|
||||
@apply w-4 h-4 p-0 focus:outline-none;
|
||||
|
||||
&.opened {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
& > * {
|
||||
@apply absolute;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +1,44 @@
|
|||
import "../styles/globals.css";
|
||||
import "tailwindcss/tailwind.css";
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { GlobalSidebar } from "../components/layouts/global-sidebar";
|
||||
import styles from "./_app.module.css";
|
||||
import { ApolloProvider } from "@apollo/client";
|
||||
import { useApollo } from "../commons/graphql/client";
|
||||
import { ThemeProvider, useTheme } from '../commons/theme';
|
||||
import { ThemeProvider, useTheme } from "../commons/theme";
|
||||
import { SwitchTheme } from "../components/switch-theme";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faCross,
|
||||
faHamburger,
|
||||
faTimes,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import clsx from "clsx";
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
const apolloClient = useApollo(pageProps);
|
||||
const [focusOpenSidebar, setFocusOpenSidebar] = useState(false);
|
||||
return (
|
||||
<ApolloProvider client={apolloClient}>
|
||||
<ThemeProvider>
|
||||
<div className={styles.page}>
|
||||
<GlobalSidebar className={styles.sidebar} />
|
||||
<GlobalSidebar
|
||||
className={styles.sidebar}
|
||||
focusOpen={focusOpenSidebar}
|
||||
onClick={() => setFocusOpenSidebar(false)}
|
||||
/>
|
||||
<div className={styles.primary}>
|
||||
<header className={styles.pageHeader}>
|
||||
<button
|
||||
className={clsx(styles.headerBtn, {
|
||||
[styles.opened]: focusOpenSidebar,
|
||||
})}
|
||||
onClick={() => setFocusOpenSidebar(!focusOpenSidebar)}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={focusOpenSidebar ? faTimes : faHamburger}
|
||||
/>
|
||||
</button>
|
||||
<h1>{"Ivan Li 的个人博客"}</h1>
|
||||
<div className={styles.actions}>
|
||||
<SwitchTheme />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.articleDetail {
|
||||
}
|
||||
.article {
|
||||
@apply bg-gray-50 m-2 overflow-hidden rounded-xl my-6;
|
||||
@apply bg-gray-50 md:mx-2 overflow-hidden rounded-xl my-6;
|
||||
|
||||
:global(.dark) & {
|
||||
@apply bg-gray-800;
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
& > header {
|
||||
@apply my-8 mx-4;
|
||||
h1 {
|
||||
@apply text-4xl font-medium mb-4;
|
||||
@apply text-2xl md:text-4xl font-medium mb-4;
|
||||
|
||||
:global(.dark) & {
|
||||
@apply text-gray-200;
|
||||
|
|
|
|||
Loading…
Reference in New Issue