Skip to content

Interface improvements #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Interface improvements #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6267805
Se agregó fuente del blog
oscarvgg May 8, 2014
6beb2d1
:star: Se aplicó fuente del blog
oscarvgg May 8, 2014
ab8a789
:bug: se corrigió color del texto general
oscarvgg May 8, 2014
35e88bf
:star: Se aplicó color de textos en post
oscarvgg May 8, 2014
e070294
:star: Se agregó estilo a contenido de posts
oscarvgg May 8, 2014
442cef5
:star: Se agregó más espacio a los textos
oscarvgg May 8, 2014
4505f97
:star: Se agrupó contenido de post para agregar estilos
oscarvgg May 8, 2014
9fb7fd9
:construction: Se mejoró estilo de detalles del tutorial
oscarvgg May 8, 2014
dc5ccb8
:bug: Se arregló look de logo
oscarvgg May 8, 2014
fa556f7
:bug: Se arregló color de barra de navegación
oscarvgg May 8, 2014
90bc463
:bug: Se aumentó espacio entre posts en la lista
oscarvgg May 8, 2014
5f88f07
:bug: Se corrigió color de blockquote
oscarvgg May 8, 2014
e1b6b64
:bug: eliminación de ad en medio de noticia
oscarvgg May 13, 2014
8c7939e
:star: Se agregó padding a la descripción de author
oscarvgg May 13, 2014
111fdd2
:bug: se cambió palabra escritores por autores en footer
oscarvgg May 13, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions _assets/stylesheets/_main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
html, body {
height: 100%;
background-color: #f0f0f0;
font: 15px/22px Lato, sans-serif;
}

