GH-202: Add 1NF transitions

Author: shorodilov

src/pres/normalization/index.html

@@ -250,24 +250,24 @@ <h2>Deletion anomalies</h2>
     <div class="step requirements" id="requirements--1nf"
          data-rel-position="absolute"
          data-x="0"
-         data-y="1000"
+         data-y="1500"
          data-rotate-z="0">
-      <h2>First normal form</h2>
-      <section>
+      <h2 class="fade-in">First normal form</h2>
+      <section class="fly-in">
         <h3>Requirements</h3>
         <ul>
           <li>
-            Row order should not be used to convey information
+            Row order should not be used to convey information.
           </li>
           <li>
-            Data types should not be mixed within the same column<br>
-            <small class="fly-in">(and the RDBMS won't let you do it anyway)</small>
+            Data types should not be mixed within the same column.<br>
+            <small>(and the RDBMS won't let you do it anyway)</small>
           </li>
           <li>
-            Tables should have their primary keys
+            Tables should have their primary keys.
           </li>
           <li>
-            Repeating groups should be eliminated
+            Repeating groups should be eliminated.
           </li>
         </ul>
       </section>
@@ -277,7 +277,7 @@ <h3>Requirements</h3>
          data-rel-position="relative"
          data-rel-x="-1000"
          data-rel-y="1500">
-      <section>
+      <section class="fade-in fade-out">
         <table class="db-table" aria-label="data">
           <caption>Player Level</caption>
           <thead>
@@ -308,7 +308,7 @@ <h3>Requirements</h3>
          data-rel-position="relative"
          data-rel-x="0"
          data-rel-y="850">
-      <section>
+      <section class="fade-in fade-out">
         <table class="db-table" aria-label="data">
           <caption>Player Level</caption>
           <thead>
@@ -340,7 +340,7 @@ <h3>Requirements</h3>
          data-rel-position="relative"
          data-rel-x="2000"
          data-rel-y="-850">
-      <section>
+      <section class="fade-in fade-out">
         <table class="db-table" aria-label="data">
           <caption>Player Inventory</caption>
           <thead>
@@ -371,7 +371,7 @@ <h3>Requirements</h3>
          data-rel-position="relative"
          data-rel-x="0"
          data-rel-y="850">
-      <section>
+      <section class="fade-in fade-out">
         <table class="db-table" aria-label="data">
           <caption>Player Inventory</caption>
           <thead>
@@ -385,27 +385,27 @@ <h3>Requirements</h3>
           <tr id="no-repeating-groups--1nf__prombery87-sword">
             <td>prombery87</td>
             <td>sword</td>
-            <td>1</td>
+            <td class="text-end">1</td>
           </tr>
           <tr id="no-repeating-groups--1nf__prombery87-ring">
             <td>prombery87</td>
             <td>ring</td>
-            <td>4</td>
+            <td class="text-end">4</td>
           </tr>
           <tr id="no-repeating-groups--1nf__wheed1997-copper-coin">
             <td>wheed1997</td>
             <td>copper coin</td>
-            <td>18</td>
+            <td class="text-end">18</td>
           </tr>
           <tr id="no-repeating-groups--1nf__acen1999-hat">
             <td>acen1999</td>
             <td>wizard hat</td>
-            <td>1</td>
+            <td class="text-end">1</td>
           </tr>
           <tr id="no-repeating-groups--1nf__acen1999-robe">
             <td>acen1999</td>
             <td>robe</td>
-            <td>1</td>
+            <td class="text-end">1</td>
           </tr>
           </tbody>
         </table>
@@ -417,7 +417,7 @@ <h3>Requirements</h3>
          data-rel-position="relative"
          data-rel-x="-1000"
          data-rel-y="-1600">
-      <section>
+      <section class="fade-in">
         <table class="db-table" aria-label="data">
           <caption>Player Inventory</caption>
           <thead>
@@ -461,8 +461,8 @@ <h3>Requirements</h3>
     <div class="step overview" id="overview--1nf"
          data-rel-position="relative"
          data-rel-x="0"
-         data-rel-y="450"
-         data-scale="3">
+         data-rel-y="-500"
+         data-scale="2">
     </div>
 
     <!-- 2NF -->