CarGDev/udlbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Tom Heaton
2024-06-05 23:58:58 +01:00
parent def3e5234b
commit 03c92541ad
27 changed files with 24481 additions and 23650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/Footer/FooterElements.jsx
View File

@@ -1,11 +1,11 @@
import styled from 'styled-components'
import {Link} from 'react-router-dom'
import { Link } from "react-router-dom";
import styled from "styled-components";
export const FooterContainer = styled.footer`
export const FooterContainer = styled.footer`
background-color: #101522;
`
`;
export const FooterWrap = styled.div`
export const FooterWrap = styled.div`
padding: 48x 24px;
display: flex;
flex-direction: column;
@@ -13,25 +13,25 @@ export const FooterWrap = styled.div`
align-items: center;
max-width: 1100px;
margin: 0 auto;
`
`;
export const FooterLinksContainer = styled.div`
export const FooterLinksContainer = styled.div`
display: flex;
justify-content: center;
@media screen and (max-width: 820px){
@media screen and (max-width: 820px) {
padding-top: 32px;
}
`
`;
export const FooterLinksWrapper = styled.div`
export const FooterLinksWrapper = styled.div`
display: flex;
@media screen and (max-width: 820px){
@media screen and (max-width: 820px) {
flex-direction: column;
}
`
`;
export const FooterLinkItems = styled.div`
export const FooterLinkItems = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
@@ -41,17 +41,17 @@ export const FooterLinkItems = styled.div`
box-sizing: border-box;
color: #fff;
@media screen and (max-width: 420px){
@media screen and (max-width: 420px) {
margin: 0;
padding: 10px;
width: 100%;
}
`
`;
export const FooterLinkTitle = styled.h1`
export const FooterLinkTitle = styled.h1`
font-size: 14px;
margin-bottom: 16px ;
`
margin-bottom: 16px;
`;
export const FooterLink = styled(Link)`
color: #ffffff;
@@ -59,43 +59,43 @@ export const FooterLink = styled(Link)`
margin-bottom: 0.5rem;
font-size: 14px;
&:hover{
&:hover {
color: #01bf71;
transition: 0.3s ease-in-out;
}
`
`;
export const SocialMedia = styled.section`
export const SocialMedia = styled.section`
max-width: 1000px;
width: 100%;
`
`;
export const SocialMediaWrap = styled.div`
export const SocialMediaWrap = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1100px;
margin: 20px auto 0 auto ;
max-width: 1100px;
margin: 20px auto 0 auto;
@media screen and (max-width: 820px){
@media screen and (max-width: 820px) {
flex-direction: column;
}
`
`;
export const SocialAttrWrap = styled.div`
export const SocialAttrWrap = styled.div`
color: #fff;
display: flex;
justify-content: center;
align-items: center;
max-width: 1100px;
margin: 10px auto 0 auto ;
max-width: 1100px;
margin: 10px auto 0 auto;
@media screen and (max-width: 820px){
@media screen and (max-width: 820px) {
flex-direction: column;
}
`
`;
export const SocialLogo = styled(Link)`
export const SocialLogo = styled(Link)`
color: #fff;
justify-self: start;
cursor: pointer;
@@ -108,35 +108,35 @@ export const SocialLogo = styled(Link)`
@media screen and (max-width: 768px) {
font-size: 20px;
}
`
`;
export const WebsiteRights = styled.small`
color: #fff ;
margin-bottom: 8px ;
`
export const WebsiteRights = styled.small`
color: #fff;
margin-bottom: 8px;
`;
export const SocialIcons = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
width: 60px;
margin-bottom: 8px ;
`
margin-bottom: 8px;
`;
export const SocialIconLink = styled.a`
export const SocialIconLink = styled.a`
color: #fff;
font-size: 24px;
`
`;
export const FooterImgWrap = styled.div`
export const FooterImgWrap = styled.div`
max-width: 555px;
height: 100%;
`
`;
export const FooterImg = styled.img`
width: 100%;
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
width: 100%;
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
`;