kankys/AkademieProjekt3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme light

Browse Source
This commit is contained in:
kankys 2024-03-28 22:29:49 +01:00
parent 9af3d20fa7
commit 37c9c17931
4 changed files with 324 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/icons8-rocket.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

50
index.html
View File

@ -6,9 +6,12 @@
<head>
<meta charset="UTF-8" />
<meta name="description" content="ApolloNvim svoboda v programování...." />
<meta name="keywords" content="ApolloNvim Distro" />
<meta name="author" content="Kankys" />
<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" />
<script
src="https://kit.fontawesome.com/0a43c6cd1f.js"
crossorigin="anonymous"
@ -18,10 +21,6 @@
<body>
<header>
<!-- Terminal - logo (Terminal) -->
<!--<div class="logo">-->
<!--<img class="picture" src="#" alt="" />-->
<!--</div>-->
<h1 class="title">🚀ApolloNvim</h1>
<!-- Terminal - navigation -->
@ -32,7 +31,6 @@
<li><a href="#contact">Kontakty</a></li>
</ul>
</nav>
<!--<button id="toggleButton">Dracula/Light mode</button> -->
<div class="menu-icon">
<!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i>
@ -40,9 +38,8 @@
<!-- <i class="fa-solid fa-xmark"></i> -->
</div>
</header>
<!--<hr />-->
<button id="toggleButton">Dracula/Light mode</button>
<hr />
<!-- Sekce 1 -->
<section class="content" id="welcome">
<section class="welcome">
@ -120,9 +117,8 @@
</section>
<section class="photo">
<img class="picture" src="img/home.png" alt="Homescreen" />
<img class="picture1" src="img/config.png" alt="config.vim">
<img class="picture2" src="img/fzf.png" alt="fzf">
<img class="picture1" src="img/config.png" alt="config.vim" />
<img class="picture2" src="img/fzf.png" alt="fzf" />
</section>
<section id="install">
<h2>Instalace a nastavení:</h2>
@ -174,7 +170,6 @@
<div class="code-box">
<p>npx live-server</p>
</div>
</section>
<section id="neovim">
<h2>Neovim:</h2>
@ -231,11 +226,12 @@
👉 Tuto konfiguraci používám na Linuxu i MacOS. Je ozkoušena i na
Windows 11.
</p>
</section>
<section id="apollo">
<h2>Plán 🚀ApolloNvim:</h2>
<p>👉 Do budoucna můžete očekávat tyto nové funkce a další novinky:</p>
<p>
👉 Do budoucna můžete očekávat tyto nové funkce a další novinky:
</p>
<p>
👉 Web na vlastní doméně zatím ApolloNvim najdeš
<a href="https://lukaskanka.cz/apollo-nvim" target="_blank">zde</a>.
@ -271,7 +267,9 @@
</p>
<p>
👉
<a href="https://github.com/neoclide/coc.nvim" target="_blank">Coc</a>
<a href="https://github.com/neoclide/coc.nvim" target="_blank"
>Coc</a
>
manager pro instalování doplňků do Neovim.
</p>
<p>
@ -296,14 +294,15 @@
<a href="https://github.com/preservim/nerdcommenter" target="_blank"
>NERD Commenter</a
>
plugin pro zakomentování a odkomentování kódu. Zde ho máme nastaven na
plugin pro zakomentování a odkomentování kódu. Zde ho máme nastaven
na
<strong>Ctrl + k</strong>.
</p>
<p>
👉
<a href="https://wakatime.com/neovim" target="_blank">Wakatime</a>
služba která je schopna kolik času jste trávily při kódování na pc a i
na kterém projektu. Služba se jednoduše propojí přes API. WakaTime
služba která je schopna kolik času jste trávily při kódování na pc a
i na kterém projektu. Služba se jednoduše propojí přes API. WakaTime
najdeš <a href="https://wakatime.com/" target="_blank">zde</a>.
</p>
<p>
@ -312,8 +311,8 @@
>fzf.vim</a
>
asynchronií vyhledávač souboru v projektu. Pro mnohé je toto
vyhledávaní rychlejší než klasické stromové, chce to trochu času. Ale
jak se dostane pod kůži vše ostatní Vám už přijde nedodělané.
vyhledávaní rychlejší než klasické stromové, chce to trochu času.
Ale jak se dostane pod kůži vše ostatní Vám už přijde nedodělané.
</p>
<p>
👉
@ -371,7 +370,9 @@
>
</p>
<p>
<a href="https://github.com/LukasKanka/" target="_blank">👉 GitHub</a>
<a href="https://github.com/LukasKanka/" target="_blank"
>👉 GitHub</a
>
</p>
<p>
<a
@ -381,7 +382,8 @@
>
</p>
<p>
<a href="https://mastodon.arch-linux.cz/@Kankys" target="_blank"👉 > Mastodon</a
<a href="https://mastodon.arch-linux.cz/@Kankys" target="_blank" 👉>
Mastodon</a
>
</p>
</section>
@ -421,7 +423,9 @@
</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>
<footer>
Copyright &copy;
<a href="https://git.archoslinux.cz/kankys" target="_blank"

