diff --git a/custom/renderers/index.js b/custom/renderers/index.js index 6bc8304..64c501a 100644 --- a/custom/renderers/index.js +++ b/custom/renderers/index.js @@ -1,3 +1,3 @@ // import Foo from "./Foo"; -// export { Foo }; +export default {}; diff --git a/custom/styles.css b/custom/styles.css index 16c5900..af121af 100644 --- a/custom/styles.css +++ b/custom/styles.css @@ -2,3 +2,8 @@ display: none; visibility: hidden; } + +html { + color: #141414; + background-color: #fafafa; +} diff --git a/public/bike.png b/public/bike.png new file mode 100644 index 0000000..b379942 Binary files /dev/null and b/public/bike.png differ diff --git a/public/default.css b/public/default.css index 671bcd1..247a780 100644 --- a/public/default.css +++ b/public/default.css @@ -1,7 +1,104 @@ +/* + Default CSS & Mobile Styling +*/ + +html { + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, + helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; +} + body { - padding: 25px; - max-width: 900px; - margin: auto; + margin: 24px 24px 96px 24px; + font-size: 16px; + line-height: 24px; +} + +body::before { + background-image: url(/assets/shuttle-mobile.svg); + background-repeat: no-repeat; + background-position-x: center; + content: "Congrats! This is a boilerplate Liftoff installation. To remove this text and modify the theme CSS, go to /custom/styles.css"; + text-align: center; + padding-top: 152px; + font-size: 16px; + line-height: 24px; + font-weight: bold; + text-align: center; + color: #141414; + display: block; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; +} + +h1 { + font-size: 28px; + line-height: 32px; + margin-top: 28px; +} + +h2 { + font-size: 24px; + line-height: 28px; + margin-top: 24px; +} + +h3 { + font-size: 20px; + line-height: 24px; + margin-top: 20px; +} + +h4 { + font-size: 18px; + line-height: 20px; + margin-top: 18px; +} + +h5, +h6 { + font-size: 16px; + line-height: 18px; + margin-top: 16px; +} + +h6 { + color: #807d70; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6, +ol, +ul { + margin-bottom: 0; +} + +blockquote, +img, +pre, +hr { + margin: 32px 0; +} + +blockquote { + padding-left: 18px; + border-left: solid 6px #141414; +} + +ul, +ol { + margin-top: 32px; } ul { @@ -9,30 +106,272 @@ ul { list-style: none; } +hr { + background-color: #141414; + border: none; + height: 1px; +} + img { width: 100%; + display: block; +} + +pre { + background-color: #ebeae8; + padding: 24px; + white-space: pre-wrap; /* css-3 */ + white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ +} + +code { + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, + helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; +} + +p { + margin-top: 16px; +} + +.field-value img + img { + margin-top: -24px; +} + +.header { + margin-top: 48px; +} + +.header::after { + content: ""; + width: 72px; + height: 6px; + background-color: #141414; + margin-top: 24px; + display: block; +} + +.markdown-field > ul { + list-style: initial; +} + +.markdown-field > ol, +.markdown-field > ul { + padding-left: 24px; + font-size: 16px; + line-height: 24px; +} + +.markdown-field ol li, +.markdown-field ul li { + margin-top: 18px; +} + +.markdown-field a { + text-decoration: underline; + color: #141414; + font-weight: bold; +} + +img.attachment-image { + width: calc(100vw - 16px); + margin-left: -16px; +} + +/* + NOTE: Chrome does not currently support the ::marker selector + There's sort of a way to get the same effect with setting + rules on li:before, but multi-line list items look awkward +*/ + +.markdown-field > ol li::marker { + font-weight: bold; } .header-link, .row-link { text-decoration: none; - color: black; + color: #141414; +} + +.row-link:last-of-type > .row::after { + display: none; +} + +.row-link:last-of-type .row { + margin-bottom: 64px; } -.row { - margin: 20px 0; +.index-page .row::after { + margin: 64px auto; + content: ""; + background-color: #ebeae8; + height: 8px; + display: block; +} + +.index-page > div:last-child { + display: flex; + justify-content: space-between; + padding-top: 30px; + border-top: 4px solid #141414; } .nav-button { - padding: 5px 15px; - border: 1px solid black; - border-radius: 3px; text-decoration: none; - color: black; + color: #141414; + font-weight: bold; +} + +span.field-value:not(.markdown-field) { + display: block; + margin-top: 16px; +} + +/* Detail/Row Page */ +.row-page .nav-button { + margin: 12px 0; + display: inline-block; +} + +.row-page .nav-button::before { + content: "← "; +} + +.row-page .row:last-of-type { + margin-bottom: 64px; +} + +.row-page .attachments:first-child img { + margin-top: 0; +} + +.row-page .attachments ul { + margin: 0; +} + +@media (min-width: 768px) { + body { + margin: 64px auto 128px auto; + max-width: 640px; + font-size: 18px; + line-height: 28px; + } + + body::before { + background-position-x: left; + background-image: url(/assets/shuttle.svg); + padding-left: 74px; + padding-top: 20px; + text-align: left; + height: 68px; + } + + h1 { + font-size: 40px; + line-height: 44px; + margin-top: 40px; + } + + h2 { + font-size: 28px; + line-height: 32px; + margin-top: 28px; + } + + h3 { + font-size: 24px; + line-height: 28px; + margin-top: 24px; + } + + h4 { + font-size: 20px; + line-height: 24px; + margin-top: 20px; + } + + h5, + h6 { + font-size: 18px; + line-height: 20px; + margin-top: 18px; + } + + blockquote, + pre, + hr, + img { + margin: 48px 0; + } + + pre { + padding: 32px; + } + + p { + margin-top: 18px; + } + + img.attachment-image { + width: calc(100% + 80px); + margin-left: -40px; + } + + .row-page .nav-button { + margin: 18px 0; + } + + .markdown-field > ol, + .markdown-field > ul { + padding-left: 32px; + font-size: 18px; + line-height: 28px; + } + + span.field-value:not(.markdown-field) { + margin-top: 18px; + } + + .field-value img + img { + margin-top: -32px; + } } -@media (max-width: 768px) { +@media (min-width: 1024px) { + /* desktop */ body { - padding: 12px; + max-width: 720px; + } + + body::before { + font-size: 18px; + line-height: 28px; + } + + blockquote { + padding-left: 24px; + border-left-width: 8px; + } + + body::before { + margin-left: 0; + } + + img.attachment-image { + width: calc(100% + 192px); + margin-left: -96px; + } + + ol, + ul { + margin-top: 48px; + } + + code { + font-size: 18px; + line-height: 28px; } } diff --git a/public/shuttle-mobile.svg b/public/shuttle-mobile.svg new file mode 100644 index 0000000..8df8293 --- /dev/null +++ b/public/shuttle-mobile.svg @@ -0,0 +1,15 @@ + + + + 87B1F849-D57D-4B90-862B-2934B2C3FFF4 + Created with sketchtool. + + + + + + + + + + \ No newline at end of file diff --git a/public/shuttle.svg b/public/shuttle.svg new file mode 100644 index 0000000..e01beac --- /dev/null +++ b/public/shuttle.svg @@ -0,0 +1,15 @@ + + + + 87B1F849-D57D-4B90-862B-2934B2C3FFF4 + Created with sketchtool. + + + + + + + + + + \ No newline at end of file diff --git a/public/train.png b/public/train.png new file mode 100644 index 0000000..74fd05a Binary files /dev/null and b/public/train.png differ diff --git a/src/components/Hero.js b/src/components/Hero.js new file mode 100644 index 0000000..83eba04 --- /dev/null +++ b/src/components/Hero.js @@ -0,0 +1,16 @@ +import React from "react"; +import PropTypes from "prop-types"; + +const Hero = ({ siteDescription }) => { + return

