mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-28 16:48:00 +02:00
103 lines
1.8 KiB
Plaintext
103 lines
1.8 KiB
Plaintext
|
---
|
||
|
import LayoutBase from '@layouts/Base/index.astro'
|
||
|
|
||
|
const title = `I'm sorry Dave`
|
||
|
const description = `I'm afraid I can't do that`
|
||
|
---
|
||
|
|
||
|
<style>
|
||
|
.wrapper {
|
||
|
text-align: center;
|
||
|
margin-bottom: calc(var(--spacer) * 4);
|
||
|
min-height: 50vh;
|
||
|
}
|
||
|
|
||
|
.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 / 7%) 0%,
|
||
|
rgba(255 255 255 / 7%) 40%,
|
||
|
rgba(255 255 255 / 0%) 41%
|
||
|
);
|
||
|
}
|
||
|
|
||
|
@keyframes halpulse {
|
||
|
0% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
50% {
|
||
|
opacity: 0.6;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<LayoutBase title={title}>
|
||
|
<div class="wrapper">
|
||
|
<div class="hal9000"></div>
|
||
|
|
||
|
<h1 class="title">{title}</h1>{' '}
|
||
|
<p class="text">{description}</p>
|
||
|
<a href={'/'}>Back to homepage</a>
|
||
|
</div>
|
||
|
</LayoutBase>
|