mirror of
https://github.com/G2-Games/website.git
synced 2025-04-20 02:12:53 -05:00
Compare commits
No commits in common. "7a9c919b0e98f271eab4ada409b11c53225e6e21" and "bc8c7dbc311a6c80e6163a7263b5e6858940c540" have entirely different histories.
7a9c919b0e
...
bc8c7dbc31
18 changed files with 116 additions and 432 deletions
6
.gitignore
vendored
6
.gitignore
vendored
|
@ -1,5 +1,5 @@
|
||||||
blog
|
blog/
|
||||||
Assets
|
Assets/
|
||||||
assets/hosted_files
|
assets/hosted_files/
|
||||||
random/maniacs/terminal/
|
random/maniacs/terminal/
|
||||||
*.mp4
|
*.mp4
|
||||||
|
|
1
Assets
Symbolic link
1
Assets
Symbolic link
|
@ -0,0 +1 @@
|
||||||
|
assets
|
|
@ -5,7 +5,7 @@ code {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-family: "Maple Mono", monospace;
|
font-family: "Maple Mono", monospace;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 13pt;
|
/*font-size: 14pt;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
div.code-toolbar {
|
div.code-toolbar {
|
||||||
|
@ -30,6 +30,7 @@ code[class*="language-"] {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
font-family: "Maple Mono", monospace;
|
font-family: "Maple Mono", monospace;
|
||||||
border-radius: 13px;
|
border-radius: 13px;
|
||||||
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre > code{
|
pre > code{
|
||||||
|
|
Binary file not shown.
Binary file not shown.
1
assets/hosted_files
Symbolic link
1
assets/hosted_files
Symbolic link
|
@ -0,0 +1 @@
|
||||||
|
/media/storage
|
|
@ -1,4 +1,4 @@
|
||||||
/* --- Image grid stuff --- */
|
/* Image grid stuff */
|
||||||
section.img_grid {
|
section.img_grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -1,54 +0,0 @@
|
||||||
.music_tile {
|
|
||||||
font-family: "Noto Sans JP", sans-serif;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-width: 300px;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
.track_name {
|
|
||||||
font-size: 1.2em;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.artist_name {
|
|
||||||
font-size: 1em;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.album_name {
|
|
||||||
font-size: 0.9em;
|
|
||||||
color: #c1bfae;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p#musicStatus {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin: 10px 0px;
|
|
||||||
border: none;
|
|
||||||
height: 1px;
|
|
||||||
background-color: grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
height: 260px;
|
|
||||||
width: 260px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,100 +0,0 @@
|
||||||
async function getData(url) {
|
|
||||||
try {
|
|
||||||
const response = await fetch(url);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`Response status: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const json = await response.json();
|
|
||||||
return json
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const USERNAME = "G2";
|
|
||||||
const LUCENE_ESCAPE = /([\!\*\+\-\=\<\>\&\|\(\)\[\]\{\}\^\~\?\:\\/"])/g;
|
|
||||||
|
|
||||||
let artworkTile = document.getElementById("mainArtwork");
|
|
||||||
let albumTitle = document.getElementById("albumTitle");
|
|
||||||
let albumArtist = document.getElementById("albumArtist");
|
|
||||||
let track = document.getElementById("track");
|
|
||||||
let status = document.getElementById("musicStatus");
|
|
||||||
let prev_mbid = null;
|
|
||||||
|
|
||||||
async function main() {
|
|
||||||
// Get my currently playing song!
|
|
||||||
let statusTmp = "Currently playing:";
|
|
||||||
let songInfo = await getData("https://api.listenbrainz.org/1/user/" + USERNAME + "/playing-now")
|
|
||||||
if (songInfo["payload"]["count"] == 0) {
|
|
||||||
// If no current song, get last played
|
|
||||||
songInfo = await getData("https://api.listenbrainz.org/1/user/" + USERNAME + "/listens?count=1")
|
|
||||||
statusTmp = "Last played song:";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (prev_mbid != null && prev_mbid == JSON.stringify(songInfo)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
prev_mbid = JSON.stringify(songInfo);
|
|
||||||
|
|
||||||
let artistName = songInfo["payload"]["listens"][0]["track_metadata"]["artist_name"];
|
|
||||||
let trackName = songInfo["payload"]["listens"][0]["track_metadata"]["track_name"];
|
|
||||||
let releaseMBID = songInfo["payload"]["listens"][0]["track_metadata"]["additional_info"]["release_mbid"];
|
|
||||||
if (releaseMBID == null && songInfo["payload"]["listens"][0]["track_metadata"]["mbid_mapping"] != null) {
|
|
||||||
releaseMBID = songInfo["payload"]["listens"][0]["track_metadata"]["mbid_mapping"]["release_mbid"];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Search for the MBID if it's not included in the data
|
|
||||||
if (releaseMBID == null) {
|
|
||||||
let artistSearchName = encodeURIComponent(artistName.replace(LUCENE_ESCAPE, "\\$1"));
|
|
||||||
let trackSearchName = encodeURIComponent(trackName.replace(LUCENE_ESCAPE, "\\$1"));
|
|
||||||
|
|
||||||
console.log("https://musicbrainz.org/ws/2/recording/?query=" + trackSearchName + " AND artist:%22" + artistSearchName + "%22&fmt=json");
|
|
||||||
let searchedReleases = await getData(
|
|
||||||
"https://musicbrainz.org/ws/2/recording/?query=" + trackSearchName + " AND artist:%22" + artistSearchName + "%22&fmt=json"
|
|
||||||
);
|
|
||||||
|
|
||||||
console.log(searchedReleases);
|
|
||||||
|
|
||||||
if (searchedReleases["count"] >= 1) {
|
|
||||||
if (searchedReleases["recordings"][0]["releases"][0]) {
|
|
||||||
|
|
||||||
}
|
|
||||||
releaseMBID = searchedReleases["recordings"][0]["releases"][0]["id"];
|
|
||||||
console.log("Found MBID by search " + releaseMBID);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let albumName = "Unknown Album";
|
|
||||||
let artworkSrc = "https://placehold.co/260/2220/FFFDE6?text=?&font=roboto";
|
|
||||||
if (releaseMBID != null) {
|
|
||||||
// Get release information (like album title)
|
|
||||||
let releaseInfo = await getData("https://musicbrainz.org/ws/2/release/" + releaseMBID + "?fmt=json&inc=release-groups");
|
|
||||||
albumName = releaseInfo["title"];
|
|
||||||
|
|
||||||
let releaseGroupMBID = releaseInfo["release-group"]["id"];
|
|
||||||
|
|
||||||
// Grab the image from the release ID
|
|
||||||
let coverArtGroup = await fetch("https://coverartarchive.org/release-group/" + releaseGroupMBID + "/front-500");
|
|
||||||
if (coverArtGroup.status == 200) {
|
|
||||||
artworkSrc = coverArtGroup.url
|
|
||||||
} else {
|
|
||||||
let coverArtTrack = await fetch("https://coverartarchive.org/release/" + releaseMBID + "/front-500");
|
|
||||||
if (coverArtTrack.status == 200) {
|
|
||||||
artworkSrc = coverArtTrack.url;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log("%s %s by %s (%s)", statusTmp, trackName, artistName, albumName);
|
|
||||||
|
|
||||||
// Fill in the data
|
|
||||||
status.textContent = statusTmp;
|
|
||||||
albumArtist.textContent = artistName;
|
|
||||||
track.textContent = trackName;
|
|
||||||
albumTitle.textContent = albumName;
|
|
||||||
artworkTile.src = artworkSrc;
|
|
||||||
}
|
|
||||||
|
|
||||||
main().catch(console.log);
|
|
||||||
setInterval(main, 10000);
|
|
|
@ -35,7 +35,8 @@ hr {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Header --- */
|
/* Header */
|
||||||
|
|
||||||
header {
|
header {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
|
@ -120,7 +121,8 @@ abbr {
|
||||||
text-decoration-line: dotted;
|
text-decoration-line: dotted;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Main Content --- */
|
/* Main Content */
|
||||||
|
|
||||||
main {
|
main {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 50% 50%;
|
grid-template-columns: 50% 50%;
|
||||||
|
@ -183,23 +185,13 @@ main section {
|
||||||
|
|
||||||
.centered {
|
.centered {
|
||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
/*max-width: 800px;*/
|
max-width: 800px;
|
||||||
/*min-width: 100%;*/
|
min-width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.three_column {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
width: fit-content;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main section img {
|
main section img {
|
||||||
max-width: 95%;
|
max-width: 95%;
|
||||||
margin: 20px auto;
|
margin: auto;
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: 13px;
|
border-radius: 13px;
|
||||||
}
|
}
|
||||||
|
@ -316,7 +308,8 @@ main .tags p:first-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Footer --- */
|
/* Footer */
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
|
@ -333,7 +326,36 @@ footer p:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Blog Style --- */
|
nav.paginator {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 1.8em;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.paginator::hover {
|
||||||
|
all: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.paginator .next {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.paginator .prev {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blog Style */
|
||||||
blockquote {
|
blockquote {
|
||||||
font-family: "IBM Plex Serif", serif;
|
font-family: "IBM Plex Serif", serif;
|
||||||
font-size: 15pt;
|
font-size: 15pt;
|
||||||
|
@ -375,36 +397,7 @@ mark::selection {
|
||||||
border-left: 1px solid grey;
|
border-left: 1px solid grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.paginator {
|
/* Mobile/Small Screens */
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 1.8em;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.paginator::hover {
|
|
||||||
all: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.paginator .next {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.paginator .prev {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Mobile/Small Screens --- */
|
|
||||||
@media(max-width: 700px) {
|
@media(max-width: 700px) {
|
||||||
header {
|
header {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -435,11 +428,6 @@ nav.paginator .prev {
|
||||||
|
|
||||||
.centered {
|
.centered {
|
||||||
grid-column: span 1;
|
grid-column: span 1;
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.three_column {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
figure.showcase {
|
figure.showcase {
|
||||||
|
@ -454,7 +442,8 @@ nav.paginator .prev {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Dark theme stuff --- */
|
|
||||||
|
/* Dark theme stuff */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
body {
|
body {
|
||||||
color: #fffde6;
|
color: #fffde6;
|
||||||
|
@ -478,13 +467,13 @@ nav.paginator .prev {
|
||||||
color: #b4e2ff;
|
color: #b4e2ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Header --- */
|
/* Header */
|
||||||
|
|
||||||
header .navigation a.active::after {
|
header .navigation a.active::after {
|
||||||
border-bottom: 2px solid #fffde6;
|
border-bottom: 2px solid #fffde6;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Main Content --- */
|
/* Main Content */
|
||||||
|
|
||||||
main > a:link, main > a:visited, main > a:hover {
|
main > a:link, main > a:visited, main > a:hover {
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
|
@ -494,6 +483,11 @@ nav.paginator .prev {
|
||||||
background-color: aliceblue;
|
background-color: aliceblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
main p {
|
||||||
|
color: #FFF;
|
||||||
|
}*/
|
||||||
|
|
||||||
section.clickable {
|
section.clickable {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #2b2b32;
|
background-color: #2b2b32;
|
||||||
|
|
1
blog
Symbolic link
1
blog
Symbolic link
|
@ -0,0 +1 @@
|
||||||
|
/var/www/blog/public/
|
44
index.html
44
index.html
|
@ -20,11 +20,8 @@ A place for personal projects and things. Enjoy!">
|
||||||
<script data-goatcounter="https://resize.g2games.dev/count"
|
<script data-goatcounter="https://resize.g2games.dev/count"
|
||||||
async src="//resize.g2games.dev/count.js"></script>
|
async src="//resize.g2games.dev/count.js"></script>
|
||||||
|
|
||||||
<!-- The Stylesheets -->
|
<!-- The Stylesheet -->
|
||||||
<link rel="stylesheet" href="/assets/main-style.css">
|
<link rel="stylesheet" href="/assets/main-style.css">
|
||||||
|
|
||||||
<!-- Music Tile -->
|
|
||||||
<link rel="stylesheet" href="/assets/lib/scripts/music_status.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
@ -59,10 +56,8 @@ A place for personal projects and things. Enjoy!">
|
||||||
<p>Some more of my links:</p>
|
<p>Some more of my links:</p>
|
||||||
<p style="text-align:center;">
|
<p style="text-align:center;">
|
||||||
<a href="https://github.com/G2-Games">GitHub</a> ⧫
|
<a href="https://github.com/G2-Games">GitHub</a> ⧫
|
||||||
<a href="/git">Forgejo</a> ⧫
|
<a href="/git">Gitea</a> ⧫
|
||||||
<a href="https://ko-fi.com/g2_games">Ko-fi</a> ⧫
|
<a href="https://ko-fi.com/g2_games">Ko-fi</a>
|
||||||
<a href="/search">Search</a> ⧫
|
|
||||||
<a href="/portfolio">Portfolio</a>
|
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
@ -75,6 +70,13 @@ A place for personal projects and things. Enjoy!">
|
||||||
always.</p>
|
always.</p>
|
||||||
</section></a>
|
</section></a>
|
||||||
|
|
||||||
|
<a href="/portfolio"><section class="clickable">
|
||||||
|
<h3>My Portfolio</h3>
|
||||||
|
<p>This portfolio is a list of things I have done and things I am
|
||||||
|
currently doing. Not comprehensive, and also I dislike selling
|
||||||
|
myself.</p>
|
||||||
|
</section></a>
|
||||||
|
|
||||||
<a href="/random"><section class="clickable">
|
<a href="/random"><section class="clickable">
|
||||||
<h3>Random Stuff</h3>
|
<h3>Random Stuff</h3>
|
||||||
<p>I tend to make a lot of random things on the internet. You can
|
<p>I tend to make a lot of random things on the internet. You can
|
||||||
|
@ -109,7 +111,11 @@ A place for personal projects and things. Enjoy!">
|
||||||
|
|
||||||
<!-- Favorite things -->
|
<!-- Favorite things -->
|
||||||
<h2 class="sep center">My Favorites</h2>
|
<h2 class="sep center">My Favorites</h2>
|
||||||
<div class="centered three_column">
|
<section class="centered">
|
||||||
|
<p>A small list of things I enjoy. Favorites! This isn't at
|
||||||
|
all comprehensive and I'd love to add more.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<p>General Apps:</p>
|
<p>General Apps:</p>
|
||||||
<ul>
|
<ul>
|
||||||
|
@ -118,10 +124,9 @@ A place for personal projects and things. Enjoy!">
|
||||||
<li>Music Player - <a href="https://tauonmusicbox.rocks/">Tauon</a></li>
|
<li>Music Player - <a href="https://tauonmusicbox.rocks/">Tauon</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>Editors:</p>
|
<p>Text/Code Editor:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Text Editor - <a href="https://kate-editor.org/">Kate</a></li>
|
<li><a href="https://kate-editor.org/">Kate</a></li>
|
||||||
<li>Hex Editor - <a href="https://imhex.werwolv.net/">ImHex</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>Fonts:</p>
|
<p>Fonts:</p>
|
||||||
|
@ -152,20 +157,6 @@ A place for personal projects and things. Enjoy!">
|
||||||
<li><a href="https://kde.org/plasma-desktop/">KDE Plasma</a></li>
|
<li><a href="https://kde.org/plasma-desktop/">KDE Plasma</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
|
||||||
<div class="music_tile">
|
|
||||||
<p id="musicStatus">Currently listening to:</p>
|
|
||||||
<p class="track_name" id="track">???</p>
|
|
||||||
<hr>
|
|
||||||
<div style="display:flex;flex-direction:column;">
|
|
||||||
<p class="artist_name" id="albumArtist">???</p>
|
|
||||||
<p class="album_name" id="albumTitle">???</p>
|
|
||||||
</div>
|
|
||||||
<img id="mainArtwork" src="https://placehold.co/260/2220/FFFDE6?text=?&font=roboto"/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
@ -177,5 +168,4 @@ A place for personal projects and things. Enjoy!">
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
<script src="/assets/lib/scripts/music_status.js"></script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<span class="left_corner"></span>
|
<span class="left_corner"></span>
|
||||||
<p>I used to have something here, but this page is more of a fun random idea I had to mimic other oversimplified pages than a real useful thing...</p>
|
<p>I am a software developer specializing in Rust and website design.</p>
|
||||||
<span class="right_corner"></span>
|
<span class="right_corner"></span>
|
||||||
|
|
||||||
<div style="width:fit-content;margin:auto;">
|
<div style="width:fit-content;margin:auto;">
|
||||||
|
|
|
@ -35,13 +35,11 @@ A place for personal projects and things. Enjoy!">
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="holder">
|
<main class="holder">
|
||||||
<h2 class="sep center">What's this?</h2>
|
|
||||||
<section class="centered">
|
<section class="centered">
|
||||||
|
<h2 class="sep center">What's this?</h2>
|
||||||
<p>This page contains random things I have made. Most of them have very little use, but some are kind of interesting! I'll keep it updated as I add more things. Please enjoy!</p>
|
<p>This page contains random things I have made. Most of them have very little use, but some are kind of interesting! I'll keep it updated as I add more things. Please enjoy!</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Begin random stuff!! -->
|
|
||||||
|
|
||||||
<h2 class="sep center">Random Stuff</h2>
|
<h2 class="sep center">Random Stuff</h2>
|
||||||
|
|
||||||
<a href="dango.page"><section class="clickable">
|
<a href="dango.page"><section class="clickable">
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,153 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<script src="color-thief.umd.js"></script>
|
|
||||||
<title>Moth of the Month</title>
|
|
||||||
<style>
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Arsenal+SC:ital,wght@0,400;0,700;1,400;1,700&family=Radio+Canada:ital,wght@0,300..700;1,300..700&display=swap');
|
|
||||||
|
|
||||||
@keyframes fadein {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
max-width: 800px;
|
|
||||||
margin: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: #2c2d41;
|
|
||||||
color: #cdd6f4;
|
|
||||||
padding: 10px;
|
|
||||||
animation-name: fadein;
|
|
||||||
animation-iteration-count: 1;
|
|
||||||
animation-duration: 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-family: "Arsenal SC", sans-serif;
|
|
||||||
font-size: 36pt;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-family: "Arsenal SC", sans-serif;
|
|
||||||
font-size: 24pt;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin: 10px;
|
|
||||||
color: #6c7086;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 90%;
|
|
||||||
margin: auto;
|
|
||||||
/*border-radius: 10px*/;
|
|
||||||
border: 4px solid #7f849c;
|
|
||||||
box-shadow: 10px 9px #7f849c;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-family: "Radio Canada", serif;
|
|
||||||
font-size: 14pt;
|
|
||||||
color: #bac2de;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:link {
|
|
||||||
color: #f38ba8;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:visited {
|
|
||||||
color: #f2cdcd;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #f9e2af;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learnmore {
|
|
||||||
font-size: 1.2em;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loading {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #2c2d41;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loading h1 {
|
|
||||||
position: fixed;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="loading">
|
|
||||||
<h1>Loading...</h1>
|
|
||||||
</div>
|
|
||||||
<header style="opacity:0;">
|
|
||||||
<h1>Moth of the Month</h1>
|
|
||||||
</header>
|
|
||||||
<main style="opacity:0;">
|
|
||||||
<img src="moth1.jpg" />
|
|
||||||
<h2>Japanese Silkmoth</h2>
|
|
||||||
</main>
|
|
||||||
<footer style="opacity:0;">
|
|
||||||
<p>
|
|
||||||
<i>Antheraea yamamai</i>, the Japanese silk moth or Japanese oak silkmoth is a moth of the family Saturniidae. It is endemic to east Asia, but has been imported to Europe for tussar silk production and is now found in southeastern Europe, mainly in Austria, northeastern Italy, and the Balkans. It seems to be spreading north and a population has been reported near Deggendorf and Passau in Germany. The species was first described by Félix Édouard Guérin-Méneville in 1861. It has been hybridized artificially with Antheraea polyphemus of North America.
|
|
||||||
</p>
|
|
||||||
<p class="learnmore"> — <a href="https://en.wikipedia.org/wiki/Antheraea_yamamai">Learn More</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
const colorThief = new ColorThief();
|
|
||||||
const img = document.querySelector('img');
|
|
||||||
const load = document.getElementById('loading');
|
|
||||||
|
|
||||||
const header = document.querySelector('header');
|
|
||||||
const main = document.querySelector('main');
|
|
||||||
const footer = document.querySelector('footer');
|
|
||||||
|
|
||||||
img.addEventListener('load', function() {
|
|
||||||
color = colorThief.getColor(img);
|
|
||||||
console.log(color);
|
|
||||||
|
|
||||||
img.style.boxShadow = "0px 0px 10px 5px rgb(" + color + ")";
|
|
||||||
|
|
||||||
load.style.display = "none";
|
|
||||||
header.style.animation = "fadein 1s 1 alternate forwards";
|
|
||||||
main.style.animation = "fadein 1s 1 alternate forwards";
|
|
||||||
footer.style.animation = "fadein 1s 1 alternate forwards";
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</html>
|
|
Binary file not shown.
Before Width: | Height: | Size: 866 KiB |
6
random/writing/bombadil.txt
Normal file
6
random/writing/bombadil.txt
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
And then on his back Tom threw his knapsack roughly,
|
||||||
|
he made a right and left the room with vigor and
|
||||||
|
and while thumping down the passage-way twixt leaflets old and blanding,
|
||||||
|
and skipping up the stone-hewn steps right up to the landing;
|
||||||
|
|
||||||
|
Tom took a right, by candle-light while walking to the
|
Loading…
Reference in a new issue