[Notts] Added front-end

-Added Notts Police Branding -Removed FMS footer -Added .site-message styling -Added favicon -Added Emails
mysociety · Jun 17, 2024 · 7b95b92 · 7b95b92
1 parent 06e6ea2
commit 7b95b92
Show file tree

Hide file tree

Showing 13 changed files with 514 additions and 33 deletions.
diff --git a/templates/email/nottinghamshirepolice/_email_color_overrides.html b/templates/email/nottinghamshirepolice/_email_color_overrides.html
@@ -1,21 +1,23 @@
 [%
 
-blue = '#385889'
+blue = '#1d1a3a'
 blue_pale = '#bec7d6'
+red = '#b72c5d'
 
 body_background_color = blue_pale
 body_text_color = color_black
 
-header_background_color = color_white
+header_background_color = blue
 header_text_color = color_white
 
 secondary_column_background_color = color_white
 
-button_background_color = blue
+button_background_color = red
 button_text_color = color_white
+link_text_color = '#00e'
 
 logo_file = 'logo.png'
-logo_width = "220" # pixel measurement, but without 'px' suffix
-logo_height = "74" # pixel measurement, but without 'px' suffix
+logo_width = "265" # pixel measurement, but without 'px' suffix
+logo_height = "80" # pixel measurement, but without 'px' suffix
 
 %]
