chore(site): content fixes

exadel-inc · Jul 1, 2024 · f879f73 · f879f73
1 parent 3d27f1d
commit f879f73
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 12 deletions.
diff --git a/site/src/collection-grid/collection-grid.less b/site/src/collection-grid/collection-grid.less
@@ -103,8 +103,10 @@
   &-column {
     grid-template-columns: repeat(2, 1fr);
   }
-  &-column&-compact {
-    grid-template-columns: repeat(4, 1fr);
+  @media @md-xl {
+    &-column&-compact {
+      grid-template-columns: repeat(4, 1fr);
+    }
   }
 
   &-column &-item {

diff --git a/site/src/presentation/slide.less b/site/src/presentation/slide.less
@@ -11,7 +11,7 @@
 
   .presentation-content {
     padding-block: 2rem;
-    max-width: 1400px;
+    max-width: calc(1400px + 4rem);
     max-height: 100%;
   }
 

diff --git a/site/views/_layouts/presentation.njk b/site/views/_layouts/presentation.njk
@@ -12,7 +12,7 @@
                   type="default | none"
                   vertical count="1"
                   esl-carousel-wheel
-                  esl-carousel-wheel-ignore="uip-root, pre, [contenteditable]"
+                  esl-carousel-wheel-ignore="uip-root, [contenteditable]"
                   esl-carousel-wheel-prevent-default
                   esl-carousel-touch="@mobile => swipe"
                   esl-carousel-keyboard

diff --git a/site/views/overview/quick/01-overview/01-goals.njk b/site/views/overview/quick/01-overview/01-goals.njk
@@ -11,7 +11,7 @@ parent: 00-what-is
   <esl-animate repeat group target="::next::child(li)"></esl-animate>
   <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 does not provide specific CSS, allowing usage with any project style guide.</li>
     <li class="esl-animate-slide left">ESL components have built-in a11y (accessibility) support.</li>
     <li class="esl-animate-slide left">ESL provides base classes and utilities for creating custom tags or custom attributes.</li>
   </ul>

diff --git a/site/views/overview/quick/01-overview/04-compatibility.njk b/site/views/overview/quick/01-overview/04-compatibility.njk
@@ -9,11 +9,11 @@ parent: 00-what-is
 <h3 class="text-center">{{ title }}</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.
+  ESL is a 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
+  Built-in ESL components have proper type definitions for TSX (JSX) syntax and accept arguments both as attributes and
   properties.
 </p>
 

diff --git a/site/views/overview/quick/02-core/00-core.njk b/site/views/overview/quick/02-core/00-core.njk
@@ -8,5 +8,5 @@ tags: overview-quick
 <h2 class="large">ESL Core Components</h2>
 
 <p class="esl-animate-slide up" esl-animate="{repeat: true}">
-  ESL gives wide range of base features and components to build your application.
+  ESL gives a wide range of base features and components to build your application.
 </p>
diff --git a/site/views/overview/quick/02-core/01-custom-tags.njk b/site/views/overview/quick/02-core/01-custom-tags.njk
@@ -6,12 +6,12 @@ parent: 00-core
 ---
 
 <h3 class="text-center">{{ title }}</h3>
-<div class="esl-animate-slide up" esl-animate="{repeat: true}" style="max-width: 1100px">
+<div class="esl-animate-slide up" esl-animate="{repeat: true}" style="max-width: 1200px">
   <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>
   <ul>
     <li>simplified classes/attributes management</li>
-    <li>out of the box event listeners management live cycle</li>
+    <li>out of the box event listeners management life-cycle</li>
     <li>static API for component registration</li>
   </ul>
   {% code 'html', 'code-block' %}

diff --git a/site/views/overview/quick/02-core/02-custom-attributes.njk b/site/views/overview/quick/02-core/02-custom-attributes.njk
@@ -7,7 +7,7 @@ parent: 00-core
 
 <h3 class="text-center">{{ title }}</h3>
 
-<div class="esl-animate-slide up" esl-animate="{repeat: true}" style="max-width: 1100px">
+<div class="esl-animate-slide up" esl-animate="{repeat: true}" style="max-width: 1200px">
   <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>
   <p>Same as ESLBaseElement, ESLMixinElement's instances are created automatically when the attribute is found in the DOM, and destroyed when the attribute is removed.</p>

diff --git a/site/views/overview/quick/02-core/04-event-listener.njk b/site/views/overview/quick/02-core/04-event-listener.njk
@@ -8,7 +8,7 @@ parent: 00-core
 <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 Event Listener is an embedded ESL module that takes care of the event listeners management and provide extended utilities to work with events.
   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>