Add scrollbars and new svgs for pico

kareszklub · Aug 6, 2024 · aa2357f · aa2357f
1 parent c074417
commit aa2357f
Show file tree

Hide file tree

Showing 8 changed files with 35,997 additions and 7 deletions.
diff --git a/lessons/01.html b/lessons/01.html
@@ -14,6 +14,8 @@
 	<!-- For syntax highlighting -->
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
 	<!-- <link rel="stylesheet" href="reveal.js/plugin/highlight/monokai.css"> -->
+
+	<link rel="stylesheet" href="res/scrollbar.css">
 </head>
 
 <body>
@@ -266,13 +268,13 @@ <h2 data-id="title">Buzzer</h2>
 
 			<!-- Buzzer #3 -->
 			<section data-auto-animate data-auto-animate-id="buzzer">
-				<h2 data-id="title">Buzzer</h2>
+				<h2 data-id="title">PWM</h2>
 				<img src="res/01/sine.svg" alt="sine">
 			</section>
 
 			<!-- Buzzer #4 -->
 			<section data-auto-animate data-auto-animate-id="buzzer">
-				<h2 data-id="title">Buzzer</h2>
+				<h2 data-id="title">PWM</h2>
 				<img src="res/01/sine.svg" alt="sine">
 				<img src="res/01/square.svg" alt="square">
 			</section>

diff --git a/lessons/02.html b/lessons/02.html
@@ -14,6 +14,8 @@
 	<!-- For syntax highlighting -->
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
 	<!-- <link rel="stylesheet" href="reveal.js/plugin/highlight/monokai.css"> -->
+
+	<link rel="stylesheet" href="res/scrollbar.css">
 </head>
 
 <body>

diff --git a/lessons/03.html b/lessons/03.html
@@ -14,6 +14,8 @@
     <!-- For syntax highlighting -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
     <!-- <link rel="stylesheet" href="reveal.js/plugin/highlight/monokai.css"> -->
+
+    <link rel="stylesheet" href="res/scrollbar.css">
 </head>
 
 <body>
@@ -62,7 +64,7 @@ <h2>I²C</h2>
             <section data-auto-animate data-auto-animate-id="i2c">
                 <h2>I²C</h2>
                 <pre data-id="code"><code data-trim data-noescape class="hljs python"
-                    data-line-numbers="5-6|8-11|13-14|16-21|23-31|33-40|55-57|59-60|42-43|62-63|45-46|48-53|65-67">
+                    data-line-numbers="5-6|8-11|13-14|16-21|23-31|33-40|57-60|62-63|42-44|65-66|50-55|46-48|68-70">
 from machine import I2C, Pin
 from time import sleep_ms
 import struct
@@ -105,10 +107,12 @@ <h2>I²C</h2>
             self.set_gain(gain)
 
     def _write8(self, reg: int, value: int):
-        self._i2c.writeto_mem(self._addr, CMD_BIT | reg, (value & 0xFF).to_bytes(1, 'little'))
+        self._i2c.writeto_mem(self._addr, CMD_BIT | reg,
+                (value & 0xFF).to_bytes(1, 'little'))
 
     def _read8(self, reg: int) -> int:
-        return struct.unpack('&lt;B', self._i2c.readfrom_mem(self._addr, CMD_BIT | reg, 1))[0]
+        return struct.unpack('&lt;B', self._i2c.readfrom_mem(
+            self._addr, CMD_BIT | reg, 1))[0]
 
     def _write_bits(self, reg: int, value: int, mask: int):
         old = self._read8(reg)
@@ -118,7 +122,8 @@ <h2>I²C</h2>
         self._write8(reg, new)
 
     def get_data(self) -> tuple[int, int, int, int]:
-        color_bytes = self._i2c.readfrom_mem(self._addr, CMD_BIT | REG_CDATAL, 4 * 2)
+        color_bytes = self._i2c.readfrom_mem(self._addr,
+                            CMD_BIT | REG_CDATAL, 4 * 2)
         return struct.unpack('&lt;HHHH', color_bytes)
 
     def set_integration_time(self, it: int):
@@ -132,7 +137,7 @@ <h2>I²C</h2>
             self._led_pin.value(state)                    
                 </code></pre>
             </section>
-            2
+
             <!-- <end> -->
             <section>
                 <h2 style="font-family: monospace;">&lt;\&gt;</h2>

diff --git a/lessons/res/01/ca.png b/lessons/res/01/ca.png
diff --git a/lessons/res/scrollbar.css b/lessons/res/scrollbar.css
@@ -0,0 +1,26 @@
+:root {
+    --sb-track-color: #232E33;
+    --sb-thumb-color: #6BAF8D;
+    --sb-size: 14px;
+}
+
+body::-webkit-scrollbar {
+    width: var(--sb-size)
+}
+
+body::-webkit-scrollbar-track {
+    background: var(--sb-track-color);
+    border-radius: 3px;
+}
+
+body::-webkit-scrollbar-thumb {
+    background: var(--sb-thumb-color);
+    border-radius: 3px;
+
+}
+
+@supports selector(::-webkit-scrollbar) {
+    body {
+        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
+    }
+}