Merge pull request #1669 from NatLibFi/css-fix-vocab-list

Css fixes of the landing page vocab list
NatLibFi · Oct 2, 2024 · 3386c6d · 3386c6d
2 parents 58e1a64 + e25f28c
commit 3386c6d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
@@ -29,6 +29,7 @@
   --vocab-text: var(--dark-color);
   --vocab-table-border: var(--medium-color);
   --vocab-link: var(--secondary-dark-color);
+  --vocab-box-text: var(--dark-color);
 
   /* Font definitions */
   --font-size: 14px;
@@ -369,20 +370,36 @@ body {
   }
 
   /*** Main container frontpage ***/
-  #main-container.frontpage #vocab-box, #vocab-box .list-group-item {
-    background-color: var(--vocab-box-bg);
+
+  #vocabulary-list h2, #welcome-box h2, #vocab-info h2 {
+    font-family: var(--font-family-heading) !important;
+  }
+  header > h2 > a {
+    font-family: var(--font-family-heading) !important;
+    color: var(--dark-color)
+  }
+  #vocabulary-list .list-group-item {
+    background-color: var(--medium-color) !important;
+  }
+  #vocabulary-list .border-top {
+    border-top: 2px var(--dark-color) solid !important;
+    color: var(--secondary-dark-color);
   }
 
   .vocab-category {
     border-top: 1px solid var(--vocab-box-text);
     color: var(--vocab-box-text);
   }
 
+  .vocab-category h3 {
+    color: var(--vocab-box-text);
+  }
+
   .vocab-category a {
     /** color: var(--secondary-medium-color) solid; **/
-    color: var(--vocab-box-link);
+    color: var(--vocab-link);
     font-weight: bold;
-    text-decoration: underline var(--vocab-box-link) solid;
+    text-decoration: underline ;
     text-decoration-thickness: 1px;
   }
 
@@ -925,25 +942,10 @@ body {
     }
   }
 
-  #vocabulary-list h2, #welcome-box h2, #vocab-info h2 {
-    font-family: var(--font-family-heading) !important;
-  }
-  header > h2 > a {
-    font-family: var(--font-family-heading) !important;
-    color: var(--dark-color)
-  }
-  #vocabulary-list .list-group-item {
-    background-color: var(--medium-color) !important;
-  }
-  #vocabulary-list .border-top {
-    border-top: 2px var(--dark-color) solid !important;
-    color: var(--secondary-dark-color);
-    text-decoration: underline var(--secondary-medium-color) solid;
-  }
   #alphabetical-menu > .list-group > .list-group-item {
     border: none !important;
   }
-  
+
   tr > td {
     color: var(--dark-color);
   }

diff --git a/src/view/landing.twig b/src/view/landing.twig
@@ -16,8 +16,8 @@
       <h2 class="fs-2 fw-bold py-3">{{ "Available vocabularies and ontologies" | trans }}</h2>
       {% endif %}
       {% for vocabClassName,vocabArray in request.vocabList %}
-      <div class="vocab-category border-top border-dark-top">
-        <h3 class="fs-3 py-3">{{ vocabClassName }}</h3>
+      <div class="vocab-category border-top pb-5">
+        <h3 class="fs-3 pt-2">{{ vocabClassName }}</h3>
         <ul class="list-group">
         {% for vocab in vocabArray %}
           <li class="list-group-item border-0 ps-0"><a class="fs-4 fw-bold" href="{{ vocab.id }}/{{ request.lang }}/{% if request.contentLang != request.lang and request.contentLang != '' and request.contentLang in vocab.config.languages %}?clang={{ request.contentLang }}{% endif %}">{{ vocab.title }}</a></li>