Skip to content

Commit

Permalink
aligned some code
Browse files Browse the repository at this point in the history
  • Loading branch information
@CrackerakiUA
CrackerakiUA committed Sep 29, 2024
1 parent f3672d4 commit 7a1b8b9
Show file tree
Hide file tree
Showing 2 changed files with 212 additions and 125 deletions.
308 changes: 202 additions & 106 deletions base.html
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,213 @@
<!DOCTYPE html>
<html>
<head>
<base href="{{{base || prefix + '/'}}}" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{{title}}}</title>
<meta itemprop="name" content="{{{title}}}" />
<meta name="twitter:title" content="{{{title}}}" />
<meta property="og:title" content="{{{title}}}" />

<head>
<base href="{{{base || prefix + '/'}}}" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{{title}}}</title>
<meta itemprop="name" content="{{{title}}}" />
<meta name="twitter:title" content="{{{title}}}" />
<meta property="og:title" content="{{{title}}}" />
<meta name="description" content="{{{description}}}" />
<meta itemprop="description" content="{{{description}}}" />
<meta name="twitter:description" content="{{{description}}}" />
<meta property="og:description" content="{{{description}}}" />

<meta name="description" content="{{{description}}}" />
<meta itemprop="description" content="{{{description}}}" />
<meta name="twitter:description" content="{{{description}}}" />
<meta property="og:description" content="{{{description}}}" />
<meta itemprop="image" content="{{{image}}}" />
<meta name="twitter:image:src" content="{{{image}}}" />
<meta property="og:image" content="{{{image}}}" />

<meta itemprop="image" content="{{{image}}}" />
<meta name="twitter:image:src" content="{{{image}}}" />
<meta property="og:image" content="{{{image}}}" />
<link rel="icon" type="image/x-icon" href="{{{favicon}}}" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>

<link rel="icon" type="image/x-icon" href="{{{favicon}}}" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/index.css" />
</head>

<link rel="stylesheet" href="css/index.css" />
</head>

<body>
<div class="goTop">
<svg width="70" height="70" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_11_1802)">
<rect x="4" width="100" height="100" rx="13" fill="#F8EC20"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M82.514 61.7718C81.9358 62.3058 81.0343 62.27 80.5003 61.6918L53.4394 32.3918C52.9054 31.8137 52.9412 30.9121 53.5194 30.3782C54.0975 29.8442 54.999 29.88 55.533 30.4582L82.594 59.7582C83.128 60.3363 83.0921 61.2379 82.514 61.7718Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M55.453 30.3782C56.0311 30.9121 56.0669 31.8137 55.533 32.3918L28.472 61.6918C27.938 62.27 27.0365 62.3058 26.4583 61.7718C25.8802 61.2379 25.8444 60.3363 26.3783 59.7582L53.4393 30.4582C53.9733 29.88 54.8748 29.8442 55.453 30.3782Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M76.6244 67.2763C76.1678 67.698 75.4557 67.6698 75.0339 67.2131L53.6595 44.0701C53.2377 43.6135 53.266 42.9014 53.7227 42.4796C54.1793 42.0579 54.8914 42.0861 55.3132 42.5428L76.6876 65.6858C77.1094 66.1424 77.0811 66.8545 76.6244 67.2763Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M55.2499 42.4796C55.7066 42.9014 55.7349 43.6135 55.3131 44.0701L33.9387 67.2131C33.5169 67.6698 32.8048 67.698 32.3482 67.2763C31.8915 66.8545 31.8632 66.1424 32.285 65.6858L53.6594 42.5428C54.0812 42.0861 54.7933 42.0579 55.2499 42.4796Z" fill="black"/>
<defs>
<filter id="filter0_d_11_1802" x="0" y="0" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_11_1802"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_11_1802" result="shape"/>
</filter>
</defs>
</svg>
</div>
<header class="header">
<span class="header__left">
<a href="/" class="header__logo-link">
<img src="img/logo.svg" alt="WAW" width="45" class="header__logo" />
</a>
<h1 class="header__title">Wjst</h1>
</span>
<span class="header__right">
<ul class="header__nav">
<li class="header__nav-item">
<a href="/" class="header__nav-link">Getting started</a>
</li>
</ul>
<body>
<div class="goTop" onclick="toTop()">
<svg
width="70"
height="70"
viewBox="0 0 108 108"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_d_11_1802)">
<rect
x="4"
width="100"
height="100"
rx="13"
fill="#F8EC20"
/>
</g>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M82.514 61.7718C81.9358 62.3058 81.0343 62.27 80.5003 61.6918L53.4394 32.3918C52.9054 31.8137 52.9412 30.9121 53.5194 30.3782C54.0975 29.8442 54.999 29.88 55.533 30.4582L82.594 59.7582C83.128 60.3363 83.0921 61.2379 82.514 61.7718Z"
fill="black"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M55.453 30.3782C56.0311 30.9121 56.0669 31.8137 55.533 32.3918L28.472 61.6918C27.938 62.27 27.0365 62.3058 26.4583 61.7718C25.8802 61.2379 25.8444 60.3363 26.3783 59.7582L53.4393 30.4582C53.9733 29.88 54.8748 29.8442 55.453 30.3782Z"
fill="black"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M76.6244 67.2763C76.1678 67.698 75.4557 67.6698 75.0339 67.2131L53.6595 44.0701C53.2377 43.6135 53.266 42.9014 53.7227 42.4796C54.1793 42.0579 54.8914 42.0861 55.3132 42.5428L76.6876 65.6858C77.1094 66.1424 77.0811 66.8545 76.6244 67.2763Z"
fill="black"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M55.2499 42.4796C55.7066 42.9014 55.7349 43.6135 55.3131 44.0701L33.9387 67.2131C33.5169 67.6698 32.8048 67.698 32.3482 67.2763C31.8915 66.8545 31.8632 66.1424 32.285 65.6858L53.6594 42.5428C54.0812 42.0861 54.7933 42.0579 55.2499 42.4796Z"
fill="black"
/>
<defs>
<filter
id="filter0_d_11_1802"
x="0"
y="0"
width="108"
height="108"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="4" />
<feGaussianBlur stdDeviation="2" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_11_1802"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_11_1802"
result="shape"
/>
</filter>
</defs>
</svg>
</div>
<header class="header">
<span class="header__left">
<a href="/" class="header__logo-link">
<img
class="header__logo"
src="img/logo.svg"
alt="WAW"
width="45"
/>
</a>
<h1 class="header__title">Wjst</h1>
</span>
<span class="header__right">
<ul class="header__nav">
<li class="header__nav-item">
<a href="/" class="header__nav-link">Getting started</a>
</li>
</ul>

