postcss-preset-env site

sites/postcss-preset-env/.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+node_modules
+public
+package-lock.json

sites/postcss-preset-env/README.md

@@ -0,0 +1,16 @@
+# postcss_preset_env
+
+The official website for [PostCSS Preset Env](https://github.com/csstools/postcss-preset-env)
+
+## Setup
+
+- make sure [node.js](http://nodejs.org) is at version >= `6`
+- `npm i spike -g`
+- clone this repo down and `cd` into the folder
+- run `npm install`
+- run `spike watch` or `spike compile`
+
+## Testing
+Tests are located in `test/**` and are powered by [ava](https://github.com/sindresorhus/ava)
+- `npm install` to ensure devDeps are installed
+- `npm test` to run test suite

sites/postcss-preset-env/SPIKE.md

@@ -0,0 +1,16 @@
+# 
+
+
+
+## Setup
+
+- make sure [node.js](http://nodejs.org) is at version >= `6`
+- `npm i spike -g`
+- clone this repo down and `cd` into the folder
+- run `npm install`
+- run `spike watch` or `spike compile`
+
+## Testing
+Tests are located in `test/**` and are powered by [ava](https://github.com/sindresorhus/ava)
+- `npm install` to ensure devDeps are installed
+- `npm test` to run test suite

sites/postcss-preset-env/app.js

@@ -0,0 +1,19 @@
+const htmlStandards = require('reshape-standard')
+const cssStandards = require('spike-css-standards')
+const jsStandards = require('spike-js-standards')
+const pageId = require('spike-page-id')
+const env = process.env.SPIKE_ENV
+
+module.exports = {
+  devtool: 'source-map',
+  ignore: ['**/layout.html', '**/_*', '**/.*', 'readme.md', 'yarn.lock', 'package-lock.json'],
+  reshape: htmlStandards({
+    locals: (ctx) => { return { pageId: pageId(ctx), foo: 'bar' } },
+    minify: env === 'production'
+  }),
+  postcss: cssStandards({
+    minify: env === 'production',
+    warnForDuplicates: env !== 'production'
+  }),
+  babel: jsStandards()
+}

sites/postcss-preset-env/app.production.js

@@ -0,0 +1,10 @@
+const optimize = require('spike-optimize')
+
+module.exports = {
+  devtool: false,
+  afterSpikePlugins: [...optimize({
+    scopeHoisting: true,
+    aggressiveSplitting: true,
+    minify: true
+  })]
+}

sites/postcss-preset-env/assets/css/_global.css

@@ -0,0 +1,230 @@
+* {
+  box-sizing: border-box;
+  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940)
+}
+
+html {
+  font: 300 100%/1.5 "Roboto", "Helvetica Neue", sans-serif
+}
+
+body {
+  margin: 0
+}
+
+.g-code {
+  font: 300 100%/1.5 "Roboto Mono", monospace;
+  background: #282C34;
+  border-radius: 3px;
+  padding: 16px
+}
+
+
+#social {
+  position: absolute;
+  top: 0;
+  right: 30px;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0px;
+  @media (max-width: 920px) {
+    display: none;
+  }
+}
+
+header {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  min-height: 60vh;
+  justify-content: center;
+  padding: 15px 15px 30px;
+  text-align: center;
+  animation: rolling 30s ease infinite;
+  background-image: linear-gradient(238deg, #9952c8, #318edf);
+  background-size: 200% 200%;
+  color: #ffffff
+}
+
+header h1 {
+  font-size: 300%;
+  font-weight: 300;
+  margin: 0
+}
+
+
+
+header h1 {
+  @media (max-width: 480px) {
+    font-size: 175%
+  }
+}
+
+header p {
+  font-size: 150%;
+  opacity: 0.875;
+  margin: 15px 0 0
+}
+
+
+
+header p {
+  @media (max-width: 480px) {
+    font-size: 100%;
+    margin: 0
+  }
+}
+
+header nav {
+  display: grid;
+  grid-gap: 20px;
+  justify-content: center;
+  grid-template-columns: repeat(4, 1fr);
+  margin-top: 30px
+}
+
+
+
+header nav {
+  @media (max-width: 920px) {
+    grid-gap: 15px;
+    grid-template-columns: 1fr 1fr
+  }
+}
+
+header nav a {
+  align-items: center;
+  background-color: rgba(0, 0, 0, .2);
+  border-radius: 5px;
+  color: #ffffff;
+  display: inline-flex;
+  flex-direction: column;
+  height: 180px;
+  justify-content: center;
+  text-decoration: none;
+  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940), color 0s;
+  width: 180px
+}
+
+
+
+header nav a {
+  @media (max-width: 920px) {
+    height: 120px;
+    width: 120px
+  }
+}
+
+header nav a svg {
+  fill: #ffffff;
+  height: 100px;
+  width: 100px
+}
+
+
+
+header nav a svg {
+  @media (max-width: 920px) {
+    height: 60px;
+    width: 60px
+  }
+}
+
+header nav a:hover,
+    header nav a:focus {
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22);
+  color: #f527e0;
+  transform: scale(1.1)
+}
+
+header nav a:hover svg, header nav a:focus svg {
+  fill: url(#linear)
+}
+
+/* when you nest with sugarSS is it the same as using a ">"? */
+
+body > p {
+  font-weight: 400;
+  letter-spacing: 0.025em;
+  margin: 50px auto 20px;
+  max-width: 35em;
+  padding: 0 1em;
+  text-align: center
+}
+
+
+
+body > p {
+  @media (max-width: 920px) {
+    margin: 20px auto
+  }
+}
+
+body > p > a {
+  box-shadow: 0 1px 0 0 transparent;
+  color: #3095ff;
+  text-decoration: none
+}
+
+body > p > a:hover, body > p > a:focus {
+  box-shadow: 0 1px 0 0
+}
+
+body > div {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0 0 20px;
+  justify-content: center
+}
+
+body > div > code {
+  background-color: #2e2e2e;
+  border-radius: 5px;
+  border-width: 0;
+  color: #ffffff;
+  font: 400 100%/1.5 "Roboto Mono", monospace, monospace;
+  margin: 0 15px;
+  padding: 5px 20px
+}
+
+body > div > code > span {
+  display: inline-block
+}
+
+body > div > code:hover,
+body > div > code:focus {
+  background-color: #1e73be
+}
+
+/* dunno if this is the right way to write this */
+@keyframes rolling {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+#description {
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 10em;
+  & h3,
+  & code {
+    width: 40%;
+    justify-self: center;
+    @media (max-width: 920px) {
+      width: 70%;
+    }
+  }
+  & code {
+    color: white;
+    background: #2E2E2E;
+  }
+}