Update text styles and navigation

Author: Dhruvi16

content/contributing-code/cc-search/contents.lr

@@ -12,10 +12,10 @@ We also want to enable you - our community members - to build features that woul
 
 If you do want to build a new feature, and we would love it if you did, all we ask is that you follow the process outlined in this document to ensure a smooth experience for everyone involved.
 
-<h4 class="b-header has-text-grey is-marginless">Step 0</h4>
-### Evaluate Process
+#### Step 0
+## Evaluate Process
 
-**Figure out if you need to follow this process.**
+##### Figure out if you need to follow this process.
 
 Please note that this process is only for adding significant features that require product input or infrastructural work from CC staff. If you are just fixing a bug or making an improvement to existing features, follow [our much simpler guidelines for contributing code](/contributing-code/). If you're not sure what category your proposed change falls under, ask us on GitHub or via [our chat/mailing list](/community/).
 
@@ -34,19 +34,19 @@ Examples that should follow this process:
 - Adding a new filter to the search results page
     - **Reasoning**: It is user facing and requires some product input and may require infrastructural work to collect the data that the search results will filter on.
 
-<h4 class="b-header has-text-grey is-marginless">Step 1</h4>
-### GitHub Issue
+#### Step 1
+## GitHub Issue
 
-**Describe the feature on GitHub.**
+##### Describe the feature on GitHub.
 
 Look through [our issues](https://github.com/creativecommons/cccatalog-frontend/issues) to see if there is already a GitHub issue describing the feature you want to build. If none exists, create one on the [cccatalog-frontend](https://github.com/creativecommons/cccatalog-frontend/issues) repository (which holds the code for CC Search) using the "Feature request" template.
 
 On this GitHub issue, add a comment describing the feature you want to build and why you think it would be a good addition to CC Search. Add as much detail as you can.
 
-<h4 class="b-header has-text-grey is-marginless">Step 2</h4>
-### CC Response
+#### Step 2
+## CC Response
 
-**Wait for a CC staff member to respond.**
+##### Wait for a CC staff member to respond.
 
 Someone on the CC Search staff will aim to review your comments within five business days and get back to you with one of these responses:
 
@@ -58,10 +58,10 @@ If at any time it has been more than five business days and you haven't received
 
 Once your feature has been preliminarily approved, proceed to Step 3.
 
-<h4 class="b-header has-text-grey is-marginless">Step 3</h4>
-### Planning
+#### Step 3
+## Planning
 
-**Plan your work.**
+##### Plan your work.
 
 Create an implementation plan with the list of changes you'll need to make to implement your feature.
 
@@ -71,50 +71,50 @@ Once your implementation plan is ready, update the GitHub issue and wait for a s
 
 Once your plan has been approved, proceed to the next applicable step.
 
-<h4 class="b-header has-text-grey is-marginless">Step 4</h4>
-### Design
+#### Step 4
+## Design
 
-**Get Design and UX approved (if applicable).**
+##### Get Design and UX approved (if applicable).
 
 If your feature involves user-facing changes, please run these by us, either through wireframes or high fidelity mockups. We will either approve your design or provide feedback and ask you to make some changes.
 
 Once your design has been approved, proceed to Step 5.
 
-<h4 class="b-header has-text-grey is-marginless">Step 5</h4>
-### Dependencies
+#### Step 5
+## Dependencies
 
-**Wait for CC staff to resolve dependencies (if applicable).**
+##### Wait for CC staff to resolve dependencies (if applicable).
 
 If your feature depends on work that only CC staff can do, please wait for us to do that work. If you can start working on other parts of the feature in parallel, you may go ahead.
 
-<h4 class="b-header has-text-grey is-marginless">Step 6</h4>
-### Code
+#### Step 6
+## Code
 
-**Write your code.**
+##### Write your code.
 
 At this point, CC staff and you should be on the same page about how the feature will be implemented and what it will look like. Here's where you get to actually implement it!
 
 Commit early and often, follow [our pull request and code guidelines](/contributing-code/pr-guidelines/), and write tests!
 
-<h4 class="b-header has-text-grey is-marginless">Step 7</h4>
-### Code Review
+#### Step 7
+## Code Review
 
-**Get feedback via code review.**
+##### Get feedback via code review.
 
 Once your pull request is ready, someone on CC staff will review your code and provide feedback. Once all feedback has been resolved, your code will be merged into the main branch of the repository.
 
 You may have to do Steps 4-7 for multiple codebases in some cases, e.g. if your work includes both the CC Catalog API and CC Search, the API work will have to be done before the CC Search work that depends on it.
 
-<h4 class="b-header has-text-grey is-marginless">Step 8</h4>
-### Staging
+#### Step 8
+## Staging
 
-**Get feedback via live testing.**
+##### Get feedback via live testing.
 
 Once your code is merged, it will be deployed to the staging server and tested manually (in addition to the comprehensive automated tests that you've already written). We may need to run some changes by our product counsel. This may produce an additional round of feedback for you to address.
 
-<h4 class="b-header has-text-grey is-marginless">Step 9</h4>
-### Production
+#### Step 9
+## Production
 
-**The feature is live!**
+##### The feature is live!
 
 Once any feedback from Step 8 is resolved, we will merge your code into the stable branch and deploy it to production. Congrats, your feature is live!

themes/vocabulary_theme/templates/cc-search-guide.html

@@ -13,13 +13,17 @@ <h1>{{ this.title }}</h1>
         <div class="table-of-progress">
           <h4 class="step-header">Steps</h4>
           <ul>
+            {% set step = namespace (number = 0) %}
             {% for item in this.body.toc %}
-              <li class="step">
-                <a class="link" href="#{{ item.anchor }}">
-                  <span class="number">{{ loop.index - 1 }}</span>
-                  <span class="name">{{ item.title }}</span>
-                </a>
-              </li>
+              {% if (loop.index + 1)%3 == 0 %}
+                <li class="step">
+                  <a class="link" href="#{{ this.body.toc[loop.index - 2].anchor }}">
+                    <span class="number">{{ step.number }}</span>
+                    <span class="name">{{ item.title }}</span>
+                  </a>
+                </li>
+                {% set step.number = step.number + 1 %}
+              {% endif%}
             {% endfor %}
           </ul>
         </div>

webpack/sass/main.scss

@@ -532,8 +532,21 @@ code {
     @extend .padding-bottom-xxl;
 
     .content {
-      h3 {
-        margin-top: 0rem;
+      h2 {
+        @extend .is-marginless;
+        @extend .padding-bottom-small;
+      }
+      h4 {
+        @extend .b-header;
+        @extend .is-marginless;
+        @extend .padding-bottom-small;
+
+        color: $color-gray;
+      }
+      h5 {
+        @extend .is-marginless;
+        @extend .b-header;
+        @extend .padding-bottom-big;
       }
     }
   }