From 8ae3456cf12eb4526ed98a3716f725b276cfc0d4 Mon Sep 17 00:00:00 2001
From: Osma Suominen <osma.suominen@helsinki.fi>
Date: Wed, 29 Jan 2025 14:57:48 +0200
Subject: [PATCH 1/4] adjust gutter between columns & top margin above main
 content

---
 resource/css/skosmos.css    | 5 +++++
 src/view/base-template.twig | 4 ++--
 src/view/vocab-search.twig  | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index 6b52ba3e2..e6cf6e127 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -347,6 +347,7 @@ body {
 
   #main-container {
     font-size: 16px;
+    padding-top: 2.75rem;
   }
 
   #main-container h1 {
@@ -354,6 +355,10 @@ body {
     font-weight: bold;
   }
 
+  #main-container-row {
+    --bs-gutter-x: 2.25rem;
+  }
+
   /***** Main container frontpage & frontpage one vocab *****/
   #background.frontpage, #background.frontpage-one-vocab {
     background-color: var(--main-bg-1);
diff --git a/src/view/base-template.twig b/src/view/base-template.twig
index 1ad60191f..e2ce563cc 100644
--- a/src/view/base-template.twig
+++ b/src/view/base-template.twig
@@ -93,12 +93,12 @@
     </div>
     {% endif %}
   </header>
-  <main id="main-container" class="{% if request.vocabid == '' or global_search %} frontpage{% elseif concept_uri != '' %} termpage{% elseif request.vocab != '' %} vocabpage{% if list_style %} {{ list_style }}{% endif %}{% endif %} py-5">
+  <main id="main-container" class="{% if request.vocabid == '' or global_search %} frontpage{% elseif concept_uri != '' %} termpage{% elseif request.vocab != '' %} vocabpage{% if list_style %} {{ list_style }}{% endif %}{% endif %}">
     <div class="container">
       <noscript>
         <strong>We're sorry but Skosmos doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
       </noscript>
-      <div class="row" tabindex="-1">
+      <div id="main-container-row" class="row" tabindex="-1">
       {% block content %}
       {% endblock %}
       </div>
diff --git a/src/view/vocab-search.twig b/src/view/vocab-search.twig
index 1e4d26662..955c84410 100644
--- a/src/view/vocab-search.twig
+++ b/src/view/vocab-search.twig
@@ -4,7 +4,7 @@
 {% block url %}{{ BaseHref }}{{ request.langurl }}{% endblock %}
 
 {% block content %}
-<main class="searchpage py-5" id="main-container" >
+<main class="searchpage" id="main-container">
   <div class="container">
     <div class="row">
       {% include "search-results-filter.inc.twig" %}

From 2fa451def5ccdb6c55e27ec6a623ca1a3e3a5b24 Mon Sep 17 00:00:00 2001
From: Osma Suominen <osma.suominen@helsinki.fi>
Date: Wed, 29 Jan 2025 15:05:45 +0200
Subject: [PATCH 2/4] adjust padding around vocab home heading to match concept
 page heading

---
 resource/css/skosmos.css     | 2 +-
 src/view/vocab-info.inc.twig | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index e6cf6e127..772ea8abd 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -719,7 +719,7 @@ body {
     margin-bottom: .2rem;
   }
 
-  #concept-heading {
+  #concept-heading, #vocab-heading {
     margin-top: 2rem;
     padding-bottom: 2.5rem;
   }
diff --git a/src/view/vocab-info.inc.twig b/src/view/vocab-info.inc.twig
index cf7f771c5..4a76576b6 100644
--- a/src/view/vocab-info.inc.twig
+++ b/src/view/vocab-info.inc.twig
@@ -1,6 +1,6 @@
 <div class="col-md-8" id="main-content">
   <div class="main-content-section px-5 py-4">
-    <h1 class="pt-3 pb-5">{{ "Vocabulary information" | trans }}</h1>
+    <h1 id="vocab-heading">{{ "Vocabulary information" | trans }}</h1>
 
     {% set vocabInfo = vocab.info(request.contentLang) %}
     {% if not vocabInfo %}

From c4a4a679aaf733d0ac8ff16c8981ef84b59468d5 Mon Sep 17 00:00:00 2001
From: Osma Suominen <osma.suominen@helsinki.fi>
Date: Wed, 29 Jan 2025 15:09:00 +0200
Subject: [PATCH 3/4] make vocab-home property/value columns responsive, just
 like those on concept page

---
 src/view/vocab-info.inc.twig | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/view/vocab-info.inc.twig b/src/view/vocab-info.inc.twig
