diff --git a/package.json b/package.json index 2ec58b1..ea86a92 100644 --- a/package.json +++ b/package.json @@ -88,8 +88,7 @@ "dependencies": { "lost": "^6.7.2", "moment": "^2.12.0", - "rucksack-css": "^0.8.5", - "safe-access": "^0.1.0", - "sugarss": "^0.1.2" + "postcss-import": "^8.0.2", + "rucksack-css": "^0.8.5" } } diff --git a/scripts/webpack.config.babel.js b/scripts/webpack.config.babel.js index abe4f38..a3e16cd 100644 --- a/scripts/webpack.config.babel.js +++ b/scripts/webpack.config.babel.js @@ -32,17 +32,21 @@ export default ({ config, pkg }) => ({ }, }, { - test: /\.css$/, + test: /global\.styles$/, loader: ExtractTextPlugin.extract( "style-loader", "css-loader!postcss-loader", ), }, { - test: /\.sss$/, + test: /\.css$/, loader: ExtractTextPlugin.extract( "style-loader", - "css-loader!postcss-loader?parser=sugarss", + "css-loader" + ( + "?modules"+ + "&localIdentName=[path][name]--[local]--[hash:base64:5]" + ) + "!" + + "postcss-loader", ), }, { @@ -62,10 +66,21 @@ export default ({ config, pkg }) => ({ postcss: () => [ // require("stylelint")(), - require("lost")(), - require("rucksack-css")({ - autoprefixer: true, + require("postcss-import")(), + require("postcss-cssnext")({ + browsers: "last 2 versions", + features: { + customMedia: { + extensions: { + "--lg": "screen and (max-width: 1100px)", + "--md": "screen and (max-width: 900px)", + "--sm": "screen and (max-width: 500px)", + }, + }, + }, }), + require("lost")(), + require("rucksack-css")(), require("postcss-browser-reporter")(), require("postcss-reporter")(), ], @@ -76,8 +91,6 @@ export default ({ config, pkg }) => ({ NODE_ENV: JSON.stringify( config.production ? "production" : process.env.NODE_ENV ), - CLIENT: true, - REDUX_DEVTOOLS: Boolean(process.env.REDUX_DEVTOOLS), STATINAMIC_PATHNAME: JSON.stringify(process.env.STATINAMIC_PATHNAME), } }), ...config.production && [ diff --git a/web_modules/LayoutContainer/blog.sss b/web_modules/LayoutContainer/blog.sss deleted file mode 100644 index f3b8dec..0000000 --- a/web_modules/LayoutContainer/blog.sss +++ /dev/null @@ -1,25 +0,0 @@ -// BlogContent -.wrapper - lost-center: 1070px -.content - lost-column: 2/3 -.main-inner - padding: 40px 35px - -@media screen and (max-width: 1100px) - .content - lost-column: 2/4 - .main-inner - padding: 35px 20px - -@media screen and (max-width: 900px) - .content - lost-column: 7/12 - .main-inner - padding: 30px 20px - -@media screen and (max-width: 500px) - .content - lost-column: 4/4 - .main-inner - padding: 25px 20px diff --git a/web_modules/LayoutContainer/global/global.styles b/web_modules/LayoutContainer/global/global.styles new file mode 100644 index 0000000..5022745 --- /dev/null +++ b/web_modules/LayoutContainer/global/global.styles @@ -0,0 +1,4 @@ +@import "./reset.css"; +@import "./typography.css"; +@import "./highlight.css"; +@import "./heading-anchors.css"; diff --git a/web_modules/LayoutContainer/heading-anchors.css b/web_modules/LayoutContainer/global/heading-anchors.css similarity index 100% rename from web_modules/LayoutContainer/heading-anchors.css rename to web_modules/LayoutContainer/global/heading-anchors.css diff --git a/web_modules/LayoutContainer/highlight.css b/web_modules/LayoutContainer/global/highlight.css similarity index 89% rename from web_modules/LayoutContainer/highlight.css rename to web_modules/LayoutContainer/global/highlight.css index 4ac8626..66bcf9b 100644 --- a/web_modules/LayoutContainer/highlight.css +++ b/web_modules/LayoutContainer/global/highlight.css @@ -1,14 +1,8 @@ p > code, span > code { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; border-radius: 3px; white-space: pre; white-space: pre-wrap; white-space: pre-line; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - white-space: -moz-pre-wrap; - white-space: -hp-pre-wrap; word-wrap: break-word; background: #f8f8f8; display: inline; @@ -78,4 +72,4 @@ pre code { } .hljs-strong { font-weight: bold; -} \ No newline at end of file +} diff --git a/web_modules/LayoutContainer/reset.css b/web_modules/LayoutContainer/global/reset.css similarity index 100% rename from web_modules/LayoutContainer/reset.css rename to web_modules/LayoutContainer/global/reset.css diff --git a/web_modules/LayoutContainer/typography.css b/web_modules/LayoutContainer/global/typography.css similarity index 100% rename from web_modules/LayoutContainer/typography.css rename to web_modules/LayoutContainer/global/typography.css diff --git a/web_modules/LayoutContainer/index.js b/web_modules/LayoutContainer/index.js index 4154441..7d9d0d1 100644 --- a/web_modules/LayoutContainer/index.js +++ b/web_modules/LayoutContainer/index.js @@ -2,11 +2,8 @@ import React, { Component, PropTypes } from "react" import Helmet from "react-helmet" -import "./reset.css" -import "./typography.css" -import "./highlight.css" -import "./heading-anchors.css" -import "./blog.sss" +import "./global/global.styles" +import styles from "./styles.css" export default class Layout extends Component { @@ -38,10 +35,10 @@ export default class Layout extends Component { ] } meta={ [ { property: "og:site_name", content: config.siteTitle }, - { name: "twitter:site", content: config.twitter }, + { name: "twitter:site", content: `@${ config.twitter }` }, ] } /> -
+
{ this.props.children }
diff --git a/web_modules/LayoutContainer/styles.css b/web_modules/LayoutContainer/styles.css new file mode 100644 index 0000000..a89580f --- /dev/null +++ b/web_modules/LayoutContainer/styles.css @@ -0,0 +1,3 @@ +.wrapper { + lost-center: 1070px; +} diff --git a/web_modules/components/GoHomeButton/index.js b/web_modules/components/GoHomeButton/index.js new file mode 100644 index 0000000..62ea5f7 --- /dev/null +++ b/web_modules/components/GoHomeButton/index.js @@ -0,0 +1,13 @@ +import React, { PropTypes } from "react" +import Link from "statinamic/lib/Link" +import styles from "./styles.css" + +const GoHomeButton = ({ text }) => (( + { text } +)) + +GoHomeButton.propTypes = { + text: PropTypes.string.isRequired, +} + +export default GoHomeButton diff --git a/web_modules/components/GoHomeButton/styles.css b/web_modules/components/GoHomeButton/styles.css new file mode 100644 index 0000000..f4a2477 --- /dev/null +++ b/web_modules/components/GoHomeButton/styles.css @@ -0,0 +1,27 @@ +.button { + font-family: 'Raleway', Helvetica, Arial, sans-serif; + font-size: 16px; + text-align: center; + color: #343e47; + font-weight: 600; + position: fixed; + left: 20px; + top: 20px; + opacity: 0.5; + padding: 8px 18px; + border: 2px solid #343e47 !important; + border-radius: 3px; + + @media (--md) { + position: static; + margin: 20px auto 0; + text-align: center; + width: 85px; + display: block; + } +} + +.button:hover { + color: #201e28; + opacity: 1; +} diff --git a/web_modules/components/SidebarLayout/index.js b/web_modules/components/SidebarLayout/index.js new file mode 100644 index 0000000..a41ac19 --- /dev/null +++ b/web_modules/components/SidebarLayout/index.js @@ -0,0 +1,22 @@ +import React, { Component, PropTypes } from "react" +import SidebarLeft from "../SidebarLeft" +import styles from "./styles.css" + +export default class SidebarLayout extends Component { + static propTypes = { + children: PropTypes.node.isRequired, + }; + + render() { + return ( +
+ +
+
+ { this.props.children } +
+
+
+ ) + } +} diff --git a/web_modules/components/SidebarLayout/styles.css b/web_modules/components/SidebarLayout/styles.css new file mode 100644 index 0000000..9afe132 --- /dev/null +++ b/web_modules/components/SidebarLayout/styles.css @@ -0,0 +1,27 @@ +.wrapper { + lost-column: 2/3; + + @media (--lg) { + lost-column: 2/4; + } + @media (--md) { + lost-column: 7/12; + } + @media (--sm) { + lost-column: 4/4; + } +} + +.inner { + padding: 40px 35px; + + @media (--lg) { + padding: 35px 20px; + } + @media (--md) { + padding: 30px 20px + } + @media (--sm) { + padding: 25px 20px; + } +} diff --git a/web_modules/components/SidebarLeft/index.js b/web_modules/components/SidebarLeft/index.js index 6f0302b..fabb189 100644 --- a/web_modules/components/SidebarLeft/index.js +++ b/web_modules/components/SidebarLeft/index.js @@ -3,8 +3,7 @@ import Link from "statinamic/lib/Link" import SidebarNav from "../SidebarNav" import Avatar from "./avatar.jpg" import Social from "../SidebarSocial" -// import BlogSocial from "../BlogSocial" -import "./style.sss" +import styles from "./style.css" class SidebarLeft extends React.Component { static contextTypes = { @@ -17,39 +16,23 @@ class SidebarLeft extends React.Component { } = this.context.metadata return ( -
-
+
+
- +

- + { config.siteTitle }

-

- { config.siteDescr } -

+

{ config.siteDescr }

-

© All rights reserved.

+

© All rights reserved.

diff --git a/web_modules/components/SidebarLeft/style.css b/web_modules/components/SidebarLeft/style.css new file mode 100644 index 0000000..f7abf2f --- /dev/null +++ b/web_modules/components/SidebarLeft/style.css @@ -0,0 +1,87 @@ +.wrapper { + lost-column: 1/3; + + @media (--lg) { + lost-column: 2/4; + } + @media (--md) { + lost-column: 5/12; + } + @media (--sm) { + lost-column: 4/4; + } +} + +.inner { + position: relative; + padding: 40px; + + @media (--lg) { + padding: 35px 20px 0; + } + @media (--md) { + padding: 30px 20px 0; + } + @media (--sm) { + padding: 25px 20px 0; + } +} + +.inner:after { + background: #eee; + background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%); + position: absolute; + content: ''; + width: 1px; + height: 540px; + top: 30px; + right: -10px; + bottom: 0; + + @media (--sm) { + display: none; + } +} + +.inner img { + display: inline-block; + margin-bottom: 0; + border-radius: 50%; + background-clip: padding-box; +} + +.inner h1, +.inner h2 { + font-size: responsive 16px 18px; + line-height: 1; + margin: 20px 0 10px; +} + +.inner p { + font-size: 14px; + color: #888; + line-height: 23px; + margin-bottom: 23px; +} + +.copyright { + color: #b6b6b6; + font-size: 12px; +} + +.siteTitle { + text-decoration: none; + border-bottom: none; + color: inherit; +} + +.siteLogo { + text-decoration: none; + border-bottom: none; + outline: none; + + &:visited:hover, + &:hover { + border-bottom: none; + } +} diff --git a/web_modules/components/SidebarLeft/style.sss b/web_modules/components/SidebarLeft/style.sss deleted file mode 100644 index 7ae9253..0000000 --- a/web_modules/components/SidebarLeft/style.sss +++ /dev/null @@ -1,59 +0,0 @@ -.sidebar - lost-column: 1/3 - -.sidebar .sidebar-inner - position: relative - padding: 40px - -.sidebar .sidebar-inner:after - background: #eee - background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%) - position: absolute - content: '' - width: 1px - height: 540px - top: 30px - right: -10px - bottom: 0 - -.sidebar .sidebar-inner img - display: inline-block - margin-bottom: 0 - border-radius: 50% - background-clip: padding-box - -.sidebar .sidebar-inner h1, -.sidebar .sidebar-inner h2 - font-size: responsive 16px 18px - line-height: 1 - margin: 20px 0 10px - -.sidebar .sidebar-inner p - font-size: 14px - color: #888 - line-height: 23px - margin-bottom: 23px - -.sidebar .sidebar-inner p.copyright - color: #b6b6b6 - font-size: 12px - -@media (max-width: 1100px) - .sidebar .sidebar-inner - padding: 35px 20px 0 - .sidebar - lost-column: 2/4 - -@media (max-width: 900px) - .sidebar - lost-column: 5/12 - .sidebar .sidebar-inner - padding: 30px 20px 0 - -@media (max-width: 500px) - .sidebar - lost-column: 4/4 - .sidebar .sidebar-inner - padding: 25px 20px 0 - .sidebar .sidebar-inner:after - display: none \ No newline at end of file diff --git a/web_modules/components/SidebarNav/index.js b/web_modules/components/SidebarNav/index.js index 97ba9c2..dd9c356 100644 --- a/web_modules/components/SidebarNav/index.js +++ b/web_modules/components/SidebarNav/index.js @@ -1,21 +1,40 @@ import React, { Component } from "react" import Link from "statinamic/lib/Link" -import "./style.sss" +import styles from "./style.css" + +const navList = [ + { + to: "/", + name: "Articles", + }, + { + to: "/about", + name: "About", + }, + { + to: "/contact", + name: "Contact", + }, +] export default class SidebarNav extends Component { render() { return ( -