Simplify project index (#348)

* New project index styling

* Simplifying project index

* Removing redundant images

* Removing project index img copy

* Revert "Removing redundant images"

This reverts commit e34ab78.

* Revert "Removing project index img copy"

This reverts commit 8d7618a.

* Remove img copy

* Removing redundant images

generators/app/templates/index/css/main.css

@@ -6,13 +6,13 @@ html {
 
 @media (min-width: 768px) {
   html {
-    font-size: 1.125em;
+    font-size: 1.25em;
   }
 }
 
 @media (min-width: 1024px) {
   html {
-    font-size: 1.25em;
+    font-size: 1.5em;
   }
 }
 
@@ -21,7 +21,7 @@ body {
   background-image: repeating-linear-gradient(180deg, transparent, transparent 40px, #eae3d7 40px, #eae3d7 41px),
                     repeating-linear-gradient(90deg, transparent, transparent 40px, #eae3d7 40px, #eae3d7 41px);
   color: #1b3729;
-  font-family: 'Lora', serif;
+  font-family: 'Crimson Text', serif;
   padding: 1em;
 }
 
@@ -40,57 +40,17 @@ p {
 /* Layouts */
 .c-wrapper {
   margin: 0 auto;
-  max-width: 1200px;
+  max-width: 860px;
 }
 
 .c-section {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  margin-top: 1em;
-}
-
-@media (min-width: 768px) {
-  .c-section {
-    flex-direction: row;
-    margin-top: 3em;
-  }
-}
-
-.c-section--first {
   margin-top: 2em;
 }
 
-.c-section__content {
-  width: 100%;
-}
-
 .c-section__note {
   margin-top: 1em;
 }
 
-@media (min-width: 768px) {
-  .c-section__content {
-    width: 60%;
-  }
-}
-
-.c-section__img {
-  display: none;
-  padding-top: 0;
-  width: 35%;
-}
-
-@media (min-width: 768px) {
-  .c-section__img {
-    display: block;
-  }
-}
-
-.c-section__img img {
-  max-width: 100%;
-}
-
 /* Header */
 .c-page-title {
   margin: 0;
@@ -100,25 +60,24 @@ p {
   border-bottom: 7px solid #1b3729;
   display: inline-block;
   font-size: 1.25rem;
-  font-weight: normal;
+  font-weight: 600;
   margin: 0;
   padding-bottom: 0.25em;
 }
 
 .c-intro {
-  color: #4d4d4d;
   font-size: 1.25rem;
   margin: 0 1em 1em 0;
-  line-height: 1.8;
+  line-height: 1.5;
+  font-weight: 600;
 }
 
 /* Headings */
 .c-heading {
   border-bottom: 5px solid #ecbb42;
   display: inline-block;
-  font-weight: normal;
-  margin: 0 0 1em 0;
-  padding-bottom: 0.25em;
+  font-weight: 600;
+  margin: 0 0 0.5em 0;
 }
 
 /* Lists */

generators/app/templates/index/project-index.html

@@ -14,7 +14,7 @@ <h2 class="c-page-subtitle">Project index</h2>
 
     <div class="c-section c-section--first">
       <div class="c-section__content">
-        <p class="c-intro">This project is powered by <a href="https://github.com/xfiveco/generator-chisel">Chisel</a>, a&nbsp;tool for setting up and developing front-end and WordPress projects.</p>
+        <p class="c-intro">This project is powered by <a href="https://www.getchisel.co/">Chisel</a>, a development framework for creating easy to maintain and fast front-end templates.</p>
         <h2 class="c-heading">Pages</h2>
         <ul class="c-list">
           <%% if (locals.pages) { %>
@@ -32,45 +32,16 @@ <h2 class="c-heading">Pages</h2>
         </div>
         <%% } %>
       </div>
-      <div class="c-section__img">
-        <img src="index/img/1.png" alt="">
-      </div>
     </div>
     <!-- c-section -->
 
-    <section class="c-section">
-      <div class="c-section__img">
-        <img src="index/img/3.png" alt="">
-      </div>
-      <div class="c-section__content">
-        <h2 class="c-heading">Features</h2>
-        <ul class="c-list">
-          <li><a href="http://gulpjs.com/">Gulp</a> build system</li>
-          <li><a href="https://www.browsersync.io/">Browsersync</a></li>
-          <li><a href="http://twig.sensiolabs.org/">Twig</a> templating engine</li>
-          <li>SCSS with <a href="https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/">ITCSS architecture</a></li>
-          <li><a href="https://webpack.js.org/">webpack</a></li>
-          <li><a href="https://github.com/sindresorhus/gulp-rev">gulp-rev</a> support</li>
-          <li><a href="http://stylelint.io/">stylelint</a></li>
-          <li><a href="https://prettier.io/">Prettier</a></li>
-          <li><a href="http://eslint.org/">ESLint</a></li>
-          <li>ES6 with <a href="https://babeljs.io/">Babel</a></li><% if (has_jquery) {%>
-          <li>jQuery</li><% } %>
-        </ul>
-      </div>
-    </section>
-    <!-- c-section -->
-
     <section class="c-section">
       <div class="c-section__content">
         <h2 class="c-heading">Documentation</h2>
         <p><strong>Chisel supports modern web development workflows and helps developers to create a code base which is easy to maintain.</strong></p>
-        <p>For detailed information how Chisel works, please check out its <a href="https://github.com/xfiveco/generator-chisel">documentation at GitHub</a>.</p>
+        <p>For detailed information how Chisel works, please check out <a href="https://www.getchisel.co/">www.getchisel.co</a>.</p>
         <p>If you are just looking for your deliverable files, they are located inside the <code>dist</code> folder. No files found outside of that folder should usually be uploaded to your server (e.g. this file).</p>
       </div>
-      <div class="c-section__img">
-        <img src="index/img/2.png" alt="">
-      </div>
     </section>
     <!-- c-section -->
   </div>

generators/app/utils/generator.js

@@ -36,7 +36,6 @@ var Generator = {
     if(this.prompts.projectType != 'wp-with-fe') {
       helpers.copy.call(this, 'index/project-index.html', 'index/project-index.html', this.prompts);
       helpers.copy.call(this, 'index/css/main.css', 'index/css/main.css');
-      helpers.copy.call(this, 'index/img/*', 'index/img/');
       this.fs.copyTpl(this.destinationPath('index/project-index.html'),
         this.destinationPath('index.html'), this.prompts);
     }