added styling and fixed some formatting errors

web/style.css

@@ -0,0 +1,100 @@
+body, html {
+    margin: 0px;
+    font-size: 18px;
+    line-height: 1.8;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+
+    --table-border-color: #aaa;
+    --table-background-color: #eee;
+    --text-color: #111;
+
+    color: var(--text-color);
+}
+
+body > main {
+    flex-grow: 1;
+    max-width: 1024px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 90vw;
+
+}
+
+h1, h2, h3, h4, h5 {
+    font-family: "Roboto", "Open Sans", Arial, Helvetica, sans-serif;
+}
+
+header {
+
+    text-align: center;
+}
+
+header h1 {
+    font-size: 1.8em;
+    color: rgb(0, 135, 0);
+}
+
+header h1 span {
+    color: var(--text-color);
+}
+
+.thin {
+    font-weight: 300;
+} 
+.final-raiting {
+    font-size: 2rem;
+}
+
+footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 1024px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 90vw;
+}
+
+table, tr, td, th {
+    border-collapse: collapse;
+}
+
+table th, table td {
+    padding: 8px 16px;
+
+    border-left: 1px solid var(--table-border-color);
+    border-right: 1px solid var(--table-border-color);
+}
+
+table td:first-child,
+table th:first-child {
+    border-left: none;
+}
+table td:last-child,
+table th:last-child {
+    border-right: none;
+}
+
+table th {
+    font-weight: bold;
+    text-align: left;
+}
+
+table tr:nth-child(2n+1) td {
+    background-color: var(--table-background-color);
+}
+
+body.dark-theme {
+    --table-border-color: #222;
+    --table-background-color: #333;
+    --text-color: #eee;
+    background-color: #111;
+}
+
+body.dark-theme a:visited {
+    color: blueviolet;
+}

web/templates/index.html

@@ -12,7 +12,7 @@
     <header>
         <h1>
             Blog of Pesto
-            <span class="thin">reviewing all sorts of pesto</span>
+            <span class="thin"> - reviewing all sorts of pesto</span>
         </h1>
     </header>
     <main>
@@ -29,11 +29,11 @@
         Each pesto is compared in these categories:
 
         <ul>
-            <li><emph>taste:</emph> how it tasted</li>
+            <li><strong>Taste:</strong> how it tasted</li>
-            <li><emph>consistency:</emph> How was the consistency, did it form a proper emulsion with the pasta water</li>
+            <li><strong>Consistency:</strong> How was the consistency, did it form a proper emulsion with the pasta water</li>
-            <li><emph>ingredients:</emph> what's in it, how much of it, and how is it </li>
+            <li><strong>Ingredients:</strong> what's in it, how much of it, and how is it </li>
-            <li><emph>price:</emph> how expensive is this pesto</li>
+            <li><strong>Price:</strong> how expensive is this pesto</li>
-            <li><emph>size:</emph> how much is in the glass</li>
+            <li><strong>Size:</strong> how much is in the glass</li>
         </ul>
 
         I also list the ingredients and add some notes why I rated the pasta the way I did. I then give a final grade.
@@ -42,7 +42,9 @@
 
         {INDEX}
 
-        <h2>The Pasta</h2>
+        <hr/>
+
+        <h1>The Reviews:</h1>
 
         {PESTO_RATINGS}
 

web/templates/review.html

@@ -1,10 +1,10 @@
-<h3 id="{REVIEW_ID}">{TITLE}</h3>
+<h1 id="{REVIEW_ID}">{TITLE}</h1>
 
-<p>Date: {DATE}</p>
+<p><em>Date:</em> {DATE}</p>
 
-<p>Notes: {NOTES}</p>
+<p><em>Notes:</em> {NOTES}</p>
 
-<p>Ingredients: {INGREDIENTS}</p>
+<p><em>Ingredients:</em> {INGREDIENTS}</p>
 
 <table>
     <tr>
@@ -18,4 +18,6 @@
     <tr> <td>Size</td> <td>{RATING_SIZE}</td> </tr>
 </table>
 
-<p>Final raintg: {RATING}</p>
+<p class="final-raiting">Final raiting: {RATING}</p>
+
+<hr/>