73
script.js
View File

@ -27,8 +27,9 @@ 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.getElementById("scrollToTopBtn");
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
@ -49,13 +50,26 @@ function setDraculaStyles() {
solid1.style.backgroundColor = "#2a232b";
footer.style.backgroundColor = "#2a232b";
gotop.style.backgroundColor = "#18f700";
theme.style.backgroundColor = "#18f700";
}
// Funkce pro nastavení stylů pro Light mód
// Funkce pro nastavení stylů pro Light mód;
function setLightStyles() {
body.style.backgroundColor = "#f8f8f2"; // Barva pozadí pro Light mód
body.style.backgroundColor = "#e7efa7"; // Barva pozadí pro Light mód
body.style.color = "#282a36"; // Barva textu pro Light mód
head.style.backgroundColor = "#f8f8f2";
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"
})
}
// Funkce pro přepnutí módu
@ -78,55 +92,42 @@ document.getElementById("toggleButton").addEventListener("click", toggleMode);
setDraculaStyles();
isDraculaMode = true;
// Photo Gallery -> section
const image1 = document.querySelector(".picture")
const image1 = document.querySelector(".picture");
image1.addEventListener("mouseenter", () => {
image1.style.transform = "scale(2.2)"
})
image1.style.transform = "scale(2.2)";
});
image1.addEventListener("mouseleave", () => {
image1.style.transform = "scale(1)";
});
image1.style.transform = "scale(1)"
})
const image2 = document.querySelector(".picture1")
const image2 = document.querySelector(".picture1");
image2.addEventListener("mouseenter", () => {
image2.style.transform = "scale(2.2)"
})
image2.style.transform = "scale(2.2)";
});
image2.addEventListener("mouseleave", () => {
image2.style.transform = "scale(1)";
});
image2.style.transform = "scale(1)"
})
const image3 = document.querySelector(".picture2")
const image3 = document.querySelector(".picture2");
image3.addEventListener("mouseenter", () => {
image3.style.transform = "scale(2.2)"
})
image3.style.transform = "scale(2.2)";
});
image3.addEventListener("mouseleave", () => {
image3.style.transform = "scale(1)"
})
image3.style.transform = "scale(1)";
});
// Tlačítko go to top
// Zobrazit tlačítko, pokud je uživatel dostatečně daleko od horní části stránky
window.onscroll = function() {scrollFunction()};
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {

8
style.css
View File

@ -11,7 +11,6 @@
body {
max-width: 1000px;
margin: 0 auto;
/*background-color: green;*/
}
/* Terminal ( header) */
@ -61,7 +60,6 @@ nav li a {
.menu-icon {
display: none;
margin-right: 30px;
/*background-color: white;*/
}
/*Dark/Light mode button*/
@ -69,7 +67,6 @@ nav li a {
float: right;
margin-right: 30px;
margin-top: 10px;
background-color: #18f700;
color: black;
border-bottom: 60px;
border-radius: 30px;
@ -85,11 +82,9 @@ padding: 10px;
}
header {
/*width: 375px; */
position: relative;
}
header nav {
/*background-color: white;*/
position: absolute;
top: 70px;
width: 100%;
@ -112,7 +107,6 @@ padding: 10px;
/* Sekce */
.content {
/*padding-top: 150px;*/
text-align: center;
}
@ -155,7 +149,7 @@ padding: 10px;
/*Code box*/
.code-box {
background-color: grey;
background-color: #353535;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;