refacto: full rewrite of theme with catppuccin guidelines + colors

sass/_base.scss

@@ -0,0 +1,215 @@
+@use 'fonts';
+@use 'theme';
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: fonts.$text-font;
+  scroll-behavior: smooth;
+}
+
+body {
+  color: var(--text);
+  background-color: var(--base);
+  font-size: 1rem;
+  font-weight: light;
+  line-height: 1.75;
+}
+
+main {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+article {
+  max-width: min(50rem, 90%);
+}
+
+section {
+  &.title {
+    border-bottom-width: 1px;
+    border-bottom-color: var(--surface0);
+    border-bottom-style: solid;
+  }
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  &.title {
+    font-size: 2.5rem;
+    font-weight: bolder;
+    margin-bottom: 0;
+    color: var(--maroon);
+  }
+}
+
+h2 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  font-weight: bold;
+}
+
+h3 {
+  font-size: 1.2rem;
+  margin-bottom: .6rem;
+  font-weight: bold;
+}
+
+h4 {
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+h5 {
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+h6 {
+  font-size: .9rem;
+  font-weight: bold;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+p {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+  &.subtitle {
+    color: var(--subtext0);
+    margin-top: 0;
+    margin-bottom: 3rem;
+  }
+}
+
+a {
+  color: var(--blue);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--blue), transparent 40%);
+  text-decoration-thickness: 0.01rem;
+  text-underline-offset: 0.3rem;
+  &:hover {
+    color: var(--sky);
+  }
+  &:visited {
+    color: var(--lavender);
+  }
+}
+
+li {
+  &::marker {
+    color: var(--overlay1);
+  }
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  border-radius: var(--standard-border-radius);
+}
+
+pre {
+  padding: 1.25rem;
+  border-radius: var(--standard-border-radius);
+  border-style: solid;
+  border-color: var(--surface0);
+  border-width: 0.15rem;
+  & > code {
+    background-color: initial;
+    border: initial;
+  }
+}
+
+code {
+  background-color: var(--mantle);
+  padding: .2rem;
+  border-radius: .3rem;
+  border-style: dashed;
+  border-width: .1rem;
+  border-color: var(--surface0);
+}
+
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+td,
+th {
+  padding: 0.5rem;
+  padding: 1rem 1.5rem;
+  border-style: solid;
+  border-width: .1rem;
+  border-color: var(--surface0);
+  text-align: start;
+}
+
+th {
+  background-color: var(--base);
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: small;
+  border: none
+}
+
+tr:first-child > td:first-child {
+  border-top-left-radius: var(--standard-border-radius);
+}
+
+tr:first-child > td:last-child {
+  border-top-right-radius: var(--standard-border-radius);
+}
+
+tr:last-child > td:first-child {
+  border-bottom-left-radius: var(--standard-border-radius);
+}
+
+tr:last-child > td:last-child {
+  border-bottom-right-radius: var(--standard-border-radius);
+}
+
+tr > td:last-child {
+  border-right-width: .15rem;
+}
+
+tr:first-child > td {
+  border-top-width: .15rem;
+}
+
+tr > td:first-child {
+  border-left-width: .15rem;
+}
+
+tr:last-child > td {
+  border-bottom-width: .15rem;
+}
+
+tr:nth-child(even) td {
+  /* Set every other cell slightly darker. Improves readability. */
+  background-color: var(--mantle);
+}
+
+hr {
+  color: var(--surface0);
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+  width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+}

sass/_fonts.scss

@@ -0,0 +1,3 @@
+$text-font: "Ubuntu Nerd Font", Arial, Helvetica, sans-serif;
+$title-font: "Ubuntu Nerd Font", Arial, Helvetica, sans-serif;
+$mono-font: "UbuntuMono Nerd Font", monospace;

sass/_theme.scss

@@ -0,0 +1,66 @@
+@use 'colors/catppuccin-macchiato' as dark;
+@use 'colors/catppuccin-latte' as light;
+
+:root {
+  --pink: #{light.$pink};
+  --mauve: #{light.$mauve};
+  --red: #{light.$red};
+  --maroon: #{light.$maroon};
+  --peach: #{light.$peach};
+  --yellow: #{light.$yellow};
+  --green: #{light.$green};
+  --teal: #{light.$teal};
+  --sky: #{light.$sky};
+  --sapphire: #{light.$sapphire};
+  --blue: #{light.$blue};
+  --lavender: #{light.$lavender};
+  --text: #{light.$text};
+  --subtext1: #{light.$subtext1};
+  --subtext0: #{light.$subtext0};
+  --overlay2: #{light.$overlay2};
+  --overlay1: #{light.$overlay1};
+  --overlay0: #{light.$overlay0};
+  --surface2: #{light.$surface2};
+  --surface1: #{light.$surface1};
+  --surface0: #{light.$surface0};
+  --base: #{light.$base};
+  --mantle: #{light.$mantle};
+  --crust: #{light.$crust};
+
+  --standard-border-radius: .8rem
+}
+  
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --pink: #{dark.$pink};
+    --mauve: #{dark.$mauve};
+    --red: #{dark.$red};
+    --maroon: #{dark.$maroon};
+    --peach: #{dark.$peach};
+    --yellow: #{dark.$yellow};
+    --green: #{dark.$green};
+    --teal: #{dark.$teal};
+    --sky: #{dark.$sky};
+    --sapphire: #{dark.$sapphire};
+    --blue: #{dark.$blue};
+    --lavender: #{dark.$lavender};
+    --text: #{dark.$text};
+    --subtext1: #{dark.$subtext1};
+    --subtext0: #{dark.$subtext0};
+    --overlay2: #{dark.$overlay2};
+    --overlay1: #{dark.$overlay1};
+    --overlay0: #{dark.$overlay0};
+    --surface2: #{dark.$surface2};
+    --surface1: #{dark.$surface1};
+    --surface0: #{dark.$surface0};
+    --base: #{dark.$base};
+    --mantle: #{dark.$mantle};
+    --crust: #{dark.$crust};
+}
+
+  img,
+  video {
+    opacity: 0.8;
+  }
+}

