sergiotarxz
/
owlcode.tech
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding more branding to owlcode.tech.

This commit is contained in:
sergiotarxz 2023-05-16 04:13:21 +02:00
parent 4cd40cc02b
commit 3d7d760cca
11 changed files with 119 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
content/categories/index.xml
View File

@ -1,8 +1,11 @@
<category> <category>
<title>Owlcode.tech.</title> <title>Owlcode.tech</title>
<description>
</description>
<priority>0</priority> <priority>0</priority>
<menu_text><img alt="Principio" class="index-image-menu" src="/img/owlcode_tech.webp?v=1"/></menu_text> <menu_text><img alt="Principio" class="index-image-menu" src="/img/owlcode_tech.webp?v=1"/></menu_text>
<description>
<p>Contrata la mejor infraestructura web para tu empresa.</p>
<p>Contacta con nosotros.</p>
</description>
<img src="/img/future.webp"/>
<slug>index</slug> <slug>index</slug>
</category> </category>

12
lib/OwlcodeTech/Categories.pm
View File

@ -32,6 +32,7 @@ sub Retrieve ($self) {
warn "Bad file $category_file, omiting...", next warn "Bad file $category_file, omiting...", next
if !-f $category_file || $category_file !~ /\.xml$/; if !-f $category_file || $category_file !~ /\.xml$/;
my $dom = Mojo::DOM->new( $category_file->slurp_utf8 ); my $dom = Mojo::DOM->new( $category_file->slurp_utf8 );
$dom->xml(1);
defined( my $title = $dom->at(':root > title')->text ) defined( my $title = $dom->at(':root > title')->text )
or die "Missing title at $category_file."; or die "Missing title at $category_file.";
defined( my $description = $dom->at(':root > description')->content ) defined( my $description = $dom->at(':root > description')->content )
@ -44,6 +45,12 @@ sub Retrieve ($self) {
or die "Missing priority at $category_file"; or die "Missing priority at $category_file";
my $attributes = $self->_GetAttributes( $dom, $category_file ); my $attributes = $self->_GetAttributes( $dom, $category_file );
my $parent_tag = $dom->at(':root > parent'); my $parent_tag = $dom->at(':root > parent');
my $image_tag = $dom->at(':root > img');
my $image;
if (defined $image_tag) {
$image = $image_tag->attr('src');
say $image;
}
my $parent; my $parent;
if ( defined $parent_tag ) { if ( defined $parent_tag ) {
@ -60,6 +67,11 @@ sub Retrieve ($self) {
? ( parent => $parent ) ? ( parent => $parent )
: () : ()
), ),
(
(defined $image)
? ( image => $image )
: ()
),
attributes => $attributes, attributes => $attributes,
}; };
$cached_categories->{$slug} = $category; $cached_categories->{$slug} = $category;

59
public/css/styles.css
View File

@ -8,6 +8,20 @@ body {
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
height: 100%; } height: 100%; }
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: 4.5vh;
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 p, body h1, body h2, body h3, body h4, body a { body p, body h1, body h2, body h3, body h4, body a {
font-family: 'arial'; } font-family: 'arial'; }
body div.site-wrapper { body div.site-wrapper {
@ -56,13 +70,13 @@ body {
body div.page-contents div.description { body div.page-contents div.description {
background: ghostwhite; background: ghostwhite;
margin-top: 60px; margin-top: 60px;
font-size: 30px;
word-wrap: break-word; word-wrap: break-word;
padding: 1%;
margin-left: 3%;
margin-right: 3%;
margin-bottom: 1%; } margin-bottom: 1%; }
body div.page-contents div.description input { body div.page-contents div.description input {
display: block; } 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.description div.suscribirse-rss img {
max-height: 300px; } max-height: 300px; }
body div.page-contents div.description div.articles { body div.page-contents div.description div.articles {
@ -131,8 +145,7 @@ body {
height: 40px; } height: 40px; }
body div.page-contents nav > a.menu-expand > img { body div.page-contents nav > a.menu-expand > img {
width: 30px; width: 30px;
height: 30px; height: 30px; }
margin-top: 15px; }
body div.page-contents nav > a > img.index-image-menu { body div.page-contents nav > a > img.index-image-menu {
vertical-align: middle; vertical-align: middle;
width: 50px; width: 50px;
@ -162,35 +175,40 @@ body {
body div.page-contents nav a.selected { body div.page-contents nav a.selected {
background: azure; background: azure;
color: #5C8CED; } color: #5C8CED; }
body div.page-contents nav a.menu-expand { body div.page-contents nav a.menu-expand .open-menu-icon-hover {
padding-bottom: 9px; } display: none; }
body div.page-contents nav a.menu-expand .open-menu-icon-hover { body div.page-contents nav a.menu-expand:hover .open-menu-icon-hover {
display: none; } display: block; }
body div.page-contents nav a.menu-expand:hover .open-menu-icon-hover { body div.page-contents nav a.menu-expand:hover .open-menu-icon {
display: block; } display: none; }
body div.page-contents nav a.menu-expand:hover .open-menu-icon {
display: none; }
body div.page-contents nav.mobile-shortcuts { body div.page-contents nav.mobile-shortcuts {
z-index: 1;
position: fixed; position: fixed;
display: flex; display: flex;
width: 100%; width: 100%;
background: #5C8CED; background: #5C8CED;
height: 60px; } height: 60px; }
body div.page-contents nav.mobile-shortcuts a.go-to-index { body div.page-contents nav.mobile-shortcuts a.go-to-index {
height: 99%;
background: ghostwhite;
border: solid 1px black; }
body div.page-contents nav.mobile-shortcuts a {
height: 100%; height: 100%;
width: 16.6666666667%; } background: ghostwhite; }
body div.page-contents nav.mobile-shortcuts a.go-to-index:hover {
background: azure; }
body div.page-contents nav.mobile-shortcuts a {
width: 16.66667%; }
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 { body div.page-contents nav.mobile-shortcuts div {
width: 66.6666666667%; } width: 66.66667%; }
body div.page-contents nav.mobile-foldable { body div.page-contents nav.mobile-foldable {
display: none; display: none;
background: #5C8CED; background: #5C8CED;
color: azure; } color: azure; }
body div.page-contents nav.mobile-foldable a { body div.page-contents nav.mobile-foldable a {
display: block; } display: flex;
height: 60px;
align-items: center; }
body div.page-contents nav.mobile-foldable.show { body div.page-contents nav.mobile-foldable.show {
display: block; } display: block; }
body div.page-contents h1 { body div.page-contents h1 {
@ -246,3 +264,4 @@ body {
margin-left: 3%; } margin-left: 3%; }
body div.page-contents div.description div.articles a:nth-child(3n+1) { body div.page-contents div.description div.articles a:nth-child(3n+1) {
margin-left: 0%; } } margin-left: 0%; } }

44
public/css/styles.scss
View File

@ -14,6 +14,23 @@ html {
} }
body { body {
div.title-image {
position: relative;
max-height: 80vh;
overflow: hidden;
img {
min-width: 100%;
}
div.text-title {
color: coral;
font-size: 4.5vh;
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%);
}
}
p, h1, h2, h3, h4, a { p, h1, h2, h3, h4, a {
font-family: 'arial'; font-family: 'arial';
} }
@ -87,9 +104,13 @@ body {
div.description { div.description {
background: ghostwhite; background: ghostwhite;
margin-top: 60px; margin-top: 60px;
font-size: 30px;
input { input {
display: block; display: block;
} }
div.content {
padding: 1%;
}
word-wrap: break-word; word-wrap: break-word;
@ -99,9 +120,6 @@ body {
} }
} }
padding: 1%;
margin-left: 3%;
margin-right: 3%;
margin-bottom: 1%; margin-bottom: 1%;
div.articles { div.articles {
@ -199,7 +217,6 @@ body {
nav > a.menu-expand > img { nav > a.menu-expand > img {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-top: 15px;
} }
nav > a > img.index-image-menu { nav > a > img.index-image-menu {
@ -247,7 +264,6 @@ body {
} }
a.menu-expand { a.menu-expand {
padding-bottom: 9px;
.open-menu-icon-hover { .open-menu-icon-hover {
display: none; display: none;
@ -266,22 +282,30 @@ body {
} }
nav.mobile-shortcuts { nav.mobile-shortcuts {
z-index: 1;
position: fixed; position: fixed;
display: flex; display: flex;
width: 100%; width: 100%;
background: $background_div; background: $background_div;
height: 60px; height: 60px;
a.go-to-index { a.go-to-index {
height: 99%; height: 100%;
background: ghostwhite; background: ghostwhite;
border: solid 1px black; &:hover {
background: $color_div;
}
} }
a { a {
height: 100%;
width: (100% / 6); width: (100% / 6);
} }
a.menu-expand {
padding-top: calc((60px - 30px) / 2);
padding-bottom: calc((60px - 30px) / 2);
height: 30px;
}
div { div {
width: 100% * 4 / 6; width: 100% * 4 / 6;
} }
@ -295,7 +319,9 @@ body {
a { a {
//background: $color_div; //background: $color_div;
//color: $background_div; //color: $background_div;
display: block; display: flex;
height: 60px;
align-items: center;
} }
} }

BIN
public/img/future.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 620 KiB

BIN
public/img/hamburguer-menu-azure.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
public/img/hamburguer-menu-owlblue.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

2
templates/not_found.html.ep
View File

@ -1,6 +1,6 @@
% use Mojo::Util; % use Mojo::Util;
% use OwlcodeTech::Categories; % use OwlcodeTech::Categories;
% layout 'default', current_category_slug => undef, categories => OwlcodeTech::Categories->new->Retrieve; % layout 'default', current_category_slug => undef, categories => OwlcodeTech::Categories->new->Retrieve, description_og => 'Esta página no existe, todavía...';
<div class="description"> <div class="description">
<h2>Esta página no existe.</h2> <h2>Esta página no existe.</h2>
<p>Si un enlace te ha llevado aquí, reporta el error a <a href="mailto:contact@owlcode.tech">los administradores</a>.</p> <p>Si un enlace te ha llevado aquí, reporta el error a <a href="mailto:contact@owlcode.tech">los administradores</a>.</p>

4
templates/page/_desktop_menu.html.ep
View File

@ -1,11 +1,11 @@
% use Data::Dumper;
% my $categories = stash 'categories'; % my $categories = stash 'categories';
% my $current_category_slug = stash 'current_category_slug'; % my $current_category = stash 'current_category';
<nav class="desktop"><% <nav class="desktop"><%
my @sorted_categories = sort { my @sorted_categories = sort {
$categories->{$a}{priority} <=> $categories->{$b}{priority} $categories->{$a}{priority} <=> $categories->{$b}{priority}
} keys %$categories; } keys %$categories;
my $target_category_slug = $current_category_slug; my $target_category_slug = $current_category_slug;
my $current_category = $categories->{$current_category_slug};
if (defined $current_category) { if (defined $current_category) {
my $possible_parent = $current_category->{parent}; my $possible_parent = $current_category->{parent};
if (defined $possible_parent && defined $categories->{$possible_parent}) { if (defined $possible_parent && defined $categories->{$possible_parent}) {

4
templates/page/_mobile_menu.html.ep
View File

@ -3,8 +3,8 @@
<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a> <a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
<div></div> <div></div>
<a href="#mobile-foldable" class="menu-expand"> <a href="#mobile-foldable" class="menu-expand">
<img class="open-menu-icon" src="/img/hamburger-menu-yellow.webp" alt="Expandir el menú."/> <img class="open-menu-icon" src="/img/hamburguer-menu-azure.webp" alt="Expandir el menú."/>
<img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.webp" alt="Expandir el menú."/> <img class="open-menu-icon-hover" src="/img/hamburguer-menu-owlblue.webp" alt="Expandir el menú."/>
</a> </a>
</nav> </nav>
<nav class="mobile-foldable" id="mobile-foldable"><% <nav class="mobile-foldable" id="mobile-foldable"><%

32
templates/page/index.html.ep
View File

@ -9,28 +9,40 @@
% %
% my $description_og = '<div>'.$current_category->{description}.'</div>'; % my $description_og = '<div>'.$current_category->{description}.'</div>';
% $description_og = Mojo::DOM->new($description_og)->all_text; % $description_og = Mojo::DOM->new($description_og)->all_text;
% layout 'default', current_category_slug => $current_category->{slug}, description_og => $description_og; % layout 'default', current_category => $current_category, description_og => $description_og;
% title $current_category->{title}; % title $current_category->{title};
<div class="description"> <div class="description">
<h1><%= $current_category->{title} %></h1> <div class="title-image">
<%== $current_category->{description} %> % if (defined $current_category->{image}) {
<img alt="Portada de la categoría: <%= $current_category->{title} %>" src="<%=$current_category->{image}%>"/>
<div class="text-title">
<h1><%= $current_category->{title} %></h1>
<%== $current_category->{description} %>
</div>
% } else {
<h1><%= $current_category->{title} %></h1>
<%== $current_category->{description} %>
% }
</div>
<div class="content">
% my $children_categories = $current_category->{children}; % my $children_categories = $current_category->{children};
% my $attributes = $current_category->{attributes}; % my $attributes = $current_category->{attributes};
% if (@$children_categories || %$attributes) { % if (@$children_categories || %$attributes) {
<h2>Quizás te interese.</h2> <h2>Quizás te interese.</h2>
% for my $child_category (@$children_categories) { % for my $child_category (@$children_categories) {
<p><a href="/<%=$child_category->{slug}%>"><%==$child_category->{title}%></a></p> <p><a href="/<%=$child_category->{slug}%>"><%==$child_category->{title}%></a></p>
% } % }
% for my $attribute_slug (keys %$attributes) { % for my $attribute_slug (keys %$attributes) {
% my $attribute = $attributes->{$attribute_slug}; % my $attribute = $attributes->{$attribute_slug};
<p><a href="<%="/$current_category->{slug}/atributo/$attribute->{identifier}"%>"><%==$attribute->{menu_text}%></a></p> <p><a href="<%="/$current_category->{slug}/atributo/$attribute->{identifier}"%>"><%==$attribute->{menu_text}%></a></p>
% } % }
% } % }
% my ($category_posts) = OwlcodeTech::Posts->new->RetrieveAllPostsForCategory($current_category->{slug}); % my ($category_posts) = OwlcodeTech::Posts->new->RetrieveAllPostsForCategory($current_category->{slug});
%= include 'page/_list_posts', posts => $category_posts; %= include 'page/_list_posts', posts => $category_posts;
<h2>Suscribete a esta categoría.</h2> <h2>Suscribete a esta categoría.</h2>
<a class="suscribe-category-rss" href="/<%=$current_category->{slug}%>.rss"> <a class="suscribe-category-rss" href="/<%=$current_category->{slug}%>.rss">
<img src="/img/rss.svg" alt="Icono de suscripción rss"/> <img src="/img/rss.svg" alt="Icono de suscripción rss"/>
</a> </a>
</div>
</div> </div>