Compare commits

..

No commits in common. "1d24072c3d572c1ed97160bb59079b607004a3b1" and "f146aad72812b6ad1ed3acce710533d3910e38d1" have entirely different histories.

13 changed files with 4 additions and 273 deletions

BIN
bun.lockb

Binary file not shown.

View File

@ -1,7 +1,6 @@
// Installed Plugins // Installed Plugins
import pluginRss from "@11ty/eleventy-plugin-rss"; import pluginRss from "@11ty/eleventy-plugin-rss";
import pluginEleventyNavigation from "@11ty/eleventy-navigation"; import pluginEleventyNavigation from "@11ty/eleventy-navigation";
import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
import pluginEmbedEverything from "eleventy-plugin-embed-everything"; import pluginEmbedEverything from "eleventy-plugin-embed-everything";
import pluginMetagen from "eleventy-plugin-metagen"; import pluginMetagen from "eleventy-plugin-metagen";
import pluginEmojiReadTime from "@11tyrocks/eleventy-plugin-emoji-readtime"; import pluginEmojiReadTime from "@11tyrocks/eleventy-plugin-emoji-readtime";
@ -18,7 +17,6 @@ export default function(eleventyConfig) {
// Installed Plugins // Installed Plugins
eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(pluginEleventyNavigation); eleventyConfig.addPlugin(pluginEleventyNavigation);
eleventyConfig.addPlugin(pluginSyntaxHighlight, { preAttributes: { tabindex: 0 } });
eleventyConfig.addPlugin(pluginEmbedEverything, { add: ['soundcloud'] }); eleventyConfig.addPlugin(pluginEmbedEverything, { add: ['soundcloud'] });
eleventyConfig.addPlugin(pluginMetagen); eleventyConfig.addPlugin(pluginMetagen);
eleventyConfig.addPlugin(pluginEmojiReadTime); eleventyConfig.addPlugin(pluginEmojiReadTime);

View File

@ -12,7 +12,6 @@
"@11ty/eleventy": "^3.0.0-beta.1", "@11ty/eleventy": "^3.0.0-beta.1",
"@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-navigation": "^0.3.5",
"@11ty/eleventy-plugin-rss": "^2.0.2", "@11ty/eleventy-plugin-rss": "^2.0.2",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1", "@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1",
"@uncenter/eleventy-plugin-toc": "^1.0.3", "@uncenter/eleventy-plugin-toc": "^1.0.3",
"@zachleat/details-utils": "^2.0.2", "@zachleat/details-utils": "^2.0.2",

View File

@ -4,7 +4,6 @@
"content", "content",
"plugins", "plugins",
"components", "components",
"a11y-syntax-highlighting-dark",
"pridesymbols", "pridesymbols",
"utility" "utility"
] %} ] %}

View File

