Pixels must! align 🐺

Remove rounded, keep consistent design
main
Raymond Wanyoike 2016-12-01 02:47:09 +03:00
parent b2ab9b8041
commit a00eaab125
4 changed files with 46 additions and 32 deletions

View File

@ -4,17 +4,22 @@
text-shadow: none; text-shadow: none;
} }
body {
background-color: #f5f5f5;
}
a { a {
color: #333; color: #333;
} }
a:focus, a:focus,
a:hover { a:hover {
color: #0085a1 color: #0085a1;
}
blockquote {
color: #818a91;
font-style: italic;
}
hr {
margin: 1.5rem 0;
} }
/* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */
@ -23,9 +28,14 @@ a:hover {
max-width: 960px; max-width: 960px;
} }
.header,
.footer {
background-color: #f5f5f5;
padding: 1.5rem 0 .5rem;
}
.header { .header {
border-bottom: 1px solid rgba(0,0,0,.1); border-bottom: 1px solid rgba(0,0,0,.1);
padding-top: 1rem;
} }
.header img { .header img {
@ -33,7 +43,6 @@ a:hover {
} }
.header .title { .header .title {
font-size: 3rem;
font-weight: bold; font-weight: bold;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -50,13 +59,11 @@ a:hover {
} }
.main { .main {
background-color: #fff; padding: 1.5rem 0;
padding: 2rem 0;
} }
.footer { .footer {
border-top: 1px solid rgba(0,0,0,.1); border-top: 1px solid rgba(0,0,0,.1);
padding-top: 1rem;
} }
.highlight pre { .highlight pre {
@ -86,14 +93,25 @@ a:hover {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.article .content p { .article header li:not(:last-child) {
margin: 1.5rem 0; margin-right: 10px;
} }
.article .content a { .article .content a {
text-decoration: underline text-decoration: underline
} }
/* Pad article content */
.article .content p {
margin: 1.5rem 0;
}
@media (min-width: 576px) {
.header .title {
font-size: 3rem;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
.header, .header,
.footer { .footer {
@ -105,6 +123,6 @@ a:hover {
} }
.teaser header li:not(:last-child) { .teaser header li:not(:last-child) {
margin-right: 5px; margin-right: 10px;
} }
} }

View File

@ -21,22 +21,11 @@
<i class="fa fa-clock-o"></i> <i class="fa fa-clock-o"></i>
{{ article.locale_date }} {{ article.locale_date }}
</li> </li>
<li class="list-inline-item text-muted">&middot;</li>
<li class="list-inline-item"> <li class="list-inline-item">
<i class="fa fa-folder-open-o"></i> <i class="fa fa-folder-open-o"></i>
<a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a> <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
</li> </li>
{% if article.tags %}
<li class="list-inline-item text-muted">&middot;</li>
<li class="list-inline-item">
<i class="fa fa-files-o"></i>
{% for tag in article.tags %}
<a href="{{ SITEURL }}/{{ tag.url }}">#{{ tag }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
</li>
{% endif %}
{% if not HIDE_AUTHORS and article.authors %} {% if not HIDE_AUTHORS and article.authors %}
<li class="list-inline-item text-muted">&middot;</li>
<li class="list-inline-item"> <li class="list-inline-item">
<i class="fa fa-user-o"></i> <i class="fa fa-user-o"></i>
{% for author in article.authors %} {% for author in article.authors %}
@ -44,6 +33,14 @@
{% endfor %} {% endfor %}
</li> </li>
{% endif %} {% endif %}
{% if article.tags %}
<li class="list-inline-item">
<i class="fa fa-files-o"></i>
{% for tag in article.tags %}
<a href="{{ SITEURL }}/{{ tag.url }}">#{{ tag }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
</li>
{% endif %}
</ul> </ul>
</header> </header>
<div class="content"> <div class="content">

View File

@ -2,9 +2,11 @@
<html lang="{{ DEFAULT_LANG }}"> <html lang="{{ DEFAULT_LANG }}">
<head> <head>
<!-- Required meta tags always come first -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{% block title %}| {{ SITENAME }}{% endblock %}</title> <title>{% block title %}| {{ SITENAME }}{% endblock %}</title>
<link rel="canonical" href="{{ SITEURL }}/{{ output_file }}"> <link rel="canonical" href="{{ SITEURL }}/{{ output_file }}">
@ -57,17 +59,16 @@
{% if SITEIMAGE %} {% if SITEIMAGE %}
<div class="col-sm-4"> <div class="col-sm-4">
<a href="{{ SITEURL }}"> <a href="{{ SITEURL }}">
<img class="img-fluid rounded" src={{ SITEURL }}{{ SITEIMAGE }} alt="{{ SITENAME }}"> <img class="img-fluid" src={{ SITEURL }}{{ SITEIMAGE }} alt="{{ SITENAME }}">
</a> </a>
</div> </div>
{% endif %} {% endif %}
<div class="col-sm-{% if SITEIMAGE %}8{% else %}12{% endif %}"> <div class="col-sm-{% if SITEIMAGE %}8{% else %}12{% endif %}">
<h1 class="title"><a href="{{ SITEURL }}">{{ SITENAME }}</a></h1> <h1 class="title"><a href="{{ SITEURL }}">{{ SITENAME }}</a></h1>
{% if SITESUBTITLE %} {% if SITESUBTITLE %}
<p>{{ SITESUBTITLE }}</p> <p class="text-muted">{{ SITESUBTITLE }}</p>
{% endif %} {% endif %}
{% if LINKS or (DISPLAY_PAGES_ON_MENU and PAGES) or ICONS %} {% if LINKS or (DISPLAY_PAGES_ON_MENU and PAGES) or ICONS %}
<hr>
<ul class="list-inline"> <ul class="list-inline">
{% for title, link in LINKS %} {% for title, link in LINKS %}
<li class="list-inline-item"><a href="{{ link }}" target="_blank">{{ title }}</a></li> <li class="list-inline-item"><a href="{{ link }}" target="_blank">{{ title }}</a></li>
@ -84,7 +85,7 @@
{% if (LINKS or (DISPLAY_PAGES_ON_MENU and PAGES)) and loop.first %} {% if (LINKS or (DISPLAY_PAGES_ON_MENU and PAGES)) and loop.first %}
<li class=" list-inline-item text-muted">|</li> <li class=" list-inline-item text-muted">|</li>
{% endif %} {% endif %}
<li class="list-inline-item"><a class="fa fa-lg fa-{{ icon }}" href="{{ link }}" target="_blank"></a></li> <li class="list-inline-item"><a class="fa fa-{{ icon }}" href="{{ link }}" target="_blank"></a></li>
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}
@ -115,7 +116,7 @@
{% endif %} {% endif %}
</ul> </ul>
<p class="col-sm-6 text-sm-right text-muted"> <p class="col-sm-6 text-sm-right text-muted">
Generated by <a href="https://github.com/getpelican/pelican" target="_blank">Pelican</a> using <a href="https://github.com/rwanyoike/pelican-alchemy" target="_blank">&#x2728; alchemy</a> Generated by <a href="https://github.com/getpelican/pelican" target="_blank">Pelican</a> / <a href="https://github.com/rwanyoike/pelican-alchemy" target="_blank">&#x2728;</a>
</p> </p>
</div> </div>
</div> </div>

View File

@ -12,7 +12,7 @@
{% endblock %} {% endblock %}
{% block page_header %} {% block page_header %}
All Articles Articles
{% endblock %} {% endblock %}
{% block content %} {% block content %}
@ -24,13 +24,11 @@ All Articles
<i class="fa fa-clock-o"></i> <i class="fa fa-clock-o"></i>
{{ article.locale_date }} {{ article.locale_date }}
</li> </li>
<li class="list-inline-item hidden-sm-up text-muted">&middot;</li>
<li> <li>
<i class="fa fa-folder-open-o"></i> <i class="fa fa-folder-open-o"></i>
<a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a> <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
</li> </li>
{% if not HIDE_AUTHORS and article.authors %} {% if not HIDE_AUTHORS and article.authors %}
<li class="list-inline-item hidden-sm-up text-muted">&middot;</li>
<li> <li>
<i class="fa fa-user-o"></i> <i class="fa fa-user-o"></i>
{% for author in article.authors %} {% for author in article.authors %}