libretic
/
grav-theme-libretic
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Blog Layout

This commit is contained in:
Karol Orzeł 2015-01-22 13:28:29 +01:00
parent 52c7b50652
commit cbd1970a81
11 changed files with 191 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
css-compiled/template.css
View File

@ -68,7 +68,7 @@ b, strong, label, th {
src: url("./fonts/Novecentosanswide-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/Novecentosanswide-Medium-webfont.woff2") format("woff2"), url("./fonts/Novecentosanswide-Medium-webfont.woff") format("woff"), url("./fonts/Novecentosanswide-Medium-webfont.ttf") format("truetype"), url("./fonts/Novecentosanswide-Medium-webfont.svg#novecento_sans_widemedium") format("svg");
font-weight: normal;
font-style: normal; }
.default-animation, #body, .modular .showcase .button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .modular .bottom .button, .callout .notebook .screen .screen-content-hover, .logo h3, .logo ul.social-icons li {
.default-animation, #body, .modular .showcase .button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .modular .bottom .button, .callout .notebook .screen .screen-content-hover, .logo h3, .logo ul.social-icons li, .logo ul.social-icons li a {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease; }
@ -564,17 +564,39 @@ td {
#panel .navigation li ul li.active > a {
background: #ccc; }
.blogstyling #body {
padding-top: 12rem; }
.blogstyling #header {
color: #656161; }
.blogstyling #header a {
color: #656161; }
.blogstyling #header .search-box i {
color: #656161; }
.blogstyling #header .search-box input[type=search]:focus {
background-color: rgba(101, 97, 97, 0.2); }
.blogstyling #header li.active a {
color: #87b672; }
.blogstyling #header .logo ul.social-icons li {
background: rgba(101, 97, 97, 0.2); }
.blogstyling #header .logo ul.social-icons li .fa {
color: white; }
.blogstyling #header .logo ul.social-icons li:hover .fa {
color: #656161; }
.blog-header {
padding-top: 2rem;
padding-bottom: 2rem; }
padding-top: 1rem !important;
padding-bottom: 1rem;
margin-top: 0 !important; }
.blog-header.blog-header-image {
background-size: cover;
background-position: center; }
background-size: cover !important; }
.blog-header.blog-header-image h1, .blog-header.blog-header-image h2 {
color: #FFFFFF; }
color: #FFFFFF;
text-align: left; }
.blog-header h1 {
font-size: 4rem;
margin-top: 0; }
font-size: 2.5rem;
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.blog-header h1 {
font-size: 3rem; } }
@ -594,6 +616,7 @@ td {
.list-item .list-blog-header {
position: relative; }
.list-item .list-blog-header h4 {
text-align: left;
margin-bottom: 0.5rem; }
.list-item .list-blog-header h4 a {
color: #9A9898; }
@ -604,30 +627,30 @@ td {
margin-top: 1rem;
border-radius: 0; }
.list-item .list-blog-date {
float: right;
text-align: center; }
text-align: center;
background-color: rgba(101, 97, 97, 0.1);
padding: 0.7rem 1rem;
margin-bottom: 0.2rem;
margin-right: 0.5rem; }
.list-item .list-blog-date span {
display: block;
font-size: 1.75rem;
font-weight: 600;
line-height: 110%; }
.list-item .list-blog-date em {
display: block;
border-top: 1px solid #EEEEEE;
font-style: normal;
text-transform: uppercase; }
font-size: 1rem;
text-transform: uppercase;
color: #9A9898;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
.blog-content-item .list-blog-padding > p:nth-child(2) {
font-size: 1.2rem; }
.tags a {
display: inline-block;
font-size: 0.8rem;
border: 1px solid #87b672;
border-radius: 0;
padding: 0.1rem 0.4rem;
margin-bottom: 0.2rem;
text-transform: uppercase; }
.tags {
background-color: rgba(101, 97, 97, 0.1);
padding: 0.7rem 1rem;
margin-bottom: 0.2rem; }
.tags a {
display: inline-block;
font-size: 1rem;
text-transform: uppercase;
color: #9A9898;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
.archives, .related-pages {
padding: 0;
@ -663,7 +686,8 @@ div#breadcrumbs {
#sidebar .sidebar-content {
margin-bottom: 3rem; }
#sidebar .sidebar-content h4 {
margin-bottom: 1rem; }
margin-bottom: 1rem;
text-align: left; }
#sidebar .sidebar-content p, #sidebar .sidebar-content ul {
margin-top: 1rem; }

