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