Skip to content

Commit 2e601d2

Browse files
FireIsGoodFireIsGood
committed
feat: DVD Bouncer Tool
1 parent 9df3314 commit 2e601d2

File tree

8 files changed

+306
-1
lines changed

8 files changed

+306
-1
lines changed

‎src/components/DvdBouncer.svelte‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<script lang="ts">
2+
let addBackgrounds: boolean = false;
3+
let width: number = 9.2;
4+
let height: number = 8;
5+
</script>
6+
7+
<div class={{ wrapper: true, backgrounds: addBackgrounds }} style={`--width: ${width}rem;--height: ${height}rem`}>
8+
<div>
9+
<p class="label">Marquees</p>
10+
<!-- svelte-ignore a11y-distracting-elements -->
11+
<marquee behavior="alternate" direction="up" class="outer">
12+
<!-- svelte-ignore a11y-distracting-elements -->
13+
<marquee behavior="alternate" direction="right" class="inner">📀</marquee>
14+
</marquee>
15+
</div>
16+
<div class="css-styled">
17+
<p class="label">CSS Animations</p>
18+
<div class="outer">
19+
<div class="inner">📀</div>
20+
</div>
21+
</div>
22+
</div>
23+
<div>
24+
<fieldset class="grid">
25+
<label>
26+
Width
27+
<input type="number" max="30" min="0" bind:value={width} />
28+
</label>
29+
<label>
30+
Height
31+
<input type="number" max="30" min="0" bind:value={height} />
32+
</label>
33+
</fieldset>
34+
<label>
35+
<input type="checkbox" bind:checked={addBackgrounds} /> Backgrounds
36+
</label>
37+
</div>
38+
39+
<style>
40+
.label {
41+
margin-bottom: 0;
42+
text-align: center;
43+
}
44+
45+
fieldset.grid {
46+
row-gap: 0.5rem;
47+
margin-bottom: 0.5;
48+
}
49+
label input {
50+
margin-bottom: 0;
51+
}
52+
53+
/* Bouncer styles */
54+
:root {
55+
--outer: #f1aec2;
56+
--inner: #acd19c;
57+
--width: 9.2rem;
58+
--height: 8rem;
59+
--aspect-ratio: 9.2 / 8;
60+
--speed: 3.35s;
61+
}
62+
63+
.wrapper {
64+
display: flex;
65+
flex-wrap: wrap;
66+
justify-content: center;
67+
gap: 1rem;
68+
margin-bottom: 1rem;
69+
}
70+
71+
marquee {
72+
display: block;
73+
}
74+
.outer {
75+
width: var(--width);
76+
height: var(--height);
77+
background: var(--pico-background-color);
78+
border: var(--pico-border-width) solid var(--pico-card-border-color);
79+
}
80+
/* Add backgrounds */
81+
.backgrounds {
82+
.outer {
83+
background: var(--outer);
84+
}
85+
.inner {
86+
background: var(--inner);
87+
}
88+
}
89+
90+
.css-styled {
91+
.outer {
92+
position: relative;
93+
width: var(--width);
94+
height: var(--height);
95+
}
96+
97+
.inner {
98+
position: absolute;
99+
animation:
100+
bounce-up var(--speed) linear infinite,
101+
bounce-right calc(var(--speed) * var(--aspect-ratio)) linear infinite;
102+
}
103+
}
104+
105+
@keyframes bounce-right {
106+
0%,
107+
100% {
108+
left: 0;
109+
}
110+
50% {
111+
left: calc(100% - 1rem);
112+
}
113+
}
114+
115+
@keyframes bounce-up {
116+
0%,
117+
100% {
118+
bottom: 0;
119+
}
120+
50% {
121+
bottom: calc(100% - 1rem);
122+
}
123+
}
124+
</style>

‎src/components/ToolList.astro‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,13 @@ const tools: Tool[] = [
4747
date: "2024 06 19",
4848
url: "/tools/random-number-generator",
4949
},
50+
{
51+
title: "DVD Bouncer Tool",
52+
description: "Generate DVD bouncers",
53+
cover: prefix + "dvdbouncer.png",
54+
date: "2025 01 18",
55+
url: "/tools/dvd-bounce-tool",
56+
},
5057
].sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf());
5158
const toolsLimited: Tool[] = tools.slice(0, toolCount);
5259

‎src/content/blog/making-c-not-suck.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ default for Google is `'Attach'`, but if you wish to use another style it is imp
165165

166166
Here is what they look like:
167167

