From b3b6f908e758ebc6b73e72bf298cea52997730e0 Mon Sep 17 00:00:00 2001
From: Sergei <sergej.klykow@gmail.com>
Date: Tue, 1 Oct 2024 17:07:08 +0200
Subject: [PATCH 1/4] Added styling by using Tailwind for <nav> element on
 index page

---
 .gitignore                  |  17 ++
 docs/index.html             | 403 ++++++++++++++++++++----------------
 docs/index_page_styling.css |  75 +++++++
 docs/package.json           |   5 +
 docs/tailwind.config.js     |   9 +
 5 files changed, 325 insertions(+), 184 deletions(-)
 create mode 100644 docs/index_page_styling.css
 create mode 100644 docs/package.json
 create mode 100644 docs/tailwind.config.js
diff --git a/.gitignore b/.gitignore
index d73cd8c..ad8e2ca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -99,3 +99,20 @@ venv.bak/
 # Spyder project settings
 .spyderproject
 .spyproject
+
+# NPM associated stuff
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/docs/index.html b/docs/index.html
index e2f7468..1ce1aed 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,197 +1,232 @@
-<!DOCTYPE html> <!-- This designates that this is HTML 5 file (W3 schools) -->
-<html lang="en">  <!-- Root element of an HTML page (W3 schools) -->
+<!DOCTYPE html>
+<!-- This designates that this is HTML 5 file (W3 schools) -->
+<html lang="en">
+  <!-- Root element of an HTML page (W3 schools) -->
 
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="author" content="S.K.">
-    <meta name="licensed" content="MIT">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="author" content="S.K." />
+    <meta name="licensed" content="MIT" />
 
     <title>Project "zernpy"</title>
 
     <!-- Favicon specification from the local file -->
-    <link rel="icon" href="favicon_zernpy.ico" type="image/x-icon">
+    <link rel="icon" href="favicon_zernpy.ico" type="image/x-icon" />
 
-    <!-- Load page specific script --> 
+    <!-- Load page specific script -->
     <script src="index_page.js"></script>
 
-    <!-- Load external overall applicable stylesheets -->
-    <link rel="stylesheet" href="index_about_styling.css">
+    <!-- Page specific styling -->
+    <link rel="stylesheet" href="./index_page_styling.css" />
 
-    <!-- Page-specific styles -->
-    <style>
-        /* This class contains all the text inside */
-        .contentContainer{
-            z-index: 1; position: relative; /* Position relative needed for z-index choosing*/
-        }
-        /* Below - setting the background image for the page */
-        .bgImage{
-            background-image: url('half_pyramid_zerns.png');
-            background-position-x: left; 
-            /* background-position: center; */
-            /* background-repeat: no-repeat; */
-            background-repeat: repeat;
-            background-size: contain;
-            width: 100%; height: 100%;
-            opacity: 0.25; 
-            position: absolute; top: 0; left: 0; /* Allows to manipulate the position inside of mainBody */
-            z-index: 0;  /* NOTE this z-index because setting absolute position and opacity put their own rules in z-indexing */  
-            /* background-color: yellow; */
-        }
-        /* Styling with inline elements with code */
-        .commandCode{
-            font-style: italic; font-weight: bold; font-family: 'Consolas', 'Trebuchet MS', Arial; font-size: 0.98em;
-        }
-        /* Style for each text string */
-        .textString{
-            margin: 0.25em;
-        }
-        #page_footer{
-            font-size: 0.9rem; font-family: 'Courier New', Courier, monospace; padding-top: 4em;
-        }
-        /* Inline elements means various elements (inputs, buttons, selector) placed on the single line on the page */
-        .input-element{
-            margin-left: 0.2em; margin-right: 0.2em; font-size: 0.95em;
-        }
-        /* Labels placed on the single line on the page */
-        .label-element{
-            margin-left: 0.25em; margin-right: 0.15em;
-        }
-        /* Specific style for placeholder for conversions */
-        #conversionString{
-            margin-left: 0.25em; border: 1.5px solid blue; padding: 0.32em; border-radius: 1em; background-color: whitesmoke;
-            font-size: 0.98rem;
-        }
-        /* Initial style for some div-s */
-        #selectorElement, #getIndicesBtn, #ordersElement{
-                display: inline-block;
-            }
-        /* Rearrange elements for opening website on screens 750px <= width <= 1220px */
-        @media screen and (max-width: 1220px) and (min-width: 750px){
-            .inputsOrdersConversion{
-                display: flex; flex-direction: row;
-            }
-            #selectorElement, #getIndicesBtn, #ordersElement{
-                display: inline-block;
-            }
-            .label-element, .input-element{
-                margin-top: 0.25em; margin-bottom: 0.25em;
-            }
-            #conversionString{
-                display: block; max-width: fit-content; margin-top: 0.35em; font-size: 0.96em;
-            }
-        }
-        /* Rearrange elements for opening website on mobile phones */
-        @media screen and (max-width: 749px){
-            #selectorElement, #getIndicesBtn, #ordersElement{
-                display: block;
-            }
-            #conversionString{
-                display: block; max-width: fit-content; margin-top: 0.35em; font-size: 0.94em;
-            }
-            .label-element, .input-element{
-                margin: 0.25em 0.05em;
-            }
-        }
-    </style>
-</head>
+    <!-- Load external overall applicable stylesheets -->
+    <link rel="stylesheet" href="./index_about_styling.css" />
 
-<body>
-    <!-- Overall div element - for the flexbox aligning -->
-    <div class="flexboxContainer">
+    <!-- Add Tailwind using CDN, local installation through npm is used only for getting autocompletion -->
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
 
-        <!-- Navigation panel, some elements and inspiration get from W3 Schools, better use <nav> element -->
-        <nav class="navbar">
-            <a class="link" href="index.html"> Main </a>
-            <a class="link" href="./api/zernpy/zernikepol.html"> API of <em> zernikepol </em> module </a>
-            <a class="link" href="./api/zernpy/zernpsf.html"> API of <em> zernpsf </em> module </a>
-            <a class="link" href="about.html"> About </a>
-        </nav>
+  <body>
+    <!-- Make flexbox with breakpoint rule: for md and more, set elements in columns, for md and less - in rows -->
+    <div class="flex flex-col lg:flex-row">
+      <!-- Navigation panel, for lg and more: elements in rows, for less - in columns -->
+      <nav
+        class="flex flex-row flex-wrap lg:flex-col justify-evenly lg:justify-around content-center bg-zinc-500 text-center p-2"
+      >
+        <a
+          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350 mx-3 my-2 lg:my-2 lg:mx-4"
+          href="#"
+        >
+          Home
+        </a>
+        <a
+          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350 mx-3 my-2 lg:my-6 lg:mx-4"
+          href="./api/zernpy/zernikepol.html"
+        >
+          API of <em class="font-mono"> zernikepol </em> module
+        </a>
+        <a
+          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350 mx-3 my-2 lg:my-6 lg:mx-4"
+          href="./api/zernpy/zernpsf.html"
+        >
+          API of <em class="font-mono"> zernpsf </em> module
+        </a>
+        <a
+          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350 mx-3 my-2 lg:my-2 lg:mx-4"
+          href="./about.html"
+        >
+          About
+        </a>
+      </nav>
 
-        <!-- Main content of the webpage -->
-        <main class="mainBody">
-            <div class="contentContainer">
-                <header>
-                    <h3 class="header"> Welcome! </h3>
-                    <div class="header">
-                        I am pleased that you've found it interesting to take a look on my Python library <strong>"zernpy"</strong>. 
-                    </div>
-                    <hr>
-                </header>
-                <section>
-                    <div>
-                        <h4 class="paragraph-header"> Installation instructions </h4>
-                        <p class="textString">
-                            The straightforward way to install the library - to use the following command for the <em> pip </em> package installer:
-                            <code class="commandCode"> pip install zernpy </code> <br>
-                            For updating the already install package use the command: 
-                            <code class="commandCode"> pip install --upgrade zernpy </code> or <code class="commandCode"> pip install -U zernpy </code> <br>
-                            The requirements for installation: Python version >= 3.8, libraries <em>numpy</em>, <em>matplotlib</em> and <em>scipy</em>. 
-                            Check the <a class="link" href="https://pypi.org/project/zernpy/" target="_blank">webpage</a> of this library on the PyPi package index.
-                        </p>
-                    </div>
-                    <div>
-                        <h4 class="paragraph-header"> Import and class initialization </h4>
-                        <p class="textString">
-                            The basic import command for accessing Zernike polynomial class: <code class="commandCode"> from zernpy import ZernPol </code> <br>
-                            Initialization of the <em>ZernPol</em> class instance: <code class="commandCode">zp = ZernPol(m=-2, n=2) </code> <br>
-                            This instance gives an access to the calculation methods related to the Zernike polynomials properties. <br>
-                            Other acceptable initialization parameters names: <span style="font-style:italic"> osa_index / noll_index / fringe_index </span> or 
-                            for shortness <span style="font-style:italic">osa / noll / fringe</span>, e.g.:
-                            <code class="commandCode">zp = ZernPol(osa_index=3)</code> or <code class="commandCode">zp = ZernPol(osa=3)</code>
-                        </p>
-                    </div>
-                    <div>
-                        <h4 class="paragraph-header"> Calculation methods </h4>
-                        <p class="textString">
-                            For getting information about this library, please, refer to the API Dictionary tab and README section from 
-                            <a class="link" href="https://pypi.org/project/zernpy/">page</a>, or on the 
-                            <a class="link" href="https://github.com/sklykov/zernpy">repository</a>.  <br>
-                            For accessing the full list of implemented methods for <em>ZernPol</em> class (Zernike polynomial) and <em>ZernPSF</em> class 
-                            (calculation 2D PSF for formed by the microscopic systems associated with the phase profile described by the Zernike polynomial) 
-                            please follow the link to the API Dictionary on the left navigation tab. <br>
-                            This and "About" pages are also used for honing my skills in Frontend development. 
-                            Thus, not everything on this page is intended solely to reveal the features of the implemented library.
-                        </p>
-                    </div>
-                    <div>
-                        <h4> Definition of Zernike polynomial </h4>
-                        <div>
-                            <div class="textString">
-                                Specify below the index (indices) for Zernike polynomial specification
-                                (see all listed indices <a class="link" href="https://en.wikipedia.org/wiki/Zernike_polynomials">here</a>).
-                            </div>
-                            <div id="inputsOrdersConversion">
-                                <div id="selectorElement"> 
-                                    <label class="label-element"> Select the indexing type: </label>
-                                    <select class="input-element" name="Index type">
-                                        <option value="m,n" selected>Radial, Angular</option>  <!-- selected="selected" for setting it as the default value -->
-                                        <option value="osa">OSA/ANSI</option>
-                                        <option value="noll">Noll</option>
-                                        <option value="fringe">Fringe</option>
-                                    </select>
-                                </div>
-                                <div id="ordersElement">
-                                    <span class="label-element" id="ordersLabel"> orders: </span>
-                                    <label class="label-element" tag="n_order_label" id="firstOrderLabel"> n = </label>
-                                    <input class="input-element" type="number" tag="n_order" name="n" min="0" max="50" size="4" minlength="1" maxlength="3" value="0" id="firstInputOrder">
-                                    <label class="label-element" tag="m_order_label" id="secondOrderLabel"> m = </label>
-                                    <input class="input-element" type="number" tag="m_order" name="m" min="-50" max="50" size="4" minlength="1" maxlength="3" value="0" id="secondInputOrder">
-                                </div>
-                                <input class="input-element" type="button" value="Get Indices/Orders" id="getIndicesBtn">
-                                <span id="conversionString"> Click "Get Indices/Orders" to get here conversion </span>
-                            </div>
-                        </div>
-                    </div>
-                </section>
+      <!-- Main content of the webpage -->
+      <main class="mainBody">
+        <div class="contentContainer">
+          <header>
+            <h3 class="header">Welcome!</h3>
+            <div class="header">
+              I am pleased that you've found it interesting to take a look on my
+              Python library <strong>"zernpy"</strong>.
             </div>
