Add some services

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

app.py

@@ -59,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():
@@ -71,3 +72,7 @@ def host():
 @app.route("/us")
 def us():
     return render_template('us.html')
+
+@app.route("/risdeveau")
+def risdeveau():
+    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

@@ -44,7 +44,7 @@ body {
 main {
   max-width: 45rem;
   margin-inline: auto;
-  padding: 0 8px;
+  padding: 0 .5rem;
   flex: 1 0 auto;
 }
 
@@ -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 {
@@ -67,6 +68,7 @@ a {
     transition: none !important;
     display: inline-block;
     transform: scale(.98) !important;
+    background-color: $mantle !important;
   }
 
   &.block {
@@ -74,16 +76,24 @@ a {
 
     &:hover {
       transform: scale(1.02) translateY(-.25rem);
+      background-color: $surface1;
     }
   }
 }
 
+p {
+  margin: .5rem;
+}
+
+ul {
+  margin-top: .25rem;
+}
+
 header {
   display: flex;
-  flex-direction: row-reverse;
   justify-content: space-between;
   background-color: $mantle;
-  padding: 8px;
+  padding: .5rem;
   font-size: larger;
 }
 
@@ -91,9 +101,9 @@ footer {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  background-color: $crust;
+  background-color: $mantle;
-  margin-top: 32px;
+  margin-top: 2rem;
-  padding: 16px;
+  padding: 1rem;
   column-gap: 4ch;
 }
 
@@ -101,7 +111,7 @@ footer {
   font-family: Monocraft, monospace;
   background-color: $mantle;
   border-radius: 2px;
-  padding: 0 4px;
+  padding: 0 .25rem;
   color: $subtext0;
   overflow-wrap: anywhere;
 
@@ -114,11 +124,11 @@ footer {
 .block {
   display: block;
   background-color: $surface0;
-  border-radius: 8px;
+  border-radius: .5rem;
-  padding: 8px;
+  padding: .5rem;
 
   & + & {
-    margin-top: 8px;
+    margin-top: .5rem;
   }
 
   &.red {
@@ -129,6 +139,8 @@ footer {
   }
   &.green {
     background-color: color.mix($surface0, $green, 60%);
+    &:hover { background-color: color.mix($surface1, $green, 60%); }
+    &:active { background-color: color.mix($mantle, $green, 60%) !important; }
   }
 
   & .header {
@@ -142,12 +154,64 @@ footer {
   }
 }
 
+.blocks {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: .5rem;
+  gap: .5rem;
+
+  & + &,
+  & + .block,
+  .block + & {
+    margin-top: .5rem;
+  }
+
+  .block {
+    margin-top: 0;
+  }
+}
+
+.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

@@ -3,7 +3,7 @@
 {% block title %}{{ _('about host') }}{% endblock %}
 
 {% block content %}
-  <a href="https://play2go.cloud/" target="_blank" class="block">
+  <a href="https://play2go.cloud/?ref_id=4baFoOIp5QE" target="_blank" class="block">
     <strong>{{ _("host:hoster") }}</strong>: play2go
     <p>{{ _('host:hoster_descr') }}</p>
   </a>
@@ -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

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <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"
+    data-site-id="1"
+    defer
+  ></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <header>
+    <a href="{{ url_for('index') }}">Coders Squad</a>
+  </header>
+
+  <main>
+    <h3>Development</h3>
+    <div class="blocks badges">
+      <a class="block" href="//g.codrs.ru/Sweetbread">
+        <img class="icon" src="/static/icon/service/gitea.webp" />
+        Gitea
+      </a>
+      <a class="block" href="https://github.com/VerySweetBread">
+        <img class="icon" src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" />
+        GitHub
+      </a>
+      <a class="block" href="https://git.kolibrios.org/Sweetbread">
+        <img class="icon" src="https://git.kolibrios.org/assets/img/logo.svg" />
+        KolibriOS Git
+      </a>
+    </div>
+
+    <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">
+        Mail
+      </a>
+    </div>
+
+    <h3>Game accounts</h3>
+    <div class="blocks badges">
+      <a class="block" href="https://steamcommunity.com/id/risdeveau">
+        <img class="icon" src="https://store.steampowered.com/favicon.ico" />
+        Steam
+      </a>
+      <a class="block" href="https://gamebanana.com/members/3899828">
+        <img class="icon" src="https://images.gamebanana.com/static/img/favicon/favicon.ico" />
+        GameBanana
+      </a>
+    </div>
+
+    <h3>Wallets</h3>
+    <div class="blocks qr">
+      <div class="block qr">
+        <p>POL, BNB</p>
+        <img src="/static/img/risdeveau/wallets/evm.webp">
+      </div>
+
+      <div class="block qr">
+        <p>TON</p>
+        <img src="/static/img/risdeveau/wallets/ton.webp">
+      </div>
+
+      <div class="block qr">
+        <p>XMR</p>
+        <img src="/static/img/risdeveau/wallets/xmr.webp">
+      </div>
+    </div>
+  </main>
+</body>
+</html>

templates/us.html

@@ -3,7 +3,7 @@
 {% block title %}О нас{% endblock %}
 
 {% block content %}
-  <a href="#" class="block green">
+  <a href="{{ url_for('risdeveau') }}" class="block green">
     <div class="header">
       <img src="/static/icon/us/risdeveau.webp" class="icon"/>
       Sweetbread