From bd9589132f63125680b2ce1a646454bfd90456b6 Mon Sep 17 00:00:00 2001
From: Valentin Ryckaert <valentin.ryckaert@protonmail.com>
Date: Tue, 28 Jul 2026 13:09:43 +0200
Subject: [PATCH 1/3] feat: dispatch application and home into multiple files

---
 app/assets/stylesheets/application.scss       | 1086 +----------------
 .../stylesheets/base/_avatars-images.scss     |   89 ++
 app/assets/stylesheets/base/_base.scss        |   60 +
 .../stylesheets/base/_buttons-forms.scss      |  135 ++
 .../stylesheets/base/_cards-panels.scss       |  115 ++
 app/assets/stylesheets/base/_facets.scss      |  135 ++
 .../stylesheets/base/_icons-status.scss       |   61 +
 app/assets/stylesheets/base/_layout.scss      |   54 +
 app/assets/stylesheets/base/_utilities.scss   |  156 +++
 app/assets/stylesheets/carousel.scss          |   68 ++
 app/assets/stylesheets/community-banner.scss  |    6 +
 app/assets/stylesheets/home.scss              |  127 --
 app/assets/stylesheets/navbar-header.scss     |   89 ++
 app/assets/stylesheets/search.scss            |  126 ++
 app/assets/stylesheets/sidebar.scss           |   90 ++
 15 files changed, 1199 insertions(+), 1198 deletions(-)
 create mode 100644 app/assets/stylesheets/base/_avatars-images.scss
 create mode 100644 app/assets/stylesheets/base/_base.scss
 create mode 100644 app/assets/stylesheets/base/_buttons-forms.scss
 create mode 100644 app/assets/stylesheets/base/_cards-panels.scss
 create mode 100644 app/assets/stylesheets/base/_facets.scss
 create mode 100644 app/assets/stylesheets/base/_icons-status.scss
 create mode 100644 app/assets/stylesheets/base/_layout.scss
 create mode 100644 app/assets/stylesheets/base/_utilities.scss
 create mode 100644 app/assets/stylesheets/carousel.scss
 create mode 100644 app/assets/stylesheets/community-banner.scss
 create mode 100644 app/assets/stylesheets/navbar-header.scss
 create mode 100644 app/assets/stylesheets/search.scss
 create mode 100644 app/assets/stylesheets/sidebar.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 18ed1be58..efe31c3c3 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -19,6 +19,16 @@
 @import "font-awesome";
 @import "mixins/mixins";
 
+// Local - base
+@import "base/base";
+@import "base/layout";
+@import "base/facets";
+@import "base/buttons-forms";
+@import "base/avatars-images";
+@import "base/icons-status";
+@import "base/cards-panels";
+@import "base/utilities";
+
 // Local
 @import "about";
 @import "account";
@@ -27,10 +37,14 @@
 @import "bootstrap-tweaks";
 @import "collaborations";
 @import "collection";
+@import "carousel";
+@import "community-banner";
 @import "curators";
 @import "events";
 @import "external-resources";
 @import "sources";
+@import "sidebar";
+@import "search";
 @import "footer";
 @import "forms";
 @import "headers";
@@ -38,6 +52,7 @@
 @import "home";
 @import "icons";
 @import "learning-paths";
+@import "navbar-header";
 @import "masonry";
 @import "nodes";
 @import "showcase";
@@ -55,1074 +70,3 @@
 @import "simple_calendar";
 @import "ol-geocoder";
 @import "ol";