a {
Expand Down Expand Up @@ -78,7 +79,7 @@ i {

article {
border-bottom: solid 1px #ddd;
padding: 8px;
padding: 30px;
color: $article-font-color;

a {
Expand Down Expand Up @@ -149,10 +150,21 @@ footer {

.navbar-brand {
font-size: 20px;
letter-spacing: 4px;
letter-spacing: .25em;
font-weight: 500;
@include transition(all 0.3s ease-in-out);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.25em es relativamente lo mismo que 4px y estamos utilizando px en toda la página por lo tanto yo seguiría el estándar y dejaría el px. El font-weight ya era bold y parece que lato es más bold, así que no se que hacer con eso.

}

.navbar>.container .navbar-brand {
margin-left: -28px;
color: white;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aquí el margin-left forzado a -28px hace que no se vea la C de Codehero en mobile. Yo no forzaría nada para no romper el responsiveness de boostrap.

Para cambiar el color del brand no hace falta sobrescribir la clase, basta con agregar la variable necesaria y agregarla al archivo [_my-boostrap-vars.scss](https://github.com/albertogg/codehero-jekyll/blob/master/_assets/stylesheets/_my-bootstrap-vars.scss#L19] sin el componente !default


.navbar-inverse {
background-color: #333;
border-color: #333;
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

De igual manera aquí no hace falta sobrescribir la clase para cambiar el color de la barra, solo se debe agregar la variable necesaria a _my-boostrap-vars.scss.

// Centrar todos los thumbnails en series/index.html
// -------------------------------------------------
.series-banner {
Expand Down Expand Up @@ -289,6 +301,10 @@ footer {
border-radius: 0.50rem;
}

.author-bio {
padding: 30px;
}

.gravatar-img {
@include img-responsive();
width: 150px;
Expand Down
3 changes: 1 addition & 2 deletions _assets/stylesheets/_my-bootstrap-vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ $code-bg: rgba(0, 0, 0, 0.04);
$post-link-color: rgba(230, 126, 34, 1);
$article-title-color: rgb(85, 85, 85);
$article-title-hover-color: rgb(25, 193, 195);
$article-font-color: rgb(153, 153, 153);
$article-font-color: rgb(85, 85, 85);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Este es el color que tiene el blog actual, no lo cambiaría, ya que hace que todo se vea igual.


// Tamaño de los thumbnails.
// ------------------------------
Expand Down Expand Up @@ -34,4 +34,3 @@ $icon-font-name: "glyphicons-halflings-regular";
// -------------------------
$pagination-border: $orange-codehero !default;
$pagination-active-bg: $orange-codehero !default;

21 changes: 19 additions & 2 deletions _assets/stylesheets/_posts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
.post {
padding-top: 14px;

color: $article-font-color;

a {
color: $post-link-color;

Expand Down Expand Up @@ -38,6 +40,11 @@

p {
text-align: left;
margin-bottom: 15px;
}

h2 {
margin-bottom: 20px;
}

.social-inline {
Expand Down Expand Up @@ -78,10 +85,10 @@
}

.detalles-tutorial {
background-color: #f0f0f0;
background-color: #F7F7ED;
margin-top: -21px;
margin-bottom: -22px;
padding-top: 20px;
padding: 20px 15px 21px 15px;
padding-bottom: 21px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
Expand All @@ -96,6 +103,16 @@
padding: 0;
border-radius: 0.4rem;
}

.post-content {
padding: 0px 15px;
font-size: 17px;
line-height: 2;
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Me parece que el font-size es demasiado grande y el line-height también, a mi parecer se ve extraño. Capaz solo con line-height un poco más pequeño sea suficiente pero no se.

blockquote {
border-left-color: #2BA6CB;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agregaría este color a las variables de _my-boostrap-vars.scss para poder reutilizarlo.

}
}

.fa-oscuro {
Expand Down
2 changes: 1 addition & 1 deletion _includes/page-footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h3>¡Queremos saber de tí!. Encuéntranos en las redes sociales para
<li><a href="/sobre-nosotros.html">Sobre Nosotros</a></li>
<li class="horizontal-list-style-shits"><a href="/terminos-y-condiciones.html">Terminos y Condiciones</a></li>
<li class="horizontal-list-style-shits"><a href="/politica-de-privacidad.html">Politica de Privacidad</a></li>
<li class="horizontal-list-style-shits"><a href="/authors.html">Escritores</a></li>
<li class="horizontal-list-style-shits"><a href="/authors.html">Autores</a></li>
</ul>
</div>
</div>
Expand Down
16 changes: 9 additions & 7 deletions _includes/templates/autor-description.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<div class="col-xs-3 col-sm-4 col-md-3" >
<img class="gravatar-img" src="http://www.gravatar.com/avatar/{{ autor.thumb }}?s=400" alt="gravatar">
</div>
<div class="col-xs-9 col-sm-8 col-md-9">
<h1 class="underline-title"><a href="/author/{{ autor.namelink }}.html">{{ autor.name }}</a></h1>
{% include templates/autor-redes-sociales.html %}
<p>{{ autor.description }}</p>
<div class="author-bio">
<div class="col-xs-3 col-sm-4 col-md-3" >
<img class="gravatar-img" src="http://www.gravatar.com/avatar/{{ autor.thumb }}?s=400" alt="gravatar">
</div>
<div class="col-xs-9 col-sm-8 col-md-9">
<h1 class="underline-title"><a href="/author/{{ autor.namelink }}.html">{{ autor.name }}</a></h1>
{% include templates/autor-redes-sociales.html %}
<p>{{ autor.description }}</p>
</div>
</div>
1 change: 1 addition & 0 deletions _layouts/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
{% if page.description %}
<meta name="description" content="{{ page.description }}">
{% endif %}
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,300" rel="stylesheet" type="text/css">
{% stylesheet styles %}
</head>
<body>
Expand Down
48 changes: 26 additions & 22 deletions _layouts/post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,32 +62,36 @@ <h4>Detalles del Curso:</h4>
</div>
<hr>
{% endif %}
{% if page.serie %}
<div class="alert alert-info">
<h4>Más artículos en <a href="/series/{{ serie-url }}.html">{{ page.serie }}</a></h4>
<p>Este es el artículo <b>{{ page.title }}</b> de la serie {{ page.serie }} - <a id="show-post-list" href="#">Mostrar todos</a></p>
<ol class="post-ordered-list">
{% assign sorted_pages = site.posts | sort:"date" %}
{% for post in sorted_pages %}
{% if post.serie contains page.serie %}
{% if post.title == page.title %}
<li>{{ post.title }}</li>
{% else %}
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
<div class="post-content">
{% if page.serie %}
<div class="alert alert-info">
<h4>Más artículos en <a href="/series/{{ serie-url }}.html">{{ page.serie }}</a></h4>
<p>Este es el artículo <b>{{ page.title }}</b> de la serie {{ page.serie }} - <a id="show-post-list" href="#">Mostrar todos</a></p>
<ol class="post-ordered-list">
{% assign sorted_pages = site.posts | sort:"date" %}
{% for post in sorted_pages %}
{% if post.serie contains page.serie %}
{% if post.title == page.title %}
<li>{{ post.title }}</li>
{% else %}
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{% endfor %}
</ol>
</div>
{% endif %}
{% assign paragraphs = content | split:'</p>' %}
{% for paragraph in paragraphs %}
{{ paragraph }}
{% assign forlength = forloop.length | divided_by:2 %}
{% if forloop.index == forlength %}
{% include middle-post-ad.html %}
{% endif %}
{% endfor %}
{% assign paragraphs = content | split:'</p>' %}
{% for paragraph in paragraphs %}
{{ paragraph }}
{% assign forlength = forloop.length | divided_by:2 %}
{% if forloop.index == forlength %}
{% unless page.categories contains 'notícias' %}
{% include middle-post-ad.html %}
{% endunless %}
{% endif %}
{% endfor %}
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="center-in-div">
Expand Down