Added featured news section. (#450)

website/public/css/index.css

@@ -6355,3 +6355,15 @@ figure {
 .info-box > * {
  background-color: transparent;
 }
+.news-image {
+ object-fit: scale-down;
+ margin-left: 20px;
+}
+@media (max-width: 768px) {
+ .news-feature h3 {
+ padding-top: 10px;
+ }
+ .news-image {
+ margin-left: auto;
+ }
+}

website/public/news/index.html

@@ -195,6 +195,126 @@ <h1>News</h1>
  >release notes</a
  >!
  </div>
+ <div
+ class="news-feature cagov-with-sidebar cagov-with-sidebar-left cagov-featured-section cagov-block"
+ >
+ <div>
+ <div class="cagov-stack cagov-featured-sidebar">
+ <h3>
+ Seattle Mayor Bruce Harrell Announces City Initiative to Help
+ Save Families Up to $23,000 Per Year
+ </h3>
+ <div class="cagov-hero-body-content">
+ <p>
+ In an Executive Order, the Mayor directed departments to
+ unify their program applications on CiviForm.
+ </p>
+ <a
+ href="https://harrell.seattle.gov/2023/07/12/seattle-mayor-bruce-harrell-announces-city-initiative-to-help-save-families-up-to-23000-per-year/"
+ target="_blank"
+ class="btn-primary m-t-1"
+ >
+ Read more
+ </a>
+ </div>
+ </div>
+ <div>
+ <img
+ class="news-image cagov-featured-image"
+ src="/img/affordable-seattle-announcement.jpg"
+ />
+ </div>
+ </div>
+ </div>
+ <hr
+ style="
+ width: 100%;
+ margin: auto;
+ margin-bottom: 50px;
+ border-width: 1px;
+ color: darkslategray;
+ "
+ />
+ <div
+ class="news-feature cagov-with-sidebar cagov-with-sidebar-left cagov-featured-section cagov-block"
+ >
+ <div>
+ <div class="cagov-stack cagov-featured-sidebar">
+ <h3>CiviForm Awarded Anthem Silver Award</h3>
+ <div class="cagov-hero-body-content">
+ <p>
+ CiviForm was awarded a Silver award for excellence in a
+ product dedicated to advancing humanitarian action and
+ services.
+ </p>
+ <a
+ href="https://www.anthemawards.com/winners/list/entry/#!humanitarian-action-services/product/civiform/1976/-1/456542"
+ target="_blank"
+ class="btn-primary m-t-1"
+ >
+ Read more
+ </a>
+ </div>
+ </div>
+ <div>
+ <img
+ class="news-image cagov-featured-image"
+ src="/img/anthem-awards.png"
+ />
+ </div>
+ </div>
+ </div>
+ <hr
+ style="
+ width: 100%;
+ margin: auto;
+ margin-bottom: 50px;
+ border-width: 1px;
+ color: darkslategray;
+ "
+ />
+ <div
+ class="news-feature cagov-with-sidebar cagov-with-sidebar-left cagov-featured-section cagov-block"
+ >
+ <div>
+ <div class="cagov-stack cagov-featured-sidebar">
+ <h3>
+ Bloomington Wins Best of Indiana Award for Best Application
+ Serving the Public
+ </h3>
+ <div class="cagov-hero-body-content">
+ <p>
+ The City of Bloomington has been awarded for its use of
+ CiviForm in streamlining the process of applying for public
+ grants, scholarships, and other assistance programs.
+ </p>
+ <a
+ href="https://bloomington.in.gov/news/2023/10/27/5769"
+ target="_blank"
+ class="btn-primary m-t-1"
+ >
+ Read more
+ </a>
+ </div>
+ </div>
+ <div>
+ <img
+ class="news-image cagov-featured-image"
+ src="/img/bloomington-best-of-in-award.jpg"
+ />
+ </div>
+ </div>
+ </div>
+ <hr
+ style="
+ width: 100%;
+ margin: auto;
+ margin-bottom: 50px;
+ border-width: 1px;
+ color: darkslategray;
+ "
+ />
+ <h2>More stories</h2>
  <div class="cagov-stack">
  <a
  href="https://seattlechannel.org/Mayor/?videoid=x155163"

website/src/_data/news_featured.json

@@ -0,0 +1,26 @@
+[
+ {
+ "URL": "https:\/\/harrell.seattle.gov\/2023\/07\/12\/seattle-mayor-bruce-harrell-announces-city-initiative-to-help-save-families-up-to-23000-per-year\/",
+ "Government": "Seattle",
+ "Title": "Seattle Mayor Bruce Harrell Announces City Initiative to Help Save Families Up to $23,000 Per Year",
+ "Description": "In an Executive Order, the Mayor directed departments to unify their program applications on CiviForm.",
+ "Publisher": "City of Seattle",
+ "Image": "affordable-seattle-announcement.jpg"
+ },
+ {
+ "URL": "https:\/\/www.anthemawards.com\/winners\/list\/entry\/#!humanitarian-action-services\/product\/civiform\/1976\/-1\/456542",
+ "Government": "General",
+ "Title": "CiviForm Awarded Anthem Silver Award",
+ "Description": "CiviForm was awarded a Silver award for excellence in a product dedicated to advancing humanitarian action and services.",
+ "Publisher": "Anthem Awards",
+ "Image": "anthem-awards.png"
+ },
+ {
+ "URL": "https:\/\/bloomington.in.gov\/news\/2023\/10\/27\/5769",
+ "Government": "Bloomington",
+ "Title": "Bloomington Wins Best of Indiana Award for Best Application Serving the Public",
+ "Description": "The City of Bloomington has been awarded for its use of CiviForm in streamlining the process of applying for public grants, scholarships, and other assistance programs.",
+ "Publisher": "City of Bloomington",
+ "Image": "bloomington-best-of-in-award.jpg"
+ }
+]

website/src/_includes/layouts/news-feature.njk

@@ -0,0 +1,27 @@
+<div
+ class="news-feature cagov-with-sidebar cagov-with-sidebar-left cagov-featured-section cagov-block"
+>
+ <div>
+ <div class="cagov-stack cagov-featured-sidebar">
+ <h3>{{story.Title}}</h3>
+ <div class="cagov-hero-body-content">
+ <p>{{story.Description}}</p>
+ <a href="{{story.URL}}" target="_blank" class="btn-primary m-t-1">
+ Read more
+ </a>
+ </div>
+ </div>
+ <div>
+ <img class="news-image cagov-featured-image" src="/img/{{story.Image}}" />
+ </div>
+ </div>
+</div>
+<hr
+ style="
+ width: 100%;
+ margin: auto;
+ margin-bottom: 50px;
+ border-width: 1px;
+ color: darkslategray;
+ "
+/>

website/src/css/index.scss

@@ -170,3 +170,17 @@ figure {
 .info-box > * {
  background-color: transparent;
 }
+
+.news-image {
+ object-fit: scale-down;
+ margin-left: 20px;
+}
+
+@media (max-width: $mobile) {
+ .news-feature h3 {
+ padding-top: 10px;
+ }
+ .news-image {
+ margin-left: auto;
+ }
+}

website/src/news.md

@@ -10,6 +10,14 @@ title: CiviForm | News
 Check out the latest product updates in our <a href="https://github.com/civiform/civiform/releases" target="_blank">release notes</a>!
 </div>
 
+{%- for story in news_featured -%}
+{%- block news_feature -%}
+{%- include "layouts/news-feature.njk" -%}
+{%- endblock -%}
+{%- endfor -%}
+
+<h2>More stories</h2>
+
 <div class="cagov-stack">
  {%- for story in news -%}
  <a href="{{story.URL}}" target="_blank" class="btn-action-primary m-t-1"><span class="btn-action-title">{{story.Title}}</span>