Use hero images on every page (#123)

* Convert partner page to using a hero hero

Still needs some cleanup and refactoring

* Give all pages a hero image

Pages without a title or subtitle get a half-size hero image. Also
cleans up layouts and attributes.

* Add different images for each page

_includes/components/hero-image.html

@@ -1,7 +1,20 @@
-<div id="hero-image" class="grid-col-12">
+{% if include.title or include.subtitle %}
+<div
+  class="hero-image grid-col-12"
+  style="background-image: url({{include.image}})"
+>
   <div class="grid-col-12 margin-top-3 margin-left-3 desktop:margin-left-15">
-    <div id="hero-p" class="padding-2 desktop:margin-left-15">
-      <p>{{ include.content }}</p>
+    <div class="hero-text padding-2 desktop:margin-left-15">
+      {% if include.title %}
+      <h1 class="margin-top-0">{{include.title}}</h1>
+      {% endif %}
+      <p>{{ include.subtitle }}</p>
     </div>
   </div>
 </div>
+{% else %}
+<div
+  class="hero-image-small grid-col-12"
+  style="background-image: url({{include.image}})"
+></div>
+{% endif %}

_includes/core/header.html

@@ -23,11 +23,6 @@
             <span>Partners</span>
           </a>
         </li>
-        <li class="usa-nav__primary-item">
-          <a class="usa-nav__link" href="{{ site.baseurl }}/code-of-conduct">
-            <span>Code of Conduct</span>
-          </a>
-        </li>
         <li class="usa-nav__primary-item">
           <a class="usa-nav__link" href="{{ site.baseurl }}/slack">
             <span>Slack</span>
@@ -39,21 +34,8 @@
           </a>
         </li>
         <li class="usa-nav__primary-item">
-          <a
-            class="usa-nav__link"
-            href="https://github.com/civictechdc"
-            target="_blank"
-          >
-            <span>GitHub</span>
-          </a>
-        </li>
-        <li class="usa-nav__primary-item">
-          <a
-            class="usa-nav__link"
-            href="https://www.linkedin.com/company/civic-tech-dc/"
-            target="_blank"
-          >
-            <span>LinkedIn</span>
+          <a class="usa-nav__link" href="{{ site.baseurl }}/code-of-conduct">
+            <span>Code of Conduct</span>
           </a>
         </li>
       </ul>

_includes/core/meta.html

@@ -2,8 +2,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>{{page.title}}</title>
 <link rel="shortcut icon" href="{{ site.baseurl }}/assets/images/favicon.ico" />
-{% if page.description %}
-<meta content="{{ page.description }}" name="description" />
+{% if page.subtitle %}
+<meta content="{{ page.subtitle }}" name="description" />
 {% else %}
 <meta content="{{ site.description }}" name="description" />
 {% endif %}
@@ -19,10 +19,10 @@
 <meta content="article" property="og:type" />
 {% else %}
 <meta content="website" property="og:type" />
-{% endif %} {% if page.description %}
-<meta content="{{ page.description }}" property="og:description" />
+{% endif %} {% if page.subtitle %}
+<meta content="{{ page.subtitle }}" property="og:description" />
 {% else %}
-<meta content="{{ site.description }}" property="og:description" />
+<meta content="{{ site.subtitle }}" property="og:description" />
 {% endif %} {% if page.url %}
 <meta content="{{ site.url }}{{ page.url }}" property="og:url" />
 {% endif %} {% if page.date %}
@@ -35,7 +35,7 @@
 <meta content="{{ site.url }}{{page.image}}" property="og:image" />
 {% else %}
 <meta
-  content="{{ site.baseurl }}/assets/images/hero-social-tables-800px.png"
+  content="{{ site.baseurl }}/assets/images/hero-image-homepage"
   property="og:image"
 />
 {% endif %} {% if page.categories %} {% for category in page.categories limit:1
@@ -55,16 +55,16 @@
 <meta name="twitter:title" content="{{ site.title }}" />
 {% endif %} {% if page.url %}
 <meta name="twitter:url" content="{{ site.url }}{{ page.url }}" />
-{% endif %} {% if page.description %}
-<meta name="twitter:description" content="{{ page.description }}" />
+{% endif %} {% if page.subtitle %}
+<meta name="twitter:description" content="{{ page.subtitle }}" />
 {% else %}
-<meta name="twitter:description" content="{{ site.description }}" />
+<meta name="twitter:description" content="{{ site.subtitle }}" />
 {% endif %} {% if page.image %}
 <meta name="twitter:image" content="{{ site.url }}{{page.image}}" />
 {% else %}
 <meta
   name="twitter:image:src"
-  content="{{ site.baseurl }}/assets/images/hero-social-tables-800px.png"
+  content="{{ site.baseurl }}/assets/images/hero-image-homepage"
 />
 {% endif %}
 

_layouts/default.html

@@ -3,7 +3,8 @@
 ---
 
 {% include core/header.html %} {% include core/google-analytics.html %} {%
-include components/hero-text.html heading=page.title text=page.description %}
+include components/hero-image.html title=page.title subtitle=page.subtitle
+image=page.hero-image %}
 <div class="grid-container">{{ content }}</div>
 
 {% include core/footer.html %}

code-of-conduct.md

@@ -1,10 +1,6 @@
 ---
 layout: default
-title: Code of Conduct
-type: document
-deeplink: true
-redirect_from:
-  - /resources/codeofconduct.html
+hero-image: assets/images/hero-image-code-of-conduct.jpg
 ---
 
 # Code of Conduct
@@ -49,13 +45,13 @@ When more people share their knowledge and skills, they give a project a greater
 
 ## Photography
 
-Please be aware that in order to grow and promote our organization, for general record keeping, and to build community amongst our participants, photography and videography often occur at our events. Participation at our events is voluntary. By participating in our events, it is understood that your image or likeness may be included in the photography or videography and shared on public websites and media content. If you would like further information about this policy, please contact [email protected].
+Please be aware that in order to grow and promote our organization, for general record keeping, and to build community amongst our participants, photography and videography often occur at our events. Participation at our events is voluntary. By participating in our events, it is understood that your image or likeness may be included in the photography or videography and shared on public websites and media content. If you would like further information about this policy, please contact <[email protected]>.
 
 ## Procedures
 
 ### Making a Report
 
-If you are unable to resolve the issue, or are uncomfortable doing so, you should contact a Captain, either in person or electronically. You can email us at [email protected], which goes to all of the leadership team. Captains agree to keep information shared in association with a Code of Conduct violation private, and may reveal it only with the approval of the affected person(s).
+If you are unable to resolve the issue, or are uncomfortable doing so, you should contact a Captain, either in person or electronically. You can email us at <[email protected]>, which goes to all of the leadership team. Captains agree to keep information shared in association with a Code of Conduct violation private, and may reveal it only with the approval of the affected person(s).
 
 When making a report, the following information is useful, but not required:
 
@@ -73,4 +69,4 @@ Captains may take any appropriate action, including expulsion and a ban from fut
 
 ## Contributing to This Code
 
-This is a living document and is ultimately owned by the Civic Tech DC community. We are interested in your comments and suggestions! You can contribute to the code by opening an issue or pull request on this [repository](https://github.com/civictechdc/codefordc-website) or by contacting the leadership team at [email protected].
+This is a living document and is ultimately owned by the Civic Tech DC community. We are interested in your comments and suggestions! You can contribute to the code by opening an issue or pull request on this [repository](https://github.com/civictechdc/codefordc-website) or by contacting the leadership team at <[email protected]>.

donate.md

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Donate to Civic Tech DC
+hero-image: assets/images/hero-image-donate.jpg
 ---
 
 # Support Civic Tech DC

index.md

@@ -1,9 +1,8 @@
 ---
-layout: hero-image
-redirect_from:
-  - /contact.html
+layout: default
 title: Civic Tech DC
-description: Founded in 2012, Civic Tech DC is a non-partisan, non-political group of volunteer civic hackers working together to solve local issues and help people engage with the city.
+subtitle: Founded in 2012, Civic Tech DC is a non-partisan, non-political group of volunteer civic hackers working together to solve local issues and help people engage with the city.
+hero-image: assets/images/hero-image-homepage.jpg
 ---
 
 {% include components/meetup-events.html %}

partners.md

@@ -2,7 +2,8 @@
 layout: default
 banner-hero: true
 title: Partners
-description: Civic Tech DC is a group of technologists and advocates who volunteer their skills and time to improve community conditions and local civic issues. We partner with local nonprofits, community-based organizations, and government to help them solve problems using technology.
+subtitle: Civic Tech DC is a group of technologists and advocates who volunteer their skills and time to improve community conditions and local civic issues. We partner with local nonprofits, community-based organizations, and government to help them solve problems using technology.
+hero-image: assets/images/hero-image-partners.jpg
 ---
 
 ## Become a partner

sass/custom/styles.scss

@@ -24,8 +24,7 @@ body {
   height: initial;
 }
 
-#hero-image {
-  background-image: url(/assets/images/hero-social-tables.jpg);
+.hero-image {
   height: 60vh;
   background-position: center 20%;
   background-repeat: no-repeat;
@@ -34,15 +33,24 @@ body {
   overflow: hidden;
 }
 
-#hero-p {
+.hero-image-small {
+  height: 40vh;
+  background-position: center 20%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-text {
   width: 94%;
   color: white;
   background: black;
   opacity: 0.75;
 }
 
 @media only screen and (min-width: 1024px) {
-  #hero-p {
+  .hero-text {
     width: 35%;
   }
 }

slack.md

@@ -1,9 +1,6 @@
 ---
 layout: default
-redirect_from:
-  - /resources/slack.html
-  - /joinslack
-  - /joinslack.html
+hero-image: assets/images/hero-image-slack.jpg
 ---
 
 # Join our Slack