Add more button styling and adjust positions for small screens

resources/scss/_vars.scss

@@ -57,6 +57,9 @@ $theme-colors: (
 	color: white;
 	background-color: #045de9;
 	background-image: linear-gradient(315deg, map.get($theme-colors, $start) 0%, map.get($theme-colors, $end) 74%);
+	&:hover {
+		background-image: linear-gradient(315deg, darkenColor($start) 0%, darkenColor($end) 74%);
+	}
 }
 
 @mixin transparent-button {
@@ -73,6 +76,20 @@ $theme-colors: (
 	}
 }
 
+@mixin brand-button($col) {
+	width: 10em;
+	height: 2.5em;;
+	background-color: white;
+	border: 2px solid map.get($theme-colors, $col);
+	color: map.get($theme-colors, $col);
+	border-radius: 4px;
+	font-size: 16px;
+	&:hover {
+		background-color: map.get($theme-colors, $col);
+		color: white;
+	}
+}
+
 @mixin hovering {
 	padding: 18px 9px;
 	border-radius: 4px;

resources/scss/main.scss

@@ -75,7 +75,8 @@ nav {
 }
 
 nav h1 {
-	margin: 4px 10px 0;
+	margin: 4px 0 10px 6px;
+	display: inline-block;
 }
 
 .formal-font {
@@ -103,36 +104,6 @@ nav form input,label {
 	opacity: 0.7;
 }
 
-@media (max-width: 720px) {
-	nav { display: block; }
-
-	nav form {
-		display: block;
-		width: 190px;
-		margin-left: auto;
-		margin-right: auto;
-		align-items: center;
-	}
-	nav form div {
-		margin: 10px auto;
-	}
-	nav div label,input {
-		display: block;
-	}
-
-	.landing-hero div.hero-filter h2 {
-		top: 30%;
-	}
-
-	.landing-hero div.hero-filter p {
-		top: 45%;
-	}
-
-	.landing-hero div.hero-filter .register-btn {
-		top: 75%;
-	}
-}
-
 div.landing-hero {
 	top: 0;
 	height: 50em;
@@ -277,8 +248,12 @@ section.services-cards img {
 	height: 50px;
 }
 
+section.services-cards button {
+	@include vars.brand-button("orange");
+}
+
 section.features-info {
-	height: 55em;
+	height: 60em;
 	background: radial-gradient(ellipse at left, #fff, vars.getColor("light-grey") 80%);
 }
 
@@ -418,16 +393,22 @@ section.faq-info .collapsibles {
 	// font-weight: bold;
 }
 
+.collapsible button:after {
+	content: '\02795'; /* Unicode character for "plus" sign (+) */
+	font-size: 13px;
+	color: white;
+	float: right;
+	margin-left: 5px;
+}
+
+
 .collapsible .content {
 	// background-color: vars.getColor("faded-text2");
 	border: 2px solid black;
 	border-radius: 4px;
-	transition: all 0.2s;
-	height: 1px;
-}
-
-.active.collapsible .content {
-	height: fit-content;
+	padding: 4px;
+	// transition: all 0.2s;
+	// height: 1px;
 }
 
 footer {
@@ -450,3 +431,34 @@ footer a {
 		color: vars.getColor("faded-text");
 	}
 }
+
+@media (max-width: 720px) {
+	nav { display: block; }
+
+	nav form {
+		display: block;
+		width: 190px;
+		margin-left: auto;
+		margin-right: auto;
+		align-items: center;
+	}
+	nav form div {
+		margin: 10px auto;
+	}
+	nav div label,input {
+		display: block;
+	}
+
+	.landing-hero div.hero-filter h2 {
+		top: 30%;
+	}
+
+	.landing-hero div.hero-filter p {
+		top: 45%;
+	}
+
+	.landing-hero div.hero-filter .register-btn {
+		top: 75%;
+	}
+}
+

resources/views/home.blade.php

@@ -39,6 +39,7 @@
 		quam</li>
 		<li>Elit repellat consequuntur.</li>
 	</ul>
+	<button>Select</button>
 	</div>
 	<div class="card">
 	<img src="/images/spotify.svg" alt="spotify-icon">
@@ -49,6 +50,7 @@
 		<li>Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti quam</li>
 		<li>Elit repellat consequuntur.</li>
 	</ul>
+	<button>Select</button>
 	</div>
 	<div class="card">
 	<img src="/images/twitter.svg" alt="twitter-icon">
@@ -59,6 +61,7 @@
 		<li>Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti quam</li>
 		<li>Elit repellat consequuntur.</li>
 	</ul>
+	<button>Select</button>
 	</div>
 		
 		</div></div>

resources/views/master.blade.php

@@ -5,7 +5,7 @@
 	<meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	<link rel="stylesheet" href="">
-	<link rel="stylesheet" href="">
+	<link rel="shortcut icon" type="image/jpg" href="/images/arrow-up.svg"/>
 @show
 	<title>Trendplays - @yield('title')</title>
 </head>
@@ -14,6 +14,7 @@
 	<nav class='navigator' role="navigation">
 		<a id='logo' href='/'>
 			<h1>Trendplays</h1>
+			<img src="/images/arrow-up.svg" height="30px" alt="">
 		</a>
 		@guest
 		<form class= 'login' method='POST'>