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> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="img/icons8-rocket.gif" />
<script <script
src="https://kit.fontawesome.com/0a43c6cd1f.js" src="https://kit.fontawesome.com/0a43c6cd1f.js"
crossorigin="anonymous" crossorigin="anonymous"
@ -18,10 +21,6 @@
<body> <body>
<header> <header>
<!-- Terminal - logo (Terminal) -->
<!--<div class="logo">-->
<!--<img class="picture" src="#" alt="" />-->
<!--</div>-->
<h1 class="title">🚀ApolloNvim</h1> <h1 class="title">🚀ApolloNvim</h1>
<!-- Terminal - navigation --> <!-- Terminal - navigation -->
@ -32,7 +31,6 @@
<li><a href="#contact">Kontakty</a></li> <li><a href="#contact">Kontakty</a></li>
</ul> </ul>
</nav> </nav>
<!--<button id="toggleButton">Dracula/Light mode</button> -->
<div class="menu-icon"> <div class="menu-icon">
<!-- Ikona hamburger --> <!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
@ -40,9 +38,8 @@
<!-- <i class="fa-solid fa-xmark"></i> --> <!-- <i class="fa-solid fa-xmark"></i> -->
</div> </div>
</header> </header>
<!--<hr />-->
<button id="toggleButton">Dracula/Light mode</button> <button id="toggleButton">Dracula/Light mode</button>
<hr />
<!-- Sekce 1 --> <!-- Sekce 1 -->
<section class="content" id="welcome"> <section class="content" id="welcome">
<section class="welcome"> <section class="welcome">
@ -120,9 +117,8 @@
</section> </section>
<section class="photo"> <section class="photo">
<img class="picture" src="img/home.png" alt="Homescreen" /> <img class="picture" src="img/home.png" alt="Homescreen" />
<img class="picture1" src="img/config.png" alt="config.vim"> <img class="picture1" src="img/config.png" alt="config.vim" />
<img class="picture2" src="img/fzf.png" alt="fzf"> <img class="picture2" src="img/fzf.png" alt="fzf" />
</section> </section>
<section id="install"> <section id="install">
<h2>Instalace a nastavení:</h2> <h2>Instalace a nastavení:</h2>
@ -174,7 +170,6 @@
<div class="code-box"> <div class="code-box">
<p>npx live-server</p> <p>npx live-server</p>
</div> </div>
</section> </section>
<section id="neovim"> <section id="neovim">
<h2>Neovim:</h2> <h2>Neovim:</h2>
@ -231,11 +226,12 @@
👉 Tuto konfiguraci používám na Linuxu i MacOS. Je ozkoušena i na 👉 Tuto konfiguraci používám na Linuxu i MacOS. Je ozkoušena i na
Windows 11. Windows 11.
</p> </p>
</section> </section>
<section id="apollo"> <section id="apollo">
<h2>Plán 🚀ApolloNvim:</h2> <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> <p>
👉 Web na vlastní doméně zatím ApolloNvim najdeš 👉 Web na vlastní doméně zatím ApolloNvim najdeš
<a href="https://lukaskanka.cz/apollo-nvim" target="_blank">zde</a>. <a href="https://lukaskanka.cz/apollo-nvim" target="_blank">zde</a>.
@ -271,7 +267,9 @@
</p> </p>
<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. manager pro instalování doplňků do Neovim.
</p> </p>
<p> <p>
@ -296,14 +294,15 @@
<a href="https://github.com/preservim/nerdcommenter" target="_blank" <a href="https://github.com/preservim/nerdcommenter" target="_blank"
>NERD Commenter</a >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>. <strong>Ctrl + k</strong>.
</p> </p>
<p> <p>
👉 👉
<a href="https://wakatime.com/neovim" target="_blank">Wakatime</a> <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 služba která je schopna kolik času jste trávily při kódování na pc a
na kterém projektu. Služba se jednoduše propojí přes API. WakaTime 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>. najdeš <a href="https://wakatime.com/" target="_blank">zde</a>.
</p> </p>
<p> <p>
@ -312,8 +311,8 @@
>fzf.vim</a >fzf.vim</a
> >
asynchronií vyhledávač souboru v projektu. Pro mnohé je toto asynchronií vyhledávač souboru v projektu. Pro mnohé je toto
vyhledávaní rychlejší než klasické stromové, chce to trochu času. Ale vyhledávaní rychlejší než klasické stromové, chce to trochu času.
jak se dostane pod kůži vše ostatní Vám už přijde nedodělané. Ale jak se dostane pod kůži vše ostatní Vám už přijde nedodělané.
</p> </p>
<p> <p>
👉 👉
@ -371,7 +370,9 @@
> >
</p> </p>
<p> <p>
<a href="https://github.com/LukasKanka/" target="_blank">👉 GitHub</a> <a href="https://github.com/LukasKanka/" target="_blank"
>👉 GitHub</a
>
</p> </p>
<p> <p>
<a <a
@ -381,7 +382,8 @@
> >
</p> </p>
<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> </p>
</section> </section>
@ -421,7 +423,9 @@
</section> </section>
<!--<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">Nahoru</button>--> <!--<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">Nahoru</button>-->
</section> </section>
<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">Nahoru</button> <button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">
Nahoru
</button>
<footer> <footer>
Copyright &copy; Copyright &copy;
<a href="https://git.archoslinux.cz/kankys" target="_blank" <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 solid = document.querySelector(".fa-solid");
const solid1 = document.querySelector(".menu-icon"); const solid1 = document.querySelector(".menu-icon");
const footer = document.querySelector("footer"); 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; let isDraculaMode = false;
// Funkce pro nastavení stylů pro Dracula mód // Funkce pro nastavení stylů pro Dracula mód
@ -49,13 +50,26 @@ function setDraculaStyles() {
solid1.style.backgroundColor = "#2a232b"; solid1.style.backgroundColor = "#2a232b";
footer.style.backgroundColor = "#2a232b"; footer.style.backgroundColor = "#2a232b";
gotop.style.backgroundColor = "#18f700"; 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() { 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 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 // Funkce pro přepnutí módu
@ -78,55 +92,42 @@ document.getElementById("toggleButton").addEventListener("click", toggleMode);
setDraculaStyles(); setDraculaStyles();
isDraculaMode = true; isDraculaMode = true;
// Photo Gallery -> section // Photo Gallery -> section
const image1 = document.querySelector(".picture") const image1 = document.querySelector(".picture");
image1.addEventListener("mouseenter", () => { image1.addEventListener("mouseenter", () => {
image1.style.transform = "scale(2.2)";
image1.style.transform = "scale(2.2)" });
})
image1.addEventListener("mouseleave", () => { 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.addEventListener("mouseenter", () => {
image2.style.transform = "scale(2.2)";
image2.style.transform = "scale(2.2)" });
})
image2.addEventListener("mouseleave", () => { 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.addEventListener("mouseenter", () => {
image3.style.transform = "scale(2.2)";
image3.style.transform = "scale(2.2)" });
})
image3.addEventListener("mouseleave", () => { image3.addEventListener("mouseleave", () => {
image3.style.transform = "scale(1)";
image3.style.transform = "scale(1)" });
})
// Tlačítko go to top // Tlačítko go to top
// Zobrazit tlačítko, pokud je uživatel dostatečně daleko od horní části stránky // 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() { function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {

8
style.css
View File

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