Some css improvements (#127)

Author: StanFromIreland

src/style.css

@@ -1,26 +1,20 @@
 /* ---------------------------- Global Styles ------------------------------- */
 
-body {
-  padding-top: 4.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-bottom: 3rem;
-  color: #5a5a5a;
-  background-color: rgb(245, 245, 245);
+:root {
+  --bg-color: rgb(245, 245, 245);
+  --text-color: #15141A;
 }
 
-a {
-  color: #0d0d0d;
-}
-
-a:hover {
-  color: #1595fe;
+body {
+  padding: 4.5rem 1rem 3rem;
+  color: var(--text-color);
+  background-color: var(--bg-color);
 }
 
 /* -------------------------------- navbar ---------------------------------- */
 
 .navbar {
-  background-color: rgb(245, 245, 245, 0.6);
+  background-color: rgb(var(--bg-color), 0.6);
   backdrop-filter: blur(10px);
   border-bottom: 0.25px solid #999;
   -webkit-backdrop-filter: blur(10px);
@@ -30,19 +24,24 @@ a:hover {
   transition: 0.3s background-color;
   text-align: center;
   background-color: transparent;
-  padding: 0rem 1rem;
+  padding: 0 1rem;
   text-decoration: none;
   border-radius: 0.3rem;
 }
 
 .navbar li:hover {
-  background-color: #d0cccd;
+  background-color: #eacb4d;
 }
 
 .navbar li .nav-link {
   color: #0d0d0d;
 }
 
+.nav-link svg {
+    vertical-align: middle;
+}
+
+
 /* ----------------------- Cards and card columns --------------------------- */
 
 .row > [class^="col-"] {
@@ -128,4 +127,7 @@ td[data-label="warnings"], td[data-label="lint"] {
     left: 10px;
     position: absolute;
   }
+  td[data-label="warnings"], td[data-label="lint"] {
+    text-align: left;
+  }
 }

templates/base.html.jinja

@@ -18,8 +18,8 @@
 
       <div class="navbar-brand">
         <a href="./" style="all: unset; cursor: pointer;">
-          <img src="logo.png" style="height: 2rem;" alt="">
-          <span style="font-size: 1.25rem; font-weight: bold;">Translation Dashboard</span>
+          <img src="logo.png" style="height: 2rem;" alt="Python logo">
+          <span style="font-size: 1.25rem; font-weight: 700; color: #4a4a4a">Translation Dashboard</span>
         </a>
       </div>
 
@@ -32,10 +32,22 @@
       <div class="collapse navbar-collapse" id="navbarNavDropdown">
         <ul class="navbar-nav mr-auto">
           <li class="nav-item">
-            <a class="nav-link" href="build-details.html">🛠️ Build details</a>
+            <a class="nav-link" href="build-details.html">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-text" viewBox="0 0 16 16">
+                <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z"></path>
+                <path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8m0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5"></path>
+              </svg>
+              Build details
+            </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="https://devguide.python.org/documentation/translations/translating/">🔗 Translating</a>
+            <a class="nav-link" href="https://devguide.python.org/documentation/translations/translating/" target="_blank">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"></path>
+                <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"></path>
+              </svg>
+              Translating
+            </a>
           </li>
         </ul>
       </div>