Merge pull request creativecommons#420 from creativecommons/update_project_ideas

Fix problems on project ideas page

Author: zackkrida

themes/vocabulary_theme/templates/project-ideas.html

@@ -8,7 +8,7 @@ <h1>Open Source Internships: Project Ideas</h1>
         <p class="description">This is the project idea list for the <span class="has-color-forest-green">current round of open source internships at Creative Commons.</span></p>
         {% set ideas = site.query('/internships/project-ideas-collection').include_undiscoverable(true) %}
         <div class="filter-labels" id="project-list">
-          <button type="button" class="button tag filter-btn" data-filter="all">
+          <button type="button" class="button tag btn-dark filter-btn" data-filter="all">
             All Projects
           </button>
           <button type="button" class="button tag filter-btn" data-filter="difficulty-easy">
@@ -36,46 +36,50 @@ <h1>Open Source Internships: Project Ideas</h1>
         <div class="project-ideas columns is-multiline">
           {% for idea in ideas %}
           <div class="column is-one-quarter filter filter-label {{ idea.filter_value }}">
-            <article class="card entry-post horizontal">
-              <div class="card-content with-button">
-                <h5 class="card-title"><a href="#{{ idea._slug }}">{{ idea.title }}</a></h5>
-              </div>
-            </article>
+            <a href="#{{ idea._slug }}">
+              <article class="card entry-post horizontal">
+                <div class="card-content">
+                  <h5 class="card-title">{{ idea.title }}</h5>
+                </div>
+              </article>
+            </a>
           </div>
           {% endfor %}
           <div class="column is-one-quarter">
-            <article class="card entry-post horizontal">
-              <div class="card-content with-button">
-                <h5 class="card-title"><a href="#original-ideas">Original Ideas</a></h5>
-              </div>
-            </article>
+            <a href="#original-ideas">
+              <article class="card entry-post horizontal">
+                <div class="card-content">
+                  <h5 class="card-title">Original Ideas</h5>
+                </div>
+              </article>
+            </a>
           </div>
         </div>
       </div>
     </div>
-    <div class="body container content">
+    <div class="body container">
       {% for idea in ideas %}
         <div class="project-idea">
           <h2><a class="has-color-dark-slate-gray" name="{{ idea._slug }}">{{ idea.title }}</a></h2>
           <div class="columns">
             <div class="column is-one-quarter">
-              <h5>Difficulty</h5>
-              <p>{{ idea.difficulty }}</p>
-              <h5>Skills recommended</h5>
-              <p>{{ idea.skills_recommended }}</p>
-              <h5>Mentors</h5>
-              <p>{{ idea.mentors }}</p>
+              <h5 class="b-header padding-bottom-small">Difficulty</h5>
+              <p class="padding-bottom-big">{{ idea.difficulty }}</p>
+              <h5 class="b-header padding-bottom-small">Skills recommended</h5>
+              <p class="padding-bottom-big">{{ idea.skills_recommended }}</p>
+              <h5 class="b-header padding-bottom-small">Mentors</h5>
+              <p class="padding-bottom-big">{{ idea.mentors }}</p>
             </div>
             <div class="column is-three-quarters">
-              <h5>The Problem</h5>
+              <h3 class="padding-bottom-big">The Problem</h3>
               <p>{{ idea.problem }}</p>
-              <h5>Expected Outcome</h5>
+              <h3 class="padding-bottom-big padding-top-large">Expected Outcome</h3>
               <p>{{ idea.expected_outcome }}</p>
-              <h5>Internship Tasks</h5>
+              <h3 class="padding-bottom-big padding-top-large">Internship Tasks</h3>
               <p>{{ idea.internship_tasks }}</p>
-              <h5>Application Tips</h5>
+              <h3 class="padding-bottom-big padding-top-large">Application Tips</h3>
               <p>{{ idea.application_tips }}</p>
-              <h5>Resources</h5>
+              <h3 class="padding-bottom-big padding-top-large">Resources</h3>
               <p>{{ idea.resources }}</p>
             </div>
           </div>

webpack/sass/main.scss

@@ -563,6 +563,12 @@ code {
           @extend .margin-right-normal;
           @extend .margin-bottom-normal;
         }
+
+        .btn-dark, :hover {
+          @extend .has-background-gold;
+          @extend .has-color-dark-slate-gray;
+          border: none;
+        }
       }
 
       .project-ideas {
@@ -576,6 +582,13 @@ code {
         .card {
           height: 100%;
         }
+
+        :hover {
+          .entry-post {
+            border: 0.1875rem solid $color-dark-gray;
+          }
+          text-decoration: none;
+        }
       }
     }
   }
@@ -584,12 +597,23 @@ code {
     @extend .padding-top-larger;
     @extend .padding-bottom-xxl;
     @extend .padding-horizontal-big;
+    @extend .body-big;
 
     .project-idea {
       @extend .padding-bottom-xl;
 
       .column {
-        @extend .padding-top-normal;
+        @extend .padding-top-large;
+
+        li:before {
+          content: "\ea02";
+          font-family: "Vocabulary Icons";
+          display: inline-block;
+          font-size: 0.375rem;
+          color: $color-gray;
+
+          @extend .padding-right-small;
+        }
       }
 
       &::after {