diff --git a/templates/web/nottinghamshirepolice/footer_extra.html b/templates/web/nottinghamshirepolice/footer_extra.html
@@ -0,0 +1,128 @@
+<footer class="main-footer">
+  <div class="container">
+    <div class="main-content">
+      <div class="first-column">
+        <img src="/cobrands/nottinghamshirepolice/images/logo.svg" width="265" height="80" alt="Nottinghamshire PCC logo" load="lazy">
+        <img src="/cobrands/nottinghamshirepolice/images/inmediate-justice-logo.png" width="265" height="100" alt="Inmediate Justice logo" load="lazy">
+        <span class="copyright">© 2024 Nottinghamshire PCC</span>
+        <div class="social-container">
+          <a class="logo-link" href="https://www.facebook.com/NottinghamshireOPCC" target="_blank" title="Follow us on Facebook" rel="noopener noreferrer">
+            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" aria-hidden="true" focusable="false" role="img">
+              <path fill="currentColor" d="M34 20.052C34 12.291 27.733 6 20 6S6 12.29 6 20.052c0 6.587 4.523 12.12 10.62 13.64v-9.347h-2.887v-4.293h2.887v-1.85c0-4.78 2.155-6.998 6.836-6.998.886 0 2.417.175 3.046.351v3.886a18 18 0 0 0-1.618-.055c-2.297 0-3.183.873-3.183 3.14v1.526h4.572l-.788 4.293h-3.79V34C28.63 33.16 34 27.237 34 20.052"></path>
+            </svg>
+          </a>
+          <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" href="https://www.instagram.com/nottsopcc/" target="_blank" title="Follow us on Instagram" rel="noopener noreferrer">
+            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" aria-hidden="true" focusable="false" role="img">
+              <path fill="currentColor" d="M20.003 12.821A7.167 7.167 0 0 0 12.826 20a7.167 7.167 0 0 0 7.177 7.179A7.167 7.167 0 0 0 27.18 20a7.167 7.167 0 0 0-7.177-7.179m0 11.846A4.675 4.675 0 0 1 15.337 20a4.67 4.67 0 0 1 4.666-4.667A4.67 4.67 0 0 1 24.67 20a4.675 4.675 0 0 1-4.666 4.667m9.145-12.14c0 .931-.75 1.675-1.674 1.675a1.674 1.674 0 1 1 1.674-1.674m4.754 1.7c-.107-2.243-.619-4.23-2.262-5.867-1.636-1.637-3.623-2.15-5.865-2.262-2.311-.13-9.239-.13-11.55 0-2.236.107-4.222.619-5.865 2.256s-2.15 3.624-2.262 5.867c-.13 2.311-.13 9.24 0 11.552.107 2.243.619 4.23 2.262 5.867s3.623 2.15 5.865 2.262c2.311.13 9.239.13 11.55 0 2.242-.107 4.229-.619 5.865-2.262 1.637-1.637 2.15-3.624 2.262-5.867.13-2.312.13-9.234 0-11.546m-2.986 14.026a4.72 4.72 0 0 1-2.661 2.662c-1.843.731-6.215.562-8.252.562-2.036 0-6.415.163-8.251-.562a4.72 4.72 0 0 1-2.662-2.661c-.73-1.844-.562-6.217-.562-8.254s-.162-6.417.562-8.253a4.72 4.72 0 0 1 2.662-2.662c1.842-.731 6.215-.562 8.251-.562 2.037 0 6.415-.163 8.252.562a4.72 4.72 0 0 1 2.66 2.661c.732 1.844.563 6.217.563 8.254s.169 6.417-.562 8.253"></path>
+            </svg>
+          </a>
+          <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" href="https://uk.linkedin.com/company/nottsopcc" target="_blank" title="Follow us on LinkedIn" rel="noopener noreferrer">
+            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" aria-hidden="true" focusable="false" role="img">
+              <path fill="currentColor" d="M32 6H7.994C6.894 6 6 6.906 6 8.019V31.98C6 33.094 6.894 34 7.994 34H32c1.1 0 2-.906 2-2.019V8.02C34 6.906 33.1 6 32 6M14.463 30h-4.15V16.638h4.156V30zm-2.075-15.187a2.407 2.407 0 0 1 0-4.813 2.41 2.41 0 0 1 2.406 2.406 2.403 2.403 0 0 1-2.407 2.406M30.018 30h-4.15v-6.5c0-1.55-.03-3.544-2.155-3.544-2.163 0-2.494 1.688-2.494 3.432V30h-4.15V16.638h3.981v1.824h.056c.556-1.05 1.913-2.156 3.932-2.156 4.2 0 4.98 2.769 4.98 6.369z"></path>
+            </svg>
+          </a>
+          <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" href="https://twitter.com/NottsOPCC" target="_blank" title="Follow us on X" rel="noopener noreferrer">
+            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" aria-hidden="true" focusable="false" role="img">
+              <path fill="currentColor" d="M28.65 7h4.413l-9.638 11.013L34.763 33h-8.875l-6.957-9.087L10.981 33H6.563l10.306-11.781L6 7h9.1l6.281 8.306zM27.1 30.363h2.444L13.769 9.5h-2.625z"></path>
+            </svg>
+          </a>
+          <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" href="https://www.youtube.com/@nottsopcc1563" target="_blank" title="Subscribe to us on Youtube" rel="noopener noreferrer">
+            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" aria-hidden="true" focusable="false" role="img">
+              <path fill="currentColor" d="M33.416 13.08a3.51 3.51 0 0 0-2.476-2.49C28.756 10 20 10 20 10s-8.756 0-10.94.59a3.51 3.51 0 0 0-2.476 2.49C6 15.28 6 19.864 6 19.864s0 4.583.584 6.782c.323 1.215 1.272 2.128 2.476 2.45 2.184.59 10.94.59 10.94.59s8.756 0 10.94-.59c1.204-.322 2.153-1.24 2.476-2.45.584-2.199.584-6.782.584-6.782s0-4.583-.584-6.782M17.14 24.027V15.7l7.315 4.162z"></path>
+            </svg>
+          </a>
+        </div>
+      </div>
+      <div class="list-wrapper">
+        <ul class="sc-bmzYkS sc-iHGNWf fkuMef cgeyqU">
+          <li>
+            <span class="section-title">Get in touch</span>
+          </li>
+          <li class="contact-wrapper">
+            <span class="sc-fqkvVR dNQthx">Email:</span>
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" href="mailto:officepcc@notts.police.uk" target="_self" rel="noopener noreferrer">officepcc@notts.police.uk</a>
+          </li>
+          <li class="contact-wrapper">
+            <span class="sc-fqkvVR dNQthx">Phone:</span>
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" href="tel:0115%20844%205998" target="_self" rel="noopener noreferrer">0115 844 5998</a>
+          </li>
+        </ul>
+        <ul class="sc-bmzYkS sc-iHGNWf fkuMef cgeyqU">
+          <li class="opening-hours">
+            <span class="sc-fqkvVR cTNHDc">Office opening hours:</span>
+          </li>
+          <li class="">
+            <span class="sc-fqkvVR dNQthx">Monday to Thursday:</span>
+            <span class="sc-fqkvVR dNQthx">9am - 5pm</span>
+          </li>
+          <li class="">
+            <span class="sc-fqkvVR dNQthx">Friday:</span>
+            <span class="sc-fqkvVR dNQthx">9am - 4.30pm</span>
+          </li>
+          <li class="">
+            <span class="sc-fqkvVR dNQthx">Saturday to Sunday:</span>
+            <span class="sc-fqkvVR dNQthx">Office closed</span>
+          </li>
+        </ul>
+      </div>
+      <div class="list-wrapper">
+        <ul class="sc-bmzYkS sc-iHGNWf fkuMef cgeyqU">
+          <li class="">
+            <span class="section-title">Navigation</span>
+          </li>
+          <li class="default">
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" title="About us" href="https://www.nottinghamshire.pcc.police.uk/about-us">About us</a>
+          </li>
+          <li class="default">
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" title="What we do for you" href="https://www.nottinghamshire.pcc.police.uk/what-we-do-for-you">What we do for you</a>
+          </li>
+          <li class="default">
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" title="Project and Partnerships" href="https://www.nottinghamshire.pcc.police.uk/projects-and-partnerships">Project and Partnerships</a>
+          </li>
+          <li class="default">
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" title="Transparency" href="https://www.nottinghamshire.pcc.police.uk/transparency">Transparency</a>
+          </li>
+          <li class="default">
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" title="News" href="https://www.nottinghamshire.pcc.police.uk/news">News</a>
+          </li>
+          <li class="default">
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" title="Contact us" href="https://www.nottinghamshire.pcc.police.uk/contact-us">Contact us</a>
+          </li>
+          <li class="default">
+            <span class="sc-fqkvVR sc-iGgWBj Skikp icVUto">Nottinghamshire Police</span>
+          </li>
+        </ul>
+      </div>
+      <div class="list-wrapper">
+        <ul class="sc-bmzYkS sc-iHGNWf fkuMef cgeyqU">
+          <li class="">
+            <span class="section-title">Legal</span>
+          </li>
+          <li class="default">
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" title="Freedom of Information" href="https://www.nottinghamshire.pcc.police.uk/transparency/transparency/foi">Freedom of Information</a>
+          </li>
+          <li class="default">
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" title="Accessibility" href="https://www.nottinghamshire.pcc.police.uk/accessibility">Accessibility</a>
+          </li>
+          <li class="default">
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" title="Comments, compliments and complaints" href="https://www.nottinghamshire.pcc.police.uk/contact-us">Comments, compliments and complaints</a>
+          </li>
+          <li class="default">
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" title="Privacy notice" href="https://www.nottinghamshire.pcc.police.uk/privacy-notice">Privacy notice</a>
+          </li>
+          <li class="default">
+            <a class="sc-fqkvVR sc-iGgWBj Skikp icVUto" title="" href="https://www.nottinghamshire.pcc.police.uk/copyright"></a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</footer>
+<div class="societyworks-footer">
+  <div class="container">
+      <p>
+          Powered by
+          <a class="societyworks-footer__logo" href="https://www.societyworks.org">SocietyWorks</a>
+      </p>
+  </div>
+</div>
diff --git a/templates/web/nottinghamshirepolice/front/footer-marketing.html b/templates/web/nottinghamshirepolice/front/footer-marketing.html
diff --git a/...ttinghamshirepolice/front/post-steps.html → ...tinghamshirepolice/front/pre-columns.html b/...ttinghamshirepolice/front/post-steps.html → ...tinghamshirepolice/front/pre-columns.html
@@ -1,4 +1,4 @@
-<div class="border-wrapper">
+<div class="site-message">
     <h2>Antisocial Behaviour Immediate Justice Scheme
     </h2>
     <p>Nottinghamshire OPCC is one of 16 other PCC areas which has been selected to pilot the ASB Immediate Justice projects. The scheme will provide an opportunity for those who commit low level antisocial behaviour to compensate the community by undertaking supervised reparation activities which help to improve the environment e.g., litter picking, graffiti removal. Offenders will be offered these placements as an alternative to prosecution or current disposals methods which may only mean a verbal or written caution. In this way offenders will payback to the community for their offence which hopefully will provide victims with a sense that justice has been served.

