Merge #1: add changes to v2

50ceb4b Delete CNAME (Jose Celano) 44eba55 Update CNAME (Jose Celano) 777f926 fix lint error (Graeme Byrne) 016232c fix run check error (Graeme Byrne) 56defe0 fix lint errors (Graeme Byrne) c37e9f0 add changes to v2 (Graeme Byrne) Pull request description: Changes made to bring Torrust website v2 in line with Figma file. See: https://github.com/torrust/torrust-website/pull/253 ACKs for top commit: josecelano: ACK 50ceb4b Tree-SHA512: f690d9037bbba72426a76800a7b85358f098c46db63189266b32978589e3252a2add46186ce0384b8a392377cd61c523ccc4c1002ce18f5ac2ab8df73ba24a58
torrust · Sep 19, 2024 · 143427e · 143427e
2 parents adb17b0 + 50ceb4b
commit 143427e
Show file tree

Hide file tree

Showing 25 changed files with 875 additions and 956 deletions.
diff --git a/CNAME b/CNAME
diff --git a/src/lib/v2/components/atoms/Cards.svelte b/src/lib/v2/components/atoms/Cards.svelte
@@ -50,7 +50,6 @@
 		overflow: hidden;
 		text-decoration: none;
 		color: inherit;
-		width: 100%;
 		transition: box-shadow 0.3s ease;
 
 		&:hover {
@@ -75,23 +74,18 @@
 		flex-direction: column;
 		justify-content: flex-end;
 		padding: 1.5rem;
-		background: rgba(
-			0,
-			0,
-			0,
-			0.8
-		); /* Optional: Add a semi-transparent background to ensure text readability */
-		color: #fff; /* Ensure text is readable over the background */
+		background: rgba(0, 0, 0, 0.5);
+		color: #fff;
 		height: 100%;
 		z-index: 1;
 
 		&:hover {
-			/* Optional hover effect for cards */
-			background: rgba(0, 0, 0, 0.5);
+			background: rgba(0, 0, 0, 0.1);
 		}
 	}
 
 	.content {
 		padding: 1rem;
+		background: rgba(0, 0, 0, 0.5);
 	}
 </style>