{siteDescription}

; +}; + +Hero.defaultProps = { + siteDescription: process.env.SITE_DESCRIPTION +}; + +Hero.propTypes = { + siteDescription: PropTypes.string +}; + +export default Hero; diff --git a/src/components/Index.js b/src/components/Index.js index b276722..994b06f 100644 --- a/src/components/Index.js +++ b/src/components/Index.js @@ -6,44 +6,63 @@ import LinkOrAnchor from "./LinkOrAnchor"; import Header from "./Header"; import Row from "./Row"; import getFieldsToDisplay from "../utils/getFieldsToDisplay"; +import CustomRenderers from "../../custom/renderers"; +import Hero from "./Hero"; -const Index = ({ rows, pagination }) => ( -
- {/* this needs to be refactored, shouldn't have check for window here */} - {process.env.HEADER_TITLE &&
} - {rows.map(row => { - const slugField = _.find(row.fields, field => field.name === "Slug"); - const slug = - (typeof window === "undefined" && slugField && slugField.value) || - row.id; +const Index = ({ rows, pagination }) => { + let hero; - return ( - - - - ); - })} - {pagination && ( -
- {pagination.back && ( - - Back - - )} - {pagination.next && ( - - Next + if (typeof CustomRenderers.LiftoffHero === "undefined") { + hero = ; + } else { + hero = ; + } + + return ( +
+ {/* this needs to be refactored, shouldn't have check for window here */} + {process.env.HEADER_TITLE &&
} + + {hero} + + {rows.map(row => { + const slugField = _.find(row.fields, field => field.name === "Slug"); + const slug = + (typeof window === "undefined" && slugField && slugField.value) || + row.id; + + return ( + + - )} -
- )} -
-); + ); + })} + {pagination && ( +
+ {pagination.back ? ( + + ← Previous + + ) : ( +
+ )} + {pagination.next ? ( + + Next → + + ) : ( +
+ )} +
+ )} +
+ ); +}; Index.propTypes = { rows: PropTypes.arrayOf( diff --git a/src/components/RowPage.js b/src/components/RowPage.js index bf1aa46..4800663 100644 --- a/src/components/RowPage.js +++ b/src/components/RowPage.js @@ -7,7 +7,7 @@ import Header from "./Header"; import getFieldsToDisplay from "../utils/getFieldsToDisplay"; const RowPage = ({ rowData }) => ( -
+
{process.env.HEADER_TITLE && process.env.HEADER_TITLE && (
)} diff --git a/webpack.config.js b/webpack.config.js index 33f6ca4..c8256d0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -44,7 +44,8 @@ module.exports = { "HEADER_TITLE", "SITE_TITLE", "PAGE_TITLE_COLUMN", - "MARKDOWN_FIELDS" + "MARKDOWN_FIELDS", + "SITE_DESCRIPTION" ]) ], devServer: {