feat(brand): adopt the schoolcompare identity across the site #89
@@ -1,5 +1,5 @@
|
||||
/*
|
||||
* SchoolCompare — "Find the right school. For their future."
|
||||
* schoolcompare — "Find the right school. For their future."
|
||||
*
|
||||
* Implements the schoolcompare brand guideline. Colour has four jobs and they
|
||||
* never borrow each other's hues:
|
||||
@@ -51,7 +51,9 @@
|
||||
--action: #BE3C27; /* darkened coral — 5.4:1 under a white label */
|
||||
--action-strong: #A33320;
|
||||
--action-stronger: #8C2B1B;
|
||||
--action-bg: rgba(249, 115, 96, 0.14);
|
||||
/* Tint of --action, not of --coral, so a coral ghost button's label and
|
||||
ground share a hue. Unused today; the dark value was already correct. */
|
||||
--action-bg: rgba(190, 60, 39, 0.14);
|
||||
--action-on: #FFFFFF;
|
||||
|
||||
/* ── Palette accents: exact brand values, for fills and tints only ── */
|
||||
@@ -67,7 +69,13 @@
|
||||
--status-above: #36743F;
|
||||
--status-above-bg: rgba(54, 116, 63, 0.12);
|
||||
--status-below: #A9481F;
|
||||
--status-below-bg: rgba(249, 115, 96, 0.15);
|
||||
/* The tint is the solid hue at low alpha, exactly as every other pair in
|
||||
this file is. It briefly carried the raw --coral tuple instead, which
|
||||
put a coral-pink wash behind terracotta text — the one mismatched pair
|
||||
in the palette. Alpha matches --status-above-bg so the two chips read
|
||||
as equal weight; at 0.15 the darker terracotta tint drops the label to
|
||||
4.45:1 on Warm White. */
|
||||
--status-below-bg: rgba(169, 72, 31, 0.12);
|
||||
--status-at: #5F6A75;
|
||||
--status-at-bg: rgba(95, 106, 117, 0.10);
|
||||
|
||||
|
||||
+14
-13
@@ -43,16 +43,16 @@ export const viewport: Viewport = {
|
||||
export const metadata: Metadata = {
|
||||
appleWebApp: {
|
||||
capable: true,
|
||||
title: 'SchoolCompare',
|
||||
title: 'schoolcompare',
|
||||
statusBarStyle: 'default',
|
||||
},
|
||||
title: {
|
||||
default: 'SchoolCompare | Compare School Performance',
|
||||
template: '%s | SchoolCompare',
|
||||
default: 'schoolcompare | Compare School Performance',
|
||||
template: '%s | schoolcompare',
|
||||
},
|
||||
description: 'Compare primary and secondary school SATs and GCSE performance across England',
|
||||
keywords: 'school comparison, KS2 results, KS4 results, primary school, secondary school, England schools, SATs results, GCSE results',
|
||||
authors: [{ name: 'SchoolCompare' }],
|
||||
authors: [{ name: 'schoolcompare' }],
|
||||
manifest: '/manifest.json',
|
||||
// No `icons` key on purpose: setting it here would override the file
|
||||
// conventions. app/icon.svg and app/apple-icon.tsx are the source, and
|
||||
@@ -60,15 +60,15 @@ export const metadata: Metadata = {
|
||||
metadataBase: new URL('https://schoolcompare.co.uk'),
|
||||
openGraph: {
|
||||
type: 'website',
|
||||
title: 'SchoolCompare | Compare School Performance',
|
||||
title: 'schoolcompare | Compare School Performance',
|
||||
description: 'Compare primary and secondary school SATs and GCSE performance across England',
|
||||
url: 'https://schoolcompare.co.uk',
|
||||
siteName: 'SchoolCompare',
|
||||
siteName: 'schoolcompare',
|
||||
},
|
||||
twitter: {
|
||||
// summary_large_image now that there is an image worth showing.
|
||||
card: 'summary_large_image',
|
||||
title: 'SchoolCompare | Compare School Performance',
|
||||
title: 'schoolcompare | Compare School Performance',
|
||||
description: 'Compare primary and secondary school SATs and GCSE performance across England',
|
||||
},
|
||||
};
|
||||
@@ -80,12 +80,13 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
// The font variable classes must sit on <html>, not <body>. globals.css
|
||||
// declares --font-display/--font-ui on :root as var(--font-schibsted),
|
||||
// and a custom property's var() references resolve on the element that
|
||||
// declares it. With the classes on <body>, --font-schibsted was undefined
|
||||
// at :root, so --font-display computed to the guaranteed-invalid value and
|
||||
// every font-family that referenced it silently fell back — the whole site
|
||||
// rendered in Times.
|
||||
// declares --font-display on :root as var(--font-manrope) and --font-ui as
|
||||
// var(--font-inter), and a custom property's var() references resolve on
|
||||
// the element that declares it. With the classes on <body>, those two are
|
||||
// undefined at :root, so --font-display computes to the guaranteed-invalid
|
||||
// value and every font-family referencing it silently falls back — which
|
||||
// once shipped the whole site in Times. Nothing throws and no unit test
|
||||
// fails, so the e2e typeface assertion is the only guard.
|
||||
<html lang="en" className={`${manrope.variable} ${inter.variable}`}>
|
||||
<head>
|
||||
<link rel="preconnect" href="https://analytics.schoolcompare.co.uk" />
|
||||
|
||||
@@ -98,7 +98,7 @@ export async function generateMetadata({ params }: SchoolPageProps): Promise<Met
|
||||
description,
|
||||
type: 'website',
|
||||
url: `https://schoolcompare.co.uk${canonicalPath}`,
|
||||
siteName: 'SchoolCompare',
|
||||
siteName: 'schoolcompare',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary',
|
||||
|
||||
@@ -224,11 +224,11 @@ export function ComparisonView({
|
||||
const url = window.location.href;
|
||||
const count = selectedSchools.length;
|
||||
const shareData = {
|
||||
title: 'School comparison · SchoolCompare',
|
||||
title: 'School comparison · schoolcompare',
|
||||
text:
|
||||
count > 0
|
||||
? `Comparing ${count} school${count === 1 ? '' : 's'} on SchoolCompare`
|
||||
: 'SchoolCompare',
|
||||
? `Comparing ${count} school${count === 1 ? '' : 's'} on schoolcompare`
|
||||
: 'schoolcompare',
|
||||
url,
|
||||
};
|
||||
if (
|
||||
|
||||
@@ -20,7 +20,7 @@ export function EditorialSection({ totalSchools, localAuthorityCount }: Editoria
|
||||
and demographics — each in its own table, each with its own jargon.
|
||||
</p>
|
||||
<p>
|
||||
SchoolCompare brings it all into one place. Every school page shows performance against the national
|
||||
schoolcompare brings it all into one place. Every school page shows performance against the national
|
||||
average, explains what the numbers mean, and lets you shortlist schools side by side. Built for
|
||||
parents, governors, journalists, and anyone who wants to understand a school without reading a
|
||||
full inspection report.
|
||||
|
||||
@@ -87,7 +87,7 @@ export function Footer() {
|
||||
|
||||
<div className={styles.bottom}>
|
||||
<p className={styles.copyright}>
|
||||
© {currentYear} SchoolCompare.co.uk
|
||||
© {currentYear} schoolcompare.co.uk
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -100,7 +100,7 @@ export function Navigation() {
|
||||
<>
|
||||
<header className={styles.header}>
|
||||
<div className={styles.container}>
|
||||
<Link href="/" className={styles.logo} aria-label="SchoolCompare home">
|
||||
<Link href="/" className={styles.logo} aria-label="schoolcompare home">
|
||||
{/*
|
||||
LogoMark's defaults are already correct for this ground: the pin
|
||||
takes var(--brand) and the leaf is knocked out in var(--bg-card),
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "SchoolCompare",
|
||||
"short_name": "SchoolCompare",
|
||||
"name": "schoolcompare",
|
||||
"short_name": "schoolcompare",
|
||||
"description": "Compare primary and secondary school performance across England",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
|
||||
Reference in New Issue
Block a user