feat: article demo

This commit is contained in:
Barrett Ruth 2023-11-03 19:57:01 -04:00
parent 5e43af637e
commit c0e6937e40
5 changed files with 108 additions and 16 deletions

85
gruvbox-light.css Normal file
View file

@ -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;
}

View file

@ -8,7 +8,7 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="index.css" />
<title>Barrett Ruth</title>
</head>

3
problems.css Normal file
View file

@ -0,0 +1,3 @@
pre code.hljs {
background: #f9f5d7;
}

View file

@ -4,25 +4,27 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="gruvbox-light.css" />
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="problems.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<title>Problems - 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 class="sliding-window-algorithm">
</pre>
<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></code></pre>
<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.
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>
</body>
<script>
document.querySelector('.sliding-window-algorithm').innerText =
String.raw`
<script>
document.querySelector("code").textContent = `
int trap(vector<int>& height) {
auto l = height.begin(), r = height.end() - 1;
int level = 0, water = 0;
@ -33,6 +35,8 @@ int trap(vector<int>& height) {
}
return water;
}
`
</script>
`;
hljs.highlightAll();
</script>
</body>
</html>