Improving the UI state of the owl to start blogging

This commit is contained in:
Sergiotarxz 2023-10-28 22:03:40 +02:00
parent 2edb490833
commit 49b453e2fb
10 changed files with 1125 additions and 453 deletions

View File

@ -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>

View File

@ -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');

View File

@ -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;
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;
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%); }
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;
overflow-y: scroll;
z-index: 2;
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;
z-index: 2;
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,21 +369,15 @@ 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 {
body div.page-contents input {
display: block; }
body div.page-contents div.description div.content {
padding: 1%; }
body div.page-contents div.description div.suscribirse-rss img {
body div.page-contents div.suscribirse-rss img {
max-height: 300px; }
body div.page-contents div.description div.articles {
body div.page-contents div.articles {
display: flex;
flex-direction: row;
flex-wrap: wrap; }
body div.page-contents div.description div.articles div.image-container {
body div.page-contents div.articles div.image-container {
margin-left: 2.5%;
margin-top: 10px;
height: 95%;
@ -100,21 +385,23 @@ body {
display: flex;
min-height: 130px;
justify-content: center;
align-items: center;
overflow: hidden;
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.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 {
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.description div.articles a article {
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%;
@ -124,108 +411,73 @@ body {
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 {
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.description div.articles a article p {
body div.page-contents div.articles a article p {
font-size: 0.9rem; }
body div.page-contents div.description div.articles a article div.article-up-part {
body div.page-contents div.articles a article div.article-up-part {
height: 12em; }
body div.page-contents div.description div.articles a article div.article-down-part {
body div.page-contents div.articles a article div.article-down-part {
margin-top: 2em;
height: 100px;
height: 9em;
display: flex;
align-items: end;
padding-bottom: 2em; }
body div.page-contents div.description div.articles a article:hover {
body div.page-contents div.articles a article:hover {
background: #5C8CED;
color: azure; }
body div.page-contents div.description div.articles a article p.date {
body div.page-contents div.articles a article p.date {
text-align: right; }
body div.page-contents div.description div.articles a article p.author {
body div.page-contents div.articles a article p.author {
text-align: right; }
body div.page-contents div.description a.suscribe-category-rss {
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 div.description a.suscribe-category-rss img {
body div.page-contents 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;
body div.page-contents div.open-browser-container {
display: flex;
justify-content: start;
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 {
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;
height: 60px;
align-items: center; }
body div.page-contents nav.mobile-foldable.show {
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); } }

View File

@ -8,33 +8,17 @@ $background-secondary: #635283;
$color-secondary: #8eea6d;
$accent-secondary: #fde68f;
$primary-secondary: #590e11;
$background_sidebar: white; //#F5F5DC;
$color_sidebar: #dcdcf5;
html {
height: 100%;
}
body {
div#first-box.margin {
margin-top: 60px;
}
div.author-text {
font-size: 20px;
display: flex;
justify-content: end;
}
div.padding-side {
padding-left: 1%;
padding-right: 1%;
}
div.padding {
padding: 1%;
}
div.title-image {
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;
@ -45,11 +29,147 @@ body {
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 {
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.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;
}
div.search-results {
margin: 7px;
img {
width: 75px;
}
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;
overflow-y: scroll;
z-index: 2;
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;
z-index: 2;
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;
@ -149,11 +563,11 @@ body {
min-height: 130px;
justify-content: center;
align-items: center;
overflow: hidden;
border: solid 1px black;
img {
max-width: unset;
width: 100%;
background: white;
max-height: 100%;
max-width: 100%;
border: solid 1px black;
}
}
@ -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,6 +596,7 @@ body {
p, h4, h3, h2 {
margin: 0px;
}
p {
font-size: 0.9rem;
}
@ -184,7 +607,7 @@ body {
div.article-down-part {
margin-top: 2em;
height: 100px;
height: 9em;
display: flex;
align-items: end;
padding-bottom: 2em;
@ -226,129 +649,62 @@ 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%;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
background: $color_div;
&:hover {
background: 'ghostwhite';
}
}
color: $background_div;
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 {
display: none;
background: $background_div;
color: $color_div;
a {
//background: $color_div;
//color: $background_div;
a.open-in-browser {
text-decoration: none;
display: flex;
height: 60px;
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;
}
nav.mobile-foldable.show {
span {
display: block;
}
}
}
div.open-browser-container.android {
display: none;
}
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%;
}
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;
}
div.page-contents {
nav.mobile-foldable, nav.mobile-foldable.show {
display: none;
}
div.description {
margin-top: auto;
}
nav.desktop {
display: block;
height: auto;
a {
display: table-cell;
img.index-image-menu {
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
border-radius: 10px;
}
}
}
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;
}
div.description {
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: 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%;
}
&:nth-child(3n+1) {
margin-left: 0%;
}
width: 30%;
margin-left: 3%;
}
@ -466,22 +847,21 @@ body {
}
}
@media (max-aspect-ratio: 3 / 5) {
@media (max-width: 200px) {
body {
div.title-image {
div.text-title {
font-size: 1.9vh;
}
}
font-size: 20px;
}
}
@media (min-aspect-ratio: 6 / 7) {
@media (max-height: 400px) {
body {
div.title-image {
div.text-title {
font-size: 5vh;
div.carousel {
height: 120px;
top: calc(100% - 120px);
}
div.page-contents {
height: calc(100% - 60px - 120px);
}
}
}

BIN
public/img/programming.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

View File

@ -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 %>" />
@ -33,13 +35,19 @@
<meta name="twitter:card" content="summary_large_image"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
% 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
%= include 'page/_mobile_foldable', categories => $categories
<div class="page-contents">
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug
%= include 'page/_mobile_menu', categories => $categories
<%= content %></body>
<%= content %>
<hr/>
<div class="footer description padding">
<p>©2022-2023 Owlcode.tech</p>
@ -49,4 +57,5 @@
</a>
</div>
</div>
</div>
</html>

View File

@ -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}) {

View File

@ -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>

View File

@ -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>

View File

@ -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>