Internalise theme

6 files changed, 384 insertions, 0 deletions

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
new file mode 100644
index 0000000..6181ea6
--- /dev/null
+++ b/assets/css/tailwind.css
@@ -0,0 +1,372 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  /* inter-100 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 100;
+    src: local(''),
+         url('../fonts/inter-v12-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-200 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 200;
+    src: local(''),
+         url('../fonts/inter-v12-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-300 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 300;
+    src: local(''),
+         url('../fonts/inter-v12-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-regular - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src: local(''),
+         url('../fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-500 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 500;
+    src: local(''),
+         url('../fonts/inter-v12-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-600 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 600;
+    src: local(''),
+         url('../fonts/inter-v12-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-700 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 700;
+    src: local(''),
+         url('../fonts/inter-v12-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-800 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 800;
+    src: local(''),
+         url('../fonts/inter-v12-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-900 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 900;
+    src: local(''),
+         url('../fonts/inter-v12-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  body {
+    @apply bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 text-lg text-justify;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-bold text-gray-900 dark:text-gray-300 mb-5 pt-2;
+  }
+
+  h1 {
+    @apply text-4xl leading-10;
+  }
+
+  h2 {
+    @apply text-3xl leading-10;
+  }
+
+  h3 {
+    @apply text-2xl;
+  }
+
+  h4 {
+    @apply text-xl;
+  }
+
+  h5 {
+    @apply text-lg;
+  }
+
+  h6 {
+    @apply text-base;
+  }
+
+  hr {
+    @apply border-gray-200 dark:border-gray-700;
+  }
+
+  p, hr, pre, dl {
+    @apply mb-5 text-justify;
+  }
+
+  article > h1 {
+    @apply mb-1;
+  }
+
+  code {
+    @apply bg-gray-100 dark:bg-gray-800 rounded-lg text-sm border dark:border-gray-700 px-2 py-1;
+  }
+
+  pre {
+    @apply rounded-lg border dark:border-gray-700 p-5 overflow-auto text-base;
+  }
+
+  pre code {
+    @apply bg-transparent border-0 px-0;
+  }
+
+  figure {
+    @apply mb-5;
+  }
+
+  figcaption {
+    @apply text-base text-gray-500 dark:text-gray-400 mt-2;
+  }
+
+  blockquote {
+    @apply text-xl text-gray-500 dark:text-gray-400 italic border-l-4 border-gray-300 dark:border-gray-700 pl-4 mb-5;
+  }
+
+  ul, ol {
+    @apply mb-5 ml-6;
+  }
+
+  ol {
+    @apply list-decimal;
+  }
+
+  ul {
+    @apply list-disc;
+  }
+
+  nav ul, footer ul {
+    @apply list-none ml-0;
+  }
+
+  header h1 {
+    @apply mb-0;
+  }
+
+  table {
+    @apply w-full border rounded-md border-separate border-spacing-0 mb-5;
+  }
+
+  thead th {
+    @apply border-b-2 border-r last:border-r-0 py-2 px-3;
+  }
+
+  tbody td {
+    @apply py-2 px-3 border-b text-base border-r last:border-r-0;
+  }
+
+  tbody tr:last-child td {
+    @apply border-b-0;
+  }
+
+  dt {
+    @apply font-bold italic;
+  }
+
+  dd {
+    @apply pl-10;
+  }
+
+  header nav > ul {
+    @apply flex flex-wrap justify-center uppercase text-xs font-semibold gap-7;
+  }
+
+  nav a, footer a {
+    @apply text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 font-semibold;
+  }
+
+  footer {
+    @apply text-xs;
+  }
+}
+
+@layer utilities {
+  nav a.active {
+    @apply text-gray-900 dark:text-gray-100;
+  }
+
+  /* Content overrides */
+  #content {
+    @apply leading-normal;
+  }
+
+  #content a {
+    @apply underline font-bold text-emerald-700 hover:text-emerald-600 dark:text-emerald-300 dark:hover:text-emerald-200;
+  }
+
+  #content .date {
+    @apply py-2 text-sm font-semibold text-gray-400;
+  }
+
+  #content h1 > a {
+    @apply no-underline text-xl font-bold hover:underline text-gray-900 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100;
+  }
+
+  #content .meta {
+    @apply text-sm font-semibold text-gray-500 dark:text-gray-400 flex gap-3 mt-2
+  }
+
+  #content .meta a {
+    @apply no-underline;
+  }
+
+  #content .description {
+    @apply text-gray-600 dark:text-gray-300 text-base;
+  }
+
+  #content .read-more {
+    @apply no-underline inline-flex gap-2 text-sm font-semibold items-center text-emerald-700 hover:text-emerald-600 dark:text-emerald-300 dark:hover:text-emerald-200;
+  }
+
+  #content .footnotes {
+    @apply text-sm;
+  }
+
+  #content .footnotes p {
+    @apply inline-block mb-0;
+  }
+
+  #content .footnotes ol {
+    @apply block;
+  }
+
+  #content .footnotes li {
+    @apply mb-3;
+  }
+
+  #content .alert-box {
+    @apply px-4 pt-4 pb-1 mb-5 border-t-4;
+  }
+
+  #content .alert-box .alert-title {
+    @apply text-inherit font-semibold text-lg py-0 px-0 mb-2;
+  }
+
+  #content .alert-box a {
+    @apply text-inherit hover:text-inherit;
+  }
+
+  #content .alert-box .alert-icon {
+    @apply w-7 h-7 mr-2;
+  }
+
+  #content .alert-box.warning {
+    @apply bg-yellow-100 border-yellow-500 text-yellow-900;
+  }
+
+  #content .alert-box.info {
+    @apply bg-blue-100 border-blue-500 text-blue-900;
+  }
+
+  #content .alert-box.success {
+    @apply bg-green-100 border-green-500 text-green-900;
+  }
+
+  #content .alert-box.error {
+    @apply bg-red-100 border-red-500 text-red-900;
+  }
+
+  #content .table-of-contents {
+    @apply bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 p-4 border dark:border-gray-700 rounded-lg;
+  }
+
+  #content .table-of-contents #TableOfContents ul {
+    @apply list-decimal list-inside ml-4;
+  }
+
+  #content .table-of-contents #TableOfContents ul li {
+    @apply my-2 text-base;
+  }
+
+  #content .table-of-contents #TableOfContents ul li a {
+    @apply font-normal no-underline text-gray-700 dark:text-gray-300 hover:underline hover:text-emerald-600 dark:hover:text-emerald-200;
+  }
+
+  #content .pagination-button {
+    @apply no-underline inline-flex items-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-700 text-sm rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100;
+  }
+
+  #content .taxonomy-list {
+    @apply flex flex-row flex-wrap gap-x-2 gap-y-6 list-none ml-0;
+  }
+
+  #content .taxonomy-list a {
+    @apply font-normal no-underline text-base text-gray-800 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 py-2 px-3 rounded-lg;
+  }
+
+  #content .tags-list {
+    @apply gap-y-2;
+  }
+
+  #content span.task-list + ul {
+    @apply list-none;
+  }
+
+  /* Misc */
+  #site-title {
+    @apply text-center sm:text-left text-4xl font-extrabold text-gray-800 dark:text-gray-100;
+  }
+
+  .header {
+    @apply flex flex-row items-center justify-between;
+  }
+
+  .header .toggle-theme {
+    @apply w-6 h-6;
+  }
+
+  .title-large {
+    @apply text-4xl leading-snug font-bold text-gray-900 dark:text-gray-300;
+  }
+
+  .title-small {
+    @apply text-2xl font-extrabold text-gray-900 dark:text-gray-300;
+  }
+}
diff --git a/assets/icons/arrow-left.svg b/assets/icons/arrow-left.svg
new file mode 100644
index 0000000..7c88198
--- /dev/null
+++ b/assets/icons/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+</svg>
diff --git a/assets/icons/arrow-right.svg b/assets/icons/arrow-right.svg
new file mode 100644
index 0000000..1894958
--- /dev/null
+++ b/assets/icons/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+</svg>
diff --git a/assets/icons/favicon.ico b/assets/icons/favicon.ico
new file mode 100644
index 0000000..2f2d0ee
--- /dev/null
+++ b/assets/icons/favicon.ico
diff --git a/assets/icons/moon.svg b/assets/icons/moon.svg
new file mode 100644
index 0000000..4c7aa89
--- /dev/null
+++ b/assets/icons/moon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+</svg>
\ No newline at end of file
diff --git a/assets/icons/sun.svg b/assets/icons/sun.svg
new file mode 100644
index 0000000..52b1257
--- /dev/null
+++ b/assets/icons/sun.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+</svg>
\ No newline at end of file