kategorie clanky

clanky/script.js

@@ -0,0 +1,35 @@
+const menuIcon = document.querySelector(".menu-icon");
+const menuList = document.querySelector("nav");
+const hamburgerIcon = document.querySelector(".fa-solid");
+
+menuIcon.addEventListener("click", () => {
+    if (hamburgerIcon.classList[1] === "fa-bars") {
+        hamburgerIcon.classList.add("fa-xmark");
+        hamburgerIcon.classList.remove("fa-bars");
+        menuList.style.display = "block";
+    } else {
+        hamburgerIcon.classList.add("fa-bars");
+        hamburgerIcon.classList.remove("fa-xmark");
+        menuList.style.display = "none";
+    }
+});
+
+// Tlačítko go to top
+// Zobrazení tlačítka od rolovaní části stránky (víc logické než až na konci)
+window.onscroll = function () {
+    scrollFunction();
+};
+
+function scrollFunction() {
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        document.getElementById("scrollToTopBtn").style.display = "block";
+    } else {
+        document.getElementById("scrollToTopBtn").style.display = "none";
+    }
+}
+
+// Posunout nahoru, když uživatel klikne na tlačítko
+function scrollToTop() {
+    document.body.scrollTop = 0; // Pro Safari
+    document.documentElement.scrollTop = 0; // Pro ostatní prohlížeče
+}

clanky/style.css

@@ -0,0 +1,123 @@
+/* About sekce */
+
+.about-section {
+    margin: 45px 0;
+}
+
+.about-section-wrapper {
+    width: 65%;
+    margin: 0 auto;
+    display: flex;
+    gap: 20px;
+}
+
+.about-text {
+    flex: 1;
+}
+
+.about-img {
+    flex: 1;
+}
+
+img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+@media (max-width: 768px) {
+    .about-section-wrapper {
+        flex-direction: column;
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    .about-text {
+        text-align: left;
+    }
+
+    .about-img {
+        text-align: center;
+    }
+
+    .about-text-p {
+        padding-top: 15px;
+    }
+}
+
+footer {
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.qt {
+    width: 60%;
+}
+
+/* Go to go */
+#scrollToTopBtn {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    /*butoon přes obsah*/
+    z-index: 99;
+    outline: none;
+    cursor: pointer;
+    padding: 15px;
+    border-radius: 50%;
+    background-color: transparent;
+}
+
+/* Různé - extra css */
+h1 {
+    color: #734f96;
+    margin-top: 50px;
+    font-size: 50px;
+}
+
+h2 a {
+    color: #734f96;
+}
+
+h3 {
+    color: #734f96;
+}
+
+img {
+    width: 30%;
+}
+
+code {
+    background-color: aliceblue;
+}
+
+/* CodeBox */
+
+.code-box {
+    position: relative;
+    width: 500px;
+    height: auto;
+    border: 1px solid #734f96;
+    padding: 5px;
+    overflow: auto;
+    background-color: #313131;
+    color: yellowgreen;
+    margin: auto;
+    text-align: left;
+}
+
+#copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    color: whitesmoke;
+    background-color: transparent;
+    border: 1px solid #734f96;
+}
+
+.mpd-picture {
+    width: 100%;
+}