feat: 🎉 initial commit

src/css/modules/buttons.css

@@ -0,0 +1,3 @@
+.read-more-button {
+  @apply inline-flex items-center gap-2 rounded-xl bg-sky-600 px-5 py-2 text-lg font-bold text-white no-underline hover:bg-sky-700;
+}

src/css/modules/callouts.css

@@ -0,0 +1,81 @@
+.callout {
+  @apply rounded-lg border-s-8 border-gray-700 bg-gray-200 p-4 text-gray-700 dark:border-gray-200 dark:bg-gray-900 dark:text-gray-200;
+
+  margin: 1.25em 0;
+
+  @media (min-width: 768px) {
+    margin: 1.3333333em 0;
+  }
+
+  @media (min-width: 1024px) {
+    margin: 1.2em 0;
+  }
+}
+
+.callout a {
+  color: inherit;
+}
+
+.callout-title {
+  @apply flex items-center font-bold;
+}
+
+.callout-title-icon {
+  @apply shrink-0 grow-0 basis-9;
+}
+
+.callout-content {
+  @apply ms-9;
+}
+
+.callout[data-callout='abstract'] {
+  @apply border-fuchsia-700 bg-fuchsia-200 text-fuchsia-700 dark:border-fuchsia-200 dark:bg-fuchsia-900 dark:text-fuchsia-200;
+}
+
+.callout[data-callout='bug'] {
+  @apply border-rose-700 bg-rose-200 text-rose-700 dark:border-rose-200 dark:bg-rose-900 dark:text-rose-200;
+}
+
+.callout[data-callout='danger'] {
+  @apply border-amber-700 bg-amber-200 text-amber-700 dark:border-amber-200 dark:bg-amber-900 dark:text-amber-200;
+}
+
+.callout[data-callout='example'] {
+  @apply border-stone-700 bg-stone-200 text-stone-700 dark:border-stone-200 dark:bg-stone-900 dark:text-stone-200;
+}
+
+.callout[data-callout='failure'] {
+  @apply border-red-700 bg-red-200 text-red-700 dark:border-red-200 dark:bg-red-900 dark:text-red-200;
+}
+
+.callout[data-callout='info'] {
+  @apply border-sky-700 bg-sky-200 text-sky-700 dark:border-sky-200 dark:bg-sky-900 dark:text-sky-200;
+}
+
+.callout[data-callout='note'] {
+  @apply border-cyan-700 bg-cyan-200 text-cyan-700 dark:border-cyan-200 dark:bg-cyan-900 dark:text-cyan-200;
+}
+
+.callout[data-callout='question'] {
+  @apply border-blue-700 bg-blue-200 text-blue-700 dark:border-blue-200 dark:bg-blue-900 dark:text-blue-200;
+}
+
+.callout[data-callout='quote'] {
+  @apply border-zinc-700 bg-zinc-200 text-zinc-700 dark:border-zinc-200 dark:bg-zinc-900 dark:text-zinc-200;
+}
+
+.callout[data-callout='success'] {
+  @apply border-emerald-700 bg-emerald-200 text-emerald-700 dark:border-emerald-200 dark:bg-emerald-900 dark:text-emerald-200;
+}
+
+.callout[data-callout='tip'] {
+  @apply border-indigo-700 bg-indigo-200 text-indigo-700 dark:border-indigo-200 dark:bg-indigo-900 dark:text-indigo-200;
+}
+
+.callout[data-callout='todo'] {
+  @apply border-lime-700 bg-lime-200 text-lime-700 dark:border-lime-200 dark:bg-lime-900 dark:text-lime-200;
+}
+
+.callout[data-callout='warning'] {
+  @apply border-amber-700 bg-amber-200 text-amber-700 dark:border-amber-200 dark:bg-amber-900 dark:text-amber-200;
+}

src/css/modules/details.css

@@ -0,0 +1,11 @@
+details {
+  @apply rounded-lg border border-solid border-sky-500 text-sky-500;
+}
+
+details[open] summary {
+  @apply rounded-none rounded-t-lg;
+}
+
+summary {
+  @apply rounded-lg bg-sky-200 p-4;
+}

src/css/modules/navigation.css

@@ -0,0 +1,11 @@
+.eleventy-navigation .nav-list {
+  @apply mx-3 flex gap-2 md:mx-6 md:gap-3;
+}
+
+.eleventy-navigation .nav-link {
+  @apply rounded-xl px-4 py-2 text-base sm:text-lg md:text-xl capitalize text-white transition-all duration-300 hover:bg-sky-900 hover:shadow-lg md:m-0 md:max-h-12 hover:dark:bg-sky-800;
+}
+
+.eleventy-navigation a.active {
+  @apply bg-sky-900 shadow-lg dark:bg-sky-800;
+}

