#exacs

Jugamos con los márgenes de #global-header

#global-header { padding:0; margin: -160px 0 11px 0; background: #EEE; @include transition(margin 300ms ease-out); &.opened { margin: 40px 0 11px 0; }

Y añadimos position:absolute a #global-header-header

#global-header-header { position: absolute; }

Vamos a llamar viewport a la pantalla del navegador (voy a nombrar viewport infinitas veces así que quédate con el nombre). Lo primero que decidimos son las dimensiones que tiene la pantalla del navegador. Y ahora muchos estaréis haciéndoos una pregunta:

¿Pero la pantalla del viewport no tiene el mismo tamaño que la pantalla (resolución) de mi móvil?.

Y la respuesta, por increíble que pueda parecer, es NO.

Esto tiene cosas buenas y cosas malas.

Lo bueno

Supongamos que tengo una imagen que ocupa 1600px de ancho y quiero verla en un móvil que tiene una resolución de 320x240

La pantalla del móvil tiene una resolución efectiva de 320x240. Si el viewport tuviera el mismo tamaño, la foto se vería así:

Pero lo que hace nuestro móvil es considerar que el viewport tiene un tamaño mucho más grande, 1600px de ancho. Y luego, lo que hace es adaptar el viewport a la pantalla. Así, la foto se ve entera

Lo malo

Ahora, tenemos una página que está hecha para que se adapte al ancho del móvil, aunque en realidad lo que hacemos es adaptarnos al ancho del viewport.

¿Qué tamaño de viewport considera el móvil ahora?

Lo lógico es que el móvil considere que el ancho del móvil es el ancho del viewport y por tanto haga esto:

Es decir, tome la página que está para "dispositivos con ancho de 320px" y la muestre.

Sin embargo, la respuesta a la pregunta es otra:

El móvil considera el ancho que le de la gana

Supongamos que el móvil considera un viewport de 800px de ancho. Esto quiere decir, que la página se verá como si tuviera 800px de ancho y luego el móvil la adaptará para ajustarla a los 320px de ancho de la pantalla.

Es decir, tanto diseñar la web para que se vea bien en anchos de 320px para que luego se vea como si tuviera 800px de ancho. Qué bien, eh...

La solución

Afortunadamente, tenemos una etiqueta que nos permite decirle al móvil que no coja un viewport cualquiera el que nosotros le digamos que tiene que coger.

Utilizaremos un metadato, es decir, la etiqueta meta de HTML que nos permitirá controlar eso. Aquí tenemos la sintaxis básica de dicha etiqueta:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1>

Aquí lo importante está en el atributo content que tiene todo. En él se encuentran una serie de "sub-atributos" separados por comas que son: width, initial-scale, minimum-scale, maximum-scale y user-scalable. Comencemos.

El atributo width dice qué ancho tiene el viewport. Puede tener un número entero, que serían los píxeles de ancho del viewport. Si queremos que el ancho del viewport sea el ancho de la pantalla del móvil pondremos width=device-width.

El zoom

Además de elegir el ancho inicial, los navegadores tienen una característica: el zoom. Nosotros, con la etiqueta que hemos visto podemos definir cuánto zoom permitimos al usuario.

El atributo initial-scale es el zoom inicial de la página (si lo tiene). En caso de que queramos que la página se vea inicialmente sin zoom pondremos el valor 1 que equivale al 100%.

Los atributos minimum-scale, maximum-scale definen la mínima y máxima cantidad de zoom permitida al usuario. Podemos poner valores desde 0.1 (10%) hasta el que queramos.

El atributo user-scalable=no (con el valor no) impide cualquier zoom al usuario quedándose siempre con el valor que especifiquemos en initial-scale. Omitirlo es como si tuviera el valor yes.

En nuestro caso vamos a utilizar esta configuración.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2>

Es decir

El ancho del viewport coincide con el ancho la pantalla del móvil y vamos a permitir zoom de 100% a 200%.

La primera modificación será el título

<title>{block:PostTitle}{PostTitle}{/block:PostTitle} \ {Title}</title>

Que será de la forma {Título del post} \exacs. Por ejemplo: Algoritmos de ordenación (1/6) - Ordenación por burbuja \exacs.

También eliminamos la descripción del blog del cuerpo.

La cabecera (menús) la vamos a copiar casi tal cual de momento. Más adelante habrá que cambiar los menús y sobre todo los href de los links.

<header id="global-header"> <div id="global-header-header"> <section id="global-logo"> <a href="/"><img src="imgs/logo.png" alt=""></a> </section> <div id="global-menu-toggler"> <a href="#" class="icon-menu"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAVklEQVR42u3ZsRHAIAwEQZVG6LIowR3jhJAx+Wt35hu4UKoCAAC2Gb6rFT4BBBDg3xM+AACAozd8V+4BAgjQO8AIHwAAwFH797h7gAAC9A4wwwcAAFR9rWMijux6svMAAAAASUVORK5CYIIe25e6d688bee46044c70c051b22d0b4b"/></a> </div> </div> <section id="global-nav"> <nav id="global-nav-general"> <ul> <li><a href="#">about</a></li> <li><a href="#">ask</a></li> <li><a href="#">archive</a></li> <li><a href="#">likes</a></li> </ul> </nav> <nav id="global-nav-projects"> <ul> <li><a href="#">#Shogi</a></li> <li><a href="#">#daetsam</a></li> <li><a href="#">#SortingAlgorithms</a></li> <li><a href="#">more...</a></li> </ul> </nav> </section> </header>

