Add some fixes

src/components/matrix-webclients.md

@@ -1,3 +0,0 @@
-- **[SchildiChat Web](https://element.nothing.run)** - built with Flutter and based on Element Matrix client with many features!
-- **[Cinny](https://cinny.nothing.run)** - most beautiful Matrix client
-- *Coming soon!* **[FluffyChat](https://fluffy.nothing.run)** - another Web Matrix client

src/components/matrixchat.astro

@@ -0,0 +1,7 @@
+---
+---
+<p>Nothing.run has chat in Matrix. Join it to get information about downtimes and updates, help, to suggest something that could make nothing.run better</p>
+<ul>
+  <li>Our Matrix space <a href="https://matrix.to/#/#nothingrun:nothing.run">#nothingrun:nothing.run</a></li>
+  <li>Our Matrix chat <a href="https://matrix.to/#/#localhost:nothing.run">#localhost:nothing.run</a></li>
+</ul>

src/components/services.md

@@ -1,4 +0,0 @@
-- **[Main website](/)**
-- **[Matrix](/matrix.html)** - decentralized communication server (powered by <a href="https://matrix.org/docs/projects/server/synapse">Synapse</a>). We have [Web-clients for Matrix](/matrix.html#web)
-<!-- - *Coming soon!* **[Mastodon](https://social.nothing.run)** - free social network, part of the Fediverse, powered by ActivityPub -->
-- *Coming soon!* **Forgejo** - lightwale Git repos hosting with Git over HTTPS and over SSH support. Based on Gitea

src/pages/contact.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '../layouts/index.astro'
+import MatrixChat from '../components/matrixchat.astro'
 ---
 <Layout title="Contact">
 <div class="asciicontainer">
@@ -33,11 +34,7 @@ import Layout from '../layouts/index.astro'
 
 <div>
   <h2>Our chat</h2>
-  <p>Nothing.run has chat in Matrix. Join it to get information about downtimes and updates, help, to suggest something that could make nothing.run better</p>
-  <ul>
-    <li>Our Matrix space <a href="https://matrix.to/#/#nothingrun:nothing.run">#nothingrun:nothing.run</a></li>
-    <li>Our Matrix chat <a href="https://matrix.to/#/#localhost:nothing.run">#localhost:nothing.run</a></li>
-  </ul>
+  <MatrixChat />
 </div>
 </div>
 </Layout>

src/pages/matrix.mdx

@@ -4,15 +4,32 @@ title: 'Matrix'
 description: 'Matrix'
 keys: 'nothing crypto free software libre self host'
 ---
+import MatrixChat from '../components/matrixchat.astro';
+
 [**Matrix**](https://matrix.org) is modern federative network for communication. That means that users from different servers can interact with each other. We host our own Matrix network server. There also is a great cross-plattform-client available!
 
+## Login data
+- Server name: nothing.run
+- Server address: https://matrix.nothing.run
+
 ## Our room
+<MatrixChat />
 
 ## Clients
 
 ### Web-clients
+<div class="bigcontainer">
+
+  <div class="matrixclient">
   - [Cinny](https://cinny.nothing.run) - modern and beautiful Matrix web client
+  <img src="/cinny-preview.png" alt="Cinny preview" />
+  </div>
+
+  <div class="matrixclient">
   - [Element](https://element.nothing.run) - the most popular and functional Matrix client
+  <img src="/element-preview.png" alt="Element preview" />
+  </div>
+</div>
 
 ### Mobile clients
 - [Element](https://github.com/element-hq/element-android) - very buggy and uncomfortable client
@@ -22,10 +39,7 @@ keys: 'nothing crypto free software libre self host'
 - [SchildiChat Next](https://schildi.chat/android/next/) - Element X with spaces support
 
 ### Desktop clients
-- [iamb](https://iamb.chat/) - written in Rust terminal-based client with Vim keybindings
-- [gomuks](https://github.com/gomuks/gomuks) - a terminal Matrix client written in Go
+- [iamb](https://iamb.chat/) & [gomuks](https://github.com/gomuks/gomuks) - written in Rust and Go terminal-based clients. iamb uses Vim-like keybindings
+- [Fractal](https://wiki.gnome.org/Apps/Fractal), [NeoChat](https://apps.kde.org/neochat/), [Nheko](https://nheko-reborn.github.io/) - nice desktop-oriented clients. Can be buggy sometimes
+- You can use Element, Schildi and Cinny Web as desktop clients via Electron. It's a less performant way to message from Matrix, but... You can! :)
 - [Ement.el](https://github.com/alphapapa/ement.el) - really? Are you so crazy to chat from Emacs???
-- [Fractal]
-- [NeoChat]
-- [Nheko]
-- You can use Element, Schildi and Cinny Web as desktop clients through Electron. It's unperformance way to use Matrix, but... You can! :)

src/style.css

@@ -182,26 +182,27 @@ pre.smaller {
 }
 
 #matrix {
-  background-image: url("./assets/matrix.png");
+  background-image: url("/matrix.png");
 }
 #gitea {
-  background-image: url("./assets/gitea.png");
+  background-image: url("/gitea.png");
 }
 #hedgedoc {
-  background-image: url("./assets/hedgedoc.png");
+  background-image: url("/hedgedoc.png");
 }
 #kanidm {
-  background-image: url("./assets/kanidm.png");
+  background-image: url("/kanidm.png");
 }
 
 .container {
     display: grid;
     /* margin: 0 auto; */
-    padding: 10px;
+    padding: 20px;
     margin-left: auto;
     margin-right: auto;
-    grid-column-gap: 10px;
+    grid-column-gap: 20px;
     /* grid-template-columns: auto auto auto; */
+    /* grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); */
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
     max-width: 1300px;
 }
@@ -226,3 +227,16 @@ pre.smaller {
   margin-left: 10px;
   margin-right: 10px;
 }
+
+@media (min-width: 1570px) {
+  .bigcontainer .matrixclient img {
+    width: 40vw;
+    height :auth;
+  }
+}
+@media (max-width: 1570px) {
+  .bigcontainer .matrixclient img {
+    width: 90vw;
+    height: auth;
+  }
+}