zepp
/
alternate.thiscat.rocks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: zepp:a01a042f64229ab162773d262a2444cfacf1b613
Branches Tags
zepp:main
..
compare: zepp:0290c4a2999b16363e0f76c2873445173ed72ae9
Branches Tags
zepp:main

No commits in common. "a01a042f64229ab162773d262a2444cfacf1b613" and "0290c4a2999b16363e0f76c2873445173ed72ae9" have entirely different histories.
a01a042f64 ... 0290c4a299

5 changed files with 19 additions and 96 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
img/
system-css/
style.css

17
README.md
View File

@ -1,17 +0,0 @@
# alternate.thiscat.rocks
This is a second homepage for Baxter that aims to celebrate him through a little bit of a nostalgia lens
It makes use of a css library called [system.css](https://github.com/sakofchit/system.css) to acheive an aesthetic look of an early System 6 era macintosh
The photos are downscaled and have photo noise added to give the look of a low quality 90s camera
They are in black and white because system 6 was largely on monochrome Apple computers
I created a small photo gallery, and you can click on each image to view it at a larger size along with a small description provided with the image. You can use the standard close winow button at the top left to go back to the images to keep browsing
I may add more photos in the future, but for now I am happy with the selection
## Visit the site
You can visit the site and look at the images here [alternate.thiscat.rocks](https://alternate.thiscat.rocks/)

54
index.html
View File

@ -5,11 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- system.css -->
<link rel="stylesheet" href="system-css/system.css">
<!-- additional styling defined by myself -->
<link rel="stylesheet" href="style/additional-style.css">
<!-- CDN link if needed -->
<!-- <link rel="stylesheet" href="https://unpkg.com/@sakun/system.css"> -->
<!-- additional styling defined by myself -->
<link rel="stylesheet" href="style/style.css">
<title>Baxter's Desktop</title>
</head>
@ -24,54 +23,9 @@
<div class="window-pane">
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-stare-thumbnail.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<img class="img-icon" src="img/thumbnails/baxter-stare-thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>baxter-stare.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-box-thumbnail.jpg" alt="A thumbnail of an image of baxter sitting in a cardboard box.">
<figcaption>baxter-box.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-flop-thumbnail.jpg" alt="A thumbnail of an image of baxter laying upside down exposing his stomach.">
<figcaption>baxter-flop.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-grumpy-thumbnail.jpg" alt="A thumbnail of an image of baxter looking at the camera as if he were upset or grumpy.">
<figcaption>baxter-grumpy.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-kitten-thumbnail.jpg" alt="A thumbnail of an image of baxter when he was a kitten sleeping on a couch.">
<figcaption>baxter-kitten.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-looking-thumbnail.jpg" alt="A thumbnail of an image of baxter looking at the camera as it is pointing down at him.">
<figcaption>baxter-looking.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-sitting-thumbnail.jpg" alt="A thumbnail of an image of baxter laying on a blanket looking at the camera.">
<figcaption>baxter-sitting.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-wall-thumbnail.jpg" alt="A thumbnail of an image of baxter laying against a wall. Sunlight reflects off of his stomach.">
<figcaption>baxter-wall.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-hiding-thumbnail.jpg" alt="A thumbnail of an image of baxter looking out from behind a computer monitor.">
<figcaption>baxter-hiding.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-thinking-thumbnail.jpg" alt="A thumbnail of an image of baxter laying on a wooden chair with a thinking or curious look towards the camera.">
<figcaption>baxter-thinking.png</figcaption>
</figure>
</div>
</div>
@ -79,7 +33,7 @@
<h1 class="dialog-text">Baxter's desktop</h1>
<p class="dialog-text">Welcome to Baxter's desktop, a time trip to before Baxter himself!</p>
<p class="dialog-text">This site makes use of JavaScript, so you may want to turn that on if things aren't working as intended.</p>
<p class="dialog-text">In the "Baxter Images" window, you can single-click on a photo to view it along with a small description.</p>
<p class="dialog-text">In the "Baxter Images" dialog, you can single-click on a photo to view it with a small description.</p>
<p class="dialog-text">I hope you enjoy this little nostalgia trip featuring my cat, you can go back to his normal homepage <a href="https://thiscat.rocks/">here</a>.</p>
</div>

28
js/script.js
View File

@ -1,20 +1,11 @@
const descriptions = {
let icon = document.querySelectorAll(".clickable-image");
let descriptions = {
"baxter-stare.png": "Baxter lovingly staring at the camera on a sunny day in the apartment. One of my favorite photos of him. He would have been 6 or 7 around this time.",
"baxter-box.png": "Baxter loves his boxes, and can often be found relaxing or sleeping in one. We had quite a few at one point!",
"baxter-flop.png": "Baxter shows ultimate comfiness by flopping upside down. A sign that he is very happy and very cozy.",
"baxter-grumpy.png": "Baxter rarely gives this look and this photo was awhile ago. I'm not sure what he might've been upset about",
"baxter-kitten.png": "Baxter as a kitten was a lot of fun and work. I do really get a kick out of how big his paws were though!",
"baxter-looking.png": "Baxter is quite good at noticing the camera. Sometimes that means I miss good pictures, but sometimes you get great ones!",
"baxter-sitting.png": "This is just overall a good photo. Seems like Baxter might be making a run for office with this one!",
"baxter-wall.png": "In the apartment he often liked to stretch against this wall. I think he liked the sunlight on his stomach. Typical cat!",
"baxter-hiding.png": "Baxter often likes to pretend people can't see him, and will try to get a look at what they are doing from very obvious places.",
"baxter-thinking.png": "When I look at this photo I often wonder what is on Baxter's mind. It was a cool afternoon after a storm, he seems relaxed but with something on his mind.",
};
let icons = document.querySelectorAll(".clickable-image");
icons.forEach((icon) => {
icon.addEventListener("click", () => {
icon.forEach((item) => {
item.addEventListener("click", () => {
let desktop = document.querySelector("body");
@ -34,7 +25,7 @@ icons.forEach((icon) => {
let windowTilte = document.createElement("h2");
windowTilte.classList.add("title");
windowTilte.textContent = icon.querySelector("figcaption").textContent;
windowTilte.textContent = item.querySelector("figcaption").textContent;
titleBar.appendChild(windowTilte);
let separator = document.createElement("div");
@ -50,9 +41,8 @@ icons.forEach((icon) => {
let figure = document.createElement("figure");
let image = document.createElement("img");
image.src = `img/${icon.querySelector("figcaption").textContent}`;
image.style.height = "500px";
image.style.width = "auto";
image.src = `img/${item.querySelector("figcaption").textContent}`;
image.height = "700";
figure.style.marginTop = "0.75rem";
figure.style.display = "flex";
figure.style.flexDirection = "column";
@ -60,7 +50,7 @@ icons.forEach((icon) => {
figure.appendChild(image);
let figureCaption = document.createElement("figcaption");
figureCaption.textContent = `${descriptions[icon.querySelector("figcaption").textContent]}`;
figureCaption.textContent = `${descriptions[item.querySelector("figcaption").textContent]}`;
figureCaption.style.textAlign = "center";
figureCaption.style.marginTop = "1rem";
figure.appendChild(figureCaption);

15
style/style.css → style/additional-style.css
View File

@ -13,19 +13,18 @@ body {
}
.site-info {
height: 25rem;
height: 20rem;
width: auto;
margin: 3rem 2rem 0 0;
}
h1 {
margin: 1rem;
font-size: 1.25em;
}
h2 {
margin: 1rem;
font-size: 1.5em;
font-size: 1.5rem;
font-family: Chicago_12;
}
@ -33,24 +32,20 @@ p {
line-height: 1.5rem;
margin-bottom: 1rem;
margin-left: 1rem;
font-size: 1.1em;
}
.window-pane {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 12.5rem 12.5rem 12.5rem;
align-items: baseline;
gap: 1rem;
justify-items: center;
}
.window {
margin: 1rem 0 1rem 2rem;
}
figure {
display: grid;
justify-items: center;
.img-icon {
padding-left: 1.25rem;
}
.clickable-image:hover {