Ahora vamos a definir la sección principal y los posts de tipo texto

<section id="global-main"> {block:Posts} {block:Text} <section class="post"> <header class="post-title">{block:Title}<h1>{Title}</h1>{/block:Title}</header> <aside class="post-tags"> {block:HasTags} <ul> {block:Tags} <li><a href="{TagURLChrono}">{Tag}</a></li> {/block:Tags} </ul> {/block:HasTags} </aside> <article class="post-body"> {Body} </article> </section> {/block:Text} {/block:Posts} </section>

Etiquetas de tipo párrafo

Usamos body para seleccionar la fuente principal y p para el espacio entre párrafos. También usamos esta última para el interlineado que queremos que sea diferente para los párrafos que para los títulos.

body { font-size: 15px; font-family: Lora, serif; background: #FFF; } p { padding: 4px 0; line-height: 1.3em; }

Utilizamos una tipografía distinta para el encabezado <h1>. Nótese que para los tamaños de letra utilizamos las medidas en em. Esto permite que en los móviles se pueda cambiar el tamaño de letra y que toda la tipografía cambie en base a la elegida por el usuario.

h1 { padding: 24px 0 8px 0; font-size: 1.65em; font-family: Raleway, sans-serif; color: #000; } h2 { padding: 24px 0 4px 0; font-size: 1.5em; font-weight: bold; } h3 { padding: 16px 0 4px 0; font-size: 1.2em; font-weight: bold; } h4 { padding: 16px 0 4px 0; font-size: 1.2em; font-weight: bold; } h5 { padding: 12px 0 4px 0; font-size: 1.2em; font-weight: bold; color:#666; } h6 { padding: 12px 0 4px 0; font-size: 1.2em; font-weight: bold; color:#999; }

Vamos con las otras etiquetas de párrafo como citas, código en bloque y listas.

blockquote { margin: 16px 8px; } pre { background: #EEE; overflow: auto; } article ul { padding: 0 0 0 2em; list-style: disc; li { padding: 4px 0; } }

Ahora seguimos con las etiquetas de texto

strong { font-weight: bold; } em { font-style: italic; } a { color:$accent-color; text-decoration: none; &:hover { text-decoration: underline; } } code { background: #EEE; font-family: Monaco, monospace; }

Recordemos que $accent-color se refiere al color rosa magenta que usaré como color "corporativo".

Finalmente nos queda por definir una etiqueta: <img>. Con este CSS nos aseguramos de que la imagen nunca sobresale del post.

img { max-width: 100%; }

La característica de este CSS es su sencillez, puesto que lo único que variará de una resolución a otra serán los márgenes y ancho.

Este es el CSS de .post para todas las resoluciones:

#global-main { .post { padding: 0 8px; } } @media all and (min-width:240px) {#global-main { .post { padding: 0 16px; } }

Y esta es la pequeña modificación que hemos de hacer para anchos superiores a 400 en cuanto al contenedor #global-main. Como veis, es similar a #global-header

@media all and (min-width:400px) {#global-main { margin:0 auto; max-width: 600px; }} @media all and (min-width:1024px) {#global-main { width: 100%; max-width: none; text-align: right; }}

Donde hay algo más que hacer es en la última parte, en resoluciones superiores a los 1024px, en las que los tags aparecen a un lateral del post.

Aquí tenemos el código.

.post-title { @include pie-clearfix; h1 { float: right; width: 600px; text-align: left; } } .post-tags { clear: both; display: inline-block; vertical-align: top; padding: 0 8px 0 0; ul li { display: block; font-size: 1.4em; font-style: italic; padding: 0 0 4px 0; a { color:#D6D6D6; } } } .post-body { display: inline-block; width: 600px; text-align: left; vertical-align: top; }

Resoluciones entre 400px y 1024px

El menú debe ocupar como máximo 600px de ancho y estar centrado.

@media all and (min-width:400px) {#global-header { margin:0 auto; max-width: 600px;

Por otro lado, modificamos detalles del estilo: la ausencia de sombra, el fondo blanco y el tamaño del logo.

background: none; #global-header-header { @include box-shadow(none); } #global-logo { max-height:40px; img { height:40px; } }

Ahora tenemos que ocuparnos del menú como tal que es bastante diferente.

En primer lugar, el margen (16px no son de cada menú, sino del conjunto)

#global-nav { padding: 0 16px; }

Después, los elementos de una lista son consecutivos con la otra, así que ambas tendrán esta propiedad

#global-nav ul { display: inline; }

Por último, modificamos las propiedades de los elementos

#global-nav li { display: inline-block; height: auto; a { height: auto; padding: 4px 4px 4px 0; &:hover { background: none; text-decoration: underline; } } } #global-nav-general { padding: 0 2px 0 0; float:none; width: auto; display:inline; } #global-nav-projects { padding: 0 0 0 2px; float:none; width: auto; display: inline; }

Resoluciones mayores de 1024px

En estas resoluciones, la principal diferencia es que el menú se divide en dos: una parte derecha (con los proyectos) que ocupa exactamente 600px, y una parte izquierda.

Procedemos así

@media all and (min-width:1024px) {#global-header { width: 100%; max-width: none; text-align: right; #global-logo { float: right; padding: 8px 16px 0 0; max-height:48px; img { height:48px; } } #global-nav-general { display: inline-block; } #global-nav-projects { width: 600px; text-align: left; display: inline-block; } }}

Nada más.