-            <!-- Below - image element that used for setting it as the background image -->
-            <div class="bgImage"></div> 
-            <!-- Footer with some info -->
-            <footer id="page_footer"> 2022-2024 S.K., MIT licensed </footer>
-        </main>
-    </div>  
-</body>
-
-</html>
\ No newline at end of file
+            <hr />
+          </header>
+          <section>
+            <div>
+              <h4 class="paragraph-header">Installation instructions</h4>
+              <p class="textString">
+                The straightforward way to install the library - to use the
+                following command for the <em> pip </em> package installer:
+                <code class="commandCode"> pip install zernpy </code> <br />
+                For updating the already install package use the command:
+                <code class="commandCode"> pip install --upgrade zernpy </code>
+                or <code class="commandCode"> pip install -U zernpy </code>
+                <br />
+                The requirements for installation: Python version >= 3.8,
+                libraries <em>numpy</em>, <em>matplotlib</em> and
+                <em>scipy</em>. Check the
+                <a
+                  class="link"
+                  href="https://pypi.org/project/zernpy/"
+                  target="_blank"
+                  >webpage</a
+                >
+                of this library on the PyPi package index.
+              </p>
+            </div>
+            <div>
+              <h4 class="paragraph-header">Import and class initialization</h4>
+              <p class="textString">
+                The basic import command for accessing Zernike polynomial class:
+                <code class="commandCode"> from zernpy import ZernPol </code>
+                <br />
+                Initialization of the <em>ZernPol</em> class instance:
+                <code class="commandCode">zp = ZernPol(m=-2, n=2) </code> <br />
+                This instance gives an access to the calculation methods related
+                to the Zernike polynomials properties. <br />
+                Other acceptable initialization parameters names:
+                <span style="font-style: italic">
+                  osa_index / noll_index / fringe_index
+                </span>
+                or for shortness
+                <span style="font-style: italic">osa / noll / fringe</span>,
+                e.g.:
+                <code class="commandCode">zp = ZernPol(osa_index=3)</code> or
+                <code class="commandCode">zp = ZernPol(osa=3)</code>
+              </p>
+            </div>
+            <div>
+              <h4 class="paragraph-header">Calculation methods</h4>
+              <p class="textString">
+                For getting information about this library, please, refer to the
+                API Dictionary tab and README section from
+                <a class="link" href="https://pypi.org/project/zernpy/">page</a
+                >, or on the
+                <a class="link" href="https://github.com/sklykov/zernpy"
+                  >repository</a
+                >. <br />
+                For accessing the full list of implemented methods for
+                <em>ZernPol</em> class (Zernike polynomial) and
+                <em>ZernPSF</em> class (calculation 2D PSF for formed by the
+                microscopic systems associated with the phase profile described
+                by the Zernike polynomial) please follow the link to the API
+                Dictionary on the left navigation tab. <br />
+                This and "About" pages are also used for honing my skills in
+                Frontend development. Thus, not everything on this page is
+                intended solely to reveal the features of the implemented
+                library.
+              </p>
+            </div>
+            <div>
+              <h4>Definition of Zernike polynomial</h4>
+              <div>
+                <div class="textString">
+                  Specify below the index (indices) for Zernike polynomial
+                  specification (see all listed indices
+                  <a
+                    class="link"
+                    href="https://en.wikipedia.org/wiki/Zernike_polynomials"
+                    >here</a
+                  >).
+                </div>
+                <div id="inputsOrdersConversion">
+                  <div id="selectorElement">
+                    <label class="label-element">
+                      Select the indexing type:
+                    </label>
+                    <select class="input-element" name="Index type">
+                      <option value="m,n" selected>Radial, Angular</option>
+                      <!-- selected="selected" for setting it as the default value -->
+                      <option value="osa">OSA/ANSI</option>
+                      <option value="noll">Noll</option>
+                      <option value="fringe">Fringe</option>
+                    </select>
+                  </div>
+                  <div id="ordersElement">
+                    <span class="label-element" id="ordersLabel">
+                      orders:
+                    </span>
+                    <label
+                      class="label-element"
+                      tag="n_order_label"
+                      id="firstOrderLabel"
+                    >
+                      n =
+                    </label>
+                    <input
+                      class="input-element"
+                      type="number"
+                      tag="n_order"
+                      name="n"
+                      min="0"
+                      max="50"
+                      size="4"
+                      minlength="1"
+                      maxlength="3"
+                      value="0"
+                      id="firstInputOrder"
+                    />
+                    <label
+                      class="label-element"
+                      tag="m_order_label"
+                      id="secondOrderLabel"
+                    >
+                      m =
+                    </label>
+                    <input
+                      class="input-element"
+                      type="number"
+                      tag="m_order"
+                      name="m"
+                      min="-50"
+                      max="50"
+                      size="4"
+                      minlength="1"
+                      maxlength="3"
+                      value="0"
+                      id="secondInputOrder"
+                    />
+                  </div>
+                  <input
+                    class="input-element"
+                    type="button"
+                    value="Get Indices/Orders"
+                    id="getIndicesBtn"
+                  />
+                  <span id="conversionString">
+                    Click "Get Indices/Orders" to get here conversion
+                  </span>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+        <!-- Below - image element that used for setting it as the background image -->
+        <div class="bgImage"></div>
+        <!-- Footer with some info -->
+        <footer id="page_footer">2022-2024 S.K., MIT licensed</footer>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/docs/index_page_styling.css b/docs/index_page_styling.css
new file mode 100644
index 0000000..7e00a41
--- /dev/null
+++ b/docs/index_page_styling.css
@@ -0,0 +1,75 @@
+ /* This class contains all the text inside */
+ .contentContainer{
+    z-index: 1; position: relative; /* Position relative needed for z-index choosing*/
+}
+/* Below - setting the background image for the page */
+.bgImage{
+    background-image: url('half_pyramid_zerns.png');
+    background-position-x: left; 
+    /* background-position: center; */
+    /* background-repeat: no-repeat; */
+    background-repeat: repeat;
+    background-size: contain;
+    width: 100%; height: 100%;
+    opacity: 0.25; 
+    position: absolute; top: 0; left: 0; /* Allows to manipulate the position inside of mainBody */
+    z-index: 0;  /* NOTE this z-index because setting absolute position and opacity put their own rules in z-indexing */  
+    /* background-color: yellow; */
+}
+/* Styling with inline elements with code */
+.commandCode{
+    font-style: italic; font-weight: bold; font-family: 'Consolas', 'Trebuchet MS', Arial; font-size: 0.98em;
+}
+/* Style for each text string */
+.textString{
+    margin: 0.25em;
+}
+#page_footer{
+    font-size: 0.9rem; font-family: 'Courier New', Courier, monospace; padding-top: 4em;
+}
+/* Inline elements means various elements (inputs, buttons, selector) placed on the single line on the page */
+.input-element{
+    margin-left: 0.2em; margin-right: 0.2em; font-size: 0.95em;
+}
+/* Labels placed on the single line on the page */
+.label-element{
+    margin-left: 0.25em; margin-right: 0.15em;
+}
+/* Specific style for placeholder for conversions */
+#conversionString{
+    margin-left: 0.25em; border: 1.5px solid blue; padding: 0.32em; border-radius: 1em; background-color: whitesmoke;
+    font-size: 0.98rem;
+}
+/* Initial style for some div-s */
+#selectorElement, #getIndicesBtn, #ordersElement{
+        display: inline-block;
+    }
+
+/* Adaptive rules, media queries */
+/* Rearrange elements for opening website on screens 750px <= width <= 1220px */
+@media screen and (max-width: 1220px) and (min-width: 750px){
+    .inputsOrdersConversion{
+        display: flex; flex-direction: row;
+    }
+    #selectorElement, #getIndicesBtn, #ordersElement{
+        display: inline-block;
+    }
+    .label-element, .input-element{
+        margin-top: 0.25em; margin-bottom: 0.25em;
+    }
+    #conversionString{
+        display: block; max-width: fit-content; margin-top: 0.35em; font-size: 0.96em;
+    }
+}
+/* Rearrange elements for opening website on mobile phones */
+@media screen and (max-width: 749px){
+    #selectorElement, #getIndicesBtn, #ordersElement{
+        display: block;
+    }
+    #conversionString{
+        display: block; max-width: fit-content; margin-top: 0.35em; font-size: 0.94em;
+    }
+    .label-element, .input-element{
+        margin: 0.25em 0.05em;
+    }
+}
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 0000000..7c4095b
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,5 @@
+{
+  "optionalDependencies": {
+    "tailwindcss": "^3.4.13"
+  }
+}
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
new file mode 100644
index 0000000..d947ab1
--- /dev/null
+++ b/docs/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

From f912d9bb7fc179c95822196feb7cd624e4f10e31 Mon Sep 17 00:00:00 2001
From: Sergei <sergej.klykow@gmail.com>
Date: Sun, 6 Oct 2024 22:36:35 +0200
Subject: [PATCH 2/4] Added styling for the header on index page

---
 docs/index.html | 36 ++++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 1ce1aed..423f216 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -30,10 +30,11 @@
 
   <body>
     <!-- Make flexbox with breakpoint rule: for md and more, set elements in columns, for md and less - in rows -->