2
css-compiled/template.css.map
View File

File diff suppressed because one or more lines are too long

79
scss/template/_blog.scss
View File

@ -1,21 +1,59 @@
.blogstyling {
#body {
padding-top: 12rem;
}
#header {
color: $light-gray;
a {
color: $light-gray;
}
.search-box {
i {
color: $light-gray;
}
input[type=search] {
&:focus {
background-color: transparentize($light-gray, 0.8);
}
}
}
li.active a {
color: $core-accent;
}
.logo ul.social-icons li {
background: transparentize($light-gray, 0.8);
.fa {
color: white;
}
&:hover {
.fa {
color: $light-gray;
}
}
}
}
}
.blog-header {
padding-top: 2rem;
padding-bottom: 2rem;
padding-top: 1rem !important;
padding-bottom: 1rem;
margin-top: 0 !important;
&.blog-header-image {
background-size: cover;
background-position: center;
background-size: cover !important;
h1, h2 {
color: $header-text;
text-align: left;
}
}
h1 {
font-size: 4rem;
font-size: 2.5rem;
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
@include breakpoint(tablet-range) {
font-size: 3rem;
}
@ -44,7 +82,7 @@
.list-blog-header {
position: relative;
h4 {
text-align: left;
margin-bottom: 0.5rem;
a {
color: $core-text;
@ -62,19 +100,16 @@
}
.list-blog-date {
float: right;
text-align: center;
background-color: transparentize($light-gray, 0.9);
padding: 0.7rem 1rem;
margin-bottom: 0.2rem;
margin-right: 0.5rem;
span {
display: block;
font-size: 1.75rem;
font-weight: $font-weight-bold;
line-height: 110%;
}
em {
display: block;
border-top: 1px solid $border-color;
font-style: normal;
font-size: $core-font-size;
text-transform: uppercase;
color: $core-text;
font-family: $font-family-header;
}
}
}
@ -88,14 +123,15 @@
// Tags
.tags {
background-color: transparentize($light-gray, 0.9);
padding: 0.7rem 1rem;
margin-bottom: 0.2rem;
a {
display: inline-block;
font-size: $core-font-size - 0.2rem;
border: 1px solid $core-accent;
border-radius: $border-radius;
padding: 0.1rem 0.4rem;
margin-bottom: 0.2rem;
font-size: $core-font-size;
text-transform: uppercase;
color: $core-text;
font-family: $font-family-header;
}
}
@ -150,6 +186,7 @@ div#breadcrumbs {
.sidebar-content {
h4 {
margin-bottom: 1rem;
text-align: left;
}
p, ul {
margin-top: 1rem;

1
scss/template/modular/_all.scss
View File

@ -38,6 +38,7 @@
text-align: center;
margin-right: 0.8rem;
a {
@extend .default-animation;
color: $black;
display: block;
margin-top: 0.1rem;

14
templates/blog.html.twig
View File

@ -13,10 +13,10 @@
{% endif %}
{% block content %}
{% set blog_image = page.media.images|first.grayscale().contrast(20).brightness(-100).colorize(-35,81,122) %}
{% set blog_image = page.media.images|first %}
{% if blog_image %}
<div class="flush-top blog-header blog-header-image" style="background-image: url({{ blog_image.url }});">
<div class="flush-top blog-header blog-header-image" style="background: {{ page.header.bg_color }} url({{ blog_image.url }}) no-repeat right;">
{% else %}
<div class="blog-header">
{% endif %}
@ -24,11 +24,11 @@
</div>
{% if config.plugins.breadcrumbs.enabled %}
{% include 'breadcrumbs.html.twig' %}
{% include 'partials/breadcrumbs.html.twig' %}
{% endif %}
<div class="content-wrapper blog-content-list grid pure-g-r">
<div id="listing" class="block pure-u-2-3">
<div class="content-wrapper blog-content-list g-grid pure-g-r">
<div id="listing" class="g-block pure-u-2-3">
{% for child in collection %}
{% include 'partials/blog_item.html.twig' with {'page':child, 'truncate':true} %}
{% endfor %}
@ -37,7 +37,7 @@
{% include 'pagination.html.twig' with {'pagination':collection.params.pagination} %}
{% endif %}
</div>
<div id="sidebar" class="block size-1-3 pure-u-1-3">
<div id="sidebar" class="g-block size-1-3 pure-u-1-3">
{% include 'partials/sidebar.html.twig' %}
</div>
</div>

4
templates/item.html.twig
View File

@ -10,9 +10,9 @@
{% if base_url == base_url_relative %}
{% set feed_url = base_url~'/'~page.parent.slug %}
{% endif %}
{% block content %}
{% include 'breadcrumbs.html.twig' %}
{% include 'partials/breadcrumbs.html.twig' %}
<div class="blog-content-item grid pure-g-r">
<div id="item" class="block pure-u-2-3">

51
templates/modular.html.twig
View File

@ -26,9 +26,56 @@
{% endif %}
{% endblock %}
{% block header_navigation %}
{% if show_onpage_menu %}
<ul class="navigation">
{% macro loop(page) %}
{% for p in page.children %}
{% if p.visible %}
{% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
<li class="{{ current_page }}">
<a href="{{ p.url }}" class="external">
{% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
{{ p.menu }}
</a>
{% if p.children.count > 0 %}
<ul>
{{ _self.loop(p) }}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
{% endmacro %}
{% if config.themes.deliver.dropdown.enabled %}
{{ _self.loop(pages) }}
{% else %}
{% for page in pages.children %}
{% if page.visible %}
{% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
<li class="{{ current_page }}">
<a href="{{ page.url }}" class="external">
{% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}
{{ page.menu }}
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% for mitem in site.menu %}
<li>
<a href="{{ mitem.url }}">
{% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
{{ mitem.text }}
</a>
</li>
{% endfor %}
{% for module in page.collection() %}
{% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
<li class="{{ current_module }}"><a href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>
@ -38,10 +85,6 @@
{% else %}
{{ parent() }}
{% endif %}
{% include 'partials/search.html.twig' %}
{% endblock %}
{% block content %}

3
templates/partials/base.html.twig
View File

@ -41,7 +41,6 @@
<div id="sb-site">
{% block header %}
<header id="header">
<div class="logo">
<h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ config.site.title }}</a></h3>
{% block social %}
@ -53,8 +52,8 @@
{% block header_navigation %}
{% include 'partials/navigation.html.twig' %}
{% endblock %}
{% include 'partials/search.html.twig' %}
</div>
</header>
{% endblock %}

15
templates/partials/blog_item.html.twig
View File

@ -1,10 +1,6 @@
<div class="list-item">
<div class="list-blog-header">
<span class="list-blog-date">
<span>{{ page.date|date("d") }}</span>
<em>{{ page.date|date("M") }}</em>
</span>
{% if page.header.link %}
<h4>
{% if page.header.continue_link is not sameas(false) %}
@ -16,13 +12,20 @@
<h4><a href="{{ page.url }}">{{ page.title }}</a></h4>
{% endif %}
{% if page.taxonomy.tag %}
<span class="list-blog-date">
<i class="fa fa-calendar"></i>
{{ page.date|date("d") }}, {{ page.date|date("M") }}
</span>
{% if page.taxonomy.tag %}
<span class="tags">
<i class="fa fa-tag"></i>
{% for tag in page.taxonomy.tag %}
<a href="{{ base_url }}/tag:{{ tag }}">{{ tag }}</a>
<a href="{{ base_url }}/tag:{{ tag }}">{{ tag }}</a>,
{% endfor %}
</span>
{% endif %}
{% if big_header %}
{{ page.media.images|first.cropResize(900,600).html }}
{% else %}

2
templates/partials/sidebar.html.twig
View File

@ -21,7 +21,7 @@
{% if config.plugins.taxonomylist.enabled %}
<div class="sidebar-content">
<h4>Popular Tags</h4>
{% include 'taxonomylist.html.twig' with {'taxonomy':'tag'} %}
{% include 'partials/taxonomylist.html.twig' with {'taxonomy':'tag'} %}
</div>
{% endif %}
{% if config.plugins.archives.enabled %}

12
templates/partials/taxonomylist.html.twig Normal file
View File

@ -0,0 +1,12 @@
{% set taxlist = taxonomylist.get() %}
{% if taxlist %}
<span class="tags">
{% for tax,value in taxlist[taxonomy] %}
<a href="{{ base_url }}/tag:{{ tax|e('url') }}">{{ tax }}</a>
{% endfor %}
</span>
{% endif %}