fix navbar base landingWIP-CSS

8 files changed, 159 insertions, 77 deletions

diff --git a/liberaforms/static/css/main-backend.css b/liberaforms/static/css/main-backend.css
index 355a8c3b..7fab3b9e 100644
--- a/liberaforms/static/css/main-backend.css
+++ b/liberaforms/static/css/main-backend.css
@@ -14117,6 +14117,13 @@ button {
  * Header
  *
  */
+.navbar-brand {
+  --lf-navbar-brand-font-size: .875rem;
+}
+
+.ds-main-navbar .navbar-brand span {
+  display: none;
+}
 .ds-main-navbar .dropdown-item,
 .ds-main-navbar .dropdown-toggle {
   font-size: 0.875rem;
@@ -14130,6 +14137,15 @@ button {
 .ds-main-navbar .ds-name {
   display: none;
 }
+.ds-main-navbar .ds-color-primary-level,
+.ds-main-navbar .ds-color-primary-level:hover,
+.ds-main-navbar .ds-color-primary-level:active,
+.ds-main-navbar .ds-color-primary-level:focus {
+  border: none;
+  padding-left: 0.09375rem;
+  padding-right: 0.09375rem;
+  text-decoration: none;
+}
 
 .ds-avatar {
   margin-right: 0.25rem;
@@ -14140,12 +14156,22 @@ button {
 }
 
 @media (min-width: 992px) {
+  .ds-main-navbar .navbar-brand span {
+    display: initial;
+  }
   .ds-main-navbar .dropdown-toggle:after {
     display: inline-block;
   }
   .ds-main-navbar .ds-name {
     display: initial;
   }
+  .ds-main-navbar .ds-color-primary-level,
+.ds-main-navbar .ds-color-primary-level:hover,
+.ds-main-navbar .ds-color-primary-level:active,
+.ds-main-navbar .ds-color-primary-level:focus {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
 }
 /*
  * formBuilder js library
@@ -14522,8 +14548,9 @@ textarea.parsley-error {
 .ds-main-navbar {
   background-color: #fff;
 }
-.ds-main-navbar .navbar-brand span {
-  display: none;
+.ds-main-navbar > nav {
+  padding-top: 0.1875rem;
+  padding-bottom: 0.1875rem;
 }
 .ds-main-navbar .ds-show-help.hide {
   display: none;
@@ -14534,25 +14561,7 @@ textarea.parsley-error {
 .ds-main-navbar .ds-hide-help.show {
   display: initial;
 }
-.ds-main-navbar .ds-color-primary-level,
-.ds-main-navbar .ds-color-primary-level:hover,
-.ds-main-navbar .ds-color-primary-level:active,
-.ds-main-navbar .ds-color-primary-level:focus {
-  border: none;
-  padding-left: 0.09375rem;
-  padding-right: 0.09375rem;
-}
-
-@media (min-width: 992px) {
-  .ds-main-navbar .navbar-brand span {
-    display: initial;
-  }
 
-  .ds-color-primary-level {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-}
 /*
  * Sidebar
  *
diff --git a/liberaforms/static/css/main-landing.css b/liberaforms/static/css/main-landing.css
index a8f2aa5f..faff1ad3 100644
--- a/liberaforms/static/css/main-landing.css
+++ b/liberaforms/static/css/main-landing.css
@@ -8419,6 +8419,13 @@ button {
  * Header
  *
  */
+.navbar-brand {
+  --lf-navbar-brand-font-size: .875rem;
+}
+
+.ds-main-navbar .navbar-brand span {
+  display: none;
+}
 .ds-main-navbar .dropdown-item,
 .ds-main-navbar .dropdown-toggle {
   font-size: 0.875rem;
@@ -8432,6 +8439,15 @@ button {
 .ds-main-navbar .ds-name {
   display: none;
 }
+.ds-main-navbar .ds-color-primary-level,
+.ds-main-navbar .ds-color-primary-level:hover,
+.ds-main-navbar .ds-color-primary-level:active,
+.ds-main-navbar .ds-color-primary-level:focus {
+  border: none;
+  padding-left: 0.09375rem;
+  padding-right: 0.09375rem;
+  text-decoration: none;
+}
 
 .ds-avatar {
   margin-right: 0.25rem;
@@ -8442,17 +8458,31 @@ button {
 }
 
 @media (min-width: 992px) {
+  .ds-main-navbar .navbar-brand span {
+    display: initial;
+  }
   .ds-main-navbar .dropdown-toggle:after {
     display: inline-block;
   }
   .ds-main-navbar .ds-name {
     display: initial;
   }
+  .ds-main-navbar .ds-color-primary-level,
+.ds-main-navbar .ds-color-primary-level:hover,
+.ds-main-navbar .ds-color-primary-level:active,
+.ds-main-navbar .ds-color-primary-level:focus {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
 }
 /*
  * Classes
  *
  */
+.ds-main-wrapper {
+  margin-top: 5rem;
+}
+
 .ds-error-center {
   display: grid;
   min-height: 70vh;
@@ -8469,4 +8499,16 @@ button {
   text-align: center;
   margin-bottom: 2rem;
   margin-top: 1rem;
+}
+
+/*
+ * Header
+ *
+ */
+.ds-main-navbar .navbar {
+  --lf-navbar-padding-y: 0.375rem;
+  --lf-navbar-brand-padding-y: 0;
+}
+.ds-main-navbar .ds-link-to-panel {
+  font-size: 0.875rem;
 }
\ No newline at end of file
diff --git a/liberaforms/static/sass/backend/_header.scss b/liberaforms/static/sass/backend/_header.scss
index de1333b1..18ae7bb0 100644
--- a/liberaforms/static/sass/backend/_header.scss
+++ b/liberaforms/static/sass/backend/_header.scss
@@ -5,8 +5,9 @@
 
 .ds-main-navbar {
   background-color: $white;
-  .navbar-brand span {
-    display: none;
+  > nav {
+    padding-top: .1875rem;
+    padding-bottom: .1875rem;
   }
   .ds-show-help {
     &.hide {
@@ -19,25 +20,4 @@
       display: initial;
     }
   }
-  .ds-color-primary-level,
-  .ds-color-primary-level:hover,
-  .ds-color-primary-level:active,
-  .ds-color-primary-level:focus {
-    border: none;
-    padding-left: .09375rem;
-    padding-right: .09375rem;
-  }
-}
-
-// ≥992px
-@include media-breakpoint-up(lg) {
-  .ds-main-navbar {
-    .navbar-brand span {
-      display: initial;
-    }
-  }
-  .ds-color-primary-level {
-    padding-left: .375rem;
-    padding-right: .375rem;
-  }
 }
\ No newline at end of file
diff --git a/liberaforms/static/sass/common/_header.scss b/liberaforms/static/sass/common/_header.scss
index bd4cda20..60876e49 100644
--- a/liberaforms/static/sass/common/_header.scss
+++ b/liberaforms/static/sass/common/_header.scss
@@ -13,7 +13,14 @@
 //   }
 // }
 
+.navbar-brand {
+  --lf-navbar-brand-font-size: .875rem;
+}
+
 .ds-main-navbar {
+  .navbar-brand span {
+    display: none;
+  }
   .dropdown-item,
   .dropdown-toggle {
     font-size: $font-size-sm;
@@ -27,6 +34,15 @@
   .ds-name {
     display: none;
   }
+  .ds-color-primary-level,
+  .ds-color-primary-level:hover,
+  .ds-color-primary-level:active,
+  .ds-color-primary-level:focus {
+    border: none;
+    padding-left: .09375rem;
+    padding-right: .09375rem;
+    text-decoration: none;
+  }
 }
 
 // Avatar
@@ -38,8 +54,12 @@
   }
 }
 
+// ≥992px
 @include media-breakpoint-up(lg) {
   .ds-main-navbar {
+    .navbar-brand span {
+      display: initial;
+    }
     .dropdown-toggle {
       &:after {
         display: inline-block;
@@ -48,5 +68,12 @@
     .ds-name {
       display: initial;
     }
+    .ds-color-primary-level,
+    .ds-color-primary-level:hover,
+    .ds-color-primary-level:active,
+    .ds-color-primary-level:focus {
+      padding-left: .375rem;
+      padding-right: .375rem;
+    }
   }
 }
\ No newline at end of file
diff --git a/liberaforms/static/sass/landing/_classes.scss b/liberaforms/static/sass/landing/_classes.scss
index 405bd9d9..efc02d86 100644
--- a/liberaforms/static/sass/landing/_classes.scss
+++ b/liberaforms/static/sass/landing/_classes.scss
@@ -3,6 +3,11 @@
  *
  */
 
+// Margin top always main wrapper
+.ds-main-wrapper {
+  margin-top: calc($spacer * 5);
+}
+
 .ds-error-center {
   display: grid;
   min-height: 70vh;
@@ -19,4 +24,9 @@
     margin-bottom: calc($spacer * 2);
     margin-top: $spacer;
   }
-}
\ No newline at end of file
+}
+
+// ≥992px
+// @include media-breakpoint-up(lg) {
+
+// }
\ No newline at end of file
diff --git a/liberaforms/static/sass/landing/_header.scss b/liberaforms/static/sass/landing/_header.scss
new file mode 100644
index 00000000..0f59634b
--- /dev/null
+++ b/liberaforms/static/sass/landing/_header.scss
@@ -0,0 +1,14 @@
+/*
+ * Header
+ *
+ */
+
+.ds-main-navbar {
+  .navbar {
+    --lf-navbar-padding-y: 0.375rem;
+    --lf-navbar-brand-padding-y: 0;
+  }
+  .ds-link-to-panel {
+    font-size: $font-size-sm;
+  }
+}
diff --git a/liberaforms/static/sass/main-landing.scss b/liberaforms/static/sass/main-landing.scss
index 22c3f9e0..e863b231 100644
--- a/liberaforms/static/sass/main-landing.scss
+++ b/liberaforms/static/sass/main-landing.scss
@@ -62,4 +62,5 @@
 @import 'common/messages';
 @import 'common/header';
 
-@import 'landing/classes';
\ No newline at end of file
+@import 'landing/classes';
+@import 'landing/header';
\ No newline at end of file
diff --git a/liberaforms/templates/base-landing.html b/liberaforms/templates/base-landing.html
index fb632291..f425935c 100644
--- a/liberaforms/templates/base-landing.html
+++ b/liberaforms/templates/base-landing.html
@@ -33,7 +33,10 @@
 
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main-landing.css') }}">
   <style type="text/css">
-    .navbar-brand, .navbar-brand:hover, #mainNavbar a {
+    .ds-color-primary-level,
+    .ds-color-primary-level:hover,
+    .ds-color-primary-level:active,
+    .ds-color-primary-level:focus {
       color: {{ g.site.theme['navbar']['font_color'] }};
     }
   </style>
@@ -42,44 +45,40 @@
 <body style="background-color: var(--lf-gray-100)">
 
   {% if navbar != False %}
-  <header class="ds-main-navbar" style="background-color: {{ g.site.theme['primary_color'] }}">
+  <header class="fixed-top px-2 px-xl-4 py-1 ds-main-navbar" style="background-color: {{ g.site.theme['primary_color'] }}">
     <nav class="navbar navbar-expand-lg">
-      <div class="container-fluid">
-
-        <a class="navbar-brand" href="/" aria-label="{{ _('Go to home page') }}">
-          <img src="/favicon.ico" height="24" class="d-inline-block align-middle" />
-          <span>{{g.site.name}}</span>
-        </a>
-        <button class="d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
-          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--lf-gray-900)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" aria-hidden="true"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-        </button>
-        <div class="collapse navbar-collapse justify-content-end pt-3 pt-lg-0" id="mainNavbar">
-          <div class="navbar-nav gap-2">
-            {% if current_user.is_authenticated %}
-            <!-- Go back to backend -->
-              <a href="{{url_for('form_bp.my_forms')}}" class="nav-link">
-                {{ current_user.username }} {{ _("Panel") }}<i data-feather="arrow-right" aria-hidden="true" height="16"></i>
-              </a>
-            {% else %}
-            {% if not g.site.invitation_only %}
-              <a href="{{url_for('user_bp.create_new_user')}}" class="nav-link btn btn-light">
-                {{ _("Create an account") }}
-              </a>
-            {% endif %}
-              <a href="{{url_for('user_bp.login')}}" class="nav-link btn btn-light">
-                {# i18n: Button to log in #}
-                {{ _("Login") }}
-              </a>
-            {% endif %}
-          </div>
+      <a class="navbar-brand ds-color-primary-level" href="/" aria-label="{{ _('Go to home page') }}">
+        <img src="/favicon.ico" height="38"/>
+        <span>{{g.site.name}}</span>
+      </a>
+      <button class="d-lg-none ds-color-primary-level" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--lf-gray-900)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" aria-hidden="true"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+      </button>
+      <div class="collapse navbar-collapse justify-content-end pt-3 pt-lg-0" id="mainNavbar">
+        <div class="navbar-nav gap-2">
+          {% if current_user.is_authenticated %}
+          <!-- Go back to backend -->
+            <a href="{{url_for('form_bp.my_forms')}}" class="ds-color-primary-level ds-link-to-panel">
+              {{ current_user.username }} {{ _("Panel") }}<i data-feather="arrow-right" aria-hidden="true" height="16"></i>
+            </a>
+          {% else %}
+          {% if not g.site.invitation_only %}
+            <a href="{{url_for('user_bp.create_new_user')}}" class="ds-color-primary-level">
+              {{ _("Create an account") }}
+            </a>
+          {% endif %}
+            <a href="{{url_for('user_bp.login')}}" class="ds-color-primary-level">
+              {# i18n: Button to log in #}
+              {{ _("Login") }}
+            </a>
+          {% endif %}
         </div>
-
       </div>
     </nav>
   </header>
   {% endif %}
 
-  <div class="container-fluid pt-3 pb-3 pt-xl-5 pb-xl-5">
+  <div class="container-fluid ds-main-wrapper">
     <main id="main-content">
       {% block content %}{% endblock %}
     </main>