Do not forget synergy font

Author: EXL

src/main/resources/messages.properties

@@ -58,3 +58,4 @@ code.server.error.home=Go to the home page!
 code.arrow.up=Top
 code.arrow.down=Bottom
 code.version=Code Polyglot Version:
+code.font=Font

src/main/resources/messages_ru.properties

@@ -58,3 +58,4 @@ code.server.error.home=На главную страницу!
 code.arrow.up=Вверх
 code.arrow.down=Вниз
 code.version=Версия Code Polyglot:
+code.font=Шрифт

src/main/resources/static/css/techno/code.css

@@ -170,6 +170,9 @@ input::placeholder {
 #site-recent-header {
 margin-bottom: 0;
 }
+#font {
+cursor: pointer;
+}
 
 /* Code Block */
 .code-table {
@@ -245,7 +248,7 @@ input::placeholder {
 }
 .radio-mark {
 position: absolute;
-top: 0;
+top: -1px;
 left: 1px;
 height: 9px;
 width: 9px;
@@ -285,6 +288,11 @@ input::placeholder {
 }
 
 /* Custom Fonts */
+@font-face {
+font-family: "Synergy Full Bold Condensed";
+src: url("/font/synergy-full-bold-condensed.woff2") format("woff2");
+}
+
 @font-face {
 font-family: "Nokia Standard Bold";
 src: url("/font/nokia-standard-bold.woff2") format("woff2");

src/main/resources/static/js/code.js

@@ -46,3 +46,18 @@ if (button_wrap) {
 }
 }
 }
+
+var font = document.getElementById('font');
+if (font) {
+font.onclick = function () {
+if (font.classList.toggle('toggle-font')) {
+document.getElementsByClassName('page')[0].style.font = '12px "Synergy Full Bold Condensed", "DejaVu Sans", sans-serif';
+document.getElementsByClassName('table')[0].style.fontSize = '12px'
+document.querySelectorAll('.radio-mark').forEach(radio => radio.style.left = '2px');
+} else {
+document.getElementsByClassName('page')[0].style.font = '12px "Nokia Standard Bold", "DejaVu Sans", sans-serif';
+document.getElementsByClassName('table')[0].style.fontSize = '11px'
+document.querySelectorAll('.radio-mark').forEach(radio => radio.style.left = '1px');
+}
+}
+}

src/main/resources/templates/index.html

@@ -118,6 +118,7 @@ <h2 th:if="*{title}" th:with="head=*{title}">
 <span th:text="#{code.powered}">Powered by</span> <a href="https://www.graalvm.org/" title="GraalVM Community">GraalVM</a> v<span th:text="${graalvm_version}"></span>
 </span>
 <span class="right">
+<a id="font" th:if="${#strings.equals(skin, 'techno')}" th:title="#{code.font}">𝑓</a>
 <span th:text="#{code.skin}">Skin:</span>
 <a title="Techno" th:href="${'/opts/?skin=techno'}">Techno</a>
 |