fix(example): add updated development example

SimonFinney · Apr 22, 2018 · 632ad17 · 632ad17
1 parent 0ad8d28
commit 632ad17
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -4,9 +4,9 @@
   "description": "Parallax effect using custom properties",
   "main": "dist/custom-properties-parallax.js",
   "scripts": {
-    "commitmsg": "commitlint -e $GIT_PARAMS",
     "build": "webpack --mode production",
-    "format": "prettier '**/*.{js,scss}' --write",
+    "commitmsg": "commitlint -e $GIT_PARAMS",
+    "format": "prettier '**/*.{js,scss}' --ignore-path .gitignore --write",
     "lint": "yarn lint:js && yarn lint:scss",
     "lint:js": "eslint '**/*.js' --ignore-path .gitignore",
     "lint:scss": "stylelint '**/*.scss' --ignore-path .gitignore",

diff --git a/src/index.html b/src/index.html
@@ -6,12 +6,17 @@
   </head>
   <body>
     <main>
-      <h2 data-cpp><%= htmlWebpackPlugin.options.title %></h2>
-      <p>Ea meatloaf turkey ut tenderloin. Voluptate salami cupim, tail flank ham short loin strip steak sirloin cillum alcatra non eiusmod filet mignon hamburger. Pig chicken in, cupim excepteur dolor capicola landjaeger enim beef ribs sunt shank pancetta ipsum dolore. Do shoulder landjaeger bacon elit quis. In cillum qui, drumstick swine beef et non laborum lorem cupim laboris ad landjaeger. Magna do ut, ad bacon tenderloin chicken consequat et alcatra duis.</p>
+      <h2><%= htmlWebpackPlugin.options.title %></h2>
+      <p data-cpp>Ea meatloaf turkey ut tenderloin. Voluptate salami cupim, tail flank ham short loin strip steak sirloin cillum alcatra non eiusmod filet mignon hamburger. Pig chicken in, cupim excepteur dolor capicola landjaeger enim beef ribs sunt shank pancetta ipsum dolore. Do shoulder landjaeger bacon elit quis. In cillum qui, drumstick swine beef et non laborum lorem cupim laboris ad landjaeger. Magna do ut, ad bacon tenderloin chicken consequat et alcatra duis.</p>
+      <img src="http://www.placecage.com/c/640/480">
+      <p data-cpp>Ea meatloaf turkey ut tenderloin. Voluptate salami cupim, tail flank ham short loin strip steak sirloin cillum alcatra non eiusmod filet mignon hamburger. Pig chicken in, cupim excepteur dolor capicola landjaeger enim beef ribs sunt shank pancetta ipsum dolore. Do shoulder landjaeger bacon elit quis. In cillum qui, drumstick swine beef et non laborum lorem cupim laboris ad landjaeger. Magna do ut, ad bacon tenderloin chicken consequat et alcatra duis.</p>
     </main>
 
     <aside>
+      <h3><%= htmlWebpackPlugin.options.title %></h3>
       <img src="http://www.placecage.com/c/350/350" data-cpp>
+      <p>Ea meatloaf turkey ut tenderloin. Voluptate salami cupim, tail flank ham short loin strip steak sirloin cillum alcatra non eiusmod filet mignon hamburger. Pig chicken in, cupim excepteur dolor capicola landjaeger enim beef ribs sunt shank pancetta ipsum dolore. Do shoulder landjaeger bacon elit quis. In cillum qui, drumstick swine beef et non laborum lorem cupim laboris ad landjaeger. Magna do ut, ad bacon tenderloin chicken consequat et alcatra duis.</p>
     </aside>
   </body>
+
 </html>
diff --git a/src/index.scss b/src/index.scss
@@ -5,9 +5,23 @@
 
 @import 'normalize.css';
 
+/// Spacing.
+/// @type Length
+$spacing: 1rem;
+
 body {
   display: grid;
+  box-sizing: border-box;
+  max-width: 768px;
+  padding-right: $spacing;
+  padding-left: $spacing;
+  margin-right: auto;
+  margin-left: auto;
   font-family: system-ui, sans-serif;
-  grid-gap: 1rem;
+  grid-gap: $spacing;
   grid-template-columns: 2fr 1fr;
 }
+
+img {
+  max-width: 100%;
+}