2.17.4

learn/docs.css

@@ -534,7 +534,7 @@ header {
 	position: sticky;
 	width: 220px;
 	top: 66px;
-	padding-top: 18px;
+	padding-top: 16px;
 	padding-bottom: 200px;
 	max-height: calc(100vh - 200px);
 	overflow-y: scroll;
@@ -567,7 +567,7 @@ header {
 .section-link,
 .subsection-link {
 	display: block;
-	padding: 3px 11px;
+	padding: 5.25px 11px;
 	border-radius: 5px;
 	text-decoration: none;
 	color: var(--dimText);
@@ -581,7 +581,7 @@ header {
 	color: var(--dimText);
 	border: 1px solid transparent;
 	font-size: 18px;
-	border-radius: 5px 0px 0px 5px;
+	border-radius: 8px 0px 0px 8px;
 	margin-top: 20px !important;
 }
 
@@ -610,9 +610,12 @@ header {
 	margin-top: -10px !important;
 }
 
+.subsections-container {
+	padding-top: 6px;
+}
+
 .active-section {
-	margin-bottom: 15px !important;
-	background-color: var(--secondary);
+	background-color: var(--borderColor);
 	font-weight: bold;
 }
 
@@ -628,8 +631,8 @@ header {
 .subsection-link:hover,
 .subsection-link.active,
 .active-section:hover {
-	border-radius: 5px;
-	background-color: var(--secondary) !important;
+	border-radius: 4px 0 0 4px;
+	background-color: var(--borderColor) !important;
 	color: var(--textColor) !important;
 	border: 1px solid transparent;
 	text-decoration: none;
@@ -902,6 +905,7 @@ h4 {
 	transition: opacity 0.2s ease-in-out;
 	position: relative;
 	text-overflow: ellipsis;
+	border-radius: 0 8px 8px 0;
 }
 
 .h2-wrapper.sticky {

learn/docs.js

@@ -248,7 +248,7 @@ ${js}
 			if (!isHTMLH1) {
 				id = title.slice(title.indexOf(' ') + 1).replace(/\s+/g, '-');
 			}
-			id += '-section';
+			id += 'Section';
 			currentSectionId = id;
 			currentSubsectionId = '';
 			sections[id] = { title: title, content: line, subsections: {} };

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.17.3",
+	"version": "2.17.4",
 	"description": "A sequel to p5.js that's optimized for interactive art",
 	"author": "quinton-ashley",
 	"contributors": [

q5.d.ts

@@ -798,7 +798,7 @@ rect(20, 20, 60, 60);
 	// 💻 display
 
 	/** 💻
-	 * The `displayMode` function lets you customize how your canvas is presented.
+	 * Customize how your canvas is presented.
 	 * @param {string} mode
 	 *   - "normal": (default) no styling to canvas or its parent element
 	 *   - "centered": canvas will be centered horizontally and vertically within its parent and if the window is smaller than the canvas, the canvas will be resized to avoid clipping
@@ -1711,6 +1711,7 @@ textSize(20);
 let info = "q5.js is a JavaScript library for creative coding. It's a sequel to p5.js that's optimized for interactive art.";
 
 text(info, 12, 30, 20, 6);
+//
 //
 	 */
 	function text(str: string, x: number, y: number, wrapWidth?: number, lineLimit?: number): void;