The footer

packages/frontity-org-theme/src/components/footer.tsx

@@ -0,0 +1,89 @@
+import { connect, styled } from "frontity";
+import { Connect } from "frontity/types";
+import React from "react";
+
+import FrontityOrg from "../../types";
+import { addAlpha } from "../utils";
+
+const Footer: React.FC<Connect<FrontityOrg>> = ({ state, libraries }) => {
+  const data = state.source.get("/wp_template_part/footer/");
+  const footer = state.source["wp_template_part"][data.id];
+  const Html2React = libraries.html2react.Component;
+
+  const StyledDiv = styled.div`
+    a {
+      color: ${addAlpha(state.theme.colors.primary, 0.4)};
+      &:hover {
+        color: ${state.theme.colors.frontity};
+      }
+    }
+
+    h5 {
+      color: ${state.theme.colors.primary};
+      letter-spacing: 1.5px;
+      line-height: 21px;
+      margin-top: 0;
+      margin-bottom: 9px;
+    }
+
+    & .wp-block-group__inner-container {
+      max-width: 1080px;
+      margin: auto;
+    }
+
+    .footer-links.wp-block-columns {
+      padding-top: 80px;
+      padding-bottom: 80px;
+      margin-bottom: 0;
+
+      display: grid;
+      grid-template-columns: 1fr repeat(5, auto);
+
+      .wp-block-column {
+        line-height: 24px;
+        margin-bottom: 35px;
+      }
+    }
+
+    .footer-bottom-text.wp-block-columns {
+      display: grid;
+      grid-template-columns: 170px 1fr auto auto;
+
+      margin-top: 20px;
+
+      @media screen and (max-width: 700px) {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      .wp-block-column {
+        margin-bottom: 15px;
+      }
+    }
+
+    /* Small screens - 2 columns */
+    @media screen and (max-width: 800px) {
+      .footer-links.wp-block-columns {
+        display: grid;
+        grid-template-rows: 70px repeat(3, auto);
+        grid-template-columns: 1fr 1fr;
+
+        padding-top: 25px;
+        padding-bottom: 0px;
+
+        /* Keep the 2nd cell empty */
+        .wp-block-column:first-of-type {
+          grid-column-start: 1;
+          grid-column-end: 3;
+        }
+      }
+    }
+  `;
+
+  return (
+    <StyledDiv>
+      <Html2React html={footer.content.rendered} />
+    </StyledDiv>
+  );
+};
+
+export default connect(Footer);

packages/frontity-org-theme/src/components/index.tsx

@@ -3,6 +3,7 @@ import { Connect } from "frontity/types";
 import React from "react";
 
 import FrontityOrg from "../../types";
+import Footer from "./footer";
 import Page from "./page";
 import FontFace from "./styles/font-face";
 import globalStyles from "./styles/global-styles";
@@ -24,6 +25,7 @@ const Theme: React.FC<Connect<FrontityOrg>> = ({ state }) => {
           <a href="/common-styles/">Visit /common-styles/</a>
         </>
       )}
+      <Footer />
     </>
   );
 };

packages/frontity-org-theme/src/components/logo.tsx

@@ -6,21 +6,31 @@ import FrontityOrg from "../../types";
 
 interface Props {
   fill: string;
-  opacity: number;
+  opacity?: number;
+  width?: number;
+  height?: number;
 }
 
 const Logo: React.FC<Connect<FrontityOrg, Props>> = ({
   state,
   fill,
-  opacity,
+  opacity = 0.6,
+  width = 14,
+  height = 11,
   ...props
 }) => {
   return (
-    <svg width="14" height="11" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 11"
+      {...props}
+    >
       <g
         fill={fill || state.theme.colors.wall}
         fillRule="evenodd"
-        opacity={opacity || 0.6}
+        opacity={opacity}
       >
         <path d="M7.681 5.645l.009.008L1.983 11 0 9.142l4.042-3.787L.31 1.858 2.293 0 8 5.347l-.319.298z" />
         <path d="M13.681 5.645l.009.008L7.983 11 6 9.142l4.042-3.787L6.31 1.858 8.293 0 14 5.347l-.319.298z" />

packages/frontity-org-theme/src/processors/horizontal-separator.tsx

@@ -17,8 +17,8 @@ export const horizontalSeparator: Processor<
   processor: ({ node, state }) => {
     if (node.type === "element") {
       node.props.css = css`
-        ${node.props.css}
-        border-bottom-color: ${addAlpha(state.theme.colors.primary, 0.12)};
+        border-color: ${addAlpha(state.theme.colors.primary, 0.12)};
+        max-width: 1080px;
       `;
     }