diff --git a/opentech/apply/funds/templates/funds/applicationsubmission_detail.html b/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
index 70393fcc271c69410abdea1d1584e3fce25b2676..fd5c00db4c56bff923bbd76dbfc07f4ae3e9032f 100644
--- a/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
+++ b/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
@@ -15,7 +15,7 @@
</div>
</div>
-<div class="wrapper wrapper--medium wrapper--top-bottom-inner-space">
+<div class="wrapper wrapper--medium wrapper--inner-space-medium">
<div class="wrapper wrapper--sidebar">
<div>
<h6 class="heading heading--submission-meta">
diff --git a/opentech/apply/funds/templates/funds/submissions.html b/opentech/apply/funds/templates/funds/submissions.html
index 9c111201580e72ebf6ee25aadbdbd74883647fa7..3428cc9a7d1cc291ff9c14e714f62d167a7d14c8 100644
--- a/opentech/apply/funds/templates/funds/submissions.html
+++ b/opentech/apply/funds/templates/funds/submissions.html
@@ -15,7 +15,7 @@
</div>
</div>
-<div class="wrapper wrapper--large wrapper--top-bottom-inner-space">
+<div class="wrapper wrapper--large wrapper--inner-space-medium">
{% if object_list|length > 0 or active_filters %}
<div class="button button--filters button--contains-icons js-open-filters">Filter By</div>
diff --git a/opentech/apply/users/templates/users/login.html b/opentech/apply/users/templates/users/login.html
index 1ce068d62f4ec5782922f9477436af44ee0fb21d..179e21bb3074716facfdc157ab21fcbffaea7b31 100644
--- a/opentech/apply/users/templates/users/login.html
+++ b/opentech/apply/users/templates/users/login.html
@@ -20,7 +20,7 @@
<button class="link link--button-secondary" type="submit">Login</button>
</form>
- <div class="wrapper wrapper--top-bottom-space">
+ <div class="wrapper wrapper--inner-space-large">
<a class="link link--button link--button-long-text" href="{% url "social:begin" "google-oauth2" %}?next={% url "users:account" %}">Log in with your OTF email</a>
</div>
</div>
diff --git a/opentech/public/home/templates/home/home_page.html b/opentech/public/home/templates/home/home_page.html
index 4b17d21f592128b47152474c23ca16eed0e4052c..2a62505432eaa7d2b71092f49fc040e4783c801c 100644
--- a/opentech/public/home/templates/home/home_page.html
+++ b/opentech/public/home/templates/home/home_page.html
@@ -80,7 +80,7 @@
{% endblock %}
{% block content %}
- <div class="wrapper wrapper--top-bottom-space">
+ <div class="wrapper wrapper--inner-space-large">
<h2 class="heading heading--center heading--focus-areas">{{ page.our_work_title }}</h2>
<div class="grid grid--focus-areas">
{% for block in page.our_work %}
diff --git a/opentech/public/news/templates/news/news_index.html b/opentech/public/news/templates/news/news_index.html
index e3c69ba84f277897a3189f3f6c38266985ea0880..5188546f483ff3522c27ac7152180126c31e5c33 100644
--- a/opentech/public/news/templates/news/news_index.html
+++ b/opentech/public/news/templates/news/news_index.html
@@ -3,7 +3,7 @@
{% block body_class %}light-grey-bg{% endblock %}
{% block content %}
-<div class="wrapper wrapper--small wrapper--top-bottom-inner-space">
+<div class="wrapper wrapper--small wrapper--inner-space-medium">
<form class="form" method="GET">
<div class="form__select form__select--narrow">
diff --git a/opentech/public/people/templates/people/person_index_page.html b/opentech/public/people/templates/people/person_index_page.html
index 1bf042b8208a2c3db76e47d64299951938feb9f3..facd262677ef0878590c5d956ebbd6e4a0c3da97 100644
--- a/opentech/public/people/templates/people/person_index_page.html
+++ b/opentech/public/people/templates/people/person_index_page.html
@@ -2,7 +2,7 @@
{% load wagtailcore_tags %}
{% block body_class %}light-grey-bg{% endblock %}
{% block content %}
-<div class="wrapper wrapper--small wrapper--top-bottom-inner-space">
+<div class="wrapper wrapper--small wrapper--inner-space-medium">
<div class="wrapper wrapper--listings">
{% if people.paginator.count %}
diff --git a/opentech/public/people/templates/people/person_page.html b/opentech/public/people/templates/people/person_page.html
index 5c6155d4c474986fe1793e9613af6c99153a2456..7ec3a90c775044c0c45e99552f22bdfc5e9493df 100644
--- a/opentech/public/people/templates/people/person_page.html
+++ b/opentech/public/people/templates/people/person_page.html
@@ -3,7 +3,7 @@
{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}
-<section class="wrapper wrapper--small wrapper--top-inner-space wrapper--sidebar">
+<section class="wrapper wrapper--small wrapper--inner-space-large wrapper--sidebar">
<div>
{% for person_type in page.person_types.all %}
<h5 class="heading heading--no-margin">{{ person_type }}</h5>
diff --git a/opentech/public/projects/templates/projects/includes/project_status.html b/opentech/public/projects/templates/projects/includes/project_status.html
index fa0a88f56f2d63e19583237e01309fe6cc0527af..1cf8615d259e510e7a0780878164a975eee8a410 100644
--- a/opentech/public/projects/templates/projects/includes/project_status.html
+++ b/opentech/public/projects/templates/projects/includes/project_status.html
@@ -1,5 +1,5 @@
-<div class="wrapper--top-bottom-outer-space">
- <div class="wrapper wrapper--breakout wrapper--light-grey-bg wrapper--top-bottom-inner-space">
+<div class="wrapper--outer-space-medium">
+ <div class="wrapper wrapper--breakout wrapper--light-grey-bg wrapper--inner-space-medium">
<h3 class="heading heading--center heading--no-margin">Current project status</h3>
<div class="wrapper wrapper--large wrapper--status">
<div class="list list--status {% if page.status == 'idea' %}is-active{% endif %}">
diff --git a/opentech/public/projects/templates/projects/project_page.html b/opentech/public/projects/templates/projects/project_page.html
index 0b261566cf0a6ab04b4d965e0e24aab148cb81ba..ad2f944dfb7a24daaca8f9d02e283ea143727faa 100644
--- a/opentech/public/projects/templates/projects/project_page.html
+++ b/opentech/public/projects/templates/projects/project_page.html
@@ -2,7 +2,7 @@
{% load wagtailcore_tags %}
{% block content %}
-<div class="wrapper wrapper--small wrapper--top-inner-space">
+<div class="wrapper wrapper--small wrapper--inner-space-large">
<div class="media-box media-box--reverse">
{% include "utils/includes/media_box_icon.html" with page_icon=page.icon %}
<div class="media-box__content">
@@ -12,7 +12,7 @@
</div>
</div>
- <div class="wrapper wrapper--sidebar wrapper--top-inner-space-small">
+ <div class="wrapper wrapper--sidebar wrapper--inner-space-small">
<div>
{% include "utils/includes/funding.html" %}
</div>
diff --git a/opentech/public/search/templates/search/search.html b/opentech/public/search/templates/search/search.html
index b15ac6ea856529b114d4e9e65da166c93b943242..98361a1ec1b4491d4941f46a3e0fc357be86b220 100644
--- a/opentech/public/search/templates/search/search.html
+++ b/opentech/public/search/templates/search/search.html
@@ -4,7 +4,7 @@
{% block page_title %}Search results{% endblock %}
{% block title %}{% if search_query %}Search results for “{{ search_query }}”{% else %}Search{% endif %}{% endblock %}
{% block content %}
- <div class="wrapper wrapper--small wrapper--top-bottom-inner-space">
+ <div class="wrapper wrapper--small wrapper--inner-space-medium">
<h2 class="heading heading--no-margin">{% if search_query %}Search results for “{{ search_query }}”{% else %}Search{% endif %}</h2>
{% if search_results %}
diff --git a/opentech/public/utils/templates/utils/listing_index.html b/opentech/public/utils/templates/utils/listing_index.html
index 76f58acaf96492fa065ad4042e793eba68e4735c..989d2a31514f7b4e9fc95290705eb5fc3feddb44 100644
--- a/opentech/public/utils/templates/utils/listing_index.html
+++ b/opentech/public/utils/templates/utils/listing_index.html
@@ -2,7 +2,7 @@
{% load wagtailcore_tags wagtailimages_tags %}
{% block body_class %}light-grey-bg{% endblock %}
{% block content %}
-<div class="wrapper wrapper--small wrapper--top-bottom-inner-space">
+<div class="wrapper wrapper--small wrapper--inner-space-medium">
{% if page.introduction %}
<h4 class="heading heading--listings-introduction">{{ page.introduction }}</h4>
{% endif %}
diff --git a/opentech/static_src/src/sass/apply/components/_wrapper.scss b/opentech/static_src/src/sass/apply/components/_wrapper.scss
index 7a3459ef08ffa639a7cfb0bc3a97238767dd07b6..68e4a2b4e1e02742a9ded37ee97708b2d6996903 100644
--- a/opentech/static_src/src/sass/apply/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/apply/components/_wrapper.scss
@@ -72,30 +72,6 @@
}
}
- &--top-bottom-space {
- padding: 1rem 0;
-
- @include media-query(tablet-portrait) {
- padding: 3rem 0;
- }
- }
-
- &--top-bottom-inner-space {
- padding: 20px 0;
-
- @include media-query(mob-landscape) {
- padding: 2rem 0;
- }
- }
-
- &--top-bottom-outer-space {
- margin: 20px 0;
-
- @include media-query(mob-landscape) {
- margin: 2rem 0;
- }
- }
-
&--light-grey-bg {
background-color: $color--light-grey;
}
@@ -106,16 +82,6 @@
margin: 0 auto;
}
- &--bottom-space {
- padding-bottom: 20px;
- margin-bottom: 20px;
-
- @include media-query(tablet-portrait) {
- padding-bottom: 3rem;
- margin-bottom: 3rem;
- }
- }
-
&--form {
padding: 20px;
margin: 20px auto;
@@ -136,30 +102,66 @@
border: 1px solid $color--tomato;
}
- &--top-inner-space {
- padding: 20px 0;
+ &--bottom-space {
+ padding-bottom: 20px;
+ margin-bottom: 20px;
@include media-query(tablet-portrait) {
- padding: 3rem 0;
+ padding-bottom: 3rem;
+ margin-bottom: 3rem;
}
}
- &--top-inner-space-small {
+ // Inner spacing
+ &--inner-space-small {
padding: 20px 0;
}
- &--top-outer-space {
- margin: 20px 0;
+ &--inner-space-medium {
+ padding: 20px 0;
+
+ @include media-query(mob-landscape) {
+ padding: 2rem 0;
+ }
+ }
+
+ &--inner-space-large {
+ padding: 20px 0;
@include media-query(tablet-portrait) {
- margin: 3rem 0;
+ padding: 3rem 0;
+ }
+ }
+
+ &--inner-space-xl {
+ padding: 2rem 20px;
+
+ @include media-query(tablet-portrait) {
+ padding: 4rem 20px;
}
}
+ // Outer spacing
&--top-outer-space-small {
margin: 20px 0 0;
}
+ &--outer-space-medium {
+ margin: 20px 0;
+
+ @include media-query(mob-landscape) {
+ margin: 2rem 0;
+ }
+ }
+
+ &--outer-space-large {
+ margin: 20px 0;
+
+ @include media-query(tablet-portrait) {
+ margin: 3rem 0;
+ }
+ }
+
&--sidebar {
display: flex;
flex-direction: column;
diff --git a/opentech/static_src/src/sass/public/components/_wrapper.scss b/opentech/static_src/src/sass/public/components/_wrapper.scss
index 39650a2f89c2aaf1cd24031df55f80dd3c3fd687..60a2f7a29462a19dccc7c1f2bbb1e7b67435dff8 100644
--- a/opentech/static_src/src/sass/public/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/public/components/_wrapper.scss
@@ -85,30 +85,6 @@
}
}
- &--top-bottom-space {
- padding: 1rem 0;
-
- @include media-query(tablet-portrait) {
- padding: 3rem 0;
- }
- }
-
- &--top-bottom-inner-space {
- padding: 20px 0;
-
- @include media-query(mob-landscape) {
- padding: 2rem 0;
- }
- }
-
- &--top-bottom-outer-space {
- margin: 20px 0;
-
- @include media-query(mob-landscape) {
- margin: 2rem 0;
- }
- }
-
&--light-grey-bg {
background-color: $color--light-grey;
}
@@ -119,16 +95,6 @@
margin: 0 auto;
}
- &--bottom-space {
- padding-bottom: 20px;
- margin-bottom: 20px;
-
- @include media-query(tablet-portrait) {
- padding-bottom: 3rem;
- margin-bottom: 3rem;
- }
- }
-
&--apply-bar {
padding: 30px 20px;
}
@@ -153,30 +119,66 @@
border: 1px solid $color--tomato;
}
- &--top-inner-space {
- padding: 20px 0;
+ &--bottom-space {
+ padding-bottom: 20px;
+ margin-bottom: 20px;
@include media-query(tablet-portrait) {
- padding: 3rem 0;
+ padding-bottom: 3rem;
+ margin-bottom: 3rem;
}
}
- &--top-inner-space-small {
+ // Inner spacing
+ &--inner-space-small {
padding: 20px 0;
}
- &--top-outer-space {
- margin: 20px 0;
+ &--inner-space-medium {
+ padding: 20px 0;
+
+ @include media-query(mob-landscape) {
+ padding: 2rem 0;
+ }
+ }
+
+ &--inner-space-large {
+ padding: 20px 0;
@include media-query(tablet-portrait) {
- margin: 3rem 0;
+ padding: 3rem 0;
+ }
+ }
+
+ &--inner-space-xl {
+ padding: 2rem 20px;
+
+ @include media-query(tablet-portrait) {
+ padding: 4rem 20px;
}
}
+ // Outer spacing
&--top-outer-space-small {
margin: 20px 0 0;
}
+ &--outer-space-medium {
+ margin: 20px 0;
+
+ @include media-query(mob-landscape) {
+ margin: 2rem 0;
+ }
+ }
+
+ &--outer-space-large {
+ margin: 20px 0;
+
+ @include media-query(tablet-portrait) {
+ margin: 3rem 0;
+ }
+ }
+
&--sidebar {
display: flex;
flex-direction: column;
@@ -242,12 +244,4 @@
&--center {
text-align: center;
}
-
- &--inner-space-xl {
- padding: 2rem 20px;
-
- @include media-query(tablet-portrait) {
- padding: 4rem 20px;
- }
- }
}
diff --git a/opentech/templates/404.html b/opentech/templates/404.html
index cb22459d8a562ec0320da4e4d6ac8a6ae5772135..1ad197dc69a52442b95acb6fda2c391ff5c559cc 100644
--- a/opentech/templates/404.html
+++ b/opentech/templates/404.html
@@ -6,7 +6,7 @@
{% block body_class %}template-404{% endblock %}
{% block content %}
-<div class="wrapper wrapper--small wrapper--top-bottom-space">
+<div class="wrapper wrapper--small wrapper--inner-space-large">
<h1>{{ settings.utils.SystemMessagesSettings.title_404 }}</h1>
{{ settings.utils.SystemMessagesSettings.body_404|richtext }}
</div>