kickable 0.6.1

kickable is a crate created to answer the age old question... Can I kick it?
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

/*
 * Tailwind input for the kickable GitHub Pages site.
 * Build the vendored stylesheet with:
 *   tailwindcss -i tailwind.input.css -o docs/styles.css --minify
 * (Using the locally installed Tailwind v4 CLI.)
 */
@import "tailwindcss";

@source "./docs/index.html";

@theme {
  --color-ink:   #0c0c0a;
  --color-ink2:  #141310;
  --color-bone:  #ECE8DD;
  --color-muted: #8c887b;
  --color-lime:  #C6F227;
  --color-coral: #FF4D2E;

  --font-display: "Anton", "Impact", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --animate-marquee: marquee 22s linear infinite;
  --animate-blink:   blink 1.1s steps(1) infinite;
  --animate-reveal:  reveal 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- custom site styling (plain CSS, passed through) ---- */
:root { color-scheme: dark; }
html, body { background: #0c0c0a; }
body { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* Film grain overlay */
.grain::before {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Subtle scanlines */
.scan { background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 4px); }
/* Hairline grid backdrop */
.grid-bg {
  background-image:
    linear-gradient(rgba(198,242,39,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,242,39,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 80%);
}
.stroke-text {
  color: transparent;
  -webkit-text-stroke: 1.5px #ECE8DD;
  text-stroke: 1.5px #ECE8DD;
}
.glow { text-shadow: 0 0 28px rgba(198,242,39,.45); }
.delay-1 { animation-delay: .08s; } .delay-2 { animation-delay: .18s; }
.delay-3 { animation-delay: .30s; } .delay-4 { animation-delay: .44s; }
.delay-5 { animation-delay: .60s; }
::selection { background: #C6F227; color: #0c0c0a; }
a, button { -webkit-tap-highlight-color: transparent; }