-    <div class="flex flex-col lg:flex-row">
-      <!-- Navigation panel, for lg and more: elements in rows, for less - in columns -->
+    <main class="flex flex-col lg:flex-row">
+      <!-- Navigation panel, for lg and more: elements composed in rows, for less - in columns -->
       <nav
-        class="flex flex-row flex-wrap lg:flex-col justify-evenly lg:justify-around content-center bg-zinc-500 text-center p-2"
+        class="flex flex-row flex-wrap lg:flex-col justify-evenly lg:justify-around content-center bg-zinc-500 text-center p-2
+        text-lg font-serif"
       >
         <a
           class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350 mx-3 my-2 lg:my-2 lg:mx-4"
@@ -61,17 +62,20 @@
         </a>
       </nav>
 
-      <!-- Main content of the webpage -->
-      <main class="mainBody">
-        <div class="contentContainer">
-          <header>
-            <h3 class="header">Welcome!</h3>
-            <div class="header">
-              I am pleased that you've found it interesting to take a look on my
-              Python library <strong>"zernpy"</strong>.
-            </div>
-            <hr />
+      <!-- Main content of the webpage, position - relative for placing an image on the background -->
+      <div class="relative font-sans">  
+
+        <div class="contentContainer m-1">
+          
+          <!-- Gradually implement Tailwind styling, one element after another -->
+          <header class="text-center bg-slate-200/80 p-2 my-1 me-2">
+            <h3 class="uppercase font-mono font-bold text-2xl">Welcome!</h3>
+            <p class="text-xl">
+              I am pleased that you are visiting this page with a few details about the
+              Python library <strong>"zernpy"</strong>
+            </p>
           </header>
+
           <section>
             <div>
               <h4 class="paragraph-header">Installation instructions</h4>
@@ -225,8 +229,8 @@ <h4>Definition of Zernike polynomial</h4>
         <!-- Below - image element that used for setting it as the background image -->
         <div class="bgImage"></div>
         <!-- Footer with some info -->
-        <footer id="page_footer">2022-2024 S.K., MIT licensed</footer>
-      </main>
-    </div>
+        <footer id="page_footer" class="ms-2 p-1 text-base">2022-2024 S.K., MIT licensed</footer>
+      </div>
+    </main>
   </body>
 </html>

From b77c5b1cdd0a12a31e31e813aa36fb9be08357fa Mon Sep 17 00:00:00 2001
From: Sergei <sergej.klykow@gmail.com>
Date: Tue, 8 Oct 2024 18:13:42 +0200
Subject: [PATCH 3/4] Removed almost all custom styles for index page, added
 Tailwind classes

---
 docs/index.html             | 313 +++++++++++++++++++++---------------
 docs/index_page.js          |   8 +-
 docs/index_page_styling.css |  66 +-------
 3 files changed, 192 insertions(+), 195 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 423f216..5c9369e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -30,32 +30,31 @@
 
   <body>
     <!-- Make flexbox with breakpoint rule: for md and more, set elements in columns, for md and less - in rows -->
-    <main class="flex flex-col lg:flex-row">
+    <main class="flex flex-col lg:h-dvh lg:flex-row">
       <!-- Navigation panel, for lg and more: elements composed in rows, for less - in columns -->
       <nav
-        class="flex flex-row flex-wrap lg:flex-col justify-evenly lg:justify-around content-center bg-zinc-500 text-center p-2
-        text-lg font-serif"
+        class="flex flex-row flex-wrap lg:flex-col lg:justify-start lg:space-y-28 lg:space-x-0 justify-around content-center space-x-4 bg-zinc-500 text-center p-2 text-lg font-serif"
       >
         <a
-          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350 mx-3 my-2 lg:my-2 lg:mx-4"
+          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350 lg:mt-24"
           href="#"
         >
           Home
         </a>
         <a
-          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350 mx-3 my-2 lg:my-6 lg:mx-4"
+          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350"
           href="./api/zernpy/zernikepol.html"
         >
           API of <em class="font-mono"> zernikepol </em> module
         </a>
         <a
-          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350 mx-3 my-2 lg:my-6 lg:mx-4"
+          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350"
           href="./api/zernpy/zernpsf.html"
         >
           API of <em class="font-mono"> zernpsf </em> module
         </a>
         <a
-          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350 mx-3 my-2 lg:my-2 lg:mx-4"
+          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350"
           href="./about.html"
         >
           About
@@ -63,173 +62,235 @@
       </nav>
 
       <!-- Main content of the webpage, position - relative for placing an image on the background -->
-      <div class="relative font-sans">  
-
-        <div class="contentContainer m-1">
-          
+      <div class="relative font-sans">
+        <div class="relative z-10 m-1">
           <!-- Gradually implement Tailwind styling, one element after another -->
-          <header class="text-center bg-slate-200/80 p-2 my-1 me-2">
+          <header class="text-center 2xl:text-left bg-slate-200/80 p-2 m-1">
             <h3 class="uppercase font-mono font-bold text-2xl">Welcome!</h3>
             <p class="text-xl">
-              I am pleased that you are visiting this page with a few details about the
-              Python library <strong>"zernpy"</strong>
+              I am pleased that you are visiting this page with a few details
+              about the Python library <strong>"zernpy"</strong>
             </p>
           </header>
 
-          <section>
-            <div>
-              <h4 class="paragraph-header">Installation instructions</h4>
-              <p class="textString">
-                The straightforward way to install the library - to use the
+          <article class="mt-2 font-medium">
+            <section class="m-1 p-1 xl:size-11/12 2xl:size-5/6">
+              <h4 class="text-left text-xl font-semibold mb-1">
+                Brief Installation instructions
+              </h4>
+              <p class="text-justify text-lg">
+                The straightforward way to install the library is to use the
                 following command for the <em> pip </em> package installer:
-                <code class="commandCode"> pip install zernpy </code> <br />
+                <code class="font-mono italic font-bold">
+                  pip install zernpy</code
+                >
+              </p>
+              <p class="text-justify text-lg">
                 For updating the already install package use the command:
-                <code class="commandCode"> pip install --upgrade zernpy </code>
-                or <code class="commandCode"> pip install -U zernpy </code>
-                <br />
+                <code class="font-mono italic font-bold">
+                  pip install --upgrade zernpy
+                </code>
+                or
+                <code class="font-mono italic font-bold">
+                  pip install -U zernpy
+                </code>
+              </p>
+              <p class="text-justify text-lg">
                 The requirements for installation: Python version >= 3.8,
                 libraries <em>numpy</em>, <em>matplotlib</em> and
                 <em>scipy</em>. Check the
                 <a
-                  class="link"
+                  class="link font-semibold"
                   href="https://pypi.org/project/zernpy/"
                   target="_blank"
                   >webpage</a
                 >
                 of this library on the PyPi package index.
               </p>
-            </div>
-            <div>
-              <h4 class="paragraph-header">Import and class initialization</h4>
-              <p class="textString">
+            </section>
+
+            <section class="m-1 p-1 xl:size-11/12 2xl:size-5/6">
+              <h4 class="text-left text-xl font-semibold mb-1">
+                Import and class initialization
+              </h4>
+              <p class="text-justify text-lg">
                 The basic import command for accessing Zernike polynomial class:
-                <code class="commandCode"> from zernpy import ZernPol </code>
-                <br />
+                <code class="font-mono italic font-bold">
+                  from zernpy import ZernPol
+                </code>
+              </p>
+              <p class="text-justify text-lg">
                 Initialization of the <em>ZernPol</em> class instance:
-                <code class="commandCode">zp = ZernPol(m=-2, n=2) </code> <br />
+                <code class="font-mono italic font-bold">
+                  zp = ZernPol(m=-2, n=2)
+                </code>
+              </p>
+              <p class="text-justify text-lg">
                 This instance gives an access to the calculation methods related
-                to the Zernike polynomials properties. <br />
-                Other acceptable initialization parameters names:
-                <span style="font-style: italic">
+                to the Zernike polynomials properties. Other acceptable
+                initialization parameters names:
+                <span class="italic">
                   osa_index / noll_index / fringe_index
                 </span>
                 or for shortness
-                <span style="font-style: italic">osa / noll / fringe</span>,
-                e.g.:
-                <code class="commandCode">zp = ZernPol(osa_index=3)</code> or
-                <code class="commandCode">zp = ZernPol(osa=3)</code>
+                <span class="italic">osa / noll / fringe</span>, e.g.:
+                <code class="font-mono italic font-bold"
+                  >zp = ZernPol(osa_index=3)</code
+                >
+                or
+                <code class="font-mono italic font-bold"
+                  >zp = ZernPol(osa=3)</code
+                >
               </p>
-            </div>
-            <div>
-              <h4 class="paragraph-header">Calculation methods</h4>
-              <p class="textString">
+            </section>
+
+            <section class="m-1 p-1 xl:size-11/12 2xl:size-5/6">
+              <h4 class="text-left text-xl font-semibold mb-1">
+                Calculation methods
+              </h4>
+              <p class="text-justify text-lg">
                 For getting information about this library, please, refer to the
                 API Dictionary tab and README section from
-                <a class="link" href="https://pypi.org/project/zernpy/">page</a
+                <a
+                  class="link font-semibold"
+                  href="https://pypi.org/project/zernpy/"
+                  >page</a
                 >, or on the
-                <a class="link" href="https://github.com/sklykov/zernpy"
+                <a
+                  class="link font-semibold"
+                  href="https://github.com/sklykov/zernpy"
                   >repository</a
-                >. <br />
+                >
+              </p>
+              <p class="text-justify text-lg">
                 For accessing the full list of implemented methods for
                 <em>ZernPol</em> class (Zernike polynomial) and
                 <em>ZernPSF</em> class (calculation 2D PSF for formed by the
                 microscopic systems associated with the phase profile described
                 by the Zernike polynomial) please follow the link to the API
-                Dictionary on the left navigation tab. <br />
-                This and "About" pages are also used for honing my skills in
-                Frontend development. Thus, not everything on this page is
-                intended solely to reveal the features of the implemented
-                library.
+                Dictionary on the left navigation tab.
+              </p>
+            </section>
+
+            <section class="m-1 p-1 xl:size-11/12 2xl:size-5/6">
+              <h4 class="text-left text-xl font-semibold mb-1">
+                Development Note
+              </h4>
+              <p class="text-justify text-lg">
+                This page, along with the "About" page, are also used to
+                showcase my skills in frontend development. This one was styled
+                using Tailwind classes. Thus, not everything on this page is
+                meant solely to reveal the features of the implemented library.
+              </p>
+            </section>
+
+            <section class="m-1 p-1 xl:size-11/12 2xl:size-5/6">
+              <h4 class="text-left text-xl font-semibold mb-1">
+                Definition of Zernike polynomial
+              </h4>
+              <p class="text-justify text-lg">
+                Specify below the index (indices) for Zernike polynomial
+                specification (see all listed indices
+                <a
+                  class="link font-semibold"
+                  href="https://en.wikipedia.org/wiki/Zernike_polynomials"
+                  >here</a
+                >).
               </p>
