Merge #23: fix issues in v2

4f56e02 fix issues in v2 (Graeme Byrne) Pull request description: Work done on the following issues: * [Original design does not include link to share blog posts #7](#7) * [Remove console logs after debugging #9](#9) * [Top header with menu height is not the same as in FIgma #11](#11) * [Minor bugs in homepage #12](#12) * [Minor bugs in Index page #13](#13) * [Minor bugs in Tracker page #15](#15) * [Minor bugs in Self-host page #16](#16) * [Bugs in Blog page #17](#17) * [Bugs in About page #18](#18) * [Missing elected effect in top menu #19](#19) * [The main baneer brackground image is too big #20](#20) ACKs for top commit: josecelano: ACK 4f56e02 Tree-SHA512: 3bf086d0435c892d08dfc3f092b3477c9b2fc83adb267e8cacaa35eb31e7f522820ffa877b2895ed4fe383f370438ab632783405407c15dd0e9c35142c20a7bf
torrust · Sep 23, 2024 · 2ab71a6 · 2ab71a6
2 parents ad13a78 + 4f56e02
commit 2ab71a6
Show file tree

Hide file tree

Showing 22 changed files with 158 additions and 141 deletions.
diff --git a/src/lib/components/atoms/Banner.svelte b/src/lib/components/atoms/Banner.svelte
@@ -14,7 +14,7 @@
 <style lang="scss">
 	.svg-container {
 		height: 480px;
-		background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width='768' height='480' viewBox='0 0 768 480' fill='rgb(254, 74, 30)'><path d='M1005.2 123.646C1027.43 11.7464 953.881 -97.3506 843.527 -126.92L138.041 -315.954C40.5775 -342.07 -63.6767 -288.152 -91.5498 -191.16C-119.946 -92.2144 -61.7805 10.2473 37.2454 36.7812L306.002 108.794L55.7571 263.014C-106.71 363.089 -70.6249 608.894 113.559 658.246C170.006 673.371 230.427 665.068 280.715 635.209L900.796 267.959C954.822 237.428 993.036 184.656 1005.25 123.451L1005.2 123.646Z' fill='rgb(254, 74, 30)' fill-opacity='1'/></svg>");
+		background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width='900' height='10' viewBox='0 0 768 480' fill='rgb(254, 74, 30)'><path d='M1005.2 123.646C1027.43 11.7464 953.881 -97.3506 843.527 -126.92L138.041 -315.954C40.5775 -342.07 -63.6767 -288.152 -91.5498 -191.16C-119.946 -92.2144 -61.7805 10.2473 37.2454 36.7812L306.002 108.794L55.7571 263.014C-106.71 363.089 -70.6249 608.894 113.559 658.246C170.006 673.371 230.427 665.068 280.715 635.209L900.796 267.959C954.822 237.428 993.036 184.656 1005.25 123.451L1005.2 123.646Z' fill='rgb(254, 74, 30)' fill-opacity='1'/></svg>");
 		background-size: cover;
 		background-repeat: no-repeat;
 		background-position: center;

diff --git a/src/lib/components/atoms/Cards.svelte b/src/lib/components/atoms/Cards.svelte
@@ -89,16 +89,12 @@
 		padding: 1.5rem;
 		background: rgba(0, 0, 0, 0.5);
 		color: #fff;
+		width: 100%;
 		height: 100%;
 		z-index: 1;
 
 		&:hover {
 			background: rgba(0, 0, 0, 0.1);
 		}
 	}
-
-	.content {
-		padding: 1rem;
-		background: rgba(0, 0, 0, 0.5);
-	}
 </style>
diff --git a/src/lib/components/atoms/Slider.svelte b/src/lib/components/atoms/Slider.svelte
@@ -19,7 +19,6 @@
 		gap: 1rem;
 		scroll-behavior: smooth;
 		padding-bottom: 1rem;
-		padding-inline: 1.5rem;
 
 		div {
 			flex: 0 0 300px;

diff --git a/src/lib/components/atoms/Tag.svelte b/src/lib/components/atoms/Tag.svelte
@@ -37,21 +37,12 @@
 		align-items: center;
 		justify-content: center;
 		gap: 5px;
-		padding: 5px 15px;
+		padding-right: 15px;
 		border-radius: 10px;
 		font-weight: 500;
 		font-size: 0.85rem;
 		width: fit-content;
 		white-space: nowrap;
-
-		&.primary {
-			background-color: rgba(245, 245, 245, 0.96);
-			color: rgba(255, 49, 0, 0.96);
-		}
-		&.secondary {
-			background-color: var(--color--secondary-tint);
-			color: var(--color--secondary);
-		}
 	}
 
 	.icon {
@@ -61,10 +52,11 @@
 		height: 20px;
 	}
 
-	a.tag {
+	a {
 		text-decoration-thickness: 1px;
-		&:not(:hover) {
-			text-decoration-color: transparent;
+		color: white;
+		&:hover {
+			color: rgba(255, 49, 0, 1);
 		}
 	}
 </style>
diff --git a/src/lib/components/molecules/BlogPostCard.svelte b/src/lib/components/molecules/BlogPostCard.svelte
@@ -27,3 +27,14 @@
 		{/if}
 	</div>
 </Cards>
+
+<style lang="scss">
+	.title {
+		font-size: 1.5rem;
+	}
+
+	.date {
+		padding-top: 0.5rem;
+		font-size: 14px;
+	}
+</style>
diff --git a/src/lib/components/molecules/PostBody.svelte b/src/lib/components/molecules/PostBody.svelte
@@ -7,6 +7,6 @@
 
 	div {
 		grid-area: 1 / 3 / 6 / 7;
-		margin-inline: 2rem;
+		margin-inline: 1rem;
 	}
 </style>
diff --git a/src/lib/components/molecules/PostContainer.svelte b/src/lib/components/molecules/PostContainer.svelte
@@ -15,12 +15,11 @@
 		grid-template-rows: repeat(5, 1fr);
 		grid-column-gap: 10px;
 		grid-row-gap: 0px;
-		padding-top: 4rem;
+		padding-top: 64px;
 	}
 
 	.flex {
 		display: flex;
 		flex-direction: column;
-		padding-top: 4rem;
 	}
 </style>
diff --git a/src/lib/components/molecules/PostTable.svelte b/src/lib/components/molecules/PostTable.svelte
@@ -40,6 +40,5 @@
 	div {
 		grid-area: 1 / 1 / 6 / 3;
 		background-color: transparent;
-		padding: 10px;
 	}
 </style>
diff --git a/src/lib/components/organisms/Header.svelte b/src/lib/components/organisms/Header.svelte
@@ -20,38 +20,38 @@
 		<div class="links-wrapper">
 			<ul class="links">
 				<li>
-					<a href="/index" class={currentPath === '/v2/index' ? 'active' : ''} on:click={toggleMenu}
+					<a href="/index" class={currentPath === '/index' ? 'active' : ''} on:click={toggleMenu}
 						>Index</a
 					>
 				</li>
 				<li>
 					<a
 						href="/tracker"
-						class={currentPath === '/v2/tracker' ? 'active' : ''}
+						class={currentPath === '/tracker' ? 'active' : ''}
 						on:click={toggleMenu}>Tracker</a
 					>
 				</li>
 				<li>
 					<a
 						href="/self-host"
-						class={currentPath === '/v2/self-host' ? 'active' : ''}
+						class={currentPath === '/self-host' ? 'active' : ''}
 						on:click={toggleMenu}>Self&#8209;host</a
 					>
 				</li>
 				<li>
 					<a
 						href="/community"
-						class={currentPath === '/v2/community' ? 'active' : ''}
+						class={currentPath === '/community' ? 'active' : ''}
 						on:click={toggleMenu}>Community</a
 					>
 				</li>
 				<li>
-					<a href="/blog" class={currentPath === '/v2/blog' ? 'active' : ''} on:click={toggleMenu}
+					<a href="/blog" class={currentPath === '/blog' ? 'active' : ''} on:click={toggleMenu}
 						>Blog</a
 					>
 				</li>
 				<li>
-					<a href="/about" class={currentPath === '/v2/about' ? 'active' : ''} on:click={toggleMenu}
+					<a href="/about" class={currentPath === '/about' ? 'active' : ''} on:click={toggleMenu}
 						>About</a
 					>
 				</li>
@@ -65,13 +65,17 @@
 
 	header {
 		position: relative;
-		padding: 1rem;
 		z-index: 1000;
 		background-color: rgba(255, 49, 0, 1);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		position: relative;
+		padding-inline: 1.5rem;
+
+		@include for-phone-only {
+			height: 64px;
+		}
 
 		ul {
 			display: flex;
@@ -90,13 +94,24 @@
 			display: inline-block;
 			transition: all 200ms ease-in-out;
 			color: rgba(245, 245, 245, 0.8);
+			font-size: 1rem;
 		}
 
 		.active {
-			border-bottom: 2px solid white;
+			position: relative;
 			color: white;
 		}
 
+		.active::after {
+			content: '';
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: -16px;
+			height: 4px;
+			background-color: white;
+		}
+
 		@include for-phone-only {
 			.links-wrapper {
 				padding: 3rem;
@@ -108,6 +123,11 @@
 				flex-direction: column;
 				gap: 2vw;
 			}
+
+			.active::after {
+				bottom: -2px;
+				height: 1px;
+			}
 		}
 
 		.links-wrapper {
@@ -127,9 +147,5 @@
 				}
 			}
 		}
-
-		@include for-desktop-up {
-			padding-inline: 9rem;
-		}
 	}
 </style>
