Skip to content
Snippets Groups Projects
Commit f83b4876 authored by Sergio Pieshko's avatar Sergio Pieshko
Browse files

fixes

some fixes
parent 75fe3f5f
No related branches found
No related tags found
No related merge requests found
......@@ -4,6 +4,9 @@ const body = document.querySelector('body');
const footer = document.querySelector('footer');
const footerText = document.querySelector('.footer_text');
const filmInfo = document.querySelector('.film-info__overlay');
const switcher = document.querySelector('.switcher');
const navLib = document.getElementById('library');
const home = document.getElementById('home');
checkbox.addEventListener('change', onDarkTheme);
......@@ -12,4 +15,16 @@ function onDarkTheme() {
footer.classList.toggle('dark');
footerText.classList.toggle('dark');
filmInfo.classList.toggle('dark-modal');
}
\ No newline at end of file
}
navLib.addEventListener('click', () => {
if (navLib) {
switcher.classList.add('visually-hidden');
}
});
home.addEventListener('click', () => {
if (home) {
switcher.classList.remove('visually-hidden');
}
});
......@@ -9,22 +9,15 @@
<p class="logo__text">Filmoteka</p>
</div>
<ul class="nav__list list">
<li class="nav__item nav__item--current">Home</li>
<li class="nav__item">My library</li>
<li class="nav__item nav__item--current" id="home">Home</li>
<li class="nav__item" id="library">My library</li>
</ul>
</div>
</nav>
<div class="search-field" data-action="search-field">
<form class="search-field__form">
<input
class="search-field__input"
placeholder="Поиск фильмов"
type="text"
name="search"
id="search"
autocomplete="off"
data-action="search-input"
/>
<input class="search-field__input" placeholder="Поиск фильмов" type="text" name="search" id="search"
autocomplete="off" data-action="search-input" />
<button class="search-field__btn" data-action="search-btn" type="submit">
<svg width="12px" height="12px" class="search-field__icon">
<use href="/images/sprite.svg#search"></use>
......@@ -50,4 +43,4 @@
</label>
</div>
</div>
</header>
</header>
\ No newline at end of file
......@@ -55,6 +55,18 @@
.logo__icon {
justify-self: middle;
animation: scroll 3s infinite;
}
@keyframes scroll {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-0.3rem);
}
100% {
transform: translateY(0);
}
}
.logo__text {
......
.dark {
background-color: rgb(31, 33, 37);
color: #CDCDD2;
background-color: rgb(31, 33, 37);
color: #cdcdd2;
:link {
color: white;
}
:link {
color: white;
}
}
.label {
background-color: #555;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 5px;
border-radius: 50px;
width: 50px;
height: 26px;
background-color: #555;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 5px;
border-radius: 50px;
width: 50px;
height: 26px;
}
.switcher {
display: flex;
flex-direction: row-reverse;
@media screen and (max-width: 420px) {
display: none;
}
display: flex;
flex-direction: row-reverse;
}
.checkbox {
opacity: 0;
position: absolute;
opacity: 0;
position: absolute;
}
.ball {
width: 22px;
height: 22px;
background-color: #fff;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
transition: transform 0.2s linear;
width: 22px;
height: 22px;
background-color: #fff;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
transition: transform 0.2s linear;
}
.checkbox:checked+.label .ball {
// background-color: #f39c12;
transform: translateX(24px);
.checkbox:checked + .label .ball {
transform: translateX(24px);
}
.fa-moon {
color: #f1c40f;
color: #f1c40f;
}
.fa-sun {
color: #f39c12;
}
\ No newline at end of file
color: #f39c12;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment