Merge pull request creativecommons#379 from creativecommons/refactor

Updating spacing on project ideas and CC search pages.

Author: Dhruvi16

themes/vocabulary_theme/templates/project-ideas.html

@@ -53,39 +53,39 @@ <h5 class="card-title"><a href="#original-ideas">Original Ideas</a></h5>
         </div>
       </div>
     </div>
-    <div class="body container">
+    <div class="body container content">
       {% 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 class="label">Difficulty</h5>
-              <p class="content">{{ idea.difficulty }}</p>
-              <h5 class="label">Skills recommended</h5>
-              <p class="content">{{ idea.skills_recommended }}</p>
-              <h5 class="label">Mentors</h5>
-              <p class="content">{{ idea.mentors }}</p>
+              <h5>Difficulty</h5>
+              <p>{{ idea.difficulty }}</p>
+              <h5>Skills recommended</h5>
+              <p>{{ idea.skills_recommended }}</p>
+              <h5>Mentors</h5>
+              <p>{{ idea.mentors }}</p>
             </div>
             <div class="column is-three-quarters">
-              <h5 class="label">The Problem</h5>
-              <p class="content">{{ idea.problem }}</p>
-              <h5 class="label">Expected Outcome</h5>
-              <p class="content">{{ idea.expected_outcome }}</p>
-              <h5 class="label">Internship Tasks</h5>
-              <p class="content">{{ idea.internship_tasks }}</p>
-              <h5 class="label">Application Tips</h5>
-              <p class="content">{{ idea.application_tips }}</p>
-              <h5 class="label">Resources</h5>
-              <p class="content">{{ idea.resources }}</p>
+              <h5>The Problem</h5>
+              <p>{{ idea.problem }}</p>
+              <h5>Expected Outcome</h5>
+              <p>{{ idea.expected_outcome }}</p>
+              <h5>Internship Tasks</h5>
+              <p>{{ idea.internship_tasks }}</p>
+              <h5>Application Tips</h5>
+              <p>{{ idea.application_tips }}</p>
+              <h5>Resources</h5>
+              <p>{{ idea.resources }}</p>
             </div>
           </div>
           <a href="#project-list" class="back-to-list"><i class="icon angle-up"></i> Back to the Project list</a>
         </div>
       {% endfor %}
       <div>
         <h2 class="b-header"><a name="original-ideas" class="has-color-dark-slate-gray">Original Ideas</a></h2>
-        <p class="content padding-vertical-smaller">We are open to original ideas for documentation improvements.</p>
-        <p class="content padding-vertical-smaller">Please talk to us on the <code>#cc-gsoc-outreachy</code> channel on Slack or via the mailing list to find a mentor for the project before submitting your proposal.</p>
+        <p>We are open to original ideas for documentation improvements.</p>
+        <p>Please talk to us on the <code>#cc-gsoc-outreachy</code> channel on Slack or via the mailing list to find a mentor for the project before submitting your proposal.</p>
         <a href="#project-list" class="back-to-list"><i class="icon angle-up"></i> Back to the Project list</a>
       </div>
     </div>

themes/vocabulary_theme/templates/search_roadmap.html

@@ -8,7 +8,7 @@ <h1>{{ this.title }}</h1>
         <p class="description column is-9 is-paddingless">The largest open source product in CC’s portfolio is CC Search: a search engine for CC licensed and public domain creative works.</p>
       </div>
     </div>
-    <div class="body container">
+    <div class="body container content">
       <p>The product involves the following components:</p>
       <ul>
         <li><b>CC Catalog</b>, where CC licensed and public domain works are ingested. [<a href="https://github.com/creativecommons/cccatalog">GitHub Repo</a>]</li>
@@ -17,10 +17,10 @@ <h1>{{ this.title }}</h1>
       </ul>
       <p>CC Catalog ingests and processes CC licensed and public domain works, then makes that data available to CC Catalog API. CC Catalog API is publicly accessible, and is used to serve the data from the catalog to CC Search.</p>
 
-      <h3 class="padding-vertical-normal">What Are We Up To?</h3>
+      <h3>What Are We Up To?</h3>
       <p>The highlights on our roadmap for the current and upcoming quarters are as follows:</p>
       {% for quarter in bag('search_roadmap.quarters') %}
-        <h4 class="padding-vertical-normal">{{ quarter.name }}</h4>
+        <h4>{{ quarter.name }}</h4>
         <div class="table-container">
           <table class="table is-bordered is-striped">
             <thead>
@@ -41,8 +41,8 @@ <h4 class="padding-vertical-normal">{{ quarter.name }}</h4>
         </div>
       {% endfor %}
       <p>Review our Pipeline of Future Ideas <a href="https://docs.google.com/document/d/1qAZu1_ZltfdVylH6WkWcp5_mBAPa5ilflHWUc7zbIgk/edit#">here</a> if you want to see what else has been suggested for CC Search.</p>
-      <h3 class="padding-vertical-normal">How Can I Help?</h3>
-      <h4 class="padding-vertical-normal">Contribute Code</h4>
+      <h3>How Can I Help?</h3>
+      <h4>Contribute Code</h4>
       <p>To contribute code, take the following steps:</p>
       <ul>
           <li>
@@ -70,7 +70,7 @@ <h4 class="padding-vertical-normal">Contribute Code</h4>
           <dd>&bull; There are two columns with “Ready for Work” tickets. If they’re not blocked or marked as CC Staff only, we welcome your contribution.</dd>
       </dl>
 
-      <h4 class="padding-vertical-normal">Contribute Design</h4>
+      <h4>Contribute Design</h4>
       <p>There are two ways you can show your interest in contributing to the design of CC Search:</p>
       <ul>
           <li>Follow <a href="https://opensource.creativecommons.org/contributing-code/cc-search/">the steps for suggesting a new feature for CC Search</a></li>
@@ -79,7 +79,7 @@ <h4 class="padding-vertical-normal">Contribute Design</h4>
 
       <p>Before you start work on any design project, get familiar with <a href="https://www.figma.com/file/l4Mt3dn3Ndtrvrb4aLcwXI/Design-Library?node-id=1433%3A0">our design library in Figma</a>. All CC Search designs use this design library.</p>
 
-      <h4 class="padding-vertical-normal">Participate in Usability Tests and User Interviews</h4>
+      <h4>Participate in Usability Tests and User Interviews</h4>
       <p>When we’re rolling out a specific feature, we do usability tests to test the proposed experience.</p>
       <p>At any point in time, we’re engaging with our users through user interviews, where we learn more about attitudes towards the product as it stands, and dig into expansion areas we’re considering.</p>
       <p>If you’re interested, we invite you to sign up for a time <a href="https://calendly.com/cc-product-design/usability-test-30">via this Calendly link</a>.</p>

webpack/sass/main.scss

@@ -553,26 +553,6 @@ code {
 
       .column {
         @extend .padding-top-normal;
-  
-        .label {
-          @extend .b-header;
-          @extend .padding-top-big;
-        }
-  
-        .content {
-          @extend .body-normal;
-          @extend .padding-top-small;
-        }
-
-        li:before {
-          content: "\ea02";
-          font-family: "Vocabulary Icons";
-          display: inline-block;
-          font-size: 0.375rem;
-          color: $color-gray;
-
-          @extend .padding-right-small;
-        }
       }
 
       &::after {
@@ -611,18 +591,5 @@ code {
     @extend .padding-horizontal-big;
     @extend .padding-top-xl;
     @extend .padding-bottom-xxl;
-    @extend .body-bigger;
-
-    line-height: 1.8125;
-
-    li:before {
-      content: "\ea02";
-      font-family: "Vocabulary Icons";
-      display: inline-block;
-      font-size: 0.375rem;
-      color: $color-gray;
-
-      @extend .padding-right-small;
-    }
   }
 }