Changed homepage, improved css and added roots, new notes (some not finished yet)

2 files changed, 104 insertions, 4 deletions

diff --git a/lessons/fisika/atom/atom.html b/lessons/fisika/atom/atom.html
index bc75271..a15d8dc 100644
--- a/lessons/fisika/atom/atom.html
+++ b/lessons/fisika/atom/atom.html
@@ -66,14 +66,46 @@
                 <strong>Atomic Mass</strong> - <strong>Atomic Number</strong> = Neutron Number
             <h2 id="proton-electron-neutron-count--example">Examples</h2>
             <div class="flex" style="width: 100%;">
-                <img src="/assets/images/atoms/natrium_symbol.svg" alt="" style="max-width: 200px; margin: 20px;">
+                <img src="/assets/images/atoms/natrium_symbol.svg" alt=""
+                    style="max-width: 200px !important; margin: 20px;">
                 <p>
                     <strong>Proton:</strong> 11<br>
                     <strong>Electron:</strong> 11<br>
                     <strong>Neutron:</strong> 23 - 11 = 12
                 </p>
             </div>
+            <div class="flex" style="width: 100%;">
+                <img src="/assets/images/atoms/carbon_symbol.svg" alt=""
+                    style="max-width: 200px !important; margin: 20px;">
+                <p>
+                    <strong>Proton:</strong> 6<br>
+                    <strong>Electron:</strong> 6<br>
+                    <strong>Neutron:</strong> 12 - 6 = 6
+                </p>
+            </div>
             <h1 id="ions">Ions</h1>
+            Electron count will be added or subtracted by ion charge. <br>
+            If the ion charge is positive, subtract the electron count. <br>
+            If the ion charge is negative, add the electron count. For example:
+            <div class="flex" style="width: 100%;">
+                <img src="/assets/images/atoms/carbon_symbol_ion.svg" alt=""
+                    style="max-width: 200px !important; margin: 20px;">
+                <p>
+                    <strong>Proton:</strong> 6<br>
+                    <strong>Electron:</strong> 6 + 4 = 10<br>
+                    <strong>Neutron:</strong> 12 - 6 = 6
+                </p>
+            </div>
+            <div class="flex" style="width: 100%;">
+                <img src="/assets/images/atoms/magnesium_symbol_ion.svg" alt=""
+                    style="max-width: 200px !important; margin: 20px;">
+                <p>
+                    <strong>Proton:</strong> 6<br>
+                    <strong>Electron:</strong> 6 - 2 = 4<br>
+                    <strong>Neutron:</strong> 24 - 12 = 12
+                </p>
+            </div>
+
         </section>
     </div>
 
diff --git a/lessons/fisika/atom/electron-config.html b/lessons/fisika/atom/electron-config.html
index 02120f8..31111d9 100644
--- a/lessons/fisika/atom/electron-config.html
+++ b/lessons/fisika/atom/electron-config.html
@@ -48,6 +48,29 @@
             <div class="flex flex-center">
                 <img src="/assets/images/atoms/electron_configuration.svg" alt="">
             </div>
+            <h2 id="electron-config--max-electron">Sub-Shell and Maximum Electron</h2>
+            <table>
+                <tr>
+                    <th>Sub-Shell</th>
+                    <th>Maximum Electron</th>
+                </tr>
+                <tr>
+                    <td>s</td>
+                    <td>2</td>
+                </tr>
+                <tr>
+                    <td>p</td>
+                    <td>6</td>
+                </tr>
+                <tr>
+                    <td>d</td>
+                    <td>10</td>
+                </tr>
+                <tr>
+                    <td>f</td>
+                    <td>14</td>
+                </tr>
+            </table>
             <h2 id="electron-config--how-to-read">How to Read / Order</h2>
             <ol>
                 <li>Start from the top-most arrow</li>
@@ -55,18 +78,63 @@
                 <ol>
                     <li>1s, 2s, 2p, 3s</li>
                 </ol>
-                <li>Exponent the electron with maximum number of electron until the total of exponents is equals to Atom Number.</li>
-                <li>If the total is more than Atom Number, subtract the the last electron's exponent to make the total equals to the atom number.</li>
+                <li>Exponent the electron with maximum number of sub-shell until the total of exponents is equals to
+                    Atom Number.</li>
+                <li>If the total is more than Atom Number, subtract the the last electron's exponent to make the total
+                    equals to the atom number.</li>
             </ol>
             <h2 id="electron-config--examples">Examples</h2>
+            <div class="flex flex-center" style="width: 100%;">
+                <div class="flex column">
+                    <img src="/assets/images/atoms/magnesium_symbol.svg" alt=""
+                        style="max-width: 200px !important; margin: 20px;">
+                    <span>1s<sup>2</sup>, 2s<sup>2</sup>, 2p<sup>6</sup>, 3s<sup>2</sup>, 3p<sup>2</sup></span>
+                </div>
+                <div class="flex column" style="padding-left: 30px;">
+                    <img src="/assets/images/atoms/lead_symbol.svg" alt=""
+                        style="max-width: 200px !important; margin: 20px;">
+                    <span>1s<sup>2</sup>, 2s<sup>2</sup>, 2p<sup>6</sup>, 3s<sup>2</sup>, 3p<sup>6</sup>,
+                        4s<sup>2</sup>, 3d<sup>10</sup>, 4p<sup>3</sup></span>
+                </div>
+            </div>
             <h1 id="electron-config-based-on-shell">Electron Configuration Based on Shell</h1>
             <div class="flex flex-center">
                 <img src="/assets/images/atoms/oxygen.svg" alt="" style="max-width: 300px;">
             </div>
             <p class="subtitle">an atom figure with shell labels (Oxygen)</p>
+            <h2 id="electron-config-based-on-shell--max">Maximum Electron</h2>
+            <table>
+                <tr>
+                    <th>Shell</th>
+                    <th>Maximum Electron</th>
+                </tr>
+                <tr>
+                    <td>K</td>
+                    <td>2</td>
+                </tr>
+                <tr>
+                    <td>L</td>
+                    <td>8</td>
+                </tr>
+                <tr>
+                    <td>M</td>
+                    <td>18</td>
+                </tr>
+                <tr>
+                    <td>N</td>
+                    <td>32</td>
+                </tr>
+                <tr>
+                    <td>...</td>
+                    <td>...</td>
+                </tr>
+            </table>
             <h2 id="electron-config-based-on-shell--example">How to Determine Electron Count</h2>
-            <table></table>
+            <ol>
+                <li>Coming soon!</li>
+            </ol>
             <h2 id="electron-config-based-on-shell--examples">Examples</h2>
+            
         </section>
     </div>