Fix template.

This commit is contained in:
Alexandre Vicenzi 2015-07-22 23:02:15 -03:00
parent 70d6ab6aec
commit 2adc599df7
9 changed files with 115 additions and 75 deletions

View file

@ -69,7 +69,7 @@ aside a:hover {
color: #eeeeee; color: #eeeeee;
} }
aside div { aside div {
padding: 18px; padding: 20px;
margin: 0; margin: 0;
} }
aside div img { aside div img {
@ -84,7 +84,6 @@ aside div p {
font-size: .92em; font-size: .92em;
} }
aside nav ul li { aside nav ul li {
padding: 0 8px 0 8px;
display: inline; display: inline;
line-height: 1.6em; line-height: 1.6em;
font-size: 1.28em; font-size: 1.28em;
@ -142,11 +141,13 @@ main article blockquote {
} }
main article pre { main article pre {
padding: 4px; padding: 4px;
overflow-x: auto;
font-size: .9em; font-size: .9em;
overflow-x: auto;
} }
main article samp { main article samp {
white-space: pre; white-space: pre;
display: block;
overflow-x: auto;
} }
main article kbd { main article kbd {
padding: .1em .6em; padding: .1em .6em;
@ -162,7 +163,7 @@ main article kbd {
} }
main article code { main article code {
font-size: .8em; font-size: .8em;
white-space: normal; white-space: nowrap;
color: #c25; color: #c25;
padding: 1px 3px; padding: 1px 3px;
background-color: #f7f7f9; background-color: #f7f7f9;
@ -197,30 +198,6 @@ main footer p {
color: #999999; color: #999999;
font-size: 11px; font-size: 11px;
} }
@media screen and (min-width: 768px) {
aside {
width: 25%;
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
}
aside div {
padding: 36px 18px;
}
aside nav ul li {
display: block;
}
main {
width: 75%;
position: absolute;
top: 0;
left: 25%;
overflow-x: hidden;
overflow-y: hidden;
}
}
.tag-cloud a { .tag-cloud a {
background-color: #d9411e; background-color: #d9411e;
padding: .2em .6em .2em; padding: .2em .6em .2em;
@ -261,9 +238,15 @@ ul.social {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
ul.list {
padding: 1em 0 1em 0;
}
ul.list li {
padding: 4px;
}
ul.social { ul.social {
padding-top: 32px; font-size: 1.6em;
font-size: 1.8em; padding-top: 20px;
} }
ul.social li { ul.social li {
display: inline; display: inline;
@ -310,3 +293,34 @@ ul.social a.sc-github-alt {
ul.social a.sc-email { ul.social a.sc-email {
background-color: #578AD6; background-color: #578AD6;
} }
@media screen and (min-width: 768px) {
aside {
width: 25%;
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
}
aside div {
padding: 36px 18px;
}
aside div nav ul li {
padding: 0 !important;
display: block;
}
aside div ul.social {
padding-top: 32px;
}
main {
width: 75%;
position: absolute;
top: 0;
left: 25%;
overflow-x: hidden;
overflow-y: hidden;
}
main article ul.list li {
padding: 2px;
}
}

View file

@ -93,7 +93,7 @@ aside {
} }
div { div {
padding: 18px; padding: 20px;
margin: 0; margin: 0;
img { img {
@ -114,7 +114,6 @@ aside {
nav { nav {
ul { ul {
li { li {
padding: 0 8px 0 8px;
display: inline; display: inline;
line-height: 1.6em; line-height: 1.6em;
font-size: 1.28em; font-size: 1.28em;
@ -186,12 +185,14 @@ main {
pre { pre {
padding: 4px; padding: 4px;
overflow-x: auto;
font-size: .9em; font-size: .9em;
overflow-x: auto;
} }
samp { samp {
white-space: pre; white-space: pre;
display: block;
overflow-x: auto;
} }
kbd { kbd {
@ -209,7 +210,7 @@ main {
code { code {
font-size: .8em; font-size: .8em;
white-space: normal; white-space: nowrap;
color: #c25; color: #c25;
padding: 1px 3px; padding: 1px 3px;
background-color: #f7f7f9; background-color: #f7f7f9;
@ -252,38 +253,6 @@ main {
} }
} }
@media screen and (min-width: 768px) {
aside {
width: 25%;
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
div {
padding: 36px 18px;
}
nav {
ul {
li {
display: block;
}
}
}
}
main {
width: 75%;
position: absolute;
top: 0;
left: 25%;
overflow-x: hidden;
overflow-y: hidden;
}
}
.tag-cloud { .tag-cloud {
a { a {
background-color: @orange; background-color: @orange;
@ -332,9 +301,17 @@ ul.list, ul.social {
padding: 0; padding: 0;
} }
ul.list {
padding: 1em 0 1em 0;
li {
padding: 4px;
}
}
ul.social { ul.social {
padding-top: 32px; font-size: 1.6em;
font-size: 1.8em; padding-top: 20px;
li { li {
display: inline; display: inline;
@ -392,3 +369,52 @@ ul.social {
background-color: #578AD6; background-color: #578AD6;
} }
} }
//
// Desktop
//
@media screen and (min-width: 768px) {
aside {
width: 25%;
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
div {
padding: 36px 18px;
nav {
ul {
li {
padding: 0 !important;
display: block;
}
}
}
ul.social {
padding-top: 32px;
}
}
}
main {
width: 75%;
position: absolute;
top: 0;
left: 25%;
overflow-x: hidden;
overflow-y: hidden;
article {
ul.list {
li {
padding: 2px;
}
}
}
}
}

View file

@ -1 +1 @@
aside,main nav{text-align:center}body,html{width:100%;height:100%}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.1}h1{font-size:2.4em}h2{font-size:2em}h3{font-size:1.6em}h4{font-size:1.36em}h5{font-size:1.2em}h6{font-size:1.1em}body{margin:0;padding:0;background-color:#fff;color:#242121;font-family:'Source Sans Pro',sans-serif;font-size:1.02em;line-height:1.2em}a{color:#d9411e;text-decoration:none}a:hover{color:#ff5a09}hr{color:#eee;background-color:#eee;height:1px;border:none;margin-top:40px;margin-bottom:40px}aside,aside a{color:#fff}img{max-width:100%}aside{background-color:#333}aside a:hover{color:#eee}aside div{padding:18px;margin:0}aside div img{border-radius:50%;max-width:140px}aside div h1{margin:15px 0 5px}aside div p{margin:0 0 15px;font-size:.92em}aside nav ul li{padding:0 8px;display:inline;line-height:1.6em;font-size:1.28em;text-transform:lowercase}main nav{text-transform:uppercase;font-size:.72em;padding:14px 0;border-bottom:#eee 1px solid}main nav a{padding:0 4px;border-right:#eee 1px solid}main nav :first-child{border-left:#eee 1px solid}main .pagination{margin:4% 8% 2%}main .social-share p{font-size:.8em}main article{margin:0 8% 2%}main article header h1,main article header h2{margin-bottom:0}main article header p{color:#999;font-size:.82em}main article code,main article kbd,main article pre,main article samp{font-family:'Source Code Pro',monospace}main article blockquote,main article pre{background-color:rgba(128,128,128,.05);border-top-right-radius:5px;border-bottom-right-radius:5px;border-left:8px solid rgba(128,128,128,.075);border-left-width:10px}main article blockquote{padding:10px 20px;font-weight:300;font-size:1.1em}main article pre{padding:4px;overflow-x:auto;font-size:.9em}main article samp{white-space:pre}main article kbd{padding:.1em .6em;border:1px solid rgba(63,63,63,.25);box-shadow:0 1px 0 rgba(63,63,63,.25);background-color:#fff;color:#333;border-radius:3px;display:inline-block;margin:0 .1em;white-space:nowrap;font-size:.78em}main article code{font-size:.8em;white-space:normal;color:#c25;padding:1px 3px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:3px}main article .comment-count{font-size:.8em}main article table{border-collapse:collapse;border-spacing:0}main article table thead:first-child tr:first-child th{border-top:0}main article table td,main article table th{padding:8px;line-height:20px;vertical-align:top;border-top:1px solid #ddd}main footer{padding-top:4px;border-top:#eee 1px solid}main footer p{margin:2px;text-align:center;padding:0 40px;color:#999;font-size:11px}.tag-cloud a,a.btn{text-align:center;line-height:1;color:#fff;white-space:nowrap;vertical-align:baseline;border-radius:.25em}@media screen and (min-width:768px){aside{width:25%;height:100%;position:fixed;top:0;left:0;overflow-y:auto}aside div{padding:36px 18px}aside nav ul li{display:block}main{width:75%;position:absolute;top:0;left:25%;overflow-x:hidden;overflow-y:hidden}}.tag-cloud a{background-color:#d9411e;padding:.2em .6em;font-size:.74em}.tag-cloud a:hover{background-color:#ff5a09}a.btn{background-color:#d9411e;padding:.4em .6em;font-size:.9em}a.btn:hover{background-color:#ff5a09}.center{text-align:center}.float-right{float:right}ul.list,ul.social{list-style-type:none;margin:0;padding:0}ul.social{padding-top:32px;font-size:1.8em}ul.social li{display:inline}ul.social a:hover{z-index:2;-webkit-transform:translateY(-5px);transform:translateY(-5px)}ul.social a{display:inline-block;width:36px;height:36px;border-radius:100%;text-align:center;font-size:.8em;line-height:36px}ul.social a.sc-facebook{background-color:#3e5b98}ul.social a.sc-google{background-color:#d93e2d}ul.social a.sc-pinterest{background-color:#c92619}ul.social a.sc-linkedin{background-color:#3371b7}ul.social a.sc-rss{background-color:#f26109}ul.social a.sc-twitter{background-color:#4da7de}ul.social a.sc-youtube{background-color:#e02a20}ul.social a.sc-github,ul.social a.sc-github-alt{background-color:#111010}ul.social a.sc-email{background-color:#578AD6} aside,main nav{text-align:center}body,html{width:100%;height:100%}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.1}h1{font-size:2.4em}h2{font-size:2em}h3{font-size:1.6em}h4{font-size:1.36em}h5{font-size:1.2em}h6{font-size:1.1em}body{margin:0;padding:0;background-color:#fff;color:#242121;font-family:'Source Sans Pro',sans-serif;font-size:1.02em;line-height:1.2em}a{color:#d9411e;text-decoration:none}a:hover{color:#ff5a09}hr{color:#eee;background-color:#eee;height:1px;border:none;margin-top:40px;margin-bottom:40px}aside,aside a{color:#fff}img{max-width:100%}aside{background-color:#333}aside a:hover{color:#eee}aside div{padding:20px;margin:0}aside div img{border-radius:50%;max-width:140px}aside div h1{margin:15px 0 5px}aside div p{margin:0 0 15px;font-size:.92em}aside nav ul li{display:inline;line-height:1.6em;font-size:1.28em;text-transform:lowercase}main nav{text-transform:uppercase;font-size:.72em;padding:14px 0;border-bottom:#eee 1px solid}main nav a{padding:0 4px;border-right:#eee 1px solid}main nav :first-child{border-left:#eee 1px solid}main .pagination{margin:4% 8% 2%}main .social-share p{font-size:.8em}main article{margin:0 8% 2%}main article header h1,main article header h2{margin-bottom:0}main article header p{color:#999;font-size:.82em}main article code,main article kbd,main article pre,main article samp{font-family:'Source Code Pro',monospace}main article blockquote,main article pre{background-color:rgba(128,128,128,.05);border-top-right-radius:5px;border-bottom-right-radius:5px;border-left:8px solid rgba(128,128,128,.075);border-left-width:10px}main article blockquote{padding:10px 20px;font-weight:300;font-size:1.1em}main article pre{padding:4px;font-size:.9em;overflow-x:auto}main article samp{white-space:pre;display:block;overflow-x:auto}main article kbd{padding:.1em .6em;border:1px solid rgba(63,63,63,.25);box-shadow:0 1px 0 rgba(63,63,63,.25);background-color:#fff;color:#333;border-radius:3px;display:inline-block;margin:0 .1em;white-space:nowrap;font-size:.78em}main article code{font-size:.8em;white-space:nowrap;color:#c25;padding:1px 3px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:3px}main article .comment-count{font-size:.8em}main article table{border-collapse:collapse;border-spacing:0}main article table thead:first-child tr:first-child th{border-top:0}main article table td,main article table th{padding:8px;line-height:20px;vertical-align:top;border-top:1px solid #ddd}main footer{padding-top:4px;border-top:#eee 1px solid}main footer p{margin:2px;text-align:center;padding:0 40px;color:#999;font-size:11px}.tag-cloud a,a.btn{text-align:center;line-height:1;color:#fff;white-space:nowrap;vertical-align:baseline;border-radius:.25em}.tag-cloud a{background-color:#d9411e;padding:.2em .6em;font-size:.74em}.tag-cloud a:hover{background-color:#ff5a09}a.btn{background-color:#d9411e;padding:.4em .6em;font-size:.9em}a.btn:hover{background-color:#ff5a09}.center{text-align:center}.float-right{float:right}ul.list,ul.social{list-style-type:none;margin:0;padding:0}ul.list{padding:1em 0}ul.list li{padding:4px}ul.social{font-size:1.6em;padding-top:20px}ul.social li{display:inline}ul.social a:hover{z-index:2;-webkit-transform:translateY(-5px);transform:translateY(-5px)}ul.social a{display:inline-block;width:36px;height:36px;border-radius:100%;text-align:center;font-size:.8em;line-height:36px}ul.social a.sc-facebook{background-color:#3e5b98}ul.social a.sc-google{background-color:#d93e2d}ul.social a.sc-pinterest{background-color:#c92619}ul.social a.sc-linkedin{background-color:#3371b7}ul.social a.sc-rss{background-color:#f26109}ul.social a.sc-twitter{background-color:#4da7de}ul.social a.sc-youtube{background-color:#e02a20}ul.social a.sc-github,ul.social a.sc-github-alt{background-color:#111010}ul.social a.sc-email{background-color:#578AD6}@media screen and (min-width:768px){aside{width:25%;height:100%;position:fixed;top:0;left:0;overflow-y:auto}aside div{padding:36px 18px}aside div nav ul li{padding:0!important;display:block}aside div ul.social{padding-top:32px}main{width:75%;position:absolute;top:0;left:25%;overflow-x:hidden;overflow-y:hidden}main article ul.list li{padding:2px}}

View file

@ -4,7 +4,7 @@
{% block content %} {% block content %}
<article> <article>
<header> <header>
<h2>Archives</h2> <h1>Archives</h1>
</header> </header>
<div> <div>
<dl> <dl>

View file

@ -4,7 +4,7 @@
{% block content %} {% block content %}
<article> <article>
<header> <header>
<h2>Authors</h2> <h1>Authors</h1>
</header> </header>
<div> <div>
<ul class="list"> <ul class="list">

View file

@ -46,7 +46,7 @@
<p>{{ SITESUBTITLE }}</p> <p>{{ SITESUBTITLE }}</p>
<nav> <nav>
<ul class="list"> <ul class="list">
{% for page in pages|sort %} {% for page in pages|sort(attribute='title') %}
<li><a href="{{ SITEURL }}/{{ page.url }}#{{ page.slug }}">{{ page.title }}</a></li> <li><a href="{{ SITEURL }}/{{ page.url }}#{{ page.slug }}">{{ page.title }}</a></li>
{% endfor %} {% endfor %}
{% for name, link in LINKS %} {% for name, link in LINKS %}

View file

@ -4,7 +4,7 @@
{% block content %} {% block content %}
<article> <article>
<header> <header>
<h2>Categories</h2> <h1>Categories</h1>
</header> </header>
<div> <div>
<ul class="list"> <ul class="list">

View file

@ -4,7 +4,7 @@
{% block content %} {% block content %}
<article> <article>
<header> <header>
<h2 id="{{ page.slug }}">{{ page.title }}</h2> <h1 id="{{ page.slug }}">{{ page.title }}</h1>
</header> </header>
<div> <div>
{{ page.content }} {{ page.content }}

View file

@ -4,7 +4,7 @@
{% block content %} {% block content %}
<article> <article>
<header> <header>
<h2>Tags</h2> <h1>Tags</h1>
</header> </header>
<div> <div>
<ul class="list"> <ul class="list">