@ -1,188 +0,0 @@
/**
* a11y-dark theme for JavaScript, CSS, and HTML
* Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
* @author ericwbailey
*/
/*
Theme
*/
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #2b2b2b;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #d4d0ab;
}
.token.punctuation {
color: #fefefe;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #ffa07a;
}
.token.boolean,
.token.number {
color: #00e0e0;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #abe338;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #00e0e0;
}
.token.atrule,
.token.attr-value,
.token.function {
color: #ffd700;
}
.token.keyword {
color: #00e0e0;
}
.token.regex,
.token.important {
color: #ffd700;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
/*
Plugin support
*/
/* Line highlight */
.line-highlight {
background: rgba(255, 217, 0, 0.10);
border-top: 1px solid rgba(255, 217, 0, 0.55);
border-bottom: 1px solid rgba(255, 217, 0, 0.55);
}
/* Line numbers */
.line-numbers .line-numbers-rows {
border-right: 1px solid #F8F8F2;
}
.line-numbers-rows > span:before {
color: #D4D0AB;
}
/*
High contrast mode support
*/
@media screen and (-ms-high-contrast: active) {
code[class*="language-"],
pre[class*="language-"] {
color: windowText;
background: window;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: window;
}
.token.important {
background: highlight;
color: window;
font-weight: normal;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.keyword,
.token.operator,
.token.selector {
font-weight: bold;
}
.token.attr-value,
.token.comment,
.token.doctype,
.token.function,
.token.keyword,
.token.operator,
.token.property,
.token.string {
color: highlight;
}
.token.attr-value,
.token.url {
font-weight: normal;
}
}

View File

@ -1,5 +0,0 @@
---
date: 2024-08-02
---
* Added my first publicly released code snippet on this website: [Responsive Disability Pride Flag CSS Background](/projects/snippets/disability-pride-flag-background).

View File

@ -23,15 +23,6 @@ eleventyComputed:
</ul> </ul>
{% endcontainer %} {% endcontainer %}
{% container "section", "content__section" %}
## My Code Snippets
<ul>
{%- for snippet in collections["code snippets"] -%}
<li><a href="{{ snippet.url }}">{{ snippet.data.title }}</a> — {{ snippet.data.desc }}</li>
{%- endfor -%}
</ul>
{% endcontainer %}
{% container "section", "content__section" %} {% container "section", "content__section" %}
## My Drawings ## My Drawings

View File

@ -1,5 +1,5 @@
--- ---
projectTitle: BellaBuffs with PHPMailer Integration title: BellaBuffs with PHPMailer Integration
desc: My fork of BellaBuffs, with PHPMailer powering the email sending features. desc: My fork of BellaBuffs, with PHPMailer powering the email sending features.
eleventyNavigation: eleventyNavigation:
order: 4 order: 4

View File

@ -1,6 +1,3 @@
{ {
"tags": ["code projects"], "tags": ["code projects"]
"eleventyComputed": {
"title": "{{ projectTitle }} | Code Projects"
}
} }

View File

@ -1,52 +0,0 @@
---
codeTitle: Responsive Disability Pride Flag CSS Background
desc: CSS code snippet of Disability Pride Flag background that can adapt to different widths and screen sizes.
eleventyNavigation:
order: 5
---
There have been CSS code snippets of LGBTQ+ pride flag backgrounds out there, but I could not find one for the [Disability Pride Flag](https://www.womansday.com/life/a43964487/disability-pride-flag/), which was created by [Ann Magill](https://capri0mni.dreamwidth.org/837596.html) and released in 2021.
Therefore, at the start of [Disability Pride Month](https://www.weareincludability.co.uk/resources/what-is-disability-pride-month) in July 2024, I decided to code a Disability Pride Flag background in CSS, and now I am releasing my code snippet for public use.
My Disability Pride Flag CSS background is done with a combination of CSS background properties and inline SVG URL, and designed to be responsive, so it can adapt to different screen sizes and devices.
I have used JavaScript to set up the header of the main part of this website, so it will display the Disability Pride Flag as its background during July.
To code the Disability Pride Flag in CSS and make it responsive, I first downloaded an [SVG file of the Disability Pride Flag](https://commons.wikimedia.org/wiki/File:Visually_Safe_Disability_Pride_Flag.svg) from Wikimedia Commons, then modified the stripes in Adobe Illustrator CS5 (the only version of Adobe Illustrator I actually own) to allow the entire stripes to be shown in wide backgrounds, instead of appearing to be cut off mid-way. After finishing the edit in Illustrator, I saved the SVG file, opened it in Visual Studio Code to obtain the SVG code, used Jake Archibald's [SVGOMG](https://jakearchibald.github.io/svgomg/) to optimise the SVG code, then encode it into CSS-ready code by using [Yoksel's URL-encoder for SVG](https://yoksel.github.io/url-encoder/).
Since Ann Magill released the Disability Pride Flag to the public domain under [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/), I am doing the same to my responsive Disability Pride Flag CSS background. Therefore, you are free to use my code and do what you want with it without asking for permission or crediting me.
## Demo
{%- css %}
.disability-pride-flag {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='651.83' height='300' viewBox='-90.33 0 651.83 300'%3E%3Cpath fill='%233BB07D' stroke='%233BB07D' stroke-miterlimit='10' stroke-width='.351' d='M561.5 300 162.902.664h-50.634L510.867 300z'/%3E%3Cpath fill='%237BC2E0' stroke='%237BC2E0' stroke-miterlimit='10' stroke-width='.351' d='M510.711 300 112.113.664H61.478L460.078 300z'/%3E%3Cpath fill='%23E8E8E8' stroke='%23E8E8E8' stroke-miterlimit='10' stroke-width='.351' d='M460.077 300 61.478.664H8.094L406.693 300z'/%3E%3Cpath fill='%23EEDE77' stroke='%23EEDE77' stroke-miterlimit='10' stroke-width='.351' d='M406.692 300 8.095.664h-49.111L357.584 300z'/%3E%3Cpath fill='%23CF7280' stroke='%23CF7280' stroke-miterlimit='10' stroke-width='.351' d='M357.378 300-41.22.664h-49.11L308.27 300z'/%3E%3C/svg%3E");
background-color: #595959;
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center;
}
.disability-pride-flag.demo {
width: 100%;
height: 20rem;
}
{% endcss %}
<div class="disability-pride-flag demo" role="img" aria-label="Demo of the Disability Pride flag coded in CSS"></div>
## Code
CSS:
```css
.disability-pride-flag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='651.83' height='300' viewBox='-90.33 0 651.83 300'%3E%3Cpath fill='%233BB07D' stroke='%233BB07D' stroke-miterlimit='10' stroke-width='.351' d='M561.5 300 162.902.664h-50.634L510.867 300z'/%3E%3Cpath fill='%237BC2E0' stroke='%237BC2E0' stroke-miterlimit='10' stroke-width='.351' d='M510.711 300 112.113.664H61.478L460.078 300z'/%3E%3Cpath fill='%23E8E8E8' stroke='%23E8E8E8' stroke-miterlimit='10' stroke-width='.351' d='M460.077 300 61.478.664H8.094L406.693 300z'/%3E%3Cpath fill='%23EEDE77' stroke='%23EEDE77' stroke-miterlimit='10' stroke-width='.351' d='M406.692 300 8.095.664h-49.111L357.584 300z'/%3E%3Cpath fill='%23CF7280' stroke='%23CF7280' stroke-miterlimit='10' stroke-width='.351' d='M357.378 300-41.22.664h-49.11L308.27 300z'/%3E%3C/svg%3E");
    background-color: #595959;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
}
```
After copying the above snippet in a CSS stylesheet or the HTML `<style>` tags, to apply the background to an HTML element, simply add the CSS class name `disability-pride-flag` (you can rename the class name if you want) to the HTML element's `class` attribute.

View File

@ -1,6 +0,0 @@
{
"tags": ["code snippets"],
"eleventyComputed": {
"title": "{{ codeTitle }} | Code Snippets"
}
}

View File

@ -27,7 +27,7 @@ https://www.youtube.com/watch?v=jzqfXoOvGrw
As shown in the screenshot above, once you begin this conversation, the script `k_hjuh_p17` will fire, and this is the source of the script in question: As shown in the screenshot above, once you begin this conversation, the script `k_hjuh_p17` will fire, and this is the source of the script in question:
```c ```
void main() void main()
{ {
int iGender = GetGender(GetPCSpeaker()); int iGender = GetGender(GetPCSpeaker());

View File

@ -1,7 +1,7 @@
--- ---
title: Colophon title: Colophon
keyword: colophon page keyword: colophon page
updated: 2024-08-02 updated: 2024-07-27
toc: true toc: true
eleventyNavigation: eleventyNavigation:
order: 14 order: 14
@ -25,7 +25,6 @@ Previously, this website was hosted on [Neocities](https://neocities.org/) until
## Plugins ## Plugins
* Eleventy's official [RSS](https://www.11ty.dev/docs/plugins/rss/) plugin * Eleventy's official [RSS](https://www.11ty.dev/docs/plugins/rss/) plugin
* Eleventy's official [Navigation](https://www.11ty.dev/docs/plugins/navigation/) plugin * Eleventy's official [Navigation](https://www.11ty.dev/docs/plugins/navigation/) plugin
* Eleventy's official [Syntax Highlighting](https://www.11ty.dev/docs/plugins/syntaxhighlight/) plugin
* [@zachleat/details-utils](https://www.npmjs.com/package/@zachleat/details-utils) * [@zachleat/details-utils](https://www.npmjs.com/package/@zachleat/details-utils)
### Eleventy Community Plugins ### Eleventy Community Plugins
@ -46,7 +45,6 @@ Eleventy has the Markdown parser [markdown-it](https://www.npmjs.com/package/mar
## Self-hosted Assets ## Self-hosted Assets
* [Lexend](https://www.lexend.com/) font family — used as the default font of this site * [Lexend](https://www.lexend.com/) font family — used as the default font of this site
* [Intel One Mono](https://www.intel.com/content/www/us/en/company-overview/one-monospace-font.html) typeface — used as the monospaced font of this site * [Intel One Mono](https://www.intel.com/content/www/us/en/company-overview/one-monospace-font.html) typeface — used as the monospaced font of this site
* Eric Bailey's [a11y-syntax-highlighting](https://github.com/ericwbailey/a11y-syntax-highlighting) CSS dark mode stylesheet for Prism.js
## JavaScript ## JavaScript
Due to this website being a static site, JavaScript is used to create dynamic and interactive components of this site. Here is a list of how JavaScript is used on this site: Due to this website being a static site, JavaScript is used to create dynamic and interactive components of this site. Here is a list of how JavaScript is used on this site: