Montreal dev UI 2024 - deliverable 1 and 2 (#3)

* add design system, implement site navigation

* customize home-page

* Customize homepage navigation

* add link to home

* set max showcase items to 3 on homepage

* add hero component

* header searchbar

* add hero to news and applications page

* add link to applications

* update page_hero component

* add documentation for D1 and D2

* add i18n

* add more translations

* fix language redirection

* Render news contents

---------

Co-authored-by: William Lima <[email protected]>
Signed-off-by: Michael Polidori <[email protected]>

ckanext/montreal_theme/assets/css/custom.css

@@ -1,42 +1,223 @@
-#login-form{
-    margin-top: -25px;
-    padding-top: 0px;
-    }
+#login-form {
+  margin-top: -25px;
+  padding-top: 0px;
+}
 
-#info-header-login{
-    margin-left: -1em ;
-    margin-bottom: 1em;
+#info-header-login {
+  margin-left: -1em;
+  margin-bottom: 1em;
 }
-#register-account-button{
-    padding-top: 1em;
-    padding-bottom: 1em;
+#register-account-button {
+  padding-top: 1em;
+  padding-bottom: 1em;
 }
 
-#forgot-password-button{
-    padding-top: 1em;
+#forgot-password-button {
+  padding-top: 1em;
 }
 
-#contact-us-container{
-    float: left;
-    margin-right: 3em;
-    background-color: white;
+#contact-us-container {
+  float: left;
+  margin-right: 3em;
+  background-color: white;
 }
 
 .contact-us-social {
-    margin: 0;
-    padding: 10px 17px;
-    font-size: 20px;
-    font-weight: 700;
-    color: #5a5a5a;
-    line-height: 1.3;
-    background-color: #e9ecef;
-  }
+  margin: 0;
+  padding: 10px 17px;
+  font-size: 20px;
+  font-weight: 700;
+  color: #5a5a5a;
+  line-height: 1.3;
+  background-color: #e9ecef;
+}
+
+#contact-us-sidebar {
+  margin-top: 45px;
+}
+
+.facet-title {
+  text-transform: capitalize;
+}
+
+/* Montreal theme */
+.text-dark{
+  color:#212529
+}
+.wide-container {
+  padding: 0 15px;
+  max-width: 1440px;
+  margin: 0 auto;
+}
 
-  #contact-us-sidebar {
-    margin-top: 45px;
-
+@media (min-width: 1280px) {
+  .container {
+      max-width: 1280px!important;
   }
+}
+
+.montreal-theme .dropdown-menu-right{
+  left:auto!important
+}
+
+.h-fit{
+  height: fit-content;
+  width: fit-content;
+}
+
+/*header top navigation / lang switcher*/
+.app-navbar a {
+  background: none !important;
+  text-decoration: none !important;
+  color: #212529;
+}
+.app-navbar a:hover {
+  color: #097d6c !important;
+}
+.app-navbar a:hover > span.text-dark {
+  color: #097d6c !important;
+}
+.navbar-lang-switcher .dropdown-menu {
+  left: auto;
+  right: 0;
+  min-width: 140px;
+}
+
+.navbar-lang-switcher .dropdown-menu .dropdown-item.active {
+  font-weight: 600;
+}
+
+.go-to-montreal {
+  color: #212529 !important;
+  text-decoration: none !important;
+  background-color: transparent !important;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+}
+
+.app-mega-menu {
+  position: static !important;
+}
+.app-mega-menu .dropdown-menu {
+  width: 100%;
+  left: 0;
+  z-index: 100;
+  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
+  border-top: 1px solid #dee2e6;
+  padding-bottom: 40px;
+}
+
+.app-mega-menu .menu-description {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  margin-bottom: 35px;
+}
+
+.app-mega-menu .submenu-title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  color: #212529;
+}
+
+.app-mega-menu .submenu-description {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  color: #637381;
+}
+.app-mega-menu ul {
+  padding: 0;
+}
+.app-mega-menu ul > li:not(:last-child) {
+  margin-bottom: 30px;
+}
+
+.app-mega-menu ul li a:hover,
+.app-mega-menu ul li a:hover span {
+  color: #097d6c !important;
+}
+
+.app-mega-menu .menu-highlight {
+  background: whitesmoke;
+}
+
+
+.encart {
+  background-color: #ffffff;
+  border-radius: 0.25rem;
+  padding: 2rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.encart.encart-light {
+  background-color: #f8f9fa;
+}
+
+.montreal-theme .navbar-lang-switcher {
+  padding-right: 0;
+}
+
+.nav-admin .instance {
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  color: white;
+}
+
+
+/* hero search */
+.montreal-hero .form-group{
+  max-width: 50%;;
+  width: 100%;
+}
+.form-control+.icon.icon-search{
+  width: 40px;
+}
+
+
+/*home news section*/
+.news-title{
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+}
+
+
+
+/*searchbar*/
+.montreal-theme .montreal-searchbar .btn .icon{
+  width: 24px;
+}
+.montreal-theme .montreal-searchbar .btn .icon:before{
+  background-color: #212529;
+  width: 24px;
+}
+
+.montreal-theme .montreal-searchbar input{
+  width: 300px;
+}
 
-  .facet-title {
-    text-transform: capitalize;
-  }
+.montreal-searchbar .btn-label{
+  color:#212529
+}