initial site building

.prettierrc.toml

@@ -0,0 +1,2 @@
+lineWidth = 70
+proseWrap = "always"

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "blog",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "postcss -o src/build/css/bundle.css src/css/*.css",
+    "watch": "postcss -o src/build/css/bundle.css src/css/*.css --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.13",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "postcss-cli": "^11.0.0",
+    "tailwindcss": "^3.4.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/build/css/bundle.css

@@ -0,0 +1,821 @@
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+
+/*
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: #e5e7eb; /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4; /* 3 */
+  font-family: Inter, sans-serif; /* 4 */
+  font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-feature-settings: normal; /* 2 */
+  font-variation-settings: normal; /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+body{
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 7 18 / var(--tw-bg-opacity));
+  font-family: Merriweather, serif;
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+*, ::before, ::after{
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop{
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+.container{
+  width: 100%;
+}
+@media (min-width: 640px){
+
+  .container{
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px){
+
+  .container{
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px){
+
+  .container{
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px){
+
+  .container{
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px){
+
+  .container{
+    max-width: 1536px;
+  }
+}
+.mx-auto{
+  margin-left: auto;
+  margin-right: auto;
+}
+.mb-14{
+  margin-bottom: 3.5rem;
+}
+.mb-3{
+  margin-bottom: 0.75rem;
+}
+.mb-4{
+  margin-bottom: 1rem;
+}
+.mt-1{
+  margin-top: 0.25rem;
+}
+.mt-14{
+  margin-top: 3.5rem;
+}
+.mt-2{
+  margin-top: 0.5rem;
+}
+.mt-4{
+  margin-top: 1rem;
+}
+.mt-6{
+  margin-top: 1.5rem;
+}
+.mt-8{
+  margin-top: 2rem;
+}
+.h-0{
+  height: 0px;
+}
+.h-0\.5{
+  height: 0.125rem;
+}
+.h-1{
+  height: 0.25rem;
+}
+.w-fit{
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.max-w-3xl{
+  max-width: 48rem;
+}
+.max-w-\[200px\]{
+  max-width: 200px;
+}
+.max-w-sm{
+  max-width: 24rem;
+}
+.space-y-4 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+.rounded-lg{
+  border-radius: 0.5rem;
+}
+.rounded-md{
+  border-radius: 0.375rem;
+}
+.rounded-xl{
+  border-radius: 0.75rem;
+}
+.border-0{
+  border-width: 0px;
+}
+.bg-gray-400{
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+.bg-gray-500{
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+.bg-gray-800{
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+.p-2{
+  padding: 0.5rem;
+}
+.px-1{
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.px-2{
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.px-4{
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.pb-12{
+  padding-bottom: 3rem;
+}
+.font-serif{
+  font-family: Merriweather, serif;
+}
+.text-2xl{
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+.text-3xl{
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+.text-4xl{
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+.text-sm{
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.font-medium{
+  font-weight: 500;
+}
+.italic{
+  font-style: italic;
+}
+.transition-all{
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-colors{
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.external-link{
+  position: relative;
+  border-radius: 0.125rem;
+  padding-left: 0.25rem;
+  padding-right: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(124 58 237 / var(--tw-text-opacity));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+.external-link:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(46 16 101 / var(--tw-bg-opacity));
+}
+.external-link::after{
+  position: absolute;
+  top: 0.25rem;
+  right: 0.5rem;
+  height: 0.5rem;
+  width: 0.5rem;
+  --tw-translate-x: 50%;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-radius: 9999px;
+  border-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: rgb(124 58 237 / var(--tw-border-opacity));
+    content: "";
+}
+
+.post {
+  h1{
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+  h1{
+    font-weight: 700;
+  }
+  h2,
+  h3,
+  h4,
+  h5,
+  h6{
+    margin-top: 1rem;
+  }
+  h2,
+  h3,
+  h4,
+  h5,
+  h6{
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+  h2,
+  h3,
+  h4,
+  h5,
+  h6{
+    font-weight: 700;
+  }
+  p{
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  p{
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+  p{
+    line-height: 2;
+  }
+  img{
+    margin-left: auto;
+    margin-right: auto;
+  }
+  img{
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  img{
+    border-radius: 0.5rem;
+  }
+  div.sourceCode{
+    border-radius: 0.5rem;
+  }
+  div.sourceCode{
+    padding: 1rem;
+  }
+}
+
+.hover\:text-gray-500:hover{
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:max-w-\[250px\]{
+  max-width: 250px;
+}
+
+.group:hover .group-hover\:bg-violet-950{
+  --tw-bg-opacity: 1;
+  background-color: rgb(46 16 101 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:text-gray-400{
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+@media (min-width: 640px){
+
+  .sm\:mr-2{
+    margin-right: 0.5rem;
+  }
+}
+
+@media (min-width: 768px){
+
+  .md\:mt-24{
+    margin-top: 6rem;
+  }
+
+  .md\:space-y-8 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-y-reverse: 0;
+    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+  }
+
+  .md\:text-5xl{
+    font-size: 3rem;
+    line-height: 1;
+  }
+}

src/css/default.css

@@ -1,54 +1,47 @@
-:root {
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
-  font-size: 62.5%;
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
-  box-sizing: border-box;
+
-  -ms-text-size-adjust: 100%;
+@tailwind base;
-  -webkit-text-size-adjust: 100%;
+@tailwind components;
-}
+@tailwind utilities;
-*,
+
-*:before,
+@layer base {
-*:after {
-  box-sizing: inherit;
-}
-html,
   body {
-  min-height: 100vh;
+    @apply bg-gray-950 text-gray-100 font-serif;
   }
-body {
-  font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
-  scroll-behavior: smooth;
-  font-size: 2rem;
 }
-body,
+
-input,
+@layer utilities {
-button {
+  .external-link {
-  -webkit-font-smoothing: antialiased;
+    @apply text-violet-600 pl-1 pr-4 rounded-sm hover:bg-violet-950 transition-colors duration-300 relative;
-  -moz-osx-font-smoothing: grayscale;
   }
-h1,
+  .external-link::after {
-h2 {
+    @apply absolute top-1 right-2 w-2 h-2 border-2 border-violet-600 rounded-full translate-x-1/2 -translate-y-1/2;
-  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
+    content: "";
   }
+  .small-caps {
+    font-variant: all-small-caps;
+  }
+}
+
+.post {
   h1 {
-  font-size: 4.0rem;
+    @apply text-2xl font-bold;
   }
-h2 {
+  h2,
-  font-size: 2.6rem;
+  h3,
-}
+  h4,
-small,
+  h5,
-p {
+  h6 {
-  font-family: Tahoma, Arial, sans-serif;
+    @apply text-xl font-bold mt-4;
-}
-small {
-  font-size: 1.6rem;
-  font-style: italic;
   }
   p {
-  font-size: 1.8rem;
+    @apply text-lg leading-loose my-2;
+  }
+  img {
+    @apply mx-auto my-4 rounded-lg;
+  }
+  div.sourceCode {
+    @apply p-4 rounded-lg;
   }
-pre.sourceCode {
-  padding: 2rem 1.5rem;
 }

src/index.html

@@ -1,27 +1,30 @@
 ---
-desc: "This is me saying hello to the world"
+desc: "a blog about computers, math, hacks, games, and life"
 image: "./images/robert-pearce-UwHN0jU_YqQ-unsplash-800w.jpg"
 lang: "en"
 stylesheet: "default"
 title: "Hello, world!"
 ---
 
-<header>
-  <h1>Hello, world!</h1>
-  <img
-    alt="A woman sitting on a bench amongst trees at the end of a boardwalk leading to a pond with mountains in the background"
-    src="./images/robert-pearce-UwHN0jU_YqQ-unsplash-800w.jpg"
-    height="300"
-  />
-</header>
 <main>
   <section>
-    <h2>Blog Posts</h2>
+    <h2 class="text-3xl">Latest</h2>
-    <ul>
+    <hr class="sm:mr-2 max-w-sm border-0 h-0.5 bg-gray-500 rounded-md mt-2" />
+    <ul class="mt-6 space-y-4 md:space-y-8">
       $for(posts)$
-        <li>
+      <li class="group">
-          <div><a href=".$url$">$title$</a></div>
+        <div class="rounded-md p-2">
-          <small>$date$</small>
+          <a
+            href=".$url$"
+            class="w-fit group-hover:text-gray-400 transition-colors"
+          >
+            <h3 class="text-2xl">$title$</h3>
+            <p class="text-sm">$date$</p>
+          </a>
+        </div>
+        <hr
+          class="max-w-[200px] border-0 h-1 bg-gray-800 rounded-lg px-2 group-hover:max-w-[250px] group-hover:bg-violet-950 transition-all duration-400"
+        />
       </li>
       $endfor$
     </ul>

src/posts/2020-09-21-hello-world.md

@@ -1,6 +1,6 @@
 ---
-author: "My name"
+author: "Youwen Wu"
-authorTwitter: "@MyName"
+authorTwitter: "@youwen"
 desc: "I announce myself to the world"
 image: "./images/waiheke-stony-batter.jpg"
 keywords: "hello, announcement"

src/posts/2020-09-22-hola-mundo.md

@@ -1,26 +0,0 @@
----
-author: "Mi nombre"
-authorTwitter: "@MiNombre"
-desc: "Me anuncio al mundo"
-image: "./images/waiheke-stony-batter.jpg"
-keywords: "hola, anuncio"
-lang: "es"
-title: "¡Hola Mundo!"
-updated: "2020-09-23T12:00:00Z"
----
-
-¡Hola Mundo! ¡Estoy aquí!
-
-<img
-  alt="Grapevines among rolling hills leading to the sea"
-  src="./images/waiheke-stony-batter.jpg"
-  height="200"
-/>
-
-Haskell, por ejemplo:
-
-```haskell
-toSlug :: T.Text -> T.Text
-toSlug =
-  T.intercalate (T.singleton '-') . T.words . T.toLower . clean
-```

src/posts/2020-09-22-ni-hao.md

@@ -0,0 +1,33 @@
+---
+author: "Youwen Wu"
+authorTwitter: "@youwen"
+desc: "The first post"
+image: "./images/waiheke-stony-batter.jpg"
+keywords: "hola, anuncio"
+lang: "cn"
+title: "Ni Hao"
+updated: "2020-09-23T12:00:00Z"
+---
+
+Welcome!
+
+<img
+  alt="Grapevines among rolling hills leading to the sea"
+  src="./images/waiheke-stony-batter.jpg"
+  height="200"
+/>
+
+Haskell is a great language. It is a pure functional programming language with
+strong static typing. It is also a lazy language, which means that it does not
+evaluate expressions until it is absolutely necessary. This can lead to some
+interesting performance characteristics.
+
+```haskell
+toSlug :: T.Text -> T.Text
+toSlug =
+  T.intercalate (T.singleton '-') . T.words . T.toLower . clean
+```
+
+We can also try some math. Here is a simple theorem:
+
+Seems like it doesnt quite work yet.

src/templates/default.html

@@ -1,53 +1,92 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="$lang$">
   <head>
     <title>$title$</title>
 
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="$desc$">
+    <meta name="description" content="$desc$" />
     $if(author)$
-    <meta name="author" content="$author$">
+    <meta name="author" content="$author$" />
-    $endif$
+    $endif$ $if(keywords)$
-    $if(keywords)$
+    <meta name="keywords" content="$keywords$" />
-    <meta name="keywords" content="$keywords$">
     $endif$
 
-    <meta property="og:site_name" content="$siteName$">
+    <meta property="og:site_name" content="$siteName$" />
-    <meta property="og:title" content="$title$">
+    <meta property="og:title" content="$title$" />
-    <meta property="og:url" content="$root$$url$">
+    <meta property="og:url" content="$root$$url$" />
-    <meta property="og:description" content="$desc$">
+    <meta property="og:description" content="$desc$" />
     $if(image)$
-    <meta property="og:image" content="$root$$image$">
+    <meta property="og:image" content="$root$$image$" />
-    $endif$
+    $endif$ $if(type)$
-    $if(type)$
+    <meta property="og:type" content="$type$" />
-    <meta property="og:type" content="$type$">
     $else$
-    <meta property="og:type" content="website">
+    <meta property="og:type" content="website" />
+    $endif$ $if(image)$
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:image" content="$root$$image$" />
     $endif$
-
+    <meta property="twitter:site" content="$siteName$" />
-    $if(image)$
+    <meta property="twitter:title" content="$title$" />
-    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:description" content="$desc$" />
-    <meta property="twitter:image" content="$root$$image$">
-    $endif$
-    <meta property="twitter:site" content="$siteName$">
-    <meta property="twitter:title" content="$title$">
-    <meta property="twitter:description" content="$desc$">
     $if(authorTwitter)$
-    <meta property="twitter:creator" content="$authorTwitter$">
+    <meta property="twitter:creator" content="$authorTwitter$" />
     $endif$
 
-    <link rel="shortcut icon" href="/favicon.ico">
+    <link rel="shortcut icon" href="/favicon.ico" />
-    <link rel="canonical" href="$root$$url$">
+    <link rel="canonical" href="$root$$url$" />
 
-    <link rel="alternate" href="./atom.xml" title="$feedTitle$" type="application/atom+xml">
+    <link
-    <link rel="alternate" href="./rss.xml" title="$feedTitle$" type="application/rss+xml">
+      rel="alternate"
+      href="./atom.xml"
+      title="$feedTitle$"
+      type="application/atom+xml"
+    />
+    <link
+      rel="alternate"
+      href="./rss.xml"
+      title="$feedTitle$"
+      type="application/rss+xml"
+    />
 
-    <link rel="stylesheet" href="./css/default.css" />
+    <link rel="stylesheet" href="./build/css/bundle.css" />
     <link rel="stylesheet" href="./css/code.css" />
   </head>
-  <body>
+  <body class="container max-w-3xl mx-auto px-4">
+    <header class="mt-14 md:mt-24 mb-14">
+      <h1 class="text-4xl md:text-5xl font-serif font-medium">
+        <a href="/" class="hover:text-gray-500 transition-colors"
+          >Gradient Ascent</a
+        >
+      </h1>
+      <p class="mt-8 mb-3 px-1 italic">
+        a blog about computers, math, hacks, games, and life.
+      </p>
+      <a class="text-sm external-link" href="https://youwen.dev"
+        >by Youwen Wu</a
+      >
+    </header>
     $body$
+    <footer class="mt-14 md:mt-24 pb-12">
+      <hr class="border-0 bg-gray-400 rounded-xl h-0.5 mb-4" />
+      <p class="text-sm">
+        &copy; 2024 Youwen Wu. Powered by
+        <a
+          href="https://jaspervdj.be/hakyll/"
+          class="external-link"
+          target="__blank"
+          >Hakyll.</a
+        >
+        Content freely available under
+        <a
+          class="external-link"
+          target="__blank"
+          href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en"
+          ><span class="smallcaps">CC BY-NC-SA</span> 4.0</a
+        >
+        unless otherwise noted.
+      </p>
+    </footer>
     <script defer src="./js/script.js"></script>
   </body>
 </html>

src/templates/post.html

@@ -1,15 +1,14 @@
 <main>
   <article>
     <header>
-      <h1>
+      <h1 class="text-4xl">
         <a href=".$url$">$title$</a>
       </h1>
-      <div>
+      <div class="mt-2">$date$</div>
-        $date$ $if(updated)$(updated: $updated$)$endif$
+      <div class="mt-1 text-sm">
+        $if(updated)$(last updated: $updated$)$endif$
       </div>
     </header>
-    <section>
+    <section class="post mt-4">$body$</section>
-      $body$
-    </section>
   </article>
 </main>

ssg/src/Main.hs

@@ -3,12 +3,12 @@
 import Control.Monad (forM_)
 import Data.List (isPrefixOf, isSuffixOf)
 import Data.Maybe (fromMaybe)
-import Hakyll
 import qualified Data.Text as T
 import qualified Data.Text.Slugger as Slugger
+import Hakyll
 import System.FilePath (takeFileName)
-import Text.Pandoc
+import Text.Pandoc (
-  ( Extension (Ext_fenced_code_attributes, Ext_footnotes, Ext_gfm_auto_identifiers, Ext_implicit_header_references, Ext_smart),
+    Extension (Ext_fenced_code_attributes, Ext_footnotes, Ext_gfm_auto_identifiers, Ext_implicit_header_references, Ext_smart),
     Extensions,
     ReaderOptions,
     WriterOptions (writerHighlightStyle),
@@ -23,22 +23,22 @@ import Text.Pandoc.Highlighting (Style, breezeDark, styleToCss)
 -- PERSONALIZATION
 
 mySiteName :: String
-mySiteName = "My Site Name"
+mySiteName = "gradient ascent"
 
 mySiteRoot :: String
-mySiteRoot = "https://my-site.com"
+mySiteRoot = "https://blog.youwen.dev"
 
 myFeedTitle :: String
-myFeedTitle = "My Feed Title"
+myFeedTitle = "gradient ascent"
 
 myFeedDescription :: String
-myFeedDescription = "My Site Description"
+myFeedDescription = "on computers, hacks, math, and life"
 
 myFeedAuthorName :: String
-myFeedAuthorName = "My Name"
+myFeedAuthorName = "Youwen Wu"
 
 myFeedAuthorEmail :: String
-myFeedAuthorEmail = "me@myemail.com"
+myFeedAuthorEmail = "youwenw@gmail.com"
 
 myFeedRoot :: String
 myFeedRoot = mySiteRoot
@@ -86,7 +86,7 @@ main = hakyllWith config $ do
             route idRoute
             compile copyFileCompiler
 
-  match "css/*" $ do
+    match "build/css/*" $ do
         route idRoute
         compile compressCssCompiler
 

tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["Inter", "sans-serif"],
+        serif: ["Merriweather", "serif"],
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/typography")],
+};