diff --git a/src/lib/v2/components/atoms/RelatedCard.svelte b/src/lib/v2/components/atoms/RelatedCard.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { HttpRegex } from '$lib/utils/regex';
+
+	export let additionalClass: string | undefined = undefined;
+
+	export let href: string | undefined = undefined;
+	const isExternalLink = !!href && HttpRegex.test(href);
+	export let target: '_self' | '_blank' = isExternalLink ? '_blank' : '_self';
+	export let rel = isExternalLink ? 'noopener noreferrer' : undefined;
+
+	$: tag = href ? 'a' : 'article';
+	$: linkProps = {
+		href,
+		target,
+		rel
+	};
+</script>
+
+<svelte:element
+	this={tag}
+	class="card {additionalClass}"
+	{...linkProps}
+	data-sveltekit-preload-data
+	{...$$restProps}
+>
+	<div class="body">
+		<div class="content">
+			<slot name="content" />
+		</div>
+		{#if $$slots.footer}
+			<div class="footer">
+				<slot name="footer" />
+			</div>
+		{/if}
+	</div>
+</svelte:element>
+
+<style lang="scss">
+	.card {
+		background: rgba(0, 0, 0, 0.5);
+		box-shadow: var(--card-shadow);
+		color: var(--color--text);
+		border-radius: 10px;
+		transition: all 0.4s ease;
+		position: relative;
+		overflow: hidden;
+		width: 100%;
+		color: rgba(245, 245, 245, 0.96);
+		border: 1px solid rgba(245, 245, 245, 0.08);
+
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+
+		text-decoration: none;
+
+		&[href],
+		&[onclick] {
+			cursor: pointer;
+			&:hover {
+				box-shadow: var(--card-shadow-hover);
+				transform: scale(1.01);
+			}
+		}
+	}
+
+	.body {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: 10px;
+		padding: 20px 20px;
+		flex: 1 0 50%;
+		color: rgba(245, 245, 245, 0.96);
+
+		.content {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			color: rgba(245, 245, 245, 0.96);
+		}
+	}
+</style>
diff --git a/src/lib/v2/components/atoms/TagCard.svelte b/src/lib/v2/components/atoms/TagCard.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { HttpRegex } from '$lib/utils/regex';
+
+	export let additionalClass: string | undefined = undefined;
+
+	export let href: string | undefined = undefined;
+	const isExternalLink = !!href && HttpRegex.test(href);
+	export let target: '_self' | '_blank' = isExternalLink ? '_blank' : '_self';
+	export let rel = isExternalLink ? 'noopener noreferrer' : undefined;
+
+	$: tag = href ? 'a' : 'article';
+	$: linkProps = {
+		href,
+		target,
+		rel
+	};
+</script>
+
+<svelte:element
+	this={tag}
+	class="card {additionalClass}"
+	{...linkProps}
+	data-sveltekit-preload-data
+	{...$$restProps}
+>
+	{#if $$slots.image}
+		<div class="image">
+			<slot name="image" />
+		</div>
+	{/if}
+	<div class="body">
+		<div class="content">
+			<slot name="content" />
+		</div>
+		{#if $$slots.footer}
+			<div class="footer">
+				<slot name="footer" />
+			</div>
+		{/if}
+	</div>
+</svelte:element>
+
+<style lang="scss">
+	.card {
+		background: var(--color--card-background);
+		box-shadow: var(--card-shadow);
+		color: var(--color--text);
+		border-radius: 10px;
+		transition: all 0.4s ease;
+		position: relative;
+		overflow: hidden;
+		width: 100%;
+
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+
+		text-decoration: none;
+
+		&[href],
+		&[onclick] {
+			cursor: pointer;
+			&:hover {
+				box-shadow: var(--card-shadow-hover);
+				transform: scale(1.01);
+			}
+		}
+	}
+
+	.body {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: 10px;
+		padding: 20px 20px;
+		flex: 1 0 50%;
+
+		.content {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+		}
+	}
+
+	.image {
+		position: relative;
+		flex: 1 0 max(50%, 330px);
+		// height: min(100%, 300px);
+		min-height: 280px;
+		max-height: 350px;
+	}
+
+	:global(.card [slot='image']) {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		position: absolute;
+	}
+</style>
diff --git a/src/lib/v2/components/molecules/PostBody copy.svelte b/src/lib/v2/components/molecules/PostBody copy.svelte
@@ -0,0 +1,10 @@
+<div>
+	<slot />
+</div>
+
+<style>
+	div {
+		grid-area: 1 / 3 / 6 / 7;
+		padding-inline: 2rem;
+	}
+</style>
diff --git a/src/lib/v2/components/molecules/PostBody.svelte b/src/lib/v2/components/molecules/PostBody.svelte
@@ -7,6 +7,6 @@
 
 	div {
 		grid-area: 1 / 3 / 6 / 7;
-		padding-inline: 1.5rem;
+		margin-inline: 2rem;
 	}
 </style>
diff --git a/src/lib/v2/components/molecules/RelatedPostCard.svelte b/src/lib/v2/components/molecules/RelatedPostCard.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import RelatedCard from '$lib/v2/components/atoms/RelatedCard.svelte';
+	import Tag from '$lib/components/atoms/Tag.svelte';
+	import { formatDate } from '$lib/utils/date';
+
+	export let title: string;
+	export let excerpt: string;
+	export let slug: string;
+	export let tags: string[] | undefined;
+	export let readingTime: string | undefined = undefined;
+	export let date: string;
+
+	const formattedDate = formatDate(date);
+</script>
+
+<RelatedCard href="/v2/{slug}" target="_self">
+	<div class="content" slot="content">
+		<p class="title">
+			{title}
+		</p>
+		{#if date}
+			<div class="date">Published on {formattedDate}</div>
+		{/if}
+		{#if readingTime}
+			<div class="note">{readingTime}</div>
+		{/if}
+		{#if excerpt}
+			<p class="text">
+				{excerpt}
+			</p>
+		{/if}
+	</div>
+	<div class="footer" slot="footer">
+		{#if tags?.length}
+			<div class="tags">
+				{#each tags.slice(0, 2) as tag}
+					<Tag {tag}><a href="/v2/tags/{tag}">{tag}</a></Tag>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</RelatedCard>
+
+<style lang="scss">
+	.content {
+		display: flex;
+		flex-direction: column;
+		gap: 0px;
+		align-items: flex-start;
+	}
+
+	.title {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		font-size: 1.2rem;
+		font-family: var(--font--title);
+		font-weight: 700;
+	}
+
+	.tags {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		flex-wrap: wrap;
+	}
+
+	.date,
+	.note {
+		font-size: 0.8rem;
+		color: rgba(var(--color--text-rgb), 0.8);
+	}
+
+	.date {
+		padding-top: 0.25rem;
+	}
+
+	.text {
+		margin-top: 5px;
+		font-size: 0.9rem;
+		text-align: justify;
+	}
+
+	.footer {
+		margin-top: 20px;
+	}
+
+	:global(.blog-post-card .image img) {
+		object-fit: cover;
+	}
+
+	:global(.blog-post-card.no-image > .image) {
+		display: none;
+	}
+</style>