Restruct style

app.py

@@ -61,6 +61,7 @@ def inject_translations():
 
 if app.debug:
     console("sass static/style/main.scss static/style/main.css")
+    console("sass static/style/risdeveau.scss static/style/risdeveau.css")
 
 @app.route("/")
 def index():
@@ -76,4 +77,4 @@ def us():
 
 @app.route("/risdeveau")
 def risdeveau():
-    return render_template('personal/risdeveau/index.html')
+    return render_template('personal/risdeveau.html')

locale/de.ini

@@ -15,6 +15,8 @@ gitea = Open-Source, selbst gehosteter Git-Repository-Hoster
 matrix = Föderierter Messenger
 copyparty = Cloud-Dateispeicher
 4get = Proxy-Suchmaschine
+tools = Satz verschiedener Werkzeuge
+vert = Dateiumwandler
 
 
 [host]

locale/en.ini

@@ -15,6 +15,8 @@ gitea = Opensource selfhosted Git repository hosting
 matrix = federated instant messenger
 copyparty = cloud file storage
 4get = proxy search engine
+tools = set of various tools
+vert = file converter
 
 
 [host]

locale/fr.ini

@@ -15,6 +15,8 @@ gitea = Hébergement de dépôts Git open source en auto-hébergé
 matrix = Messagerie fédérée
 copyparty = Stockage de fichiers en cloud
 4get = Moteur de recherche proxy
+tools = ensemble d'outils variés
+vert = convertisseur de fichiers
 
 
 [host]

locale/ja.ini

@@ -15,6 +15,8 @@ gitea = オープンソースのセルフホスティングGitリポジトリ
 matrix = 連合型メッセンジャー
 copyparty = クラウドファイルストレージ
 4get = プロキシ検索エンジン
+tools = 様々なツールのセット
+vert = ファイル変換ツール
 
 
 [host]

locale/ru.ini

@@ -15,6 +15,8 @@ gitea = Selfhosted хранилище Git-репозиториев со своб
 matrix = федеративный мессенджер
 copyparty = облачное хранилище файлов
 4get = прокси-поисковик
+tools = набор разнообразных утилит
+vert = конвертация файлов
 
 
 [host]

static/style/main.scss