sass/colors/_catppuccin-frappe.scss

@@ -0,0 +1,24 @@
+$pink: #f4b8e4;
+$mauve: #ca9ee6;
+$red: #e78284;
+$maroon: #ea999c;
+$peach: #ef9f76;
+$yellow: #e5c890;
+$green: #a6d189;
+$teal: #81c8be;
+$sky: #99d1db;
+$sapphire: #85c1dc;
+$blue: #8caaee;
+$lavender: #babbf1;
+$text: #c6d0f5;
+$subtext1: #b5bfe2;
+$subtext0: #a5adce;
+$overlay2: #949cbb;
+$overlay1: #838ba7;
+$overlay0: #737994;
+$surface2: #626880;
+$surface1: #51576d;
+$surface0: #414559;
+$base: #303446;
+$mantle: #292c3c;
+$crust: #232634;

sass/colors/_catppuccin-latte.scss

@@ -0,0 +1,24 @@
+$pink: #ea76cb;
+$mauve: #8839ef;
+$red: #d20f39;
+$maroon: #e64553;
+$peach: #fe640b;
+$yellow: #df8e1d;
+$green: #40a02b;
+$teal: #179299;
+$sky: #04a5e5;
+$sapphire: #209fb5;
+$blue: #1e66f5;
+$lavender: #7287fd;
+$text: #4c4f69;
+$subtext1: #5c5f77;
+$subtext0: #6c6f85;
+$overlay2: #7c7f93;
+$overlay1: #8c8fa1;
+$overlay0: #9ca0b0;
+$surface2: #acb0be;
+$surface1: #bcc0cc;
+$surface0: #ccd0da;
+$base: #eff1f5;
+$mantle: #e6e9ef;
+$crust: #dce0e8;

sass/colors/_catppuccin-macchiato.scss

@@ -0,0 +1,24 @@
+$pink: #f5bde6;
+$mauve: #c6a0f6;
+$red: #ed8796;
+$maroon: #ee99a0;
+$peach: #f5a97f;
+$yellow: #eed49f;
+$green: #a6da95;
+$teal: #8bd5ca;
+$sky: #91d7e3;
+$sapphire: #7dc4e4;
+$blue: #8aadf4;
+$lavender: #b7bdf8;
+$text: #cad3f5;
+$subtext1: #b8c0e0;
+$subtext0: #a5adcb;
+$overlay2: #939ab7;
+$overlay1: #8087a2;
+$overlay0: #6e738d;
+$surface2: #5b6078;
+$surface1: #494d64;
+$surface0: #363a4f;
+$base: #24273a;
+$mantle: #1e2030;
+$crust: #181926;

sass/colors/_catppuccin-mocha.scss

@@ -0,0 +1,24 @@
+$pink: #f5c2e7;
+$mauve: #cba6f7;
+$red: #f38ba8;
+$maroon: #eba0ac;
+$peach: #fab387;
+$yellow: #f9e2af;
+$green: #a6e3a1;
+$teal: #94e2d5;
+$sky: #89dceb;
+$sapphire: #74c7ec;
+$blue: #89b4fa;
+$lavender: #b4befe;
+$text: #cdd6f4;
+$subtext1: #bac2de;
+$subtext0: #a6adc8;
+$overlay2: #9399b2;
+$overlay1: #7f849c;
+$overlay0: #6c7086;
+$surface2: #585b70;
+$surface1: #45475a;
+$surface0: #313244;
+$base: #1e1e2e;
+$mantle: #181825;
+$crust: #11111b;

sass/styles.scss

@@ -0,0 +1 @@
+@use 'base';