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>
<title>Owlcode.tech.</title>
<description>
</description>
<title>Owlcode.tech</title>
<priority>0</priority>
<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>
</category>

12
lib/OwlcodeTech/Categories.pm
View File

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

59
public/css/styles.css
View File

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

44
public/css/styles.scss
View File

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

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

@ -1,11 +1,11 @@
% use Data::Dumper;
% my $categories = stash 'categories';
% my $current_category_slug = stash 'current_category_slug';
% my $current_category = stash 'current_category';
<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}) {

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>
<div></div>
<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-hover" src="/img/hamburger-menu-purple.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/hamburguer-menu-owlblue.webp" alt="Expandir el menú."/>
</a>
</nav>
<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>';
% $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};
<div class="description">
<h1><%= $current_category->{title} %></h1>
<%== $current_category->{description} %>
<div class="title-image">
% 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 $attributes = $current_category->{attributes};
% if (@$children_categories || %$attributes) {
<h2>Quizás te interese.</h2>
<h2>Quizás te interese.</h2>
% 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) {
% 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});
%= 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">
<img src="/img/rss.svg" alt="Icono de suscripción rss"/>
</a>
<a class="suscribe-category-rss" href="/<%=$current_category->{slug}%>.rss">
<img src="/img/rss.svg" alt="Icono de suscripción rss"/>
</a>
</div>
</div>