Merge pull request #37 from Semantic-Org/learn

Learn

Author: jlukic

docs/package-lock.json

@@ -25,6 +25,7 @@
     "playground-elements": "^0.18.1",
     "pretty": "^2.0.0",
     "pretty-json-custom-element": "^1.1.13",
+    "semver": "^7.6.3",
     "shiki": "^1.11.1"
   }
 }

docs/package.json

@@ -1,21 +1,21 @@
-.playground {
-
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
+:host {
 
   --playground-header-background: linear-gradient(rgba(255, 255, 255, 0.02), rgb(15 17 22 / 50%));
   --playground-header-border: 1px solid rgba(221, 221, 221, 0.05);
   --playground-header-color: rgba(255, 255, 255, 0.4);
   --playground-header-box-shadow: 0px -2px 5px -3px rgba(0, 0, 0, 0.4) inset;
 
-  --playground-code-background: #080C10;
+  --playground-tab-bar-background: #ffffff;
+
+  --inline-code-height: 350px;
+  --playground-bar-height: 32px;
 
   --code-purple: #D2A8FF;
   --code-grey: #656565;
   --code-default: #c9d1d9;
   --code-blue: var(--primary-text-color);
 
+  --playground-code-background: #080C10;
   --playground-code-comment-color: #444444;
   --playground-code-linenumber-color: #25272B;
   --playground-code-font-size: 14px;
@@ -39,11 +39,13 @@
   --playground-code-attribute-color: var(--code-blue);
   --playground-code-callee-color: var(--code-purple);
 
-  --playground-tab-bar-background: #ffffff;
-  --playground-bar-height: 32px;
+}
 
+.playground {
 
-  --inline-code-height: 350px;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
 
   ::-webkit-scrollbar {
     -webkit-appearance: none;
@@ -218,6 +220,27 @@
 
   }
 
+  header {
+    display: block;
+    box-shadow: none;
+    min-height: 0px;
+    border-bottom: var(--subtle-border);
+    padding: 8px 16px 8px;
+    height: auto;
+    color: var(--standard-50);
+    font-size: var(--small);
+    background: var(--playground-header-background);
+    border-bottom: var(--playground-header-border);
+    box-shadow: var(--playground-header-box-shadow);
+
+    a {
+      color: var(--link-color);
+    }
+    a:hover {
+      color: var(--link-hover-color);
+    }
+  }
+
   .tabs {
 
     .menu {
@@ -231,7 +254,6 @@
       padding: 0.5rem 1rem;
     }
 
-    header,
     &:not(.inline) .menu {
       min-height: 27px;
       background: var(--playground-header-background);
@@ -240,23 +262,6 @@
       transition: background-color 0.1s ease, color 0.1s ease-in-out;
     }
 
-    header {
-      display: block;
-      box-shadow: none;
-      border-bottom: var(--subtle-border);
-      padding: 8px 16px 0px;
-      height: auto;
-      color: var(--standard-50);
-      font-size: var(--small);
-
-      a {
-        color: var(--link-color);
-      }
-      a:hover {
-        color: var(--link-hover-color);
-      }
-    }
-
     .menu ui-menu {
       margin: 0rem;
       font-size: 13px;

docs/src/components/CodePlayground/CodePlayground.css

@@ -1,9 +1,9 @@
 <div class="playground {classMap getClassMap}" part="playground">
-  {#if example.title}
+  {#if title}
     <div class="masthead" part="masthead">
       {#if canShowButtons}
         <ui-button right-floated transparent small compact inverted class="tabs">
-          {#if shouldUseTabs}
+          {#if is layout 'tabs'}
             Use Panels
           {else}
             Use Tabs
@@ -14,8 +14,8 @@
           Fork
         </ui-button>
       {/if}
-      <h3 class="title" part="title">{example.title}</h3>
-      <p part="description">{example.description}</p>
+      <h3 class="title" part="title">{title}</h3>
+      <p part="description">{description}</p>
     </div>
   {/if}
   {#if exists files}
@@ -25,7 +25,7 @@ <h3 class="title" part="title">{example.title}</h3>
       {/each}
     </playground-project>
   {/if}
-  {#if either shouldUseTabs inline}
+  {#if is layout 'tabs'}
     <ui-panels
       class={classMap getTabPanelsClass}
       direction="{getTabDirection}"