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

15
static/css/style.css
View File

@@ -19,10 +19,9 @@ header {
top: 0; top: 0;
width: 256px; width: 256px;
min-height: 100vh; min-height: 100vh;
overflow-y: scroll; overflow: hidden;
-webkit-overflow-scrolling: touch;
background-color: #5763ab; background-color: #5763ab;
z-index: 0; z-index: 9999;
display: none; display: none;
transition: transform 0.5s ease-out; transition: transform 0.5s ease-out;
} }
@@ -187,6 +186,10 @@ footer {
.side-menu.active { .side-menu.active {
display: block; display: block;
} }
body.side-menu.active {
overflow: none;
}
.content:before { .content:before {
content: ''; content: '';
@@ -199,11 +202,14 @@ footer {
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
z-index: 99; z-index: 99;
overflow: hidden;
} }
.content-open{ .content-open{
margin-left: -256px; margin-left: -256px;
transition: margin-left 0.1s; transition: margin-left 0.1s;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
overflow: hidden;
} }
.header-move{ .header-move{
@@ -211,3 +217,6 @@ footer {
transition: margin-left 0.1s; transition: margin-left 0.1s;
background-color: rgba(55, 65, 105, 1.0); background-color: rgba(55, 65, 105, 1.0);
} }
.block-scroll{
overflow: hidden;
}

3
templates/base.html
View File

@@ -40,12 +40,14 @@
const sideCloseButtons = document.querySelectorAll('.side-close'); const sideCloseButtons = document.querySelectorAll('.side-close');
const content = document.querySelector('.content'); const content = document.querySelector('.content');
const headermove = document.getElementById('header'); const headermove = document.getElementById('header');
const body = document.body;
sideToggle.addEventListener('click', function() { sideToggle.addEventListener('click', function() {
sideMenu.classList.toggle('active'); sideMenu.classList.toggle('active');
this.classList.toggle('menu-opened'); this.classList.toggle('menu-opened');
content.classList.toggle('content-open'); content.classList.toggle('content-open');
headermove.classList.toggle('header-move'); headermove.classList.toggle('header-move');
body.classList.toggle('block-scroll')
}); });
sideCloseButtons.forEach(button => { sideCloseButtons.forEach(button => {
@@ -54,6 +56,7 @@
sideToggle.classList.remove('menu-opened'); sideToggle.classList.remove('menu-opened');
content.classList.remove('content-open'); content.classList.remove('content-open');
headermove.classList.remove('header-move'); 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"> <div class="side-menu hidden">
<ul class="m-0 p-0 mt-4 side-navigation list-reset"> <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> <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> </li>
</a> </a>
</ul> </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> </div>