-            </div>
-            <div>
-              <h4>Definition of Zernike polynomial</h4>
-              <div>
-                <div class="textString">
-                  Specify below the index (indices) for Zernike polynomial
-                  specification (see all listed indices
-                  <a
-                    class="link"
-                    href="https://en.wikipedia.org/wiki/Zernike_polynomials"
-                    >here</a
-                  >).
+
+              <!-- Element with selectors -->
+              <div
+                class="flex flex-col sm:flex-row flex-wrap items-center my-2 text-lg"
+              >
+                <div class="inline-flex text-center items-center mr-2 my-2">
+                  <label class="mr-2"> Select the indexing type: </label>
+                  <select
+                    class="bg-slate-300 px-1 py-1 round"
+                    name="Index type"
+                  >
+                    <option value="m,n" selected>Radial, Angular</option>
+                    <option value="osa">OSA/ANSI</option>
+                    <option value="noll">Noll</option>
+                    <option value="fringe">Fringe</option>
+                  </select>
+                </div>
+
+                <div
+                  class="inline-flex text-center items-center ml-2 mr-6 my-2"
+                >
+                  <span class="mr-2" id="ordersLabel"> Orders: </span>
+                  <label
+                    class="ml-2 mr-1"
+                    tag="n_order_label"
+                    id="firstOrderLabel"
+                  >
+                    n =
+                  </label>
+                  <input
+                    class="bg-indigo-950 text-sky-100 round p-2 text-base ml-0 mr-2 rounded focus:bg-indigo-900 focus:border-indigo-500"
+                    type="number"
+                    tag="n_order"
+                    name="n"
+                    min="0"
+                    max="50"
+                    size="2"
+                    minlength="1"
+                    maxlength="2"
+                    value="0"
+                    id="firstInputOrder"
+                  />
+                  <label
+                    class="ml-1 mr-1"
+                    tag="m_order_label"
+                    id="secondOrderLabel"
+                  >
+                    m =
+                  </label>
+                  <input
+                    class="bg-indigo-950 text-sky-100 round p-2 text-base ml-0 rounded focus:bg-indigo-900 focus:border-indigo-500"
+                    type="number"
+                    tag="m_order"
+                    name="m"
+                    min="-50"
+                    max="50"
+                    size="2"
+                    minlength="1"
+                    maxlength="2"
+                    value="0"
+                    id="secondInputOrder"
+                  />
                 </div>
-                <div id="inputsOrdersConversion">
-                  <div id="selectorElement">
-                    <label class="label-element">
-                      Select the indexing type:
-                    </label>
-                    <select class="input-element" name="Index type">
-                      <option value="m,n" selected>Radial, Angular</option>
-                      <!-- selected="selected" for setting it as the default value -->
-                      <option value="osa">OSA/ANSI</option>
-                      <option value="noll">Noll</option>
-                      <option value="fringe">Fringe</option>
-                    </select>
-                  </div>
-                  <div id="ordersElement">
-                    <span class="label-element" id="ordersLabel">
-                      orders:
-                    </span>
-                    <label
-                      class="label-element"
-                      tag="n_order_label"
-                      id="firstOrderLabel"
-                    >
-                      n =
-                    </label>
-                    <input
-                      class="input-element"
-                      type="number"
-                      tag="n_order"
-                      name="n"
-                      min="0"
-                      max="50"
-                      size="4"
-                      minlength="1"
-                      maxlength="3"
-                      value="0"
-                      id="firstInputOrder"
-                    />
-                    <label
-                      class="label-element"
-                      tag="m_order_label"
-                      id="secondOrderLabel"
-                    >
-                      m =
-                    </label>
-                    <input
-                      class="input-element"
-                      type="number"
-                      tag="m_order"
-                      name="m"
-                      min="-50"
-                      max="50"
-                      size="4"
-                      minlength="1"
-                      maxlength="3"
-                      value="0"
-                      id="secondInputOrder"
-                    />
-                  </div>
+
+                <div class="my-2 mr-6">
                   <input
-                    class="input-element"
+                    class="py-1 px-2 bg-green-800 text-stone-100 rounded-lg hover:bg-green-700 hover:text-stone-50"
                     type="button"
                     value="Get Indices/Orders"
                     id="getIndicesBtn"
                   />
-                  <span id="conversionString">
-                    Click "Get Indices/Orders" to get here conversion
+                </div>
+
+                <div class="my-2 text-center">
+                  <span
+                    id="conversionString"
+                    class="py-1 px-2 bg-indigo-950 text-stone-50 rounded"
+                  >
+                    Click "Get Indices/Orders" to get the conversion between
+                    indices
                   </span>
                 </div>
               </div>
-            </div>
-          </section>
+            </section>
+          </article>
         </div>
         <!-- Below - image element that used for setting it as the background image -->
         <div class="bgImage"></div>
         <!-- Footer with some info -->
-        <footer id="page_footer" class="ms-2 p-1 text-base">2022-2024 S.K., MIT licensed</footer>
+        <footer
+          class="2xl:mt-28 xl:mt-24 lg:mt-20 mt-4 mb-4 p-1 text-lg font-medium text-center"
+        >
+          2022-2024 S.K., MIT licensed
+        </footer>
       </div>
     </main>
   </body>
diff --git a/docs/index_page.js b/docs/index_page.js
index 069e361..acbd364 100644
--- a/docs/index_page.js
+++ b/docs/index_page.js
@@ -25,7 +25,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Register event for tracing the new selected value of indexing type for Zernike polynomial from index.html
     selector.addEventListener("change", () => {
-        conversionReport.textContent = "Click button on the left to get here conversions";
+        conversionReport.textContent = 'Click "Get Indices/Orders" to get the conversion between indices';
         console.log("Selected type of polynomial specification: " + selector.value); 
         selectedPolynomialType = selector.value;  // update value each time from the HTML selector
         nOrder = -1; mOrder = -1; osaIndex = -1; nollIndex = -1; fringeIndex = -1;  // set inconsistent values as defaults
@@ -34,7 +34,7 @@ document.addEventListener("DOMContentLoaded", function () {
             case "m,n":
                 nOrder = nOrderInput.value; mOrder = mOrderInput.value;
                 ordersLabel.innerText = "orders"; firstOrderLabel.innerText = "n =";
-                secondOrderLabel.style.visibility = "visible"; secondInputOrder.style.visibility = "visible"; 
+                secondOrderLabel.style.display = "inline"; secondInputOrder.style.display = "inline"; 
                 notOrdersSelected = false; selectedNollOrFringe = false; 
                 if (nOrder === -1 || mOrder === -1) {
                     nollIndex = 0; mOrder = 0; // Set the appropriate default value
@@ -64,7 +64,7 @@ document.addEventListener("DOMContentLoaded", function () {
         }
          // The code below is executed if the orders m,n not selected and common for all cases then selected OSA / Noll / Fringe
         if (notOrdersSelected){
-            ordersLabel.innerText = "index"; secondOrderLabel.style.visibility = "hidden"; secondInputOrder.style.visibility = "hidden"; 
+            ordersLabel.innerText = "index"; secondOrderLabel.style.display = "none"; secondInputOrder.style.display = "none"; 
         }
         // The code for selected cases "noll" or "fringe", except "m,n"
         if (selectedNollOrFringe){
@@ -76,7 +76,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Register update of nOrder / OSA, Noll, Fringe indices (value is used for both cases: n order and the specific index)
     nOrderInput.addEventListener("change", () =>{
-        conversionReport.textContent = "Click button on the left to get here conversions";
+        conversionReport.textContent = 'Click "Get Indices/Orders" to get the conversion between indices';
         let isNumber = validateOrderN(); 
         // console.log("Validation result: " + isNumber);
         selectedPolynomialType = selector.value;  // update value each time from the HTML selector
diff --git a/docs/index_page_styling.css b/docs/index_page_styling.css
index 7e00a41..8dc1dcf 100644
--- a/docs/index_page_styling.css
+++ b/docs/index_page_styling.css
@@ -1,75 +1,11 @@
- /* This class contains all the text inside */
- .contentContainer{
-    z-index: 1; position: relative; /* Position relative needed for z-index choosing*/
-}
 /* Below - setting the background image for the page */
 .bgImage{
     background-image: url('half_pyramid_zerns.png');
     background-position-x: left; 
-    /* background-position: center; */
-    /* background-repeat: no-repeat; */
     background-repeat: repeat;
     background-size: contain;
     width: 100%; height: 100%;
-    opacity: 0.25; 
+    opacity: 0.20; 
     position: absolute; top: 0; left: 0; /* Allows to manipulate the position inside of mainBody */
     z-index: 0;  /* NOTE this z-index because setting absolute position and opacity put their own rules in z-indexing */  
-    /* background-color: yellow; */
-}
-/* Styling with inline elements with code */
-.commandCode{
-    font-style: italic; font-weight: bold; font-family: 'Consolas', 'Trebuchet MS', Arial; font-size: 0.98em;
-}
-/* Style for each text string */
-.textString{
-    margin: 0.25em;
-}
-#page_footer{
-    font-size: 0.9rem; font-family: 'Courier New', Courier, monospace; padding-top: 4em;
-}
-/* Inline elements means various elements (inputs, buttons, selector) placed on the single line on the page */
-.input-element{
-    margin-left: 0.2em; margin-right: 0.2em; font-size: 0.95em;
-}
-/* Labels placed on the single line on the page */
-.label-element{
-    margin-left: 0.25em; margin-right: 0.15em;
-}
-/* Specific style for placeholder for conversions */
-#conversionString{
-    margin-left: 0.25em; border: 1.5px solid blue; padding: 0.32em; border-radius: 1em; background-color: whitesmoke;
-    font-size: 0.98rem;
-}
-/* Initial style for some div-s */
-#selectorElement, #getIndicesBtn, #ordersElement{
-        display: inline-block;
-    }
-
-/* Adaptive rules, media queries */
-/* Rearrange elements for opening website on screens 750px <= width <= 1220px */
-@media screen and (max-width: 1220px) and (min-width: 750px){
-    .inputsOrdersConversion{
-        display: flex; flex-direction: row;
-    }
-    #selectorElement, #getIndicesBtn, #ordersElement{
-        display: inline-block;
-    }
-    .label-element, .input-element{
-        margin-top: 0.25em; margin-bottom: 0.25em;
-    }
-    #conversionString{
-        display: block; max-width: fit-content; margin-top: 0.35em; font-size: 0.96em;
-    }
-}
-/* Rearrange elements for opening website on mobile phones */
-@media screen and (max-width: 749px){
-    #selectorElement, #getIndicesBtn, #ordersElement{
-        display: block;
-    }
-    #conversionString{
-        display: block; max-width: fit-content; margin-top: 0.35em; font-size: 0.94em;
-    }
-    .label-element, .input-element{
-        margin: 0.25em 0.05em;
-    }
 }
\ No newline at end of file

From 0a7a2d51193962c83bedf725d1f18edd3a188dad Mon Sep 17 00:00:00 2001
From: Sergei <sergej.klykow@gmail.com>
Date: Wed, 9 Oct 2024 17:38:23 +0200
Subject: [PATCH 4/4] "About" page Tailwind-styled. Fixed several adaptivity
 issues

---
 docs/about.html              | 350 +++++++++++++++++++++++------------
 docs/about_page.js           | 144 +++-----------
 docs/about_styling.css       |  18 ++
 docs/index.html              |  99 +++++-----
 docs/index_about_styling.css |  76 +-------
 docs/index_page.js           |  13 +-
 docs/index_page_styling.css  |   5 +-
 7 files changed, 346 insertions(+), 359 deletions(-)
 create mode 100644 docs/about_styling.css

diff --git a/docs/about.html b/docs/about.html
index f57c397..052cda6 100644
--- a/docs/about.html
+++ b/docs/about.html
@@ -1,137 +1,253 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="author" content="S.K.">
-    <meta name="licensed" content="MIT">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="author" content="S.K." />
+    <meta name="licensed" content="MIT" />
 
     <title>About "zernpy"</title>
-    
+
     <!-- Favicon specification from the local file -->
-    <link rel="icon" href="favicon_zernpy.ico" type="image/x-icon">
+    <link rel="icon" href="favicon_zernpy.ico" type="image/x-icon" />
 
     <!-- Load script for handle page appearance and provide some interactivity -->
     <script src="./about_page.js"></script>
 
     <!-- Load external overall applicable stylesheets -->
-    <link rel="stylesheet" href="index_about_styling.css">
+    <link rel="stylesheet" href="index_about_styling.css" />
 
     <!-- Page specific CSS styling -->
-    <style>
-        /* Define another background color for this page */
-        .navbar {
-            /* Hard coded height is needed because image loaded after applying styles */
-            background-color: beige; height: 920px; 
-        }
-        /* Specifics for main content of the page */
-        .mainBody{
-            background-color: whitesmoke;  
-        }
-        .textLine{
-            padding: 6px; text-align: center;
-        }   
-
-        /* Setting images in the pyramidal order */
-        .imagesContainer{
-            position: relative;   /* Makes the child to select position relative to it */ 
-            width: inherit; height: fit-content;
-            font-size: 0;  /* This setting removes additional whitespaces between images in this container */ 
-        }
-        .DisplayZernikeName{
-            font-size: 16px; text-align: center; font-weight: bold; font-style: italic;
-        }
-        .ZernProfile{
-            width: 100px; height: 100px; display: inline-block;
-            position: absolute; /* Seems in this case it's necessary for avoiding relative shifts for top, left coordinates in script below */
-            padding: 0; margin: 0;  /* Padding = 0 and margins = 0 removes additional white spaces between inline blocks */
-        }
-
-        /* Styling of the list with next steps */
-        #nextStepsList{
-            text-align: center; list-style-position: inside;
-        }
-        .bulletPoint{
-            margin-bottom: 8px; margin-right: 6px;
-            padding-right: 12px; padding-left: 4px; 
-        }
-        #page_footer{
-            font-size: 0.9em; font-family: 'Courier New', Courier, monospace; padding-top: 2em;
-        }
-    </style>
-</head>
+    <link rel="stylesheet" href="about_styling.css" />
 
