add why description

beforesemicolon · Nov 17, 2024 · 90fd4f9 · 90fd4f9
1 parent b3ab2d8
commit 90fd4f9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/docs/index.md b/docs/index.md
@@ -10,7 +10,7 @@ layout: landing
 
 ## Reactive Templating System
 
-A simple and lightweight solution to create stateful Web User Interfaces.
+Because building Web Applications should be simple.
 
 <div class="actions">
 
@@ -20,10 +20,14 @@ A simple and lightweight solution to create stateful Web User Interfaces.
 
 </div>
 
-<section id="why-markup">
+<section id="why-markup-block">
 
 ### Why Markup?
 
+You dont need a verbose web frameworks to build complex Web Applications. Web Standards and existing Web APIs alongside modern JavaScript is all you need.
+
+Markup simply allows you to avoid the complexity of dealing with the DOM by providing you with a simple and reactive way to define your app structure and content. **The rest is up to your creativity and web capabilities.**
+
 -   **Reactive**
     Markup uses JavaScript **[template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)** and Functions to allow you to create reative DOM with state management, render lyfecycles, and side effects control.
 -   **Small**

diff --git a/docs/stylesheets/landing.css b/docs/stylesheets/landing.css
@@ -66,26 +66,37 @@
     }
 }
 
-/* #why-markup ----------------- */
+/* #why-markup-block ----------------- */
 
-#why-markup {
+#why-markup-block {
     margin: 80px 0 0;
 }
 
-#why-markup h3 {
+#why-markup-block h3 {
     font-size: 1.8rem;
     font-weight: 700;
     letter-spacing: 0.15rem;
+    margin-bottom: 20px;
+}
+
+#why-markup-block h3 ~ p {
+    width: 80%;
+}
+
+@media screen and (max-width: 1024px) {
+    #why-markup-block h3 ~ p {
+        width: 100%;
+    }
 }
 
-#why-markup ul {
+#why-markup-block ul {
     margin: 30px 0 50px;
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
 }
 
-#why-markup ul li {
+#why-markup-block ul li {
     background: linear-gradient(320deg, #001114, #000000);
     padding: 25px;
     border-radius: 8px;
@@ -96,7 +107,7 @@
     position: relative;
 }
 
-#why-markup ul li::after {
+#why-markup-block ul li::after {
     content: '';
     display: block;
     width: calc(100% + 1px);
@@ -110,21 +121,21 @@
     z-index: -1;
 }
 
-#why-markup ul li > strong:first-of-type {
+#why-markup-block ul li > strong:first-of-type {
     font-size: 1.6rem;
     font-weight: 500;
     display: block;
     margin-bottom: 20px;
 }
 
 @media screen and (max-width: 860px) {
-    #why-markup ul li {
+    #why-markup-block ul li {
         min-width: calc((100% / 2) - 30px);
     }
 }
 
 @media screen and (max-width: 675px) {
-    #why-markup ul li {
+    #why-markup-block ul li {
         min-width: 100%;
     }
 }