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

"Improving" sidebar.

Browse Source
This commit is contained in:
Sergiotarxz 2023-09-28 18:03:21 +02:00
parent a341d5dcf0
commit 942b9f4ca4
3 changed files with 71 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
public/css/styles.css
View File

@ -8,6 +8,19 @@ body {
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
height: 100%; } height: 100%; }
body span.round-center {
background: black;
color: white;
line-height: 100%;
aspect-ratio: 1 / 1;
display: inline-flex;
border-radius: 0.3em;
height: 0.7em;
font-size: 0.7em;
padding: 0.15em;
text-align: center;
justify-content: center;
align-items: center; }
body div.search-overlay { body div.search-overlay {
overflow-y: scroll; overflow-y: scroll;
display: none; display: none;
@ -186,28 +199,34 @@ body {
display: block; } display: block; }
body nav.mobile-foldable { body nav.mobile-foldable {
position: fixed; position: fixed;
background: blueviolet;
color: #f2eb8c;
left: 100%; left: 100%;
width: 80%; width: 60%;
top: 60px; top: 60px;
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; }
body nav.mobile-foldable > a:first-child {
margin-top: 30px; }
body nav.mobile-foldable a { body nav.mobile-foldable a {
display: block; display: block;
font-size: 1.1em; font-size: 1.1em;
width: 100%;
height: auto; height: auto;
padding-left: auto; padding-left: auto;
padding-right: auto; } padding-right: auto;
body nav.mobile-foldable div.child-categories-mobile { color: black;
padding-left: 40px; } background: #f2eb8c;
margin-top: 10px;
padding: 10px;
margin-left: 10px;
border-radius: 20px;
width: calc(100% - 20px - 20px); }
body nav.mobile-foldable div.child-categories-mobile a { body nav.mobile-foldable div.child-categories-mobile a {
width: calc(100% - 50px - 20px);
margin-left: 40px;
font-size: 1em; } font-size: 1em; }
body nav.mobile-foldable.show { body nav.mobile-foldable.show {
display: block; left: 40%; }
left: 20%; }
body nav.mobile-shortcuts > a { body nav.mobile-shortcuts > a {
display: flex; display: flex;
align-items: center; align-items: center;

45
public/css/styles.scss
View File

@ -8,12 +8,29 @@ $background-secondary: #635283;
$color-secondary: #8eea6d; $color-secondary: #8eea6d;
$accent-secondary: #fde68f; $accent-secondary: #fde68f;
$primary-secondary: #590e11; $primary-secondary: #590e11;
$background_sidebar: #E2D1F9;
$color_sidebar: #317773;
html { html {
height: 100%; height: 100%;
} }
body { body {
span.round-center {
background: black;
color: white;
line-height: 100%;
aspect-ratio: 1 / 1;
display: inline-flex;
border-radius: 0.3em;
height: 0.7em;
font-size: 0.7em;
padding: 0.15em;
text-align: center;
justify-content: center;
align-items: center;
}
div.search-overlay { div.search-overlay {
overflow-y: scroll; overflow-y: scroll;
display: none; display: none;
@ -270,6 +287,7 @@ body {
height: calc(100% - 60px); height: calc(100% - 60px);
z-index: 250; z-index: 250;
display: none; display: none;
&.show { &.show {
display: block; display: block;
} }
@ -277,39 +295,46 @@ body {
nav.mobile-foldable { nav.mobile-foldable {
position: fixed; position: fixed;
background: $background_div;
color: $color_div;
left: 100%; left: 100%;
width: 80%; width: 60%;
top: 60px; top: 60px;
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;
& > a:first-child {
margin-top: 30px;
}
a { a {
//background: $color_div; //background: $color_div;
//color: $background_div; //color: $background_div;
display: block; display: block;
font-size: 1.1em; font-size: 1.1em;
width: 100%;
height: auto; height: auto;
padding-left: auto; padding-left: auto;
padding-right: auto; padding-right: auto;
color: black;
background: $color_div;
margin-top: 10px;
padding: 10px;
margin-left: 10px;
border-radius: 20px;
width: calc(100% - 20px - 20px);
} }
div.child-categories-mobile { div.child-categories-mobile {
padding-left: 40px;
a { a {
width: calc(100% - 50px - 20px);
margin-left: 40px;
font-size: 1em; font-size: 1em;
} }
} }
} }
nav.mobile-foldable.show { nav.mobile-foldable.show {
display: block; left: 40%;
left: 20%;
} }
nav.mobile-shortcuts > a { nav.mobile-shortcuts > a {

2
templates/page/_mobile_foldable.html.ep
View File

@ -9,7 +9,7 @@ for my $category_key (sort {
if (defined $category->{parent} || $category->{slug} eq 'index') { if (defined $category->{parent} || $category->{slug} eq 'index') {
next; next;
} }
%><a href="<%= '/'.$category->{slug} %>"><%==$category->{menu_text}%></a><div class="child-categories-mobile"><% %><a href="<%= '/'.$category->{slug} %>"><span class="round-center">v</span> <%==$category->{menu_text}%></a><div class="child-categories-mobile"><%
for my $child_category ($category->{children}->@*) { for my $child_category ($category->{children}->@*) {
%><a href="<%="/$child_category->{slug}"%>"><%==$child_category->{menu_text}%></a><% %><a href="<%="/$child_category->{slug}"%>"><%==$child_category->{menu_text}%></a><%
}%></div><% }%></div><%