-
-// Sticky but not fixed footer
-// http://cbracco.me/css-sticky-footer-effect/
-html {
-  height: 100%;
-  position: relative;
-}
-
-body {
-  min-width: 320px;
-  position: relative;
-  margin: 0;
-  padding-bottom: 500px;
-  min-height: 100%;
-}
-
-h1 {
-  font-weight: 900;
-}
-
-h2, h3, h4, h5, h6 {
-  font-weight: 700;
-}
-
-.sub-heading {
-  font-weight: lighter;
-  font-size: $font-size-large;
-  line-height: 24px;
-  text-transform: uppercase;
-
-  p {
-    margin: 0;
-  }
-}
-
-section {
-  padding: 30px 0;
-}
-
-.module-heading {
-  margin: 50px 0;
-}
-
-a.btn-icon {
-  transition: 0s;
-  &:hover {
-    filter: brightness(95%);
-  }
-  &:active {
-    filter: brightness(95%);
-    -webkit-box-shadow: none;
-    box-shadow: none;
-  }
-}
-
-div.wrapper {
-  *zoom: 1;
-  margin-bottom: 20px;
-  display: flex;
-
-  &.collapsing-wrapper {
-    // Divs that were arranged left -> right will collapse to bottom -> top
-    @media (max-width: $screen-sm-max) {
-      flex-direction: column-reverse;
-    }
-  }
-
-  &.collapsing-wrapper-tb {
-    // Opposite to above
-    @media (max-width: $screen-sm-max) {
-      flex-direction: column;
-    }
-  }
-}
-
-#main-container,
-#header-container,
-#flash-container {
-  max-width: 1400px;
-}
-
-#content {
-  flex-grow: 1;
-  overflow: hidden;
-}
-
-#sidebar {
-  width: $sidebar-width;
-  margin-right: $layout-spacing-base * 2;
-  margin-top: $layout-spacing-base;
-  flex-shrink: 0;
-
-  .sidebar-group {
-    background: $panel-bg;
-    @include floating-card;
-    border-radius: 6px;
-    > ul {
-      @include unstyled-ul;
-    }
-  }
-
-  &.collapsing-sidebar {
-    @media (max-width: $screen-sm-max) {
-      width: 100%;
-      border-right: none;
-    }
-  }
-
-  &.popout-sidebar {
-    @media (max-width: $screen-sm-max) {
-      padding: 25px;
-      width: calc(100% - 40px);
-      position: absolute;
-      z-index: $zindex-modal;
-      background: $panel-bg;
-      border-bottom: 1px solid $panel-default-border;
-      border-radius: $border-radius-large;
-      top: 0;
-      left: 20px;
-      display: none;
-
-      &.open {
-        display: block;
-      }
-    }
-  }
-
-  // Sidebar facet styles
-  table tr td.h4 {
-    padding-left: 10px;
-  }
-
-  table tr td {
-    padding-left: 20px;
-  }
-
-  table tr td a {
-    color: #000;
-    padding: 3px;
-    text-decoration: none;
-  }
-
-  table tr td a:hover {
-    background-color: #b0c3c9;
-    color: #fff;
-    padding: 3px;
-    text-decoration: none;
-  }
-
-  .clear-filters-btn {
-    float: right;
-    margin: 5px 0;
-  }
-}
-
-.sidebar-backdrop {
-  @media (min-width: $screen-md-min) {
-    display: none;
-  }
-}
-
-.facet-sort-group {
-  display: flex;
-  align-items: center;
-}
-
-ul.facet-sort-wrap {
-  margin-bottom: $layout-spacing-base;
-}
-
-.facet-sort {
-  flex-shrink: 1;
-}
-
-.facet-sort-icon {
-  flex-shrink: 0;
-  margin: 10px;
-}
-
-.facet-select {
-  border-radius: 0;
-  border-width: 1px 0;
-}
-
-#sidebar-toggle {
-  display: none;
-
-  @media (max-width: $screen-sm-max) {
-    display: inline;
-  }
-}
-
-#sidebar-header {
-  display: none;
-
-  @media (max-width: $screen-sm-max) {
-    display: block;
-  }
-}
-
-// Style for empty results etc.
-.empty {
-  color: #aaa;
-  font-style: italic;
-}
-
-// Override Bootstrap's alert
-.alert {
-  margin-bottom: 0;
-  margin-top: 5px;
-}
-
-.listing_image {
-  max-width: 150px;
-  max-height: 65px;
-}
-
-// Modified from CKAN - for sidebar facets
-ul.unstyled {
-  @include unstyled-ul;
-}
-
-.nav-simple {
-  margin: 0;
-  list-style: outside none none;
-  padding-bottom: 0;
-}
-
-.nav-simple li {
-  padding: 0;
-}
-
-.nav-simple li:last-of-type {
-  border-bottom: 0 none;
-}
-
-.nav-simple {
-  .form-control {
-    border: 0;
-    box-shadow: none;
-  }
-}
-
-.nav-block {
-  padding: 7px 20px;
-}
-
-.nav-item {
-  padding: 7px 20px;
-  width: 100%;
-}
-
-.nav-item > a {
-  position: relative;
-  display: block;
-  color: #333;
-  padding: 7px 20px 7px 20px;
-  text-decoration: none;
-}
-
-.nav-item > a:hover {
-  background-color: #e6e6e6;
-  border-color: #adadad;
-}
-
-.nav-item.active > a {
-  position: relative;
-  color: $brand-primary;
-  background-color: #eee;
-}
-
-// End CKAN's sidebar facets
-
-// Facet's title
-.nav-heading {
-  padding: 10px;
-  //background-color: #f6f6f6;
-  margin: 0;
-}
-
-.facet-option {
-  display: flex !important;
-
-  .facet-label {
-    flex-grow: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: inline-block;
-  }
-
-  .facet-count, .remove-facet-icon {
-    flex-shrink: 0;
-    display: inline-block;
-  }
-  .facet-count {
-    color: #999;
-    padding-left: 5px;
-  }
-}
-
-.active-filters {
-  .remove-facet-icon {
-    margin-left: 5px;
-  }
-}
-
-.show-page-description {
-  padding: 50px 0;
-}
-
-.tiny-avatar {
-  max-width: 32px;
-  min-width: 16px;
-  border-radius: 2px;
-  margin-left: 5px;
-}
-
-.small-avatar {
-  max-width: 64px;
-  min-width: 32px;
-  border-radius: 4px;
-  margin-left: 10px;
-}
-
-.medium-avatar {
-  max-width: 50%;
-  min-width: 100px;
-  margin: 0 10px 10px 0;
-}
-
-.small-trainer-logo {
-  max-width: 80px;
-  border-radius: 4px;
-  margin-left: 10px;
-}
-
-.medium-trainer-logo {
-  max-width: 160px;
-  border-radius: 4px;
-  margin-left: 0;
-}
-
-.large-trainer-logo {
-  max-width: 240px;
-  border-radius: 4px;
-  margin-left: 0;
-}
-
-.rounded-avatar {
-  object-fit: cover;
-  border-radius: 50%;
-}
-
-#user-menu .rounded-avatar {
-  height: $line-height-computed;
-  @media (min-width: $grid-float-breakpoint) {
-    display: block;
-    float: left;
-  }
-  margin-right: 5px;
-}
-
-.search-results-count {
-  margin-right: 1em;
-  display: inline-block
-}
-
-.search-results-per-page {
-  display: inline-block;
-
-  select {
-    border: none;
-    padding: 0;
-    background: transparent;
-    border-bottom: 1px dashed $text-color;
-  }
-}
-
-.index-display-options {
-  margin: 5px 0;
-}
-
-/* try adding !important  after 0px if doesn't work */
-
-// Multiple input list on forms with + button to add more input fields dynamically
-.multiple-input-list {
-  //
-  //.multiple-input-add {
-  //  height: $input-height-base;
-  //}
-
-  .multiple-list-item {
-    margin-bottom: 15px;
-    display: inline-block;
-    width: calc(100% - 72px);
-
-    @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
-      width: calc(50% - 36px);
-    }
-
-    @media (min-width: $screen-lg-min) {
-      width: calc(33% - 24px);
-    }
-
-    .multiple-input {
-      display: inline;
-      width: calc(100% - 60px);
-    }
-
-    .multiple-input-delete {
-      display: inline;
-    }
-  }
-}
-
-.dropdown-toggle {
-  cursor: pointer;
-  //padding: $padding-base-horizontal $padding-base-vertical;
-}
-
-.dropdown-option {
-  cursor: pointer;
-
-  &:hover {
-    background: $dropdown-link-hover-bg;
-  }
-}
-
-.dropdown-menu {
-  padding: $padding-base-vertical $padding-base-horizontal;
-}
-
-.dropdown-option-delete {
-  background: none;
-  border: none;
-}
-
-/* The max width is dependent on the container (more info below) */
-.popover {
-  max-width: 500px !important; /* Max Width of the popover (depending on the container!) */
-}
-
-// To make bootstrap button wrap button text into multiple lines
-.btn {
-  white-space: normal !important;
-}
-
-// Override margin for boostrap-s page-header
-.page-header {
-  margin: 20px 0 20px;
-  border: none;
-  padding: 0;
-}
-
-sup {
-  vertical-align: top;
-  position: relative;
-  top: 5px;
-}
-
-.announcement {
-  color: #333;
-  border: 1px solid #ddd;
-  background: #ffc;
-  padding: 0.3em 0.6em;
-  margin-bottom: 1em;
-  line-height: 1.7;
-}
-
-#front-page-announcement {
-  font-size: 120%;
-  font-weight: bold;
-  text-align: center;
-}
-
-#flash-container {
-  text-align: center;
-}
-
-.schemaorg-element {
-  display: none;
-}
-
-.search-panel {
-  padding-top: 5px;
-
-  .btn, .searchbox-sm, .input-group input {
-    margin: 5px 0;
-  }
-}
-
-.searchbox-sm {
-  form {
-    padding-right: 10px;
-    text-align: center;
-    margin: auto;
-    max-width: 800px;
-
-    border: none;
-    border-radius: 50px;
-    background-color: #F4F4F4;
-
-    .searchbox-wrapper {
-      display: flex;
-    }
-
-    .searchbox-field {
-      border: none;
-      box-shadow: none;
-      outline: 0 none;
-      background: transparent;
-      line-height: $line-height-base;
-      padding: $padding-base-vertical $padding-base-horizontal $padding-base-vertical ($padding-base-vertical + 16px);
-      flex: 1;
-      min-width: 220px;
-      border-radius: 100px;
-    }
-
-    .searchbox-btn {
-      border: none;
-      background-color: transparent;
-      opacity: 0.5;
-      box-shadow: none;
-      padding: 8px 8px 8px 8px;
-      flex-shrink: 0;
-
-      transition: $transition-time;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-.info-box {
-  .info-box-header {
-    padding: 10px;
-    background-color: #f6f6f6;
-    border-radius: 4px;
-  }
-
-  .info-box-content {
-    margin-top: 10px;
-  }
-}
-
-.muted {
-  color: $text-muted;
-}
-
-.preview-image {
-  overflow: auto;
-
-  > img {
-    width: 100px;
-    max-height: 150px;
-    margin: 0 10px 10px 0;
-    float: left;
-  }
-}
-
-.bounding-box {
-  padding: 19px;
-  margin-bottom: 20px;
-  border: 1px solid #e3e3e3;
-  border-radius: 4px;
-}
-
-.resource-type-icon {
-  text-align: center;
-}
-
-.info-icon {
-  font-size: 24px;
-}
-
-.info-icon-small {
-  font-size: 16px;
-}
-
-.info-icon-large {
-  font-size: 48px;
-}
-
-.gap {
-  padding: 0 5px;
-}
-
-.delete-icon {
-  vertical-align: middle;
-  color: $brand-danger;
-  font-weight: bold;
-  font-size: 120%;
-
-  &:hover {
-    color: darken($brand-danger, 20%);
-  }
-}
-
-.tool-suggestions-header {
-  margin-bottom: 20px;
-  color: $gray-darker;
-}
-
-.external-links {
-  margin-top: 10px;
-}
-
-.fresh-icon {
-  color: $brand-primary;
-  margin-left: 5px;
-}
-
-.stale-icon {
-  color: $brand-secondary;
-  margin-left: 5px;
-}
-
-.missing-icon {
-  color: $brand-secondary;
-  margin-left: 5px;
-}
-
-.event-started-icon {
-  color: $brand-primary;
-  margin-left: 5px;
-}
-
-.event-expired-icon {
-  color: $gray;
-  margin-left: 5px;
-}
-
-.exchange-icon {
-  color: $brand-primary;
-  margin-left: 5px;
-}
-
-.days_ago_text {
-  color: grey;
-  font-style: italic;
-}
-
-.latest_resource_description {
-  /*
-  min-width: 500px;
-  min-height: 20px;
-  */
-  word-wrap: break-word;
-}
-
-div.legal-block {
-  max-width: 800px;
-  margin: auto;
-}
-
-input.loading {
-  background: image-url('ajax-loader.gif') no-repeat right center;
-}
-
-.btn.loading {
-  padding-right: 24px;
-  background: image-url('ajax-loader.gif') no-repeat right center;
-}
-
-.url-wrap {
-  display: inline-block;
-  word-wrap: break-word;
-  word-break: break-all;
-  overflow-wrap: break-word;
-}
-
-.loading_image {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.bs-type-selectors ul {
-  display: inline;
-  padding: 0;
-  padding-inline-start: 0;
-
-  li {
-    display: inline;
-    padding: 10px;
-  }
-}
-
-input[type=checkbox].field-lock {
-  display: none;
-}
-
-input[type=checkbox].field-lock + label:before {
-  font-family: FontAwesome;
-  cursor: pointer;
-  display: inline-block;
-  content: "\f09c";
-  letter-spacing: 10px;
-  margin-left: 0.5em;
-  vertical-align: middle;
-  width: 1.5em;
-}
-
-input[type=checkbox].field-lock:checked + label:before {
-  content: "\f023";
-}
-
-input[type=checkbox].field-lock:checked + label:before,
-.field-lock-example-locked {
-  color: $brand-success;
-  font-size: 110%;
-}
-
-input[type=checkbox].field-lock + label:before,
-.field-lock-example-open {
-  color: $brand-warning;
-  font-size: 110%;
-}
-
-.keyword-button {
-  margin-right: 5px;
-}
-
-.external-button {
-  margin-right: 5px;
-}
-
-.alert-info a {
-  text-decoration: underline;
-}
-
-#why-register {
-  ul {
-    font-size: $font-size-large;
-
-    li {
-      margin: 1em 0;
-    }
-  }
-}
-
-.selected-tab {
-  color: inherit;
-  text-decoration: underline;
-}
-
-.term_suggestions .dropdown-backdrop {
-  display: none;
-}
-
-.funding-logo {
-  width: 100px;
-  margin: 15px;
-}
-
-.masonry-brick .space-logo {
-  padding: .5em;
-  border-radius: 4px;
-}
-
-.list-card {
-  @include floating-card;
-  border-radius: 8px;
-  margin: 0 10px 10px 0;
-  position: relative;
-  display: block;
-  padding: 30px;
-
-  h4 {
-    margin: 0;
-  }
-
-  .list-card-heading {
-    display: block;
-    padding: 5px 0;
-    line-height: 1.3;
-
-    color: $headings-color;
-    text-decoration: none;
-  }
-}
-
-.header-notice {
-  background-color: $state-info-bg;
-  color: $state-info-text;
-}
-
-.omniauth-elixir_aai {
-  width: 240px;
-}
-
-.omniauth-oidc {
-  height: 42px;
-}
-
-// minor fix of the icon's alignment
-.glyphicon-remove {
-  top: 3px;
-}
-
-.description p:last-child {
-  margin-bottom: 0;
-}
-
-.description, .source-log {
-  border: 1px solid lightgrey;
-  padding: 18px;
-  border-radius: 5px;
-  margin: 8px 0;
-  overflow: auto;
-}
-
-.description, .markdown {
-  h1, h2 {
-    font-size: $font-size-large;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #eee;
-  }
-  h2 {
-    padding-bottom: 6px;
-  }
-  h3, h4, h5, h6 {
-    font-size: $font-size-base;
-    padding-bottom: 4px;
-  }
-}
-
-.filter-heading {
-  cursor: pointer;
-  color: $headings-color;
-}
-
-.filter-heading-active {
-  color: $brand-primary;
-}
-
-.embedded-content {
-  margin: 2em auto;
-  display: flex;
-  justify-content: center;
-
-  iframe {
-    display: block;
-  }
-}
-
-.expand-filters {
-  text-align: right;
-  padding: 7px 20px 7px 20px !important;
-  a {
-    font-size: $font-size-small;
-    color: $gray-light !important;
-    cursor: pointer;
-  }
-}
-
-.bulk-import-row {
-  .scraped-metadata p {
-    margin: 0;
-  }
-}
-
-.user-list-avatar {
-  border-radius: 8px 0 0 8px;
-  float: left;
-  margin-right: 8px;
-}
-
-.test-controls {
-  padding: 10px;
-  display: inline-block;
-}
-
-.collapsible-panel {
-  .collapsible-panel-link {
-    display: block;
-    cursor: pointer;
-
-    .panel-title:after {
-      /* symbol for "opening" panels */
-      font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
-      float: right; /* adjust as needed */
-      content: "\e113"; /* adjust as needed, taken from bootstrap.css */
-    }
-    &.collapsed {
-      @include border-bottom-radius(($panel-border-radius - 1));
-      .panel-title:after {
-        /* symbol for "collapsed" panels */
-        content: "\e114"; /* adjust as needed, taken from bootstrap.css */
-      }
-    }
-  }
-}
-
-#cookie-banner {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  padding-top: 10px;
-  background-color: #ddd;
-  z-index: 2;
-
-  .btn {
-    margin-bottom: 5px;
-  }
-}
-
-.content-actions {
-  gap: 10px;
-  display: flex;
-  width: 100%;
-
-  .content-viewer-actions > .btn,
-  .content-viewer-actions > .btn-group,
-  .content-manager-actions > .btn,
-  .content-manager-actions > .btn-group {
-    margin-top: 5px; /* So they have some vertical spacing when collapsed on small screens */
-  }
-
-  .content-viewer-actions {
-    flex-grow: 1;
-    text-align: left;
-  }
-
-  .content-manager-actions {
-    flex-grow: 1;
-    text-align: right;
-  }
-}
-
-.tess-expandable {
-  transition: max-height 0.4s ease-in-out;
-  overflow-y: hidden;
-
-  &.tess-expandable-closed {
-    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
-  }
-
-  &.tess-expandable-open {
-    border-bottom: none;
-  }
-}
-
-.tess-expandable-btn {
-  cursor: pointer;
-}
-
-div {
-  &.field,
-  &.actions {
-    margin-bottom: 10px;
-  }
-}
-
-.markdown-description {
-  word-break: break-word;
-  display: inline-block
-}
-
-/* Calendar inset numbers */
-td.day {
-  position: relative;
-}
-td.day .day-number {
-  position: absolute;
-  bottom: 0px;
-  right: 6px;
-  font-size: 1.5em;
-  color: rgb(186, 186, 186);
-}
-td.day .calendar-text {
-  font-size: 12px;
-  line-height: 14px;
-  margin-bottom: 12px;
-}
-
-.source-log {
-  max-height: 20pc;
-  overflow-y: scroll;
-}
-
-.draggable--over {
-  opacity: 0.7;
-  background: $state-success-bg;
-}
-
-.sticky-navbar-enabled {
-  .navbar {
-    border-radius: 0;
-    font-size: larger;
-    padding-top: 20px;
-    padding-bottom: 20px;
-    margin-bottom: 0px;
-    transition: font-size 0.3s ease, padding-bottom 0.3s ease, padding-top 0.3s ease;
-
-    &.scrolled {
-      font-size: medium;
-      padding-bottom: 0;
-      padding-top: 0;
-    }
-  }
-
-  .unified-header {
-    z-index: 100000;
-    position: sticky;
-    top: 0;
-    background-color: $navbar-default-bg;
-
-    .navbar-brand {
-
-      img {
-        padding: 0px 0px 0px 0px;
-        transition: padding 0.3s ease;
-
-        &.scrolled {
-          padding: 10px 5px 5px 5px;
-        }
-      }
-    }
-  }
-
-  .header-notice + .navbar {
-    padding-bottom: 20px;
-    padding-top: 20px;
-    &.scrolled {
-      padding-top: 0px;
-      padding-bottom: 0px;
-    }
-  }
-
-  .header-notice-present {
-    .header-notice {
-      z-index: 100001;
-      position: sticky;
-      top: 0;
-    }
-  }
-}
-
-.theme-selector {
-  display: flex;
-  gap: 10px;
-}
-
-.theme-select-option {
-  flex-grow: 1;
-  label {
-    border: 5px solid;
-    padding: 10px 20px;
-    border-radius: 5px;
-    display: block;
-
-    hr {
-      border-width: 10px;
-    }
-  }
-}
-.btn-oidc-only {
-  font-size: 36px;
-  padding: 4px;
-  margin: 12px 10px;
-  display: flex;
-  justify-content: center;
-}
-
-.tag-topic, .tag-operation {
-  text-decoration: none;
-}
diff --git a/app/assets/stylesheets/base/_avatars-images.scss b/app/assets/stylesheets/base/_avatars-images.scss
new file mode 100644
index 000000000..933152098
--- /dev/null
+++ b/app/assets/stylesheets/base/_avatars-images.scss
@@ -0,0 +1,89 @@
+.listing_image {
+  max-width: 150px;
+  max-height: 65px;
+}
+
+.tiny-avatar {
+  max-width: 32px;
+  min-width: 16px;
+  border-radius: 2px;
+  margin-left: 5px;
+}
+
+.small-avatar {
+  max-width: 64px;
+  min-width: 32px;
+  border-radius: 4px;
+  margin-left: 10px;
+}
+
+.medium-avatar {
+  max-width: 50%;
+  min-width: 100px;
+  margin: 0 10px 10px 0;
+}
+
+.small-trainer-logo {
+  max-width: 80px;
+  border-radius: 4px;
+  margin-left: 10px;
+}
+
+.medium-trainer-logo {
+  max-width: 160px;
+  border-radius: 4px;
+  margin-left: 0;
+}
+
+.large-trainer-logo {
+  max-width: 240px;
+  border-radius: 4px;
+  margin-left: 0;
+}
+
+.rounded-avatar {
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+#user-menu .rounded-avatar {
+  height: $line-height-computed;
+  @media (min-width: $grid-float-breakpoint) {
+    display: block;
+    float: left;
+  }
+  margin-right: 5px;
+}
+
+.preview-image {
+  overflow: auto;
+
+  > img {
+    width: 100px;
+    max-height: 150px;
+    margin: 0 10px 10px 0;
+    float: left;
+  }
+}
+
+.loading_image {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.funding-logo {
+  width: 100px;
+  margin: 15px;
+}
+
+.masonry-brick .space-logo {
+  padding: .5em;
+  border-radius: 4px;
+}
+
+.user-list-avatar {
+  border-radius: 8px 0 0 8px;
+  float: left;
+  margin-right: 8px;
+}
diff --git a/app/assets/stylesheets/base/_base.scss b/app/assets/stylesheets/base/_base.scss
new file mode 100644
index 000000000..c87918ec3
--- /dev/null
+++ b/app/assets/stylesheets/base/_base.scss
@@ -0,0 +1,60 @@
+// Sticky but not fixed footer
+// http://cbracco.me/css-sticky-footer-effect/
+html {
+  height: 100%;
+  position: relative;
+}
+
+body {
+  min-width: 320px;
+  position: relative;
+  margin: 0;
+  padding-bottom: 500px;
+  min-height: 100%;
+}
+
+h1 {
+  font-weight: 900;
+}
+
+h2, h3, h4, h5, h6 {
+  font-weight: 700;
+}
+
+.sub-heading {
+  font-weight: lighter;
+  font-size: $font-size-large;
+  line-height: 24px;
+  text-transform: uppercase;
+
+  p {
+    margin: 0;
+  }
+}
+
+section {
+  padding: 30px 0;
+}
+
+.module-heading {
+  margin: 50px 0;
+}
+
+#main-container,
+#header-container,
+#flash-container {
+  max-width: 1400px;
+}
+
+// Override margin for boostrap-s page-header
+.page-header {
+  margin: 20px 0 20px;
+  border: none;
+  padding: 0;
+}
+
+sup {
+  vertical-align: top;
+  position: relative;
+  top: 5px;
+}
diff --git a/app/assets/stylesheets/base/_buttons-forms.scss b/app/assets/stylesheets/base/_buttons-forms.scss
new file mode 100644
index 000000000..c1e370df2
--- /dev/null
+++ b/app/assets/stylesheets/base/_buttons-forms.scss
@@ -0,0 +1,135 @@
+a.btn-icon {
+  transition: 0s;
+  &:hover {
+    filter: brightness(95%);
+  }
+  &:active {
+    filter: brightness(95%);
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+}
+
+/* try adding !important  after 0px if doesn't work */
+
+// Multiple input list on forms with + button to add more input fields dynamically
+.multiple-input-list {
+  //
+  //.multiple-input-add {
+  //  height: $input-height-base;
+  //}
+
+  .multiple-list-item {
+    margin-bottom: 15px;
+    display: inline-block;
+    width: calc(100% - 72px);
+
+    @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+      width: calc(50% - 36px);
+    }
+
+    @media (min-width: $screen-lg-min) {
+      width: calc(33% - 24px);
+    }
+
+    .multiple-input {
+      display: inline;
+      width: calc(100% - 60px);
+    }
+
+    .multiple-input-delete {
+      display: inline;
+    }
+  }
+}
+
+.dropdown-toggle {
+  cursor: pointer;
+  //padding: $padding-base-horizontal $padding-base-vertical;
+}
+
+.dropdown-option {
+  cursor: pointer;
+
+  &:hover {
+    background: $dropdown-link-hover-bg;
+  }
+}
+
+.dropdown-menu {
+  padding: $padding-base-vertical $padding-base-horizontal;
+}
+
+.dropdown-option-delete {
+  background: none;
+  border: none;
+}
+
+// To make bootstrap button wrap button text into multiple lines
+.btn {
+  white-space: normal !important;
+}
+
+input.loading {
+  background: image-url('ajax-loader.gif') no-repeat right center;
+}
+
+.btn.loading {
+  padding-right: 24px;
+  background: image-url('ajax-loader.gif') no-repeat right center;
+}
+
+input[type=checkbox].field-lock {
+  display: none;
+}
+
+input[type=checkbox].field-lock + label:before {
+  font-family: FontAwesome;
+  cursor: pointer;
+  display: inline-block;
+  content: "\f09c";
+  letter-spacing: 10px;
+  margin-left: 0.5em;
+  vertical-align: middle;
+  width: 1.5em;
+}
+
+input[type=checkbox].field-lock:checked + label:before {
+  content: "\f023";
+}
+
+input[type=checkbox].field-lock:checked + label:before,
+.field-lock-example-locked {
+  color: $brand-success;
+  font-size: 110%;
+}
+
+input[type=checkbox].field-lock + label:before,
+.field-lock-example-open {
+  color: $brand-warning;
+  font-size: 110%;
+}
+
+.keyword-button {
+  margin-right: 5px;
+}
+
+.external-button {
+  margin-right: 5px;
+}
+
+.omniauth-elixir_aai {
+  width: 240px;
+}
+
+.omniauth-oidc {
+  height: 42px;
+}
+
+.btn-oidc-only {
+  font-size: 36px;
+  padding: 4px;
+  margin: 12px 10px;
+  display: flex;
+  justify-content: center;
+}
diff --git a/app/assets/stylesheets/base/_cards-panels.scss b/app/assets/stylesheets/base/_cards-panels.scss
new file mode 100644
index 000000000..9550246f5
--- /dev/null
+++ b/app/assets/stylesheets/base/_cards-panels.scss
@@ -0,0 +1,115 @@
+.info-box {
+  .info-box-header {
+    padding: 10px;
+    background-color: #f6f6f6;
+    border-radius: 4px;
+  }
+
+  .info-box-content {
+    margin-top: 10px;
+  }
+}
+
+.bounding-box {
+  padding: 19px;
+  margin-bottom: 20px;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+}
+
+.list-card {
+  @include floating-card;
+  border-radius: 8px;
+  margin: 0 10px 10px 0;
+  position: relative;
+  display: block;
+  padding: 30px;
+
+  h4 {
+    margin: 0;
+  }
+
+  .list-card-heading {
+    display: block;
+    padding: 5px 0;
+    line-height: 1.3;
+
+    color: $headings-color;
+    text-decoration: none;
+  }
+}
+
+.description p:last-child {
+  margin-bottom: 0;
+}
+
+.description, .source-log {
+  border: 1px solid lightgrey;
+  padding: 18px;
+  border-radius: 5px;
+  margin: 8px 0;
+  overflow: auto;
+}
+
+.source-log {
+  max-height: 20pc;
+  overflow-y: scroll;
+}
+
+.description, .markdown {
+  h1, h2 {
+    font-size: $font-size-large;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #eee;
+  }
+  h2 {
+    padding-bottom: 6px;
+  }
+  h3, h4, h5, h6 {
+    font-size: $font-size-base;
+    padding-bottom: 4px;
+  }
+}
+
+.markdown-description {
+  word-break: break-word;
+  display: inline-block
+}
+
+.collapsible-panel {
+  .collapsible-panel-link {
+    display: block;
+    cursor: pointer;
+
+    .panel-title:after {
+      /* symbol for "opening" panels */
+      font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
+      float: right; /* adjust as needed */
+      content: "\e113"; /* adjust as needed, taken from bootstrap.css */
+    }
+    &.collapsed {
+      @include border-bottom-radius(($panel-border-radius - 1));
+      .panel-title:after {
+        /* symbol for "collapsed" panels */
+        content: "\e114"; /* adjust as needed, taken from bootstrap.css */
+      }
+    }
+  }
+}
+
+.tess-expandable {
+  transition: max-height 0.4s ease-in-out;
+  overflow-y: hidden;
+
+  &.tess-expandable-closed {
+    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+  }
+
+  &.tess-expandable-open {
+    border-bottom: none;
+  }
+}
+
+.tess-expandable-btn {
+  cursor: pointer;
+}
diff --git a/app/assets/stylesheets/base/_facets.scss b/app/assets/stylesheets/base/_facets.scss
new file mode 100644
index 000000000..3df026424
--- /dev/null
+++ b/app/assets/stylesheets/base/_facets.scss
@@ -0,0 +1,135 @@
+.facet-sort-group {
+  display: flex;
+  align-items: center;
+}
+
+ul.facet-sort-wrap {
+  margin-bottom: $layout-spacing-base;
+}
+
+.facet-sort {
+  flex-shrink: 1;
+}
+
+.facet-sort-icon {
+  flex-shrink: 0;
+  margin: 10px;
+}
+
+.facet-select {
+  border-radius: 0;
+  border-width: 1px 0;
+}
+
+// Modified from CKAN - for sidebar facets
+ul.unstyled {
+  @include unstyled-ul;
+}
+
+.nav-simple {
+  margin: 0;
+  list-style: outside none none;
+  padding-bottom: 0;
+}
+
+.nav-simple li {
+  padding: 0;
+}
+
+.nav-simple li:last-of-type {
+  border-bottom: 0 none;
+}
+
+.nav-simple {
+  .form-control {
+    border: 0;
+    box-shadow: none;
+  }
+}
+
+.nav-block {
+  padding: 7px 20px;
+}
+
+.nav-item {
+  padding: 7px 20px;
+  width: 100%;
+}
+
+.nav-item > a {
+  position: relative;
+  display: block;
+  color: #333;
+  padding: 7px 20px 7px 20px;
+  text-decoration: none;
+}
+
+.nav-item > a:hover {
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+
+.nav-item.active > a {
+  position: relative;
+  color: $brand-primary;
+  background-color: #eee;
+}
+
+// End CKAN's sidebar facets
+
+// Facet's title
+.nav-heading {
+  padding: 10px;
+  //background-color: #f6f6f6;
+  margin: 0;
+}
+
+.facet-option {
+  display: flex !important;
+
+  .facet-label {
+    flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+  }
+
+  .facet-count, .remove-facet-icon {
+    flex-shrink: 0;
+    display: inline-block;
+  }
+  .facet-count {
+    color: #999;
+    padding-left: 5px;
+  }
+}
+
+.active-filters {
+  .remove-facet-icon {
+    margin-left: 5px;
+  }
+}
+
+.term_suggestions .dropdown-backdrop {
+  display: none;
+}
+
+.filter-heading {
+  cursor: pointer;
+  color: $headings-color;
+}
+
+.filter-heading-active {
+  color: $brand-primary;
+}
+
+.expand-filters {
+  text-align: right;
+  padding: 7px 20px 7px 20px !important;
+  a {
+    font-size: $font-size-small;
+    color: $gray-light !important;
+    cursor: pointer;
+  }
+}
diff --git a/app/assets/stylesheets/base/_icons-status.scss b/app/assets/stylesheets/base/_icons-status.scss
new file mode 100644
index 000000000..2367dc311
--- /dev/null
+++ b/app/assets/stylesheets/base/_icons-status.scss
@@ -0,0 +1,61 @@
+.resource-type-icon {
+  text-align: center;
+}
+
+.info-icon {
+  font-size: 24px;
+}
+
+.info-icon-small {
+  font-size: 16px;
+}
+
+.info-icon-large {
+  font-size: 48px;
+}
+
+.delete-icon {
+  vertical-align: middle;
+  color: $brand-danger;
+  font-weight: bold;
+  font-size: 120%;
+
+  &:hover {
+    color: darken($brand-danger, 20%);
+  }
+}
+
+.fresh-icon {
+  color: $brand-primary;
+  margin-left: 5px;
+}
+
+.stale-icon {
+  color: $brand-secondary;
+  margin-left: 5px;
+}
+
+.missing-icon {
+  color: $brand-secondary;
+  margin-left: 5px;
+}
+
+.event-started-icon {
+  color: $brand-primary;
+  margin-left: 5px;
+}
+
+.event-expired-icon {
+  color: $gray;
+  margin-left: 5px;
+}
+
+.exchange-icon {
+  color: $brand-primary;
+  margin-left: 5px;
+}
+
+// minor fix of the icon's alignment
+.glyphicon-remove {
+  top: 3px;
+}
diff --git a/app/assets/stylesheets/base/_layout.scss b/app/assets/stylesheets/base/_layout.scss
new file mode 100644
index 000000000..484b5ca96
--- /dev/null
+++ b/app/assets/stylesheets/base/_layout.scss
@@ -0,0 +1,54 @@
+div.wrapper {
+  *zoom: 1;
+  margin-bottom: 20px;
+  display: flex;
+
+  &.collapsing-wrapper {
+    // Divs that were arranged left -> right will collapse to bottom -> top
+    @media (max-width: $screen-sm-max) {
+      flex-direction: column-reverse;
+    }
+  }
+
+  &.collapsing-wrapper-tb {
+    // Opposite to above
+    @media (max-width: $screen-sm-max) {
+      flex-direction: column;
+    }
+  }
+}
+
+#content {
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.content-actions {
+  gap: 10px;
+  display: flex;
+  width: 100%;
+
+  .content-viewer-actions > .btn,
+  .content-viewer-actions > .btn-group,
+  .content-manager-actions > .btn,
+  .content-manager-actions > .btn-group {
+    margin-top: 5px; /* So they have some vertical spacing when collapsed on small screens */
+  }
+
+  .content-viewer-actions {
+    flex-grow: 1;
+    text-align: left;
+  }
+
+  .content-manager-actions {
+    flex-grow: 1;
+    text-align: right;
+  }
+}
+
+div {
+  &.field,
+  &.actions {
+    margin-bottom: 10px;
+  }
+}
diff --git a/app/assets/stylesheets/base/_utilities.scss b/app/assets/stylesheets/base/_utilities.scss
new file mode 100644
index 000000000..8b8be2fd5
--- /dev/null
+++ b/app/assets/stylesheets/base/_utilities.scss
@@ -0,0 +1,156 @@
+// Override Bootstrap's alert
+.alert {
+  margin-bottom: 0;
+  margin-top: 5px;
+}
+
+.show-page-description {
+  padding: 50px 0;
+}
+
+/* The max width is dependent on the container (more info below) */
+.popover {
+  max-width: 500px !important; /* Max Width of the popover (depending on the container!) */
+}
+
+.schemaorg-element {
+  display: none;
+}
+
+.muted {
+  color: $text-muted;
+}
+
+.gap {
+  padding: 0 5px;
+}
+
+.tool-suggestions-header {
+  margin-bottom: 20px;
+  color: $gray-darker;
+}
+
+.external-links {
+  margin-top: 10px;
+}
+
+.days_ago_text {
+  color: grey;
+  font-style: italic;
+}
+
+.latest_resource_description {
+  /*
+  min-width: 500px;
+  min-height: 20px;
+  */
+  word-wrap: break-word;
+}
+
+div.legal-block {
+  max-width: 800px;
+  margin: auto;
+}
+
+.url-wrap {
+  display: inline-block;
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+
+.bs-type-selectors ul {
+  display: inline;
+  padding: 0;
+  padding-inline-start: 0;
+
+  li {
+    display: inline;
+    padding: 10px;
+  }
+}
+
+.alert-info a {
+  text-decoration: underline;
+}
+
+#why-register {
+  ul {
+    font-size: $font-size-large;
+
+    li {
+      margin: 1em 0;
+    }
+  }
+}
+
+.selected-tab {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.embedded-content {
+  margin: 2em auto;
+  display: flex;
+  justify-content: center;
+
+  iframe {
+    display: block;
+  }
+}
+
+.bulk-import-row {
+  .scraped-metadata p {
+    margin: 0;
+  }
+}
+
+.test-controls {
+  padding: 10px;
+  display: inline-block;
+}
+
+/* Calendar inset numbers */
+td.day {
+  position: relative;
+}
+td.day .day-number {
+  position: absolute;
+  bottom: 0px;
+  right: 6px;
+  font-size: 1.5em;
+  color: rgb(186, 186, 186);
+}
+td.day .calendar-text {
+  font-size: 12px;
+  line-height: 14px;
+  margin-bottom: 12px;
+}
+
+.draggable--over {
+  opacity: 0.7;
+  background: $state-success-bg;
+}
+
+.theme-selector {
+  display: flex;
+  gap: 10px;
+}
+
+.theme-select-option {
+  flex-grow: 1;
+  label {
+    border: 5px solid;
+    padding: 10px 20px;
+    border-radius: 5px;
+    display: block;
+
+    hr {
+      border-width: 10px;
+    }
+  }
+}
+
+.tag-topic, .tag-operation {
+  text-decoration: none;
+}
diff --git a/app/assets/stylesheets/carousel.scss b/app/assets/stylesheets/carousel.scss
new file mode 100644
index 000000000..dd916664f
--- /dev/null
+++ b/app/assets/stylesheets/carousel.scss
@@ -0,0 +1,68 @@
+.multi-item-carousel {
+  .carousel-inner {
+    > .item {
+      transition: 500ms ease-in-out left;
+
+      > div {
+        display: flex;
+        justify-content: center;
+
+        > a {
+          min-width: 150px;
+          width: 150px;
+          height: 150px;
+          @include floating-card;
+          border-radius: 150px;
+          margin: 15px;
+          background-color: white;
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &:hover, &:focus {
+            background-color: #e8f3f6;
+            border: 1px solid #e8f3f6;
+            box-shadow: none;
+          }
+
+          img {
+            width: 100px;
+          }
+        }
+      }
+    }
+
+    .active {
+      &.left {
+        left: -33%;
+      }
+
+      &.right {
+        left: 33%;
+      }
+    }
+
+    .next {
+      left: 33%;
+    }
+
+    .prev {
+      left: -33%;
+    }
+
+    @media all and (transform-3d), (-webkit-transform-3d) {
+      > .item {
+        transition: 500ms ease-in-out left;
+        transition: 500ms ease-in-out all;
+        backface-visibility: visible;
+        transform: none !important;
+      }
+    }
+  }
+
+  .carousel-control.right, .carousel-control.left {
+    background-image: none;
+    width: 30px;
+  }
+}
diff --git a/app/assets/stylesheets/community-banner.scss b/app/assets/stylesheets/community-banner.scss
new file mode 100644
index 000000000..4581cbdd6
--- /dev/null
+++ b/app/assets/stylesheets/community-banner.scss
@@ -0,0 +1,6 @@
+#community-banner {
+  text-align: center;
+  padding: $item-padding-base / 2;
+  margin: 0 auto;
+  float: right;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss
index 4d8482cae..076b20d88 100644
--- a/app/assets/stylesheets/home.scss
+++ b/app/assets/stylesheets/home.scss
@@ -1,59 +1,8 @@
-// TODO: sections are styled more or less similarly, so maybe it makes sense to refactor common styles?
-
 .welcome-text {
   padding: 20px;
   text-align: center;
 }
 
-.searchbox {
-  text-align: center;
-  margin-top: 10px;
-  margin-bottom: 30px;
-
-  form {
-    padding-right: 10px;
-    text-align: center;
-    line-height: 2;
-    font-size: $font-size-large;
-    margin: auto;
-    max-width: 800px;
-
-    border: none;
-    border-radius: 50px;
-    background-color: #F4F4F4;
-
-    .searchbox-wrapper {
-      display: flex;
-    }
-
-    .searchbox-field {
-      border: none;
-      box-shadow: none;
-      outline: 0 none;
-      background: transparent;
-      padding: 15px 15px 15px 25px;
-      flex: 1;
-      min-width: 220px;
-      border-radius: 100px;
-    }
-
-    .searchbox-btn {
-      border: none;
-      background-color: transparent;
-      opacity: 0.5;
-      box-shadow: none;
-      padding: 8px 16px 8px 8px;
-      flex-shrink: 0;
-
-      transition: $transition-time;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-}
-
 ul.catalogue {
   padding: 10px 0;
   margin: 0 -10px;
@@ -311,75 +260,6 @@ ul.promo-blocks {
   }
 }
 
-.multi-item-carousel {
-  .carousel-inner {
-    > .item {
-      transition: 500ms ease-in-out left;
-
-      > div {
-        display: flex;
-        justify-content: center;
-
-        > a {
-          min-width: 150px;
-          width: 150px;
-          height: 150px;
-          @include floating-card;
-          border-radius: 150px;
-          margin: 15px;
-          background-color: white;
-
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          &:hover, &:focus {
-            background-color: #e8f3f6;
-            border: 1px solid #e8f3f6;
-            box-shadow: none;
-          }
-
-          img {
-            width: 100px;
-          }
-        }
-      }
-    }
-
-    .active {
-      &.left {
-        left: -33%;
-      }
-
-      &.right {
-        left: 33%;
-      }
-    }
-
-    .next {
-      left: 33%;
-    }
-
-    .prev {
-      left: -33%;
-    }
-
-    @media all and (transform-3d), (-webkit-transform-3d) {
-      > .item {
-        transition: 500ms ease-in-out left;
-        transition: 500ms ease-in-out all;
-        backface-visibility: visible;
-        transform: none !important;
-      }
-    }
-  }
-
-  .carousel-control.right, .carousel-control.left {
-    background-image: none;
-    width: 30px;
-  }
-}
-
 ul.content-providers-grid {
   padding: 10px 100px;
   list-style: none;
@@ -421,10 +301,3 @@ ul.content-providers-grid {
     text-decoration: none;
   }
 }
-
-#community-banner {
-  text-align: center;
-  padding: $item-padding-base / 2;
-  margin: 0 auto;
-  float: right;
-}
diff --git a/app/assets/stylesheets/navbar-header.scss b/app/assets/stylesheets/navbar-header.scss
new file mode 100644
index 000000000..8c3b1cf58
--- /dev/null
+++ b/app/assets/stylesheets/navbar-header.scss
@@ -0,0 +1,89 @@
+.announcement {
+  color: #333;
+  border: 1px solid #ddd;
+  background: #ffc;
+  padding: 0.3em 0.6em;
+  margin-bottom: 1em;
+  line-height: 1.7;
+}
+
+#front-page-announcement {
+  font-size: 120%;
+  font-weight: bold;
+  text-align: center;
+}
+
+#flash-container {
+  text-align: center;
+}
+
+.header-notice {
+  background-color: $state-info-bg;
+  color: $state-info-text;
+}
+
+#cookie-banner {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding-top: 10px;
+  background-color: #ddd;
+  z-index: 2;
+
+  .btn {
+    margin-bottom: 5px;
+  }
+}
+
+.sticky-navbar-enabled {
+  .navbar {
+    border-radius: 0;
+    font-size: larger;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    margin-bottom: 0px;
+    transition: font-size 0.3s ease, padding-bottom 0.3s ease, padding-top 0.3s ease;
+
+    &.scrolled {
+      font-size: medium;
+      padding-bottom: 0;
+      padding-top: 0;
+    }
+  }
+
+  .unified-header {
+    z-index: 100000;
+    position: sticky;
+    top: 0;
+    background-color: $navbar-default-bg;
+
+    .navbar-brand {
+
+      img {
+        padding: 0px 0px 0px 0px;
+        transition: padding 0.3s ease;
+
+        &.scrolled {
+          padding: 10px 5px 5px 5px;
+        }
+      }
+    }
+  }
+
+  .header-notice + .navbar {
+    padding-bottom: 20px;
+    padding-top: 20px;
+    &.scrolled {
+      padding-top: 0px;
+      padding-bottom: 0px;
+    }
+  }
+
+  .header-notice-present {
+    .header-notice {
+      z-index: 100001;
+      position: sticky;
+      top: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/search.scss b/app/assets/stylesheets/search.scss
new file mode 100644
index 000000000..fbac2a8d5
--- /dev/null
+++ b/app/assets/stylesheets/search.scss
@@ -0,0 +1,126 @@
+// Style for empty results etc.
+.empty {
+  color: #aaa;
+  font-style: italic;
+}
+
+.search-results-count {
+  margin-right: 1em;
+  display: inline-block
+}
+
+.search-results-per-page {
+  display: inline-block;
+
+  select {
+    border: none;
+    padding: 0;
+    background: transparent;
+    border-bottom: 1px dashed $text-color;
+  }
+}
+
+.index-display-options {
+  margin: 5px 0;
+}
+
+.search-panel {
+  padding-top: 5px;
+
+  .btn, .searchbox-sm, .input-group input {
+    margin: 5px 0;
+  }
+}
+
+.searchbox {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 30px;
+
+  form {
+    padding-right: 10px;
+    text-align: center;
+    line-height: 2;
+    font-size: $font-size-large;
+    margin: auto;
+    max-width: 800px;
+
+    border: none;
+    border-radius: 50px;
+    background-color: #F4F4F4;
+
+    .searchbox-wrapper {
+      display: flex;
+    }
+
+    .searchbox-field {
+      border: none;
+      box-shadow: none;
+      outline: 0 none;
+      background: transparent;
+      padding: 15px 15px 15px 25px;
+      flex: 1;
+      min-width: 220px;
+      border-radius: 100px;
+    }
+
+    .searchbox-btn {
+      border: none;
+      background-color: transparent;
+      opacity: 0.5;
+      box-shadow: none;
+      padding: 8px 16px 8px 8px;
+      flex-shrink: 0;
+
+      transition: $transition-time;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.searchbox-sm {
+  form {
+    padding-right: 10px;
+    text-align: center;
+    margin: auto;
+    max-width: 800px;
+
+    border: none;
+    border-radius: 50px;
+    background-color: #F4F4F4;
+
+    .searchbox-wrapper {
+      display: flex;
+    }
+
+    .searchbox-field {
+      border: none;
+      box-shadow: none;
+      outline: 0 none;
+      background: transparent;
+      line-height: $line-height-base;
+      padding: $padding-base-vertical $padding-base-horizontal $padding-base-vertical ($padding-base-vertical + 16px);
+      flex: 1;
+      min-width: 220px;
+      border-radius: 100px;
+    }
+
+    .searchbox-btn {
+      border: none;
+      background-color: transparent;
+      opacity: 0.5;
+      box-shadow: none;
+      padding: 8px 8px 8px 8px;
+      flex-shrink: 0;
+
+      transition: $transition-time;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss
new file mode 100644
index 000000000..9ac7d4f76
--- /dev/null
+++ b/app/assets/stylesheets/sidebar.scss
@@ -0,0 +1,90 @@
+#sidebar {
+  width: $sidebar-width;
+  margin-right: $layout-spacing-base * 2;
+  margin-top: $layout-spacing-base;
+  flex-shrink: 0;
+
+  .sidebar-group {
+    background: $panel-bg;
+    @include floating-card;
+    border-radius: 6px;
+    > ul {
+      @include unstyled-ul;
+    }
+  }
+
+  &.collapsing-sidebar {
+    @media (max-width: $screen-sm-max) {
+      width: 100%;
+      border-right: none;
+    }
+  }
+
+  &.popout-sidebar {
+    @media (max-width: $screen-sm-max) {
+      padding: 25px;
+      width: calc(100% - 40px);
+      position: absolute;
+      z-index: $zindex-modal;
+      background: $panel-bg;
+      border-bottom: 1px solid $panel-default-border;
+      border-radius: $border-radius-large;
+      top: 0;
+      left: 20px;
+      display: none;
+
+      &.open {
+        display: block;
+      }
+    }
+  }
+
+  // Sidebar facet styles
+  table tr td.h4 {
+    padding-left: 10px;
+  }
+
+  table tr td {
+    padding-left: 20px;
+  }
+
+  table tr td a {
+    color: #000;
+    padding: 3px;
+    text-decoration: none;
+  }
+
+  table tr td a:hover {
+    background-color: #b0c3c9;
+    color: #fff;
+    padding: 3px;
+    text-decoration: none;
+  }
+
+  .clear-filters-btn {
+    float: right;
+    margin: 5px 0;
+  }
+}
+
+.sidebar-backdrop {
+  @media (min-width: $screen-md-min) {
+    display: none;
+  }
+}
+
+#sidebar-toggle {
+  display: none;
+
+  @media (max-width: $screen-sm-max) {
+    display: inline;
+  }
+}
+
+#sidebar-header {
+  display: none;
+
+  @media (max-width: $screen-sm-max) {
+    display: block;
+  }
+}

From 070047e58481d70afd31daa87ffebd1944ea020a Mon Sep 17 00:00:00 2001
From: Valentin Ryckaert <valentin.ryckaert@protonmail.com>
Date: Tue, 28 Jul 2026 13:37:58 +0200
Subject: [PATCH 2/3] feat: reorganizing files

---
 app/assets/stylesheets/application.scss       | 60 ++++++++++---------
 .../_autocomplete.scss}                       |  0
 .../_bootstrap-tweaks.scss}                   |  0
 .../_carousel.scss}                           |  0
 .../_community-banner.scss}                   |  0
 .../{footer.scss => components/_footer.scss}  |  0
 .../{forms.scss => components/_forms.scss}    |  0
 .../_headers.scss}                            |  0
 .../_helpers.scss}                            |  0
 .../{icons.scss => components/_icons.scss}    |  0
 .../_masonry.scss}                            |  0
 .../_navbar-header.scss}                      |  0
 .../_sidebar.scss}                            |  0
 .../{toggle.scss => components/_toggle.scss}  |  0
 app/assets/stylesheets/{ => pages}/about.scss |  0
 .../stylesheets/{ => pages}/account.scss      |  0
 .../stylesheets/{ => pages}/activities.scss   |  0
 .../{ => pages}/collaborations.scss           |  0
 .../stylesheets/{ => pages}/collection.scss   |  0
 .../stylesheets/{ => pages}/curators.scss     |  0
 .../stylesheets/{ => pages}/events.scss       |  0
 .../{ => pages}/external-resources.scss       |  0
 app/assets/stylesheets/{ => pages}/home.scss  |  0
 .../{ => pages}/learning-paths.scss           |  0
 app/assets/stylesheets/{ => pages}/nodes.scss |  0
 .../stylesheets/{ => pages}/search.scss       |  0
 .../stylesheets/{ => pages}/showcase.scss     |  0
 .../stylesheets/{ => pages}/sources.scss      |  0
 .../stylesheets/{ => pages}/workflows.scss    |  0
 29 files changed, 31 insertions(+), 29 deletions(-)
 rename app/assets/stylesheets/{autocomplete.scss => components/_autocomplete.scss} (100%)
 rename app/assets/stylesheets/{bootstrap-tweaks.scss => components/_bootstrap-tweaks.scss} (100%)
 rename app/assets/stylesheets/{carousel.scss => components/_carousel.scss} (100%)
 rename app/assets/stylesheets/{community-banner.scss => components/_community-banner.scss} (100%)
 rename app/assets/stylesheets/{footer.scss => components/_footer.scss} (100%)
 rename app/assets/stylesheets/{forms.scss => components/_forms.scss} (100%)
 rename app/assets/stylesheets/{headers.scss => components/_headers.scss} (100%)
 rename app/assets/stylesheets/{helpers.scss => components/_helpers.scss} (100%)
 rename app/assets/stylesheets/{icons.scss => components/_icons.scss} (100%)
 rename app/assets/stylesheets/{masonry.scss => components/_masonry.scss} (100%)
 rename app/assets/stylesheets/{navbar-header.scss => components/_navbar-header.scss} (100%)
 rename app/assets/stylesheets/{sidebar.scss => components/_sidebar.scss} (100%)
 rename app/assets/stylesheets/{toggle.scss => components/_toggle.scss} (100%)
 rename app/assets/stylesheets/{ => pages}/about.scss (100%)
 rename app/assets/stylesheets/{ => pages}/account.scss (100%)
 rename app/assets/stylesheets/{ => pages}/activities.scss (100%)
 rename app/assets/stylesheets/{ => pages}/collaborations.scss (100%)
 rename app/assets/stylesheets/{ => pages}/collection.scss (100%)
 rename app/assets/stylesheets/{ => pages}/curators.scss (100%)
 rename app/assets/stylesheets/{ => pages}/events.scss (100%)
 rename app/assets/stylesheets/{ => pages}/external-resources.scss (100%)
 rename app/assets/stylesheets/{ => pages}/home.scss (100%)
 rename app/assets/stylesheets/{ => pages}/learning-paths.scss (100%)
 rename app/assets/stylesheets/{ => pages}/nodes.scss (100%)
 rename app/assets/stylesheets/{ => pages}/search.scss (100%)
 rename app/assets/stylesheets/{ => pages}/showcase.scss (100%)
 rename app/assets/stylesheets/{ => pages}/sources.scss (100%)
 rename app/assets/stylesheets/{ => pages}/workflows.scss (100%)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index efe31c3c3..e02b6edf1 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -29,35 +29,37 @@
 @import "base/cards-panels";
 @import "base/utilities";
 
