Increase visibility of elements (#332)

* Changed alert background color to pale orange

* Increased visibility of focus on carousel buttons

* Made carousel button icons visible

Author: lisicase

index.html

@@ -39,12 +39,16 @@ <h4><a href='{{post.url}}'>{{post.title}}</a></h4>
 
     <!-- Left and right controls -->
     <a class="left carousel-control" href="#myCarousel" onclick="$('#myCarousel').carousel('pause');" role="button" data-slide="prev">
-      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
-      <span class="sr-only">Previous</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16" aria-hidden="true">
+            <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
+        </svg>
+        <span class="sr-only">Previous</span>
     </a>
     <a class="right carousel-control" href="#myCarousel" onclick="$('#myCarousel').carousel('pause');" role="button" data-slide="next">
-      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-      <span class="sr-only">Next</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
+        </svg>
+        <span class="sr-only">Next</span>
     </a>
   </div>
   <div class="row">

public/css/site.css

@@ -31,6 +31,14 @@
   max-width: 1200px;
   max-height: 600px;
 }
+.carousel-control:focus {
+    background-color: rgba(0, 0, 0, 0.25);
+}
+a.carousel-control.left, a.carousel-control.right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 
 .dropdown-toggle:focus {
   outline:dotted;
@@ -381,6 +389,10 @@ strong {
   font-size: 1.5rem;
 }
 
+.alert.alert-success {
+    background-color: #FFF1DA;
+}
+
 figure img {
     max-width: 100%;
     height: auto;