-<body>
-    <div class="flexboxContainer">
+    <!-- Add Tailwind classes through CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
 
-        <!-- Navigation panel, some elements and inspiration get from W3 Schools, better use <nav> element  -->
-        <nav class="navbar">
-            <a class="link navbarLink" href="index.html"> Main </a>
-            <a class="link" href="./api/zernpy/zernikepol.html"> API of <em> zernikepol </em> module </a>
-            <a class="link" href="./api/zernpy/zernpsf.html"> API of <em> zernpsf </em> module </a>
-            <a class="link navbarLink" href="about.html"> About </a>
-        </nav>
+  <body>
+    <main
+      class="flex flex-col h-full lg:flex-row leading-relaxed bg-gradient-to-b from-neutral-50 to-gray-200"
+    >
+      <!-- Navigation panel, some elements and inspiration get from W3 Schools, better use <nav> element  -->
+      <nav
+        class="flex flex-wrap flex-col sm:flex-row lg:flex-col lg:justify-start lg:space-y-28 space-x-4 lg:space-x-0 justify-around content-center bg-zinc-700 text-center p-2 text-lg font-serif"
+      >
+        <a
+          class="text-stone-200 visited:text-stone-100 underline hover:no-underline hover:text-stone-50 lg:mt-24"
+          href="./index.html"
+        >
+          Main
+        </a>
+        <a
+          class="text-stone-200 visited:text-stone-100 underline hover:no-underline hover:text-stone-50"
+          href="./api/zernpy/zernikepol.html"
+        >
+          API of <em class="font-mono"> zernikepol </em> module
+        </a>
+        <a
+          class="text-stone-200 visited:text-stone-100 underline hover:no-underline hover:text-stone-50"
+          href="./api/zernpy/zernpsf.html"
+        >
+          API of <em class="font-mono"> zernpsf </em> module
+        </a>
+        <a
+          class="text-stone-200 visited:text-stone-100 underline hover:no-underline hover:text-stone-50 hidden md:block"
+          href="#"
+        >
+          About
+        </a>
+      </nav>
 
-        <!-- Main text body -->
-        <main class="mainBody">
-            <p>
-                <h4 class="header"> Reasons for developing </h4> 
-                <ul>
-                    <li class="bulletPoint">
-                        This library was developed because I struggled to find open and fast enough implementation of simple function for Zernike polynomial
-                        calculation.
-                    </li>
-                    <li class="bulletPoint">
-                        Moreover, the exact equation for calculation isn't difficult to code in Python, but the exact equation gets really slow for
-                        high order polynomials. To overcome that, the recursive equations are implemented in this package instead of the exact ones.  
-                    </li>
-                    <li class="bulletPoint">
-                        However, anyway, there are exist many specifically implemented and well acknowledged libraries included Zernike polynomials calculation,
-                        for example: <a class="link" href="https://github.com/jacopoantonello/zernike" target="_blank">zernike</a> and 
-                        <!-- Security addition for demo in "rel" attribute, because it's the external website   -->
-                        <a class="link" href="https://docs.hcipy.org/dev/api/hcipy.mode_basis.zernike.html" rel="noopener noreferrer" target="_blank">HCIpy</a>. <br>
-                        Recently, I've found the solid library for numerical methods for Diffractive Optics, that also has the Zernike polynomials implementation:
-                        <a class="link" href="https://pyoptica.gitlab.io/pyoptica/api.html#module-pyoptica.zernikes" rel="noopener noreferrer" target="_blank">PyOptica</a>
-                    </li>
-                </ul>
-            </p>
+      <!-- Main content body -->
+      <div class="flex flex-col grow justify-between">
+        <div
+          class="flex flex-col m-2 p-2 space-y-3 font-sans font-medium content-center"
+        >
+          <!-- Header section -->
+          <div class="mx-4">
+            <h4 class="text-center text-xl font-semibold">
+              Reasons for developing
+            </h4>
+            <ul
+              class="mt-3 text-lg font-medium leading-7 list-disc list-inside space-y-3"
+            >
+              <li>
+                This library was developed because I struggled to find open,
+                simple and well-documented implementation for Zernike polynomial
+                value calculation.
+              </li>
+              <li>
+                However, the exact equation for calculation real value for a
+                polynomial isn't difficult to code in Python, but there is also
+                useful functionality missing in the similar libraries which I
+                need to use in other projects.
+              </li>
+              <li>
+                Anyway, there are exist a number of specifically tightened and
+                well acknowledged libraries which include Zernike polynomials
+                calculation, for example:
+                <a
+                  class="link font-semibold"
+                  href="https://github.com/jacopoantonello/zernike"
+                  target="_blank"
+                  >zernike</a
+                >
+                and
+                <!-- Security addition for demo in "rel" attribute, because it's the external website   -->
+                <a
+                  class="link font-semibold"
+                  href="https://docs.hcipy.org/dev/api/hcipy.mode_basis.zernike.html"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  >HCIpy</a
+                >
+              </li>
+              <li>
+                Finally, I've found the solid library for numerical methods for
+                Diffractive Optics, that also has the Zernike polynomials
+                implementation:
+                <a
+                  class="link font-semibold"
+                  href="https://pyoptica.gitlab.io/pyoptica/api.html#module-pyoptica.zernikes"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  >PyOptica</a
+                >
+              </li>
+            </ul>
+          </div>
 
-            <p>
-                <h4 class="header" id="RepresentingZernikeStr"> Representing a few Zernike profiles in a pyramid </h4>
-                <div class="textLine"> 
-                    The following images generated using the static method plot_sum_zernikes_on_fig() for single element in a list as polynomials list.
-                </div>
-                <div class="imagesContainer">
-                    <div class="DisplayZernikeName"> Hover mouse over the images (right) for getting polynomial name </div>
-                    <img class="ZernProfile" src="./images/ZernOsa1.png" id="ZernOsa1">
-                    <img class="ZernProfile" src="./images/ZernOsa2.png" id="ZernOsa2">
-                    <img class="ZernProfile" src="./images/ZernOsa3.png" id="ZernOsa3">
-                    <img class="ZernProfile" src="./images/ZernOsa4.png" id="ZernOsa4">
-                    <img class="ZernProfile" src="./images/ZernOsa5.png" id="ZernOsa5">
-                    <img class="ZernProfile" src="./images/ZernOsa6.png" id="ZernOsa6">
-                    <img class="ZernProfile" src="./images/ZernOsa7.png" id="ZernOsa7">
-                    <img class="ZernProfile" src="./images/ZernOsa8.png" id="ZernOsa8">
-                    <img class="ZernProfile" src="./images/ZernOsa9.png" id="ZernOsa9">
-                </div>
+          <!-- Pyramid with profiles -->
+          <div class="text-center space-y-3" id="pyramid-section">
+            <h4
+              class="text-center text-xl font-semibold"
+              id="RepresentingZernikeStr"
+            >
+              Representing a few Zernike profiles in a pyramid
+            </h4>
+            <p class="text-lg font-medium">
+              The following images generated using the static method
+              plot_sum_zernikes_on_fig() for single element in a list as
+              polynomials list.
             </p>