-// Local
-@import "about";
-@import "account";
-@import "activities";
-@import "autocomplete";
-@import "bootstrap-tweaks";
-@import "collaborations";
-@import "collection";
-@import "carousel";
-@import "community-banner";
-@import "curators";
-@import "events";
-@import "external-resources";
-@import "sources";
-@import "sidebar";
-@import "search";
-@import "footer";
-@import "forms";
-@import "headers";
-@import "helpers";
-@import "home";
-@import "icons";
-@import "learning-paths";
-@import "navbar-header";
-@import "masonry";
-@import "nodes";
-@import "showcase";
-@import "toggle";
-@import "workflows";
+// Local - components
+@import "components/autocomplete";
+@import "components/bootstrap-tweaks";
+@import "components/carousel";
+@import "components/community-banner";
+@import "components/footer";
+@import "components/forms";
+@import "components/headers";
+@import "components/helpers";
+@import "components/icons";
+@import "components/masonry";
+@import "components/navbar-header";
+@import "components/sidebar";
+@import "components/toggle";
+
+// Local - pages
+@import "pages/about";
+@import "pages/account";
+@import "pages/activities";
+@import "pages/collaborations";
+@import "pages/collection";
+@import "pages/curators";
+@import "pages/events";
+@import "pages/external-resources";
+@import "pages/home";
+@import "pages/learning-paths";
+@import "pages/nodes";
+@import "pages/search";
+@import "pages/showcase";
+@import "pages/sources";
+@import "pages/workflows";
 
 // Vendor
 @import "cytoscape-panzoom";