diff --git a/templates/web/nottinghamshirepolice/header_extra.html b/templates/web/nottinghamshirepolice/header_extra.html
@@ -0,0 +1,5 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap" rel="stylesheet">
+
+<link rel="icon" type="image/png" sizes="16x16" href="/cobrands/nottinghamshirepolice/images/favicon.png">
diff --git a/templates/web/nottinghamshirepolice/site-name.html b/templates/web/nottinghamshirepolice/site-name.html
@@ -0,0 +1 @@
+Inmediate Justice
diff --git a/web/cobrands/nottinghamshirepolice/_variables.scss b/web/cobrands/nottinghamshirepolice/_variables.scss
@@ -1,24 +1,129 @@
+// Styling based on https://preview-pcc-nottinghamshire.cloud.contensis.com/Preview/1/news/more-officers-take-to-the-streets-to-tackle-antisocial-behaviour-and-serious-violence
+
+// If you are wanting a right-to-left layout, uncomment the following line.
+// $direction: right;
+
 /* COLOURS */
+$blue-1000: rgb(0, 0, 37); // Active state navbar
+$blue-900: rgb(29, 26, 58); //For navbar and secondary buttons
+$blue-500: rgb(23, 33, 128); // Background sections
+$blue-400: rgb(46, 49, 146); // Blue cards
+$blue-300: rgb(78, 188, 246); // Focus outline colour
+$grey-bg: rgb(247, 247, 249);
+$grey: rgb(211, 213, 222); // Input borders
+$black: rgb(29, 26, 58);
+$white: #fff;
+$red: rgb(183, 44, 93); // Use for buttons and errors. Example here: https://preview-pcc-nottinghamshire.cloud.contensis.com/Preview/1/news/more-officers-take-to-the-streets-to-tackle-antisocial-behaviour-and-serious-violence
+$pink: rgb(169, 16, 177);
+
+$error_color: $red;
+
+$green: #016200; //For buttons and links
+$green-600: #065325; // Hover effect buttons
+
+$grey-100: #f5f5f57a; //Background for most sections the website
+$grey-200: #f5f5f5; // Background for banners
+
+$yellow: #e2ca76; // For info boxes body with no title and tags
+$yellow-400: #eee3ba; // body for info boxes with title tag
+
+$primary: $red;
+$primary_b: $black;
+$primary_text: $white;
+$primary_link_color: rgb(0, 0, 238);
+$primary_link_hover_color: rgb(0, 0, 238);
+$primary_link_hover_decoration: underline;
+$link-color: rgb(0, 0, 238); // Browser link colour
+$link-text-decoration: none;
+$link-hover-text-decoration: underline;
+$link-hover-color: rgb(0, 0, 238);
+
+$focus-bg-top: $yellow;
+$focus-bg-bottom: $yellow;
+$focus-text: $black;
 
