Info: create wrapper around body sections

This commit is contained in:
rektdeckard
2020-07-29 12:13:47 -04:00
parent 541dce65fb
commit 0ef8f87456
3 changed files with 66 additions and 4 deletions

View File

@@ -0,0 +1,49 @@
section.info {
margin: 72px auto 96px;
width: 66.67%;
}
h2 {
font-size: 48px;
font-weight: 400;
line-height: 60px;
margin: 0 0 96px;
}
h4 {
font-weight: 600;
font-size: 20px;
line-height: 40px;
margin: 0 0 8px;
}
p {
margin-top: 0;
}
ul {
margin: 0 0 32px;
list-style: circle outside;
padding-left: 32px;
}
.feature {
display: flex;
margin-bottom: 96px;
}
.feature h3 {
flex: 1;
margin: 0;
padding-right: 40px;
font-size: 32px;
font-weight: 400;
line-height: 40px;
}
.feature-contents {
flex: 3;
padding-top: 6px;
font-size: 20px;
line-height: 30px;
}

View File

@@ -0,0 +1,10 @@
import React from "react";
import "./Info.css";
type InfoProps = { id: string, role?: string };
const Info: React.FC<InfoProps> = ({ id, role, children }) => {
return <section id={id} role={role} className="info">{children}</section>;
};
export default Info;

View File

@@ -1,10 +1,13 @@
export { default as App } from "./App/App"; export { default as App } from "./App/App";
export { default as Header } from "./Header/Header"; export { default as NavBar } from "./NavBar/NavBar";
export { default as IconGrid } from "./IconGrid/IconGrid"; export { default as Panorama } from "./Panorama/Panorama";
export { default as IconGridUV } from "./IconGrid/IconGridUV"; export { default as Info } from "./Info/Info";
export { default as Toolbar } from "./Toolbar/Toolbar"; export { default as Toolbar } from "./Toolbar/Toolbar";
export { default as IconGrid } from "./IconGrid/IconGrid";
export { default as IconGridStatic } from "./IconGrid/IconGridStatic";
export { default as IconGridUV } from "./IconGrid/IconGridUV";
export { default as ColorInput } from "./ColorInput/ColorInput"; export { default as ColorInput } from "./ColorInput/ColorInput";
export { default as SearchInput } from "./SearchInput/SearchInput"; export { default as SearchInput } from "./SearchInput/SearchInput";
export { default as SizeInput } from "./SizeInput/SizeInput"; export { default as SizeInput } from "./SizeInput/SizeInput";
export { default as StyleInput } from "./StyleInput/StyleInput"; export { default as StyleInput } from "./StyleInput/StyleInput";
export { default as Footer } from "./Footer/Footer"; export { default as Footer } from "./Footer/Footer";