chore(site): rework 1/2 of slides content

site/src/common/flex.less

@@ -34,6 +34,9 @@
   &-around {
     justify-content: space-around !important;
   }
+  &-center {
+    justify-content: center !important;
+  }
 }
 
 .align-items {

site/src/common/helpers.less

@@ -179,9 +179,20 @@
   border: 0;
 }
 
+.list-spaced {
+  > li {
+    margin-block-end: 0.5rem;
+  }
+}
+
 .icon-inline {
   display: inline-flex;
 
   min-width: 1em;
   height: 1em;
+
+  &.large {
+    min-width: 2em;
+    height: 2em;
+  }
 }

site/src/common/typography.large.less

@@ -3,7 +3,7 @@
 
 .typo-large {
   // Base font size
-  font-size: 1.175rem;
+  font-size: 1.35rem;
 
   h1.large,
   .h1.large {
@@ -41,12 +41,12 @@
 
   h4,
   .h4 {
-    font-size: 1.5rem;
+    font-size: 1.75rem;
     margin-bottom: 0.75rem;
   }
 
   h5,
   .h5 {
-    font-size: 1.25rem;
+    font-size: 1.5rem;
   }
 }

site/views/overview/quick/00-intro/00-intro.njk

@@ -6,4 +6,4 @@ tags: overview-quick
 
 <h1 class="large">Exadel Smart Library</h1>
 
-<p class="text-note text-right text-italic">Presentation by @exadel/esl-team</p>
+<p class="text-note text-right text-italic">Presentation by <i>@exadel/esl-team</i></p>

site/views/overview/quick/00-intro/01-what-is.njk

@@ -1,17 +1,24 @@
 ---
-title: What the ESL is?
+title: What is ESL?
 hash: intro
 tags: overview-quick
 ---
 
-<h2>What the ESL is?</h2>
+<h2 class="text-center">What is ESL?</h2>
 
 <p class="text-italic esl-animate-slide up" esl-animate="{repeat: true}">
-  ESL is an open-source UI components library that reduces routine tasks and lets you efficiently create websites with flexible components.
+  ESL is an open-source UI component library that simplifies routine tasks, enabling efficient website creation with flexible components.
 </p>
 <p class="text-italic esl-animate-slide up" esl-animate="{repeat: true}">
-  ESL is based on Web Components, providing a standard user experience for popups, tabs, embedded videos/audio, and more.
+  With ESL, you can easily implement popular UX patterns such as popups, tabs, embedded videos/audio, and more.
 </p>
 <p class="text-italic esl-animate-slide up" esl-animate="{repeat: true}">
-  You can utilize these web components to complement projects or build your infrastructure from the ground up using ESL alone.
+  Use these web components to enhance existing projects or build your infrastructure from scratch with ESL.
 </p>
+
+<div class="text-right">
+  <img alt="Open Source icon"
+       src="{{ '/assets/common/open-source.svg' | url }}"
+       width="100" height="100"/>
+</div>
+

site/views/overview/quick/00-intro/02-goals.njk

@@ -4,11 +4,11 @@ hash: goals
 tags: overview-quick
 ---
 
-<h3>Goals and Anti-Goals of ESL</h3>
+<h3 class="text-center">Goals and Anti-Goals of ESL</h3>
 
 <div>
   <esl-animate repeat group target="::next::child(li)"></esl-animate>
-  <ul>
+  <ul class="list-spaced">
     <li class="esl-animate-slide left">ESL is developed to universally cover the most common web UX patterns.</li>
     <li class="esl-animate-slide left">ESL does not provide specific styles, allowing usage with any project style guide.</li>
     <li class="esl-animate-slide left">ESL components have built-in a11y (accessibility) support.</li>

site/views/overview/quick/01-stack&compatibility/00-stack&compatibility.njk

@@ -1,23 +1,24 @@
 ---
 title: Stack & Compatibility
 hash: stack
+cls: text-center
 tags: overview-quick
 ---
 
-<h3>ESL is tiny and efficient</h3>
+<h3 class="text-center mb-4">ESL is Tiny and Efficient</h3>
 
 <p class="esl-animate-slide up" esl-animate="{repeat: true}">
-  ESL is designed to work quickly and efficiently in browsers, minimizing unnecessary code and ensuring it doesn’t impact website performance.
-</p>
-<p class="esl-animate-slide up" esl-animate="{repeat: true}">
-  ESL package does not depend on any third-party libraries, it uses built-in browser functionality like Web API and ECMAScript 6.
+  ESL is designed to work quickly and efficiently in browsers, minimizing unnecessary code and ensuring optimal website performance.
 </p>
+
 <p class="esl-animate-slide up" esl-animate="{repeat: true}">
-  ESL codebase is written in TypeScript and compiled to ES6 JavaScript.
+  The ESL package is independent of third-party libraries, relying on built-in browser functionality like Web API and ECMAScript 6.
 </p>
+
 <p class="esl-animate-slide up" esl-animate="{repeat: true}">
-  ESL package is fully tree-shakable, so in the result bundle you will have only the components you use.
+  Written in TypeScript and compiled to ES6 JavaScript, ESL’s codebase is fully tree-shakable, so your bundle includes only the components you use.
 </p>
+
 <p class="esl-animate-slide up text-note" esl-animate="{repeat: true}">
-  At that moment some of the syntax sugar provided with TS decorators, in the future, it will be complimented with native ES decorators.
+  Currently, ESL uses TypeScript decorators for some syntax sugar, with plans to complement these with native ES decorators in the future.
 </p>

site/views/overview/quick/01-stack&compatibility/01-browser-support.njk

@@ -1,6 +1,7 @@
 ---
 title: Cross-Browser Support
 hash: browser-support
+cls: text-center
 tags: overview-quick
 parent: 00-stack&compatibility
 ---
@@ -14,5 +15,5 @@ parent: 00-stack&compatibility
   <img loading="lazy"
        src="{{ '/assets/common/browser-support.svg' | url }}"
        alt="browsers logos"
-       style="float: right; max-width: 500px"/>
+       style="max-width: 500px"/>
 </div>

site/views/overview/quick/01-stack&compatibility/03-compatibility.njk

@@ -1,16 +1,51 @@
 ---
 title: ESL Compatibility
 hash: compatibility
+cls: text-center
 tags: overview-quick
 parent: 00-stack&compatibility
 ---
 
-<h3>ESL Compatibility</h3>
+<h3 class="text-center">ESL Compatibility</h3>
 
 <p class="esl-animate-slide up" esl-animate="{repeat: true}">
   ESL is framework-agnostic library, it can be used with any modern framework or vanilla JS.
 </p>
 
 <p class="esl-animate-slide up" esl-animate="{repeat: true}">
-  Built-in ESL components have proper type definitions for TSX (JSX) syntax and accepts arguments both as attributes and properties.
+  Built-in ESL components have proper type definitions for TSX (JSX) syntax and accepts arguments both as attributes and
+  properties.
 </p>
+
+<figure class="d-flex justify-content-center esl-animate-slide up" esl-animate="{repeat: true}">
+  <img loading="lazy"
+       width="100"
+       height="100"
+       class="esl-animate-slide right" esl-animate="{repeat: true, group:true}"
+       src="{{ '/assets/logo-white.svg' | url }}"
+       alt="ESL" />
+
+  <svg width="100" height="100" viewBox="0 0 40 40" fill="white" xmlns="http://www.w3.org/2000/svg">
+    <rect x="18" y="10" width="4" height="20" />
+    <rect x="10" y="18" width="20" height="4" />
+  </svg>
+
+  <img loading="lazy"
+       width="100"
+       height="100"
+       class="esl-animate-slide left" esl-animate="{repeat: true, group:true}"
+       src="{{ '/assets/frameworks/react.svg' | url }}"
+       alt="React" />
+  <img loading="lazy"
+       width="100"
+       height="100"
+       class="esl-animate-slide left" esl-animate="{repeat: true, group:true}"
+       src="{{ '/assets/frameworks/angular.svg' | url }}"
+       alt="Angular" />
+  <img loading="lazy"
+       width="100"
+       height="100"
+       class="esl-animate-slide left" esl-animate="{repeat: true, group:true}"
+       src="{{ '/assets/frameworks/vue.svg' | url }}"
+       alt="Vue" />
+</figure>

site/views/overview/quick/02-core/00-core.njk

@@ -1,6 +1,7 @@
 ---
 title: ESL Core
 hash: core
+cls: text-center
 tags: overview-quick
 ---
 

site/views/overview/quick/02-core/01-custom-tags.njk

@@ -5,7 +5,7 @@ tags: overview-quick
 parent: 00-core
 ---
 
-<h3><code>ESLBaseElement</code> - for custom tag based components</h3>
+<h3 class="text-center">Custom tags</h3>
 <div class="esl-animate-slide up" esl-animate="{repeat: true}">
   <p>The primary technology of ESL is web components. ESLBaseElement is a base class for custom tag based components.</p>
   <p>ESLBaseElement extends HTMLElement and provides a set of useful features:</p>

site/views/overview/quick/02-core/02-custom-attributes.njk

@@ -5,7 +5,8 @@ tags: overview-quick
 parent: 00-core
 ---
 
-<h3>Components based on custom attribute - <code>ESLMixinElement</code></h3>
+<h3 class="text-center">Custom attributes</h3>
+
 <div class="esl-animate-slide up" esl-animate="{repeat: true}">
   <p>In addition to custom tags powered by web components standard, ESL UI library provides a way to create components based on custom attributes.</p>
   <p>ESLMixinElement is a base class for such components and it gives you this capability in almost the same way as ESLBaseElement does for custom tags.</p>

site/views/overview/quick/02-core/04-event-listener.njk

@@ -5,23 +5,26 @@ tags: overview-quick
 parent: 00-core
 ---
 
-<h3>{{ title }}</h3>
+<h3 class="text-center">{{ title }}</h3>
+
 <p>
   ESL Event Listener is an embedded ESL module that take care of the event listeners management and provide extended utilities to work with events.
-  ESL provides ability to register event listeners in declarative way using TS <code>@listen</code> decorator.
+  ESL provides ability to register event listeners in declarative way using TS <i>@listen</i> decorator.
   Module supports event delegation, custom event targets. Listeners registration works on the "host" concept that allows you to link the listener to the specific component instance (to manage subscriptions automatically.
 </p>
 
-{% code 'typescript', 'code-block' %}
-  class MyComponent extends ESLBaseElement {
-    @listen({event: 'click', selector: 'button'})
-    onBtnClick(event) {
-      console.log('Button click catched with delegation', event);
-    }
+<div class="d-flex justify-content-center">
+  {% code 'typescript', 'code-block' %}
+    class MyComponent extends ESLBaseElement {
+      @listen({event: 'click', selector: 'button'})
+      onBtnClick(event) {
+        console.log('Button click catched with delegation', event);
+      }
 
-    @listen({event: 'resize', target: ESLResizeObserverTarget.for})
-    onResize(event) {
-      console.log('Component resized', event);
+      @listen({event: 'resize', target: ESLResizeObserverTarget.for})
+      onResize(event) {
+        console.log('Component resized', event);
+      }
     }
-  }
-{% endcode %}
+  {% endcode %}
+</div>

site/views/overview/quick/02-core/05-media-query.njk

@@ -5,13 +5,34 @@ tags: overview-quick
 parent: 00-core
 ---
 
-<h3>{{ title }}</h3>
+<h3 class="text-center">{{ title }}</h3>
 
-{% code 'typescript', 'code-block' %}
-  ESLMediaQuery.for('@XS').matches; // true if XS
-{% endcode %}
+<p class="esl-animate-slide up" esl-animate="{repeat: true}">
+  <i>ESLMediaQuery</i> is an extended browser <i>MediaQueryList</i> object and related utils such as rule-value pairs
+  called <i>ESLMediaRuleList</i>.
+</p>
 
-{% code 'typescript', 'code-block' %}
-  @listen({event: 'change', target: ESLMediaQuery.for('@XS or @SM')})
-  onMediaQueryChange(event) {/*...*/}
-{% endcode %}
+<p class="esl-animate-slide up" esl-animate="{repeat: true}">
+  In addition to the standard <i>MediaQueryList</i> API, <i>ESLMediaQuery</i> provides support of Breakpoint and media condition aliases,
+  extended boolean logic.
+</p>
+
+<div class="esl-animate-slide up" esl-animate="{repeat: true}">
+  {% code 'typescript', 'code-block' %}
+    ESLMediaQuery.for('@XS').matches; // XS breakpoint declared globally
+  {% endcode %}
+</div>
+
+<div class="esl-animate-slide up" esl-animate="{repeat: true}">
+  {% code 'typescript', 'code-block' %}
+    @listen({event: 'change', target: ESLMediaQuery.for('@XS or @SM')})
+    onMediaQueryChange(event) {/* It is true event target */}
+  {% endcode %}
+</div>
+
+<div class="esl-animate-slide up" esl-animate="{repeat: true}">
+  {% code 'typescript', 'code-block' %}
+    ESLMediaRuleList.parse('@XS | @SM | @MD', '1 | 2 | 3').value // 1, 2 or 3 according to current breakpoint
+    ESLMediaRuleList.parse('@XS => 1 | @SM => 2 | @MD => 3').value // alternative way to define the same
+  {% endcode %}
+</div>

site/views/overview/quick/02-core/06-traversing-query.njk

@@ -5,13 +5,20 @@ tags: overview-quick
 parent: 00-core
 ---
 
-<h3>{{ title }}</h3>
+<h3 class="text-center">{{ title }}</h3>
 
-{% code 'typescript', 'code-block' %}
-  const $base = ...; // some base element (as context)
+<p class="esl-animate-slide up" esl-animate="{repeat: true}">
+  <i>ESLTraversingQuery</i> is a set of utilities to simplify DOM traversing, element selection and filtering.
+</p>
 
-  ESLTraversingQuery.find($base, '::find(button)::visible'); // find all visible buttons in the base element
-  ESLTraversingQuery.find($base, '::find(button)::nth(2)'); // find second button in the base element
-  ESLTraversingQuery.find($base, '::next'); // get next sibling of the base element
-  ESLTraversingQuery.find($base, '::prev(a)'); // get previous sibling of the base element that is an anchor
-{% endcode %}
+<div class="esl-animate-slide up" esl-animate="{repeat: true}">
+  {% code 'typescript', 'code-block' %}
+    const $base = ...; // some base element (as context)
+
+    ESLTraversingQuery.first($base, '::next'); // get next sibling of the base element
+    ESLTraversingQuery.first($base, '::prev(a)'); // get previous sibling of the base element that is an anchor
+    ESLTraversingQuery.first($base, '::find(button)::nth(2)'); // find second button in the base element
+    ESLTraversingQuery.all($base, '::next'); // find all next siblings of the base element
+    ESLTraversingQuery.all($base, '::find(button)::visible'); // find all visible buttons in the base element
+  {% endcode %}
+</div>