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

Fixing bug affecting IOS users.

Browse Source
This commit is contained in:
Sergiotarxz 2023-08-28 23:41:18 +02:00
parent 17eebeef41
commit 0dfec91375
3 changed files with 205 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
public/css/styles.css
View File

@ -60,6 +60,80 @@ body {
width: 100%; } width: 100%; }
body div.page-contents.no-carousel { body div.page-contents.no-carousel {
height: calc(100% - 60px); } height: calc(100% - 60px); }
body nav {
overflow: auto;
display: block;
font-size: 25px;
margin: 0px; }
body nav a {
padding-left: 10px;
padding-right: 10px;
height: 100%;
text-decoration: none;
color: #f2eb8c;
margin: 0; }
body nav a:hover, body nav a:focus {
background: #f2eb8c;
color: blueviolet; }
body nav a.selected {
background: #FEFEFA;
color: blueviolet;
border-right: 1px solid blueviolet; }
body nav.desktop {
display: none; }
body nav.desktop a {
vertical-align: middle;
background: blueviolet; }
body nav.mobile-foldable {
display: none;
background: blueviolet;
color: #f2eb8c; }
body nav.mobile-foldable a {
display: block; }
body nav.mobile-foldable.show {
display: block; }
body nav.mobile-shortcuts > a {
display: flex;
align-items: center;
justify-content: center; }
body a.menu-expand {
padding-bottom: 9px; }
body a.menu-expand .open-menu-icon-hover {
display: none; }
body a.menu-expand:hover .open-menu-icon-hover, body a.menu-expand:focus .open-menu-icon-hover {
display: block; }
body a.menu-expand:hover .open-menu-icon, body a.menu-expand:focus .open-menu-icon {
display: none; }
body nav > a.menu-expand > img {
width: 30px;
height: 30px; }
body nav > a > img.index-image-menu {
vertical-align: middle;
width: 40px;
height: 40px; }
body nav > a > img.index-image-menu, body div.burguillos-logo-container > img {
transition-property: transform;
transition-duration: 2s;
transition-delay: 2s; }
body nav > a:hover > img.index-image-menu,
body div.burguillos-logo-container.active > img {
transform: rotate(-1.5707963268rad); }
body nav.mobile-shortcuts {
position: fixed;
display: flex;
width: 100%;
background: blueviolet;
height: 60px;
top: 0%; }
body nav.mobile-shortcuts a {
height: 100%;
width: 16.6666666667%;
padding-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0; }
body nav.mobile-shortcuts div {
width: 66.6666666667%; }
body div.page-contents { body div.page-contents {
background: #FEFEFA; background: #FEFEFA;
position: fixed; position: fixed;
@ -167,21 +241,6 @@ body {
body div.page-contents div.description a.suscribe-category-rss img { body div.page-contents div.description a.suscribe-category-rss img {
width: 40px; width: 40px;
height: 40px; } height: 40px; }
body div.page-contents nav.mobile-shortcuts > a {
display: flex;
align-items: center;
justify-content: center; }
body div.page-contents nav > a.menu-expand > img {
width: 30px;
height: 30px; }
body div.page-contents nav > a > img.index-image-menu {
vertical-align: middle;
width: 40px;
height: 40px; }
body div.page-contents nav > a > img.index-image-menu, body div.page-contents div.burguillos-logo-container > img {
transition-property: transform;
transition-duration: 2s;
transition-delay: 2s; }
body div.page-contents div.easter-egg { body div.page-contents div.easter-egg {
display: flex; display: flex;
justify-content: center; } justify-content: center; }
@ -192,65 +251,6 @@ body {
body div.page-contents div.burguillos-logo-container { body div.page-contents div.burguillos-logo-container {
padding: 40px; padding: 40px;
width: 120px; } width: 120px; }
body div.page-contents nav > a:hover > img.index-image-menu,
body div.page-contents div.burguillos-logo-container.active > img {
transform: rotate(-1.5707963268rad); }
body div.page-contents nav.desktop {
display: none; }
body div.page-contents nav.desktop a {
vertical-align: middle;
background: blueviolet; }
body div.page-contents nav {
overflow: auto;
display: block;
font-size: 25px;
margin: 0px; }
body div.page-contents nav a {
padding-left: 10px;
padding-right: 10px;
height: 100%;
text-decoration: none;
color: #f2eb8c;
margin: 0; }
body div.page-contents nav a:hover, body div.page-contents nav a:focus {
background: #f2eb8c;
color: blueviolet; }
body div.page-contents nav a.selected {
background: #FEFEFA;
color: blueviolet;
border-right: 1px solid blueviolet; }
body div.page-contents nav a.menu-expand {
padding-bottom: 9px; }
body div.page-contents nav a.menu-expand .open-menu-icon-hover {
display: none; }
body div.page-contents nav a.menu-expand:hover .open-menu-icon-hover, body div.page-contents nav a.menu-expand:focus .open-menu-icon-hover {
display: block; }
body div.page-contents nav a.menu-expand:hover .open-menu-icon, body div.page-contents nav a.menu-expand:focus .open-menu-icon {
display: none; }
body div.page-contents nav.mobile-shortcuts {
position: fixed;
display: flex;
width: 100%;
background: blueviolet;
height: 60px;
top: 0%; }
body div.page-contents nav.mobile-shortcuts a {
height: 100%;
width: 16.6666666667%;
padding-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0; }
body div.page-contents nav.mobile-shortcuts div {
width: 66.6666666667%; }
body div.page-contents nav.mobile-foldable {
display: none;
background: blueviolet;
color: #f2eb8c; }
body div.page-contents nav.mobile-foldable a {
display: block; }
body div.page-contents nav.mobile-foldable.show {
display: block; }
body div.page-contents h1 { body div.page-contents h1 {
text-align: center; } text-align: center; }
body div.page-contents div.footer p, body div.page-contents div.footer h1, body div.page-contents div.footer h2, body div.page-contents div.footer h3, body div.page-contents div.footer h4, body div.page-contents div.footer a { body div.page-contents div.footer p, body div.page-contents div.footer h1, body div.page-contents div.footer h2, body div.page-contents div.footer h3, body div.page-contents div.footer h4, body div.page-contents div.footer a {
@ -273,6 +273,8 @@ body {
margin-left: 0%; } } margin-left: 0%; } }
@media (min-width: 1100px) { @media (min-width: 1100px) {
body nav.mobile-shortcuts {
display: none; }
body div.page-contents { body div.page-contents {
top: 0%; top: 0%;
left: 5%; left: 5%;
@ -294,8 +296,6 @@ body {
body div.page-contents nav.desktop a img.index-image-menu { body div.page-contents nav.desktop a img.index-image-menu {
height: 40px; height: 40px;
width: 40px; } width: 40px; }
body div.page-contents nav.mobile-shortcuts {
display: none; }
body div.page-contents.no-carousel { body div.page-contents.no-carousel {
height: 100%; } } height: 100%; } }

251
public/css/styles.scss
View File

@ -90,6 +90,130 @@ body {
height: calc(100% - 60px); height: calc(100% - 60px);
} }
nav {
overflow: auto;
display: block;
font-size: 25px;
margin: 0px;
a.go-to-index img {
}
a {
padding-left: 10px;
padding-right: 10px;
height: 100%;
text-decoration: none;
color: $color_div;
margin: 0;
&:hover,&:focus {
background: $color_div;
color: $background_div;
}
&.selected {
background: $background-page;
color: $background_div;
border-right: 1px solid $background_div;
}
}
}
nav.desktop {
display: none;
a {
vertical-align: middle;
background: $background_div;
}
}
nav.mobile-foldable {
display: none;
background: $background_div;
color: $color_div;
a {
//background: $color_div;
//color: $background_div;
display: block;
}
}
nav.mobile-foldable.show {
display: block;
}
nav.mobile-shortcuts > a {
display:flex;
align-items: center;
justify-content: center;
}
a.menu-expand {
padding-bottom: 9px;
.open-menu-icon-hover {
display: none;
}
&:hover,&:focus {
.open-menu-icon-hover {
display: block;
}
.open-menu-icon {
display: none;
}
}
}
nav > a.menu-expand > img {
width: 30px;
height: 30px;
}
nav > a > img.index-image-menu {
vertical-align: middle;
width: 40px;
height: 40px;
}
nav > a > img.index-image-menu, div.burguillos-logo-container > img {
transition-property: transform;
transition-duration: 2s;
transition-delay: 2s;
}
nav > a:hover > img.index-image-menu,
div.burguillos-logo-container.active > img {
transform: rotate(-1.5707963267948966rad);
}
nav.mobile-shortcuts {
position: fixed;
display: flex;
width: 100%;
background: $background_div;
height: 60px;
top: 0%;
a {
height: 100%;
width: (100% / 6);
padding-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}
div {
width: 100% * 4 / 6;
}
}
div.page-contents { div.page-contents {
background: $background-page; background: $background-page;
position: fixed; position: fixed;
@ -248,28 +372,7 @@ body {
} }
} }
nav.mobile-shortcuts > a {
display:flex;
align-items: center;
justify-content: center;
}
nav > a.menu-expand > img {
width: 30px;
height: 30px;
}
nav > a > img.index-image-menu {
vertical-align: middle;
width: 40px;
height: 40px;
}
nav > a > img.index-image-menu, div.burguillos-logo-container > img {
transition-property: transform;
transition-duration: 2s;
transition-delay: 2s;
}
div.easter-egg { div.easter-egg {
@ -288,108 +391,10 @@ body {
width: 120px; width: 120px;
} }
nav > a:hover > img.index-image-menu,
div.burguillos-logo-container.active > img {
transform: rotate(-1.5707963267948966rad);
}
div.burguillos-logo-container.active img { div.burguillos-logo-container.active img {
} }
nav.desktop {
display: none;
a {
vertical-align: middle;
background: $background_div;
}
}
nav {
overflow: auto;
display: block;
font-size: 25px;
margin: 0px;
a.go-to-index img {
}
a {
padding-left: 10px;
padding-right: 10px;
height: 100%;
text-decoration: none;
color: $color_div;
margin: 0;
&:hover,&:focus {
background: $color_div;
color: $background_div;
}
&.selected {
background: $background-page;
color: $background_div;
border-right: 1px solid $background_div;
}
}
a.menu-expand {
padding-bottom: 9px;
.open-menu-icon-hover {
display: none;
}
&:hover,&:focus {
.open-menu-icon-hover {
display: block;
}
.open-menu-icon {
display: none;
}
}
}
}
nav.mobile-shortcuts {
position: fixed;
display: flex;
width: 100%;
background: $background_div;
height: 60px;
top: 0%;
a {
height: 100%;
width: (100% / 6);
padding-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}
div {
width: 100% * 4 / 6;
}
}
nav.mobile-foldable {
display: none;
background: $background_div;
color: $color_div;
a {
//background: $color_div;
//color: $background_div;
display: block;
}
}
nav.mobile-foldable.show {
display: block;
}
h1 { h1 {
text-align: center; text-align: center;
@ -444,6 +449,9 @@ body {
@media (min-width: 1100px) { @media (min-width: 1100px) {
body { body {
nav.mobile-shortcuts {
display: none;
}
div.page-contents { div.page-contents {
nav.mobile-foldable, nav.mobile-foldable.show { nav.mobile-foldable, nav.mobile-foldable.show {
display: none; display: none;
@ -470,9 +478,6 @@ body {
} }
} }
nav.mobile-shortcuts {
display: none;
}
top: 0%; top: 0%;
left: 5%; left: 5%;

2
templates/layouts/default.html.ep
View File

@ -33,9 +33,9 @@
<div class="site-wrapper"> <div class="site-wrapper">
</div> </div>
<div class="complete-container"> <div class="complete-container">
%= include 'page/_mobile_menu', categories => $categories
<div class="page-contents"> <div class="page-contents">
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug %= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug
%= include 'page/_mobile_menu', categories => $categories
<%= content %></body> <%= content %></body>
<hr/> <hr/>
<div class="footer description"> <div class="footer description">