toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-18 22:11:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: update styles

Browse Source
This commit is contained in:
JimmFly 2022-08-08 12:16:05 +08:00
parent 478e3d79d3
commit c5e8b0a251
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
apps/venus/src/app/index.tsx
View File

@ -52,7 +52,7 @@ const Alternatives = styled(Box)<{ width: string }>(({ width }) => ({
height: '128px', height: '128px',
transform: 'translateY(-8px)', transform: 'translateY(-8px)',
overflowY: 'hidden', overflowY: 'hidden',
'@media (max-width: 768px)': { '@media (max-width: 1020px)': {
width, width,
height: '48px', height: '48px',
transform: 'translateY(0)', transform: 'translateY(0)',
@ -64,7 +64,7 @@ const Alternatives = styled(Box)<{ width: string }>(({ width }) => ({
left: '0%', left: '0%',
top: '0%', top: '0%',
lineHeight: '96px', lineHeight: '96px',
'@media (max-width: 768px)': { '@media (max-width: 1020px)': {
lineHeight: '32px', lineHeight: '32px',
}, },
}, },
@ -109,7 +109,7 @@ const Product = () => {
); );
const maxWidth = useMemo(() => _alternativesSize[idx], [idx]); const maxWidth = useMemo(() => _alternativesSize[idx], [idx]);
const [active, setActive] = useState(false); const [active, setActive] = useState(false);
const matches = useMediaQuery('(max-width: 768px)'); const matches = useMediaQuery('(max-width: 1020px)');
useEffect(() => { useEffect(() => {
const handle = setInterval(() => { const handle = setInterval(() => {
@ -128,7 +128,14 @@ const Product = () => {
return ( return (
<Alternatives <Alternatives
width={`${maxWidth}em`} width={`${maxWidth}em`}
sx={{ margin: 'auto', marginRight: '1em', transition: 'width .5s' }} sx={{
margin: 'auto',
marginRight: '1em',
transition: 'width .5s',
'@media (max-width: 1020px)': {
width: '8em',
},
}}
> >
<Box <Box
className={clsx( className={clsx(
@ -144,7 +151,7 @@ const Product = () => {
color: '#06449d', color: '#06449d',
textAlign: 'right', textAlign: 'right',
overflow: 'hidden', overflow: 'hidden',
'@media (max-width: 768px)': { '@media (max-width: 1020px)': {
fontSize: '32px', fontSize: '32px',
}, },
}} }}
@ -162,7 +169,7 @@ const Product = () => {
marginTop: '96px', marginTop: '96px',
textAlign: 'right', textAlign: 'right',
overflow: 'hidden', overflow: 'hidden',
'@media (max-width: 768px)': { '@media (max-width: 1020px)': {
marginTop: '48px', marginTop: '48px',
}, },
}} }}
@ -173,7 +180,7 @@ const Product = () => {
sx={{ sx={{
color: '#06449d', color: '#06449d',
overflow: 'hidden', overflow: 'hidden',
'@media (max-width: 768px)': { '@media (max-width: 1020px)': {
fontSize: '32px', fontSize: '32px',
}, },
}} }}
@ -191,7 +198,7 @@ const AffineImage = styled('img')({
}); });
const GitHub = (props: { center?: boolean; flat?: boolean }) => { const GitHub = (props: { center?: boolean; flat?: boolean }) => {
const matches = useMediaQuery('(max-width: 768px)'); const matches = useMediaQuery('(max-width: 1020px)');
return ( return (
<Button <Button
@ -205,7 +212,7 @@ const GitHub = (props: { center?: boolean; flat?: boolean }) => {
sx: { sx: {
margin: 'auto 1em', margin: 'auto 1em',
fontSize: '24px', fontSize: '24px',
'@media (max-width: 768px)': { '@media (max-width: 1020px)': {
fontSize: '16px', fontSize: '16px',
}, },
...(props.flat ...(props.flat
@ -235,7 +242,7 @@ const GitHub = (props: { center?: boolean; flat?: boolean }) => {
}; };
export function App() { export function App() {
const matches = useMediaQuery('(max-width: 768px)'); const matches = useMediaQuery('(max-width: 1020px)');
return ( return (
<CssVarsProvider> <CssVarsProvider>
@ -261,7 +268,7 @@ export function App() {
padding: matches ? '0' : '0 0.5em', padding: matches ? '0' : '0 0.5em',
':hover': { backgroundColor: 'unset' }, ':hover': { backgroundColor: 'unset' },
fontSize: '24px', fontSize: '24px',
'@media (max-width: 768px)': { '@media (max-width: 1020px)': {
fontSize: '16px', fontSize: '16px',
}, },
}} }}
@ -285,7 +292,7 @@ export function App() {
padding: matches ? '0' : '0 0.5em', padding: matches ? '0' : '0 0.5em',
':hover': { backgroundColor: 'unset' }, ':hover': { backgroundColor: 'unset' },
fontSize: '24px', fontSize: '24px',
'@media (max-width: 768px)': { '@media (max-width: 1020px)': {
fontSize: '16px', fontSize: '16px',
}, },
}} }}
@ -314,7 +321,7 @@ export function App() {
fontWeight={900} fontWeight={900}
sx={{ sx={{
marginRight: '0.25em', marginRight: '0.25em',
'@media (max-width: 768px)': { '@media (max-width: 1020px)': {
fontSize: '32px', fontSize: '32px',
marginRight: 0, marginRight: 0,
}, },
@ -326,7 +333,7 @@ export function App() {
fontSize="96px" fontSize="96px"
fontWeight={900} fontWeight={900}
sx={{ sx={{
'@media (max-width: 768px)': { '@media (max-width: 1020px)': {
fontSize: '32px', fontSize: '32px',
}, },
}} }}
@ -359,9 +366,10 @@ export function App() {
sx={{ sx={{
color: '#06449d', color: '#06449d',
margin: 'auto', margin: 'auto',
'@media (max-width: 768px)': { '@media (max-width: 1020px)': {
fontSize: '32px', fontSize: '32px',
}, },
'@media (max-width: 420px)': {},
}} }}
> >
Alternative Alternative