src/css/modules/pagination.css

@@ -0,0 +1,20 @@
+.pagination {
+  @apply flex justify-center gap-2;
+}
+
+.pagination a,
+.pagination span {
+  @apply flex size-10 items-center justify-center rounded-full;
+}
+
+.pagination [aria-current] {
+  @apply text-slate-300 bg-sky-600 dark:bg-slate-700;
+}
+
+.pagination a {
+  @apply bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700;
+}
+
+.pagination span {
+  @apply cursor-not-allowed bg-slate-400 text-slate-300  dark:bg-slate-950 dark:text-slate-700;
+}

src/css/modules/postmeta.css

@@ -0,0 +1,15 @@
+.postmeta {
+  @apply flex flex-wrap items-center gap-4;
+}
+
+.postmeta > * {
+  @apply inline-flex items-center gap-1;
+}
+
+.postmeta a {
+  @apply hover:text-sky-400;
+}
+
+.postmeta svg {
+  @apply stroke-sky-600 dark:stroke-sky-600;
+}

src/css/modules/tags.css

@@ -0,0 +1,7 @@
+.tags {
+  @apply flex gap-1;
+}
+
+.tags .tag {
+  @apply inline-flex items-center gap-1 rounded-md border border-solid border-sky-500 bg-sky-200 px-1.5 py-0.5 text-sky-500 dark:border-sky-500 dark:bg-sky-950 dark:text-sky-500;
+}

src/css/prism.css

