Add some services

- Add more depth to .block
- Make footer lighter
- Stylize scrollbar

app.py

@@ -1,6 +1,5 @@
 from os import system as console
 from configparser import ConfigParser
-from flask_mobility import Mobility
 from flask import (
     Flask,
     g,
@@ -30,7 +29,6 @@ def get_locale():
     return request.accept_languages.best_match(('en', 'ru', 'de', 'fr', 'ja'), 'en')
 
 app = Flask(__name__)
-Mobility(app)
 
 
 @app.before_request
@@ -61,6 +59,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 +75,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]

requirements.txt

@@ -1,3 +1,2 @@
 Flask==3.1.1
-flask_mobility
 gunicorn

static/style/main.scss

@@ -54,9 +54,10 @@ h1 {
 
 a {
   color: unset;
-  text-decoration: underline;
+  text: {
-  text-decoration-color: $blue;
+    decoration: underline {color: $blue};
-  text-underline-offset: 1px;
+    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,12 +171,47 @@ 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;
   border-radius: .2em;
 }
 
+
+::-webkit-scrollbar {
+  width: .5rem;
+
+  &-button {
+    display: none;
+  }
+
+  &-track {
+    background-color: $base;
+  }
+
+  &-thumb {
+    background-color: $overlay0;
+    border-radius: .25rem;
+
+    &:hover {
+      background-color: $overlay1;
+    }
+  }
+}
+
 @font-face {
   font-family: Monocraft;
   src: url("/static/font/Monocraft.ttc");

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/host.html

@@ -13,9 +13,9 @@
     <ul>
       <li>CPU: Ryzen i9@3.4GHz (4 cores)</li>
       <li>RAM: 8 GiB</li>
-      <li>SSD: 150 GiB</li>
+      <li>SSD: 150 GB</li>
       <li>ETH: 500Mb/s</li>
-      <li>Loc: Portugal</li>
+      <li>Loc: Deutchland, Frankfurt am Mein</li>
     </ul>
   </div>
 {% endblock %}

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,49 +12,12 @@
     defer
   ></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-  <style>
-    h3 {
-      margin-block-end: 0;
-    }
-
-    {% if g.is_mobile %}
-      .qr img { width: 100%; }
-      .blocks.qr {
-        flex-wrap: nowrap;
-        overflow-x: auto;
-        width: calc(100vw - 1rem);
-        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: 16rem;
-      }
-    {% else %}
-      .qr img { width: 13.66rem;  /* (x + 1) * 3 + 1 = 45 */ }
-    {% endif %}
-
-    .qr p {
-      text-align: center;
-    }
-
-    .badges .block {
-      flex: 1;
-      text-wrap-mode: nowrap;
-    }
-
-    .badges .block:hover {
-      flex: 1.5;
-      transform: none;
-    }
-  </style>
 </head>
 <body>
+  <header>
+    <a href="{{ url_for('index') }}">Coders Squad</a>
+  </header>
+
   <main>
     <h3>Development</h3>
     <div class="blocks badges">
@@ -74,14 +38,18 @@
     <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">
         <img class="icon" src="/static/icon/service/sharkey.webp" />
         Fediverse
       </a>
+      <a class="block" href="https://discord.com/users/459823895256498186">
+        <img class="icon" src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/66e3d80db9971f10a9757c99_Symbol.svg" />
+        Discord
+      </a>
       <a class="block" href="mailto:risdeveau@codrs.ru">
-        <img class="icon" src="" />
         Mail
       </a>
     </div>