Improving the UI state of the owl to start blogging
This commit is contained in:
parent
2edb490833
commit
49b453e2fb
|
|
@ -0,0 +1,12 @@
|
|||
<category>
|
||||
<title>Programming recipes</title>
|
||||
<menu_text>Programación</menu_text>
|
||||
<description>
|
||||
<p>Find the answer to your programming problem.</p>
|
||||
</description>
|
||||
<extra-text>
|
||||
<p>This is an english only category challenges we found difficult to solve will be explained.</p>
|
||||
</extra-text>
|
||||
<img src="/img/programming.webp"/>
|
||||
<slug>programming</slug>
|
||||
</category>
|
||||
|
|
@ -42,8 +42,12 @@ sub Retrieve ($self) {
|
|||
or die "Missing slug at $category_file";
|
||||
defined( my $menu_text = $dom->at(':root > menu_text')->content )
|
||||
or die "Missing menu_text at $category_file";
|
||||
defined( my $priority = $dom->at(':root > priority')->text )
|
||||
or die "Missing priority at $category_file";
|
||||
my $priority = $dom->at(':root > priority');
|
||||
if (defined $priority) {
|
||||
$priority = $priority->text;
|
||||
} else {
|
||||
$priority = 999;
|
||||
}
|
||||
my $attributes = $self->_GetAttributes( $dom, $category_file );
|
||||
my $parent_tag = $dom->at(':root > parent');
|
||||
my $extra_text_tag = $dom->at(':root > extra-text');
|
||||
|
|
|
|||
|
|
@ -1,3 +1,20 @@
|
|||
div.title-image {
|
||||
position: relative;
|
||||
max-height: 80vh;
|
||||
overflow: hidden; }
|
||||
div.title-image img {
|
||||
min-width: 100%;
|
||||
height: 80%;
|
||||
aspect-ratio: 1 / 1; }
|
||||
div.title-image div.text-title {
|
||||
color: coral;
|
||||
font-size: 3.0vh;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
|
||||
transform: translate(-50%, -50%); }
|
||||
|
||||
html {
|
||||
height: 100%; }
|
||||
|
||||
|
|
@ -8,33 +25,99 @@ body {
|
|||
min-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
body div#first-box.margin {
|
||||
margin-top: 60px; }
|
||||
body div.author-text {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: end; }
|
||||
body div.padding-side {
|
||||
padding-left: 1%;
|
||||
padding-right: 1%; }
|
||||
body div.padding {
|
||||
padding: 1%; }
|
||||
body div.title-image {
|
||||
position: relative;
|
||||
max-height: 80vh;
|
||||
overflow: hidden; }
|
||||
body div.title-image img {
|
||||
min-width: 100%; }
|
||||
body div.title-image div.text-title {
|
||||
color: coral;
|
||||
font-size: 3.0vh;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
|
||||
transform: translate(-50%, -50%); }
|
||||
body span.round-center {
|
||||
background: #5C8CED;
|
||||
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.3em;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0.15em; }
|
||||
body div.search-overlay {
|
||||
overflow-y: scroll;
|
||||
display: none;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: white;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
flex-direction: column; }
|
||||
body div.search-overlay.active {
|
||||
display: flex; }
|
||||
body div.search-overlay div.search-results {
|
||||
margin: 7px; }
|
||||
body div.search-overlay div.search-results img {
|
||||
width: 75px; }
|
||||
body div.search-overlay div.search-results div.search-result div.row-title-url-image {
|
||||
display: flex;
|
||||
flex-direction: row; }
|
||||
body div.search-overlay div.search-results div.search-result div.row-title-url-image img {
|
||||
margin: 10px; }
|
||||
body div.search-overlay div.bounding-search-bar {
|
||||
margin: 7px;
|
||||
width: calc(100% - 20px);
|
||||
border-radius: 10px;
|
||||
height: 60px;
|
||||
display: flex; }
|
||||
body div.search-overlay div.bounding-search-bar div.search {
|
||||
width: calc(100% - 60px);
|
||||
height: 60px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px; }
|
||||
body div.search-overlay div.bounding-search-bar a.up, body div.search-overlay div.bounding-search-bar a.down {
|
||||
display: none; }
|
||||
body div.search-overlay div.bounding-search-bar a.exit-search {
|
||||
width: 60px;
|
||||
background: whitesmoke;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; }
|
||||
body div.search-overlay div.bounding-search-bar a.exit-search img {
|
||||
width: 60%; }
|
||||
body div.search {
|
||||
background: whitesmoke;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
display: flex; }
|
||||
body div.search a.search-icon {
|
||||
height: calc(100% - 28px);
|
||||
align-self: center;
|
||||
margin: 7px;
|
||||
display: flex;
|
||||
background: aliceblue;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
border-radius: 10px;
|
||||
border: solid gray 1px;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto; }
|
||||
body div.search a.search-icon img {
|
||||
height: 80%;
|
||||
aspect-ratio: 1 / 1; }
|
||||
body div.search div.fake-text-box {
|
||||
width: calc(100% - 60px);
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
body div.search div.fake-text-box input[type="text"] {
|
||||
font-size: 30px;
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none; }
|
||||
body p, body h1, body h2, body h3, body h4, body a {
|
||||
font-family: 'arial'; }
|
||||
body *.android {
|
||||
display: none; }
|
||||
body div.site-wrapper {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
|
@ -46,17 +129,220 @@ body {
|
|||
filter: blur(10px);
|
||||
background-size: cover;
|
||||
overflow: hidden; }
|
||||
body div.page-contents {
|
||||
position: absolute;
|
||||
body div.carousel {
|
||||
position: fixed;
|
||||
top: 80%;
|
||||
height: calc(20% - 6px);
|
||||
width: calc(100% - 6px);
|
||||
border: solid 3px black; }
|
||||
body div.carousel a {
|
||||
font-size: 13px;
|
||||
background: azure;
|
||||
color: #5C8CED;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
text-decoration: none; }
|
||||
body div.carousel a:hover, body div.carousel a:focus {
|
||||
background: #5C8CED;
|
||||
color: azure; }
|
||||
body div.carousel div.promoted-tag, body div.carousel h3 {
|
||||
margin: 0;
|
||||
margin-right: 5px; }
|
||||
body div.carousel img {
|
||||
margin: 10px;
|
||||
height: calc(100% - 20px);
|
||||
border: solid 1px black;
|
||||
background: white; }
|
||||
body div.none {
|
||||
display: none; }
|
||||
body div.complete-container {
|
||||
position: fixed;
|
||||
overflow-y: scroll;
|
||||
z-index: 2;
|
||||
background: azure;
|
||||
color: #666362;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
height: 100%;
|
||||
width: 100%; }
|
||||
body div.page-contents.no-carousel {
|
||||
height: calc(100% - 60px); }
|
||||
body nav {
|
||||
overflow: auto;
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
margin: 0px; }
|
||||
body nav a.go-to-index img {
|
||||
background: white;
|
||||
padding: 5px;
|
||||
border-radius: 50%; }
|
||||
body nav a {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: azure;
|
||||
margin: 0;
|
||||
background: #5C8CED; }
|
||||
body nav a:hover, body nav a:focus {
|
||||
background: azure;
|
||||
color: #5C8CED; }
|
||||
body nav a.selected {
|
||||
background: #FEFEFA;
|
||||
color: #5C8CED;
|
||||
border-right: 1px solid #5C8CED; }
|
||||
body nav.desktop {
|
||||
display: none; }
|
||||
body nav.desktop a {
|
||||
vertical-align: middle; }
|
||||
body nav.desktop a.search-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
body nav.desktop a.search-icon img {
|
||||
background: aliceblue;
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
width: 60%;
|
||||
height: 60%; }
|
||||
body div.transparent-fullscreen-hide {
|
||||
position: fixed;
|
||||
background: black;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 40%;
|
||||
top: 60px;
|
||||
height: calc(100% - 60px);
|
||||
z-index: 250;
|
||||
display: none; }
|
||||
body div.transparent-fullscreen-hide.show {
|
||||
display: block; }
|
||||
body nav.mobile-foldable {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
left: 100%;
|
||||
width: 70%;
|
||||
top: 60px;
|
||||
height: calc(100% - 60px);
|
||||
z-index: 500;
|
||||
transition: left 0.5s ease-in, visibility 0.5s ease-in;
|
||||
background: white; }
|
||||
body nav.mobile-foldable > a:first-child {
|
||||
margin-top: 30px; }
|
||||
body nav.mobile-foldable a {
|
||||
display: block;
|
||||
font-size: 1.1em;
|
||||
height: auto;
|
||||
padding-left: auto;
|
||||
padding-right: auto;
|
||||
color: #5C8CED;
|
||||
background: white;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 20px;
|
||||
width: calc(100% - 20px - 20px - 2px); }
|
||||
body nav.mobile-foldable div.child-categories-mobile {
|
||||
margin-left: 80px;
|
||||
width: calc(100% - 90px - 20px); }
|
||||
body nav.mobile-foldable div.child-categories-mobile a {
|
||||
display: list-item;
|
||||
font-size: 1em; }
|
||||
body nav.mobile-foldable.show {
|
||||
left: 30%;
|
||||
visibility: visible; }
|
||||
body nav.mobile-shortcuts > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
body nav.mobile-shortcuts > a.active {
|
||||
background: white;
|
||||
color: #dcdcf5; }
|
||||
body nav.mobile-shortcuts > a.active:focus {
|
||||
background: azure; }
|
||||
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, body a.menu-expand.active .open-menu-icon-hover {
|
||||
display: block; }
|
||||
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; }
|
||||
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 div.search-in-page {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
background: #5C8CED;
|
||||
z-index: 3; }
|
||||
body div.search-in-page a.up, body div.search-in-page a.down {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100% - 28px);
|
||||
align-self: center;
|
||||
margin: 7px;
|
||||
display: flex;
|
||||
background: aliceblue;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
border-radius: 10px;
|
||||
border: solid gray 1px;
|
||||
aspect-ratio: 1/1; }
|
||||
body div.search-in-page a.up img, body div.search-in-page a.down img {
|
||||
height: 80%; }
|
||||
body div.search-in-page span {
|
||||
color: whitesmoke;
|
||||
font-size: 25px; }
|
||||
body div.search-in-page.active {
|
||||
display: flex; }
|
||||
body nav.mobile-shortcuts {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
background: #5C8CED;
|
||||
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.search {
|
||||
width: calc(100% * 4 / 6 - 20px);
|
||||
height: 80%;
|
||||
border-radius: 10px; }
|
||||
body div.page-contents {
|
||||
height: calc(100% - 60px);
|
||||
background: #FEFEFA;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
word-wrap: break-word; }
|
||||
body div.page-contents div.child-categories-mobile a {
|
||||
padding-left: 2.5rem; }
|
||||
body div.page-contents img {
|
||||
|
|
@ -71,6 +357,11 @@ body {
|
|||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: fixed; }
|
||||
body div.page-contents table tr:hover {
|
||||
background: #5C8CED;
|
||||
color: azure; }
|
||||
body div.page-contents table tr:hover th, body div.page-contents table tr:hover td {
|
||||
border: 3px solid azure; }
|
||||
body div.page-contents table td, body div.page-contents table th {
|
||||
font-size: 12px; }
|
||||
body div.page-contents th, body div.page-contents td {
|
||||
|
|
@ -78,154 +369,115 @@ body {
|
|||
border-collapse: collapse;
|
||||
padding-right: 10px;
|
||||
margin: 0; }
|
||||
body div.page-contents div.description {
|
||||
background: azure;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 1%; }
|
||||
body div.page-contents div.description input {
|
||||
display: block; }
|
||||
body div.page-contents div.description div.content {
|
||||
padding: 1%; }
|
||||
body div.page-contents div.description div.suscribirse-rss img {
|
||||
max-height: 300px; }
|
||||
body div.page-contents div.description div.articles {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap; }
|
||||
body div.page-contents div.description div.articles div.image-container {
|
||||
margin-left: 2.5%;
|
||||
margin-top: 10px;
|
||||
height: 95%;
|
||||
width: 95%;
|
||||
display: flex;
|
||||
min-height: 130px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border: solid 1px black; }
|
||||
body div.page-contents div.description div.articles div.image-container img {
|
||||
max-width: unset;
|
||||
width: 100%;
|
||||
border: solid 1px black; }
|
||||
body div.page-contents div.description div.articles a {
|
||||
min-height: 90%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 30px; }
|
||||
body div.page-contents div.description div.articles a article {
|
||||
word-wrap: break-word;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
padding: 5%;
|
||||
padding-top: 1%;
|
||||
background: azure;
|
||||
color: #5C8CED;
|
||||
box-shadow: 8px 8px 1px 0px #8ddfd6;
|
||||
border: 3px solid black; }
|
||||
body div.page-contents div.description div.articles a article p, body div.page-contents div.description div.articles a article h4, body div.page-contents div.description div.articles a article h3, body div.page-contents div.description div.articles a article h2 {
|
||||
margin: 0px; }
|
||||
body div.page-contents div.description div.articles a article p {
|
||||
font-size: 0.9rem; }
|
||||
body div.page-contents div.description div.articles a article div.article-up-part {
|
||||
height: 12em; }
|
||||
body div.page-contents div.description div.articles a article div.article-down-part {
|
||||
margin-top: 2em;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
padding-bottom: 2em; }
|
||||
body div.page-contents div.description div.articles a article:hover {
|
||||
background: #5C8CED;
|
||||
color: azure; }
|
||||
body div.page-contents div.description div.articles a article p.date {
|
||||
text-align: right; }
|
||||
body div.page-contents div.description div.articles a article p.author {
|
||||
text-align: right; }
|
||||
body div.page-contents div.description a.suscribe-category-rss {
|
||||
background: #5C8CED;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
display: inline-block; }
|
||||
body div.page-contents div.description a.suscribe-category-rss img {
|
||||
width: 40px;
|
||||
height: 40px; }
|
||||
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: 50px;
|
||||
height: 50px; }
|
||||
body div.page-contents nav.desktop {
|
||||
display: none;
|
||||
background: #5C8CED; }
|
||||
body div.page-contents nav.desktop a {
|
||||
transition: ease-out 0.3s;
|
||||
vertical-align: middle;
|
||||
background: #5C8CED; }
|
||||
body div.page-contents nav.desktop a img {
|
||||
background: azure; }
|
||||
body div.page-contents nav {
|
||||
overflow: auto;
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
margin: 0px; }
|
||||
body div.page-contents nav a.go-to-index img {
|
||||
margin-top: 5%; }
|
||||
body div.page-contents nav a {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: azure;
|
||||
margin: 0; }
|
||||
body div.page-contents nav a:hover {
|
||||
background: azure;
|
||||
color: #5C8CED; }
|
||||
body div.page-contents nav a.selected {
|
||||
background: azure;
|
||||
color: #5C8CED; }
|
||||
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 {
|
||||
display: block; }
|
||||
body div.page-contents nav a.menu-expand:hover .open-menu-icon {
|
||||
display: none; }
|
||||
body div.page-contents nav.mobile-shortcuts {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background: #5C8CED;
|
||||
height: 60px; }
|
||||
body div.page-contents nav.mobile-shortcuts a.go-to-index {
|
||||
height: 100%;
|
||||
background: azure; }
|
||||
body div.page-contents nav.mobile-shortcuts a.go-to-index:hover {
|
||||
background: 'ghostwhite'; }
|
||||
body div.page-contents nav.mobile-shortcuts a {
|
||||
width: 60px;
|
||||
height: 60px; }
|
||||
body div.page-contents nav.mobile-shortcuts a.menu-expand {
|
||||
padding-top: calc((60px - 30px) / 2);
|
||||
padding-bottom: calc((60px - 30px) / 2);
|
||||
height: 30px; }
|
||||
body div.page-contents nav.mobile-shortcuts div {
|
||||
width: calc(100% - 120px); }
|
||||
body div.page-contents nav.mobile-foldable {
|
||||
display: none;
|
||||
background: #5C8CED;
|
||||
color: azure; }
|
||||
body div.page-contents nav.mobile-foldable a {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
align-items: center; }
|
||||
body div.page-contents nav.mobile-foldable.show {
|
||||
body div.page-contents input {
|
||||
display: block; }
|
||||
body div.page-contents div.suscribirse-rss img {
|
||||
max-height: 300px; }
|
||||
body div.page-contents div.articles {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap; }
|
||||
body div.page-contents div.articles div.image-container {
|
||||
margin-left: 2.5%;
|
||||
margin-top: 10px;
|
||||
height: 95%;
|
||||
width: 95%;
|
||||
display: flex;
|
||||
min-height: 130px;
|
||||
justify-content: center;
|
||||
align-items: center; }
|
||||
body div.page-contents div.articles div.image-container img {
|
||||
background: white;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
border: solid 1px black; }
|
||||
body div.page-contents div.articles a {
|
||||
min-height: 90%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 30px; }
|
||||
body div.page-contents div.articles a:focus article, body div.page-contents div.articles a:hover article {
|
||||
background: #5C8CED;
|
||||
color: azure; }
|
||||
body div.page-contents div.articles a article {
|
||||
word-wrap: break-word;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
padding: 5%;
|
||||
padding-top: 1%;
|
||||
background: azure;
|
||||
color: #5C8CED;
|
||||
box-shadow: 8px 8px 1px 0px #8ddfd6;
|
||||
border: 3px solid black; }
|
||||
body div.page-contents div.articles a article p, body div.page-contents div.articles a article h4, body div.page-contents div.articles a article h3, body div.page-contents div.articles a article h2 {
|
||||
margin: 0px; }
|
||||
body div.page-contents div.articles a article p {
|
||||
font-size: 0.9rem; }
|
||||
body div.page-contents div.articles a article div.article-up-part {
|
||||
height: 12em; }
|
||||
body div.page-contents div.articles a article div.article-down-part {
|
||||
margin-top: 2em;
|
||||
height: 9em;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
padding-bottom: 2em; }
|
||||
body div.page-contents div.articles a article:hover {
|
||||
background: #5C8CED;
|
||||
color: azure; }
|
||||
body div.page-contents div.articles a article p.date {
|
||||
text-align: right; }
|
||||
body div.page-contents div.articles a article p.author {
|
||||
text-align: right; }
|
||||
body div.page-contents a.suscribe-category-rss {
|
||||
background: #5C8CED;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
display: inline-block; }
|
||||
body div.page-contents a.suscribe-category-rss img {
|
||||
width: 40px;
|
||||
height: 40px; }
|
||||
body div.page-contents div.open-browser-container {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
background: azure;
|
||||
color: #5C8CED; }
|
||||
body div.page-contents div.open-browser-container a.open-in-browser {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 20px);
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px; }
|
||||
body div.page-contents div.open-browser-container a.open-in-browser img {
|
||||
display: block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
margin-right: 0px;
|
||||
margin-left: 0px; }
|
||||
body div.page-contents div.open-browser-container a.open-in-browser span {
|
||||
display: block; }
|
||||
body div.page-contents div.open-browser-container.android {
|
||||
display: none; }
|
||||
body div.page-contents div.easter-egg {
|
||||
display: flex;
|
||||
justify-content: center; }
|
||||
body div.page-contents div.burguillos-logo-container.active {
|
||||
border: solid 1px black;
|
||||
border-radius: 50%;
|
||||
filter: invert(1); }
|
||||
body div.page-contents div.burguillos-logo-container {
|
||||
padding: 40px;
|
||||
width: 120px; }
|
||||
body div.page-contents h1 {
|
||||
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 {
|
||||
|
|
@ -241,36 +493,49 @@ body {
|
|||
font-size: 20px; } }
|
||||
|
||||
@media (min-width: 694px) {
|
||||
body div.page-contents div.description div.articles a {
|
||||
body div.carousel a {
|
||||
font-size: 20px; }
|
||||
body div.carousel h3 {
|
||||
font-size: 25px; }
|
||||
body div.page-contents div.articles a {
|
||||
width: 45%;
|
||||
margin-left: 5%; }
|
||||
body div.page-contents div.description div.articles a:nth-child(2n+1) {
|
||||
margin-left: 0%; } }
|
||||
body div.page-contents div.articles a:nth-child(2n+1) {
|
||||
margin-left: 0%; }
|
||||
body div.page-contents img {
|
||||
max-width: 694px; } }
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
body div#first-box.margin {
|
||||
margin-top: 0px; }
|
||||
body nav.mobile-foldable, body nav.mobile-foldable.show {
|
||||
display: none; }
|
||||
body nav.mobile-shortcuts {
|
||||
display: none; }
|
||||
body div.search-in-page.active {
|
||||
display: none; }
|
||||
body div.page-contents {
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
height: 100%;
|
||||
width: 100%; }
|
||||
body div.page-contents nav.mobile-foldable, body div.page-contents nav.mobile-foldable.show {
|
||||
display: none; }
|
||||
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-top: auto; }
|
||||
margin-left: 10%;
|
||||
margin-right: 10%; }
|
||||
body div.page-contents nav.desktop {
|
||||
display: block;
|
||||
height: auto; }
|
||||
height: auto;
|
||||
height: 60px; }
|
||||
body div.page-contents nav.desktop a {
|
||||
display: table-cell; }
|
||||
display: table-cell;
|
||||
height: 60px; }
|
||||
body div.page-contents nav.desktop a img.index-image-menu {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
border-radius: 10px; }
|
||||
body div.page-contents nav.mobile-shortcuts {
|
||||
display: none; } }
|
||||
height: 40px;
|
||||
width: 40px; }
|
||||
body div.page-contents.no-carousel {
|
||||
height: 100%; } }
|
||||
|
||||
@media (min-width: 1333px) {
|
||||
body div.page-contents div.description div.articles a {
|
||||
|
|
@ -281,11 +546,13 @@ body {
|
|||
body div.page-contents div.description div.articles a:nth-child(3n+1) {
|
||||
margin-left: 0%; } }
|
||||
|
||||
@media (max-aspect-ratio: 3/5) {
|
||||
body div.title-image div.text-title {
|
||||
font-size: 1.9vh; } }
|
||||
|
||||
@media (min-aspect-ratio: 6/7) {
|
||||
body div.title-image div.text-title {
|
||||
font-size: 5vh; } }
|
||||
@media (max-width: 200px) {
|
||||
body {
|
||||
font-size: 20px; } }
|
||||
|
||||
@media (max-height: 400px) {
|
||||
body div.carousel {
|
||||
height: 120px;
|
||||
top: calc(100% - 120px); }
|
||||
body div.page-contents {
|
||||
height: calc(100% - 60px - 120px); } }
|
||||
|
|
|
|||
|
|
@ -8,48 +8,168 @@ $background-secondary: #635283;
|
|||
$color-secondary: #8eea6d;
|
||||
$accent-secondary: #fde68f;
|
||||
$primary-secondary: #590e11;
|
||||
$background_sidebar: white; //#F5F5DC;
|
||||
$color_sidebar: #dcdcf5;
|
||||
|
||||
div.title-image {
|
||||
position: relative;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
img {
|
||||
min-width: 100%;
|
||||
height: 80%;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
div.text-title {
|
||||
color: coral;
|
||||
font-size: 3.0vh;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
div#first-box.margin {
|
||||
margin-top: 60px;
|
||||
span.round-center {
|
||||
background: $background_div;
|
||||
color: $background_sidebar;
|
||||
line-height: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: inline-flex;
|
||||
border-radius: 0.3em;
|
||||
height: 0.7em;
|
||||
font-size: 0.7em;
|
||||
padding: 0.3em;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0.15em;
|
||||
}
|
||||
div.author-text {
|
||||
font-size: 20px;
|
||||
|
||||
div.search-overlay {
|
||||
overflow-y: scroll;
|
||||
display: none;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: white;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
flex-direction: column;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
div.padding-side {
|
||||
padding-left: 1%;
|
||||
padding-right: 1%;
|
||||
}
|
||||
div.padding {
|
||||
padding: 1%;
|
||||
}
|
||||
div.title-image {
|
||||
position: relative;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.search-results {
|
||||
margin: 7px;
|
||||
|
||||
img {
|
||||
min-width: 100%;
|
||||
width: 75px;
|
||||
}
|
||||
div.text-title {
|
||||
color: coral;
|
||||
font-size: 3.0vh;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
div.search-result {
|
||||
div.row-title-url-image {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
img {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.bounding-search-bar {
|
||||
margin: 7px;
|
||||
width: calc(100% - 20px);
|
||||
border-radius: 10px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
|
||||
div.search {
|
||||
width: calc(100% - 60px);
|
||||
height: 60px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
a.up, a.down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.exit-search {
|
||||
width: 60px;
|
||||
background: whitesmoke;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.search {
|
||||
background: whitesmoke;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
|
||||
a.search-icon {
|
||||
height: calc(100% - 28px);
|
||||
align-self: center;
|
||||
margin: 7px;
|
||||
display: flex;
|
||||
background: aliceblue;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
border-radius: 10px;
|
||||
border: solid gray 1px;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
|
||||
img {
|
||||
height: 80%;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
}
|
||||
|
||||
div.fake-text-box {
|
||||
width: calc(100% - 60px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
input[type="text"] {
|
||||
font-size: 30px;
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, a {
|
||||
font-family: 'arial';
|
||||
}
|
||||
|
||||
*.android {
|
||||
display: none;
|
||||
}
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -71,23 +191,314 @@ body {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.page-contents {
|
||||
position: absolute;
|
||||
div.carousel {
|
||||
position: fixed;
|
||||
top: 80%;
|
||||
height: calc(20% - 6px);
|
||||
width: calc(100% - 6px);
|
||||
border: solid 3px black;
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
background: $color_div;
|
||||
color: $background_div;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: $background_div;
|
||||
color: $color_div;
|
||||
}
|
||||
}
|
||||
|
||||
div.promoted-tag, h3 {
|
||||
margin: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 10px;
|
||||
height: calc(100% - 20px);
|
||||
border: solid 1px black;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
div.none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.complete-container {
|
||||
position: fixed;
|
||||
overflow-y: scroll;
|
||||
z-index: 2;
|
||||
background: $color_div;
|
||||
color: $color-page;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.page-contents.no-carousel {
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
nav {
|
||||
overflow: auto;
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
margin: 0px;
|
||||
|
||||
a.go-to-index img {
|
||||
background: white;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: $color_div;
|
||||
margin: 0;
|
||||
background: $background_div;
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
a.search-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
background: aliceblue;
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.transparent-fullscreen-hide {
|
||||
position: fixed;
|
||||
background: black;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 40%;
|
||||
top: 60px;
|
||||
height: calc(100% - 60px);
|
||||
z-index: 250;
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
nav.mobile-foldable {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
left: 100%;
|
||||
width: 70%;
|
||||
top: 60px;
|
||||
height: calc(100% - 60px);
|
||||
z-index: 500;
|
||||
transition: left 0.5s ease-in, visibility 0.5s ease-in;
|
||||
background: $background_sidebar;
|
||||
|
||||
& > a:first-child {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
a {
|
||||
//background: $color_div;
|
||||
//color: $background_div;
|
||||
display: block;
|
||||
font-size: 1.1em;
|
||||
height: auto;
|
||||
padding-left: auto;
|
||||
padding-right: auto;
|
||||
color: $background_div;
|
||||
// border: 1px solid black;
|
||||
background: $background_sidebar;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 20px;
|
||||
width: calc(100% - 20px - 20px - 2px);
|
||||
}
|
||||
|
||||
div.child-categories-mobile {
|
||||
margin-left: 80px;
|
||||
width: calc(100% - 90px - 20px);
|
||||
a {
|
||||
display: list-item;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.mobile-foldable.show {
|
||||
left: 30%;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
nav.mobile-shortcuts > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.active {
|
||||
background: $background_sidebar;
|
||||
color: $color_sidebar;
|
||||
&:focus {
|
||||
background: $color_div;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.menu-expand {
|
||||
padding-bottom: 9px;
|
||||
|
||||
.open-menu-icon-hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover, &:focus, &.active {
|
||||
.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.5707963268rad);
|
||||
}
|
||||
|
||||
div.search-in-page {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
background: $background_div;
|
||||
z-index: 3;
|
||||
|
||||
a.up, a.down {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100% - 28px);
|
||||
align-self: center;
|
||||
margin: 7px;
|
||||
display: flex;
|
||||
background: aliceblue;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
border-radius: 10px;
|
||||
border: solid gray 1px;
|
||||
aspect-ratio: 1/1;
|
||||
|
||||
img {
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: whitesmoke;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
nav.mobile-shortcuts {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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.search {
|
||||
width: calc(100% * 4 / 6 - 20px);
|
||||
height: 80%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
div.page-contents {
|
||||
height: calc(100% - 60px);
|
||||
background: $background-page;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
div.child-categories-mobile a {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
|
|
@ -102,6 +513,15 @@ body {
|
|||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
tr:hover {
|
||||
background: $background_div;
|
||||
color: $color_div;
|
||||
|
||||
th, td {
|
||||
border: 3px solid $color_div;
|
||||
}
|
||||
}
|
||||
|
||||
td, th {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -116,14 +536,9 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
div.description {
|
||||
background: $color_div;
|
||||
input {
|
||||
display: block;
|
||||
}
|
||||
div.content {
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
word-wrap: break-word;
|
||||
|
||||
|
|
@ -133,7 +548,6 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
margin-bottom: 1%;
|
||||
|
||||
div.articles {
|
||||
display: flex;
|
||||
|
|
@ -141,21 +555,21 @@ body {
|
|||
flex-wrap: wrap;
|
||||
|
||||
div.image-container {
|
||||
margin-left: 2.5%;
|
||||
margin-top: 10px;
|
||||
height: 95%;
|
||||
width: 95%;
|
||||
display: flex;
|
||||
min-height: 130px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
margin-left: 2.5%;
|
||||
margin-top: 10px;
|
||||
height: 95%;
|
||||
width: 95%;
|
||||
display: flex;
|
||||
min-height: 130px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
background: white;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
border: solid 1px black;
|
||||
img {
|
||||
max-width: unset;
|
||||
width: 100%;
|
||||
border: solid 1px black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -166,6 +580,14 @@ body {
|
|||
text-overflow: ellipsis;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:focus, &:hover {
|
||||
//outline: red solid 3px;
|
||||
article {
|
||||
background: $background_div;
|
||||
color: $color_div;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
word-wrap: break-word;
|
||||
width: 90%;
|
||||
|
|
@ -174,20 +596,21 @@ body {
|
|||
p, h4, h3, h2 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
div.article-up-part {
|
||||
height: 12em;
|
||||
height: 12em;
|
||||
}
|
||||
|
||||
div.article-down-part {
|
||||
margin-top: 2em;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
padding-bottom: 2em;
|
||||
margin-top: 2em;
|
||||
height: 9em;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
padding: 5%;
|
||||
|
|
@ -226,130 +649,63 @@ body {
|
|||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav > a.menu-expand > img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
nav > a > img.index-image-menu {
|
||||
vertical-align: middle;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav.desktop {
|
||||
display: none;
|
||||
background: $background_div;
|
||||
|
||||
|
||||
a {
|
||||
img {
|
||||
background: $color_div;
|
||||
}
|
||||
transition: ease-out 0.3s;
|
||||
vertical-align: middle;
|
||||
background: $background_div;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
overflow: auto;
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
margin: 0px;
|
||||
|
||||
a.go-to-index img {
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: $color_div;
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
background: $color_div;
|
||||
color: $background_div;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $color_div;
|
||||
color: $background_div;
|
||||
}
|
||||
}
|
||||
|
||||
a.menu-expand {
|
||||
|
||||
.open-menu-icon-hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.open-menu-icon-hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.open-menu-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.mobile-shortcuts {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
div.open-browser-container {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
width: 100%;
|
||||
background: $background_div;
|
||||
height: 60px;
|
||||
a.go-to-index {
|
||||
height: 100%;
|
||||
background: $color_div;
|
||||
&:hover {
|
||||
background: 'ghostwhite';
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
background: $color_div;
|
||||
color: $background_div;
|
||||
|
||||
a.open-in-browser {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 20px);
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
a.menu-expand {
|
||||
padding-top: calc((60px - 30px) / 2);
|
||||
padding-bottom: calc((60px - 30px) / 2);
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
div {
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
}
|
||||
|
||||
nav.mobile-foldable {
|
||||
div.open-browser-container.android {
|
||||
display: none;
|
||||
background: $background_div;
|
||||
color: $color_div;
|
||||
|
||||
a {
|
||||
//background: $color_div;
|
||||
//color: $background_div;
|
||||
display: flex;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
nav.mobile-foldable.show {
|
||||
display: block;
|
||||
div.easter-egg {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.burguillos-logo-container.active {
|
||||
border: solid 1px black;
|
||||
border-radius: 50%;
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
div.burguillos-logo-container {
|
||||
padding: 40px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
div.burguillos-logo-container.active img {}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -382,20 +738,33 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 694px) {
|
||||
body {
|
||||
div.page-contents {
|
||||
div.description {
|
||||
div.carousel {
|
||||
a {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
div.page-contents {
|
||||
div.articles {
|
||||
a {
|
||||
&:nth-child(2n+1) {
|
||||
margin-left: 0%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
width: 45%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 694px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -403,43 +772,54 @@ body {
|
|||
|
||||
@media (min-width: 1100px) {
|
||||
body {
|
||||
div#first-box.margin {
|
||||
margin-top: 0px;
|
||||
}
|
||||
nav.mobile-foldable, nav.mobile-foldable.show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav.mobile-shortcuts {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.search-in-page.active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.page-contents {
|
||||
nav.mobile-foldable, nav.mobile-foldable.show {
|
||||
display: none;
|
||||
div.description.open-browser-container {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
div.description {
|
||||
margin-top: auto;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
||||
nav.desktop {
|
||||
|
||||
display: block;
|
||||
height: auto;
|
||||
height: 60px;
|
||||
|
||||
a {
|
||||
display: table-cell;
|
||||
height: 60px;
|
||||
|
||||
img.index-image-menu {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.mobile-shortcuts {
|
||||
display: none;
|
||||
}
|
||||
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
left: 5%;
|
||||
height: 80%;
|
||||
width: 90%;
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
div.page-contents.no-carousel {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -448,15 +828,16 @@ body {
|
|||
body {
|
||||
div.page-contents {
|
||||
div.description {
|
||||
|
||||
div.articles {
|
||||
a {
|
||||
&:nth-child(2n+1) {
|
||||
margin-left: 3%;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
&:nth-child(3n+1) {
|
||||
margin-left: 0%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
width: 30%;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
|
@ -466,22 +847,21 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 3 / 5) {
|
||||
body {
|
||||
div.title-image {
|
||||
div.text-title {
|
||||
font-size: 1.9vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 200px) {
|
||||
body {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-aspect-ratio: 6 / 7) {
|
||||
body {
|
||||
div.title-image {
|
||||
div.text-title {
|
||||
font-size: 5vh;
|
||||
}
|
||||
}
|
||||
@media (max-height: 400px) {
|
||||
body {
|
||||
div.carousel {
|
||||
height: 120px;
|
||||
top: calc(100% - 120px);
|
||||
}
|
||||
|
||||
div.page-contents {
|
||||
height: calc(100% - 60px - 120px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
|
|
@ -1,4 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<!DOCTYPE xhtml>
|
||||
<html lang="es">
|
||||
<!--
|
||||
% use Mojo::DOM;
|
||||
% my $categories = stash 'categories';
|
||||
% my $current_category_slug = stash 'current_category_slug';
|
||||
|
|
@ -11,10 +13,10 @@
|
|||
% my $site_name = config 'site_name';
|
||||
% my $title = title;
|
||||
% my $title_meta = defined $title ? Mojo::DOM->new('<div>'.title.'</div>')->all_text : '';
|
||||
<html lang="es">
|
||||
-->
|
||||
<head>
|
||||
<script src="/js/bundle.js"></script>
|
||||
% my $css_version = config 'css_version';
|
||||
<script src="/js/bundle.js?v=<%=$css_version%>"></script>
|
||||
<link rel="stylesheet" href="/css/styles.css?v=<%=$css_version%>"/>
|
||||
<title><%= $title_meta %></title>
|
||||
<meta name="description" content="<%=defined $description_og ? $description_og : 'Lee más sobre: ' . title %>" />
|
||||
|
|
@ -32,21 +34,28 @@
|
|||
% }
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
</div>
|
||||
<div class="page-contents">
|
||||
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug
|
||||
</head>
|
||||
% if (defined $ogimage) {
|
||||
<!-- You must be wondering what the fuck is this always hidden image, we are tricking facebook into thinking this is the first image in the website
|
||||
because ogimages broke in their side.-->
|
||||
<img style="display: none;" src="<%= $ogimage %>" alt="Portada de <%= title %>"/>
|
||||
% }
|
||||
<div class="site-wrapper">
|
||||
</div>
|
||||
<div class="complete-container">
|
||||
%= include 'page/_mobile_menu', categories => $categories
|
||||
<%= content %></body>
|
||||
<hr/>
|
||||
<div class="footer description padding">
|
||||
<p>©2022-2023 Owlcode.tech</p>
|
||||
<p>Enterate de todas las novedades de <%=$site_name%>:</p>
|
||||
<a class="suscribe-category-rss" href="/all.rss">
|
||||
<img src="/img/rss.svg" alt="Icono de suscripción rss"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
%= include 'page/_mobile_foldable', categories => $categories
|
||||
<div class="page-contents">
|
||||
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug
|
||||
<%= content %>
|
||||
<hr/>
|
||||
<div class="footer description padding">
|
||||
<p>©2022-2023 Owlcode.tech</p>
|
||||
<p>Enterate de todas las novedades de <%=$site_name%>:</p>
|
||||
<a class="suscribe-category-rss" href="/all.rss">
|
||||
<img src="/img/rss.svg" alt="Icono de suscripción rss"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
% use Data::Dumper;
|
||||
% my $categories = stash 'categories';
|
||||
% my $current_category = stash 'current_category';
|
||||
% my $current_category_slug = stash 'current_category_slug';
|
||||
<nav class="desktop"><%
|
||||
my @sorted_categories = sort {
|
||||
$categories->{$a}{priority} <=> $categories->{$b}{priority}
|
||||
} keys %$categories;
|
||||
my $target_category_slug = $current_category_slug;
|
||||
my $current_category = $categories->{$current_category_slug};
|
||||
if (defined $current_category) {
|
||||
my $possible_parent = $current_category->{parent};
|
||||
if (defined $possible_parent && defined $categories->{$possible_parent}) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="transparent-fullscreen-hide">
|
||||
</div>
|
||||
<nav class="mobile-foldable" id="mobile-foldable"><%
|
||||
my $first = 1;
|
||||
for my $category_key (sort {
|
||||
$categories->{$a}{priority} <=> $categories->{$b}{priority}
|
||||
} keys %$categories) {
|
||||
my $category = $categories->{$category_key};
|
||||
if (defined $category->{parent} || $category->{slug} eq 'index') {
|
||||
next;
|
||||
}
|
||||
%><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}->@*) {
|
||||
%><a href="<%="/$child_category->{slug}"%>"><%==$child_category->{menu_text}%></a><%
|
||||
}%></div><%
|
||||
}
|
||||
%></nav>
|
||||
|
|
@ -1,24 +1,9 @@
|
|||
% my $categories = stash 'categories';
|
||||
<nav class="mobile-shortcuts">
|
||||
<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
|
||||
<div></div>
|
||||
<a href="#mobile-foldable" class="menu-expand">
|
||||
%= include 'page/_search_bar'
|
||||
<a class="menu-expand" href="#">
|
||||
<img class="open-menu-icon" src="/img/hamburguer-menu-azure.webp" alt="Expandir el menú."/>
|
||||
<img class="open-menu-icon-hover" src="/img/hamburguer-menu-owlblue.webp" alt="Expandir el menú."/>
|
||||
</a>
|
||||
</nav>
|
||||
<nav class="mobile-foldable" id="mobile-foldable"><%
|
||||
my $first = 1;
|
||||
for my $category_key (sort {
|
||||
$categories->{$a}{priority} <=> $categories->{$b}{priority}
|
||||
} keys %$categories) {
|
||||
my $category = $categories->{$category_key};
|
||||
if (defined $category->{parent}) {
|
||||
next;
|
||||
}
|
||||
%><a href="<%= '/'.$category->{slug} %>"><%==$category->{menu_text}%></a><div class="child-categories-mobile"><%
|
||||
for my $child_category ($category->{children}->@*) {
|
||||
%><a href="<%="/$child_category->{slug}"%>">* <%==$child_category->{menu_text}%></a><%
|
||||
}%></div><%
|
||||
}
|
||||
%></nav>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
% $description_og = Mojo::DOM->new($description_og)->all_text;
|
||||
% layout 'default', current_category => $current_category, description_og => $description_og, ogimage => "$base_url/@{[$current_category->{slug}]}-preview.png";
|
||||
% title $current_category->{title};
|
||||
<div id="first-box" class="description margin">
|
||||
% if (defined $current_category->{image}) {
|
||||
<div class="title-image">
|
||||
<img alt="Portada de la categoría: <%= $current_category->{title} %>" src="<%=$current_category->{image}%>"/>
|
||||
|
|
@ -53,4 +52,3 @@
|
|||
<img src="/img/rss.svg" alt="Icono de suscripción rss"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue