new icon, ubuntu font

index.html

@@ -12,10 +12,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
     <link rel="shortcut icon" href="img/icons8-rocket.gif" />
+    <!--nav bar-->
     <script
       src="https://kit.fontawesome.com/0a43c6cd1f.js"
-      crossorigin="anonymous"
+      crossorigin="anonymous"></script>
-    ></script>
+    <!--icons dark, go to up-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <!--ubuntu fonts-->
+    <style>
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap')
+</style>
     <title>ApolloNvim</title>
   </head>
 
@@ -38,8 +44,10 @@
         <!-- <i class="fa-solid fa-xmark"></i> -->
       </div>
     </header>
-    <button id="toggleButton">Dracula/Light mode</button>
+    <hr>
-    <hr />
+    <button id="toggleButton"><i class="fas fa-adjust"></i></button>
+    <!--<button onclick="toggleMode()" id="toggleButton" title="Toggle Dark/Light Mode"><i class="fas fa-adjust"></i></button>-->
+    
     <!--  Sekce 1 -->
     <section class="content" id="welcome">
       <section class="welcome">
@@ -421,11 +429,11 @@
             👉 <a href="https://i3wm.org/" target="_blank">i3 window manager</a>
           </p>
         </section>
-        <!--<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">Nahoru</button>-->
       </section>
-      <button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">
+      <!--<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">-->
-        Nahoru
+        <!--Nahoru-->
-      </button>
+      <!--</button>-->
+      <button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top"><i class="fas fa-arrow-up"></i></button>
       <footer>
         Copyright &copy;
         <a href="https://git.archoslinux.cz/kankys" target="_blank"
@@ -434,7 +442,6 @@
         2024
       </footer>
     </section>
-
     <script src="script.js"></script>
   </body>
 </html>

script.js

@@ -1,4 +1,4 @@
-//Nastavení Header menu
+//Navbar menu
 const menuIcon = document.querySelector(".menu-icon");
 const menuList = document.querySelector("nav");
 const hamburgerIcon = document.querySelector(".fa-solid");
@@ -15,7 +15,7 @@ menuIcon.addEventListener("click", () => {
   }
 });
 
-// Dark Light Mode
+// Dark / Light Mode
 
 const body = document.querySelector("body");
 const head = document.querySelector("header");
@@ -27,15 +27,15 @@ const p = document.querySelector("p");
 const solid = document.querySelector(".fa-solid");
 const solid1 = document.querySelector(".menu-icon");
 const footer = document.querySelector("footer");
