station 0.0.114 → 0.0.121

data/lib/nexmo_developer/app/views/layouts/partials/_locale_switcher.html.erb

@@ -1,10 +1,9 @@
 <% presenter = LocaleSwitcherPresenter.new(request) %>
 <% if presenter.multiple_locales? %>
   <div class="Vlt-dropdown" id="locale-switcher">
-    <div class="Vlt-dropdown__trigger Vlt-dropdown__trigger--btn">
-      <%= button_tag type: :button, class: "Vlt-btn Vlt-btn--app Vlt-btn--white", disabled: presenter.disabled? do %>
+    <div class="Vlt-dropdown__trigger Vlt-dropdown__trigger--block Vlt-dropdown__trigger--btn">
+      <%= button_tag type: :button, class: "Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-grey", disabled: presenter.disabled? do %>
         <span class="Vlt-dropdown__selection">
-          <svg class="Vlt-dropdown__link__icon Vlt-grey-darker"><use xlink:href="<%= asset_pack_path('media/symbol/volta-icons.svg') %>#Vlt-icon-world"/></svg>
           <span class="Nxd-locale">
             <%= presenter.current_locale %>
           </span>
@@ -15,7 +14,7 @@
       <div class="Vlt-dropdown__panel">
         <div class="Vlt-dropdown__panel__content">
           <% presenter.locales.each do |locale| %>
-            <div class="Vlt-dropdown__link" data-locale="<%= locale.data %>" role="link">
+            <div class="Vlt-dropdown__link <%= locale.value == presenter.current_locale ? 'Vlt-dropdown__link--selected' : '' %>" data-locale="<%= locale.data %>" role="link">
               <span class="Vlt-dropdown__label">
                 <%= locale.value %>
               </span>

data/lib/nexmo_developer/app/views/layouts/partials/_sidenav_subitem.html.erb

@@ -14,6 +14,9 @@
     <% end %>
   <% elsif sidenav_subitem.collapsible? %>
     <li class="js--collapsible navigation-item--<%= sidenav_subitem.title.parameterize %> navigation-item">
+      <% if sidenav_subitem.label? %>
+        <%= link_to(sidenav_subitem.label, sidenav_subitem.link_url, class: "#{sidenav_subitem.css_classes}", role: 'link') %>
+      <% end %>
       <a class="Vlt-sidemenu__trigger" href="/concepts" role="link">
         <span class="Vlt-sidemenu__label"><%= sidenav_subitem.title %></span>
       </a>

data/lib/nexmo_developer/app/webpacker/javascript/components/concatenation/character_counter.js

@@ -66,16 +66,18 @@ class CharacterCounter {
     let index = 0;
     let messages = [];
     let text = this.text;
+    let split = this.getTextSize(text) > maxSize;
     while(index <= this.text.length) {
-      let sms  = this.getSMS(text, maxSize);
+      let sms  = this.getSMS(text, maxSize, split);
       messages.push(sms);
       text = text.slice(sms.length);
       index += sms.length + 1;
+      split = this.getTextSize(text) + GSM_METADATA_SIZE > maxSize;
     }
     return messages;
   }
 
