From 695388e96285d76084733e1d4f4a2f52bcbaab5f Mon Sep 17 00:00:00 2001
From: realaravinth <realaravinth@batsense.net>
Date: Fri, 1 Jul 2022 11:37:19 +0530
Subject: [PATCH] feat: add login/join links and make main action button point
 to dashboard

---
 sass/home/vision.scss                      |  1 +
 sass/nav/main.scss                         | 36 ++++++++++++++++++++--
 sass/nav/mobile.scss                       | 28 ++++++++++++++---
 templates/home/components/_banner-new.html |  2 +-
 templates/macros.html                      |  7 +++++
 templates/nav.html                         | 22 ++++++-------
 6 files changed, 77 insertions(+), 19 deletions(-)

diff --git a/sass/home/vision.scss b/sass/home/vision.scss
index 18720b2..91e1140 100644
--- a/sass/home/vision.scss
+++ b/sass/home/vision.scss
@@ -4,6 +4,7 @@
 	display: flex;
 	align-items: center;
 	height: 200px;
+	justify-content: space-between;
 }
 
 .home__vision-text-line {
diff --git a/sass/nav/main.scss b/sass/nav/main.scss
index 9e157ae..7151492 100644
--- a/sass/nav/main.scss
+++ b/sass/nav/main.scss
@@ -28,8 +28,13 @@ header {
 	display: none;
 }
 
+.nav__spacer--small {
+	width: 100px;
+	margin: auto;
+}
+
 .nav__spacer {
-	flex: 3;
+	flex: 4;
 	margin: auto;
 }
 
@@ -53,7 +58,8 @@ header {
 	width: 40px;
 }
 
-.nav__link-group {
+@mixin nav__link-group {
+	flex: 1.5;
 	list-style: none;
 	display: flex;
 	flex-direction: row;
@@ -63,13 +69,37 @@ header {
 	text-align: center;
 }
 
-.nav__link-container {
+.nav__link-group {
+	@include nav__link-group;
+
+}
+
+.nav__link-group--small {
+	@include nav__link-group;
+	flex: 0.5;
+	margin-right: 10px;
+}
+
+@mixin nav__link-container {
 	display: flex;
 	padding: 10px;
 	height: 100%;
 	margin: auto;
 }
 
+.nav__link-container {
+	@include nav__link-container;
+}
+
+.nav__link-container--action {
+	@include nav__link-container;
+	background-color: green;
+	padding: 15px;
+	.nav__link {
+		color: white !important;
+	}
+}
+
 .nav__link {
 	text-decoration: none;
 	color: black !important;
diff --git a/sass/nav/mobile.scss b/sass/nav/mobile.scss
index 8e1302d..2f9040c 100644
--- a/sass/nav/mobile.scss
+++ b/sass/nav/mobile.scss
@@ -14,7 +14,8 @@ $nav__hamburger-inner-height: 1.3px;
 	justify-content: space-between;
 }
 
-.nav__link-group {
+.nav__link-group,
+.nav__link-group--small {
 	position: sticky;
 	flex-direction: column;
 	margin: auto;
@@ -23,11 +24,26 @@ $nav__hamburger-inner-height: 1.3px;
 	//  background-color: $light-blue;
 }
 
-.nav__link-container {
+.nav__link-container--action {
+	background-color: #fff;
+	.nav__link {
+		color: #000 !important;
+	}
+}
+
+@mixin nav__link-container {
 	border-bottom: 1px dashed rgba(55, 55, 55, 0.4);
 	width: 70%;
 }
 
+.nav__link-container {
+	@include nav__link-container;
+}
+
+.nav__link-container--action {
+	@include nav__link-container;
+}
+
 .nav__link-container:last-child {
 	border-bottom: none;
 }
@@ -46,13 +62,17 @@ $nav__hamburger-inner-height: 1.3px;
 	display: none;
 }
 
-.nav__toggle:not(:checked) ~ .nav__link-group {
+.nav__link-group {
+	margin-right: auto;
+}
+
+.nav__toggle:not(:checked) ~ .nav__link-group, .nav__link-group--small {
 	max-height: 0;
 	transition: max-height $hamburger-menu-animation;
 	overflow: hidden;
 }
 
-.nav__toggle:checked ~ .nav__link-group {
+.nav__toggle:checked ~ .nav__link-group, .nav__toggle:checked ~ .nav__link-group--small {
 	max-height: 500px;
 	transition: max-height $hamburger-menu-animation;
 }
diff --git a/templates/home/components/_banner-new.html b/templates/home/components/_banner-new.html
index a9c051b..ad88e5f 100644
--- a/templates/home/components/_banner-new.html
+++ b/templates/home/components/_banner-new.html
@@ -17,7 +17,7 @@
         <li class="index-banner__features">Run Hostea and become a service provider!</li>
       </ul>
       <button class="index-banner__main-action-btn">
-        <a href="/service-wip" class="index-banner__main-action-link"
+        <a href="https://dash.hostea.org" class="index-banner__main-action-link"
           >Get Started</a
         >
       </button>
diff --git a/templates/macros.html b/templates/macros.html
index ce35da9..a929d6d 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -169,6 +169,13 @@
   </div>
 {% endmacro nav_link %}
 
+{% macro nav_link_action(link, name) %}
+  <div class="nav__link-container--action">
+    <a class="nav__link" rel="noreferrer" href="{{ link }}">{{ name }}</a>
+  </div>
+{% endmacro nav_link %}
+
+
 {% macro get_author(nick) %}
   {% for author in config.extra.authors %}
       {% if author.nick ==  nick %}
diff --git a/templates/nav.html b/templates/nav.html
index eb512a7..a057cb2 100644
--- a/templates/nav.html
+++ b/templates/nav.html
@@ -16,17 +16,17 @@
       <span class="nav__hamburger-inner"></span>
     </label>
   </div>
-
-  <div class="nav__spacer"></div>
-
+  <div class="nav__spacer--small"></div>
   <div class="nav__link-group">
-
-
-  {{ macros::nav_link(link="/about/", name="About") }}
-  {{ macros::nav_link(link="/blog/", name="Blog") }}
-  {{ macros::nav_link(link="/contact/", name="Contact") }}
-  {{ macros::nav_link(link="/gitea-clinic/", name="Gitea Clinic") }}
-  {{ macros::nav_link(link="/talks/", name="Talks") }}
-
+    {{ macros::nav_link(link="/about/", name="About") }}
+    {{ macros::nav_link(link="/blog/", name="Blog") }}
+    {{ macros::nav_link(link="/contact/", name="Contact") }}
+    {{ macros::nav_link(link="/gitea-clinic/", name="Gitea Clinic") }}
+    {{ macros::nav_link(link="/talks/", name="Talks") }}
+  </div>
+  <div class="nav__spacer"></div>
+  <div class="nav__link-group--small">
+    {{ macros::nav_link(link="https://dash.hostea.org/login/", name="Login") }}
+    {{ macros::nav_link_action(link="https://dash.hostea.org/register/", name="Join") }}
   </div>
 </nav>