Add css override for Framework forums; run format

3 files changed, 343 insertions, 16 deletions

diff --git a/src/config.ts b/src/config.ts
index 838a689..3746503 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -16,23 +16,36 @@ export default function (config: any) {
   });
 
   // images
-	config.addShortcode("image", async (src: string, alt: string, sizes: string, width: number, height: number | undefined) => {
-		let metadata = await Image(src, {
-			widths: [width, 550, "auto"],
-			formats: ["webp", "png"],
-      urlPath: "/images/",
-      outputDir: "./public/images/",
-		});
-
-		let url = metadata.png?.[0].url ?? "";
-
-		return `<picture>
-${Object.values(metadata).map(imageFormat => {
-	return `  <source type="${imageFormat[0].sourceType}" srcset="${imageFormat.map(entry => entry.srcset).join(", ")}" sizes="${sizes}">`;
-}).join("\n")}
+  config.addShortcode(
+    "image",
+    async (
+      src: string,
+      alt: string,
+      sizes: string,
+      width: number,
+      height: number | undefined,
+    ) => {
+      let metadata = await Image(src, {
+        widths: [width, 550, "auto"],
+        formats: ["webp", "png"],
+        urlPath: "/images/",
+        outputDir: "./public/images/",
+      });
+
+      let url = metadata.png?.[0].url ?? "";
+
+      return `<picture>
+${Object.values(metadata)
+  .map((imageFormat) => {
+    return `  <source type="${imageFormat[0].sourceType}" srcset="${imageFormat
+      .map((entry) => entry.srcset)
+      .join(", ")}" sizes="${sizes}">`;
+  })
+  .join("\n")}
   <img src="${url}" width="${width}" height="${height ?? width}" alt="${alt}">
 </picture>`;
-	});
+    },
+  );
 
   // add `date` filter
   config.addFilter("formatDate", formatDate);
diff --git a/src/static/community.frame.work.css b/src/static/community.frame.work.css
new file mode 100644
index 0000000..44b5a63
--- /dev/null
+++ b/src/static/community.frame.work.css
@@ -0,0 +1,308 @@
+tr.topic-list-item.visited > td.main-link > span.link-top-line > a {
+  color: #aaa;
+}
+
+@media (prefers-color-scheme: dark) {
+  .topic-list .main-link a.title {
+    color: var(--primary) !important;
+  }
+
+  .nav-pills > li a.active {
+    color: var(--primary) !important;
+  }
+
+  :root {
+    --scheme-type: dark;
+    --primary: #f5f5f5;
+    --secondary: #101011;
+    --tertiary: #f45a27;
+    --quaternary: #f45a27;
+    --header_background: #f45a27;
+    --header_primary: #f5f5f5;
+    --highlight: #ffcc15;
+    --danger: #ff2b24;
+    --success: #00ff8f;
+    --love: #ff7360;
+    --always-black-rgb: 0, 0, 0;
+    --primary-rgb: 245, 245, 245;
+    --primary-low-rgb: 53.9, 53.9, 53.9;
+    --primary-very-low-rgb: 44.1, 44.1, 44.1;
+    --secondary-rgb: 16, 16, 17;
+    --header_background-rgb: 244, 90, 39;
+    --tertiary-rgb: 244, 90, 39;
+    --primary-very-low: #2c2c2c;
+    --primary-low: #363636;
+    --primary-low-mid: #878787;
+    --primary-medium: #9f9f9f;
+    --primary-high: #b8b8b8;
+    --primary-very-high: #ddd;
+    --primary-50: #2c2c2c;
+    --primary-100: #313131;
+    --primary-200: #363636;
+    --primary-300: #626262;
+    --primary-400: #878787;
+    --primary-500: #939393;
+    --primary-600: #9f9f9f;
+    --primary-700: #acacac;
+    --primary-800: #b8b8b8;
+    --primary-900: #ddd;
+    --header_primary-low: #f47356;
+    --header_primary-low-mid: #f4a294;
+    --header_primary-medium: #f5bfb8;
+    --header_primary-high: #f5d3ce;
+    --header_primary-very-high: #f5eae9;
+    --secondary-low: #b5b5ba;
+    --secondary-medium: #84848b;
+    --secondary-high: #55555b;
+    --secondary-very-high: #202022;
+    --tertiary-very-low: #431303;
+    --tertiary-low: #5e1b05;
+    --tertiary-medium: #942b08;
+    --tertiary-high: #ca3a0a;
+    --tertiary-hover: #f67b52;
+    --tertiary-50: #431303;
+    --tertiary-100: #4b1604;
+    --tertiary-200: #531804;
+    --tertiary-300: #5e1b05;
+    --tertiary-400: #712006;
+    --tertiary-500: #812507;
+    --tertiary-600: #942b08;
+    --tertiary-700: #a73009;
+    --tertiary-800: #ba3509;
+    --tertiary-900: #ca3a0a;
+    --quaternary-low: #511704;
+    --highlight-low: #372b00;
+    --highlight-medium: #7c6100;
+    --highlight-high: #f8c200;
+    --danger-low: #690300;
+    --danger-low-mid: rgba(116, 4, 0, 0.7);
+    --danger-medium: #bd0600;
+    --danger-hover: #e90700;
+    --success-low: #006639;
+    --success-medium: #009956;
+    --success-hover: #00cc72;
+    --love-low: #8c1100;
+    --wiki: green;
+    --blend-primary-secondary-5: #393939;
+    --primary-med-or-secondary-med: #84848b;
+    --primary-med-or-secondary-high: #55555b;
+    --primary-high-or-secondary-low: #b5b5ba;
+    --primary-low-mid-or-secondary-high: #55555b;
+    --primary-low-mid-or-secondary-low: #b5b5ba;
+    --primary-or-primary-low-mid: #878787;
+    --highlight-low-or-medium: #7c6100;
+    --tertiary-or-tertiary-low: #5e1b05;
+    --tertiary-low-or-tertiary-high: #ca3a0a;
+    --tertiary-med-or-tertiary: #f45a27;
+    --secondary-or-primary: #f5f5f5;
+    --tertiary-or-white: #fff;
+    --facebook-or-white: #fff;
+    --twitter-or-white: #fff;
+    --hljs-comment: #bba;
+    --hljs-number: #aff;
+    --hljs-string: #f99;
+    --hljs-literal: #9ae;
+    --hljs-tag: #99f;
+    --hljs-attribute: #0ee;
+    --hljs-symbol: #fbe;
+    --hljs-bg: #333;
+    --hljs-builtin-name: #f67b52;
+    --google: #fff;
+    --google-hover: #f2f2f2;
+    --instagram: #e1306c;
+    --instagram-hover: #ac194b;
+    --facebook: #1877f2;
+    --facebook-hover: #0a54b3;
+    --cas: #70ba61;
+    --twitter: #1da1f2;
+    --twitter-hover: #0c85d0;
+    --github: #100e0f;
+    --github-hover: #463e42;
+    --discord: #7289da;
+    --discord-hover: #4a67cf;
+    --gold: #e7c300;
+    --silver: silver;
+    --bronze: #cd7f32;
+  }
+
+  :root {
+    --chat-skeleton-animation-rgb: 44.1, 44.1, 44.1;
+  }
+
+  :root {
+    --font-family: Arial, sans-serif;
+  }
+
+  :root {
+    --heading-font-family: Arial, sans-serif;
+  }
+
+  html {
+    font-size: 16px;
+
+    &.text-size-smaller {
+      font-size: 14px;
+    }
+    &.text-size-larger {
+      font-size: 18px;
+    }
+    &.text-size-largest {
+      font-size: 20px;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  .wrap {
+    max-width: 1360px;
+  }
+
+  .d-header {
+    height: 5em;
+    box-shadow: none;
+  }
+
+  .custom-header-links .headerLink a {
+    font-size: 16px !important;
+    color: white !important;
+  }
+
+  .nav-pills > li {
+    margin-right: 0.5em;
+  }
+
+  .nav-pills > li > a {
+    font-size: 16px;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .nav-pills > li a.active {
+    color: #f5f5f5;
+    background-color: transparent;
+    border-bottom: 3px solid #f45a27;
+  }
+
+  .list-controls .combo-box .combo-box-header {
+    background: transparent;
+    border-radius: 2rem;
+  }
+
+  .btn {
+    font-size: 16px;
+    border-radius: 2rem;
+
+    .d-icon {
+      color: #f5f5f5;
+    }
+  }
+
+  .btn-primary,
+  #create-topic {
+    background: #f45a27;
+    color: #f5f5f5;
+    font-size: 16px;
+
+    &:hover {
+      background-color: darkorange;
+      color: black !important;
+
+      .d-icon {
+        color: black !important;
+      }
+    }
+  }
+
+  .latest-topic-list-item .main-link a.title {
+    color: white !important;
+  }
+
+  .topic-list .main-link a.title {
+    color: white !important;
+  }
+
+  .category-list .category-name {
+    margin-bottom: 0.5rem;
+  }
+
+  .category-logo.aspect-image img {
+    max-width: 80%;
+  }
+
+  .category-logo.aspect-image {
+    margin-right: 0;
+  }
+
+  .category-list .category {
+    border-color: transparent !important;
+  }
+
+  .d-header .title a,
+  .d-header .title a:visited,
+  .list-cell,
+  .table-heading,
+  .category-list td,
+  .category-list th,
+  .category-list .featured-topic a.last-posted-at,
+  .category-list .featured-topic a.last-posted-at:visited {
+    color: var(--primary-high-or-secondary-low);
+  }
+
+  .d-header {
+    border: none;
+  }
+
+  .custom-footer {
+    background: var(--primary-very-low);
+  }
+
+  .custom-footer .flexbox,
+  .custom-footer .third-box .social .social-link .d-icon {
+    color: white;
+  }
+
+  .custom-footer .footer-section-link-wrapper a,
+  .custom-footer .third-box .small-link {
+    color: var(--tertiary);
+  }
+
+  .d-header-icons .d-icon {
+    color: var(--blend-primary-secondary-5);
+  }
+
+  .categories-list .category-list td {
+    color: white;
+  }
+
+  .category-list-item.category .coldmap-high {
+    opacity: 0.8;
+  }
+  .d-header .title a,
+  .d-header .title a:visited,
+  .list-cell,
+  .table-heading,
+  .category-list td,
+  .category-list th,
+  .category-list .featured-topic a.last-posted-at,
+  .category-list .featured-topic a.last-posted-at:visited,
+  .extra-info-wrapper .topic-link {
+    color: var(--blend-primary-secondary-5) !important;
+  }
+
+  tr.topic-list-item.visited > td.main-link > span.link-top-line > a {
+    color: #aaa;
+  }
+}
diff --git a/src/util/timestamp.ts b/src/util/timestamp.ts
index 39683cc..f8aaa38 100644
--- a/src/util/timestamp.ts
+++ b/src/util/timestamp.ts
@@ -68,5 +68,11 @@ export function getTimestamp(seconds: number): string {
  * Returns a date in the ISO-8601 format
  */
 export function formatDate(date: Date): string {
-  return date.getUTCFullYear() + "-" + (date.getUTCMonth() + 1) + "-" + date.getUTCDate();
+  return (
+    date.getUTCFullYear() +
+    "-" +
+    (date.getUTCMonth() + 1) +
+    "-" +
+    date.getUTCDate()
+  );
 }