143 lines
3.5 KiB
Sass
143 lines
3.5 KiB
Sass
/*
|
|
* .next-article -- lead into the next article
|
|
*/
|
|
|
|
.next-article
|
|
$bg: darken(#8e44ad, 15%)
|
|
$textcolor: saturate(mix(white, $bg, 85%), 90%)
|
|
|
|
&
|
|
display: block
|
|
padding: 0
|
|
margin-left: 40px
|
|
margin-right: 40px
|
|
position: relative
|
|
|
|
|
|
&, &:hover, &:focus
|
|
box-shadow: none
|
|
|
|
&:after
|
|
content: ''
|
|
display: block
|
|
position: absolute
|
|
left: -20px
|
|
right: -20px
|
|
bottom: 0
|
|
border-bottom: solid 1px $hairline
|
|
|
|
// suppress its hairline
|
|
& + .about-the-site:before
|
|
display: none
|
|
|
|
@media (max-width: 768px)
|
|
margin-left: 0
|
|
margin-right: 0
|
|
|
|
// remove horizontal line
|
|
& + .about-the-site:before
|
|
display: none
|
|
|
|
.container
|
|
display: block
|
|
text-align: center
|
|
padding: 10em 20px
|
|
|
|
@media (min-width: 769px)
|
|
margin-top: 8em
|
|
padding: 8em 20px
|
|
|
|
.h3
|
|
display: block
|
|
margin: 0 auto auto
|
|
padding: 0
|
|
font-size: 2.2em
|
|
line-height: 1.3em
|
|
+bold-font
|
|
color: white
|
|
transition: all 250ms linear
|
|
|
|
// &:hover > span
|
|
// box-shadow: inset 0 -2px $accent
|
|
// text-shadow: 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg
|
|
|
|
@media (max-width: 768px)
|
|
font-size: 1.5em
|
|
|
|
.h3, .excerpt
|
|
max-width: $page-width * 0.9
|
|
|
|
.h3 + .excerpt
|
|
margin-top: 0.5em
|
|
|
|
.excerpt
|
|
display: block
|
|
margin-left: auto
|
|
margin-right: auto
|
|
font-size: 1em
|
|
line-height: 1.6em
|
|
|
|
.big-button
|
|
margin-top: 2em
|
|
|
|
h3 a:hover,
|
|
h3 a:focus
|
|
color: $accent
|
|
|
|
.heading
|
|
display: block
|
|
+caps-font
|
|
font-size: 0.7em
|
|
margin-bottom: 1em
|
|
|
|
.heading:before
|
|
font-family: Ionicons
|
|
content: '\f4a8'
|
|
margin-right: 15px
|
|
font-size: 16px
|
|
display: inline-block
|
|
vertical-align: middle
|
|
color: $accent
|
|
|
|
.big-button,
|
|
a.big-button
|
|
background: transparent
|
|
|
|
&, &:visited
|
|
border-color: $accent
|
|
color: white
|
|
|
|
&:hover, &:focus
|
|
background: $accent
|
|
border-color: transparent
|
|
|
|
@mixin recolor-article($bg, $bg2, $url: '', $a: 0.9, $angle: 177deg)
|
|
$w: 1500
|
|
$h: 10
|
|
$textcolor: mix(white, $bg, 75%)
|
|
$notch: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$w}' height='#{$h}' version='1.1'><polyline fill='white' points='#{$w},0 0,0 0,#{$h}'/></svg>"
|
|
|
|
&
|
|
background: url($notch) -50px top / 110% auto no-repeat, linear-gradient(to right, rgba(adjust-color($bg, $lightness: 0%), $a), rgba(adjust-color($bg2, $lightness: 0%), $a)), linear-gradient($angle, rgba($bg, 0.0), rgba($bg, 0.9)), url($url) center center / cover, $bg
|
|
&:hover, &:focus
|
|
background: url($notch) -50px top / 110% auto no-repeat, linear-gradient(to right, rgba(adjust-color($bg, $lightness: 1%), $a), rgba(adjust-color($bg2, $lightness: 1%), $a)), linear-gradient($angle, rgba($bg, 0.0), rgba($bg, 0.9)), url($url) center center / cover, $bg
|
|
.excerpt, .heading
|
|
color: $textcolor
|
|
|
|
.next-article
|
|
&
|
|
+recolor-article(#612e76, #5867cc)
|
|
&.-v2
|
|
text-shadow: 0 1px 1px rgba(black, 0.5)
|
|
+recolor-article(#027d65, #00536b, "bg/pebbles.jpg", 0.7, $angle: 35deg)
|
|
&.-v3
|
|
text-shadow: 0 1px 1px rgba(black, 0.5)
|
|
+recolor-article(#1d2434, #202a3e, "bg/roughwall.jpg", 0.9, $angle: 1deg)
|
|
&.-v4
|
|
text-shadow: 0 1px 1px rgba(black, 0.5)
|
|
+recolor-article(#902014, #c77e0a, "bg/woodfloor.jpg", 0.45, $angle: 1deg)
|
|
&.-v5
|
|
text-shadow: 0 1px 1px rgba(black, 0.5)
|
|
+recolor-article(#17283a, #25295e, "bg/stairs.jpg", 0.85, $angle: 1deg)
|
|
// &.next-article
|