-$black: #000;
-$notts_police_blue: #039;
-$primary: $notts_police_blue;
-$primary_b: #222;
-$primary_text: #222;
+$button-padding-top: 1rem;
+$button-padding-bottom: 1rem;
+$button-padding-left: 1.5rem;
+$button-padding-right: 1.5rem;
 
-$base_bg: #fff;
-$base_fg: #222;
+$button-border-radius: 0.25rem;
+$button-primary-bg-top: $primary;
+$button-primary-bg-bottom: $primary;
+$button-primary-border: $primary;
+$button-primary-text: $primary_text;
+$button-primary-hover-bg-bottom:$pink;
+$button-primary-hover-bg-top:$pink;
+$button-primary-hover-border:$pink;
+$button-primary-hover-text: $primary_text;
+$button-primary-focus-bg-bottom: $primary;
+$button-primary-focus-bg-top: $primary;
+$button-primary-focus-border: $primary; 
+$button-primary-focus-text: $primary_text;
 
-/* NAVBAR */
+$button-secondary-bg-top: $white;
+$button-secondary-bg-bottom: $white;
+$button-secondary-border: $blue-900;
+$button-secondary-text: $blue-900;
+$button-secondary-hover-bg-bottom: $blue-900;
+$button-secondary-hover-bg-top: $blue-900;
+$button-secondary-hover-border: $blue-900;
+$button-secondary-hover-text: $primary_text;
+$button-secondary-focus-bg-bottom: $white;
+$button-secondary-focus-bg-top: $white;
+$button-secondary-focus-border: $blue-900; 
+$button-secondary-focus-text: $blue-900;
 
-$nav_colour: $primary_text;
-$nav_background_colour: $primary;
-$nav_hover_background_colour: $primary_b;
+$base_bg: $white;
+$base_fg: $black;
 
-/* OTHER VARIABLES */
+$error_color: $red;
 
+// FONTS
+$arial-font: Arial, Helvetica, sans-serif;
+
+$heading-font: "Manrope", sans-serif;
+$body-font: $arial-font;
+$meta-font: $arial-font;
+
+// HEADER
+$mappage-header-height: 7.5rem;
+$header-top-border-width: 0;
+$nav_background_colour: $blue-900;
+$nav_colour: $white;
+$nav_hover_background_colour: $blue-1000;
+
+// FRONTPAGE
+// Mobile
+$front-main-color: $primary_b;
+$front-main-background: $grey-100;
+$postcodeform-background: $white;
+$postcodeform-color: $primary_b;
+
+// Desktop
+$front-main-background-desktop: $blue-900;
+$front-main-container-background-desktop: $grey-bg;
+$front-main-color-desktop: $primary_b;
+$postcodeform-color-desktop: $black;
+
+$geolocation-link-border: $primary;
+$geolocation-link: $primary;
+$geolocation-link-background-color: $white;
+
+// Colour used for front page 'how to report a problem' steps
+$col_big_numbers: $primary_b;
+$layout_front_stats_color: $primary_b;
 $col_click_map: $primary;
 
-$front-main-color: #fff;
-$form-hint-color: #222;
-$front-main-color-desktop: #222;
+$mappage-sidebar-width: 32em;
+$mobile-sticky-sidebar-button-menu-image: "menu-white";
+$sticky-sidebar-link-color: $primary;
+
+$container-max-width: 90rem;
+
+@mixin nott-focus-state {
+  &:focus {
+    outline: $blue-300 solid 0.25rem;
+    outline-offset: 0.1rem;
+  }
+}