sergiotarxz
/
burguillos.info
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Trying new sidebar.

This commit is contained in:
sergiotarxz 2023-09-28 19:49:41 +02:00
parent b6f3f06324
commit f2e0b06909
4 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js-src/index.js
View File

@ -19,8 +19,10 @@ window.onload = () => {
transparentFullscreenHide.addEventListener('click', () => { transparentFullscreenHide.addEventListener('click', () => {
mobile_foldable.classList.remove('show'); mobile_foldable.classList.remove('show');
transparentFullscreenHide.classList.remove('show'); transparentFullscreenHide.classList.remove('show');
menu_expand.classList.remove('active');
}); });
menu_expand.addEventListener('click', () => { menu_expand.addEventListener('click', () => {
menu_expand.classList.toggle('active');
mobile_foldable.classList.toggle('show'); mobile_foldable.classList.toggle('show');
transparentFullscreenHide.classList.toggle('show'); transparentFullscreenHide.classList.toggle('show');
}); });

14
public/css/styles.css
View File

@ -207,7 +207,7 @@ body {
height: calc(100% - 60px); height: calc(100% - 60px);
z-index: 500; z-index: 500;
transition: left 0.5s ease-in; transition: left 0.5s ease-in;
background: blueviolet; } background: #F5F5DC; }
body nav.mobile-foldable > a:first-child { body nav.mobile-foldable > a:first-child {
margin-top: 30px; } margin-top: 30px; }
body nav.mobile-foldable a { body nav.mobile-foldable a {
@ -217,12 +217,13 @@ body {
padding-left: auto; padding-left: auto;
padding-right: auto; padding-right: auto;
color: black; color: black;
background: #f2eb8c; border: 1px solid black;
background: #dcdcf5;
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;
margin-left: 10px; margin-left: 10px;
border-radius: 20px; border-radius: 20px;
width: calc(100% - 20px - 20px); } width: calc(100% - 20px - 20px - 2px); }
body nav.mobile-foldable div.child-categories-mobile a { body nav.mobile-foldable div.child-categories-mobile a {
width: calc(100% - 50px - 20px); width: calc(100% - 50px - 20px);
margin-left: 40px; margin-left: 40px;
@ -233,13 +234,16 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; } justify-content: center; }
body nav.mobile-shortcuts > a.active {
background: #F5F5DC;
color: #dcdcf5; }
body a.menu-expand { body a.menu-expand {
padding-bottom: 9px; } padding-bottom: 9px; }
body a.menu-expand .open-menu-icon-hover { body a.menu-expand .open-menu-icon-hover {
display: none; } display: none; }
body a.menu-expand:hover .open-menu-icon-hover, body a.menu-expand:focus .open-menu-icon-hover { body a.menu-expand:hover .open-menu-icon-hover, body a.menu-expand:focus .open-menu-icon-hover, body a.menu-expand.active .open-menu-icon-hover {
display: block; } display: block; }
body a.menu-expand:hover .open-menu-icon, body a.menu-expand:focus .open-menu-icon { body a.menu-expand:hover .open-menu-icon, body a.menu-expand:focus .open-menu-icon, body a.menu-expand.active .open-menu-icon {
display: none; } display: none; }
body nav > a.menu-expand > img { body nav > a.menu-expand > img {
width: 30px; width: 30px;

17
public/css/styles.scss
View File

@ -8,8 +8,8 @@ $background-secondary: #635283;
$color-secondary: #8eea6d; $color-secondary: #8eea6d;
$accent-secondary: #fde68f; $accent-secondary: #fde68f;
$primary-secondary: #590e11; $primary-secondary: #590e11;
$background_sidebar: #E2D1F9; $background_sidebar: #F5F5DC;
$color_sidebar: #317773; $color_sidebar: #dcdcf5;
html { html {
height: 100%; height: 100%;
@ -303,7 +303,7 @@ body {
height: calc(100% - 60px); height: calc(100% - 60px);
z-index: 500; z-index: 500;
transition: left 0.5s ease-in; transition: left 0.5s ease-in;
background: $background_div; background: $background_sidebar;
& > a:first-child { & > a:first-child {
margin-top: 30px; margin-top: 30px;
@ -318,12 +318,13 @@ body {
padding-left: auto; padding-left: auto;
padding-right: auto; padding-right: auto;
color: black; color: black;
background: $color_div; border: 1px solid black;
background: $color_sidebar;
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;
margin-left: 10px; margin-left: 10px;
border-radius: 20px; border-radius: 20px;
width: calc(100% - 20px - 20px); width: calc(100% - 20px - 20px - 2px);
} }
div.child-categories-mobile { div.child-categories-mobile {
@ -343,6 +344,10 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&.active {
background: $background_sidebar;
color: $color_sidebar;
}
} }
a.menu-expand { a.menu-expand {
@ -352,7 +357,7 @@ body {
display: none; display: none;
} }
&:hover, &:focus { &:hover, &:focus, &.active {
.open-menu-icon-hover { .open-menu-icon-hover {
display: block; display: block;
} }

2
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long