Merge pull request 'feat: add login/join links and make main action button point to dashboard' (#36) from realaravinth/hostea-website:master into master

Reviewed-on: https://gitea.hostea.org/Hostea/website/pulls/36

sass/home/vision.scss

@@ -4,6 +4,7 @@
 	display: flex;
 	align-items: center;
 	height: 200px;
+	justify-content: space-between;
 }
 
 .home__vision-text-line {

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;

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;
 }

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>

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 %}

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>