diff --git a/src/lib/components/singletons/RecentPosts.svelte b/src/lib/components/singletons/RecentPosts.svelte
@@ -42,7 +42,7 @@
 		}
 
 		@include for-desktop-up {
-			grid-template-columns: 1fr 1fr;
+			grid-template-columns: 1fr 1fr 1fr;
 		}
 	}
 </style>
diff --git a/src/lib/components/singletons/SearchBar.svelte b/src/lib/components/singletons/SearchBar.svelte
@@ -50,39 +50,26 @@
 </script>
 
 <div class="search-bar-container">
-	<button class="icon-wrapper" on:click={() => (showInput = true)} class:show-input={showInput}>
-		{#if !showInput}
-			<Icon
-				icon="heroicons:magnifying-glass-16-solid"
-				width="28"
-				height="28"
-				style="color: rgba(255, 49, 0, 1);"
-			/>
-		{/if}
-	</button>
 	{#if showInput}
 		<div class="input-wrapper">
-			<Icon
-				icon="heroicons:magnifying-glass-16-solid"
-				width="28"
-				height="28"
-				style="color: #000000;"
-			/>
-			<input
-				type="text"
-				placeholder="Search"
-				bind:this={searchInput}
-				bind:value={searchTerm}
-				on:input={handleInput}
-			/>
-			{#if searchTerm}
-				<button class="clear-button" on:click={clearSearch}>
-					<Icon icon="material-symbols:close" width="24" height="24" style="color: #000000" />
-				</button>
-			{/if}
+			<div>
+				<input
+					type="text"
+					placeholder="Type to filter articles..."
+					bind:this={searchInput}
+					bind:value={searchTerm}
+					on:input={handleInput}
+				/>
+			</div>
+			<div>
+				<Icon
+					icon="heroicons:magnifying-glass-16-solid"
+					width="28"
+					height="28"
+					style="color: rgba(245, 245, 245, 0.08);"
+				/>
+			</div>
 		</div>
-	{:else}
-		<div class="input-placeholder"></div>
 	{/if}
 
 	{#if search === 'ready' && searchTerm}
@@ -128,42 +115,33 @@
 		display: flex;
 		align-items: center;
 		justify-content: flex-start;
-		background-color: white;
-	}
-
-	.icon-wrapper {
-		cursor: pointer;
-		padding: 0.5rem;
 		background-color: transparent;
-		border: none;
+		border: 1px solid rgba(245, 245, 245, 0.08);
+		border-radius: 1.5rem;
 	}
 
 	.input-wrapper {
 		display: flex;
-		align-items: center;
+		justify-content: space-between;
+		width: 360px;
 		border-radius: 5px;
 		padding: 0.5rem;
 		border: none;
+		color: white;
 		background-color: transparent;
 	}
 
 	.input-wrapper input {
 		border: none;
 		outline: none;
 		flex-grow: 1;
-		padding: 0.1rem;
 		font-size: 1rem;
 		background-color: transparent;
+		color: rgba(245, 245, 245, 0.96);
 	}
 
-	.clear-button {
-		border: none;
-		background-color: transparent;
-		cursor: pointer;
-	}
-
-	.input-placeholder {
-		height: 3.2rem;
+	.input-wrapper > * {
+		padding-inline: 1rem;
 	}
 
 	.dropdown {
@@ -197,7 +175,7 @@
 
 	.dropdown a {
 		text-decoration: none;
-		color: #ffffff;
+		color: rgba(245, 245, 245, 0.96);
 		display: block;
 		display: flex;
 		flex-direction: column;

diff --git a/src/lib/scss/_typography.scss b/src/lib/scss/_typography.scss
@@ -31,6 +31,8 @@ i {
 
 li {
 	list-style-type: none;
+	padding: 0;
+	margin: 0;
 }
 
 // #region Titles