improvement(blog): fix sidebar

Fix #4
This commit is contained in:
Kazhnuz 2020-03-09 20:56:59 +01:00
parent af41fef9d3
commit 35bda6258b
12 changed files with 85 additions and 86 deletions

View file

@ -117,31 +117,31 @@
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title">Archives</h3> <div class="card-header">Archives</div>
<div class="widget"> <div class="card-menu">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/03/">mars 2020</a></li></ul> <a class="menu-element-link" href="/blog/archives/2020/03/">mars 2020</a>
</div> </div>
</div> </div>
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title">Articles récents</h3> <div class="card-header">Articles récents</div>
<div class="widget"> <div class="card-menu">
<ul>
<li> <a class="menu-element" href="/blog/2020/03/08/hello-world/">
<a href="/blog/2020/03/08/hello-world/">Hello World</a> <span class="trim-that">Hello World</span>
</li> </a>
</ul>
</div> </div>
</div> </div>
</div> </div>

View file

@ -99,31 +99,31 @@
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title">Archives</h3> <div class="card-header">Archives</div>
<div class="widget"> <div class="card-menu">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/03/">mars 2020</a></li></ul> <a class="menu-element-link" href="/blog/archives/2020/03/">mars 2020</a>
</div> </div>
</div> </div>
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title">Articles récents</h3> <div class="card-header">Articles récents</div>
<div class="widget"> <div class="card-menu">
<ul>
<li> <a class="menu-element" href="/blog/2020/03/08/hello-world/">
<a href="/blog/2020/03/08/hello-world/">Hello World</a> <span class="trim-that">Hello World</span>
</li> </a>
</ul>
</div> </div>
</div> </div>
</div> </div>

View file

@ -99,31 +99,31 @@
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title">Archives</h3> <div class="card-header">Archives</div>
<div class="widget"> <div class="card-menu">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/03/">mars 2020</a></li></ul> <a class="menu-element-link" href="/blog/archives/2020/03/">mars 2020</a>
</div> </div>
</div> </div>
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title">Articles récents</h3> <div class="card-header">Articles récents</div>
<div class="widget"> <div class="card-menu">
<ul>
<li> <a class="menu-element" href="/blog/2020/03/08/hello-world/">
<a href="/blog/2020/03/08/hello-world/">Hello World</a> <span class="trim-that">Hello World</span>
</li> </a>
</ul>
</div> </div>
</div> </div>
</div> </div>

View file

@ -99,31 +99,31 @@
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title">Archives</h3> <div class="card-header">Archives</div>
<div class="widget"> <div class="card-menu">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/03/">mars 2020</a></li></ul> <a class="menu-element-link" href="/blog/archives/2020/03/">mars 2020</a>
</div> </div>
</div> </div>
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title">Articles récents</h3> <div class="card-header">Articles récents</div>
<div class="widget"> <div class="card-menu">
<ul>
<li> <a class="menu-element" href="/blog/2020/03/08/hello-world/">
<a href="/blog/2020/03/08/hello-world/">Hello World</a> <span class="trim-that">Hello World</span>
</li> </a>
</ul>
</div> </div>
</div> </div>
</div> </div>

24
dist/blog/index.html vendored
View file

@ -117,31 +117,31 @@
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title">Archives</h3> <div class="card-header">Archives</div>
<div class="widget"> <div class="card-menu">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/03/">mars 2020</a></li></ul> <a class="menu-element-link" href="/blog/archives/2020/03/">mars 2020</a>
</div> </div>
</div> </div>
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title">Articles récents</h3> <div class="card-header">Articles récents</div>
<div class="widget"> <div class="card-menu">
<ul>
<li> <a class="menu-element" href="/blog/2020/03/08/hello-world/">
<a href="/blog/2020/03/08/hello-world/">Hello World</a> <span class="trim-that">Hello World</span>
</li> </a>
</ul>
</div> </div>
</div> </div>
</div> </div>

4
dist/style.css vendored
View file

