luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #123 from JimmFly/master

Browse Source 
feat/beautify the style of the VenusContainer
This commit is contained in:
DarkSky
2022-08-09 12:31:23 +08:00
committed by GitHub
parent 808a31f19e 7596132e02
commit 1bb1938e0b
1 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
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: 1024px)': {
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: 1024px)': {
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: 1024px)');
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: 1024px)': {
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: 1024px)': {
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: 1024px)': {
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: 1024px)': {
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: 1024px)');
return ( return (
<Button <Button
@@ -204,6 +211,10 @@ const GitHub = (props: { center?: boolean; flat?: boolean }) => {
{...{ {...{
sx: { sx: {
margin: 'auto 1em', margin: 'auto 1em',
fontSize: '24px',
'@media (max-width: 1024px)': {
fontSize: '16px',
},
...(props.flat ...(props.flat
? { ? {
padding: matches ? '0' : '0 0.5em', padding: matches ? '0' : '0 0.5em',
@@ -231,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: 1024px)');
return ( return (
<CssVarsProvider> <CssVarsProvider>
@@ -256,6 +267,10 @@ export function App() {
sx={{ sx={{
padding: matches ? '0' : '0 0.5em', padding: matches ? '0' : '0 0.5em',
':hover': { backgroundColor: 'unset' }, ':hover': { backgroundColor: 'unset' },
fontSize: '24px',
'@media (max-width: 1024px)': {
fontSize: '16px',
},
}} }}
> >
AFFiNE AFFiNE
@@ -276,6 +291,10 @@ export function App() {
sx={{ sx={{
padding: matches ? '0' : '0 0.5em', padding: matches ? '0' : '0 0.5em',
':hover': { backgroundColor: 'unset' }, ':hover': { backgroundColor: 'unset' },
fontSize: '24px',
'@media (max-width: 1024px)': {
fontSize: '16px',
},
}} }}
size="lg" size="lg"
> >
@@ -302,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: 1024px)': {
fontSize: '32px', fontSize: '32px',
marginRight: 0, marginRight: 0,
}, },
@@ -314,7 +333,7 @@ export function App() {
fontSize="96px" fontSize="96px"
fontWeight={900} fontWeight={900}
sx={{ sx={{
'@media (max-width: 768px)': { '@media (max-width: 1024px)': {
fontSize: '32px', fontSize: '32px',
}, },
}} }}
@@ -347,7 +366,7 @@ export function App() {
sx={{ sx={{
color: '#06449d', color: '#06449d',
margin: 'auto', margin: 'auto',
'@media (max-width: 768px)': { '@media (max-width: 1024px)': {
fontSize: '32px', fontSize: '32px',
}, },
}} }}