1165 lines
28 KiB
Plaintext
1165 lines
28 KiB
Plaintext
@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;
|
|
}
|