Blog Layout
This commit is contained in:
Karol Orzeł
parent
52c7b50652
commit
cbd1970a81
11 changed files with 191 additions and 72 deletions
|
|
@ -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 {
|
||||
.tags {
|
||||
background-color: rgba(101, 97, 97, 0.1);
|
||||
padding: 0.7rem 1rem;
|
||||
margin-bottom: 0.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; }
|
||||
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; }
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
text-align: center;
|
||||
margin-right: 0.8rem;
|
||||
a {
|
||||
@extend .default-animation;
|
||||
color: $black;
|
||||
display: block;
|
||||
margin-top: 0.1rem;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
{% 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">
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
<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 %}
|
||||
|
|
|
|||
|
|
@ -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
12
templates/partials/taxonomylist.html.twig
Normal 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 %}
|
||||
Loading…
Reference in a new issue