feat: build out title

2023-11-03 22:57:38 -04:00 · 2023-11-03 22:57:38 -04:00 · 045d8ad1b5
commit 045d8ad1b5
parent c0e6937e40
6 changed files with 57 additions and 38 deletions
--- a/problems/gruvbox-light.css
+++ b/problems/gruvbox-light.css
@ -0,0 +1,85 @@
+/* Gruvbox Material Light theme for Highlight.js */
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+.hljs {
+  background: #fbf1c7; /* Gruvbox Material Light bg */
+  color: #3c3836; /* Gruvbox Material Light fg */
+}
+
+.hljs-comment {
+  color: #928374; /* Gruvbox Material Light comment */
+}
+
+.hljs-punctuation,
+.hljs-tag {
+  color: #3c3836;
+}
+
+.hljs-tag .hljs-attr,
+.hljs-tag .hljs-name,
+.hljs-attribute,
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-name,
+.hljs-selector-tag {
+  color: #d79921; /* Gruvbox Material Light orange */
+}
+
+.hljs-deletion,
+.hljs-number,
+.hljs-quote,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-string,
+.hljs-template-tag,
+.hljs-type {
+  color: #cc241d; /* Gruvbox Material Light red */
+}
+
+.hljs-section,
+.hljs-title {
+  color: #689d6a; /* Gruvbox Material Light green */
+}
+
+.hljs-link,
+.hljs-operator,
+.hljs-regexp,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-symbol,
+.hljs-template-variable,
+.hljs-variable {
+  color: #689d6a; /* Gruvbox Material Light green */
+}
+
+.hljs-literal {
+  color: #d3869b; /* Gruvbox Material Light pink */
+}
+
+.hljs-addition,
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code {
+  color: #98971a; /* Gruvbox Material Light yellow */
+}
+
+.hljs-meta {
+  color: #689d6a; /* Gruvbox Material Light green */
+}
+
+.hljs-meta .hljs-string {
+  color: #b8bb26; /* Gruvbox Material Light green */
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
--- a/problems/rainwater.html
+++ b/problems/rainwater.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
+    <link rel="stylesheet" href="gruvbox-light.css" />
+    <link rel="stylesheet" href="../index.css" />
+    <title>Sliding Window</title>
+  </head>
+  <body>
+    <h1>Trapping the Rainwaters</h1>
+    <p>Trapping Raintwaters Leetcode Problem Description</p>
+    <p>Example: Finding the maximum sum subarray of a fixed size.</p>
+    <pre><code class="trapping-rainwater"></code></pre>
+    <h2>Problem Statement</h2>
+    <!-- TODO: embed latex -->
+    <h2>Constraints</h2>
+    <h2>Topic Relevance</h2>
+    <p>
+      The sliding window algorithm is widely used in software development for
+      solving optimization problems, especially when dealing with arrays or
+      lists. It's useful in scenarios where you need to track a subset of data
+      within a larger dataset efficiently, making it a crucial tool in fields
+      like data analysis, machine learning, and others.
+    </p>
+    <script>
+      const code = document.querySelector(".trapping-rainwater");
+      code.textContent = `int trap(vector<int>& height) {
+    auto l = height.begin(), r = height.end() - 1;
+    int level = 0, water = 0;
+    while (l != r + 1) {
+        int lower = *l < *r ? *l++ : *r--;
+        level = max(level, lower);
+        water += level - lower;
+    }
+    return water;
+}`;
+      hljs.highlightAll();
+    </script>
+  </body>
+</html>