Merge pull request #63 from directus/connorwinston/web-342-implement-…

…creative-review-changes

Implement Creative Review Changes

app/app.config.ts

@@ -7,8 +7,8 @@ export default defineAppConfig({
 				tokens: {
 					fonts: {
 						heading: '\'Poppins\', sans-serif',
-						body: '\'IBM Plex Sans\', sans-serif',
-						mono: '\'IBM Plex Mono\', monospace',
+						body: '\'Inter\', sans-serif',
+						mono: '\'Fire Mono\', monospace',
 					},
 				},
 			},

app/assets/css/_vars.scss

@@ -3,9 +3,9 @@
 
 :root {
 
-	--font--body: 'IBM Plex Sans', sans-serif;
+	--font--body: 'Inter', sans-serif;
 	--font--header: 'Poppins', sans-serif;
-	--font--code: 'IBM Plex Mono', monospace;
+	--font--code: 'Fira Mono', monospace;
 
 	--width-md: 768px;
 	--width-lg: 1024px;

app/assets/css/main.scss

@@ -102,7 +102,7 @@ pre {
 			background-size: var(--size);
 			width: var(--size);
 			height: var(--size);
-		}
+			vertical-align: sub;		}
 	}
 	img {
 		border-radius: var(--border-radius);

app/components/articles/ArticlesCard.vue

@@ -15,7 +15,17 @@ defineProps<{
 			{{ article.title }}
 		</p>
 
-		<div v-if="article.tags || article.category || article.description" class="card-footer-row">
+		<p
+			v-if="article.description"
+			class="card-description"
+		>
+			{{ article.description }}
+		</p>
+
+		<div
+			v-if="article.tags || article.category"
+			class="card-footer-row"
+		>
 			<div
 				v-if="article.tags"
 				class="card-tag-row"
@@ -35,12 +45,6 @@ defineProps<{
 			>
 				{{ article.category }}
 			</p>
-			<p
-				v-if="article.description"
-				class="card-description"
-			>
-				{{ article.description }}
-			</p>
 		</div>
 	</NuxtLink>
 </template>
@@ -50,7 +54,7 @@ defineProps<{
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
-	justify-content: space-between;
+	justify-content: start;
 	padding: 1rem;
 	border-radius: 0.5rem;
 	transition: background-color 0.2s ease-in-out;
@@ -74,7 +78,8 @@ defineProps<{
 		margin-top: 0.5rem;
 		display: flex;
 		justify-content: space-between;
-		align-items: center;
+		align-items: end;
+		flex-grow: 1;
 	}
 
 	.card-tag-row {

app/components/articles/ArticlesLayout.vue

@@ -8,7 +8,7 @@ defineProps<{
 </script>
 
 <template>
-	<div class="page">
+	<div class="page container">
 		<main
 			class="main-content"
 		>

app/components/aside/AsideFeedback.vue

@@ -71,6 +71,7 @@ const handleFeedback = (feedback: 'good' | 'bad') => {
 
 .feedback-button {
 	padding: 0.5rem !important;
+	color: var(--typography-subdued)
 }
 
 p {

app/components/aside/AsideNewsletter.vue

@@ -74,7 +74,7 @@ async function subscribe() {
 	h2 {
 		font-weight: 600;
 		font-size: 1rem;
-		margin: 4px 0 0;
+		margin: 0.5rem 0 0;
 		line-height: 1;
 	}
 	p {
@@ -89,7 +89,7 @@ async function subscribe() {
 		border-radius: 6px;
 		border: 1px solid rgba(213, 220, 229, 0.50);
 		background: rgba(213, 220, 229, 0.20);
-		margin-bottom: 4px;
+		margin-bottom: 0.5rem;
 		font-size: 0.9rem;
 		font-weight: 500;
 	}

app/components/content/Callout.vue

@@ -80,11 +80,11 @@ const detailsOpen = ref(false);
 	<!-- STATIC -->
 	<component
 		:is="componentType()"
-		v-else
+		v-else-if="section"
 		:href="url"
 		class="callout"
 		:class="type"
-		:style="section.color ? `borderColor: ${section.color}` : ''"
+		:style="section.color ? `--callout-color: ${section.color}` : ''"
 	>
 		<Icon
 			:name="section.icon"
@@ -148,10 +148,12 @@ const detailsOpen = ref(false);
 a.callout {
 	background: transparent;
 	grid-template-columns: 2em auto 2em;
-	border-style: dashed;
+	transition: border 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
 	&:hover {
 		border-style: solid;
 		cursor: pointer;
+		border: 1px solid var(--callout-color, var(--primary));
+		box-shadow: 0 0 0.5rem 0 color-mix(in srgb, var(--callout-color, var(--primary)) 15%, transparent);
 	}
 	.arrow {
 		margin-left: auto;
@@ -160,7 +162,7 @@ a.callout {
 }
 
 .icon.main {
-	margin-top: 4px;
+	margin-top: 7px;
 }
 
 details.callout {

app/components/content/DirectusCloud.vue

@@ -41,9 +41,6 @@ div {
 		margin-bottom: 0.25rem;
 		margin-top: 0.25rem;
 	}
-	.button {
-		margin-bottom: 1rem;
-	}
 }
 p {
 	font-size: 1rem;

app/components/content/EngineStudioBox.vue

@@ -114,9 +114,8 @@ const boxes = [
 		align-items: center;
 		justify-content: start;
 		flex-wrap: wrap;
-		gap: 1rem;
-		padding-top: 2rem;
-
+		gap: 0.5rem;
+		padding-top: 1rem;
 	}
 }
 </style>

app/components/content/Tabs.vue

@@ -92,9 +92,7 @@ const tabs = computed(() => {
 	display: flex;
 	align-items: center;
 	gap: 0.25rem;
-	&:not(:last-child) {
-		border-right: 1px solid var(--border-subdued);
-	}
+	border-right: 1px solid var(--border-subdued);
 }
 .TabsTrigger:hover {
 	color: var(--primary);

app/components/header/HeaderHero.vue

@@ -132,7 +132,6 @@ const switcherState = ref<'data' | 'auth' | 'realtime' | 'file'>('data');
 .hero {
 	background-image: url("/waves.svg");
 	background-size: cover;
-	border-bottom: 1px solid var(--border);
 }
 
 .dark {
@@ -224,5 +223,6 @@ h1 {
 	margin-bottom: 0.5rem;
 	white-space: nowrap;
 	overflow-x: auto;
+	scrollbar-width: none;
 }
 </style>

app/components/header/HeaderNav.vue

@@ -125,7 +125,7 @@ const navItems = computed(() => {
 }
 .desktop-nav {
 	background: var(--background-subdued);
-	box-shadow: inset 0 0 0 2px
+	box-shadow: inset 0 0 0 1px
 		color-mix(in srgb, var(--border) 50%, var(--border-subdued) 50%);
 	display: flex;
 
@@ -146,7 +146,7 @@ a {
 	display: inline-flex;
 	align-items: center;
 	gap: 0.25rem;
-	border-bottom: 2px solid transparent;
+	border-bottom: 1px solid transparent;
 	font-weight: 500;
 	&:hover,
 	&.active {

app/components/header/HeaderSlideover.vue

@@ -186,7 +186,7 @@ a {
 .slideover-nav {
 	padding-top: 1rem;
 	padding-bottom: 1rem;
-	border-bottom: 2px solid var(--border);
+	border-bottom: 1px solid var(--border);
 }
 
 ul {

app/components/search/SearchButton.client.vue

@@ -61,14 +61,14 @@ const inkeepWidget = Inkeep(config.properties.baseSettings).embed(config);
 <style scoped lang="scss">
 .dark-mode .search-box {
 	&:hover {
-		border: 2px solid var(--secondary);
+		border: 1px solid var(--secondary);
 		color: var(--secondary);
 		box-shadow: 0 0 0.5rem 0 color-mix(in srgb, var(--secondary) 15%, transparent);
 	}
 }
 
 .search-box {
-	border: 2px solid var(--border-subdued);
+	border: 1px solid var(--border-subdued);
 	border-radius: var(--border-radius);
 	width: 100%;
 	max-width: 250px;
@@ -82,7 +82,7 @@ const inkeepWidget = Inkeep(config.properties.baseSettings).embed(config);
 	background-color: var(--background);
 	&:hover {
 		cursor: pointer;
-		border: 2px solid var(--purple);
+		border: 1px solid var(--purple);
 		color: var(--purple);
 		box-shadow: 0 0 0.5rem 0 color-mix(in srgb, var(--primary) 15%, transparent);
 	}

app/pages/api/index.vue

@@ -69,14 +69,6 @@ import '@scalar/api-reference/style.css';
 	top: 0 !important;
 }
 
-.section.introduction-section {
-	padding-top: 48px !important;
-}
-
-.section.introduction-section .section-column:nth-of-type(2) {
-	padding-top: 48px !important;
-}
-
 .introduction-card {
 	display: none !important;
 }
@@ -100,7 +92,7 @@ import '@scalar/api-reference/style.css';
 	border-right: 0px !important;
 }
 
-.sidebar::after {
+/* .sidebar::after {
 	content: "" !important;
 	position: absolute !important;
 	right: 12px !important;
@@ -124,7 +116,7 @@ import '@scalar/api-reference/style.css';
 		--border
 	) !important;
 	z-index: 1 !important;
-}
+} */
 
 .sidebar-heading {
 	font-weight: 400 !important;
@@ -134,30 +126,23 @@ import '@scalar/api-reference/style.css';
 	font-weight: 500 !important;
 }
 
-.sidebar-heading.active_page::after {
+.sidebar-heading::after {
 	content: "" !important;
 	position: absolute !important;
 	right: -11px !important;
 	top: 0 !important;
 	height: 100% !important;
 	width: 2px !important;
 	background-color: var(
-		--purple
-	) !important;
+		--border
+	);
 	z-index: 50 !important;
 }
 
-.dark-mode .sidebar-heading.active_page::after {
-	content: "" !important;
-	position: absolute !important;
-	right: -11px !important;
-	top: 0 !important;
-	height: 100% !important;
-	width: 2px !important;
+.sidebar-heading.active_page::after {
 	background-color: var(
-		--pink
-	) !important;
-	z-index: 50 !important;
+		--primary
+	);
 }
 
 .light-mode {
@@ -197,11 +182,11 @@ import '@scalar/api-reference/style.css';
 	--scalar-color-1: var(--typography);
 	--scalar-color-2: var(--typography);
 	--scalar-color-3: var(--typography);
-	--scalar-color-accent: var(--secondary);
+	--scalar-color-accent: var(--primary);
 	--scalar-background-1: var(--background);
 	--scalar-background-2: var(--background-subdued);
 	--scalar-background-3: var(--background-subtle);
-	--scalar-background-accent: var(--secondary);
+	--scalar-background-accent: var(--primary);
 
 	--scalar-border-color: var(--border);
 	--scalar-scrollbar-color: rgba(255, 255, 255, 0.24);
@@ -213,15 +198,15 @@ import '@scalar/api-reference/style.css';
 	--scalar-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,
 	rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);
 
-	--scalar-button-1: var(--pink);
+	--scalar-button-1: var(--primary);
 	--scalar-button-1-color: #fff;
 	--scalar-button-1-hover: rgb(28 31 33);
 
 	--scalar-color-red: var(--red-3);
 	--scalar-color-orange: var(--red-3);
 	--scalar-color-green: var(--green-3);
 	--scalar-color-blue: var(--blue-3);
-	--scalar-color-purple: var(--pink);
+	--scalar-color-purple: var(--purple);
 }
 
 /* Sidebar */
@@ -247,7 +232,7 @@ import '@scalar/api-reference/style.css';
 	--scalar-sidebar-border-color: var(--scalar-border-color);
 	--scalar-sidebar-color-1: var(--scalar-color-1);
 	--scalar-sidebar-color-2: var(--scalar-color-1);
-	--scalar-sidebar-color-active: var(--pink);
+	--scalar-sidebar-color-active: var(--primary);
 	--scalar-sidebar-search-background: var(--scalar-background-3);
 	--scalar-sidebar-search-border-color: var(--scalar-sidebar-search-background);
 	--scalar-sidebar-search--color: var(--scalar-color-3);