168-
```c
168+
```c title="test.c"
169169
// K&R ('Attach')
170170
while (x == y) {
171171
foo();

‎src/content/blog/semantic-html.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: "Semantic HTML and You"
3+
description: "Undoing the scourge of <div>s"
4+
pubDate: "1625-04-20"
5+
cover: "@/images/placeholder.png"
6+
draft: true
7+
---
8+
9+
Talks about semantic HTML in my experience and gives a general idea of how to use it.
10+
11+
- What it is
12+
- Using tags that make sense
13+
- Why it's good
14+
- CSS selection
15+
- SEO (no one cares)
16+
- Looks clean
17+
- How to do it
18+
- Examples of different formats of HTML
19+
- Article example
20+
- Home page example
21+
- CSS examples
22+
- Possible pitfalls
23+
- Semantic HTML for styling (H1-6 for font size)
24+
- Semantics for similarly styled tags (i, b, ruby, ul/ol swap)
25+
- More resources
26+
- [Semrush - Semantic HTML Guide](https://www.semrush.com/blog/semantic-html5-guide/) Guide on the overall structure
27+
of semantic HTML, more in-depth on SEO.
28+
- [web.dev - HTML](https://web.dev/html) Guide on the usage of many specific HTML elements
29+
- [MDN Web Docs - HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) All elements
30+
listed out
31+
- [DevDocs - HTML](https://devdocs.io/html/) Tool to quickly search MDN for HTML elements
32+
33+
BEFORE I PUBLISH THIS: link this in the Static Sites page

‎src/images/dvdbouncer.png‎

106 KB
Loading

‎src/misc/dvdbouncer-animation.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<div class="outer">
2+
<div class="inner">📀</div>
3+
</div>
4+
5+
<style>
6+
:root {
7+
/* Your values here */
8+
--width: 9.2rem;
9+
--height: 8rem;
10+
--aspect-ratio: 9.2 / 8;
11+
--speed: 3.35s;
12+
}
13+
.outer {
14+
position: relative;
15+
display: block;
16+
width: var(--width);
17+
height: var(--height);
18+
border: 0.0625rem solid #bcbec0;
19+
}
20+
.inner {
21+
position: absolute;
22+
display: block;
23+
animation:
24+
bounce-up var(--speed) linear infinite,
25+
bounce-right calc(var(--speed) * 9.2 / 8) linear infinite;
26+
}
27+
28+
@keyframes bounce-right {
29+
0%,
30+
100% {
31+
left: 0;
32+
}
33+
50% {
34+
left: calc(100% - 1rem);
35+
}
36+
}
37+
38+
@keyframes bounce-up {
39+
0%,
40+
100% {
41+
bottom: 0;
42+
}
43+
50% {
44+
bottom: calc(100% - 1rem);
45+
}
46+
}
47+
</style>

‎src/misc/dvdbouncer-marquee.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<marquee behavior="alternate" direction="up" class="outer">
2+
<marquee behavior="alternate" direction="right" class="inner">📀</marquee>
3+
</marquee>
4+
5+
<style>
6+
:root {
7+
/* Your values here */
8+
--width: 9.2rem;
9+
--height: 8rem;
10+
}
11+
.outer {
12+
display: block;
13+
width: var(--width);
14+
height: var(--height);
15+
border: 0.0625rem solid #bcbec0;
16+
}
17+
.inner {
18+
display: block;
19+
}
20+
</style>

‎src/pages/tools/dvd-bounce-tool.astro‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
import Layout from "@/layouts/Layout.astro";
3+
import Breadcrumb from "@/components/Breadcrumb.astro";
4+
import Ending from "@/components/Ending.astro";
5+
6+
import DvdBouncer from "@/components/DvdBouncer.svelte";
7+
import dvdBouncerImage from "@/images/dvdbouncer.png";
8+
9+
import { Code } from "astro-expressive-code/components";
10+
import bouncerMarquee from "@/misc/dvdbouncer-marquee.html?raw";
11+
import bouncerAnimation from "@/misc/dvdbouncer-animation.html?raw";
12+
---
13+
14+
<Layout
15+
suffix="Tools"
16+
title="FireIsTools - DVD Bouncer Tool"
17+
description="Generate DVD bouncers"
18+
image={dvdBouncerImage.src}
19+
>
20+
<Breadcrumb />
21+
<article>
22+
<header>
23+
<h1>DVD Bounce Thing</h1>
24+
<p><em>A DVD <abbr title="this is not a real word">Bouncer</abbr> thing. Because funny.</em></p>
25+
</header>
26+
<DvdBouncer client:load />
27+
<hr />
28+
<p>DVD bouncers are very important to society. Here's a tool to make them.</p>
29+
<h2>Marquee Hack</h2>
30+
<p>You can actually just do a marquee and cheat a little with some styles.</p>
31+
<Code title="index.html" lang="html" code={bouncerMarquee} />
32+
<h2>CSS Animations</h2>
33+
<p>Or you can do it with animations, though you'll have to have more style boilerplate</p>
34+
<Code title="index.html" lang="html" code={bouncerAnimation} />
35+
<h2>Potential Issues</h2>
36+
<ul>
37+
<li>
38+
The <code>&lt;marquee&gt;</code> element isn't supported on Safari. If you wanted those users to see it, you will
39+
have to use the CSS solution.
40+
</li>
41+
<li>
42+
The CSS animations uses a <code>calc</code> function that assumes a width of 1rem. This doesn't work if your styles
43+
are otherwise.
44+
</li>
45+
</ul>
46+
<h2>Additional Resources</h2>
47+
<ul>
48+
<li><a href="https://devdocs.io/html/element/marquee" target="_blank">DevDocs &ndash; Marquee element</a></li>
49+
<li>
50+
<a href="https://www.youtube.com/watch?v=5mGuCdlCcNM" target="_blank" referrerpolicy="no-referrer"
51+
>YouTube &ndash; Bouncing DVD Logo 10 hours</a
52+
> If you wanted a video to put on in the background
53+
</li>
54+
</ul>
55+
</article>
56+
<section>
57+
<Ending />
58+
</section>
59+
</Layout>
60+
61+
<style>
62+
header {
63+
margin: 0;
64+
padding: 0;
65+
66+
background-color: transparent;
67+
68+
text-align: center;
69+
padding-bottom: 1rem;
70+
margin-top: 1rem;
71+
margin-bottom: 2rem;
72+
line-height: 1;
73+
}
74+
</style>

0 commit comments

Comments
 (0)