Demo

_data/evaluation-domains.yml

@@ -21,7 +21,7 @@
   domain: 'Why Evaluate?'
   parent: ''
   description: >
-    Evaluation is a powerful tool that agencies can use to understand what works, under what circumstances, and for whom. Yet, many agency staff and leaders may be unfamiliar with evaluation, and may not fully appreciate what is evaluation is, why it is important, and how it can help them in their roles. These resources will help you talk to others about the value of evaluation and give you the tools you need to make the case to evaluate your agency's programs, policies, and/or operations.
+    Evaluation is a powerful tool that agencies can use to understand what works, under what circumstances, and for whom. Yet, many agency staff and leaders may be unfamiliar with evaluation, and may not fully appreciate what evaluation is, why it is important, and how it can help them in their roles. These resources will help you talk to others about the value of evaluation and give you the tools you need to make the case to evaluate your agency's programs, policies, and/or operations.
 - name: 'Working with Evaluators'
   path: '/evaluation-toolkit/non-evaluator/'
   domain: 'Working with Evaluators'

_includes/footer.html

@@ -53,7 +53,7 @@ <h3 class="usa-footer__primary-link">RELATED COUNCILS</h3>
 
                                     <div class="grid-row margin-top-1 margin-bottom-1">
                                         <div class="grid-col-auto padding-top-105">
-                                            <a id="footerMailTo" href="mailto:[email protected]" target="_blank" title="Mail"><i class="fa fa-envelope img-align" aria-hidden="true"></i></a>
+                                            <a id="footerMailTo" href="mailto:[email protected]" target="_blank" title="Mail"><i class="fa fa-envelope img-align" aria-hidden="true" style="padding-top:6px"></i></a>
                                         </div>
                                         <div class="grid-col-auto padding-top-105 padding-left-105">
                                             <a id="footerLinkedIn" href="https://www.linkedin.com/company/evaluation-gov/" target="_blank" title="LinkedIn"><img src="{{site.baseurl}}/assets/images/linkedin-icon.png" alt="LinkedIn Icon" class="img-align" /></a>

_includes/sidenav-keywords.html

@@ -5,7 +5,7 @@
 
 {% assign all_resources = site.data.toolkit_resources | where: "keywords", page.title | group_by: "domain" %}
 
-<a class="usa-button usa-button--outline border-0 margin-bottom-2 margin-top-3" href="{{ site.baseurl }}/evaluation-toolkit/">Back to Toolkit</a>
+<a class="usa-button usa-button--outline border-0 margin-bottom-2 margin-top-3" href="{{ site.baseurl }}/evaluation-toolkit/">Toolkit Homepage</a>
 
 <nav aria-label="Secondary navigation" class="position-sticky top-2">
   <strong>Browse "{{ page.title }}" resources by category:</strong>

_includes/toolkit_resource.html

@@ -8,54 +8,50 @@
   {% endif %}
 {% endif %}
 <div class="event-card padding-bottom-3 margin-top-1">
