GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-12 19:02:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

style responsive design

Browse Source
This commit is contained in:
Aykut Saraç 2022-12-12 10:52:20 +03:00
parent 4d0386b32e
commit f8a8747775
3 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/constants/globalStyle.ts
View File

@ -23,17 +23,13 @@ const GlobalStyle = createGlobalStyle`
font-weight: 400;
font-size: 16px;
height: 100%;
background-color: #000000;
opacity: 1;
background-image: radial-gradient(#414141 0.5px, #000000 0.5px);
background-size: 10px 10px;
@media only screen and (min-width: 768px) {
background-color: #000000;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg fill-opacity='0.22'%3E%3Ccircle fill='%23000000' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%23110718' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%23220e30' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%23331447' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23441b5f' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%23552277' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg fill-opacity='0.3'%3E%3Ccircle fill='%23000000' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%23110718' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%23220e30' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%23331447' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23441b5f' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%23552277' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
@media only screen and (max-width: 768px) {
background-position: right;
}
}

6
src/containers/Home/index.tsx
View File

@ -289,8 +289,10 @@ const SponsorSection = () => (
const Footer = () => (
<Styles.StyledFooter>
<Styles.StyledFooterText>
© <img width="100" src="assets/icon.png" alt="icon" loading="lazy" />
{new Date().getFullYear()} - {pkg.version}
<img width="120" src="assets/icon.png" alt="icon" loading="lazy" />
<div>
© {new Date().getFullYear()} JSON Crack - {pkg.version}
</div>
</Styles.StyledFooterText>
<Styles.StyledIconLinks>
<Styles.StyledNavLink

28
src/containers/Home/styles.tsx
View File

@ -4,6 +4,10 @@ import styled from "styled-components";
export const StyledButtonWrapper = styled.div`
display: flex;
gap: 18px;
@media only screen and (max-width: 768px) {
display: none;
}
`;
export const StyledTwitterQuote = styled.div`
@ -191,19 +195,14 @@ export const StyledSponsorButton = styled(Button)<{ isBlue?: boolean }>`
color: white;
}
}
@media only screen and (max-width: 768px) {
display: ${({ isBlue }) => isBlue && "none"};
}
`;
export const StyledFeaturesSection = styled.section`
max-width: 60%;
margin: 0 auto;
padding: 0 3%;
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: 0 auto;
max-width: 60%;
justify-content: center;
grid-template-columns: repeat(2, 40%);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 60px;
grid-row-gap: 60px;
@ -211,6 +210,7 @@ export const StyledFeaturesSection = styled.section`
@media only screen and (max-width: 768px) {
flex-direction: column;
max-width: 80%;
display: flex;
}
`;
@ -271,7 +271,7 @@ export const StyledSection = styled.section<{ reverse?: boolean }>`
width: 100%;
}
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 1200px) {
flex-direction: ${({ reverse }) => (reverse ? "column-reverse" : "column")};
max-width: 80%;
}
@ -294,8 +294,7 @@ export const StyledSectionArea = styled.div`
width: 100%;
align-items: center;
h2,
p {
h2 {
text-align: center;
}
}
@ -343,7 +342,6 @@ export const StyledPreviewSection = styled.section`
@media only screen and (max-width: 768px) {
display: none;
max-width: 80%;
}
`;
@ -367,8 +365,8 @@ export const StyledFooter = styled.footer`
export const StyledFooterText = styled.p`
display: flex;
align-items: center;
gap: 5px;
flex-direction: column;
gap: 20px;
color: #b4b4b4;
`;