-  getSMS(text, maxSize) {
+  getSMS(text, maxSize, lastSplit) {
     let index = 0, currentSize = 0;
     const maxSizeWithMeta = maxSize - GSM_METADATA_SIZE;
 
@@ -83,7 +85,7 @@ class CharacterCounter {
       currentSize += this.getCharSize(text[index]);
       index += 1;
     }
-    if (this.getTextSize(text.slice(index)) + currentSize <= maxSize && text.length - index <= GSM_METADATA_LENGTH) {
+    if (!lastSplit) {
       index = text.length;
     }
     return text.slice(0, index);

data/lib/nexmo_developer/app/webpacker/javascript/components/jwt_generator/JwtGenerator.vue

@@ -146,7 +146,7 @@ export default {
       } else if (this.applicationId) {
         message = 'Next, provide a Private Key';
       } else {
-        message = '<h4>Use your <code>private key</code> and <code>application_id</code> to create a JWT for your Nexmo Application</h4>The JWT is generated on the client-side so your private key <strong>never leaves your browser</strong>.';
+        message = '<h4>Use your <code>private key</code> and <code>application_id</code> to create a JWT for your Vonage Application</h4>The JWT is generated on the client-side so your private key <strong>never leaves your browser</strong>.';
       }
       return message;
     },

data/lib/nexmo_developer/app/webpacker/javascript/components/search/Search.vue

@@ -1,27 +1,35 @@
 <template>
-  <div>
-    <div>
-      <div class="Vlt-composite">
-        <div class="Vlt-composite__prepend Vlt-composite__prepend--icon">
-          <svg><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-search"/></svg>
-        </div>
-        <div class="Vlt-input Vlt-input--round">
-          <input
-            v-model="query"
-            name="query"
-            placeholder="Search"
-            id="searchbox-test"
-            type="text"
-            autoComplete="off"
-            v-on:keydown.esc="onEscDownHandler"
-            v-on:input="onInputHandler"
-            ></input>
+  <div class="Wrapper">
+    <div class="Wrapper-content">
+      <svg class="Vlt-icon Vlt-grey Nxd-search-icon">
+        <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-search-full" />
+      </svg>
+
+
+      <div class="Nxd-search-input">
+        <div class="Vlt-composite Vlt-composite--appendedicon">
+          <div class="Vlt-composite__prepend Vlt-composite__prepend--icon">
+            <svg><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-search"/></svg>
+          </div>
+          <div class="Vlt-input">
+            <input
+              v-model="query"
+              name="query"
+              placeholder="Search"
+              id="searchbox-test"
+              type="text"
+              autoComplete="off"
+              v-on:keydown.esc="onEscDownHandler"
+              v-on:input="onInputHandler"
+              ></input>
+          </div>
+          <div class="Vlt-composite__append Vlt-composite__append--icon Nxd-search-close">
+            <svg><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-cross-bold"/></svg>
+          </div>
         </div>
       </div>
     </div>
 
-    <svg v-show="query" class="Nxd-search__clear"><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-cross"/></svg>
-
     <div v-show="showResults" class="Nxd-search">
       <div class="Nxd-search__wrapper">
         <div v-show="loading" class="spinner">
@@ -76,11 +84,17 @@ export default {
   mounted: function() {
     if (document.querySelector('.Nxd-template')) {
       document.querySelector('.Nxd-template').addEventListener('click', this.onClickOutside.bind(this));
+    } else if (document.querySelector('.Adp-landing')) {
+      document.querySelector('.Adp-landing .wrapper').addEventListener('click', this.onClickOutside.bind(this));
     }
+    this.$el.querySelector('.Nxd-search-icon').addEventListener('click', this.handleSearchToggle.bind(this));
+    this.$el.querySelector('.Nxd-search-close').addEventListener('click', this.handleSearchToggle.bind(this));
   },
   onDestroy: function() {
     if (document.querySelector('.Nxd-template')) {
       document.querySelector('.Nxd-template').removeEventListener('click', this.onClickOutside.bind(this));
+    } else if (document.querySelector('.Adp-landing')) {
+      document.querySelector('.Adp-landing .wrapper').removeEventListener('click', this.onClickOutside.bind(this));
     }
   },
   computed: {
@@ -112,6 +126,23 @@ export default {
       if (this.expanded) {
         this.expanded = false;
       }
+      this.toggleSearch(true);
+    },
+
+    handleSearchToggle: function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      this.toggleSearch();
+    },
+
+    toggleSearch: function(hide) {
+      let search = this.$el.querySelector('.Nxd-search-input');
+      if (hide === true || search.style.display == 'flex') {
+        search.style.display = 'none';
+      } else {
+        search.style.display = 'flex';
+      }
     },
     onEscDownHandler: function(event) {
       if (!this.analyticsTriggered && this.query !== '') {
@@ -179,4 +210,34 @@ export default {
 }
 </script>
 <style scoped>
+.Wrapper {
+  top: 55px;
+  right: 13px;
+  display: flex;
+  position: absolute;
+}
+.Wrapper-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.Nxd-search-input {
+  display: none;
+  width: 756px;
+  padding: 20px 30px;
+  background: white;
+  height: 87px;
+  border-radius: 8px;
+  margin-top: 5px;
+  z-index: 10;
+}
+.Vlt-composite {
+  width: 100%;
+}
+.Nxd-search-icon {
+  margin-right: 10px;
+}
+#searchbox-test {
+  border: 1px solid white;
+}
 </style>

data/lib/nexmo_developer/app/webpacker/javascript/sidenav/index.js

@@ -168,23 +168,20 @@ class SidenavItem {
 export default class Sidenav {
   constructor(domNode) {
     this.domNode = document.getElementById('sidenav');
-    this.mobileTrigger = document.getElementById('Vlt-sidenav-mobile-trigger');
     this.container = document.getElementById('Vlt-sidenav');
+    this.collapseTrigger = document.getElementById('Vlt-sidenav-collapse-trigger');
 
     if (this.domNode) {
       this.buildMenu();
       this.setActiveItem();
       this.expandActiveMenu();
       this.setupListeners();
-    } else {
-      this.mobileTrigger.style.display = 'none';
     }
   }
 
   setupListeners() {
     this.domNode.addEventListener('menuClosed', this.closeOpenedMenu.bind(this));
-    this.mobileTrigger.addEventListener('click', this.mobileHandler.bind(this));
-    this.mobileTrigger.addEventListener('touchstart', this.mobileHandler.bind(this));
+    this.collapseTrigger.addEventListener('click', this.collapseHandler.bind(this));
 
     document.querySelector('body').addEventListener('click', this.closeMobileMenu.bind(this));
     document.querySelector('body').addEventListener('touchstart', this.closeMobileMenu.bind(this));
@@ -234,11 +231,18 @@ export default class Sidenav {
     });
   }
 
-  mobileHandler(event) {
-    if (!this.container.classList.contains('Vlt-sidenav_visible')) {
-      this.container.classList.add('Vlt-sidenav_visible');
-      document.body.classList.add('Vlt-body--mobile-menu-open');
-      event.stopPropagation();
+  collapseHandler(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.container.classList.add('Vlt-sidenav--animate');
+
+    if (this.container.classList.contains('Vlt-sidenav_visible')) {
+      this.container.classList.remove('Vlt-sidenav_visible');
+    } else if (this.container.classList.contains('Vlt-sidenav--collapsed')) {
+      this.container.classList.remove('Vlt-sidenav--collapsed');
+    } else {
+      this.container.classList.add('Vlt-sidenav--collapsed');
     }
   }
 

data/lib/nexmo_developer/app/webpacker/javascript/topnav/index.js

@@ -0,0 +1,33 @@
+export default class Topnav {
+  constructor() {
+    this.domNode = document.getElementById('subnav');
+    this.backdrop = this.domNode.querySelector('.Vlt-header__backdrop');
+
+    this.setupListeners();
+  }
+
+  setupListeners() {
+    this.domNode.querySelectorAll('.Vlt-tabs__link-menu').forEach((menu) => {
+      menu.addEventListener('click', this.toggleMenu.bind(this));
+    });
+
+    this.domNode.querySelector('.Adp-header__hamburger').addEventListener('click', this.toggleMobileMenu.bind(this));
+  }
+
+  toggleMobileMenu() {
+    this.backdrop.classList.toggle('Vlt-header__backdrop-active');
+    this.domNode.querySelector('.Adp-header__sub__menu').classList.toggle('Vlt-M-plus');
+  }
+
+  toggleMenu(event) {
+    let menu   = event.target.closest('.Vlt-tabs__link-menu');
+    let active = menu.querySelector('.Vlt-topmenu').classList.contains('Vlt-topmenu-active');
+
+    this.backdrop.classList.toggle('Vlt-header__backdrop-active', !active);
+
+    this.domNode.querySelectorAll('.Vlt-topmenu').forEach((elem) => {
+      elem.classList.remove('Vlt-topmenu-active');
+    });
+    menu.querySelector('.Vlt-topmenu').classList.toggle('Vlt-topmenu-active', !active);
+  }
+}

data/lib/nexmo_developer/app/webpacker/javascript/volta_tabbed_examples/index.js

@@ -68,6 +68,8 @@ export default class VoltaTabbedExamples {
   }
 
   onTabClick(event) {
+    if (document.body.classList.contains('Adp-homepage')) { return; }
+
     const target = $(event.currentTarget);
     // Prevent nested tabs from changing the url
     if ($(event.target).parents('.Vlt-tabs').length > 1) { return; }
@@ -118,7 +120,7 @@ export default class VoltaTabbedExamples {
     if (tabId !== "") {
       let tab = document.querySelector(`.Vlt-tabs__link${tabId}`);
       if (tab) {
-        tab.focus();
+        tab.focus({ preventScroll: true });
         tab.click();
       }
     }

data/lib/nexmo_developer/app/webpacker/packs/application.js

@@ -19,8 +19,7 @@ require.context('../fonts', true);
 require.context('@vonagevolta/volta2/images/logos', true)
 require.context('@vonagevolta/volta2/dist/symbol', true)
 
-require('chartkick');
-require('chart.js');
+require('chartkick/chart.js');
 require('jquery');
 require('clipboard');
 require('underscore');
@@ -30,8 +29,8 @@ require('@googlemaps/google-maps-services-js');
 import Volta from "../javascript/volta/volta.js"
 
 import Vue from 'vue'
-
 import mermaid from 'mermaid'
+import Glide, { Autoplay, Breakpoints, Controls } from '@glidejs/glide/dist/glide.modular.esm'
 
 import { TweenLite, CSSPlugin } from 'gsap'
 import GithubCards from '../javascript/github_cards'
@@ -46,6 +45,7 @@ import Concatenation from '../javascript/components/concatenation/Concatenation.
 import APIStatus from '../javascript/api_status'
 import CodeSnippetEvents from '../javascript/code_snippet_events'
 import Sidenav from '../javascript/sidenav/index'
+import Topnav from '../javascript/topnav/index'
 import Careers from '../javascript/careers'
 import LocaleSwitcher from '../javascript/locale_switcher'
 
@@ -57,11 +57,11 @@ $(document).ready(function() {
   new VoltaTabbedExamples
   new Format
   APIStatus()
-  Scroll()
   CodeSnippetEvents()
   new Sidenav()
   new Careers
   new LocaleSwitcher
+  new Topnav
 
   if (document.getElementById('jwt-generator-app')) {
     new Vue({
@@ -141,5 +141,16 @@ $(document).ready(function() {
       themeCSS: '.actor { fill: #BDD5EA; stroke: #81B1DB; }',
       htmlLabels: true
   });
-});
 
+  if (document.querySelector('.glide')) {
+    document.querySelectorAll('.glide pre').forEach((elem) => {
+      //disable copy-to-clipboard for code-snippets in hero
+      elem.classList.add('Vlt-prism--copy-disabled')
+    })
+
+    const slider = new Glide('.glide').mount({ Autoplay, Breakpoints, Controls });
+
+    // Unfortunately, Autoplay doesn't work so we got to trigger it manually.
+    setInterval(() => { slider.go('>'); }, 8000);
+  }
+});

data/lib/nexmo_developer/app/webpacker/stylesheets/application.scss

@@ -27,9 +27,13 @@
 // this should be imported last
 @import '~@vonagevolta/volta2/scss/volta-prism';
 
+@import "@glidejs/glide/src/assets/sass/glide.core";
+@import "@glidejs/glide/src/assets/sass/glide.theme";
+
 /// NDP styles
 @import "./custom/variables";
 @import "./custom/core";
+@import "./custom/landing";
 @import "./custom/typography";
 @import "./custom/syntax";
 @import "./custom/mixins";

data/lib/nexmo_developer/app/webpacker/stylesheets/custom/_core.scss

@@ -32,18 +32,18 @@ em {
 
 .Nxd-main {
   outline: none;
+  height: calc(100vh - 150px);
 }
 
-@media #{$M-plus} {
+@media #{'only screen and (min-width: #{$small-screen} ) and (max-width: #{$big-screen})'} {
   .Nxd-main {
-    height: calc(100vh - 150px);
-    margin-top: 150px;
+    height: calc(100vh - 250px);
+    margin-top: 250px;
     padding: 0px 32px;
   }
 }
 
 .Nxd-landing-main {
-  margin-top: 150px;
   padding: $unit3 $unit4;
 }
 
@@ -194,3 +194,7 @@ table {
 code .token.function{
   color: #E75B2F !important;
 }
+
+pre.Vlt-prism--dark code {
+  white-space: pre-wrap;
+}

data/lib/nexmo_developer/app/webpacker/stylesheets/custom/_landing.scss

@@ -0,0 +1,470 @@
+.Adp-homepage {
+  background: $grey-900;
+  .row {
+    padding: 20px 95px;
+
+    @media #{$S-only} {
+      padding: 20px 5px;
+    }
+  }
+
+  .container {
+    margin: 0 auto;
+    padding: 0 20px;
+
+    @media #{$S-only} {
+      margin: 24px auto;
+    }
+  }
+
+  .Adp-hero-section p > a {
+    color: #b77ef9 !important;
+  }
+
+  .Adp-hero-section__get-started {
+    margin-right: 24px;
+  }
+
+  .Adp-hero-section__title {
+    padding: 31px 0 0 0;
+  }
+
+  .Vlt-btn+.Vlt-btn {
+    margin-left: 0px;
+  }
+
+  .Adp-use-cases {
+    position: relative;
+
+    &__background {
+      position: absolute;
+      width: 100%;
+      height: 285px;
+      left: 0px;
+      top: 85px;
+      background: linear-gradient(90deg, #7FC6F4 4.86%, #D5279B 96.11%);
+      mix-blend-mode: hard-light;
+      opacity: 0.4;
+    }
+
+    .Vlt-tabs__header {
+      border-bottom: 1px solid $grey-700;
+    }
+
+    .Vlt-tabs__link:focus {
+      background-color: inherit;
+    }
+
+    .Vlt-tabs__link_active:after {
+      background: $white;
+    }
+
+    &__all {
+      margin: 20px auto 0;
+
+      svg, a {
+        color: #B77EF9 !important;
+        fill: #B77EF9 !important;
+      }
+    }
+
+    &__all-mobile {
+      width: 100%;
+    }
+  }
+
+  .Adp-use-cases__card {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(25px);
+    border-radius: 16px;
+    padding: 24px 24px 0 24px;
+    height: 100%;
+
+    .Vlt-card__content {
+      min-height: 257px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+
+      @media #{$M-plus} {
+        min-height: 288px;
+      }
+    }
+
+    p {
+      margin-bottom: 0px;
+    }
+
+    &-title {
+      padding: 0 0 14px 0;
+      display: flex;
+    }
+
+    &-blurb {
+      padding: 0 0 14px 0;
+      display: flex;
+    }
+
+    &-tags {
+      padding: 0 0 16px 0;
+      display: flex;
+      flex-wrap: wrap;
+
+      p {
+        color: $grey-300;
+
+        &:nth-of-type(1) {
+          margin-right: 24px;
+        }
+      }
+    }
+
+    &-image {
+      background: rgb(183, 126, 249);
+      border-radius: 8px 8px 0 0;
+      display: flex;
+
+      img {
+        border-radius: 8px 8px 0 0;
+      }
+    }
+  }
+
+  .Adp-listing {
+    position: relative;
+    h3 {
+      margin-bottom: 32px;
+    }
+
+    @media #{$S-only} {
+      .Vlt-btn--primary {
+        width: 100%;
+      }
+    }
+
+    .Vlt-col--3of3 {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__platform {
+      .Vlt-grid {
+        @media #{$M-plus} {
+          padding: 40px 80px;
+        }
+      }
+      .Adp-listing__item {
+        margin-bottom: 0px;
+      }
+    }
+
+    &__background {
+      position: absolute;
+      width: 100%;
+      top: 0;
+      left: 0;
+      background: linear-gradient(90deg, #7FC6F4 4.86%, #8728FB 96.11%);
+      mix-blend-mode: hard-light;
+      opacity: 0.2;
+    }
+
+    &__background-glass {
+      position: absolute;
+      width: 100%;
+      top: 0;
+      left: 0;
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(25px);
+      border-radius: 16px;
+
+      @media #{$S-only} {
+        padding: 0 15px;
+      }
+    }
+  }
+
+  .Adp-listing__item {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 24px;
+
+    &-title {
+      display: flex;
+
+      svg {
+        margin-right: 16px;
+      }
+    }
+
+    &-links {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      padding-bottom: 24px;
+
+      &-border {
+        border-bottom: 1px solid $grey-700;
+      }
+
+      a {
+        justify-content: space-between;
+        display: flex;
+        margin: 0 0 8px 40px;
+      }
+    }
+  }
+
+  .Adp-brand-listing {
+    background: linear-gradient(90deg, #7FC6F4 4.86%, #8728FB 96.11%);
+
+    .container {
+
+      @media #{$S-only} {
+        margin: 0px auto;
+      }
+    }
+
+    @media #{$M-plus} {
+      height: 88px;
+    }
+
+    .Vlt-grid {
+      justify-content: space-between;
+      align-items: center;
+
+      // overrides volta's style, they don't work
+      @media #{$S-only} {
+        .Vlt-col--S-1of2 {
+          display: flex;
+          justify-content: center;
+          flex: 0 0 50%;
+        }
+      }
+    }
+
+    .row {
+      padding: 16px 95px;
+
+      @media #{$S-only} {
+        padding: 16px 0;
+      }
+    }
+  }
+
+  .Adp-documentation {
+    .Adp-listing__item-links {
+      @media #{$S-only} {
+        border-bottom: 1px solid $grey-700;
+      }
+    }
+  }
+
+  .Adp-platform__background {
+    background: linear-gradient(90deg, #7FC6F4 4.86%, #8728FB 96.11%);
+    mix-blend-mode: hard-light;
+    opacity: 0.2;
+    position: absolute;
+    width: 100%;
+    height: 285px;
+    top: 78px;
+    left: 0px;
+
+    &-glass {
+      @media #{$M-plus} {
+        background: rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(25px);
+        border-radius: 16px;
+      }
+
+      @media #{$S-only} {
+        padding: 0 15px;
+      }
+    }
+  }
+
+  .Adp-listing__platform {
+    .Adp-listing__item {
+      @media #{$S-only} {
+        background: rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(25px);
+        border-radius: 16px;
+        padding: 15px;
+
+        .Adp-listing__item-links {
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  .Adp-video-listing {
+    .Vlt-col {
+      display: flex;
+      justify-content: center;
+    }
+
+    .Vlt-btn {
+      @media #{$S-only} {
+        width: 100%;
+      }
+    }
+  }
+
+  .Adp-hero-section__code-background {
+    background: #871EFF;
+    border-radius: 0 0 0 40px;
+    height: 360px;
+    z-index: -1;
+    width: 50vw;
+    left: -5px;
+    position: absolute;
+    top: -20px;
+
+    @media #{$S-only} {
+      width: 100vw;
+      left: 0;
+      margin-top: 16px;
+    }
+  }
+
+  .Adp-code-snippets-listing {
+    .Adp-code-snippet__title {
+      padding-left: 12px;
+
+      b {
+        color: white;
+      }
+    }
+
+    .Adp-code-snippet {
+      background-color: #333333;
+      border-radius: 15px;
+
+      code, pre {
+        background-color: #333333;
+      }
+
+      pre {
+        margin: 0;
+        padding: 16px 24px;
+        border-radius: 15px;
+        max-height: 250px;
+        overflow: scroll;
+      }
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      #prerequisites, #write-the-code, #run-your-code, p {
+        display: none;
+      }
+
+      .Nxd-accordion-emphasis {
+        display: none;
+      }
+
+      pre:not(.main-code) {
+        display: none;
+      }
+
+      #write-the-code ~ .code-toolbar + p {
+        display: flex;
+        font-weight: 600;
+
+        a {
+          color: white;
+          padding: 10px 35px 0px;
+        }
+      }
+
+      #run-your-code ~ .code-toolbar, #run-your-code ~ .code-toolbar + p {
+        display: none;
+      }
+
+      .Vlt-tabs__content {
+        margin-top: 0px;
+        padding-bottom: 16px;
+      }
+
+      .Vlt-tabs__header--bordered {
+        box-shadow: none;
+        display: flex;
+        overflow: scroll;
+        justify-content: flex-start;
+        margin-top: 0px;
+        padding: 16px;
+
+        .Vlt-tabs__link {
+          border-radius: 100px;
+          padding: 12px;
+          margin: 0;
+          color: white;
+
+          &:first-child {
+            margin: 0;
+          }
+          a {
+            display: flex;
+            font-size: 16px;
+            font-weight: 600;
+          }
+
+          &:after {
+            background: none;
+          }
+
+          &:active {
+            background-color: #333333 !important;
+          }
+        }
+
+        .Vlt-tabs__link_active {
+          background: #757575;
+          border: none;
+
+          &:before {
+            background: none;
+          }
+        }
+      }
+    }
+  }
+
+  .glide {
+    position: static;
+    max-height: 400px;
+
+    &__track {
+      margin-top: 40px;
+    }
+
+    &__bullets {
+      top: 20px;
+      left: 48px;
+    }
+
+    &__arrow {
+      border: none;
+      box-shadow: none;
+    }
+
+    &__arrow--left {
+      left: -25px;
+
+      @media #{$S-only} {
+        left: -15px;
+      }
+    }
+
+    &__arrow--right {
+      right: -25px;
+
+      @media #{$S-only} {
+        right: -15px;
+      }
+    }
+  }
+}