-
-            <p>
-                <h4 class="header"> Next steps </h4> 
-                <ol id="nextStepsList">
-                    <li class="bulletPoint"> <del> Implement calculation of derivatives</del>  Done in version 0.0.5 of the library </li>
-                    <li class="bulletPoint"> <del> Implement conversion from raw deformations on an unit pupil to set of Zernike polynomials</del>  Done in ver. 0.0.6 </li>
-                    <li class="bulletPoint"> Implement more interactivity for these pages, make responsive the main page </li>
-                    <li class="bulletPoint"> <del> Provide more tests for checking derivatives, values and initialization of polynomials </del> There are 10 tests for run by the <em> pytest </em> library </li>
-                    <li class="bulletPoint"> Fixed issue with slow calculations of high orders polynomials, found that direct (exact) equation is sufficiently fast - ver. 0.0.8 </li>
-                    <li class="bulletPoint"> Found that the exact equation couldn't be used reliably for orders higher than 40th radial one - ver. 0.0.9 </li>
-                </ol>
+            <p
+              class="text-center italic font-semibold font-mono text-lg mt-4 mb-2"
+              id="infoStringProfiles"
+            >
+              Hover mouse over the images (right) for getting polynomial name
             </p>
+            <div class="imagesContainer mt-2 mb-5" id="profilesContainer">
+              <img
+                class="ZernProfile"
+                src="./images/ZernOsa1.png"
+                id="ZernOsa1"
+              />
+              <img
+                class="ZernProfile"
+                src="./images/ZernOsa2.png"
+                id="ZernOsa2"
+              />
+              <img
+                class="ZernProfile"
+                src="./images/ZernOsa3.png"
+                id="ZernOsa3"
+              />
+              <img
+                class="ZernProfile"
+                src="./images/ZernOsa4.png"
+                id="ZernOsa4"
+              />
+              <img
+                class="ZernProfile"
+                src="./images/ZernOsa5.png"
+                id="ZernOsa5"
+              />
+              <img
+                class="ZernProfile"
+                src="./images/ZernOsa6.png"
+                id="ZernOsa6"
+              />
+              <img
+                class="ZernProfile"
+                src="./images/ZernOsa7.png"
+                id="ZernOsa7"
+              />
+              <img
+                class="ZernProfile"
+                src="./images/ZernOsa8.png"
+                id="ZernOsa8"
+              />
+              <img
+                class="ZernProfile"
+                src="./images/ZernOsa9.png"
+                id="ZernOsa9"
+              />
+            </div>
+          </div>
 
+          <!-- Completed and Next steps section -->
+          <div class="mx-4">
+            <h4 class="text-center text-xl font-semibold">
+              Completed and Next Steps
+            </h4>
+            <ol
+              class="mt-3 text-lg font-medium leading-6 list-decimal list-inside space-y-3 text-center"
+            >
+              <li>
+                <del> Implement calculation of derivatives </del>
+                <p class="xl:inline-block xl:ml-2">
+                  Done in version 0.0.5 of the library
+                </p>
+              </li>
+              <li>
+                <del>
+                  Implement conversion from raw deformations on an unit pupil to
+                  set of Zernike polynomials
+                </del>
+                <p class="xl:inline-block xl:ml-2">Done in version 0.0.6</p>
+              </li>
+              <li>
+                <del>
+                  Implement more adaptivity for these pages, make responsive the
+                  main page
+                </del>
+                <p class="xl:inline-block xl:ml-2">
+                  Not associated with the library version, done in October 2024
+                </p>
+              </li>
+              <li>
+                <del>
+                  Provide more tests for checking derivatives, values and
+                  initialization of polynomials
+                </del>
+                <p class="2xl:inline-block 2xl:ml-2">
+                  There are more than 10 tests for run by the
+                  <em class="font-mono italic font-semibold"> pytest </em>
+                  library
+                </p>
+              </li>
+              <li>
+                Fixed issue with slow calculations of high orders polynomials,
+                found that direct (exact) equation is sufficiently fast - in
+                ver. 0.0.8
+              </li>
+              <li>
+                Found that the exact equation couldn't be used reliably for
+                orders higher than 40th radial one - in ver. 0.0.9
+              </li>
+              <li>
+                Implemented ZernPSF class for calculation associated with a
+                polynomial PSF kernel - in ver. 0.0.13
+              </li>
+            </ol>
+          </div>
+        </div>
         <!-- Footer with some info -->
-        <footer id="page_footer"> 2022-2023 S.K., MIT licensed </footer>
-        </main>
-    </div>
-
-</body>
-</html>
\ No newline at end of file
+        <footer class="m-4 p-2 font-medium text-left">
+          2022-2024 S.K., MIT licensed
+        </footer>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/docs/about_page.js b/docs/about_page.js
index 316f748..8eca9a6 100644
--- a/docs/about_page.js
+++ b/docs/about_page.js
@@ -1,31 +1,22 @@
 "use strict";
 
 // Perform all actions below when the page is loaded