diff --git a/app/assets/stylesheets/autocomplete.scss b/app/assets/stylesheets/components/_autocomplete.scss
similarity index 100%
rename from app/assets/stylesheets/autocomplete.scss
rename to app/assets/stylesheets/components/_autocomplete.scss
diff --git a/app/assets/stylesheets/bootstrap-tweaks.scss b/app/assets/stylesheets/components/_bootstrap-tweaks.scss
similarity index 100%
rename from app/assets/stylesheets/bootstrap-tweaks.scss
rename to app/assets/stylesheets/components/_bootstrap-tweaks.scss
diff --git a/app/assets/stylesheets/carousel.scss b/app/assets/stylesheets/components/_carousel.scss
similarity index 100%
rename from app/assets/stylesheets/carousel.scss
rename to app/assets/stylesheets/components/_carousel.scss
diff --git a/app/assets/stylesheets/community-banner.scss b/app/assets/stylesheets/components/_community-banner.scss
similarity index 100%
rename from app/assets/stylesheets/community-banner.scss
rename to app/assets/stylesheets/components/_community-banner.scss
diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/components/_footer.scss
similarity index 100%
rename from app/assets/stylesheets/footer.scss
rename to app/assets/stylesheets/components/_footer.scss
diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/components/_forms.scss
similarity index 100%
rename from app/assets/stylesheets/forms.scss
rename to app/assets/stylesheets/components/_forms.scss
diff --git a/app/assets/stylesheets/headers.scss b/app/assets/stylesheets/components/_headers.scss
similarity index 100%
rename from app/assets/stylesheets/headers.scss
rename to app/assets/stylesheets/components/_headers.scss
diff --git a/app/assets/stylesheets/helpers.scss b/app/assets/stylesheets/components/_helpers.scss
similarity index 100%
rename from app/assets/stylesheets/helpers.scss
rename to app/assets/stylesheets/components/_helpers.scss
diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/components/_icons.scss
similarity index 100%
rename from app/assets/stylesheets/icons.scss
rename to app/assets/stylesheets/components/_icons.scss
diff --git a/app/assets/stylesheets/masonry.scss b/app/assets/stylesheets/components/_masonry.scss
similarity index 100%
rename from app/assets/stylesheets/masonry.scss
rename to app/assets/stylesheets/components/_masonry.scss
diff --git a/app/assets/stylesheets/navbar-header.scss b/app/assets/stylesheets/components/_navbar-header.scss
similarity index 100%
rename from app/assets/stylesheets/navbar-header.scss
rename to app/assets/stylesheets/components/_navbar-header.scss
diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/components/_sidebar.scss
similarity index 100%
rename from app/assets/stylesheets/sidebar.scss
rename to app/assets/stylesheets/components/_sidebar.scss
diff --git a/app/assets/stylesheets/toggle.scss b/app/assets/stylesheets/components/_toggle.scss
similarity index 100%
rename from app/assets/stylesheets/toggle.scss
rename to app/assets/stylesheets/components/_toggle.scss
diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/pages/about.scss
similarity index 100%
rename from app/assets/stylesheets/about.scss
rename to app/assets/stylesheets/pages/about.scss
diff --git a/app/assets/stylesheets/account.scss b/app/assets/stylesheets/pages/account.scss
similarity index 100%
rename from app/assets/stylesheets/account.scss
rename to app/assets/stylesheets/pages/account.scss
diff --git a/app/assets/stylesheets/activities.scss b/app/assets/stylesheets/pages/activities.scss
similarity index 100%
rename from app/assets/stylesheets/activities.scss
rename to app/assets/stylesheets/pages/activities.scss
diff --git a/app/assets/stylesheets/collaborations.scss b/app/assets/stylesheets/pages/collaborations.scss
similarity index 100%
rename from app/assets/stylesheets/collaborations.scss
rename to app/assets/stylesheets/pages/collaborations.scss
diff --git a/app/assets/stylesheets/collection.scss b/app/assets/stylesheets/pages/collection.scss
similarity index 100%
rename from app/assets/stylesheets/collection.scss
rename to app/assets/stylesheets/pages/collection.scss
diff --git a/app/assets/stylesheets/curators.scss b/app/assets/stylesheets/pages/curators.scss
similarity index 100%
rename from app/assets/stylesheets/curators.scss
rename to app/assets/stylesheets/pages/curators.scss
diff --git a/app/assets/stylesheets/events.scss b/app/assets/stylesheets/pages/events.scss
similarity index 100%
rename from app/assets/stylesheets/events.scss
rename to app/assets/stylesheets/pages/events.scss
diff --git a/app/assets/stylesheets/external-resources.scss b/app/assets/stylesheets/pages/external-resources.scss
similarity index 100%
rename from app/assets/stylesheets/external-resources.scss
rename to app/assets/stylesheets/pages/external-resources.scss
diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/pages/home.scss
similarity index 100%
rename from app/assets/stylesheets/home.scss
rename to app/assets/stylesheets/pages/home.scss
diff --git a/app/assets/stylesheets/learning-paths.scss b/app/assets/stylesheets/pages/learning-paths.scss
similarity index 100%
rename from app/assets/stylesheets/learning-paths.scss
rename to app/assets/stylesheets/pages/learning-paths.scss
diff --git a/app/assets/stylesheets/nodes.scss b/app/assets/stylesheets/pages/nodes.scss
similarity index 100%
rename from app/assets/stylesheets/nodes.scss
rename to app/assets/stylesheets/pages/nodes.scss
diff --git a/app/assets/stylesheets/search.scss b/app/assets/stylesheets/pages/search.scss
similarity index 100%
rename from app/assets/stylesheets/search.scss
rename to app/assets/stylesheets/pages/search.scss
diff --git a/app/assets/stylesheets/showcase.scss b/app/assets/stylesheets/pages/showcase.scss
similarity index 100%
rename from app/assets/stylesheets/showcase.scss
rename to app/assets/stylesheets/pages/showcase.scss
diff --git a/app/assets/stylesheets/sources.scss b/app/assets/stylesheets/pages/sources.scss
similarity index 100%
rename from app/assets/stylesheets/sources.scss
rename to app/assets/stylesheets/pages/sources.scss
diff --git a/app/assets/stylesheets/workflows.scss b/app/assets/stylesheets/pages/workflows.scss
similarity index 100%
rename from app/assets/stylesheets/workflows.scss
rename to app/assets/stylesheets/pages/workflows.scss

From 6e9175191bcfdf58d19c14c77bff1eb6f2aa7225 Mon Sep 17 00:00:00 2001
From: Valentin Ryckaert <145444837+valentinRyckaert@users.noreply.github.com>
Date: Thu, 20 Aug 2026 16:11:35 +0200
Subject: [PATCH 3/3] fix: add forgot import

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 app/assets/stylesheets/application.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index e02b6edf1..f2ad52044 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -60,6 +60,7 @@
 @import "pages/showcase";
 @import "pages/sources";
 @import "pages/workflows";
+@import "groups";
 
 // Vendor
 @import "cytoscape-panzoom";