From 0b6b798db42d5b4395d5f2f59d4729d4cc7a3b3a Mon Sep 17 00:00:00 2001 From: eggy Date: Sat, 25 Feb 2023 12:33:30 -0500 Subject: [PATCH 01/61] feat: typography attempt 1 --- app.vue | 67 -------------------------------------- assets/css/base.scss | 49 ++++++++++++++++++++++++++++ assets/css/main.scss | 23 +++++++++++++ components/ProjectCard.vue | 2 +- nuxt.config.ts | 1 + pages/index.vue | 6 ++-- tailwind.config.js | 25 ++++++++++++++ 7 files changed, 103 insertions(+), 70 deletions(-) create mode 100644 assets/css/base.scss create mode 100644 assets/css/main.scss diff --git a/app.vue b/app.vue index c2212ae..f8eacfa 100644 --- a/app.vue +++ b/app.vue @@ -3,70 +3,3 @@ - - diff --git a/assets/css/base.scss b/assets/css/base.scss new file mode 100644 index 0000000..1952ad5 --- /dev/null +++ b/assets/css/base.scss @@ -0,0 +1,49 @@ +@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@300;400;600;700;800;900&display=swap"); + +@mixin headings { + h1, + h2, + h3, + h4, + h5, + h6 { + @content; + } +} + +* { + box-sizing: border-box; + // for that cool wave dark mode effect + z-index: 1; + position: relative; +} + +html, +body, +div#__nuxt { + height: 100%; + width: 100%; +} + +:root { + --text-color: #243746; + --bg: #f1e7d0; +} + +.dark { + --text-color: #ebf4f1; + --bg: #091a28; +} + +.text-bitter { + font-family: Bitter, ui-sans-serif, system-ui, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", "Helvetica Neue", + sans-serif; +} + +.text-article { + font-family: "Source Serif Pro", serif; + line-height: 1.8; + color: #111; + font-size: 1.25rem; +} diff --git a/assets/css/main.scss b/assets/css/main.scss new file mode 100644 index 0000000..0e5d8a7 --- /dev/null +++ b/assets/css/main.scss @@ -0,0 +1,23 @@ +@import "base.scss"; + +.prose article { + @include headings { + @apply hover:text-blue-700 dark:hover:text-blue-400; + & > a:hover, + & > a:active { + text-decoration: underline; + text-decoration-skip-ink: all; + &::before { + content: "#"; + position: absolute; + opacity: 0.5; + left: -2rem; + font-style: italic; + } + } + } + + a:hover { + @apply hover:text-blue-700 dark:hover:text-blue-400; + } +} diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue index 3e7f03b..4cb5f8e 100644 --- a/components/ProjectCard.vue +++ b/components/ProjectCard.vue @@ -17,7 +17,7 @@ const imgUrl = props.project.img
-

{{ project.name }}

+

{{ project.name }}

-

Welcome!

-

What are you here to see?

+
+

Welcome!

+

What are you here to see?

+
diff --git a/tailwind.config.js b/tailwind.config.js index 1596b8f..1310ee9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,6 +11,31 @@ export default { marginTop: "1.5em", marginBottom: "1.5em", }, + a: { + textDecoration: "underline", + fontWeight: "inherit", + }, + "h1 a": { + textDecoration: "inherit", + }, + "h2 a": { + textDecoration: "inherit", + }, + "h3 a": { + textDecoration: "inherit", + }, + "h4 a": { + textDecoration: "inherit", + }, + "h5 a": { + textDecoration: "inherit", + }, + "h6 a": { + textDecoration: "inherit", + }, + "h1, h2, h3, h4, h5, h6": { + fontFamily: "Bitter, sans-serif", + }, }, ], }, From e9497b3cdcd1377a29947d735d19b9b10104961e Mon Sep 17 00:00:00 2001 From: eggy Date: Sat, 25 Feb 2023 14:22:25 -0500 Subject: [PATCH 02/61] feat: add better tag map titles --- assets/css/base.scss | 7 ------- pages/tags/blog/[tag].vue | 2 +- pages/tags/stories/[tag].vue | 2 +- 3 files changed, 2 insertions(+), 9 deletions(-) diff --git a/assets/css/base.scss b/assets/css/base.scss index 1952ad5..f444494 100644 --- a/assets/css/base.scss +++ b/assets/css/base.scss @@ -18,13 +18,6 @@ position: relative; } -html, -body, -div#__nuxt { - height: 100%; - width: 100%; -} - :root { --text-color: #243746; --bg: #f1e7d0; diff --git a/pages/tags/blog/[tag].vue b/pages/tags/blog/[tag].vue index 901fe56..abde111 100644 --- a/pages/tags/blog/[tag].vue +++ b/pages/tags/blog/[tag].vue @@ -16,7 +16,7 @@ const docs = await queryContent("/blog") .find(); const title = details.name ?? `"${tag}"`; -useTitle(title, details.description); +useTitle(title + " Posts", details.description);