Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Task js dom #313

Merged
Prev Previous commit
Next Next commit
fix: fixed background bug
  • Loading branch information
DmitryHniezdilov committed Aug 26, 2022
commit fbe4918264133b6e992503879e63d7ea90aade4a
20 changes: 20 additions & 0 deletions submissions/DmitryHniezdilov/task-js-dom/css/scss/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,26 @@ $btn-hov: rgba(227, 90, 37, 0.5);
width: 100%;
height: auto;
}

&__inner {
max-height: 100vh;
position: relative;
overflow-y: auto;
scrollbar-gutter: stable;
}

&__inner::-webkit-scrollbar {
width: 4px;
}

&__inner::-webkit-scrollbar-track {
box-shadow: transparent;
}

&__inner::-webkit-scrollbar-thumb {
background-color: $bcgBlue;
border-radius: 2px;
}
}

@keyframes bg {
Expand Down
23 changes: 22 additions & 1 deletion submissions/DmitryHniezdilov/task-js-dom/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
.wrapper__bcg-box {
position: absolute;
right: 0;
bottom: -20px;
bottom: -100px;
left: 0;
height: 65%;
-webkit-user-select: none;
Expand All @@ -67,6 +67,27 @@
height: auto;
}

.wrapper__inner {
max-height: 100vh;
position: relative;
overflow-y: auto;
scrollbar-gutter: stable;
}

.wrapper__inner::-webkit-scrollbar {
width: 4px;
}

.wrapper__inner::-webkit-scrollbar-track {
-webkit-box-shadow: transparent;
box-shadow: transparent;
}

.wrapper__inner::-webkit-scrollbar-thumb {
background-color: #2d78b5;
border-radius: 2px;
}

@-webkit-keyframes bg {
0%,
100% {
Expand Down
2 changes: 1 addition & 1 deletion submissions/DmitryHniezdilov/task-js-dom/css/style.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

34 changes: 18 additions & 16 deletions submissions/DmitryHniezdilov/task-js-dom/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,24 @@
<figure class="wrapper__bcg-box">
<img class="wrapper__bcg-img" src="./img/bcg-mountain.webp" alt="" />
</figure>
<div class="header">
<button class="header__logo js-elem-logo" type="button">
<img
src="./img/logo-mountain.svg"
alt="logo img center"
class="header__logo-img"
/>
</button>
</div>
<div class="inner">
<aside class="inner__aside">
<nav class="menu paper js-elem-menu"></nav>
</aside>
<main class="inner__main">
<article class="content paper js-elem-content"></article>
</main>
<div class="wrapper__inner">
<div class="header">
<button class="header__logo js-elem-logo" type="button">
<img
src="./img/logo-mountain.svg"
alt="logo img center"
class="header__logo-img"
/>
</button>
</div>
<div class="inner">
<aside class="inner__aside">
<nav class="menu paper js-elem-menu"></nav>
</aside>
<main class="inner__main">
<article class="content paper js-elem-content"></article>
</main>
</div>
</div>
</div>

Expand Down