<ul class="header__nav">
<li class="header__nav-item">
<a href="https://github.com/WebArtWork/wjst" target="_blank" data-original-title="GitHub"
class="header__nav-link header__nav-link--github">
<img src="img/github.svg" alt="github" class="header__nav-icon">
</a>
</li>
</ul>
<ul class="header__nav">
<li class="header__nav-item">
<a
class="header__nav-link header__nav-link--github"
href="https://github.com/WebArtWork/wjst"
data-original-title="GitHub"
target="_blank"
>
<img
class="header__nav-icon"
src="img/github.svg"
alt="github"
/>
</a>
</li>
</ul>

<span class="header__nav header__nav--mobile"
onclick="toggleClass('sidebar', 'main-content__nav--show')">
<div class="burger-wrap">
<div class="burger"></div>
</div>
<span
onclick="
toggleClass('sidebar', 'main-content__nav--show');
toggleClass('burger', 'burger--close')
"
class="header__nav header__nav--mobile"
>
<div class="burger-wrap">
<div class="burger" id="burger"></div>
</div>
</span>
</span>
</span>
</header>
<div class="main-content">
<aside id="sidebar" class="main-content__nav">
<ul class="main-content__nav-wrap">
<li class="main-content__nav-item main-content__nav-item--mobile" item-url="/">
<a href="/" class="header__nav-link">Getting started</a>
</li>
{% for item in items %}
<li class="main-content__nav-item" item-url="{{{item.url}}}">
<a href="{{{item.url}}}" class="main-content__nav-link">{{{item.name}}}</a>
<ul class="main-content__nav-in">
{% for _item in item.items %}
<li class="main-content__nav-in-item">
<a href="{{{_item.url}}}" class="main-content__nav-link">{{{_item.name}}}</a>
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</aside>
<main class="main-content__section">
<!-- HTML -->
</main>
</div>
<footer class="footer">
<p class="footer__text">
<span class="footer__text-part">Wjst is copyright ©2024</span>
<a href="https://webart.work" class="footer__link">Web Art Work</a>,
<span class="footer__text-part"> licensed for use under the permissive MIT Open Source License.</span>
</p>
</footer>
<script src="js/index.js"></script>
</body>

</header>
<div class="main-content">
<aside id="sidebar" class="main-content__nav">
<ul class="main-content__nav-wrap">
<li
class="main-content__nav-item main-content__nav-item--mobile"
item-url="/"
>
<a href="/" class="header__nav-link">Getting started</a>
</li>
{% for item in items %}
<li
class="main-content__nav-item"
item-url="{{{item.url}}}"
>
<a href="{{{item.url}}}" class="main-content__nav-link"
>{{{item.name}}}</a
>
<ul class="main-content__nav-in">
{% for _item in item.items %}
<li class="main-content__nav-in-item">
<a
href="{{{_item.url}}}"
class="main-content__nav-link"
>{{{_item.name}}}</a
>
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</aside>
<main class="main-content__section">
<!-- HTML -->
</main>
</div>
<footer class="footer">
<p class="footer__text">
<span class="footer__text-part">Wjst is copyright ©2024</span>
<a href="https://webart.work" class="footer__link"
>Web Art Work</a
>,
<span class="footer__text-part">
licensed for use under the permissive MIT Open Source
License.</span
>
</p>
</footer>
<script src="js/index.js"></script>
</body>
</html>
29 changes: 10 additions & 19 deletions js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@ const toggleClass = (id, className) => {
}
};

const toTop = ()=>{
window.scrollTo({
top: 0,
behavior: "smooth",
});
}

const sidebar = {};
document.addEventListener("DOMContentLoaded", function () {
/* ACCARDION CODE */
Expand Down Expand Up @@ -61,7 +68,9 @@ document.addEventListener("DOMContentLoaded", function () {
}
}
}

const itemBlocks = document.querySelectorAll(".item-block");

if (!itemBlocks.length) {
return;
}
Expand Down Expand Up @@ -89,6 +98,7 @@ document.addEventListener("DOMContentLoaded", function () {
);
}
};

window.onscroll = function () {
for (const itemBlock of itemBlocks) {
const startPoint = itemBlock.offsetTop - start;
Expand All @@ -104,22 +114,3 @@ document.addEventListener("DOMContentLoaded", function () {
}
};
});

document.addEventListener("DOMContentLoaded", function () {
const goTopButton = document.querySelector(".goTop");

goTopButton.addEventListener("click", function () {
window.scrollTo({
top: 0,
behavior: "smooth",
});
});
});

const burgerWrap = document.querySelector(".burger-wrap");

const burger = document.querySelector(".burger");

burgerWrap.addEventListener("click", () => {
burger.classList.toggle("burger--close");
});

0 comments on commit 7a1b8b9

Please sign in to comment.