move gallery buttons to top and use unicode arrows

Author: haarer

src/_includes/viewpoint.md

@@ -33,19 +33,20 @@
 <option value="{{ t }}">{{ t }}</option>
 {% endfor %}
 </select>
+  {% if examples.size > 1 %}
+  <button id="prev-btn" onclick="prevImage()"><span >&#x1F81C;</span> </button>
+  <button id="next-btn" onclick="nextImage()"><span >&#x1F81E;</span> </button>
+  {% else %}
+  <button id="prev-btn" style="display:none" onclick="prevImage()"><span >&#x1F81C;</span></button>
+  <button id="next-btn" style="display:none" onclick="nextImage()"><span >&#x1F81E;</span></button>
+  {% endif %}
+
 </div>
 {% if examples.size > 0 %}
 <div id="gallery-container">
   <img id="gallery-image" 
        src="../../diagrams/{{ examples[0].File }}"
        alt="{{ examples[0].Name }}"  />
-  {% if examples.size > 1 %}
-  <button id="prev-btn" onclick="prevImage()"><img src="../../assets/images/arrow-left.svg" alt="Previous" /></button>
-  <button id="next-btn" onclick="nextImage()"><img src="../../assets/images/arrow-right.svg" alt="Next" /></button>
-  {% else %}
-  <button id="prev-btn" style="display:none" onclick="prevImage()"><img src="../../assets/images/arrow-left.svg" alt="Previous" /></button>
-  <button id="next-btn" style="display:none" onclick="nextImage()"><img src="../../assets/images/arrow-right.svg" alt="Next" /></button>
-  {% endif %}
 </div>
 
 <script>

src/_sass/custom/custom.scss

@@ -197,33 +197,11 @@
 
 #prev-btn,
 #next-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+
   background: rgba(255, 255, 255, 0.486);
-  border: none;
-  width: 40px;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 2;
   transition: background 0.3s ease;
-}
-
-#prev-btn svg,
-#next-btn svg {
-  width: 16px;
-  height: 16px;
-  display: block;
-}
-
-#prev-btn {
-  left: 10px;
-}
-
-#next-btn {
-  right: 10px;
+  border-radius: 4px;
+  background-color: lightgray;
 }