index 4a76576b6..67eb864a2 100644
--- a/src/view/vocab-info.inc.twig
+++ b/src/view/vocab-info.inc.twig
@@ -11,8 +11,8 @@
 
     {% for key, values in vocabInfo %}
     <div class="row property g-0">
-      <div class="col-sm-4 px-0 property-label"><h2>{{ key | trans }}</h2></div>
-      <div class="col-sm-8 align-self-center property-value">
+      <div class="col-lg-4 ps-0 property-label"><h2>{{ key | trans }}</h2></div>
+      <div class="col-lg-8 gx-0 gx-lg-4 align-self-center property-value">
         <ul class="align-bottom">
           {% for val in values %}
           <li>

From cbc41bf93cb5e31a42de5ba0064ee01f2c404ad7 Mon Sep 17 00:00:00 2001
From: Osma Suominen <osma.suominen@helsinki.fi>
Date: Wed, 29 Jan 2025 15:33:18 +0200
Subject: [PATCH 4/4] adjust padding/margin/gutters on vocab-home page main
 content to match concept page

---
 resource/css/skosmos.css        | 7 +++++++
 resource/js/concept-mappings.js | 4 ++--
 src/view/concept-card.inc.twig  | 2 +-
 src/view/vocab-info.inc.twig    | 6 +++---
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index 772ea8abd..fefea85ba 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -717,6 +717,8 @@ body {
   .main-content-section {
     background-color: var(--vocab-bg);
     margin-bottom: .2rem;
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
   }
 
   #concept-heading, #vocab-heading {
@@ -724,6 +726,11 @@ body {
     padding-bottom: 2.5rem;
   }
 
+  #vocab-heading, .vocab-statistics, #vocab-download-links {
+    margin-left: -.75rem;
+    margin-right: -.75rem;
+  }
+
   .property {
     border-top: 1px solid var(--vocab-table-border);
     padding: .5rem 0;
diff --git a/resource/js/concept-mappings.js b/resource/js/concept-mappings.js
index f5e14308a..bc3587b51 100644
--- a/resource/js/concept-mappings.js
+++ b/resource/js/concept-mappings.js
@@ -60,12 +60,12 @@ const conceptMappingsApp = Vue.createApp({
   template: `
     <div v-load-concept-page="loadMappings">
       <template v-if="loading">
-        <div class="main-content-section px-5 py-4">
+        <div class="main-content-section py-4">
           <i class="fa-solid fa-spinner fa-spin-pulse"></i>
         </div>
       </template>
       <template v-else-if="hasMappings">
-        <div class="main-content-section px-5 py-4">
+        <div class="main-content-section py-4">
           <concept-mappings :mappings="mappings" :customLabels="customLabels"></concept-mappings>
         </div>
       </template>
diff --git a/src/view/concept-card.inc.twig b/src/view/concept-card.inc.twig
index a99684c11..29c89558f 100644
--- a/src/view/concept-card.inc.twig
+++ b/src/view/concept-card.inc.twig
@@ -1,6 +1,6 @@
 <div class="col-md-8" id="main-content">
 
-    <div class="main-content-section px-5 py-4">
+    <div class="main-content-section py-4">
 
       {% if visible_breadcrumbs and visible_breadcrumbs[0]|length > 1 %}
       <nav class="row" id="concept-breadcrumbs" aria-label='{{ "Breadcrumbs" | trans }}'>
diff --git a/src/view/vocab-info.inc.twig b/src/view/vocab-info.inc.twig
index 67eb864a2..c8c4fa3c3 100644
--- a/src/view/vocab-info.inc.twig
+++ b/src/view/vocab-info.inc.twig
@@ -1,5 +1,5 @@
 <div class="col-md-8" id="main-content">
-  <div class="main-content-section px-5 py-4">
+  <div class="main-content-section py-4">
     <h1 id="vocab-heading">{{ "Vocabulary information" | trans }}</h1>
 
     {% set vocabInfo = vocab.info(request.contentLang) %}
@@ -10,7 +10,7 @@
     {% else %}
 
     {% for key, values in vocabInfo %}
-    <div class="row property g-0">
+    <div class="row property">
       <div class="col-lg-4 ps-0 property-label"><h2>{{ key | trans }}</h2></div>
       <div class="col-lg-8 gx-0 gx-lg-4 align-self-center property-value">
         <ul class="align-bottom">
@@ -45,7 +45,7 @@
     {% endif %}
 
     {% if vocab.config.dataURLs %}
-    <div class="row g-0 py-3">
+    <div class="row py-3" id="vocab-download-links">
       <div class="col-sm-12 px-0 property-label" id="download-links">
         <h2><i class="fa-solid fa-download"></i> {{ "Download this vocabulary:" | trans }}</h2>
         <ul class="d-inline">