diff --git a/example/gatsby-config.js b/example/gatsby-config.js index 1b5e2d5..78e1b15 100644 --- a/example/gatsby-config.js +++ b/example/gatsby-config.js @@ -1,6 +1,7 @@ module.exports = { siteMetadata: { - title: "Example Sputnik Site" + title: "Example Sputnik Site", + siteUrl: "http://example.dev/" }, plugins: ["gatsby-theme-sputnik"] }; diff --git a/gatsby-theme-sputnik/package.json b/gatsby-theme-sputnik/package.json index 1723c03..24d0d82 100644 --- a/gatsby-theme-sputnik/package.json +++ b/gatsby-theme-sputnik/package.json @@ -61,6 +61,7 @@ "gatsby-plugin-react-helmet": "^3.1.8", "gatsby-plugin-robots-txt": "^1.5.0", "gatsby-plugin-sitemap": "^2.2.14", + "modern-normalize": "^0.5.0", "react-helmet": "^5.2.1", "typeface-lato": "0.0.75" }, diff --git a/gatsby-theme-sputnik/src/__mocks__/modern-normalize.js b/gatsby-theme-sputnik/src/__mocks__/modern-normalize.js new file mode 100644 index 0000000..f053ebf --- /dev/null +++ b/gatsby-theme-sputnik/src/__mocks__/modern-normalize.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/gatsby-theme-sputnik/src/components/layout.css b/gatsby-theme-sputnik/src/components/layout.css index 3ef4d97..21d612a 100644 --- a/gatsby-theme-sputnik/src/components/layout.css +++ b/gatsby-theme-sputnik/src/components/layout.css @@ -1,56 +1,20 @@ body { - padding: 50px; - font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #444; - font-weight: 300; -} - -h1, -h2 { - margin: 0 0 20px; - line-height: 1.1; -} - -h1 { + padding: 4em; + font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; color: #222; - font-size: 28px; } -h2 { - color: #393939; +a { + color: #6cf; } -@media print, screen and (max-width: 720px) { - body { - word-wrap: break-word; - } -} - -@media print, screen and (max-width: 480px) { - body { - padding: 15px; - } -} - -@media print { - body { - padding: 0.4in; - font-size: 12pt; - color: #444; - } -} +/* Dark Mode Customization */ @media (prefers-color-scheme: dark) { body { background-color: #4a4a4a; color: white; } - - h1 { - color: #ddd; - } - - h2 { - color: #c6c6c6; - } } diff --git a/gatsby-theme-sputnik/src/components/layout.jsx b/gatsby-theme-sputnik/src/components/layout.jsx index 7458b1e..1dad515 100644 --- a/gatsby-theme-sputnik/src/components/layout.jsx +++ b/gatsby-theme-sputnik/src/components/layout.jsx @@ -3,6 +3,7 @@ import PropTypes from "prop-types"; import { useStaticQuery, graphql } from "gatsby"; import { Helmet } from "react-helmet"; +import "modern-normalize"; import "typeface-lato"; import "./layout.css"; diff --git a/package.json b/package.json index f4abccf..6c1a9b8 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "license": "ISC", "scripts": { "test": "yarn workspace gatsby-theme-sputnik test", - "develop": "yarn workspace example develop" + "develop": "yarn workspace example develop", + "build": "yarn workspace example build" }, "workspaces": [ "gatsby-theme-sputnik", diff --git a/yarn.lock b/yarn.lock index 9320868..e83bd27 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9709,6 +9709,11 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@ dependencies: minimist "0.0.8" +modern-normalize@^0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-0.5.0.tgz#7f75bb7319c6ae708d716658dc8d9c9760274887" + integrity sha512-U1geaHG9Grp3a60djDV2JvSVKiDFhuZrhUHoQHusfjtGqbgGunI3HHw7hHtQ2ls2y0et3+Lpcf2hOSS1W8JUdg== + modify-values@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"