diff --git a/public/fonts/dotum-Regular.woff2 b/public/fonts/dotum-Regular.woff2 new file mode 100644 index 0000000..7cdf0b7 Binary files /dev/null and b/public/fonts/dotum-Regular.woff2 differ diff --git a/public/fonts/dotumche-Regular.woff2 b/public/fonts/dotumche-Regular.woff2 new file mode 100644 index 0000000..2efbece Binary files /dev/null and b/public/fonts/dotumche-Regular.woff2 differ diff --git a/src/assets/buttons.png b/src/assets/buttons.png new file mode 100644 index 0000000..b8d233b Binary files /dev/null and b/src/assets/buttons.png differ diff --git a/src/assets/left-active.png b/src/assets/left-active.png deleted file mode 100644 index 6a2c791..0000000 Binary files a/src/assets/left-active.png and /dev/null differ diff --git a/src/assets/left-hover.png b/src/assets/left-hover.png deleted file mode 100644 index ebdc036..0000000 Binary files a/src/assets/left-hover.png and /dev/null differ diff --git a/src/assets/left-normal.png b/src/assets/left-normal.png deleted file mode 100644 index b85bf10..0000000 Binary files a/src/assets/left-normal.png and /dev/null differ diff --git a/src/assets/right-active.png b/src/assets/right-active.png deleted file mode 100644 index 3ee4c5c..0000000 Binary files a/src/assets/right-active.png and /dev/null differ diff --git a/src/assets/right-hover.png b/src/assets/right-hover.png deleted file mode 100644 index 799bcbf..0000000 Binary files a/src/assets/right-hover.png and /dev/null differ diff --git a/src/assets/right-normal.png b/src/assets/right-normal.png deleted file mode 100644 index 4166c46..0000000 Binary files a/src/assets/right-normal.png and /dev/null differ diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css index 71155a4..f4fb800 100644 --- a/src/assets/styles/base.css +++ b/src/assets/styles/base.css @@ -10,8 +10,7 @@ --sans-font: "Super Star", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; --arial-font: "Arial Pixel", Arial, Helvetica, sans-serif; --pmd-font: "Wonder Mail", Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif; - --mplus-10-font: "PixelMPlus 10", "MS Gothic", system-ui-ja, system-ui-zh-cn, system-ui-zh-tw, system-ui-zh-hk, system-ui-ko, sans-serif; - --mplus-12-font: "PixelMPlus 12", "MS Gothic", system-ui-ja, system-ui-zh-cn, system-ui-zh-tw, system-ui-zh-hk, system-ui-ko, sans-serif; + --dotum-font: "DotumChe", "Dotum", system-ui-ko, system-ui-ja, system-ui-zh-cn, system-ui-zh-tw, system-ui-zh-hk, monospace, sans-serif; @media screen and (prefers-color-scheme: light) { --bg-color: #e6f2ef; diff --git a/src/assets/styles/fonts.css b/src/assets/styles/fonts.css index afde59c..e39591b 100644 --- a/src/assets/styles/fonts.css +++ b/src/assets/styles/fonts.css @@ -2,12 +2,14 @@ font-family: "Arial Pixel"; src: url("/fonts/pixearg.woff2") format("woff2"); font-weight: normal; + font-display: fallback; } @font-face { font-family: "Arial Pixel"; src: url("/fonts/pixeab.woff2") format("woff2"); font-weight: bold; + font-display: fallback; } @font-face { @@ -16,6 +18,18 @@ font-weight: normal; } +@font-face { + font-family: "Dotum"; + src: url("/fonts/dotum-Regular.woff2") format("woff2"); + font-weight: normal; +} + +@font-face { + font-family: "DotumChe"; + src: url("/fonts/dotumche-Regular.woff2") format("woff2"); + font-weight: normal; +} + @font-face { font-family: "Kiwi Soda"; src: url("/fonts/KiwiSoda.woff2") format("woff2"); diff --git a/src/layouts/Blog.astro b/src/layouts/Blog.astro index aaf4926..a0de2ea 100644 --- a/src/layouts/Blog.astro +++ b/src/layouts/Blog.astro @@ -26,10 +26,17 @@ const { title, date, currently } = Astro.props; const blog = await getCollection("blog"); blog.length = Math.min(blog.length, 12); -blog.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf()); +blog.sort((a, b) => b.data.pubDate!.valueOf() - a.data.pubDate!.valueOf()); --- - + + + + + + + +
@@ -143,15 +150,19 @@ blog.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf()); --border-4: #88aabb; --border-5: #99bbcc; --border-6: #bbccdd; + --normal-color: #335577; + --active-color: #aa0033; + --active-border: #442266; color: #000; } h1 { font: bold 1rem var(--arial-font); } h2 { - font: normal 1.5rem var(--mplus-12-font); + font: normal 1rem var(--dotum-font); text-transform: uppercase; } main { font: 1rem var(--arial-font); + letter-spacing: 1px; display: grid; grid-template-columns: auto minmax(auto, 75ch); justify-content: center; @@ -211,8 +222,7 @@ blog.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf()); .item { position: relative; - font-family: var(--mplus-10-font); - font-size: 1.25rem; /* this should be 20px */ + font: bold 1em var(--dotum-font); display: flex; justify-content: space-between; align-items: center; @@ -225,6 +235,17 @@ blog.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf()); left: 0; width: 100%; height: 100%; + + ~ .link { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + /* max-width: 19ch; */ + + @media screen and (max-width: 76em) { + max-width: unset; + } + } } } @@ -269,7 +290,6 @@ blog.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf()); article { display: flex; - letter-spacing: 1px; border: 2px solid var(--border-0); border-image: var(--outerBorder) 19 9 38 11 fill / 38px 18px 76px 22px; background-color: var(--bg-3); @@ -286,7 +306,9 @@ blog.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf()); } .title { - font: normal 1.5rem var(--mplus-12-font); + display: grid; + place-content: center; + font: normal 1.25em var(--dotum-font); background-color: var(--bg-2); padding: 2px 6px; } @@ -316,9 +338,10 @@ blog.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf()); border-color: var(--bg-2) var(--bg-2) var(--bg-1) var(--bg-1); padding: 2px 4px; - time, .section { + time { display: flex; width: 100%; + align-items: stretch; } } @@ -345,6 +368,19 @@ blog.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf()); p { margin-block: 1lh; } a, del, s { text-decoration-thickness: 2px; } + a { + color: var(--normal-color); + + &:visited { + color: var(--active-border); + } + &:hover { + color: var(--active-color); + } + &:active, &:focus { + color: var(--normal-color); + } + } @supports not (margin-trim: block) { :first-child { margin-block-start: 0; } diff --git a/src/pages/blog/[...id].astro b/src/pages/blog/[...id].astro index 3d6b5d6..65e7ca3 100644 --- a/src/pages/blog/[...id].astro +++ b/src/pages/blog/[...id].astro @@ -2,13 +2,7 @@ import Blog from '@/layouts/Blog.astro'; import type { GetStaticPaths } from 'astro'; import { getCollection, render } from 'astro:content'; - -import leftNormal from "$/left-normal.png"; -import leftHover from "$/left-hover.png"; -import leftActive from "$/left-active.png"; -import rightNormal from "$/right-normal.png"; -import rightHover from "$/right-hover.png"; -import rightActive from "$/right-active.png"; +import buttons from "$/buttons.png"; export const getStaticPaths = (async () => { const blog = await getCollection("blog"); @@ -30,30 +24,37 @@ const next = current === 0 ? undefined : blog[current - 1]; + + {(previous || next) && ( -
+ )} - \ No newline at end of file diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 3e38274..8d26150 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -1,16 +1,14 @@ --- import Layout from "@/layouts/Layout.astro"; +import formatDate from "@/utils/formatDate"; import { getCollection } from "astro:content"; import dayjs from "dayjs"; -import utc from "dayjs/plugin/utc"; const blog = await getCollection("blog"); const sorted = Object.groupBy(blog, ({ data }) => data.pubDate!.getMonth()); -dayjs.extend(utc); -const getMonth = (id: number) => { +function getMonth(id: number): string { let date = new Date(); - date.setDate(1); date.setMonth(id); return dayjs(date).format("MMMM"); } @@ -27,8 +25,8 @@ const getMonth = (id: number) => {
    {entry[1]?.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf()).map(post => (
  • -