Improving the size of ui elements.
This commit is contained in:
parent
31643100ce
commit
94d3b770ff
|
@ -79,9 +79,10 @@ body {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
display: flex; }
|
display: flex; }
|
||||||
body div.search a.search-icon {
|
body div.search a.search-icon {
|
||||||
height: calc(100% - 28px);
|
height: calc(100% - 40px);
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin: 7px;
|
margin: 20px;
|
||||||
|
margin-left: 7px;
|
||||||
display: flex;
|
display: flex;
|
||||||
background: aliceblue;
|
background: aliceblue;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -210,7 +211,7 @@ body {
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
opacity: 40%;
|
opacity: 40%;
|
||||||
top: 60px;
|
top: 80px;
|
||||||
height: calc(100% - 60px);
|
height: calc(100% - 60px);
|
||||||
z-index: 250;
|
z-index: 250;
|
||||||
display: none; }
|
display: none; }
|
||||||
|
@ -220,8 +221,8 @@ body {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 100%;
|
left: 100%;
|
||||||
width: 70%;
|
width: Min(70%, 600px);
|
||||||
top: 60px;
|
top: 80px;
|
||||||
height: calc(100% - 60px);
|
height: calc(100% - 60px);
|
||||||
z-index: 500;
|
z-index: 500;
|
||||||
transition: left 0.5s ease-in, visibility 0.5s ease-in;
|
transition: left 0.5s ease-in, visibility 0.5s ease-in;
|
||||||
|
@ -268,12 +269,12 @@ body {
|
||||||
body a.menu-expand:hover .open-menu-icon, body a.menu-expand:focus .open-menu-icon, body a.menu-expand.active .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;
|
|
||||||
height: 30px; }
|
|
||||||
body nav > a > img.index-image-menu {
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px; }
|
height: 40px; }
|
||||||
|
body nav > a > img.index-image-menu {
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px; }
|
||||||
body nav > a > img.index-image-menu, body div.burguillos-logo-container > img {
|
body nav > a > img.index-image-menu, body div.burguillos-logo-container > img {
|
||||||
transition-property: transform;
|
transition-property: transform;
|
||||||
transition-duration: 2s;
|
transition-duration: 2s;
|
||||||
|
@ -317,24 +318,38 @@ body {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: blueviolet;
|
background: blueviolet;
|
||||||
height: 60px;
|
height: 80px;
|
||||||
|
justify-content: start;
|
||||||
|
flex-direction: row;
|
||||||
top: 0%; }
|
top: 0%; }
|
||||||
body nav.mobile-shortcuts a {
|
body nav.mobile-shortcuts a {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 16.6666666667%;
|
width: 80px;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-bottom: 0; }
|
padding-bottom: 0; }
|
||||||
|
body nav.mobile-shortcuts a.go-to-index {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0; }
|
||||||
body nav.mobile-shortcuts div.search {
|
body nav.mobile-shortcuts div.search {
|
||||||
width: calc(100% * 4 / 6 - 20px);
|
position: absolute;
|
||||||
|
left: 80px;
|
||||||
|
top: 10%;
|
||||||
|
width: Min(calc(100% - 90px * 2), 500px);
|
||||||
height: 80%;
|
height: 80%;
|
||||||
border-radius: 10px; }
|
border-radius: 10px; }
|
||||||
|
body nav.mobile-shortcuts a.menu-expand {
|
||||||
|
position: absolute;
|
||||||
|
left: Min(calc(100% - 80px), 600px);
|
||||||
|
top: 0;
|
||||||
|
align-self: end; }
|
||||||
body div.page-contents {
|
body div.page-contents {
|
||||||
background: #FEFEFA;
|
background: #FEFEFA;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 60px;
|
top: 80px;
|
||||||
height: calc(80% - 60px);
|
height: calc(80% - 80px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-y: scroll; }
|
overflow-y: scroll; }
|
||||||
body div.page-contents div.child-categories-mobile a {
|
body div.page-contents div.child-categories-mobile a {
|
||||||
|
@ -507,37 +522,11 @@ body {
|
||||||
body div.page-contents img {
|
body div.page-contents img {
|
||||||
max-width: 694px; } }
|
max-width: 694px; } }
|
||||||
|
|
||||||
@media (min-width: 1100px) {
|
@media (min-width: 700px) {
|
||||||
body nav.mobile-foldable, body nav.mobile-foldable.show {
|
body nav.mobile-foldable {
|
||||||
display: none; }
|
left: -100%; }
|
||||||
body nav.mobile-shortcuts {
|
body nav.mobile-foldable.show {
|
||||||
display: none; }
|
left: 0; } }
|
||||||
body div.search-in-page.active {
|
|
||||||
display: none; }
|
|
||||||
body div.page-contents {
|
|
||||||
top: 0%;
|
|
||||||
left: 5%;
|
|
||||||
height: 80%;
|
|
||||||
width: 90%;
|
|
||||||
border: solid 1px black; }
|
|
||||||
body div.page-contents div.description.open-browser-container {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0; }
|
|
||||||
body div.page-contents div.description {
|
|
||||||
margin-left: 10%;
|
|
||||||
margin-right: 10%; }
|
|
||||||
body div.page-contents nav.desktop {
|
|
||||||
display: block;
|
|
||||||
height: auto;
|
|
||||||
height: 60px; }
|
|
||||||
body div.page-contents nav.desktop a {
|
|
||||||
display: table-cell;
|
|
||||||
height: 60px; }
|
|
||||||
body div.page-contents nav.desktop a img.index-image-menu {
|
|
||||||
height: 40px;
|
|
||||||
width: 40px; }
|
|
||||||
body div.page-contents.no-carousel {
|
|
||||||
height: 100%; } }
|
|
||||||
|
|
||||||
@media (min-width: 1333px) {
|
@media (min-width: 1333px) {
|
||||||
body div.page-contents div.description div.articles a {
|
body div.page-contents div.description div.articles a {
|
||||||
|
@ -548,6 +537,24 @@ body {
|
||||||
body div.page-contents div.description div.articles a:nth-child(3n+1) {
|
body div.page-contents div.description div.articles a:nth-child(3n+1) {
|
||||||
margin-left: 0%; } }
|
margin-left: 0%; } }
|
||||||
|
|
||||||
|
@media (min-width: 848px) {
|
||||||
|
body div.page-contents div.description div.articles a {
|
||||||
|
width: 30%;
|
||||||
|
margin-left: 3%; }
|
||||||
|
body div.page-contents div.description div.articles a:nth-child(2n+1) {
|
||||||
|
margin-left: 3%; }
|
||||||
|
body div.page-contents div.description div.articles a:nth-child(3n+1) {
|
||||||
|
margin-left: 0%; } }
|
||||||
|
|
||||||
|
@media (min-width: 1333px) {
|
||||||
|
body div.page-contents div.description div.articles a {
|
||||||
|
width: 22%;
|
||||||
|
margin-left: 3%; }
|
||||||
|
body div.page-contents div.description div.articles a:nth-child(3n+1) {
|
||||||
|
margin-left: 3%; }
|
||||||
|
body div.page-contents div.description div.articles a:nth-child(4n+1) {
|
||||||
|
margin-left: 0%; } }
|
||||||
|
|
||||||
@media (max-width: 200px) {
|
@media (max-width: 200px) {
|
||||||
body {
|
body {
|
||||||
font-size: 20px; } }
|
font-size: 20px; } }
|
||||||
|
|
|
@ -120,9 +120,10 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
a.search-icon {
|
a.search-icon {
|
||||||
height: calc(100% - 28px);
|
height: calc(100% - 40px);
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin: 7px;
|
margin: 20px;
|
||||||
|
margin-left: 7px;
|
||||||
display: flex;
|
display: flex;
|
||||||
background: aliceblue;
|
background: aliceblue;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -311,7 +312,7 @@ body {
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
opacity: 40%;
|
opacity: 40%;
|
||||||
top: 60px;
|
top: 80px;
|
||||||
height: calc(100% - 60px);
|
height: calc(100% - 60px);
|
||||||
z-index: 250;
|
z-index: 250;
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -325,8 +326,8 @@ body {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 100%;
|
left: 100%;
|
||||||
width: 70%;
|
width: Min(70%, 600px);
|
||||||
top: 60px;
|
top: 80px;
|
||||||
height: calc(100% - 60px);
|
height: calc(100% - 60px);
|
||||||
z-index: 500;
|
z-index: 500;
|
||||||
transition: left 0.5s ease-in, visibility 0.5s ease-in;
|
transition: left 0.5s ease-in, visibility 0.5s ease-in;
|
||||||
|
@ -401,14 +402,14 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
nav > a.menu-expand > img {
|
nav > a.menu-expand > img {
|
||||||
width: 30px;
|
width: 40px;
|
||||||
height: 30px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav > a > img.index-image-menu {
|
nav > a > img.index-image-menu {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 40px;
|
width: 60px;
|
||||||
height: 40px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav > a > img.index-image-menu, div.burguillos-logo-container > img {
|
nav > a > img.index-image-menu, div.burguillos-logo-container > img {
|
||||||
|
@ -468,30 +469,48 @@ body {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: $background_div;
|
background: $background_div;
|
||||||
height: 60px;
|
height: 80px;
|
||||||
|
justify-content: start;
|
||||||
|
flex-direction: row;
|
||||||
top: 0%;
|
top: 0%;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: (100% / 6);
|
width: 80px;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a.go-to-index {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
div.search {
|
div.search {
|
||||||
width: calc(100% * 4 / 6 - 20px);
|
position: absolute;
|
||||||
|
left: 80px;
|
||||||
|
top: 10%;
|
||||||
|
width: Min(calc(100% - 90px * 2), 500px);
|
||||||
height: 80%;
|
height: 80%;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a.menu-expand {
|
||||||
|
position: absolute;
|
||||||
|
left: Min(calc(100% - 80px), 600px);
|
||||||
|
top: 0;
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div.page-contents {
|
div.page-contents {
|
||||||
background: $background-page;
|
background: $background-page;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 60px;
|
top: 80px;
|
||||||
height: calc(80% - 60px);
|
height: calc(80% - 80px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
|
||||||
|
@ -781,57 +800,14 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1100px) {
|
@media (min-width: 700px) {
|
||||||
body {
|
body {
|
||||||
nav.mobile-foldable, nav.mobile-foldable.show {
|
nav.mobile-foldable {
|
||||||
display: none;
|
left: -100%;
|
||||||
}
|
|
||||||
|
|
||||||
nav.mobile-shortcuts {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.search-in-page.active {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.page-contents {
|
|
||||||
div.description.open-browser-container {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
}
|
||||||
|
nav.mobile-foldable.show {
|
||||||
div.description {
|
left: 0;
|
||||||
margin-left: 10%;
|
|
||||||
margin-right: 10%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.desktop {
|
|
||||||
display: block;
|
|
||||||
height: auto;
|
|
||||||
height: 60px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: table-cell;
|
|
||||||
height: 60px;
|
|
||||||
|
|
||||||
img.index-image-menu {
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
top: 0%;
|
|
||||||
left: 5%;
|
|
||||||
height: 80%;
|
|
||||||
width: 90%;
|
|
||||||
border: solid 1px black;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.page-contents.no-carousel {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -858,6 +834,51 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 848px) {
|
||||||
|
body {
|
||||||
|
div.page-contents {
|
||||||
|
div.description {
|
||||||
|
div.articles {
|
||||||
|
a {
|
||||||
|
&:nth-child(2n+1) {
|
||||||
|
margin-left: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3n+1) {
|
||||||
|
margin-left: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
width: 30%;
|
||||||
|
margin-left: 3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1333px) {
|
||||||
|
body {
|
||||||
|
div.page-contents {
|
||||||
|
div.description {
|
||||||
|
div.articles {
|
||||||
|
a {
|
||||||
|
&:nth-child(3n+1) {
|
||||||
|
margin-left: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(4n+1) {
|
||||||
|
margin-left: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
width: 22%;
|
||||||
|
margin-left: 3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@media (max-width: 200px) {
|
@media (max-width: 200px) {
|
||||||
body {
|
body {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
Loading…
Reference in New Issue