fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! restyle

app.py

@@ -12,3 +12,7 @@ def index():
 @app.route("/host")
 def host():
     return render_template('host.html')
+
+@app.route("/us")
+def us():
+    return render_template('us.html')

static/scss/main.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $base: #1e1e2e;
 $text: #cdd6f4;
 
@@ -15,6 +17,9 @@ $surface2: #585b70;
 $subtext0: #a6adc8;
 $subtext1: #bac2de;
 
+$red: #f38ba8;
+$green: #a6e3a1;
+$peach: #fab387;
 $blue: #89b4fa;
 
 
@@ -23,7 +28,6 @@ body {
   font-family: Pixeloid;
   color: $text;
   width: 100%;
-  /* margin: 0 8px; */
   margin: 0;
 }
 
@@ -90,6 +94,28 @@ header {
   & + & {
     margin-top: 8px;
   }
+
+  &.red {
+    background-color: color.mix($surface0, $red, 50%);
+  }
+  &.orange {
+    background-color: color.mix($surface0, $peach, 50%);
+  }
+  &.green {
+    background-color: color.mix($surface0, $green, 50%);
+  }
+
+  & .header {
+    display: flex;
+    align-items: center;
+    font-size: x-large;
+
+    .icon {
+      margin-right: 4px;
+      width: 48px;
+      border-radius: 6px;
+    }
+  }
 }
 
 @font-face {
@@ -110,10 +136,3 @@ header {
     url("/static/font/Pixeloid/otf/Sans-Bold.otf") format("opentype");
   font-weight: bold;
 }
-@font-face {
-  font-family: PixeloidMono;
-  src:
-    url("/static/font/Pixeloid/woff/Mono.woff2") format("woff2"),
-    url("/static/font/Pixeloid/otf/Mono.otf") format("opentype");
-  font-style: mono;
-}

templates/header.tmpl

@@ -1,13 +1,13 @@
 <header>
 	<div class="header-links">
 		{%- for (l, t) in (
-			('#', 'О нас'),
+			('us', 'О нас'),
-			(url_for('host'), 'О сервере')
+			('host', 'О хосте')
 		)  %}
-			{%- if l == request.path %}
+			{%- if url_for(l) == request.path %}
 				<strong>{{ t }}</strong>
 			{%- else %}
-				<a href="{{ l }}">{{ t }}</a>
+				<a href="{{ url_for(l) }}">{{ t }}</a>
 			{%- endif %}
 		{%- endfor %}
 	</div>

templates/host.html

@@ -1,6 +1,6 @@
 <html>
 <head>
-  <title>Хост - Coders Squad</title>
+  <title>Coders Squad</title>
 
   <link rel="stylesheet" href="/static/style/main.css">
   <script src="/static/sript/copy-mono.js"> </script>
@@ -9,7 +9,7 @@
 <body>
   {% include 'header.tmpl' %}
 
-  <h1>О сервере</h1>
+  <h1>О хосте</h1>
 
   <main>
     <div class="block">

templates/services.tmpl

@@ -1,12 +1,16 @@
 <div class="block">
-	<div>
+	<div class="header">
-		<div><a href="https://b.codrs.ru" target="_blank"><strong>Sharkey</strong></a></div>
+		<img src="/static/icon/service/sharkey.webp" class="icon"/>
+		<a href="https://b.codrs.ru" target="_blank"><strong>Sharkey</strong></a>
+	</div>
 	<p>Федеративная микроблогинговая система поверх протокола ActivityPub</p>
 </div>
-	<div>
+<div class="block">
-		<div><a href="https://g.codrs.ru" target="_blank"><strong>Gitea</strong></a></div>
+	<div class="header">
-		<p>Selhosted хранилище git-репозиториев со свободным исходным кодом</p>
+		<img src="/static/icon/service/gitea.webp" class="icon"/>
+		<a href="https://g.codrs.ru" target="_blank"><strong>Gitea</strong></a>
 	</div>
+	<p>Selhosted хранилище git-репозиториев со свободным исходным кодом</p>
 </div>
 
 <div class="block">

templates/us.html

@@ -0,0 +1,40 @@
+<html>
+<head>
+  <title>Coders Squad</title>
+
+  <link rel="stylesheet" href="/static/style/main.css">
+  <script src="/static/sript/copy-mono.js"> </script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  {% include 'header.tmpl' %}
+
+  <h1>О нас</h1>
+
+  <main>
+    <div class="block green"><a href="#">
+      <div class="header">
+        <img src="/static/icon/us/risdeveau.webp" class="icon"/>
+        Sweetbread
+      </div>
+      Главный админ, занимается почти всеми сервисами. Создал этот сайт
+    </a></div>
+
+    <div class="block red">
+      <div class="header">
+        <img src="/static/icon/us/zxcqirara.webp" class="icon"/>
+        zxcqirara
+      </div>
+      Второй админ, занимается майном и VPN
+    </div>
+
+    <div class="block orange">
+      <div class="header">
+        <img src="/static/icon/us/chest.webp" class="icon"/>
+        Chest
+      </div>
+      Должна была помогать делать этот сайт
+    </div>
+  </main>
+</body>
+</html>