Add responsive CSS and Bootstrap to pages

Author: JacobGrisham

README.md

@@ -75,7 +75,7 @@ $ API_KEY=<value>
 ```
 $ python application.py 
 ```
--   Alternatively, execute (without debugging):
+-   Alternatively, execute (with debugging):
 ```
 $ export FLASK_APP=application.py
 $ flask run

static/styles.css

@@ -10,6 +10,11 @@ nav img
     width: 2rem;
 }
 
+.navbar-nav {
+    flex-direction: row;
+    justify-content: space-around;
+}
+
 .register
 {
     border-radius: 3rem;
@@ -45,28 +50,49 @@ main img
     background-color: transparent;
 }
 
-footer
-{
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 60px;
-    line-height: 60px;
-    text-align: center;
+#freepik_stories-investing {
+    height: auto;
+    width: auto;
+}
+
+@media only screen and (min-width: 767.98px) {
+    #freepik_stories-investing {
+        width: 25rem;
+    }
+}
+@media only screen and (min-width: 991.98px) {
+    #freepik_stories-investing {
+        width: auto;
+    }
+}
+
+
+@media only screen and (min-width: 767.98px) {
+    .footer {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+    }
 }
 
 .background
 {
     position: absolute;
     z-index: -10;
-    top: 0;
     right: 0;
 }
 
 #home
 {
     width: 100vw;
 }
+@media only screen and (max-width: 767.98px) {
+    #home
+    {
+        top: auto;
+        transform: rotate(180deg);
+    }
+}
 
 .error {
     max-width: max-content;

templates/buy.html

@@ -7,7 +7,7 @@
 {% block main %}
 <div class="container">
     <div class="row">
-        <div class="col-md-6 text-left">
+        <div class="col-md-6 text-md-left mt-5">
             <h1>Buy</h1>
             <form action="/buy" method="post" class="mt-5">
                 <div class="form-group">

templates/history.html

@@ -5,9 +5,10 @@
 {% endblock %}
 
 {% block main %}
+<div class="container">
     <img src="../static/images/history.svg" class="background">
     <h1>History</h1>
-    <table class="table table-hover">
+    <table class="table table-hover table-md-responsive">
         <tr class="thead-light">
             <th scope="col">Stocks</th>
             <th scope="col">Shares Bought</th>
@@ -38,4 +39,5 @@ <h1>History</h1>
         </tr>
         {% endfor %}
     </table>
+</div>
 {% endblock %}

templates/index.html

@@ -5,9 +5,10 @@
 {% endblock %}
 
 {% block main %}
+<div class="container">
     <img src="../static/images/home.svg" class="background" id="home">
     <h1>Home</h1>
-    <table class="table table-hover">
+    <table class="table table-hover table-md-responsive">
         <tr class="thead-light">
             <th scope="col">Stocks Owned</th>
             <th scope="col">Number of Shares</th>
@@ -35,4 +36,5 @@ <h1>Home</h1>
             <td><strong>{{ grand_total }}</strong></td>
          </tr>
     </table>
+</div>
 {% endblock %}

templates/landing.html

@@ -32,7 +32,7 @@
 
         <nav class="navbar navbar-expand-md navbar-light bg-light border">
             <a class="navbar-brand" href="/">Robynhood</a>
-            <img src="../static/images/feather.svg">
+            <img class="mr-auto" src="../static/images/feather.svg">
             <button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbar" data-toggle="collapse" type="button">
                 <span class="navbar-toggler-icon"></span>
             </button>
@@ -65,17 +65,15 @@
             </header>
         {% endif %}
 
-        <main class="container p-5">
+        <main>
             {% block main %}{% endblock %}
         </main>
 
         <footer class="footer">
-            <div class="container">
-                <span class="small mr-3">Copyright Jacob Grisham 2021</span>
-                <span class="small text-muted">
-                    Data provided for free by <a href="https://iextrading.com/developer">IEX</a>. View <a href="https://iextrading.com/api-exhibit-a/">IEX’s Terms of Use</a>.
-                </span>
-            </div>
+            <p class="small mr-3 text-muted text-center">Copyright Jacob Grisham 2021</p>
+            <p class="small text-muted text-center">
+                Data provided for free by <a href="https://iextrading.com/developer">IEX</a>. View <a href="https://iextrading.com/api-exhibit-a/">IEX’s Terms of Use</a>.
+            </p>
         </footer>
 
     </body>

templates/layout.html

@@ -7,7 +7,7 @@
 {% block main %}
 <div class="container">
     <div class="row">
-        <div class="col-md-6 text-left">
+        <div class="col-md-6 text-md-left mt-5">
             <h1>Enter a stock symbol to obtain the current price</h1>
             <form action="/quote" method="post" class="mt-5">
                 <div class="form-group">