1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-12 08:05:18 +01:00
blog/_src/assets/less/404.less

73 lines
2.0 KiB
Plaintext

.page-404 {
text-align: center;
.entry-title { .hide; }
}
.srverror-title {
font-size: 2em;
margin-bottom: @line-height-computed/2;
color: @text-color-light;
}
.srverror-text {
font-size: 1.2em;
letter-spacing: .01em;
color: @text-color-dimmed
}
@hal-size: 72px;
.hal-9000 {
width: @hal-size;
height: @hal-size;
.border-radius(@hal-size);
background: #444;
padding: 1.5em;
margin: @line-height-computed auto;
text-align: center;
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: -moz-linear-gradient(-45deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 40%, rgba(255,255,255,0) 41%);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%);
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%);
}
}
@-webkit-keyframes halpulse {
0% { opacity: 1 }
50% { opacity: .6 }
100% { opacity: 1 }
}
@keyframes halpulse {
0% { opacity: 1 }
50% { opacity: .6 }
100% { opacity: 1 }
}