mirror of https://github.com/kremalicious/blog.git
77 lines
1.3 KiB
CSS
77 lines
1.3 KiB
CSS
.wrapper {
|
|
text-align: center;
|
|
margin-bottom: calc(var(--spacer) * 4);
|
|
}
|
|
|
|
.title {
|
|
font-size: var(--font-size-h3);
|
|
margin-top: 0;
|
|
margin-bottom: calc(var(--spacer) / 4);
|
|
}
|
|
|
|
.text {
|
|
font-size: var(--font-size-base);
|
|
color: var(--brand-grey-light);
|
|
}
|
|
|
|
/* HAL needs a size */
|
|
:root {
|
|
--hal-size: 72px;
|
|
}
|
|
|
|
.hal9000 {
|
|
width: var(--hal-size);
|
|
height: var(--hal-size);
|
|
border-radius: var(--hal-size);
|
|
background: #444;
|
|
padding: 1.5em;
|
|
margin: var(--spacer) auto;
|
|
position: relative;
|
|
border: 4px solid #ccc;
|
|
box-shadow: inset 0 0 10px #000;
|
|
}
|
|
|
|
/* // eye */
|
|
.hal9000::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 */
|
|
.hal9000::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: var(--hal-size);
|
|
height: var(--hal-size);
|
|
border-radius: var(--hal-size);
|
|
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: 0.6;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|