Commit d3b041d5 authored by David Rhoderick's avatar David Rhoderick
Browse files

Fixing featured styles.

parent 1d01a338
......@@ -4,11 +4,12 @@ import Link from "@frontity/components/link";
const Featured = ({ text, dynamicText, state, color, img }) => {
return (
<Link link="#">
<FeatureContainer theme={state.theme}>
<TextOnTheLeft color={color} theme={state.theme}>
<FeatureContainer theme={state.theme}>
<Link link="#">
<TitleContainer color={color} theme={state.theme}>
<h2>{text}</h2>
</TextOnTheLeft>
</TitleContainer>
<ItemsDetails img={img} theme={state.theme}>
<ItemsDetailsMobileText color={color} theme={state.theme}>
<h3>Read more about this project</h3>
......@@ -17,39 +18,37 @@ const Featured = ({ text, dynamicText, state, color, img }) => {
<h3>{dynamicText}</h3>
</ItemsDetailsText>
</ItemsDetails>
</FeatureContainer>
</Link>
</Link>
</FeatureContainer>
);
};
export default connect(Featured);
const FeatureContainer = styled.div`
width: 100%;
height: 40vh;
display: grid;
grid-template-column: repeat (3, 1fr);
padding: 0 1rem 1rem;
position: relative;
z-index: 100;
background: white;
padding-bottom: 1rem;
${(props) => props.theme.breakPoints.md} {
a {
display: flex;
flex-direction: column;
${'' /* height: 40vh; */}
${(props) => props.theme.breakPoints.md} {
flex-direction: column;
}
}
`;
const TextOnTheLeft = styled.div`
margin-left: 1rem;
grid-column: 1/2;
const TitleContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
font-size: 1.7rem;
width: 50%;
background: ${(props) => props.color};
h2 {
......@@ -58,46 +57,43 @@ const TextOnTheLeft = styled.div`
}
${(props) => props.theme.breakPoints.md} {
flex-order: 1;
align-self: center;
width: 95%;
height: 20%;
margin: 0;
width: 100%;
padding: 1rem 0;
}
`;
const ItemsDetails = styled.div`
margin-right: 1rem;
grid-column: 2/4;
display: flex;
flex-direction: column;
width: 50%;
padding: 12.5% 0;
align-items: center;
justify-content: center;
background-image: url(${(props) => props.img});
background-repeat: no-repeat;
background-size: cover;
bacground-position: center;
background-position: center;
${(props) => props.theme.breakPoints.md} {
margin: 0;
align-self: center;
flex-order: 2;
width: 95%;
height: 80%;
padding-top: 33%;
padding-bottom: 0;
width: 100%;
}
`;
const ItemsDetailsMobileText = styled.div`
display: none;
width: 100%;
heigth: 20%;
color: ${(props) => props.color};
position: absolute;
bottom: 20%;
left: 0;
background: white;
${(props) => props.theme.breakPoints.md} {
display: flex;
width: 100%;
padding: 0.5rem;
color: ${(props) => props.color};
margin-top: auto;
margin-bottom: 0;
background: white;
justify-content: center;
align-items: center;
text-align: center;
......@@ -106,8 +102,7 @@ const ItemsDetailsMobileText = styled.div`
`;
const ItemsDetailsText = styled.div`
width: 100%;
heigth: 10%;
min-width: 100%;
display: flex;
justify-content: center;
text-align: center;
......@@ -115,11 +110,9 @@ const ItemsDetailsText = styled.div`
color: ${(props) => props.color};
${(props) => props.theme.breakPoints.md} {
position: absolute;
bottom: 0;
left: 2.5%;
width: 95%;
height: 20%;
margin-top: 0;
margin-bottom: 0;
padding: .5rem 0;
background: ${(props) => props.color};
color: white;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment