From 339739fbd3b035386d4789300e6655d30c59d7e9 Mon Sep 17 00:00:00 2001
From: archos <archos@archoslinux.cz>
Date: Thu, 28 Dec 2023 11:07:20 +0100
Subject: [PATCH] aktualizovan html kd a styly

---
 index.html | 27 +++++++++++++++++---------
 styles.css | 57 +++++++++++++++++++++++++++---------------------------
 2 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/index.html b/index.html
index ed4c705..fd318f0 100644
--- a/index.html
+++ b/index.html
@@ -70,15 +70,24 @@
         <p>Krátký odstavec popisující tebe a tvou práci.</p>
     </section>
     <section>
-        <h2>Kontakt</h2>
-        <p>E-mail: <a href="mailto:archos@archoslinux.cz">archos@archoslinux.cz</a></p>
-        <p>E-mail: <a href="mailto:archos@arch-linux.cz">archos@arch-linux.cz</a></p>
-        <p>Telefon: +420739274900</p>
-        <p>Matrix: <a href="https://matrix.to/#/@archos:mxchat.cz">archos:mxchat.cz</a></p>
-        <p>Pixelfed: <a href="https://pixelfed.cz/i/web/profile/441194050239729665">Sleduj mě na Pixelfed</a></p>
-        <p>Mastodon: <a href="https://mastodon.arch-linux.cz/@archos">Sleduj mě na Mastodon</a></p>
-        <p>Keyoxide: <a href="https://keyoxide.org/archos%40archoslinux.cz">Archos</a></p>
-    </section>
+        <!-- HTML - Upravená část pro Kontakty -->
+<section>
+   <!-- Sekce kontaktů s mřížkovým layoutem -->
+<section class="box-grid-container">
+    <!-- Každý kontakt je block-link s obrázkem na pozadí a textem -->
+    <div class="block-link" style="background-image: url('path/to/your/image.jpg');">
+        <a href="mailto:archos@archoslinux.cz">
+            <div class="block-link-wrapper">
+                <img src="path/to/your/icon.svg" alt="Ikona E-mailu">
+                <p class="link-title">E-mail</p>
+            </div>
+        </a>
+    </div>
+    <!-- Opakujte pro další kontakty -->
+</section>
+
+</section>
+
     <footer>
         <p>© [2023], archos</p>
     </footer>
diff --git a/styles.css b/styles.css
index baae0cb..d3c27cd 100644
--- a/styles.css
+++ b/styles.css
@@ -1,39 +1,38 @@
-body {
-    font-family: Arial, sans-serif;
-    color: #333333;
-    line-height: 1.6;
+/* Základní styly pro mřížkový layout */
+.box-grid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Automatické rozložení sloupců */
+    gap: 10px; /* Mezera mezi prvky */
 }
 
-h1 {
-    color: #123456;
-    font-size: 24px;
+/* Styly pro jednotlivé bloky odkazů */
+.block-link {
+    background-size: cover; /* Obrázek pokryje celý prvek */
+    border-radius: 10px; /* Zaoblené rohy */
+    overflow: hidden; /* Skryje přebytečný obsah */
+    position: relative; /* Pro umístění textu */
 }
 
-p {
-    font-size: 16px;
-}
-.container {
-    width: 80%;
-    margin: auto;
-    overflow: hidden;
-}
-@media (max-width: 600px) {
-    body {
-        background-color: lightblue;
-    }
-}
-a {
-    color: #0066cc;
-    text-decoration: none;
+.block-link a {
+    display: block; /* Odkaz pokryje celý prvek */
+    text-decoration: none; /* Bez podtržení odkazu */
+    color: white; /* Bílá barva textu */
 }
 
-a:hover {
-    text-decoration: underline;
+.block-link-wrapper {
+    position: absolute;
+    bottom: 10px; /* Umístění textu u spodního okraje */
+    left: 10px; /* Umístění textu u levého okraje */
 }
 
-img {
-    width: 150px; /* nebo jiná požadovaná velikost */
-    height: 150px;
-    border-radius: 50%; /* Toto vytvoří kruhový tvar */
+.block-link img {
+    width: 30px; /* Šířka ikony */
+    height: auto; /* Automatická výška ikony */
 }
 
+.link-title {
+    margin-top: 5px; /* Horní okraj pro text */
+    font-weight: bold; /* Tučný text */
+}
+
+/* Přidáte další styly podle potřeby */