new icon, ubuntu font

2024-03-29 02:32:24 +01:00
parent 37c9c17931
commit 1fd37e6471
5 changed files with 108 additions and 94 deletions
--- a/img/logo.png
+++ b/img/logo.png
--- a/img/terminal.png
+++ b/img/terminal.png
--- a/index.html
+++ b/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"
-    ></script>
+      crossorigin="anonymous"></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">
-        Nahoru
-      </button>
+      <!--<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">-->
+        <!--Nahoru-->
+      <!--</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>
--- a/script.js
+++ b/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 theme = document.querySelector("#toggleButton");
+//const gotop = document.querySelector("#scrollToTopBtn");
+//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.color = "#f8f8f2"; // Barva textu pro Dracula mód
+  body.style.backgroundColor = "#2a232b"; 
+  body.style.color = "#f8f8f2"; 
  head.style.backgroundColor = "#2a232b";
  links.forEach((a) => {
    a.style.color = "#f76b00";
@@ -49,27 +49,27 @@ function setDraculaStyles() {
  solid.style.color = "#f76b00";
  solid1.style.backgroundColor = "#2a232b";
  footer.style.backgroundColor = "#2a232b";
-  gotop.style.backgroundColor = "#18f700";
-  theme.style.backgroundColor = "#18f700";
+  //gotop.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.color = "#282a36"; // Barva textu pro Light mód
+  body.style.backgroundColor = "#e7efa7"; 
+  body.style.color = "#282a36";
  head.style.backgroundColor = "#e7efa7";
  nav.style.backgroundColor = "#e7efa7";
  solid.style.backgroundColor = "#e7efa7";
  solid1.style.backgroundColor = "#e7efa7";
  footer.style.backgroundColor = "#e7efa7";
-	nadpish2.forEach((h2) => {
-		h2.style.color = "#c627d8";
-	});
-	gotop.style.backgroundColor = "#a7e6ef";
-	theme.style.backgroundColor = "#a7e6ef";
-	box.forEach((p) =>{
-		p.style.color = "white"
-	})
+  nadpish2.forEach((h2) => {
+    h2.style.color = "#c627d8";
+  });
+  //gotop.style.backgroundColor = "#a7e6ef";
+  //theme.style.backgroundColor = "#a7e6ef";
+  box.forEach((p) => {
+    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();
 };
--- a/style.css
+++ b/style.css
@@ -1,6 +1,3 @@
-/* Import barviček z colors.css */
-@import "colors.css";
-
 * {
  margin: 0;

@@ -9,14 +6,14 @@
  box-sizing: border-box;
 }
 body {
-	  max-width: 1000px;
-	  margin: 0 auto;
-
+  max-width: 1000px;
+  margin: 0 auto;
+    font-family: 'Ubuntu', sans-serif;
 }
-/* Terminal ( header) */
+/*Header */

 h1 {
-	padding-left: 8px;
+  padding-left: 8px;
 }

 header {
@@ -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,22 +59,35 @@ nav li a {

 /*Dark/Light mode button*/
 #toggleButton {
-float: right;
-margin-right: 30px;
-margin-top: 10px;
-color: black;
-border-bottom: 60px;
-border-radius: 30px;
-font-size: 15px;
-padding: 5px;
+  float: right;
+  margin-right: 30px;
+  margin-top: 10px;
+  color: black;
+  /*border-bottom: 60px;*/
+  /*border-radius: 30px;*/
+  /*font-size: 15px;*/
+  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;
-	}
+  body {
+    padding: 10px;
+  }

  header {
    position: relative;
@@ -111,74 +119,64 @@ padding: 10px;
 }

 .welcome {
-	padding-top: 115px;
-	padding-bottom: 50px;
+  padding-top: 115px;
+  padding-bottom: 50px;
 }

-
-
 #install {
-	padding-top: 50px;
-
+  padding-top: 50px;
 }

 #node {
-	padding-top: 50px;
-	padding-bottom: 50px;
+  padding-top: 50px;
+  padding-bottom: 50px;
 }

 #apollo {
-	padding-top: 50px;
-	padding-bottom: 50px;
+  padding-top: 50px;
+  padding-bottom: 50px;
 }

 #coc {
-	padding-top: 50px;
-	padding-bottom: 50px;
+  padding-top: 50px;
+  padding-bottom: 50px;
 }

 #contact {
-	padding-top: 50px;
-	padding-bottom: 50px;
+  padding-top: 50px;
+  padding-bottom: 50px;
 }

 #other {
-	padding-top: 50px;
-	
+  padding-top: 50px;
 }

 /*Code box*/
 .code-box {
-    background-color: #353535;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    font-family: monospace;
-    max-width: auto;
+  background-color: #353535;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-family: monospace;
+  max-width: auto;
 }

 /*Picture settings*/
- 
-.sat {
-	width: 175px;
-	height: 175px;
-}

+.sat {
+  width: 175px;
+  height: 175px;
+}

 .photo {
-	text-align: center;
-	padding-top: 50px;
+  text-align: center;
+  padding-top: 50px;
 }
 .photo img {
-
-    width: 300px;
-
-    height: 200px;
-
-    margin: 10px;
-
-    transition: all 0.5s linear;
-
+  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;
 }