Skip to content

Commit 652ec55

Browse files
sergiokopplinsergiokopplin
committed
tags page - closes sergiokopplin#31 
1 parent 5278b7a commit 652ec55

File tree

7 files changed

+316
-9
lines changed

7 files changed

+316
-9
lines changed

‎_includes/header.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
{% if page.title == "Home" or page.title == "Blog" or page.title == "Projects" %}{% assign showHeader = true %}{% endif %}
1+
{% if page.title == "Home"
2+
or page.title == "Blog"
3+
or page.title == "Projects"
4+
or page.title == "Tags"
5+
%}{% assign showHeader = true %}{% endif %}
26

37
{% if showHeader == true %}
48
<header class="header-home {% if site.animation %}animated{% endif %}">

‎_includes/main.css‎

Lines changed: 85 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -562,7 +562,7 @@ pre {
562562
margin-bottom: 3rem;
563563
}
564564
.post > .date,
565-
.post > .tags {
565+
.post > .post-tags {
566566
color: #aaa;
567567
font-weight: 300;
568568
font-size: 1.4rem;
@@ -577,14 +577,15 @@ pre {
577577
.post > .date {
578578
margin-bottom: 2rem;
579579
}
580-
.post > .tags > .item {
580+
.post > .post-tags > .item {
581581
padding: 3px 6px;
582582
border-radius: 3px;
583583
font-size: 1.1rem;
584584
background: #ededed;
585585
color: #666;
586586
letter-spacing: 1px;
587587
margin: 0 0.5rem;
588+
text-decoration: none;
588589
}
589590
.post > h2,
590591
.post > h3,
@@ -596,6 +597,88 @@ pre {
596597
.post > h4 a {
597598
text-decoration: none;
598599
}
600+
.tags {
601+
margin-top: 125px;
602+
}
603+
.tags > .list {
604+
border-top: 1px solid #ededed;
605+
margin-top: 30px;
606+
padding-top: 40px;
607+
position: relative;
608+
}
609+
.tags > .list:before {
610+
display: block;
611+
content: " ";
612+
width: 7px;
613+
height: 7px;
614+
border: #ededed 1px solid;
615+
position: absolute;
616+
top: -5px;
617+
left: 50%;
618+
margin-left: -5px;
619+
background: #fff;
620+
box-shadow: #fff 0 0 0 5px;
621+
border-radius: 3px;
622+
}
623+
.tags > .list > .item {
624+
font-weight: 300;
625+
text-transform: uppercase;
626+
text-align: center;
627+
margin-bottom: 6rem;
628+
-webkit-font-smoothing: antialiased;
629+
text-rendering: optimizeLegibility;
630+
padding: 3px 6px;
631+
border-radius: 3px;
632+
font-size: 1.3rem;
633+
background: #ededed;
634+
color: #666;
635+
letter-spacing: 1px;
636+
margin: 0 0.5rem 1rem;
637+
text-decoration: none;
638+
display: inline-block;
639+
}
640+
.tag-list > .list {
641+
padding: 0;
642+
}
643+
.tag-list > .list > .item {
644+
display: block;
645+
width: 80%;
646+
margin: 0 10%;
647+
}
648+
.tag-list > .list > .item > .url {
649+
width: 100%;
650+
height: 100%;
651+
display: block;
652+
padding: 20px 0;
653+
text-decoration: none;
654+
}
655+
.tag-list > .list > .item > .url > .title {
656+
margin: 0;
657+
width: 75%;
658+
font-weight: 400;
659+
-webkit-transition: all ease-in-out 0.2s;
660+
transition: all ease-in-out 0.2s;
661+
font-size: 1.6rem;
662+
}
663+
.tag-list > .list > .item:hover > .url > .title {
664+
color: #4b0082;
665+
}
666+
.tag-list > .list aside {
667+
position: relative;
668+
top: 2px;
669+
margin: 0;
670+
width: 25%;
671+
float: right;
672+
font-weight: 300;
673+
color: #aaa;
674+
text-align: right;
675+
-webkit-transition: all ease-in-out 0.2s;
676+
transition: all ease-in-out 0.2s;
677+
font-size: 1.6rem;
678+
}
679+
.tag-list > .list .item:hover .url aside {
680+
color: #666;
681+
}
599682
.author {
600683
padding: 3rem 0;
601684
border-bottom: 1px solid #ededed;

‎_layouts/post.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ <h1 class="title">{{ page.title }}</h1>
1111
</span>
1212

1313
{% if site.show-tags %}
14-
<div class="tags">
14+
<div class="post-tags">
1515
{% for tag in page.tags %}
16-
<span class="item">{{ tag }}</span>
16+
<a class="item" href="{{ site.baseurl }}/tags/#{{ tag | slugify }}">{{ tag }}</a>
1717
{% endfor %}
1818
</div>
1919
{% endif %}

‎assets/styles/main.css‎

Lines changed: 85 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -562,7 +562,7 @@ pre {
562562
margin-bottom: 3rem;
563563
}
564564
.post > .date,
565-
.post > .tags {
565+
.post > .post-tags {
566566
color: #aaa;
567567
font-weight: 300;
568568
font-size: 1.4rem;
@@ -577,14 +577,15 @@ pre {
577577
.post > .date {
578578
margin-bottom: 2rem;
579579
}
580-
.post > .tags > .item {
580+
.post > .post-tags > .item {
581581
padding: 3px 6px;
582582
border-radius: 3px;
583583
font-size: 1.1rem;
584584
background: #ededed;
585585
color: #666;
586586
letter-spacing: 1px;
587587
margin: 0 0.5rem;
588+
text-decoration: none;
588589
}
589590
.post > h2,
590591
.post > h3,
@@ -596,6 +597,88 @@ pre {
596597
.post > h4 a {
597598
text-decoration: none;
598599
}
600+
.tags {
601+
margin-top: 125px;
602+
}
603+
.tags > .list {
604+
border-top: 1px solid #ededed;
605+
margin-top: 30px;
606+
padding-top: 40px;
607+
position: relative;
608+
}
609+
.tags > .list:before {
610+
display: block;
611+
content: " ";
612+
width: 7px;
613+
height: 7px;
614+
border: #ededed 1px solid;
615+
position: absolute;
616+
top: -5px;
617+
left: 50%;
618+
margin-left: -5px;
619+
background: #fff;
620+
box-shadow: #fff 0 0 0 5px;
621+
border-radius: 3px;
622+
}
623+
.tags > .list > .item {
624+
font-weight: 300;
625+
text-transform: uppercase;
626+
text-align: center;
627+
margin-bottom: 6rem;
628+
-webkit-font-smoothing: antialiased;
629+
text-rendering: optimizeLegibility;
630+
padding: 3px 6px;
631+
border-radius: 3px;
632+
font-size: 1.3rem;
633+
background: #ededed;
634+
color: #666;
635+
letter-spacing: 1px;
636+
margin: 0 0.5rem 1rem;
637+
text-decoration: none;
638+
display: inline-block;
639+
}
640+
.tag-list > .list {
641+
padding: 0;
642+
}
643+
.tag-list > .list > .item {
644+
display: block;
645+
width: 80%;
646+
margin: 0 10%;
647+
}
648+
.tag-list > .list > .item > .url {
649+
width: 100%;
650+
height: 100%;
651+
display: block;
652+
padding: 20px 0;
653+
text-decoration: none;
654+
}
655+
.tag-list > .list > .item > .url > .title {
656+
margin: 0;
657+
width: 75%;
658+
font-weight: 400;
659+
-webkit-transition: all ease-in-out 0.2s;
660+
transition: all ease-in-out 0.2s;
661+
font-size: 1.6rem;
662+
}
663+
.tag-list > .list > .item:hover > .url > .title {
664+
color: #4b0082;
665+
}
666+
.tag-list > .list aside {
667+
position: relative;
668+
top: 2px;
669+
margin: 0;
670+
width: 25%;
671+
float: right;
672+
font-weight: 300;
673+
color: #aaa;
674+
text-align: right;
675+
-webkit-transition: all ease-in-out 0.2s;
676+
transition: all ease-in-out 0.2s;
677+
font-size: 1.6rem;
678+
}
679+
.tag-list > .list .item:hover .url aside {
680+
color: #666;
681+
}
599682
.author {
600683
padding: 3rem 0;
601684
border-bottom: 1px solid #ededed;

‎src/styles/pages/_post.styl‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
margin-bottom 3rem
77

88
> .date,
9-
> .tags
9+
> .post-tags
1010
color gama
1111
font-weight 300
1212
font-size 1.4rem
@@ -21,14 +21,15 @@
2121
> .date
2222
margin-bottom 2rem
2323

24-
> .tags > .item
24+
> .post-tags > .item
2525
padding 3px 6px
2626
border-radius 3px
2727
font-size 1.1rem
2828
background epsilon
2929
color alpha
3030
letter-spacing 1px
3131
margin 0 .5rem
32+
text-decoration none
3233

3334
// general style
3435
> h2,

‎src/styles/pages/_tags.styl‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.tags
2+
margin-top 125px
3+
4+
> .list
5+
border-top 1px solid epsilon
6+
margin-top 30px
7+
padding-top 40px
8+
position relative
9+
10+
&:before
11+
display block
12+
content " "
13+
width 7px
14+
height 7px
15+
border epsilon 1px solid
16+
position absolute
17+
top -5px
18+
left 50%
19+
margin-left -5px
20+
background #FFF
21+
box-shadow #FFF 0 0 0 5px
22+
border-radius 3px
23+
24+
.tags > .list
25+
> .item
26+
font-weight 300
27+
text-transform uppercase
28+
text-align center
29+
margin-bottom 6rem
30+
-webkit-font-smoothing antialiased
31+
text-rendering optimizeLegibility
32+
padding 3px 6px
33+
border-radius 3px
34+
font-size 1.3rem
35+
background epsilon
36+
color alpha
37+
letter-spacing 1px
38+
margin 0 0.5rem 1rem
39+
text-decoration none
40+
display inline-block
41+
42+
.tag-list > .list
43+
padding 0
44+
45+
> .item
46+
display block
47+
width 80%
48+
margin 0 10%
49+
50+
> .item > .url
51+
width 100%
52+
height 100%
53+
display block
54+
padding 20px 0
55+
text-decoration none
56+
57+
> .item > .url > .title
58+
margin 0
59+
width 75%
60+
font-weight 400
61+
transition all ease-in-out .2s
62+
font-size 1.6rem
63+
64+
> .item:hover > .url > .title
65+
color delta
66+
67+
// maybe we can't nest html5 elements
68+
// can you help me?
69+
aside
70+
position relative
71+
top 2px
72+
margin 0
73+
width 25%
74+
float right
75+
font-weight 300
76+
color gama
77+
text-align right
78+
transition all ease-in-out .2s
79+
font-size 1.6rem
80+
81+
.item:hover .url aside
82+
color alpha

0 commit comments

Comments
 (0)