m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +01:00
Code

consistent hpoto link styles, add images to related posts

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-04-16 20:37:23 +02:00
parent 384b364a63
commit 29cf39cca7
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
8 changed files with 52 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
_src/_assets/styl/content-featured.styl
View File

@ -38,6 +38,11 @@
display: block
position: relative
&:hover,
&:focus
img
border-color: $link-color
.featured-title
@extend .transition
transition-property: transform, opacity
@ -52,7 +57,7 @@
font-size: $font-size-small
padding: ($spacer/3)
background: $link-color
background: alpha($link-color, .7)
background: alpha($link-color, .85)
color: #fff
text-shadow: 0 1px 0 #000
left: 0

4
_src/_assets/styl/content-photo.styl
View File

@ -75,6 +75,10 @@
.photo-link
display: block
&:hover
img
border-color: $link-color
&:active
background: none

33
_src/_assets/styl/content-related.styl
View File

@ -13,26 +13,33 @@
margin-bottom: $spacer
.related-post
picture
img
@extend .media-frame
.post-title
@extend .h5
margin: 0
@extend .h5, .transition
margin-top: ($spacer / 3)
margin-bottom: 0
padding: 0 2px
.post-title,
.post-title-link
@extend .transition
color: $brand-grey-light
display: block
&:hover,
&:focus
color: $link-color
.post-title
color: $link-color
picture
img
border-color: $link-color-hover
&:active
color: #fff
transition: none
.post-title
color: #fff
transition: none
.post-title-link
display: block
//
// Related Photos
@ -44,9 +51,11 @@
.photo-link
display: block
border: 2px solid transparent
img
@extend .media-frame
&:hover,
&:focus
border-color: $link-color-hover
border-radius: $border-radius-base
img
border-color: $link-color-hover
border-radius: $border-radius-base

7
_src/_assets/styl/content.styl
View File

@ -63,12 +63,17 @@
margin-right: -16%
img
box-shadow: 0 1px 3px rgba(0,0,0,.2)
@extend .media-frame
border-radius: 0
@media $breakpoint2
border-radius: $border-radius-base
.hentry__teaser--link
&:hover,
&:focus
img
border-color: $link-color
// Post Content
/////////////////////////////////////

10
_src/_assets/styl/media.styl
View File

@ -37,3 +37,13 @@ img.aligncenter
margin: 0 $spacer $spacer 0
img.alignright
margin: 0 0 $spacer $spacer
// Image frame style
/////////////////////////////////////
.media-frame
@extend .transition
border: 2px solid transparent
border-radius: $border-radius-base
box-shadow: 0 1px 3px alpha($brand-grey,.2)

2
_src/_includes/articles.html
View File

@ -56,7 +56,7 @@
<section class="entry-content">
{% if post.image %}
<a class="hentry__teaser" href="{{ post.url }}">
<a class="hentry__teaser hentry__teaser--link" href="{{ post.url }}">
{% picture {{ post.image }} %}
</a>
{% endif %}

3
_src/_includes/relatedposts.html
View File

@ -9,7 +9,8 @@
<article class="related-post grid__col">
<a class="post-title-link" href="{{ post.url }}">
<h1 class="post-title">{{ post.title }}</h1>
{% picture featured {{ post.image }} %}
<h1 class="post-title">{{ post.title | titlecase }}</h1>
</a>
</article>

2
_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md
View File

@ -11,6 +11,8 @@ date: 2012-07-16 14:36:58+00:00
categories:
- design
- goodies
tags:
- css
---
There's this HTML element meant for marking up keyboard keys named `<kbd>`. Obviously it can be styled with CSS so why not use it to make those elements look a bit more like hardware or the iOS and Android software keys.