Aarni Halinen
92 lines
1.7 KiB
TypeScript
92 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { colors } from "@theme/colors";
|
|
|
|
const Section = styled.section`
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
padding: 2rem 1rem 2rem;
|
|
|
|
&.sectionBg-darkBlue {
|
|
color: ${colors.white};
|
|
background-color: ${colors.darkBlue};
|
|
a:hover {
|
|
color: ${colors.white};
|
|
}
|
|
}
|
|
|
|
&.sectionBg-lightBlue {
|
|
color: ${colors.darkBlue};
|
|
background-color: ${colors.lightBlue};
|
|
a:hover {
|
|
color: ${colors.white};
|
|
}
|
|
}
|
|
|
|
&.sectionBg-black {
|
|
color: ${colors.white};
|
|
background-color: ${colors.black};
|
|
a:hover {
|
|
color: ${colors.white};
|
|
}
|
|
}
|
|
|
|
&.sectionBg-grey1 {
|
|
color: ${colors.white};
|
|
background-color: ${colors.grey1};
|
|
a:hover {
|
|
color: ${colors.white};
|
|
}
|
|
}
|
|
|
|
&.sectionBg-grey2 {
|
|
color: ${colors.white};
|
|
background-color: ${colors.grey2};
|
|
a:hover {
|
|
color: ${colors.white};
|
|
}
|
|
}
|
|
|
|
&.sectionBg-orange1 {
|
|
color: ${colors.white};
|
|
background-color: ${colors.orange1};
|
|
}
|
|
|
|
&.sectionBg-orange2 {
|
|
color: ${colors.white};
|
|
background-color: ${colors.orange2};
|
|
a:hover {
|
|
color: ${colors.blue1};
|
|
}
|
|
}
|
|
|
|
&.sectionBg-blue1 {
|
|
color: ${colors.white};
|
|
background-color: ${colors.blue1};
|
|
a:hover {
|
|
color: ${colors.white};
|
|
}
|
|
}
|
|
|
|
&.sectionBg-lightTurquoise {
|
|
color: ${colors.darkBlue};
|
|
background-color: ${colors.lightTurquoise};
|
|
a:hover {
|
|
color: ${colors.white};
|
|
}
|
|
}
|
|
|
|
&.sectionBg-green1 {
|
|
color: ${colors.darkBlue};
|
|
background-color: ${colors.green1};
|
|
}
|
|
`;
|
|
|
|
const PageSection: React.FC = (props) => (
|
|
<Section {...props} />
|
|
);
|
|
|
|
export default PageSection;
|