diff --git a/content/categories/programing.xml b/content/categories/programing.xml new file mode 100644 index 0000000..a596c84 --- /dev/null +++ b/content/categories/programing.xml @@ -0,0 +1,12 @@ + + Programming recipes + Programación + +

Find the answer to your programming problem.

+ + +

This is an english only category challenges we found difficult to solve will be explained.

+ + + programming + diff --git a/lib/OwlcodeTech/Categories.pm b/lib/OwlcodeTech/Categories.pm index 4dadc7a..dbd4f3f 100644 --- a/lib/OwlcodeTech/Categories.pm +++ b/lib/OwlcodeTech/Categories.pm @@ -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'); diff --git a/public/css/styles.css b/public/css/styles.css index 8757c8a..1c2f013 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -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); } } diff --git a/public/css/styles.scss b/public/css/styles.scss index 903215f..d76d84b 100644 --- a/public/css/styles.scss +++ b/public/css/styles.scss @@ -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); + } + } } diff --git a/public/img/programming.webp b/public/img/programming.webp new file mode 100644 index 0000000..965a320 Binary files /dev/null and b/public/img/programming.webp differ diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep index 2ebb48d..2763d57 100644 --- a/templates/layouts/default.html.ep +++ b/templates/layouts/default.html.ep @@ -1,4 +1,6 @@ - + + + - % my $css_version = config 'css_version'; + <%= $title_meta %> @@ -32,21 +34,28 @@ % } - - -
-
-
-%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug + +% if (defined $ogimage) { + + Portada de <%= title %> +% } +
+
+
%= include 'page/_mobile_menu', categories => $categories - <%= content %> -
-
-

©2022-2023 Owlcode.tech

-

Enterate de todas las novedades de <%=$site_name%>:

- - Icono de suscripción rss - -
-
+%= include 'page/_mobile_foldable', categories => $categories +
+%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug + <%= content %> +
+
+

©2022-2023 Owlcode.tech

+

Enterate de todas las novedades de <%=$site_name%>:

+ + Icono de suscripción rss + +
+
+
diff --git a/templates/page/_desktop_menu.html.ep b/templates/page/_desktop_menu.html.ep index 7298c62..33c4013 100644 --- a/templates/page/_desktop_menu.html.ep +++ b/templates/page/_desktop_menu.html.ep @@ -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';