-document.addEventListener("DOMContentLoaded", () =>{
+document.addEventListener("DOMContentLoaded", () => {
 
     // Selectors of DOM elements
     const images = document.querySelectorAll(".ZernProfile");  // returns the NodeList class
-    const navbar = document.getElementsByClassName("navbar")[0];
-    const navbarLinks = document.getElementsByClassName("navbarLink");
-    const nameImage = document.querySelector(".DisplayZernikeName");
+    const nameImage = document.getElementById("infoStringProfiles");
+    const imagesContainer = document.getElementById("profilesContainer");
+    const pyramidSection = document.getElementById("pyramid-section");
+    const pageBody = document.querySelector("body");
 
     // Variables accessible for all defined below functions, mostly DOM elements
-    let previousPageWidth = false;
     let defaultNameImageText = nameImage.textContent;  // default text for element showing the polynomial name
 
-    // Move the element showing the name of image to the left
-    function moveNamePolEl(){
-        nameImage.style.textAlign = "left"; 
-        nameImage.style.position = "relative";  // allows moving this field below
-        nameImage.style.left = "1em"; nameImage.style.top = "1.5em";
-        defaultNameImageText = defaultNameImageText.replace("below", "right");
-        nameImage.textContent = defaultNameImageText; 
-    }
-
     // Make the pyramidal order for the images in the recallable function
     function makePyramid(init_y_shift, x_reduce_distance){
         let i = 0; let y_shift = 20 + init_y_shift;  let x_shift = 80 - x_reduce_distance; let y_step = 120; let element_width = 100;
-        let elementsInRow = 2; let half_width_main = Math.round(document.querySelector(".imagesContainer").clientWidth/2);
+        let elementsInRow = 2; let half_width_main = Math.round(imagesContainer.clientWidth/2);
         let n_row = 0; let max_row = 2; let initial_x_shift = half_width_main - x_shift - element_width/2 - x_reduce_distance/2;
         // Below - loop over all images queried by querySelectorAll
         images.forEach(element => {
@@ -41,8 +32,8 @@ document.addEventListener("DOMContentLoaded", () =>{
                 y_shift += y_step;
                 // Below - the adding height to imagesContainer element
                 if (n_row < max_row){
-                    let height = document.querySelector(".imagesContainer").clientHeight;
-                    document.querySelector(".imagesContainer").style.height = `${height*(n_row-0.05) + y_shift}px`;
+                    let height = imagesContainer.clientHeight;
+                    imagesContainer.style.height = `${height*(n_row-0.05) + y_shift}px`;
                 }
                 n_row += 1;
                 // console.log(document.querySelector(".imagesContainer").clientHeight))
@@ -57,44 +48,14 @@ document.addEventListener("DOMContentLoaded", () =>{
             }
         });
     }
-
-    // Put all images in columns close to each other for saving space on small monitors
-    function putImagesInCols(initial_set){
-        let i = 0; let y_shift = 50; let x_shift = 5; let y_step = 110; let element_width = 100;
-        let elementsInRow = 3; let half_width_main = Math.round(document.querySelector(".imagesContainer").clientWidth/2);
-        let n_row = 0; let max_row = 3; let initial_x_shift = half_width_main - 1.5*(x_shift + element_width);
-        // Below - loop over all images queried by querySelectorAll
-        images.forEach(element => {
-            element.style.top = `${y_shift}px`; 
-            element.style.left = `${initial_x_shift + i*(2*x_shift + element_width)}px`;
-            // console.log(element.style.left, element.style.top);
-            i += 1;
-            // move to the next row
-            if(i == elementsInRow){
-                y_shift += y_step;
-                n_row += 1; i = 0;
-            }
-        });
-        // Below - the adding height to imagesContainer element
-        if(initial_set){
-            let height = document.querySelector(".imagesContainer").clientHeight;
-            if(previousPageWidth > 500){
-                document.querySelector(".imagesContainer").style.height = `${height + (max_row-3.5)*(element_width)}px`;
-            } else {
-                document.querySelector(".imagesContainer").style.height = `${height + (max_row+0.5)*(element_width)}px`;
-            }
-        }
-    }
         
     // Add event listeners to each image for changing the represented on the page element to represent their name
     images.forEach(element => {
         let namePrefix = "Pointer on the image of:  ";
         element.addEventListener("mouseenter", (event) => {
-            // console.log("Mouse event listener registered");
             // switch statement for getting id of image container
             switch(element.id){
                 case "ZernOsa1":
-                    // console.log("Should change the naming string");
                     nameImage.textContent = namePrefix + "Vertical Tilt";
                     break;
                 case "ZernOsa2":
@@ -118,85 +79,28 @@ document.addEventListener("DOMContentLoaded", () =>{
         // assign default text to the div element if cursor left the image area
         element.addEventListener("mouseleave", (event) => {
             nameImage.textContent = defaultNameImageText;
-            // console.log("Mouseover event");
         });
     });
 
-    // Making the page more responsive - adding the monitoring of size changed (actually, for testing on the browser resizing feature)
-    visualViewport.onresize = (event) => {
-        // console.log("Event 'resize page' encountered and handled"); 
-        if(visualViewport.width < 1550){
-            nameImage.style.textAlign = "center"; nameImage.style.position = "static";
-            document.querySelector(".flexboxContainer").style.flexDirection = "row";
-            defaultNameImageText = defaultNameImageText.replace("right", "below");
-            nameImage.textContent = defaultNameImageText; 
-            restoreMarginNavbar();
-        }
-        else{
-            moveNamePolEl();  // move the displaying of name string (element) back
-            makePyramid(0, 0); // call the put images in pyramid
-            document.querySelector(".flexboxContainer").style.flexDirection = "row";
-            restoreMarginNavbar();
-        }
-        if((visualViewport.width < 1550) && (visualViewport.width > 1000)){
-            makePyramid(25, 0); // call the put images in pyramid
-            document.querySelector(".flexboxContainer").style.flexDirection = "row";
-            restoreMarginNavbar();
-        }
-        if((visualViewport.width < 1000) && (visualViewport.width > 700)){
-            makePyramid(25, 60); document.querySelector(".flexboxContainer").style.flexDirection = "row";
-            restoreMarginNavbar();
-        }
-        if((visualViewport.width < 700) && (visualViewport.width > 500)){
-            document.querySelector(".flexboxContainer").style.flexDirection = "column";  // change representation of webpage - moving navbar on top
-            makePyramid(25, 76); 
-            makeLessMarginNavbar();
-        }
-        if(visualViewport.width <= 500){
-            document.querySelector("#RepresentingZernikeStr").textContent = "Representing a few Zernike profiles in 2 columns";
-            document.querySelector(".flexboxContainer").style.flexDirection = "column";
-            if(previousPageWidth <= 500){
-                putImagesInCols(false);
-            } else {
-                putImagesInCols(true);
-            }
-            makeLessMarginNavbar();
-        }
-        previousPageWidth = visualViewport.width; 
-    }
-
-    // Specify less vertical margins if navigation bar goes on the top of the page
-    function makeLessMarginNavbar(){
-        navbar.style.display = "block";  // from flexbox representation to block (takes less space)
-        // Somehow, the call navbarLinks.forEach() doesn't work on HTMLCollection
-        for (let i=0; i<navbarLinks.length; i++){
-            navbarLinks[i].style.paddingTop = "0.25em"; navbarLinks[i].style.paddingBottom = "0.25em"; navbarLinks[i].style.margin = "0.15em";
-        }
-    }
-
-    // Return back margins (almost the same, better length measures)
-    function restoreMarginNavbar(){
-        // restore default value for navbar element
-        navbar.style.display = "flex"; navbar.style.flexDirection = "column"; 
-        // restore default values for navbar elements (links) 
-        for (let i=0; i<navbarLinks.length; i++){
-            navbarLinks[i].style.paddingTop = "2.5em"; navbarLinks[i].style.paddingBottom = "2.5em"; navbarLinks[i].style.margin = "1.2em 0.5em";
-        }
-    }
-
-    // Call functions when the page is loaded for initial placing the elements - repeating the logic from above
-    if(visualViewport.width > 1550){
-        moveNamePolEl(); makePyramid(0, 0);
+    // Adaptive placing of images in columns or in a pyramid
+    if (visualViewport.width > 1550) {
+        makePyramid(0, 0);
+        expandBody();  // check if the body element is less than the screen size and force to fill it
     } else if((visualViewport.width < 1550) && (visualViewport.width > 1000)){
         makePyramid(25, 0);
     } else if((visualViewport.width < 1000) && (visualViewport.width > 700)){
         makePyramid(25, 60);
-    } else if((visualViewport.width < 700) && (visualViewport.width > 500)){
-        makePyramid(25, 76); document.querySelector(".flexboxContainer").style.flexDirection = "column";
-        makeLessMarginNavbar();
-    } else if(visualViewport.width <= 500){
-        document.querySelector("#RepresentingZernikeStr").textContent = "Representing a few Zernike profiles in 2 columns";
-        // document.querySelector(".flexboxContainer").style.flexDirection = "column";  // shifted to the style media query property
-        putImagesInCols(true); makeLessMarginNavbar();
+    } else if((visualViewport.width < 700) && (visualViewport.width > 555)){
+        makePyramid(25, 76);
+    } else if (visualViewport.width <= 555) {
+        pyramidSection.style.display = "none"; 
+    }
+
+    // Force body to fill the entire screen if there is not enough content even. Taken from "index_page.js" script
+    function expandBody() {
+        let hW = window.innerHeight; let hBody = pageBody.offsetHeight; 
+        if (hW > hBody) {
+            pageBody.classList.add("h-screen");
+        }
     }
 });
diff --git a/docs/about_styling.css b/docs/about_styling.css
new file mode 100644
index 0000000..904b349
--- /dev/null
+++ b/docs/about_styling.css
@@ -0,0 +1,18 @@
+/* Setting images in the pyramidal order */
+.imagesContainer {
+    position: relative;
+    /* Makes the child to select position relative to it */
+    width: inherit;
+    height: fit-content;
+    font-size: 0; /* This setting removes additional whitespaces between images in this container */
+}
+
+.ZernProfile {
+    width: 100px;
+    height: 100px;
+    display: inline-block;
+    position: absolute;
+    /* Padding = 0 and margins = 0 removes additional white spaces between inline blocks */
+    padding: 0;
+    margin: 0;
+}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 5c9369e..12bfd77 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,8 +1,6 @@
 <!DOCTYPE html>
-<!-- This designates that this is HTML 5 file (W3 schools) -->
+<!-- Standard HTML 5 file structure -->
 <html lang="en">
-  <!-- Root element of an HTML page (W3 schools) -->
-
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -18,10 +16,10 @@
     <!-- Load page specific script -->
     <script src="index_page.js"></script>
 
-    <!-- Page specific styling -->
+    <!-- Page specific styling (only background image styling remained) -->
     <link rel="stylesheet" href="./index_page_styling.css" />
 
-    <!-- Load external overall applicable stylesheets -->
+    <!-- Single stylesheet for 2 pages: index and about (e.g., ".link" class) -->
     <link rel="stylesheet" href="./index_about_styling.css" />
 
     <!-- Add Tailwind using CDN, local installation through npm is used only for getting autocompletion -->
@@ -30,31 +28,31 @@
 
   <body>
     <!-- Make flexbox with breakpoint rule: for md and more, set elements in columns, for md and less - in rows -->
-    <main class="flex flex-col lg:h-dvh lg:flex-row">
+    <main class="flex flex-col h-full lg:flex-row leading-relaxed">
       <!-- Navigation panel, for lg and more: elements composed in rows, for less - in columns -->
       <nav
-        class="flex flex-row flex-wrap lg:flex-col lg:justify-start lg:space-y-28 lg:space-x-0 justify-around content-center space-x-4 bg-zinc-500 text-center p-2 text-lg font-serif"
+        class="flex flex-wrap flex-col sm:flex-row lg:flex-col lg:justify-start lg:space-y-28 space-x-4 lg:space-x-0 justify-around content-center bg-teal-900 text-center p-2 text-lg font-serif"
       >
         <a
-          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350 lg:mt-24"
+          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:text-amber-400 lg:mt-24 lg:px-3 hidden md:block"
           href="#"
         >
-          Home
+          Main
         </a>
         <a
-          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350"
+          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:text-amber-400 lg:px-3"
           href="./api/zernpy/zernikepol.html"
         >
           API of <em class="font-mono"> zernikepol </em> module
         </a>
         <a
-          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350"
+          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:text-amber-400 lg:px-3"
           href="./api/zernpy/zernpsf.html"
         >
           API of <em class="font-mono"> zernpsf </em> module
         </a>
         <a
-          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:amber-350"
+          class="text-amber-200 visited:text-amber-300 underline hover:no-underline hover:text-amber-400 lg:px-3"
           href="./about.html"
         >
           About
@@ -62,19 +60,19 @@
       </nav>
 
       <!-- Main content of the webpage, position - relative for placing an image on the background -->
-      <div class="relative font-sans">
-        <div class="relative z-10 m-1">
+      <div class="flex flex-col grow justify-between font-sans relative z-10">
+        <div>
           <!-- Gradually implement Tailwind styling, one element after another -->
-          <header class="text-center 2xl:text-left bg-slate-200/80 p-2 m-1">
-            <h3 class="uppercase font-mono font-bold text-2xl">Welcome!</h3>
-            <p class="text-xl">
+          <header class="text-center 2xl:text-left bg-slate-400/50 px-4 py-3">
+            <h3 class="mx-3 uppercase font-mono font-bold text-2xl">Welcome!</h3>
+            <p class="text-xl mx-3">
               I am pleased that you are visiting this page with a few details
               about the Python library <strong>"zernpy"</strong>
             </p>
           </header>
 
-          <article class="mt-2 font-medium">
-            <section class="m-1 p-1 xl:size-11/12 2xl:size-5/6">
+          <article class="font-medium px-4 py-2 m-2 space-y-4">
+            <section class="xl:size-11/12 2xl:size-5/6">
               <h4 class="text-left text-xl font-semibold mb-1">
                 Brief Installation instructions
               </h4>
@@ -86,7 +84,7 @@ <h4 class="text-left text-xl font-semibold mb-1">
                 >
               </p>
               <p class="text-justify text-lg">
-                For updating the already install package use the command:
+                For updating the already installed package use the command:
                 <code class="font-mono italic font-bold">
                   pip install --upgrade zernpy
                 </code>
@@ -97,19 +95,20 @@ <h4 class="text-left text-xl font-semibold mb-1">
               </p>
               <p class="text-justify text-lg">
                 The requirements for installation: Python version >= 3.8,
-                libraries <em>numpy</em>, <em>matplotlib</em> and
-                <em>scipy</em>. Check the
+                libraries <em class="font-mono font-bold">NumPy</em>,
+                <em>Matplotlib</em> and <em>SciPy</em>. Check the
                 <a
                   class="link font-semibold"
                   href="https://pypi.org/project/zernpy/"
                   target="_blank"
                   >webpage</a
                 >
-                of this library on the PyPi package index.
+                of this library on the PyPi package index for more details about
+                the package.
               </p>
             </section>
 
-            <section class="m-1 p-1 xl:size-11/12 2xl:size-5/6">
+            <section class="xl:size-11/12 2xl:size-5/6">
               <h4 class="text-left text-xl font-semibold mb-1">
                 Import and class initialization
               </h4>
@@ -144,7 +143,7 @@ <h4 class="text-left text-xl font-semibold mb-1">
               </p>
             </section>
 
-            <section class="m-1 p-1 xl:size-11/12 2xl:size-5/6">
+            <section class="xl:size-11/12 2xl:size-5/6">
               <h4 class="text-left text-xl font-semibold mb-1">
                 Calculation methods
               </h4>
@@ -164,33 +163,43 @@ <h4 class="text-left text-xl font-semibold mb-1">
               </p>
               <p class="text-justify text-lg">
                 For accessing the full list of implemented methods for
-                <em>ZernPol</em> class (Zernike polynomial) and
-                <em>ZernPSF</em> class (calculation 2D PSF for formed by the
-                microscopic systems associated with the phase profile described
-                by the Zernike polynomial) please follow the link to the API
-                Dictionary on the left navigation tab.
+                <em class="font-mono italic font-bold">ZernPol</em> class
+                (Zernike polynomial abstraction) and
+                <em class="font-mono italic font-bold">ZernPSF</em> class
+                (calculation 2D PSF for formed by the microscopic systems
+                associated with the phase profile described by a Zernike
+                polynomial) please follow the link to the API Dictionary on the
+                navigation tab.
               </p>
             </section>
 
-            <section class="m-1 p-1 xl:size-11/12 2xl:size-5/6">
+            <section class="xl:size-11/12 2xl:size-5/6">
               <h4 class="text-left text-xl font-semibold mb-1">
                 Development Note
               </h4>
               <p class="text-justify text-lg">
                 This page, along with the "About" page, are also used to
                 showcase my skills in frontend development. This one was styled
-                using Tailwind classes. Thus, not everything on this page is
-                meant solely to reveal the features of the implemented library.
+                using Tailwind classes. Thus, not all content and functionality
+                on these pages are meant solely to reveal the features of the
+                implemented 'zernpy' library.
+              </p>
+              <p class="text-justify text-lg">
+                Originally, this page had been developed using pure CSS styling.
+                After finishing the dedicated development branch, almost all
+                styling on this page is achieved by using Tailwind classes added
+                through CDN.
               </p>
             </section>
 
-            <section class="m-1 p-1 xl:size-11/12 2xl:size-5/6">
+            <section class="xl:size-11/12 2xl:size-5/6">
               <h4 class="text-left text-xl font-semibold mb-1">
-                Definition of Zernike polynomial
+                Definition of a Zernike polynomial using various indexing
+                schemes
               </h4>
               <p class="text-justify text-lg">
                 Specify below the index (indices) for Zernike polynomial
-                specification (see all listed indices
+                specification (see all listed schemes
                 <a
                   class="link font-semibold"
                   href="https://en.wikipedia.org/wiki/Zernike_polynomials"
@@ -202,7 +211,10 @@ <h4 class="text-left text-xl font-semibold mb-1">
               <div
                 class="flex flex-col sm:flex-row flex-wrap items-center my-2 text-lg"
               >
-                <div class="inline-flex text-center items-center mr-2 my-2">
+                <!-- Select indexing scheme -->
+                <div
+                  class="inline-flex text-center items-center mr-2 my-2 z-10"
+                >
                   <label class="mr-2"> Select the indexing type: </label>
                   <select
                     class="bg-slate-300 px-1 py-1 round"
@@ -215,8 +227,9 @@ <h4 class="text-left text-xl font-semibold mb-1">
                   </select>
                 </div>
 
+                <!-- Orders selector -->
                 <div
-                  class="inline-flex text-center items-center ml-2 mr-6 my-2"
+                  class="inline-flex text-center items-center ml-2 mr-6 my-2 z-10"
                 >
                   <span class="mr-2" id="ordersLabel"> Orders: </span>
                   <label
@@ -261,7 +274,8 @@ <h4 class="text-left text-xl font-semibold mb-1">
                   />
                 </div>
 
-                <div class="my-2 mr-6">
+                <!-- Button for calculation -->
+                <div class="my-2 mr-6 z-10">
                   <input
                     class="py-1 px-2 bg-green-800 text-stone-100 rounded-lg hover:bg-green-700 hover:text-stone-50"
                     type="button"
@@ -270,7 +284,8 @@ <h4 class="text-left text-xl font-semibold mb-1">
                   />
                 </div>
 
-                <div class="my-2 text-center">
+                <!-- Info string for getting the conversion -->
+                <div class="my-2 text-center z-10">
                   <span
                     id="conversionString"
                     class="py-1 px-2 bg-indigo-950 text-stone-50 rounded"
@@ -286,9 +301,7 @@ <h4 class="text-left text-xl font-semibold mb-1">
         <!-- Below - image element that used for setting it as the background image -->
         <div class="bgImage"></div>
         <!-- Footer with some info -->
-        <footer
-          class="2xl:mt-28 xl:mt-24 lg:mt-20 mt-4 mb-4 p-1 text-lg font-medium text-center"
-        >
+        <footer class="m-2 p-2 text-lg font-medium text-center">
           2022-2024 S.K., MIT licensed
         </footer>
       </div>
diff --git a/docs/index_about_styling.css b/docs/index_about_styling.css
index 015bd71..d371016 100644
--- a/docs/index_about_styling.css
+++ b/docs/index_about_styling.css
@@ -1,74 +1,2 @@
-/* Overall stylesheets for 2 pages: index.html and about.html */
-/* floating string for copy comment this and insert specific inline comment */ 
-
-/* Activate scroll bar showing */
-body {
-    /* overflow-y: scroll;   */  /* Allows scrolling vertically of the content of the entire page is overflow */ 
-    line-height: 1.4em;  /* add additional vertical gaps between lines */
-    overflow-wrap: break-word;
-}
-
-/* This container allows to locate main body and navigation bar on the left side */
-.flexboxContainer { 
-    display: flex;  /* allows to set elements respectively to each other */ 
-    flex-direction: row;  /* Explicitly designate main axis for the flexbox layout */
-    /* justify-content: space-evenly; */  /* It automatically populate the content evenly for 2 elements */
-    width: 98.5%; align-items: flex-start; justify-content: center;
-}
-
-/* Styling for left-side navigation bar */
-.navbar {
-    /* Navigation bar - takes width according to the content, height = all page height */ 
-    margin: 0.25em; padding: 0.25rem;  /* Just experimenting with different size measure values */
-    /* flex: auto; */ /* Switched off for preventing populate width more for than the content of this element */ 
-    text-align: center; background-color: lightgray;
-    font-size: 1rem; font-family: Verdana, Tahoma, sans-serif;
-    /* z-index: 1;  */
-    position: relative;
-    display: flex; flex-direction: column;
-    width: 8%; height: 98%;
-}
-
-/* Styling of all links in the navigation bar (all descendants) */
-.navbar a{
-    display: block;  /* Makes all elements starting with the new line */ 
-    padding-top: 2.5em; padding-bottom: 2.5em; padding-left: 0.5em; padding-right: 0.5em; 
-    margin: 1.2em 0.5em;  /* if "auto" is specified then the elements will be spread evenly */
-}
-
-/* Styling for links */
-.link:link{color: darkblue;} .link:visited{color: blueviolet;}
-
-/* Styling for the main body with text */
-.mainBody {
-    flex: 1 auto; /* Automatically populate the content of the element for the remaining space in page */
-    font-size: 1rem; font-family: Arial, Helvetica, sans-serif;
-    margin: 0.25em;
-    position: relative;
-}
-
-.header {
-    text-align: center; margin: 0.25em;
-}
-
-.contentContainer {
-    margin-left: 0.5em;
-}
-
-.paragraph-header {
-    margin-left: 0.25em; margin-bottom: 0.45em;
-}
-
-/* Provide special styles for small screen sizes (cell phones, test on Google Chrome) */
-@media screen and (max-width: 500px){
-    .flexboxContainer{
-        flex-direction: column;  /* Explicitly designate main axis for the flexbox layout */
-    }
-    .navbar{
-        margin: 2px; padding: 0.1rem; 
-        display: block;
-    }
-    .navbar a{
-        padding-top: 0.2em; padding-bottom: 0.2em; margin: 0.15em;
-    }
-}
\ No newline at end of file
+/* Styling for links for both pages (index and about) */
+.link:link{color: darkblue;} .link:visited{color: rgb(3, 3, 178);}
diff --git a/docs/index_page.js b/docs/index_page.js
index acbd364..376130f 100644
--- a/docs/index_page.js
+++ b/docs/index_page.js
@@ -1,8 +1,6 @@
-"use strict";  // enables more strict behavior of JS
+"use strict";
 
-// the way of adding the Event listener - to guarantee that the page and all elements are available
 document.addEventListener("DOMContentLoaded", function () {
-    // console.log("Index Page loaded");
 
     // Set explicitly default values for indexing scheme and m,n associated orders and save handlers to them
     const nOrderInput = document.getElementById("firstInputOrder"); nOrderInput.value = 0;
@@ -17,6 +15,15 @@ document.addEventListener("DOMContentLoaded", function () {
     const selector = document.getElementsByName("Index type")[0];  // get the selected HTML element by name
     selector.selectedIndex = 0;  // set the default option to selected HTML element
     const conversionReport = document.getElementById("conversionString");
+    const pageBody = document.querySelector("body");
+
+    // Defining and fix not filling the entire page if the body's height is less then the screen size
+    // Not found the same solution in Tailwind list of classes, it isn't universal to set as the default h-screen class, 
+    // because in this case for mobile devices the body will overflow their screens
+    let hW = window.innerHeight; let hBody = pageBody.offsetHeight; 
+    if (hW > hBody) {
+        pageBody.classList.add("h-screen");  // force body to fill the entire screen if there is not enough content even
+    }
 
     // Variables for storing values
     let nOrder = 0; let mOrder = 0; let osaIndex = -1; let nollIndex = -1; let fringeIndex = -1;
diff --git a/docs/index_page_styling.css b/docs/index_page_styling.css
index 8dc1dcf..19f5db8 100644
--- a/docs/index_page_styling.css
+++ b/docs/index_page_styling.css
@@ -1,11 +1,12 @@
 /* Below - setting the background image for the page */
-.bgImage{
+.bgImage {
     background-image: url('half_pyramid_zerns.png');
     background-position-x: left; 
     background-repeat: repeat;
     background-size: contain;
     width: 100%; height: 100%;
     opacity: 0.20; 
-    position: absolute; top: 0; left: 0; /* Allows to manipulate the position inside of mainBody */
+    /* Allows to manipulate the position inside of mainBody */
+    position: absolute; top: 0; left: 0;
     z-index: 0;  /* NOTE this z-index because setting absolute position and opacity put their own rules in z-indexing */  
 }
\ No newline at end of file