@@ -0,0 +1,284 @@
+pre[class*='language-'] {
+  --padding-y: var(--am-prism-padding-y, 1rem);
+  --padding-x: var(--am-prism-padding-x, 1rem);
+  padding: var(--padding-y) var(--padding-x);
+  overflow: auto;
+  font-size: var(--am-prism-font-size, 0.85em);
+  border-radius: var(--am-prism-border-radius, 0.4em);
+}
+pre > code[class*='language-'] {
+  --am-prism-font-family: 'M PLUS 1 Code';
+  padding: initial;
+  font-size: 1em;
+  font-weight: 400;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-family: var(--am-prism-font-family, ui-monospace), monospace;
+  line-height: var(--am-prism-line-height, 1.5);
+  background-color: initial;
+}
+code[class*='language-'],
+pre[class*='language-'] {
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*='language-'] .line-numbers-rows {
+  box-sizing: content-box;
+  margin: calc(var(--padding-y) * -1) 0;
+  padding: var(--padding-y) 0;
+  max-height: 100%;
+  overflow: hidden;
+}
+.line-numbers.line-numbers .line-numbers-rows {
+  border-right-width: var(--am-prism-border-width, 1px);
+  border-right-color: var(--am-prism-border-color);
+}
+.line-numbers .line-numbers-rows > span:before {
+  color: var(--am-prism-line-numbers-color);
+}
+div.code-toolbar > .toolbar {
+  top: 0.3rem !important;
+  right: 0.3rem !important;
+}
+div.code-toolbar > .toolbar > .toolbar-item > button.copy-to-clipboard-button {
+  display: inline-flex;
+  padding: 0 0.75em;
+  font-size: var(--am-prism-font-size, 0.8em);
+  font-family: var(--am-prism-font-family, ui-monospace), monospace;
+  font-weight: 600 !important;
+  line-height: 2.25em;
+  color: var(--am-prism-copy-color);
+  background-color: var(--am-prism-copy-bg);
+  border-radius: calc(var(--am-prism-border-radius, 0.4em) - 0.1em);
+  cursor: pointer;
+  box-shadow: none;
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+div.code-toolbar > .toolbar > .toolbar-item > button.copy-to-clipboard-button:hover {
+  opacity: 0.8;
+}
+div.code-toolbar > .toolbar > .toolbar-item > button.copy-to-clipboard-button:focus {
+  opacity: 1;
+}
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #24292f;
+}
+code[class*='language-']::selection,
+pre[class*='language-']::selection {
+  text-shadow: none;
+  background: #9fc6e9;
+}
+pre[class*='language-'] {
+  background: #f6f8fa;
+}
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em 0.3em;
+  border-radius: 0.3em;
+  color: #24292f;
+  background: #eff1f3;
+}
+pre[data-line] {
+  position: relative;
+}
+pre[class*='language-'] > code[class*='language-'] {
+  position: relative;
+  z-index: 1;
+}
+.line-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding: inherit 0;
+  margin-top: 1em;
+  background: #fff8c5;
+  box-shadow: inset 5px 0 0 #eed888;
+  z-index: 0;
+  pointer-events: none;
+  line-height: inherit;
+  white-space: pre;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #6e7781;
+}
+.token.punctuation {
+  color: #24292f;
+}
+.token.boolean,
+.token.constant,
+.token.deleted,
+.token.number,
+.token.property,
+.token.symbol,
+.token.tag {
+  color: #0550ae;
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string {
+  color: #0a3069;
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url {
+  color: #0550ae;
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #cf222e;
+}
+.token.function {
+  color: #8250df;
+}
+.token.important,
+.token.regex,
+.token.variable {
+  color: #0a3069;
+}
+.token.bold,
+.token.important {
+  font-weight: 700;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+:root {
+  --am-prism-line-numbers-color: #6e778177;
+  --am-prism-border-color: #6e778122;
+  --am-prism-copy-color: #24292faa;
+  --am-prism-copy-bg: #6e778122;
+}
+
+@media (prefers-color-scheme: dark) {
+  code[class*='language-'],
+  pre[class*='language-'] {
+    color: #c9d1d9;
+  }
+  code[class*='language-']::selection,
+  pre[class*='language-']::selection {
+    text-shadow: none;
+    background: #234879;
+  }
+  pre[class*='language-'] {
+    background: #161b22;
+  }
+  :not(pre) > code[class*='language-'] {
+    padding: 0.1em 0.3em;
+    border-radius: 0.3em;
+    color: #c9d1d9;
+    background: #343942;
+  }
+  pre[data-line] {
+    position: relative;
+  }
+  pre[class*='language-'] > code[class*='language-'] {
+    position: relative;
+    z-index: 1;
+  }
+  .line-highlight {
+    position: absolute;
+    left: 0;
+    right: 0;
+    padding: inherit 0;
+    margin-top: 1em;
+    background: #2f2a1e;
+    box-shadow: inset 5px 0 0 #674c16;
+    z-index: 0;
+    pointer-events: none;
+    line-height: inherit;
+    white-space: pre;
+  }
+  .namespace {
+    opacity: 0.7;
+  }
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #8b949e;
+  }
+  .token.punctuation,
+  .token.variable {
+    color: #c9d1d9;
+  }
+  .token.boolean,
+  .token.constant,
+  .token.deleted,
+  .token.number,
+  .token.property,
+  .token.symbol,
+  .token.tag {
+    color: #79c0ff;
+  }
+  .token.attr-name,
+  .token.builtin,
+  .token.char,
+  .token.inserted,
+  .token.selector,
+  .token.string {
+    color: #a5d6ff;
+  }
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.operator,
+  .token.url {
+    color: #a5d6ff;
+    background: #161b22;
+  }
+  .token.atrule,
+  .token.keyword {
+    color: #a5d6ff;
+  }
+  .token.attr-value,
+  .token.function {
+    color: #d2a8ff;
+  }
+  .token.class-name,
+  .token.important,
+  .token.regex {
+    color: #a8daff;
+  }
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+  .token.entity {
+    cursor: help;
+  }
+  :root {
+    --am-prism-line-numbers-color: #8b949e55;
+    --am-prism-border-color: #8b949e22;
+    --am-prism-copy-color: #c9d1d9;
+    --am-prism-copy-bg: #8b949e22;
+  }
+}

src/css/style.css

@@ -0,0 +1,57 @@
+@import url(modules/buttons.css);
+@import url(modules/callouts.css);
+@import url(modules/details.css);
+@import url(modules/navigation.css);
+@import url(modules/pagination.css);
+@import url(modules/postmeta.css);
+@import url(modules/tags.css);
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: 'Encode Sans', sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Tilt Warp', sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings: 'XROT' 0, 'YROT' 0;
+}
+
+a {
+  @apply transition-colors duration-300;
+}
+
+.blogpost {
+  @apply prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-a:text-sky-600 prose-a:transition-colors prose-a:duration-300 hover:prose-a:text-sky-400 prose-strong:text-inherit prose-li:marker:!text-inherit prose-img:rounded-3xl;
+}
+
+abbr {
+  text-decoration: none;
+
+  &::after {
+    content: ' (' attr(title) ')';
+  }
+}
+
+@media (hover: hover) {
+  abbr {
+    text-decoration: underline dotted;
+
+    &::after {
+      content: '';
+    }
+  }
+}