{% for column in row.columns %}
-
diff --git a/css/landing-page.css b/css/landing-page.css
index 7bf273f3002..52680cb0f4f 100644
--- a/css/landing-page.css
+++ b/css/landing-page.css
@@ -193,6 +193,58 @@ img.precice-support {
}
/* Logowall */
+.logowall-filter {
+ margin-bottom: 26px;
+}
+
+.logowall-filter .filter-btn {
+ margin: 4px;
+ border: 1px solid #0A76BB;
+ color: #0A76BB;
+ background-color: #fff;
+}
+
+.logowall-filter .filter-btn:hover {
+ background-color: #eaf4fb;
+}
+
+.logowall-filter .filter-btn.btn-primary,
+.logowall-filter .filter-btn.active {
+ border-color: #0A76BB;
+ background-color: #0A76BB;
+ color: #fff;
+}
+
+.logowall-grid {
+ display: flex;
+ flex-wrap: wrap;
+ margin-left: -6px;
+ margin-right: -6px;
+ margin-bottom: 50px;
+}
+
+.logo-item {
+ transition: opacity 0.2s ease;
+ float: none;
+ width: 12.5%;
+ max-width: 12.5%;
+ flex: 0 0 12.5%;
+ margin-bottom: 14px;
+ padding-left: 5px;
+ padding-right: 5px;
+ text-align: left;
+}
+
+@media (max-width: 767px) {
+ .logo-item {
+ width: 25%;
+ max-width: 25%;
+ flex: 0 0 25%;
+ margin-bottom: 12px;
+ padding-left: 4px;
+ padding-right: 4px;
+ }
+}
.logo, .logo > div, .logo > p {
color: #333;
@@ -219,22 +271,42 @@ img.precice-support {
transform: scale(1.05);
}
p.institution {
- font-size: 0.8em;
+ font-size: 0.68em;
font-weight: 400;
- line-height: 1.2em;
- margin-top: 0.5em;
+ line-height: 1.1em;
+ margin-top: 0.35em;
+ overflow-wrap: anywhere;
+ word-break: break-word;
}
p.country {
- font-size: 0.8em;
+ font-size: 0.68em;
font-weight: 700;
- /*margin-top: -0.25em;*/
- margin-bottom: 1em;
+ line-height: 1.1em;
+ margin-bottom: 0.55em;
+ overflow-wrap: anywhere;
+ word-break: break-word;
}
div.logo-holder {
- height: 75px;
+ height: 42px;
}
div.logo-holder > img {
- max-height: 75px;
+ max-height: 42px;
+ margin-left: 0;
+ margin-right: auto;
+}
+
+@media (max-width: 767px) {
+ p.institution,
+ p.country {
+ font-size: 0.62em;
+ line-height: 1.02em;
+ }
+ div.logo-holder {
+ height: 36px;
+ }
+ div.logo-holder > img {
+ max-height: 36px;
+ }
}
.no-padding {
padding: 0;
diff --git a/js/customscripts.js b/js/customscripts.js
index 95d5d3c36dc..a14d2335e90 100644
--- a/js/customscripts.js
+++ b/js/customscripts.js
@@ -52,3 +52,27 @@ $(function() {
}
});
});
+
+// this makes the logos toggle as per the option choosed by clicking on the specific buttons.
+$(function() {
+ $(document).on('click', '.logowall-filter .filter-btn', function(event) {
+ var $button = $(this);
+ var filter = String($button.data('filter') || '').toLowerCase();
+ var $filterBar = $button.closest('.logowall-filter');
+ var $items = $filterBar.next('.logowall-grid').find('.logo-item');
+
+ if (!$items.length) {
+ return;
+ }
+
+ event.preventDefault();
+
+ $filterBar.find('.filter-btn').removeClass('active btn-primary').addClass('btn-default');
+ $button.addClass('active btn-primary').removeClass('btn-default');
+
+ $items.each(function() {
+ var matches = filter === 'all' || String($(this).data('category') || '').toLowerCase() === filter;
+ $(this).toggleClass('hidden', !matches);
+ });
+ });
+});
\ No newline at end of file
{% for logo in column.logos %}
-
- {% endfor %}
+
{% endfor %}
-
{% endfor %}
+ {% endfor %}
+