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

fix(css): Update heading styles #351

Merged
merged 9 commits into from
Dec 3, 2023
Merged

fix(css): Update heading styles #351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
750a5db
fix(css): Format changes to reduce whitespace and heading font sizes …
JayDaley Nov 28, 2023
b995fcb
fix(css): Resize headers
JayDaley Nov 29, 2023
9513c18
fix(css): More header resizing
JayDaley Nov 29, 2023
0b21e14
fix(css): Fix margin in specific header class
JayDaley Nov 29, 2023
db35aaf
fix(css): even more heading size fixes
JayDaley Nov 29, 2023
c15f063
fix(css): change location of CSS overrides
JayDaley Nov 29, 2023
766a49b
fix(css): Correctly move the css overrides this time
JayDaley Nov 29, 2023
730992a
fix(css): change heading font size and spacing
JayDaley Nov 29, 2023
b0b7bdc
fix(css): More heading font size adjustments
JayDaley Nov 29, 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
2 changes: 1 addition & 1 deletion ietf/announcements/templates/announcements/iab_announcement_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% block main_content %}

<main id="content">
<div class="bg-white pb-3">
<div class="bg-white pb-1">
<div class="container">
<!-- prettier-ignore -->
{% include 'includes/breadcrumbs.html' %}
Expand Down
6 changes: 3 additions & 3 deletions ietf/blog/templates/blog/blog_index_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{% block main_content %}

<main id="content">
<div class="bg-white border-bottom pb-3">
<div class="bg-white border-bottom pb-1">
<div class="container">
{% include 'includes/breadcrumbs.html' %}
<div class="u-max-text-width">
Expand All @@ -19,7 +19,7 @@ <h1>{{self.title}}</h1>

<div class="container">
<div class="row">
<div class="col-12 col-lg-3 order-lg-last bg-white border-start border-end border-bottom pt-4 ">
<div class="col-12 col-lg-3 order-lg-last bg-white border-start border-end border-bottom pt-3 ">
<h2 class="h6">Filter Blog & News by Topic</h2>
<ul class="list-unstyled">
<li class="text-uppercase"><a href="{% routablepageurl self 'all_entries' %}">All</a></li>
Expand All @@ -29,7 +29,7 @@ <h2 class="h6">Filter Blog & News by Topic</h2>
</ul>
</div>

<div class="col-12 col-lg py-4">
<div class="col-12 col-lg py-3">
<table class="mb-4">
{% for entry in entries %}
<tr>
Expand Down
2 changes: 1 addition & 1 deletion ietf/forms/templates/forms/form_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

{% block content %}
<div class="bg-white">
<div class="container pb-3 pt-4">
<div class="container pb-3 pt-3">
<div class="u-max-text-width">
<h1 class="h2">{{ self.title }}</h1>
{{ self.intro|richtext }}
Expand Down
4 changes: 2 additions & 2 deletions ietf/glossary/templates/glossary/glossary_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@

<main id="content">
<div class="bg-white border-bottom">
<div class="container pb-3">
<div class="container pb-1">
{% include 'includes/breadcrumbs.html' %}
{% include 'includes/optional-introduction.html' with value=self %}
</div>
</div>
<div class="container">
<div class="row g-0 align-items-stretch justify-content-between">
<div class="col-12 col-lg-8 col-xl-9 pt-3 pt-lg-5 pe-lg-3">
<div class="col-12 col-lg-8 col-xl-9 pt-3 pt-lg-3 pe-lg-3">
<div class="u-max-text-width pb-4">
<div class="mb-4">
{% for key in glossary_items.keys %}
Expand Down
4 changes: 2 additions & 2 deletions ietf/iesg_statement/templates/iesg_statement/iesg_statement_index_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{% block main_content %}