-const gotop = document.querySelector("#scrollToTopBtn");
+//const gotop = document.querySelector("#scrollToTopBtn");
-const theme = document.querySelector("#toggleButton");
+//const theme = document.querySelector("#toggleButton");
 const box = document.querySelectorAll(".code-box");
 let isDraculaMode = false;
 
 // Funkce pro nastavení stylů pro Dracula mód
 function setDraculaStyles() {
-  body.style.backgroundColor = "#2a232b"; // Barva pozadí pro Dracula mód
+  body.style.backgroundColor = "#2a232b"; 
-  body.style.color = "#f8f8f2"; // Barva textu pro Dracula mód
+  body.style.color = "#f8f8f2"; 
   head.style.backgroundColor = "#2a232b";
   links.forEach((a) => {
     a.style.color = "#f76b00";
@@ -49,14 +49,14 @@ function setDraculaStyles() {
   solid.style.color = "#f76b00";
   solid1.style.backgroundColor = "#2a232b";
   footer.style.backgroundColor = "#2a232b";
-  gotop.style.backgroundColor = "#18f700";
+  //gotop.style.backgroundColor = "#18f700";
-  theme.style.backgroundColor = "#18f700";
+  //theme.style.backgroundColor = "#18f700";
 }
 
 // Funkce pro nastavení stylů pro Light mód;
 function setLightStyles() {
-  body.style.backgroundColor = "#e7efa7"; // Barva pozadí pro Light mód
+  body.style.backgroundColor = "#e7efa7"; 
-  body.style.color = "#282a36"; // Barva textu pro Light mód
+  body.style.color = "#282a36";
   head.style.backgroundColor = "#e7efa7";
   nav.style.backgroundColor = "#e7efa7";
   solid.style.backgroundColor = "#e7efa7";
@@ -65,11 +65,11 @@ function setLightStyles() {
   nadpish2.forEach((h2) => {
     h2.style.color = "#c627d8";
   });
-	gotop.style.backgroundColor = "#a7e6ef";
+  //gotop.style.backgroundColor = "#a7e6ef";
-	theme.style.backgroundColor = "#a7e6ef";
+  //theme.style.backgroundColor = "#a7e6ef";
-	box.forEach((p) =>{
+  box.forEach((p) => {
-		p.style.color = "white"
+    p.style.color = "white";
-	})
+  });
 }
 
 // Funkce pro přepnutí módu
@@ -85,14 +85,17 @@ function toggleMode() {
   }
 }
 
-// Při kliknutí na tlačítko spusť funkci pro přepnutí módu
+// Funkce na změnu stylů
 document.getElementById("toggleButton").addEventListener("click", toggleMode);
 
-// Nastavit výchozí styl na Dracula mód po načtení stránky
+// Nastavení - výchozí styl na Dark 
 setDraculaStyles();
 isDraculaMode = true;
 
-// Photo Gallery -> section
+
+
+
+// Photo Gallery -> section (zoom)
 const image1 = document.querySelector(".picture");
 
 image1.addEventListener("mouseenter", () => {
@@ -124,7 +127,7 @@ image3.addEventListener("mouseleave", () => {
 });
 
 // Tlačítko go to top
-// Zobrazit tlačítko, pokud je uživatel dostatečně daleko od horní části stránky
+// Zobrazení tlačítka od rolovaní části stránky (víc logické než až na konci)
 window.onscroll = function () {
   scrollFunction();
 };

style.css

@@ -1,6 +1,3 @@
-/* Import barviček z colors.css */
-@import "colors.css";
-
 * {
   margin: 0;
 
@@ -11,9 +8,9 @@
 body {
   max-width: 1000px;
   margin: 0 auto;
-
+    font-family: 'Ubuntu', sans-serif;
 }
-/* Terminal ( header) */
+/*Header */
 
 h1 {
   padding-left: 8px;
@@ -25,7 +22,7 @@ header {
   align-items: center;
   height: 70px;
   flex-direction: row;
-/*position: fixed;*/
+  /*position: fixed;*/
 }
 
 .title {
@@ -37,8 +34,6 @@ header {
   display: flex;
 }
 
-
-
 /* navigation */
 nav {
   margin-right: 30px;
@@ -55,7 +50,7 @@ nav li a {
   color: black;
 }
 
-/*Terminal - navigation icons */
+/* navigation icons */
 
 .menu-icon {
   display: none;
@@ -64,21 +59,34 @@ nav li a {
 
 /*Dark/Light mode button*/
 #toggleButton {
-float: right;
+  float: right;
-margin-right: 30px;
+  margin-right: 30px;
-margin-top: 10px;
+  margin-top: 10px;
-color: black;
+  color: black;
-border-bottom: 60px;
+  /*border-bottom: 60px;*/
-border-radius: 30px;
+  /*border-radius: 30px;*/
-font-size: 15px;
+  /*font-size: 15px;*/
-padding: 5px;
+  padding: 5px;
+}
+
+#toggleButton {
+  /*position: fixed;*/
+  bottom: 20px;
+  right: 20px;
+  /*z-index: 99;*/
+  border: none;
+  outline: none;
+  background-color: transparent;
+  /*color: white; [> Barva ikony <]*/
+  font-size: 34px;
+  cursor: pointer;
 }
 
 
 /*Header small display*/
 @media (max-width: 600px) {
   body {
-padding: 10px;
+    padding: 10px;
   }
 
   header {
@@ -115,11 +123,8 @@ padding: 10px;
   padding-bottom: 50px;
 }
 
-
-
 #install {
   padding-top: 50px;
-
 }
 
 #node {
@@ -144,7 +149,6 @@ padding: 10px;
 
 #other {
   padding-top: 50px;
-	
 }
 
 /*Code box*/
@@ -164,21 +168,15 @@ padding: 10px;
   height: 175px;
 }
 
-
 .photo {
   text-align: center;
   padding-top: 50px;
 }
 .photo img {
-
   width: 300px;
-
   height: 200px;
-
   margin: 10px;
-
   transition: all 0.5s linear;
-
 }
 /*footer pevná pozice*/
 
@@ -187,7 +185,7 @@ footer {
   margin-bottom: 10px;
   margin-left: 25px;
   margin-top: 20px;
- }
+}
 
 footer a {
   text-decoration: none;
@@ -199,9 +197,15 @@ footer a {
   bottom: 20px;
   right: 20px;
   z-index: 99; /* Ujistěte se, že tlačítko bude přes obsah */
-  border: none;
+  /*border: none;*/
   outline: none;
   cursor: pointer;
   padding: 15px;
   border-radius: 50%;
+  background-color: transparent;
+}
+
+/* Styl pro ikonu */
+#scrollToTopBtn i {
+  font-size: 34px;
 }