Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Latest" title improvements #2820

Merged
merged 8 commits into from
Oct 24, 2023
Merged

"Latest" title improvements #2820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ec0563d
enhance: update latest page title
mlbrgl Oct 21, 2023
2ec37f9
feat: add subtitle to "latest" page
mlbrgl Oct 21, 2023
f974585
enhance: rename header "latest" section
mlbrgl Oct 21, 2023
9b33059
fix: accessibility nav "latest" page
mlbrgl Oct 21, 2023
f13109c
feat: add screen reader only class
mlbrgl Oct 21, 2023
d95b75f
refactor: remove unused css
mlbrgl Oct 22, 2023
ce3b050
fix(latest): spacing of title on mobile
mlbrgl Oct 22, 2023
0760cc7
enhance(latest): subtitle spacing and size
mlbrgl Oct 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/@ourworldindata/components/src/styles/util.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,15 @@
display: none !important;
}
}

// only show for screen readers
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
16 changes: 10 additions & 6 deletions site/BlogIndexPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const BlogIndexPage = (props: {
}) => {
const { posts, pageNum, numPages, baseUrl } = props
const pageNums = range(1, numPages + 1)
const pageTitle = "Our latest work"
const pageTitle = "Latest"

return (
<html>
Expand All @@ -30,7 +30,14 @@ export const BlogIndexPage = (props: {

<main className="wrapper">
<div className="site-content">
<h2>{pageTitle}</h2>
<h2 className="heading-latest">
{pageTitle}
<span className="sr-only">:</span>
<span className="heading-latest__subtitle">
Our latest articles, updates and announcements
</span>
</h2>

<ul className="posts">
{posts.map((post) => (
<li key={post.slug} className="post">
Expand All @@ -40,11 +47,8 @@ export const BlogIndexPage = (props: {
</ul>
<nav
className="navigation pagination"
role="navigation"
aria-label="Posts"
>
<h2 className="screen-reader-text">
Posts navigation
</h2>
<div className="nav-link">
{pageNums.map((num) => (
<a
Expand Down
4 changes: 1 addition & 3 deletions site/FrontPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,7 @@ export const FrontPage = (props: {
<div className="owid-row">
<div className="owid-col flex-row">
<div className="homepage-posts--explainers">
<div className="header">
<h2>Featured work</h2>
</div>
<h2 className="heading-latest">Featured</h2>
<ul>
{featuredWork.map((post) => (
<li key={post.slug}>
Expand Down
23 changes: 19 additions & 4 deletions site/css/homepage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,10 +159,6 @@
.homepage-posts {
background-color: $blue-10;

h2 {
@include posts-heading;
}

.see-all {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -196,6 +192,25 @@
}
}

.heading-latest {
font-family: $serif-font-stack;
font-size: 1.75rem;
font-weight: bold;
line-height: 1.2;
margin: 0 0 2 * $vertical-spacing;
}

.heading-latest__subtitle {
display: block;
margin-top: 8px;
@include body-2-regular;
color: $blue-60;

@include md-up {
@include body-1-regular;
}
}

.homepage-posts--explainers {
flex: 1;
padding: 1.5rem 0 1.75rem;
Expand Down
8 changes: 0 additions & 8 deletions site/css/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,14 +238,6 @@
margin-left: calc(50% - 50vw);
}

@mixin posts-heading {
font-family: $serif-font-stack;
font-size: 1.75rem;
font-weight: bold;
line-height: 1.2;
margin: 0 0 2 * $vertical-spacing;
}

@mixin posts-list {
margin-bottom: $vertical-spacing * 2;
list-style-type: none;
Expand Down
34 changes: 2 additions & 32 deletions site/owid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,36 +134,12 @@
/* Blog posts and blog index page (on /blog)
--------------------------------------------- */

header.blog-header h1 {
text-align: center;
font-family: $serif-font-stack;
font-weight: 400;
background: $oxford-blue;
color: white;
margin: auto;
margin-bottom: 1rem;
font-size: 1.8rem;
line-height: 1;
padding: 1.25rem 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

header.blog-header h1 > a {
color: white;
}

body.blog h2 {
@include posts-heading;
}

body.blog ul.posts {
@include posts-list;
}

@include md-up {
body.blog main {
margin-top: 40px;
}
body.blog main {
margin-top: 40px;
}

h1.entry-title > a {
Expand Down Expand Up @@ -198,12 +174,6 @@ h1.entry-title > a:hover {
background: #f04848;
}

@media only screen {
.screen-reader-text {
display: none;
}
}

main {
min-height: 500px;
}
Expand Down