<main id="content">
<div class="bg-white border-bottom pb-3">
<div class="bg-white border-bottom pb-1">
<div class="container">
{% include 'includes/breadcrumbs.html' %}
<div class="u-max-text-width">
Expand All @@ -13,7 +13,7 @@ <h1>{{self.title}}</h1>
</div>
</div>

<div class="container pt-4">
<div class="container pt-3">
<table class="mb-4">
{% for statement in statements %}
<tr>
Expand Down
8 changes: 4 additions & 4 deletions ietf/search/templates/search/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@

<main id="content">
<div class="bg-white border-bottom">
<div class="container pb-3">
<div class="container pb-1">

<nav aria-label="breadcrumbs">
<ol class="breadcrumb bg-transparent pt-4 mb-0">
<ol class="breadcrumb bg-transparent pt-3 mb-0">
<li class="breadcrumb-item h5">
<a class="text-dark" href="/" aria-label="Home">
<span class="icon ion-android-home" aria-hidden="true"></span>
Expand All @@ -35,7 +35,7 @@ <h1>Search results for {{ SITE.hostname }}</h1>
</div>
<div class="container">
<div class="row g-0 align-items-stretch justify-content-between">
<div class="col-12 col-lg-8 pt-3 pt-lg-5 pe-lg-3">
<div class="col-12 col-lg-8 pt-3 pt-lg-3 pe-lg-3">
<div class="u-max-text-width pb-4">

{% if search_picks %}
Expand Down Expand Up @@ -95,7 +95,7 @@ <h3 class="h5">
</div>
</div>

<div class="bg-white col-12 col-lg-4 p-3 p-sm-4 py-lg-5 px-xl-5">
<div class="bg-white col-12 col-lg-4 p-3 p-sm-4 py-lg-3 px-xl-5">
<h2 class="h4">Search IETF Email Archives</h2>
<p>Publicly-available messages from the IETF mailing list archives.</p>

Expand Down
6 changes: 3 additions & 3 deletions ietf/standard/templates/standard/iab_standard_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% block main_content %}

<main id="content">
<div class="bg-white pb-3">
<div class="bg-white pb-1">
<div class="container">
<!-- prettier-ignore -->
{% include 'includes/breadcrumbs.html' %}
Expand Down Expand Up @@ -37,7 +37,7 @@
group -> we remove the default role by adding
`role="presentation"` which actually sets the role for
this element to `none` {% endcomment %}
<div class="pt-3 pt-lg-5 border-top">
<div class="pt-3 pt-lg-3 border-top">
<ul
class="nav nav-tabs no-js-hide iab-tabs"
id="tabs"
Expand Down Expand Up @@ -79,7 +79,7 @@