-  <div class="grid-row clearfix shadow-5 radius-lg bg-white padding-2 flex-align-center">
-    <div class="tablet:grid-col-12">
-      <h3 class="font-sans-md margin-top-0">
-        {% if titleLink %}
-          <a class="text-no-underline hover:text-underline" href="{{ titleLink }}" target="_blank">{{ resource.title }}</a>
-        {% else %}
-          {{ resource.title }}
-        {% endif %}
-        </h3>
-      <div class="text-base margin-bottom-1">
-        <div class="margin-top-neg-105">
-          <p>{{ resource.description | liquify }}</p>
-          {% if resource.source %}
-            <p><strong class="bg-white">Source:</strong> {{ resource.source }}</p>
-          {% endif %}
+    <div class="grid-row clearfix shadow-5 radius-card bg-white padding-2 flex-align-center">
+        <div class="tablet:grid-col-12 margin-105">
+            <h3 class="font-sans-md margin-top-0">
+                {{ resource.title }}
+                <i class="fa fa-info-circle usa-tooltip text-base" data-position="right"
+                   title="{% if resource.citation %} {{ resource.citation }}{% endif %}" aria-label="Info for {{ resource.title }}"></i>
+            </h3>
+            <div class="grid-row">
+                <div class="desktop:grid-col-9 text-base margin-bottom-1 display-flex margin-top-neg-1">
+                    {{ resource.image }}
+                    <strong><p class="margin-top-0 margin-left-05 margin-right-105 margin-top-5">{{ resource.type }}</p></strong>
+                    {% if resource.another_type %}
+                    {{ resource.another_image }}
+                    <strong><p class="margin-top-0 margin-left-05 margin-top-5">{{ resource.another_type }}</p></strong>
+                    {% endif %}
+                </div>
+                <div class="desktop:grid-col-3 text-base margin-bottom-1 margin-top-neg-1">
+                    {% if titleLink %}
+                    <a class="usa-button radius-pill padding-y-1 font-sans-3xs external-link-off" href="{{ titleLink }}" target="_blank" aria-label="Open in New Tab for {{ resource.title }}">Open Resource</a>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="text-base-darker margin-bottom-1">
+                <div class="margin-top-neg-2">
+                    <p>{{ resource.description | liquify }}</p>
+                </div>
+            </div>
+            <div class="grid-row">
+
+                <div class="desktop:grid-col-12 text-base margin-bottom-1">
+                    <div class="margin-top-neg-05">
+                        <strong>
+                            Related Resources
+                        </strong>
+                        {% for tag in resource.keywords %}
+                        {% assign slug_tag = tag | slugify %}
+                        <a href="{{ '/keywords/' | append: slug_tag | relative_url }}" aria-label="{{ tag }} tag" class="usa-button btn-primary margin-05 radius-pill padding-y-1 font-sans-3xs margin-top-card">{{ tag }}</a>
+                        {% else %}
+                        This resource has no keywords.
+                        {% endfor %}
+                    </div>
+                </div>
+
+            </div>
         </div>
-      </div>
     </div>
-    <div class="grid-row tablet:grid-col-12">
-      <div class="mobile-lg:grid-col-3">
-        <strong>Resource Type</strong>
-        <p class="margin-top-0">{{ resource.type }}</p>
-      </div>
-      <div class="mobile-lg:grid-col-4">
-        <strong>Keywords</strong>
-        <p class="margin-top-0">
-          {% for tag in resource.keywords %}
-          {% assign slug_tag = tag | slugify %}
-          <a href="{{ '/keywords/' | append: slug_tag | relative_url }}" aria-label="Keyword: {{tag}}">{{ tag }}</a>{% if forloop.last == false %},{% endif %}
-          {% else %}
-          This resource has no keywords.
-          {% endfor %}
-          </p>
-      </div>
-      {% if resource.year %}
-      <div class="mobile-lg:grid-col-2">
-        <strong>Year</strong>
-        <p class="margin-top-0">{{ resource.year }}</p>
-      </div>
-      {% endif %}
-      {% if resource.cover_sheet %}
-      <div class="mobile-lg:grid-col-3">
-        <strong>Cover Sheet</strong>
-        <p class="margin-top-0"><a href="{{ site.baseurl }}/assets/resources/{{ resource.cover_sheet }}"
-                                   aria-label="{{ resource.title }} Cover Sheet"
-                                   target="_blank">Cover Sheet</a></p>
-      </div>
-      {% endif %}
-    </div>
-  </div>
 </div>

_layouts/keyword.html

@@ -8,7 +8,7 @@
   <div class="grid-container">
     <div class="grid-row grid-gap">
       <div class="priority-tag-line">
-        <h1 class="text-white margin-0 font-ui-2xl">Keyword Filter Page</h1>
+        <h1 class="text-white margin-0 font-ui-2xl">The Federal Evaluation Toolkit<span class="beta-tag">BETA</span></h1>
       </div>
     </div>
   </div>
@@ -35,7 +35,6 @@ <h3 id="{{ resources.name | slugify }}" class="resource-category margin-top-0 te
           <p class="padding-bottom-4">
             <a href="{{ site.baseurl }}{{ target_item.path }}">See all resources in
               <strong>{{ resources.name }}</strong>
-              >
             </a>
           </p>
         {% endfor %}

assets/css/main.scss

@@ -785,95 +785,123 @@ blockquote p {
 }
 
 .toolkit-title {
-  margin: 0;
-
-  @media only screen and (max-width: 639px) {
-    margin-top: 1.1rem;
-  }
+    margin: 0;
 
+        @media only screen and (max-width: 639px) {
+            margin-top: 1.1rem;
+        }
 }
 
-@media only screen and (max-width: 639px) {
-  .title {
-      margin-top: 1.1rem;
-  }
-}
+    @media only screen and (max-width: 639px) {
+        .title {
+            margin-top: 1.1rem;
+        }
+    }
 
