fixup! restyle

static/scss/main.scss

@@ -1,13 +1,33 @@
+$base: #1e1e2e;
+$text: #cdd6f4;
+
+$mantle: #181825;
+$crust: #11111b;
+
+$overlay0: #6c7086;
+$overlay1: #7f849c;
+$overlay2: #9399b2;
+
+$surface0: #313244;
+$surface1: #45475a;
+$surface2: #585b70;
+
+$subtext0: #a6adc8;
+$subtext1: #bac2de;
+
+$blue: #89b4fa;
+
+
 body {
-  background-color: #1e1e2e;
+  background-color: $base;
   font-family: Pixeloid;
-  color: #cdd6f4;
+  color: $text;
 }
 
 a {
   color: unset;
   text-decoration: underline;
-  text-decoration-color: #89b4fa;
+  text-decoration-color: $blue;
   text-underline-offset: 1px;
   transition: text-underline-offset 0.3s ease;
 
@@ -23,7 +43,22 @@ a {
 
 .mono {
   font-family: "Monocraft", monospace;
-  color: #9399b2;
+  background-color: $mantle;
+  color: $subtext0;
+
+  &:hover {
+    background-color: $crust;
+  }
+}
+
+.services {
+  background-color: $surface0;
+  border-radius: 8px;
+  padding: 8px;
+
+  & + & {
+    margin-top: 16px;
+  }
 }
 
 @font-face {

static/sript/copy-mono.js

@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.mono').forEach(element => {
+    element.addEventListener('click', async () => {
+      await navigator.clipboard.writeText(element.textContent);
+    });
+  });
+});

templates/index.html

@@ -3,7 +3,7 @@
   <title>Coders Squad</title>
 
   <link rel="stylesheet" href="/static/style/main.css">
-
+  <script src="/static/sript/copy-mono.js"> </script>
 </head>
 <body>
   <h1>Coders Squad</h1>

templates/services.tmpl

@@ -1,21 +1,21 @@
-<div class="services-1">
+<div class="services pixel-corners">
 	<div>
-		<p><a href="https://b.codrs.ru"><strong>Sharkey</strong></a></p>
+		<div><a href="https://b.codrs.ru"><strong>Sharkey</strong></a></div>
 		<p>Федеративная микроблогинговая система поверх протокола ActivityPub</p>
 	</div>
 	<div>
-		<p><a href="https://g.codrs.ru"><strong>Gitea</strong></a></p>
+		<div><a href="https://g.codrs.ru"><strong>Gitea</strong></a></div>
 		<p>Selhosted хранилище git-репозиториев со свободным исходным кодом</p>
 	</div>
 </div>
 
-<div class="services-2">
+<div class="services">
 	<p><a href="https://m.codrs.ru"><strong>Matrix</strong></a> &mdash; федеративный мессанджер</p>
 	<p><a href="https://c.codrs.ru"><strong>Copyparty</strong></a> &mdash; облочное хранилище файлов</p>
 	<p><a href="https://s.codrs.ru"><strong>4get</strong></a> &mdash; прокси-поисковик</p>
 </div>
 
-<div class="services-3">
+<div class="services">
 	<div>
 		DNS:
 		<ul>
@@ -30,6 +30,6 @@
 	</div>
 </div>
 
-<div class="services-4">
+<div class="services">
 	Ещё у нас есть <a href="https://bug.codrs.ru">GlitchTip</a> и <a href="https://dav.codrs.ru">Baikal</a> для участников нашей группы!
 </div>