{% endif %} {# content #}
<div
class="mb-3 {% if not show_tabs %}pt-3 pt-lg-5 border-top{% endif %}"
class="mb-3 {% if not show_tabs %}pt-3 pt-lg-3 border-top{% endif %}"
>
<div
class="{% if show_tabs %}mb-3 tab-content bg-white border border-top-0 no-js-hide{% endif %}"
Expand Down
6 changes: 3 additions & 3 deletions ietf/standard/templates/standard/standard_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<main id="content">

<div class="bg-white pb-3">
<div class="bg-white pb-1">
<div class="container">
{% include 'includes/breadcrumbs.html' %}
{% include 'includes/optional-introduction.html' with value=self %}
Expand All @@ -31,7 +31,7 @@
- the <li> elements have a listitem role by default which doesn't belong in a tablist but an element with role list or group
-> we remove the default role by adding `role="presentation"` which actually sets the role for this element to `none`
{% endcomment %}
<div class="pt-3 pt-lg-5 border-top">
<div class="pt-3 pt-lg-3 border-top">
<ul class="nav nav-tabs text-uppercase text-center no-js-hide" id="tabs" role="tablist" aria-owns="key-info-tab in-depth-tab">
<li class="nav-item border flex-grow-1" role="presentation">
<a class="nav-link active" id="key-info-tab" data-bs-toggle="tab" href="#key-info" role="tab" aria-controls="key-info" aria-selected="true">Key Info</a>
Expand All @@ -45,7 +45,7 @@
{% endif %}

{# content #}
<div class="mb-3 {% if not show_tabs %}pt-3 pt-lg-5 border-top{% endif %}">
<div class="mb-3 {% if not show_tabs %}pt-3 pt-lg-3 border-top{% endif %}">
<div class="{% if show_tabs %}mb-3 tab-content bg-white border border-top-0 no-js-hide{% endif %}">
{% if self.prepared_key_info %}
<div id="key-info" class="u-max-text-width{% if show_tabs %} tab-pane fade show active p-3" tabindex="0" role="tabpanel" aria-labelledby="key-info-tab{% endif %}">
Expand Down
26 changes: 26 additions & 0 deletions ietf/static_src/css/bs-override.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,29 @@ p {
:root {
--bs-body-font-family: 'Inter', Helvetica, arial, sans-serif;
}

// Adjust headings from BS defaults

.h1, h1 {
font-size: 2rem;
}

.h2, h2 {
font-size: 1.75rem;
margin-bottom: 0.6rem;
}

.h3, h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}

.h4, h4 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}

.h5, h5 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
2 changes: 1 addition & 1 deletion ietf/static_src/css/streamfield.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

.block-heading {
@extend h2;
margin-bottom: 0.25em;
margin-bottom: 0.6rem;
}

.block-image img {
Expand Down
6 changes: 3 additions & 3 deletions ietf/templates/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@

<main id="content">
<div class="bg-white border-bottom">
<div class="container pb-3">
<div class="container pb-1">

<nav aria-label="breadcrumbs">
<ol class="breadcrumb bg-transparent pt-4 mb-0">
<ol class="breadcrumb bg-transparent pt-3 mb-0">
<li class="breadcrumb-item h5">
<a class="text-dark" href="/" aria-label="Home">
<span class="icon ion-android-home" aria-hidden="true"></span>
Expand Down Expand Up @@ -41,7 +41,7 @@ <h1>HTTP Status Code: 404 Page Not Found</h1>
</div>
</div>

<div class="container py-4 py-lg-5">
<div class="container py-3 py-lg-3">
<div class="u-max-text-width">
<h2>Report problems</h2>
<p>If you followed a link on the www.ietf.org site, it must be broken. Please <a href="mailto:[email protected]">email us</a> to report it and we’ll fix it.</p>
Expand Down
6 changes: 3 additions & 3 deletions ietf/templates/500.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
{% block main_content %}
<main id="content">
<div class="bg-white border-bottom">
<div class="container pb-3">
<div class="container pb-1">

<nav aria-label="breadcrumbs">
<ol class="breadcrumb bg-transparent pt-4 mb-0">
<ol class="breadcrumb bg-transparent pt-3 mb-0">
<li class="breadcrumb-item h5">
<a class="text-dark" href="/" aria-label="Home">
<span class="icon ion-android-home" aria-hidden="true"></span>
Expand Down Expand Up @@ -46,7 +46,7 @@ <h1>HTTP Status Code: 500 Internal Server Error</h1>
</div>
</div>

<div class="container py-4 py-lg-5">
<div class="container py-3 py-lg-3">
<div class="u-max-text-width">
<h2>Report problems</h2>
<p>If the matter is urgent, please email <a href="mailto:[email protected]">[email protected]</a> .</p>
Expand Down
2 changes: 1 addition & 1 deletion ietf/templates/iab_base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@

{% block main_content %}
<main id="content">
<div class="bg-white border-bottom pb-3">
<div class="bg-white border-bottom pb-1">
<div class="container">
{% include 'includes/breadcrumbs.html' %}
{% block head_content %}{% endblock head_content %}
Expand Down
2 changes: 1 addition & 1 deletion ietf/templates/includes/breadcrumbs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{% if self.get_ancestors|length > 1 %}
<nav aria-label="breadcrumbs">
<ol class="breadcrumb bg-transparent pt-4 mb-4 {% if dark_bg %}text-white{% endif %}">
<ol class="breadcrumb bg-transparent pt-3 mb-3 {% if dark_bg %}text-white{% endif %}">
<li class="breadcrumb-item"><a class="{% if dark_bg %}text-white{% else %}text-dark{% endif %}" aria-label="Home" href="/"><span class="icon ion-android-home" ></span></a></li>
{% for page in self.get_ancestors %}
{% if not page.slug == "root" and not page.url == '/' %}
Expand Down
2 changes: 1 addition & 1 deletion ietf/templates/includes/footer-iab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
style="background-image: url({% static 'img/background-dark.jpg' %});"
class="iab-footer-image"
></div>
<footer class="iab-bg-navy text-light py-3">
<footer class="iab-bg-navy text-light py-1">
<div class="container">
<ul class="nav d-flex">
{% for item in settings.utils.FooterLinks.footer_link_items.all %}
Expand Down
2 changes: 1 addition & 1 deletion ietf/templates/includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<footer class="bg-dark text-light py-3">
<footer class="bg-dark text-light py-1">
<div class="container">
<ul class="nav row">
{% for item in settings.utils.FooterLinks.footer_link_items.all %}
Expand Down
22 changes: 10 additions & 12 deletions ietf/templates/includes/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,28 @@
@import 'header.scss';

.block-paragraph {
& h2,
& h3,
& h4 {
margin-bottom: 1.3rem;
}

& h2 {
font-size: 2rem;
.h2, h2 {
font-size: 1.75rem;
margin-bottom: 0.6rem;
margin-top: 2rem;
&:first-child {
margin-top: 0;
}
}

& h3 {
.h3, h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}

& h4 {
.h4, h4 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}

& h5 {
font-size: 1rem;
.h5, h5 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}

p,
Expand Down
2 changes: 1 addition & 1 deletion ietf/templates_src/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@

{% block main_content %}
<main id="content">
<div class="bg-white border-bottom pb-3">
<div class="bg-white border-bottom pb-1">
<div class="container">
{% include 'includes/breadcrumbs.html' %}
{% block head_content %}{% endblock head_content %}
Expand Down
4 changes: 2 additions & 2 deletions ietf/topics/templates/topics/primary_topic_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<div class="no-js-hide u-max-text-width pe-lg-3">
{% has_tabs self.key_info self.in_depth as show_tabs %}
{% if show_tabs %}
<div class="pt-3 pt-lg-5 border-top">
<div class="pt-3 pt-lg-3 border-top">
<ul class="nav nav-tabs text-uppercase text-center no-js-hide" id="tabs" role="tablist" aria-owns="key-info-tab in-depth-tab">
<li class="nav-item border flex-grow-1" role="presentation">
<a class="nav-link active" id="key-info-tab" data-bs-toggle="tab" href="#key-info" role="tab"
Expand All @@ -44,7 +44,7 @@
</div>
{% endif %}

<div class="mb-3 {% if not show_tabs %}pt-3 pt-lg-5 border-top{% endif %}">
<div class="mb-3 {% if not show_tabs %}pt-3 pt-lg-3 border-top{% endif %}">
<div class="{% if show_tabs %}mb-3 tab-content bg-white border border-top-0 no-js-hide{% endif %}">
{% if self.key_info %}
<div id="key-info" class="{% if show_tabs %} tab-pane fade show active p-3" tabindex="0" role="tabpanel"
Expand Down
2 changes: 1 addition & 1 deletion ietf/topics/templates/topics/topic_index_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% block main_content %}
<main id="content">

<div class="bg-white border-bottom border-primary pb-3">
<div class="bg-white border-bottom border-primary pb-1">
<div class="container">
<div class="u-max-text-width">
{% include 'includes/breadcrumbs.html' %}
Expand Down
Loading