Add note to playground & update styles

Author: slowcheetah

website/src/playground.html

@@ -18,6 +18,12 @@
         <button class="run-button">Run</button>
         <button class="link-button">Link</button>
     </div>
+    <div class="playground-notes">
+        <span class="icon icon-md">
+            <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>
+        </span>
+        <span>Use <code>console.log()</code> or <code>// =></code> for output</span>
+    </div>
 </div>
 
 <div class="sandbox-wrapper">

website/src/scss/includes/base.scss

@@ -162,6 +162,11 @@ table {
   line-height: 0;
   width: 24px;
   height: 24px;
+
+  &.icon-md {
+    width: 1rem;
+    height: 1rem;
+  }
 }
 
 details {

website/src/scss/includes/themes.scss

@@ -11,6 +11,7 @@ $themes: (
     'font-success': dark.$green,
     'font-warning': dark.$orange,
     'font-error': dark.$red,
+    'font-note': rgba(dark.$foreground, 0.7),
 
     'button-color': dark.$bg,
     'button-color-hover': dark.$selection,
@@ -45,6 +46,7 @@ $themes: (
     'font-success': light.$green,
     'font-warning': light.$orange,
     'font-error': light.$red,
+    'font-note': rgba(light.$foreground, 0.7),
 
     'button-color': light.$foreground,
     'button-color-hover': light.$selection,

website/src/scss/parts/main.scss

@@ -83,7 +83,7 @@ main {
         top: 1rem;
         align-self: flex-start;
 
-        padding: 0 0.5rem 1rem 0;
+        padding: 0 0.5rem 150px 0;
 
         font-size: 0.875rem;
         flex-basis: 20%;
@@ -93,10 +93,15 @@ main {
 
         min-height: 100vh;
         min-height: 100dvh;
+        max-height: 100vh;
+        max-height: 100dvh;
         overflow-y: auto;
-        scrollbar-width: none;
+        overflow-x: hidden;
+        scrollbar-width: thin;
+
         @include themify($themes) {
           border-right: 1px solid themed('border-color-lighter');
+          scrollbar-color: themed('background-light') themed('background-highlight');
         }
 
         ul {

website/src/scss/parts/playground.scss

@@ -210,6 +210,11 @@
 
   .playground-controls {
     display: flex;
+    margin-bottom: 1rem;
+
+    @include media("min", "md") {
+      margin-bottom: unset;
+    }
 
     button {
       margin-right: 1rem;
@@ -219,6 +224,28 @@
       }
     }
   }
+
+  .playground-notes {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    padding: 0 0.25rem;
+
+    @include themify($themes) {
+      color: themed('font-note');
+    }
+
+    @include media("min", "md") {
+      margin-left: auto;
+    }
+
+    svg {
+      @include themify($themes) {
+        fill: themed('font-note');
+      }
+    }
+  }
 }
 
 .copy-fallback {