-@media only screen and (min-width: 640px) {
-  .toolkit-text {
-    text-align: left;
-  }
+    @media only screen and (min-width: 640px) {
+        .toolkit-text {
+            text-align: left;
+        }
 
-  .toolkit-padding {
-    padding-left: 5rem;
-    padding-right: 5rem;
-  }
+        .toolkit-padding {
+            padding-left: 5rem;
+            padding-right: 5rem;
+        }
 
-  .toolkit-hero-margin {
-    margin-left: 2.5rem;
-    margin-right: 2.5rem;
-  }
-}
+        .toolkit-hero-margin {
+            margin-left: 2.5rem;
+            margin-right: 2.5rem;
+        }
+    }
 
-.toolkit-hero {
-  padding: 40px;
-  border-radius: 30px;
-  color: #fff;
-  padding-bottom: 20px;
-  background-color: #082643;
+    .toolkit-hero {
+        padding: 40px;
+        border-radius: 30px;
+        color: #fff;
+        padding-bottom: 20px;
+        background-color: #082643;
 
-  @media only screen and (max-width: 639px) {
-    text-align: center;
-  }
+        @media only screen and (max-width: 639px) {
+            text-align: center;
+        }
 
-  .circle-evaluation-card {
-    background: unset;
-  }
-}
+        .circle-evaluation-card {
+            background: unset;
+        }
+    }
 
-.toolkit-button:visited {
-  color:#005ea2;
-}
+    .toolkit-button:visited {
+        color: #005ea2;
+    }
 
-.toolkit-button::after {
-  content: '>>';
-  margin-left: 0.5em;
-}
+    .toolkit-button::after {
+        content: '>>';
+        margin-left: 0.5em;
+    }
 
-h2.toolkit-title {
-  font-size: 27px;
-}
+    h2.toolkit-title {
+        font-size: 27px;
+    }
 
-h3.toolkit-title {
-  font-size: 23px;
-}
+    h3.toolkit-title {
+        font-size: 23px;
+        margin-top: 2.5rem;
+        border-top: 0.15rem solid #5b616b;
+        padding-top: 0.25rem;
+        color: #5b616b;
+    }
 
-.resource-category {
-  color: #5b616b;
-  border-top: 0.15rem solid #5b616b;
-  padding-top: 0.25rem;
-  font-family: Public Sans Web,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 1.13rem;
-  font-weight: 600;
-}
+    .resource-category {
+        color: #5b616b;
+        border-top: 0.15rem solid #5b616b;
+        padding-top: 0.25rem;
+        font-family: Public Sans Web,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+        font-size: 1.13rem;
+        font-weight: 600;
+    }
 
-.img-align {
-    width: 30px;
-    height: 30px;
-    max-width: none !important;
-    vertical-align: middle;
-}
+    .img-align {
+        width: 30px;
+        height: 30px;
+        max-width: none !important;
+        vertical-align: middle;
+    }
+
+    .fa-envelope {
+        background: #0d7ea2;
+        color: white;
+    }
 
-.fa-envelope {
-    background: #0d7ea2;
-    color: white;
+    .fa {
+        padding: 5px;
+        text-align: center;
+        text-decoration: none;
+        border-radius: 10%;
+    }
+
+    .radius-card{
+        border-radius:4rem;
+    }
+
+    .font-size-logo{
+        font-size:24px;
+    }
+
+    .margin-top-5{
+        margin-top:5px;
+    }
+
+
+@media only screen and (max-width: 440px) {
+    .margin-top-card{
+    margin-top:1rem;
+}
 }
 
-.fa {
-    padding: 6px;
+.usa-tooltip__body--wrap {
+    min-width: 50vw;
     text-align: center;
-    text-decoration: none;
-    border-radius: 10%;
+    word-wrap: break-word;
 }
 
 .blog-text-box {

assets/js/app.js

@@ -5,6 +5,7 @@ console.log("Hi from Federalist");
 $("a").each(function(index, element) {
     if (!$(element).attr("href").startsWith('https://www.evaluation.gov' && 'javascript:void(0)')
         && !$(element).hasClass('usa-link--external')
+        && !$(element).hasClass('external-link-off')
         && this.host !== location.host){
         if ($(element).hasClass('usa-link--external-white'))
             $(element).addClass("usa-link--external-white");