updated getting started

Instantan · Jun 21, 2023 · ab36f79 · ab36f79
1 parent 5b3ccdf
commit ab36f79
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/website/index.html b/website/index.html
@@ -69,15 +69,15 @@ <h1 class="text-2xl -mt-1.5 ml-1 font-extralight">magic</h1>
         <div class="flex flex-col justify-center text-center gap-4">
             <img src="/assets/images/magic-logo.svg" height="110px" width="110px" class="text-center mx-auto" />
             <h1 class="text-5xl font-extralight">magic</h1>
-            <h2 class="text-md px-8 md:px-5 py-6 md:py-14 md:text-2xl font-extralight">Magic is a Golang web framework that simplifies web development.<br /> With under 12kb JavaScript, it's powerful yet easy to use for building
+            <h2 class="text-md px-8 md:px-5 py-6 md:py-14 md:text-xl">Magic is a Golang web framework that simplifies web development.<br /> With under 12kb JavaScript, it's powerful yet easy to use for building
                 <br />efficient web applications.
             </h2>
             <div class="flex justify-center">
-                <div class="mt-2 gap-3 grid grid-cols-1 md:grid-cols-2 w-60 md:w-auto text-md md:text-xl">
-                    <a href="/learn" class="py-2.5 px-4 bg-[var(--purple-dark)] text-white rounded-2xl magic-button">
+                <div class="mt-2 gap-3 grid grid-cols-1 md:grid-cols-2 w-60 md:w-auto text-lg md:text-lg">
+                    <a href="/learn" class="py-2.5 px-4 bg-[var(--purple-dark)] text-white rounded-full magic-button">
                         Learn
                     </a>
-                    <a href="/docs" class="py-2.5 px-4 bg-[var(--purple)] text-white rounded-2xl magic-button">
+                    <a href="/docs" class="py-2.5 px-4 bg-[var(--purple)] text-white rounded-full magic-button">
                         Explore the docs
                     </a>
                 </div>
@@ -220,9 +220,9 @@ <h2 class="text-md px-8 md:px-5 py-6 md:py-14 md:text-xl">Add hot reloading to y
                         <rect width="192" height="177" rx="57" stroke="none"/>
                         <rect x="5" y="5" width="182" height="167" rx="52" fill="none"/>
                       </g>
-                      <text id="S" transform="translate(1128 4050)" fill="#6d45f5" font-size="80" font-family="Monaco"><tspan x="-24.004" y="0">S</tspan></text>
-                      <text id="Ctrl" transform="translate(741 4050)" fill="#6d45f5" font-size="80" font-family="Monaco"><tspan x="-96.016" y="0">Ctrl</tspan></text>
-                      <text id="_" data-name="+" transform="translate(948 4045)" fill="#6d45f5" font-size="80" font-family="PTSans-Bold, PT Sans" font-weight="700"><tspan x="-21.08" y="0">+</tspan></text>
+                      <text id="S" transform="translate(1128 4050)" fill="#6d45f5" font-size="80" font-family="inherit"><tspan x="-24.004" y="0">S</tspan></text>
+                      <text id="Ctrl" transform="translate(741 4050)" fill="#6d45f5" font-size="80" font-family="inherit"><tspan x="-66.016" y="0">Ctrl</tspan></text>
+                      <text id="_" data-name="+" transform="translate(948 4045)" fill="#6d45f5" font-size="80" font-family="inherit" font-weight="700"><tspan x="-21.08" y="0">+</tspan></text>
                     </g>
                   </svg>
             </div>

diff --git a/website/learn/index.html b/website/learn/index.html
@@ -108,7 +108,7 @@ <h1 class="text-2xl -mt-1.5 ml-1 font-extralight">magic</h1>
                         <a href="#deferred-assigns">Deferred assigns</a>
                     </li>
                     <li class="magic-text-hover">
-                        <a href="#deferred-components" class="coming-soon">Deferred components</a>
+                        <a href="#deferred-components">Deferred components</a>
                     </li>
                     <li class="magic-text-hover">
                         <a href="#temporal-data-patches" class="coming-soon">Temporal data patches</a>
@@ -269,33 +269,33 @@ <h1 class="text-2xl -mt-1.5 ml-1 font-extralight">magic</h1>
                 <br /> You can find the full example under <a href="https://github.com/Instantan/magic-quickstart-example">github.com/Instantan/magic-quickstart-example</a>.
             </article>
             <div class="h-32"></div>
-            <article id="events" class="mb-[30vh]">
+            <article id="static-nodes">
                 <span class="uppercase text-[var(--blue)] font-bold text-sm -mb-30">Advanced</span>
-                <p class="text-4xl pb-4 font-extralight" style="margin-top: 10px;">Events</p>
-                Send events like onclick from the client to the server and handle it in your component.
-            </article>
-            <article id="static-nodes" class="mb-[30vh]">
-                <p class="text-4xl pb-4 font-extralight">Static nodes</p>
+                <p class="text-4xl pb-4 font-extralight" style="margin-top: 10px;">Static nodes</p>
                 Sometimes you dont want to live render some nodes. For example when you manipulate divs with JavaScript. 
-                If thats the case you can use the HTML Attribute <cite>magic:static="a"</cite>. Only when the value equals the live rendered value the node gets ignored.
+                If thats the case you can use the HTML Attribute <cite>magic:static="a"</cite>. When the value equals the live rendered one the node gets ignored.
+            </article>
+            <article id="events">
+                <p class="text-4xl pb-4 font-extralight">Events</p>
+                Send events like onclick from the client to the server and handle it in your component. To do that
             </article>
-            <article id="javascript" class="mb-[30vh]">
+            <article id="javascript">
                 <p class="text-4xl pb-4 font-extralight">JavaScript</p>
                 -
             </article>
-            <article id="hooks" class="mb-[30vh]">
+            <article id="hooks">
                 <p class="text-4xl pb-4 font-extralight">Hooks</p>
                 -
             </article>
-            <article id="deferred-assigns" class="mb-[30vh]">
+            <article id="deferred-assigns">
                 <p class="text-4xl pb-4 font-extralight">Deferred assigns</p>
                 -
             </article>
-            <article id="deferred-components" class="mb-[30vh]">
+            <article id="deferred-components">
                 <p class="text-4xl pb-4 font-extralight">Deferred components</p>
                 -
             </article>
-            <article id="temporal-data-patches" class="mb-[30vh]">
+            <article id="temporal-data-patches">
                 <p class="text-4xl pb-4 font-extralight">Temporal data patches</p>
                 -
             </article>