community frontpage: Fix community header and spacing issues

zenodo · Jul 13, 2023 · 780cd24 · 780cd24
1 parent 5c592c3
commit 780cd24
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/assets/less/zenodo-rdm/elements/container.overrides b/assets/less/zenodo-rdm/elements/container.overrides
@@ -0,0 +1,3 @@
+.ui.container.page-subheader-outer + #communities-carousel {
+    margin-top: 0;
+}
diff --git a/assets/less/zenodo-rdm/elements/container.variables b/assets/less/zenodo-rdm/elements/container.variables
diff --git a/assets/less/zenodo-rdm/globals/site.overrides b/assets/less/zenodo-rdm/globals/site.overrides
@@ -109,3 +109,9 @@ a.inverted {
 .uppercase {
   text-transform: uppercase !important;
 }
+
+.community-header {
+  .ui.medium.header {
+    font-size: 1.45rem;
+  }
+}
diff --git a/templates/semantic-ui/invenio_communities/frontpage.html b/templates/semantic-ui/invenio_communities/frontpage.html
@@ -16,10 +16,10 @@
 {%- endblock %}
 
 {%- block page_body %}
-  <div class="ui container fluid page-subheader-outer ml-0-mobile mr-0-mobile">
+  <div class="ui container fluid page-subheader-outer mb-0 ml-0-mobile mr-0-mobile">
     <div class="ui container centered grid page-subheader rel-pt-1">
       <div class="one column row">
-        <div class="eight wide center aligned column mt-auto mb-auto">
+        <div class="sixteen wide center aligned column mt-auto mb-auto">
           <h1 class="ui header mr-10">{{ _('Communities') }}</h1>
           <p class="text-muted">Created and curated by Zenodo users. 
             {% if not current_user.is_authenticated %}
@@ -50,20 +50,19 @@ <h1 class="ui header mr-10">{{ _('Communities') }}</h1>
 
   {{ communities_carousel() }}
 
-  <div class="ui container communities-frontpage rel-mt-3 rel-mb-2">
-    <div class="flex align-items-center">
+  <div class="ui container communities-frontpage rel-pt-3 rel-pb-2">
+    <div class="flex align-items-center rel-mb-2">
       <h2 class="ui header mb-0">{{ _('New communities') }}</h2>
       <a class="rel-ml-1" href="{{url_for('invenio_communities.communities_search')}}">
         {{ _('See all')}}
       </a>
     </div>
-    <div class="ui divider hidden"></div>
     <div id="featured-communities" class="communities-list"></div>
   </div>
 
   <div class="ui divider"></div>
   <div class="ui fluid container bg-gray">
-    <div class="ui container rel-pt-3">
+    <div class="ui container rel-pt-2">
       <div class="ui stackable grid" id="community-info">
         <!-- TODO: Add information about communities here -->
         <!-- <div class="eight wide column">
@@ -74,7 +73,7 @@ <h2 class="ui medium header text-muted">What is a community?</h2>
             Etiam eu lectus purus. Mauris sed diam ullamcorper, hendrerit est nec, finibus leo. Pellentesque bibendum elit sed nunc efficitur congue. Nullam ipsum lacus, aliquam quis tempus et, hendrerit eget ligula. Nam ipsum urna, luctus dapibus velit at, vestibulum auctor lacus.
           </p>
         </div> -->
-        <div class="eight wide column">
+        <div class="eight wide computer sixteen wide tablet column">
           <h2 class="ui medium header text-muted">Want your own community?</h2>
           <p class="text-muted">
             It's easy. Just click the button to get started.