@@ -54,9 +54,10 @@ h1 {
 
 a {
   color: unset;
-  text-decoration: underline;
-  text-decoration-color: $blue;
-  text-underline-offset: 1px;
+  text: {
+    decoration: underline {color: $blue};
+    underline-offset: 1px;
+  }
   transition: 0.3s ease;
 
   &:hover {
@@ -90,7 +91,6 @@ ul {
 
 header {
   display: flex;
-  flex-direction: row-reverse;
   justify-content: space-between;
   background-color: $mantle;
   padding: .5rem;
@@ -171,6 +171,19 @@ footer {
   }
 }
 
+.badges {
+  .block {
+    flex: 1;
+    text-wrap-mode: nowrap;
+    text-align: -webkit-center;
+
+    &:hover {
+      flex: 1.5;
+      transform: none;
+    }
+  }
+}
+
 .icon {
   width: 1.5em;
   vertical-align: middle;

static/style/risdeveau.scss

@@ -0,0 +1,33 @@
+h3 {
+  margin-block-end: 0;
+}
+
+.qr {
+  img { width: 100% }
+  p { text-align: center; }
+
+  &.blocks {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    width: calc(100vw - 1rem);
+    max-width: 45rem;
+    scroll: {
+      behavior: smooth;
+      snap-type: x mandatory;
+    }
+
+    &::-webkit-scrollbar { display: none; }
+
+    &:hover .block.qr:not(:hover) {
+      filter: blur(5px);
+      transition: all 0.3s ease;
+    }
+  }
+
+  &.block {
+    flex: 0 0 calc(100vw - 2rem);
+    scroll-snap-align: start;
+    max-width: 13.666rem;
+  }
+}
+

templates/header.tmpl

@@ -1,4 +1,10 @@
 <header>
+	{%- if request.path != url_for('index') %}
+		<a href="{{ url_for('index') }}">Coders Squad</a>
+	{%- else %}
+		<div></div>
+	{%- endif %}
+
 	<div class="header-links">
 		{%- for (l, t) in (
 			('us', _('about us')),
@@ -11,8 +17,4 @@
 			{%- endif %}
 		{%- endfor %}
 	</div>
-
-	{%- if request.path != url_for('index') %}
-		<a href="{{ url_for('index') }}">Coders Squad</a>
-	{%- endif %}
 </header>

templates/index.html

@@ -25,6 +25,8 @@
 		<p><a href="https://m.codrs.ru" target="_blank"><strong>Matrix</strong></a> &mdash; {{ _('index.descr:matrix') }}</p>
 		<p><a href="https://c.codrs.ru" target="_blank"><strong>Copyparty</strong></a> &mdash; {{ _('index.descr:copyparty') }}</p>
 		<p><a href="https://s.codrs.ru" target="_blank"><strong>4get</strong></a> &mdash; {{ _('index.descr:4get') }}</p>
+		<p><a href="https://tools.codrs.ru" target="_blank"><strong>IT-tools</strong></a> &mdash; {{ _('index.descr:tools') }}</p>
+		<p><a href="https://vert.codrs.ru" target="_blank"><strong>Vert</strong></a> &mdash; {{ _('index.descr:vert') }}</p>
 	</div>
 
 	<div class="block">

templates/personal/risdeveau.html

@@ -4,6 +4,7 @@
   <title>Sweet Bread</title>
 
   <link rel="stylesheet" href="/static/style/main.css">
+  <link rel="stylesheet" href="/static/style/risdeveau.css">
   <link rel="icon" type="image/webp" href="/static/icon/us/risdeveau.webp" />
   <script
     src="https://track.codrs.ru/api/script.js"
@@ -11,54 +12,12 @@
     defer
   ></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-  <style>
-    h3 {
-      margin-block-end: 0;
-    }
-
-    .qr img {
-      width: 100%;
-    }
-    .qr p {
-      text-align: center;
-    }
-
-    .blocks.qr {
-      flex-wrap: nowrap;
-      overflow-x: auto;
-      width: calc(100vw - 1rem);
-      max-width: 45rem;
-      scroll-behavior: smooth;
-      scroll-snap-type: x mandatory;
-    }
-    .blocks.qr::-webkit-scrollbar { display: none; }
-
-    .block.qr {
-      flex: 0 0 calc(100vw - 2rem);
-      scroll-snap-align: start;
-      max-width: 13.666rem;
-    }
-
-    .badges .block {
-      flex: 1;
-      text-wrap-mode: nowrap;
-    }
-    .badges .block:hover {
-      flex: 1.5;
-      transform: none;
-    }
-
-    .blocks.qr:hover .block.qr:not(:hover) {
-      filter: blur(5px);
-      transition: all 0.3s ease;
-    }
-    .block.qr:hover {
-      filter: blur(0) !important;
-    }
-  </style>
 </head>
 <body>
+  <header>
+    <a href="{{ url_for('index') }}">Coders Squad</a>
+  </header>
+
   <main>
     <h3>Development</h3>
     <div class="blocks badges">
@@ -79,6 +38,7 @@
     <h3>Contacts</h3>
     <div class="blocks badges">
       <a class="block" href="https://matrix.to/#/@risdeveau:codrs.ru">
+        <img class="icon" src="https://matrix.org/assets/favicon.ico" />
         Matrix
       </a>
       <a class="block" href="//b.codrs.ru/@risdeveau">
@@ -90,7 +50,6 @@
         Discord
       </a>
       <a class="block" href="mailto:risdeveau@codrs.ru">
-        <img class="icon" src="" />
         Mail
       </a>
     </div>