@ -880,7 +880,7 @@ ul.social {
.card-menu, .menu-menu { .card-menu, .menu-menu {
display: flex; display: flex;
flex-direction: column; } flex-direction: column; }
.card-menu .menu-element, .menu-menu .menu-element { .card-menu .menu-element, .card-menu .menu-element-link, .menu-menu .menu-element, .menu-menu .menu-element-link {
display: flex; display: flex;
line-height: 1.5rem; line-height: 1.5rem;
padding-right: 0.75rem; padding-right: 0.75rem;
@ -896,7 +896,7 @@ ul.social {
position: relative; position: relative;
z-index: 1; z-index: 1;
overflow: visible; } overflow: visible; }
.card-menu .menu-element:before, .menu-menu .menu-element:before { .card-menu .menu-element:before, .card-menu .menu-element-link:before, .menu-menu .menu-element:before, .menu-menu .menu-element-link:before {
content: " "; content: " ";
position: absolute; position: absolute;
top: 0; top: 0;

View file

@ -1,8 +1,9 @@
<% if (site.posts.length){ %> <% if (site.posts.length){ %>
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title"><%= __('archive_a') %></h3> <div class="card-header"><%= __('archive_a') %></div>
<div class="widget"> <div class="card-menu">
<%- list_archives({show_count: theme.show_count, type: theme.archive_type}) %> <%- list_archives({show_count: theme.show_count,
type: theme.archive_type, style:"flat", class:"menu-element"}) %>
</div> </div>
</div> </div>
<% } %> <% } %>

View file

@ -1,7 +1,7 @@
<% if (site.categories.length){ %> <% if (site.categories.length){ %>
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title"><%= __('categories') %></h3> <div class="card-header"><%= __('categories') %></div>
<div class="widget"> <div class="card-menu">
<%- list_categories({show_count: theme.show_count}) %> <%- list_categories({show_count: theme.show_count}) %>
</div> </div>
</div> </div>

View file

@ -1,14 +1,12 @@
<% if (site.posts.length){ %> <% if (site.posts.length){ %>
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title"><%= __('recent_posts') %></h3> <div class="card-header"><%= __('recent_posts') %></div>
<div class="widget"> <div class="card-menu">
<ul>
<% site.posts.sort('date', -1).limit(5).each(function(post){ %> <% site.posts.sort('date', -1).limit(5).each(function(post){ %>
<li> <a class="menu-element" href="<%- url_for(post.path) %>">
<a href="<%- url_for(post.path) %>"><%= post.title || '(no title)' %></a> <span class="trim-that"><%= post.title || '(no title)' %></span>
</li> </a>
<% }) %> <% }) %>
</ul>
</div> </div>
</div> </div>
<% } %> <% } %>

View file

@ -1,7 +1,7 @@
<% if (site.tags.length){ %> <% if (site.tags.length){ %>
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title"><%= __('tags') %></h3> <h3 class="card-header"><%= __('tags') %></h3>
<div class="widget"> <div class="card-menu">
<%- list_tags({show_count: theme.show_count}) %> <%- list_tags({show_count: theme.show_count}) %>
</div> </div>
</div> </div>

View file

@ -1,8 +1,8 @@
<% if (site.tags.length){ %> <% if (site.tags.length){ %>
<div class="widget-wrap"> <div class="card card-primary">
<h3 class="widget-title"><%= __('tagcloud') %></h3> <h3 class="card-header"><%= __('tagcloud') %></h3>
<div class="widget tagcloud"> <div class="card-body tagcloud">
<%- tagcloud() %> <%- tagcloud() %>
</div> </div>
</div> </div>
<% } %> <% } %>

View file

@ -73,7 +73,7 @@ $card-smallpad: $lineheight_half;
&-menu { &-menu {
display:flex; display:flex;
flex-direction: column; flex-direction: column;
.menu-element { .menu-element, .menu-element-link {
display:flex; display:flex;
line-height:$lineheight; line-height:$lineheight;
padding-right:$lineheight_half; padding-right:$lineheight_half;