You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1164 lines
28 KiB

@font-face {
font-family: 'dejavu_sans_monobook';
src: local("DejaVu Sans Mono"),
url('/css/dejavusansmono-webfont.woff2') format('woff2'),
url('/css/dejavusansmono-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html {
font-size:100%;
font-family:"dejavu_sans_monobook", monospace;
}
body {
font-size:.80rem;
color: #151515;
/* color: #202020; */
/* color: #404040;*/
background: radial-gradient(circle farthest-side at 0% 50%,#FFF 23.5%,rgba(240,166,17,0) 0)21px 30px, radial-gradient(circle farthest-side at 0% 50%,#f8f8f8 24%,rgba(240,166,17,0) 0)19px 30px, linear-gradient(#FFF 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#FFF 0)0 0, linear-gradient(150deg,#FFF 24%,#f8f8f8 0,#f8f8f8 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#f8f8f8 0,#f8f8f8 76%,#FFF 0)0 0, linear-gradient(30deg,#FFF 24%,#f8f8f8 0,#f8f8f8 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#f8f8f8 0,#f8f8f8 76%,#FFF 0)0 0, linear-gradient(90deg,#f8f8f8 2%,#FFF 0,#FFF 98%,#f8f8f8 0%)0 0 #FFF;
background-size: 40px 60px;
}
a:visited {
color: #404040;
}
header {
border-bottom:1px solid #969595;
display: flex;
justify-content: space-between;
}
header nav {
margin: auto 0 0 auto;
text-align:right;
}
header nav a {
font-size:1.3rem;
font-weight:bold;
text-transform:uppercase;
}
footer {
margin-top:3rem;
padding:.5rem 0 1.2rem 0;
border-top:1px solid #969595;
font-size:.8rem;
color:#555;
}
h1 {
font-variant-caps: small-caps;
}
h2 {
font-variant-caps: small-caps;
}
h3 {
font-style: italic;
font-variant-caps: small-caps;
font-weight: 100;
}
h1.title{
margin-bottom: 4px;
padding: .7rem;
}
ul {
list-style: circle;
padding-left: 0px;
list-style-position: inside;
}
li ul {
padding-left: 1.2rem;
}
li {
line-height: 1.5;
}
.subtitle {
/* Add extra padding to align with the title above */
padding-left:.7rem;
}
/* Article/posts styling */
main.article {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
margin:0 0;
}
main.article article > :first-child {
/* header div already has padding-bottom */
margin-top: 0;
padding-top: 0;
}
main.article .title {
border-bottom: double 3px #d5d5d5;
border-left: double 3px #d5d5d5;
border-radius: 6px;
background-color: #a9a9a924;
}
@media (min-width: 1280px) {
#bee-emoji-svg, #bee-emoji-svg::before {
display: inline-block !important;
}
.logo:hover, .logo:hover::after {
display: inline !important;
}
article {
width: 43rem;
}
main {
z-index: 1;
min-width: 78rem;
margin:0 auto;
padding:0;
}
header {
margin:2.0rem 0 3.5rem 3rem;
padding:0.2rem 0;
}
header nav a {
margin:0 0 0 1.2rem;
display:inline;
}
footer {
text-align:right;
}
.logo {
text-align:left;
}
.logo a {
font-size:6rem;
}
img.fit {
width: 100%;
height: auto;
object-fit: cover;
}
main.article {
display: grid;
grid-template-columns: [left-sideline] auto [body] auto [right-sideline] auto;
grid-column-gap: 10px;
grid-row-gap: 3px;
grid-auto-rows: auto;
}
main.article article {
padding-right: 4rem;
}
}
main.article div.left {
grid-column: left-sideline;
grid-row: 2 / 3;
min-width:180px;
order: 2;
padding-left: 2em;
padding-right: 2em;
}
main.article article {
line-height: 1.4;
text-decoration-color: #0000001a;
grid-column: body;
grid-row: 2 / 3;
order:1;
max-width: 41rem;
}
main.article div.right {
grid-column: right-sideline;
grid-row: 2 / 3;
min-width:180px;
order:3;
padding-left: 2em;
padding-right: 2em;
}
main section.header {
color:#555;
font-size:0.8rem;
grid-column: 2 / 3;
grid-row: 1 / 2;
max-width: 50rem;
padding-bottom: .5rem;
}
main.article article p:first-child {
margin-top: 0;
}
main.article article > p:first-child::first-letter {
float: left;
font-size: 500%;
/* font-style: italic;*/
height: 1rem;
line-height: 1rem;
margin: 0px;
padding: 0 .05em 0 0;
text-shadow: #d9d4d4 .05em .05em;
}
.logo a {
font-size: 3.5rem;
color:#131516;
font-weight:bold;
text-decoration:none;
}
/*
.sidenote-left, .sidenote-right {
display: inline-block;
width: 48%;
margin-top: 0;
margin-bottom: 0;
font-size: 7pt;
line-height: 1.3;
vertical-align: baseline;
}
*/
code {
font-weight: 800;
color: #006266;
}
kbd.□.▭ {
width: auto;
font-weight: 800;
padding: 13px 5px;
/* box-shadow: 2px 3px #8e897a; */
box-shadow: 3px 5px #8e897a, 2px 0px 2px -1px inset #bbb, -1px 0px 2px -1px inset #bbb, -2px 3px #8e897a, -3px 5px #8e897a, 3px 5px #8e897a, -2px 3px #8e897a, 2px 3px #8e897a, 2px 3px #8e897a;
margin-bottom:4px;
margin-right:4px;
}
kbd.□.▭:active {
box-shadow: 1px 0px 1px #c1c0c0 inset,-1px 0px 1px #c1c0c0 inset, -3px 3px #a29b9b, 3px 3px #a29b9b, -2px 2px #a29b9b, 2px 2px #a29b9b, -1px 1px #a29b9b, 1px 1px #a29b9b;
top: 3px;
position: relative;
}
kbd.□:active {
color: black;
box-shadow: 1px 1px 0px #ddd inset;
top: 1px;
position: relative;
}
kbd.□ {
font-weight: 800;
border: 1px solid #cecece;
background: #f7f7e7;
/* box-shadow: 2px 1px #8e897a;*/
box-shadow: 1px 3px darkgray, -1px 3px darkgray, 1px 2px darkgray, -1px 2px darkgray;
border-radius: 3px;
display: inline-block;
font-size: .85em;
line-height: 1;
padding: 2px 4px;
white-space: nowrap;
user-select: none;
cursor:pointer;
}
/* for keys that aren't entirely square */
.thin-kbd.□.▭ {
padding-right: 7px;
padding-left: 8px;
}
.sourceCode code {
font-weight: 300;
}
@media (min-width:320px) {
#bee-emoji-svg, #bee-emoji-svg::before, .logo:hover, .logo:hover::after {
display: none;
}
body {
width:90%;
margin:0;
padding:0 5%;
}
header {
margin:1.7rem 0 2.0rem 0;
}
footer {
text-align:center;
}
.logo a {
font-size:3.5rem;
}
header nav {
padding-bottom: .7rem;
}
header nav a {
display:inline;
margin:0 0.6rem;
font-size:1.3rem;
}
.screenshots {
flex-direction: column;
}
}
@media (min-width:1140px) {
main {
z-index: 1;
padding:0;
}
header nav a {
margin:0 0 0 1.2rem;
display:inline;
}
footer {
text-align:right;
}
.screenshots {
flex-direction: row;
}
}
img.fit {
width: 100%;
height: auto;
object-fit: cover;
}
img.full-width {
width: 100%;
height: auto;
object-fit: cover;
}
.fit-right {
margin-left: 10%;
}
.fit-left {
margin-right: 10%;
}
.logo {
margin: auto auto 0 0;
}
.logo-img {
width: 100%;
height: auto;
object-fit: cover;
}
figure {
margin: 0 1.2rem 1.2rem 0;
}
.bold {
font-weight: 800;
}
figcaption {
font-size: 8pt;
color: #5b5e60;
background: #f6f6f6;
border: 1px solid #ededed;
border-radius: 0 0 2px 2px;
width: calc(98% - 2px);
margin-top: -3px;
padding-bottom: 7px;
padding-left: 2%;
padding-top: 5px;
}
figcaption a {
text-decoration: inherit;
color: inherit;
}
figcaption a:visited {
color: inherit;
}
/* Index styling */
.wrapper {
display: grid;
grid-auto-columns: minmax(100px, auto);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.wrapper h2 {
border-bottom: 2px inset #000;
border-left: 1px solid #b2b2b2;
border-right: 1px solid #b2b2b2;
padding-left: .5rem;
padding-right: .5rem;
border-top: 1px solid #b2b2b2;
padding: .5rem;
border-radius: 2px;
background: white;
}
@media (max-width:1280px) {
.wrapper > *:first-child {
display: flex;
flex-wrap: wrap;
grid-column: 1;
grid-row: 1 / 1;
}
section.index-intro {
width: 100vw;
}
section.index-intro, section.index-install, section.index-build, section.index-features, section-announcements {
border-bottom: 2px solid #6c6e6f;
min-width: 100%;
margin-bottom: 10px;
}
}
@media (min-width:1280px) {
.wrapper > *:first-child {
display: grid;
grid-column: 1;
grid-row: 1 / 1;
grid-template-areas:
"term term install install"
"term term features build"
"screenshots screenshots features announcements"
"screenshots screenshots features announcements";
grid-column-gap: 4rem;
}
section.index-install ol {
margin-bottom: 0px;
}
section.index-install, section.index-build {
margin-bottom: 20px;
}
section.index-intro {
width: 45vw;
}
}
section h1 {
font-size: 1.21rem;
font-variant-caps: normal;
margin-top: 0px;
}
h1 {
border-bottom: 2px inset #000;
max-width: max-content;
border-left: 1px solid #b2b2b2;
border-right: 1px solid #b2b2b2;
padding-left: .5rem;
padding-right: .5rem;
border-top: 1px solid #b2b2b2;
padding: .5rem;
border-radius: 2px;
background: white;
}
section.index-intro {
grid-area:term;
}
section.index-features {
grid-area: features;
}
section.index-install {
grid-area: install;
}
section.index-build {
grid-area: build;
}
section.index-announcements {
grid-area: announcements;
}
ul.index-announcement-list {
padding-left: 0px;
}
section.index-install > h2 {
margin-bottom: 0;
}
section.index-install details > summary {
display: inline-block;
margin: .4rem auto;
padding: .2rem;
background: #d7d7d7;
border: 3px double white;
color: #56BAE6;
}
section.index-install details > summary::after {
content: " (help) ";
color: #03186a;
font-size: .6rem;
cursor: pointer;
}
section.index-install details > summary > code {
color: #014446;
font-size: 119%;
}
.index-screenshots {
display:flex;
flex-wrap: wrap;
grid-area: screenshots;
}
.index-screenshots > * {
flex: initial;
}
.index-screenshots a {
height: 100%;
}
.index-screenshots img {
object-fit: contain;
width: 100%;
height:inherit;
background: #444;
}
/* Index styling end */
/* lightbox */
/*Eliminates padding, centers the thumbnail */
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
figure:not(.lightbox-target) {
display: flex;
flex-direction: column;
}
.lightbox-target {
z-index:5;
pointer-events: none;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
/* overflow: hidden; */
overflow-x: scroll;
padding: 0;
text-align: center;
margin:0;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
margin: auto;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
z-index: 2;
}
.lightbox-target figcaption {
margin: auto;
padding: 18px;
color: #5b5e60;
background: #f6f6f6;
border: 3px solid #ededed;
z-index: 3;
font-size: 2rem;
pointer-events: none;
/* fallback in case max-content is not supported by the browser */
max-width: 100%;
max-width: max-content;
width: auto;
height: min-content;
}
/* Styles the close link, adds the slide down transition */
a.lightbox-close {
width:50px;
height:50px;
color: white;
opacity: 1;
text-decoration: none;
pointer-events: auto;
z-index: 4;
font-size: 2.5rem;
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 80vh;
/* fallback in case max-content is not supported by the browser */
max-width: 100%;
max-width: max-content;
height: auto;
width: auto;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
/* IBM's colorblind safe palette */
.cornflower-blue {
color: #648FFF;
}
.purple {
color: #785EF0;
}
.cerise {
color: #DC267F;
}
.blaze-orange {
color: #FE6100;
}
.amber {
color: #FFB000;
}
.dull-red {
color: #CC6677;
}
.cyan {
color: #44AA99;
}
.green {
color: #117733;
}
.float_left_img {
max-width: 25%;
min-width: 5vw;
float:left;
padding: .4em;
}
div.mandoc {
max-width: 100vw;
min-width: 100vw;
}
nav.nav-doc {
/* fallback in case max-content is not supported by the browser */
max-width: 100%;
max-width: max-content;
border: 1px solid black;
padding: .4rem 1rem .4rem 2rem;
background: white;
box-shadow: 5px 5px darkgrey;
}
nav.nav-doc ul {
list-style: square;
}
article.article-doc {
max-width: 43rem;
background: white;
}
.screenshots-page {
display: flex;
flex-wrap: wrap;
}
.screenshots-page > * {
flex: 1 0 30%;
min-width: 200px;
}
.screenshots-page > figure > a {
height: 100%;
background: #1c1c1c;
}
.screenshots-page > figure > a > img {
height: inherit;
width: 100%;
object-fit: contain;
background: #444;
}
.screenshots-page > figure:not(.lightbox-target):nth-child(odd) > a > img {
background-color: #cccccc;
background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23b9b9b9' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}
code.Nm::after {
content: " 🐝";
filter: hue-rotate(170deg) grayscale(42%);
}
/* Documentation */
span.notice-info {
padding: .5rem;
border: 2px dashed grey;
margin-bottom: 15px;
background: white;
display: inline-block;
}
/*! * * * * * * * * * * * * * * * * * * * *\
CSShake :: shake-little
v1.5.0
CSS classes to move your DOM
(c) 2015 @elrumordelaluz
http://elrumordelaluz.github.io/csshake/
Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
code.Nm::after {
display: inline-block;
transform-origin: center center; }
.shake-freeze,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover {
animation-play-state: paused; }
.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, code.Nm:hover::after,
.shake-trigger:hover code.Nm::after {
animation-play-state: running; }
@keyframes shake-little {
2% {
transform: translate(0px, 1px) rotate(0.5deg); }
4% {
transform: translate(0px, 1px) rotate(0.5deg); }
6% {
transform: translate(1px, 1px) rotate(0.5deg); }
8% {
transform: translate(0px, 0px) rotate(0.5deg); }
10% {
transform: translate(1px, 0px) rotate(0.5deg); }
12% {
transform: translate(1px, 1px) rotate(0.5deg); }
14% {
transform: translate(0px, 0px) rotate(0.5deg); }
16% {
transform: translate(1px, 0px) rotate(0.5deg); }
18% {
transform: translate(0px, 1px) rotate(0.5deg); }
20% {
transform: translate(0px, 1px) rotate(0.5deg); }
22% {
transform: translate(1px, 1px) rotate(0.5deg); }
24% {
transform: translate(0px, 1px) rotate(0.5deg); }
26% {
transform: translate(0px, 0px) rotate(0.5deg); }
28% {
transform: translate(1px, 0px) rotate(0.5deg); }
30% {
transform: translate(1px, 0px) rotate(0.5deg); }
32% {
transform: translate(0px, 1px) rotate(0.5deg); }
34% {
transform: translate(0px, 1px) rotate(0.5deg); }
36% {
transform: translate(0px, 0px) rotate(0.5deg); }
38% {
transform: translate(1px, 1px) rotate(0.5deg); }
40% {
transform: translate(1px, 0px) rotate(0.5deg); }
42% {
transform: translate(0px, 1px) rotate(0.5deg); }
44% {
transform: translate(0px, 1px) rotate(0.5deg); }
46% {
transform: translate(0px, 0px) rotate(0.5deg); }
48% {
transform: translate(0px, 1px) rotate(0.5deg); }
50% {
transform: translate(0px, 1px) rotate(0.5deg); }
52% {
transform: translate(1px, 1px) rotate(0.5deg); }
54% {
transform: translate(0px, 0px) rotate(0.5deg); }
56% {
transform: translate(0px, 0px) rotate(0.5deg); }
58% {
transform: translate(0px, 0px) rotate(0.5deg); }
60% {
transform: translate(0px, 1px) rotate(0.5deg); }
62% {
transform: translate(0px, 0px) rotate(0.5deg); }
64% {
transform: translate(1px, 0px) rotate(0.5deg); }
66% {
transform: translate(0px, 1px) rotate(0.5deg); }
68% {
transform: translate(0px, 0px) rotate(0.5deg); }
70% {
transform: translate(1px, 1px) rotate(0.5deg); }
72% {
transform: translate(1px, 0px) rotate(0.5deg); }
74% {
transform: translate(0px, 1px) rotate(0.5deg); }
76% {
transform: translate(0px, 1px) rotate(0.5deg); }
78% {
transform: translate(1px, 0px) rotate(0.5deg); }
80% {
transform: translate(1px, 0px) rotate(0.5deg); }
82% {
transform: translate(0px, 0px) rotate(0.5deg); }
84% {
transform: translate(1px, 0px) rotate(0.5deg); }
86% {
transform: translate(0px, 0px) rotate(0.5deg); }
88% {
transform: translate(0px, 0px) rotate(0.5deg); }
90% {
transform: translate(1px, 1px) rotate(0.5deg); }
92% {
transform: translate(1px, 1px) rotate(0.5deg); }
94% {
transform: translate(1px, 0px) rotate(0.5deg); }
96% {
transform: translate(1px, 0px) rotate(0.5deg); }
98% {
transform: translate(0px, 0px) rotate(0.5deg); }
0%, 100% {
transform: translate(0, 0) rotate(0); } }
code.Nm:hover::after,
.shake-trigger:hover code.Nm::after, .shake-little.shake-freeze, .shake-little.shake-constant {
animation-name: shake-little;
animation-duration: 100ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#bee-emoji-svg:hover::before,
.shake-trigger:hover .shake-little.shake-freeze, .shake-little.shake-constant {
animation: shake-little 50ms ease-in-out running 120, harvest 10s 5500ms running steps(8, jump-both) infinite;
}
.logo::after {
transition: all 6.1s cubic-bezier(.68,-0.55,.27,1.55);
}
.logo:hover::after {
content: "🌸";
height: 3.5rem;
width: 3.5rem;
font-size: 2rem;
position: relative;
right: 3rem;
z-index: -1;
transition: all 6.1s cubic-bezier(.68,-0.55,.27,1.55);
}
#bee-emoji-svg:hover::before {
transform: translateY(26px) scale(.5);
transition: transform 6.1s cubic-bezier(.68,-0.55,.27,1.55);
}
#bee-emoji-svg::before {
content: " ";
filter: hue-rotate(170deg) grayscale(42%);
background-image: url('data:image/svg+xml,%3Csvg enable-background="new 0 0 47.5 47.5" version="1.1" viewBox="0 0 47.5 47.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="c"%3E%3Cpath d="m0 38h38v-38h-38v38z"/%3E%3C/clipPath%3E%3CclipPath id="b"%3E%3Cpath d="m8.719 17c0-6.133 4.603-13 10.281-13 5.679 0 10.281 6.867 10.281 13s-4.602 8.923-10.281 8.923c-5.678 0-10.281-2.79-10.281-8.923"/%3E%3C/clipPath%3E%3CclipPath id="a"%3E%3Cpath d="m0 38h38v-38h-38v38z"/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform="matrix(1.25,0,0,-1.25,0,47.5)"%3E%3Cg clip-path="url(%23c)"%3E%3Cg transform="translate(20,4)"%3E%3Cpath d="m0 0c0-1.657-0.447-3-1-3-0.552 0-1 1.343-1 3s0.448 3 1 3c0.553 0 1-1.343 1-3" fill="%23292f33"/%3E%3C/g%3E%3Cg transform="translate(26.753 35.753)"%3E%3Cpath d="m0 0c-0.586 0.586-1.693 0.428-2.475-0.354-0.611-0.611-1.948-2.53-2.222-3.619-0.884 0.195-1.93 0.22-3.056 0.22-1.125 0-2.172-0.025-3.055-0.219-0.275 1.089-1.611 3.007-2.223 3.618-0.781 0.782-1.888 0.94-2.474 0.354s-0.428-1.693 0.353-2.475c0.511-0.51 1.937-1.529 3.027-2.011-0.82-0.533-1.315-1.451-1.315-3.032 0-3.589 2.546-7.312 5.687-7.312 3.142 0 5.688 3.723 5.688 7.312 0 1.581-0.496 2.499-1.316 3.032 1.091 0.482 2.517 1.5 3.027 2.011 0.782 0.782 0.94 1.889 0.354 2.475" fill="%23292f33"/%3E%3C/g%3E%3Cg transform="translate(29.281 17)"%3E%3Cpath d="m0 0c0-6.134-4.603-13-10.281-13s-10.281 6.866-10.281 13c0 6.133 4.603 8.923 10.281 8.923s10.281-2.79 10.281-8.923" fill="%23292f33"/%3E%3C/g%3E%3C/g%3E%3Cg clip-path="url(%23b)"%3E%3Cpath d="m30 18h-22v4h22v-4z" fill="%23ffcc4d"/%3E%3Cpath d="m30 10h-22v4h22v-4z" fill="%23ffcc4d"/%3E%3Cpath d="m30 2h-22v4h22v-4z" fill="%23ffcc4d"/%3E%3Cg transform="translate(19 23)"%3E%3Cpath d="m0 0c0-2.647-7.858-10-12-10s-6 5.354-6 8 1.858 1.584 6 1.584c4.143 0 12 3.061 12 0.416" fill="%23292f33"/%3E%3C/g%3E%3Cg transform="translate(19 23)"%3E%3Cpath d="m0 0c0-2.647 7.857-10 12-10s6 5.354 6 8-1.857 1.584-6 1.584-12 3.061-12 0.416" fill="%23292f33"/%3E%3C/g%3E%3C/g%3E%3Cg clip-path="url(%23a)"%3E%3Cg transform="translate(19 23.495)"%3E%3Cpath d="m0 0c0-2.647-7.858-8.584-12-8.584s-6 2.443-6 5.089 1.858 4.495 6 4.495c4.143 0 12 1.645 12-1" fill="%23ccd6dd"/%3E%3C/g%3E%3Cg transform="translate(19 23.495)"%3E%3Cpath d="m0 0c0-2.647 7.857-8.584 12-8.584s6 2.443 6 5.089-1.857 4.495-6 4.495-12 1.645-12-1" fill="%23ccd6dd"/%3E%3C/g%3E%3Cg transform="translate(3,18)"%3E%3Cpath d="m0 0c-0.552 0-1 0.447-1 1 0 0.551 0.446 0.999 0.998 1 0.048 0 4.948 0.07 13.596 3.914 0.505 0.227 1.095-2e-3 1.32-0.508 0.224-0.505-3e-3 -1.095-0.508-1.32-9.089-4.039-14.193-4.086-14.406-4.086" fill="%2399aab5"/%3E%3C/g%3E%3Cg transform="translate(35,18)"%3E%3Cpath d="m 0,0 c -0.213,0 -5.316,0.047 -14.406,4.086 -0.505,0.225 -0.732,0.815 -0.508,1.32 0.225,0.505 0.817,0.732 1.32,0.508 C -4.946,2.07 -0.046,2 0.003,2 0.554,1.997 1,1.548 0.999,0.997 0.997,0.446 0.551,0 0,0" fill="%2399aab5"/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A');
background-repeat: no-repeat;
height: 3.5rem;
width: 3.5rem;
transition: transform 6.1s cubic-bezier(.68,-0.55,.27,1.55);
}
#bee-emoji-svg {
height: 3.5rem;
width: 3.5rem;
/* cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="25px" height="25px"%3E%3Cpath fill="%2377B255" d="M28.938 27.441c-2.554-.89-8.111-.429-9.938 1.331V17c0-.553-.447-1-1-1s-1 .447-1 1v11.772c-1.827-1.76-7.384-2.221-9.938-1.331-.741.259 5.264 8.749 9.507 4.507.168-.168.306-.33.431-.49V35c0 .553.447 1 1 1s1-.447 1-1v-3.542c.125.16.263.322.431.49 4.243 4.242 10.248-4.248 9.507-4.507z"/%3E%3Cpath fill="%23CCD6DD" d="M12.562 25.65c-.619-.266-1.107-.837-1.378-1.513l-1.266-3.306-3.258-1.393c-1.336-.574-1.876-1.922-1.304-3.259l1.362-3.181-1.364-3.269c-.541-1.35.15-2.868 1.5-3.408l3.272-1.281 1.449-3.384C12.148.32 13.496-.22 14.833.352l3.258 1.396L21.358.382c.675-.271 1.411-.276 2.03-.011.619.265 1.114.819 1.385 1.494l1.274 3.29 3.309 1.417c1.336.572 1.875 1.921 1.305 3.258l-1.451 3.384 1.365 3.267c.541 1.35-.15 2.866-1.5 3.407l-3.271 1.281-1.363 3.183c-.572 1.336-1.922 1.877-3.258 1.305l-3.308-1.417-3.267 1.364c-.676.271-1.427.311-2.046.046z"/%3E%3Cpath fill="%23E1E8ED" d="M29.356 6.572l-3.309-1.417-.055-.143c-1.565 1.337-5.215 4.354-5.215 4.354l.007.123C20.015 8.879 19.057 8.5 18 8.5V1.709L14.833.353c-1.337-.572-2.685-.032-3.258 1.304l-1.449 3.384-.061.024 4.753 4.754c-.814.813-1.318 1.938-1.318 3.181H6.717l-1.361 3.178c-.572 1.337-.032 2.686 1.304 3.259l3.258 1.394.002.006 4.496-5.142c.822 1.09 2.115 1.805 3.584 1.805h.005c.006 1.979.015 5.273.012 6.801l3.164 1.356c1.336.572 2.686.031 3.258-1.305l1.362-3.18-5.192-4.517c1.14-.816 1.89-2.145 1.89-3.654 0-.071-.018-.137-.021-.208 1.802.182 4.951.472 6.822.642l-.092-.22L30.66 9.83c.571-1.337.031-2.686-1.304-3.258z"/%3E%3Ccircle fill="%23F4900C" cx="18" cy="13" r="5"/%3E%3C/svg%3E'), auto;*/
}
.sakura {
opacity: 0;
position: fixed;
}
.envelope {
filter: grayscale();
opacity: 0;
position: fixed;
}
#bee-emoji-svg:hover .sakuraA, .sakuraA:hover {
opacity: 1;
animation-name: none;
transition: opacity 0.01s linear;
font-size:1em;
}
#bee-emoji-svg:hover #envelopeA, #envelopeA:hover {
animation-name: envelope-flyA;
animation-delay: 3.5s;
}
#bee-emoji-svg:hover #envelopeB, #envelopeB:hover {
animation-name: envelope-flyB;
animation-delay: 3.55s;
margin-top:2rem;
}
#bee-emoji-svg:hover #envelopeC, #envelopeC:hover {
animation-name: envelope-flyC;
animation-delay: 3.6s;
margin-top:3rem;
}
#bee-emoji-svg:hover #envelopeD, #envelopeD:hover {
animation-name: envelope-flyD;
animation-delay: 3.65s;
margin-top:2rem;
}
#bee-emoji-svg:hover .envelope, .envelope:hover {
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-play-state: running;
font-size:2em;
}
@keyframes envelope-flyA {
0% {
opacity: 1;
transform: translate(0, 0) rotate(-45deg);
}
20% {
transform: translate(15px, -15px) rotate(-45deg);
}
40% {
transform: translate(30px, -30px) rotate(-45deg);
opacity: .4;
}
60% {
transform: translate(45px, -45px) rotate(-45deg);
opacity: .1;
}
80% {
transform: translate(60px, -60px) rotate(-45deg);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes envelope-flyB {
0% {
opacity: 1;
transform: translate(0, 0) rotate(45deg);
}
20% {
transform: translate(15px, 15px) rotate(45deg);
}
40% {
transform: translate(30px, 30px) rotate(45deg);
opacity: .4;
}
60% {
transform: translate(45px, 45px) rotate(45deg);
opacity: .1;
}
80% {
transform: translate(60px, 60px) rotate(45deg);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes envelope-flyC {
0% {
opacity: 1;
transform: translate(0, 0) rotate(60deg);
}
20% {
transform: translate(15px, 30px) rotate(60deg);
}
40% {
transform: translate(30px, 60px) rotate(60deg);
opacity: .4;
}
60% {
transform: translate(45px, 90px) rotate(60deg);
opacity: .1;
}
80% {
transform: translate(60px, 120px) rotate(60deg);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes envelope-flyD {
0% {
opacity: 1;
transform: translate(0, 0);
}
20% {
transform: translate(15px, 0);
}
40% {
transform: translate(30px, 0);
opacity: .4;
}
60% {
transform: translate(45px, 0);
opacity: .1;
}
80% {
transform: translate(80px, 0);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes harvest {
0% {
transform: rotate(5deg) translateY(3px) translateX(3px);
transition: transform linear;
}
40% {
transform: translateY(3px) translateX(7px) rotate(12deg);
transition: transform linear;
}
40% {
transform: translateY(3px) translateX(4px) rotate(12deg);
transition: transform linear;
}
60% {
transform: translateY(3px) rotate(12deg);
transition: transform linear;
}
70% {
transform: translateY(3px) rotate(10deg);
transition: transform linear;
}
80% {
transform: translateY(3px) translateX(2px) rotate(7deg);
transition: transform linear;
}
100% {
transform: translate(3px, 3px) rotate(5deg); }
}
.xterm_title {
background: #22AA99;
color: white;
font-size: .8rem;
padding: 0.3em;
padding-left: 2px;
padding-right: 2px;
width: auto;
border: 1px ridge black;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom:0px;
margin-bottom:0px;
min-width: inherit;
display: grid;
grid-template-columns: [symbol] 40px [title] 1fr [buttons];
grid-template-rows: auto;
}
.xterm {
overflow: hidden;
font-size: 12px;
direction: ltr;
text-align: left;
background: #22AA99;
padding: 1px;
border: 1px solid black;
width: inherit;
max-width: min-content;
min-width: min-content;
}
.xterm-title {
grid-column: title;
grid-row: 1 / 1;
font-weight:800;
margin-top: 3px;
}
.xterm-symbol {
cursor:pointer;
grid-column: symbol;
grid-row: 1 / 1;
font-size: 1rem;
line-height: initial;
padding-left: 2px;
padding-right: 0px;
border-right: 3px double #cbebe7;
margin-right: 13px;
margin-left: 4px;
}
#main_svg {
max-width: 85vw;
width: inherit;
border: 1px solid black;
}