mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-27 04:10:03 +01:00
Matthias Kretschmann
384b364a63
- switch to rem based typography - switch to rem based spacing - responsive typography through root font size change
69 lines
1.4 KiB
Stylus
69 lines
1.4 KiB
Stylus
//
|
|
// kremalicious3
|
|
// --------------
|
|
// Page - 404
|
|
//
|
|
|
|
.page-404
|
|
@extend .textcenter
|
|
|
|
.entry-title
|
|
@extend .hide
|
|
|
|
.srverror-title
|
|
font-size: 2em
|
|
margin-bottom: ($spacer/4)
|
|
color: $text-color-light
|
|
|
|
.srverror-text
|
|
font-size: 1.2em
|
|
letter-spacing: .01em
|
|
color: $text-color-dimmed
|
|
|
|
// HAL needs a size
|
|
$hal-size = 72px
|
|
|
|
.hal-9000
|
|
@extend .textcenter, .aligncenter
|
|
width: $hal-size
|
|
height: $hal-size
|
|
border-radius: $hal-size
|
|
background: #444
|
|
padding: 1.5em
|
|
margin-top: $spacer
|
|
margin-bottom: $spacer
|
|
position: relative
|
|
border: 4px solid #ccc
|
|
box-shadow: inset 0 0 10px #000
|
|
|
|
// eye
|
|
&:before
|
|
content: ""
|
|
width: 100%
|
|
height: 100%
|
|
border-radius: 100%
|
|
display: block
|
|
background: red
|
|
box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red, 0 0 25px red, 0 0 30px red, 0 0 40px red
|
|
animation: halpulse 7s infinite
|
|
|
|
// gloss
|
|
&:after
|
|
content: ""
|
|
position: absolute
|
|
width: $hal-size
|
|
height: $hal-size
|
|
border-radius: $hal-size
|
|
position: absolute
|
|
left: 0
|
|
top: 0
|
|
background-image: linear-gradient(135deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%)
|
|
|
|
@keyframes halpulse
|
|
0%
|
|
opacity: 1
|
|
50%
|
|
opacity: .6
|
|
100%
|
|
opacity: 1
|