Rough in the footer (#36)

* Rough in the footer * Only render banner client side * Add social icons, fix responsiveness * Remove homepage in favor of page builder * Add social logos * Add dynamic asset util * Make assets white * Tweak mobile side paddings * Finalize footer spacing * Fix type issue? * Support homepage
directus · Jul 26, 2023 · 56c139e · 56c139e
1 parent 06fd872
commit 56c139e
Show file tree

Hide file tree

Showing 19 changed files with 318 additions and 27 deletions.
diff --git a/assets/css/global.css b/assets/css/global.css
@@ -37,3 +37,7 @@ h5,
 h6 {
 	overflow-wrap: break-word;
 }
+
+a {
+	color: var(--primary);
+}
diff --git a/assets/css/vars.css b/assets/css/vars.css
@@ -21,13 +21,12 @@
 	--gray-100: #f4f5f7;
 	--gray-200: #e5e7eb;
 	--gray-300: #d2d6dc;
-	--gray-400: #9fa6b2;
+	--gray-400: #a2b5cd;
 	--gray-500: #6b7280;
 	--gray-600: #4b5563;
-	--gray-700: #374151;
-	--gray-800: #252f3f;
+	--gray-700: #2e3848;
+	--gray-800: #0e1c2f;
 	--gray-900: #161e2e;
-
 	--purple-50: #ede5ff;
 	--purple-100: #d0c0fd;
 	--purple-200: #af95fd;

diff --git a/assets/svg/logo-light.svg b/assets/svg/logo-light.svg
diff --git a/assets/svg/social/discord.svg b/assets/svg/social/discord.svg
diff --git a/assets/svg/social/docker.svg b/assets/svg/social/docker.svg
diff --git a/assets/svg/social/github.svg b/assets/svg/social/github.svg
diff --git a/assets/svg/social/linkedin.svg b/assets/svg/social/linkedin.svg
diff --git a/assets/svg/social/npm.svg b/assets/svg/social/npm.svg
diff --git a/assets/svg/social/twitter.svg b/assets/svg/social/twitter.svg
diff --git a/assets/svg/social/youtube.svg b/assets/svg/social/youtube.svg
diff --git a/components/Base/Container.vue b/components/Base/Container.vue
@@ -18,16 +18,16 @@ withDefaults(defineProps<BaseContainerProps>(), {
 .container {
 	display: grid;
 	grid-template-columns:
-		[full-start] minmax(var(--space-2), 1fr)
+		[full-start] minmax(var(--space-5), 1fr)
 		[standard-start] 0
 		[narrow-start] minmax(var(--space-4), 67.5rem)
 		[narrow-end] 0
-		[standard-end] minmax(var(--space-2), 1fr)
+		[standard-end] minmax(var(--space-5), 1fr)
 		[full-end];
 	position: relative;
 	padding-inline: 0;
 
-	@media (min-width: 50rem) {
+	@media (width > 50rem) {
 		grid-template-columns:
 			[full-start] minmax(var(--space-8), 1fr)
 			[standard-start] var(--space-16)

diff --git a/components/Base/Divider.vue b/components/Base/Divider.vue
@@ -4,7 +4,9 @@
 
 <style scoped>
 .base-divider {
+	--base-divider-color: var(--gray-300);
+
 	width: 100%;
-	border-top: 1px solid var(--gray-300);
+	border-top: 1px solid var(--base-divider-color);
 }
 </style>
diff --git a/components/Block/HeroForm.vue b/components/Block/HeroForm.vue
@@ -27,7 +27,7 @@ const { data: block } = useAsyncData(props.uuid, () =>
 </template>
 
 <style scoped>
-@media (min-width: 768px) {
+@media (width > 50rem) {
 	.flex {
 		display: flex;
 	}