diff --git a/assets/_src/less/ascribe/_blog.less b/assets/_src/less/ascribe/_blog.less index 7ba8125..53dd074 100644 --- a/assets/_src/less/ascribe/_blog.less +++ b/assets/_src/less/ascribe/_blog.less @@ -120,6 +120,8 @@ @media (@screen-sm) { .grid__col { flex: 33%; } } + + .grid__col > a { display: block; } } .subtemplate--featured--more { @@ -128,9 +130,40 @@ } .featured { + position: relative; + transition: .2s ease-out; + a:hover &, + a:focus & { + transform: scale(1.01); + box-shadow: 0 4px 8px fade(#000, 20%); + } + + a:active & { + top: 1px; + transform: none; + transition: none; + box-shadow: none; + } } .featured__title { &:extend(.h4); + margin: 0; + font-size: @font-size-base; + color: #fff; + position: absolute; + left: 0; + bottom: 0; + background: fade(@blueDeep, 70%); + padding: (@spacer / 4); + transition: .2s ease-out; + + a:hover &, + a:focus & { color: @link-color; } +} + +.featured__image { + max-height: 175px; + display: block; }