senaduka/old-saburly-wagtail-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding some more style

Browse Source
This commit is contained in:
Amir
2024-09-13 02:03:00 +02:00
parent 7356bb11c0
commit eee8f5310d
3 changed files with 41 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
templates/base.html
View File

@@ -40,12 +40,14 @@
const sideCloseButtons = document.querySelectorAll('.side-close');
const content = document.querySelector('.content');
const headermove = document.getElementById('header');
const body = document.body;
sideToggle.addEventListener('click', function() {
sideMenu.classList.toggle('active');
this.classList.toggle('menu-opened');
content.classList.toggle('content-open');
headermove.classList.toggle('header-move');
body.classList.toggle('block-scroll')
});
sideCloseButtons.forEach(button => {
@@ -54,6 +56,7 @@
sideToggle.classList.remove('menu-opened');
content.classList.remove('content-open');
headermove.classList.remove('header-move');
body.classList.remove('block-scroll');
});
});
})

26
templates/side_menu.html
View File

@@ -1,3 +1,5 @@
{%load static%}
<div class="side-menu hidden">
<ul class="m-0 p-0 mt-4 side-navigation list-reset">
<div class="side-close text-white text-3xl font-bold px-4 m-2 opacity-50 hover:opacity-100">X</div>
@@ -28,4 +30,28 @@
</li>
</a>
</ul>
<div class="absolute bottom-0 social-icons p-8">
<ul class="flex justify-center">
<li class="mr-1">
<a href="https://facebook.com/saburly" rel="noreferrer" target="_blank">
<img src="{% static '/images/facebook.svg' %}" alt="Facebook Social Media" class="w-full p-2 transition opacity-80 hover:opacity-100" />
</a>
</li>
<li class="mr-1">
<a href="https://instagram.com/saburly" rel="noreferrer" target="_blank">
<img src="{% static '/images/instagram.svg' %}" alt="Instagram Social Media" class="w-full p-2 transition opacity-80 hover:opacity-100" />
</a>
</li>
<li class="mr-1">
<a href="https://twitter.com/saburly" rel="noreferrer" target="_blank">
<img src="{% static '/images/twitter.svg' %}" alt="Twitter Social Media" class="w-full p-2 transition opacity-80 hover:opacity-100" />
</a>
</li>
<li class="mr-1">
<a href="https://www.linkedin.com/company/saburly/" rel="noreferrer" target="_blank">
<img src="{% static '/images/linkedin.svg' %}" alt="LinkedIn Social Media" class="w-full p-2 transition opacity-80 hover:opacity-100" />
</a>
</li>
</ul>
</div>
</div>