deploy: 8249fcb41e

examples/index.css

@@ -0,0 +1,180 @@
+@import url(https://fonts.googleapis.com/css?family=Khula:700);
+
+html {
+  --toc-width: 250px;
+}
+
+body {
+  background-color: #EEE;
+  padding: 0px;
+  margin: 0px;
+  font-family: Khula, Helvetica, sans-serif;
+  font-size: 130%;
+}
+
+.page {
+  max-width: 1300px;
+  margin: auto;
+  padding: 10px;
+}
+
+a {
+  box-shadow: inset 0 0 0 0 #54b3d6;
+  color: #0087b9;
+  margin: 0 -.25rem;
+  padding: 0 .25rem;
+  transition: color .3s ease-in-out,
+    box-shadow .3s ease-in-out;
+}
+
+a:hover {
+  box-shadow: inset 120px 0 0 0 #54b3d6;
+  color: white;
+}
+
+h1 {
+  text-decoration: underline;
+  width: 100%;
+  background-color: rgba(100, 100, 255, 0.5);
+  padding: 10px;
+  margin: 0;
+}
+
+
+#selectExample {
+  flex: 1;
+}
+
+#selectExample,
+#selectExample option {
+  font-size: 16px;
+  font-family: sans-serif;
+  font-weight: 700;
+  line-height: 1.3;
+  border: 0px;
+  background-color: #bbb;
+  color: black;
+}
+
+#selectExample:focus {
+  outline: none;
+}
+
+#terminal {
+  width: 100%;
+  height 500px;
+  height: calc(clamp(200px, 100vh - 300px, 900px));
+  overflow: hidden;
+  border: none;
+  padding: 10px;
+  margin: 10px;
+}
+
+#terminalContainer {
+  overflow: hidden;
+  border-radius: 10px;
+  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.75),
+    0px 2px 80px 0px rgba(0, 0, 0, 0.50);
+  background-color: black;
+}
+
+.fakeButtons {
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  border: 1px solid #000;
+  margin: 6px;
+  background-color: #ff3b47;
+  border-color: #9d252b;
+  display: inline-block;
+}
+
+.fakeMinimize {
+  left: 11px;
+  background-color: #ffc100;
+  border-color: #9d802c;
+}
+
+.fakeZoom {
+  left: 16px;
+  background-color: #00d742;
+  border-color: #049931;
+}
+
+.fakeMenu {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  box-sizing: border-box;
+  height: 25px;
+  background-color: #bbb;
+  color: black;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.toc-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--toc-width);
+  background: white;
+  padding: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+}
+
+.toc-title {
+  font-weight: bold;
+  margin-bottom: 5px;
+  font-size: 0.9em;
+  color: #555;
+
+  position: sticky;
+  transition: position 1.0s ease-in-out;
+  top: 0;
+  z-index: 1;
+  padding: 20px;
+  margin: 0;
+
+  border-bottom: 1px solid #ddd;
+
+  /* Gradient background for the title */
+  background-color: #f0f0f0;
+}
+
+.toc-item {
+  padding: 3px 8px;
+  margin: 0;
+  cursor: pointer;
+  font-size: 0.85em;
+  border-radius: 3px;
+  transition: background 0.2s;
+}
+
+.toc-item:hover {
+  background: #f0f0f0;
+}
+
+.toc-item.selected {
+  background: #e0e0e0;
+  font-weight: bold;
+}
+
+@media (max-width: 1024px) {
+  .toc-container {
+    display: none;
+  }
+
+  .page {
+    margin-left: 0;
+  }
+}
+
+@media (min-width: 1025px) {
+  .page {
+    margin-left: calc(var(--toc-width) + 20px);
+  }
+}