June 8th, 2023 - 9:28 PM - 1/1
I got a custom domain name! :D This site is now being hosted at www.prismoria.site! It still has SSL certification and everything. Spent a long time getting the DNS server to accept it.
June 4th, 2023 - 9:28 PM - 1/1
I went ahead and created favicons for each of my characters. I might still add new ones that look better at a small scale (16x16 px of 32x32 px), but currently, there is a favicon for each character.
Rene's character sheet has finally been added. A lot of the info is still missing, but at least the page exists now.
May 29th, 2023 - 9:28 PM - 1/1
Added a bunch of animations. Also got some JavaScript setup to be able to update the CSS version number based on the local storage of the device. Really just did stuff to clean up my previous code and spice up the user experience on the site.
May 28th, 2023 - 2/2
I added color options! :D Finished right before I plan on going to bed. Been working on the stuff all day.
May 28th, 2023 - 1/2
Spent all day attempting to use the Spotify API so I wouldn't have to include all the music files in the project and use up all that space, but I only got halfway. I don't know how to use React, having the embed of the Spotify player requires it. Plus, it may require the user to sign in to their own spotify account? I don't want that, the user might not have one.
For now, I'm sticking with downloading the songs I want to include and handling the music that way.
I also added Adam to the list of characters I moved over to this site. And I moved this site from where it was before (A place being hosted by my university. I didn't want to use their system for these audio files, since those are larger files) to GitHub Pages.
May 27th, 2023 - 1/1
We have sound working in the character sheets! Set up the audio element to match the theme while also showing the name of the song playing above the controls.
audio::-webkit-media-controls-volume-control-container
audio::-webkit-media-controls-enclosure
audio::-webkit-media-controls-time-remaining-display
Had to deal with styling elements like those.
May 26th, 2023 - 1/1
I learned what css versions are! I can now put all my css into external stylesheets and not have to worry about not being able to see the changes in my browser! So, I put all my css into separeate files except for some things that were unique for each page. Currently, I am going about this in a component-based route, attaching differnet component types when needed but leave the individual differences in the head of each file.
I also created Elliot's character sheet. The navigation bar now stays at the top of the screen at all times.
May 25th, 2023 - 1/1
Updates here have been slow as I have recently started my new job! It started on the 15th, it's been taking up most of my time. Hopefully I still find time to update this site though!
May 12th, 2023 - 1/1
Breakdown of some stuff that got done by 5pm today:
- Added Jacob to the list of characters fully move over to this site
- Refactored the navbar to make responsive design easier
- Took the hr styling and threw it into a js file for html sites to call if they need an hr element. That way that giant block of styling isn't taking up space everywhere
May 11th, 2023 - 3/3
Okay, I am not going into as much detail anymore. Here's the breakdown of some stuff that happened / got done:
- Sarah Fossheim is great. I based these post appearances off of their work
- Chris Coyier is also great. He actually made a thing called Flickity, which I used for the carousel in the homepage
- Added a button the the navbar component that remains at the bottom of the screen to be able to quickly go back to the top of the page
- Fiddled with the gradients more
- The Horizontal Rule element, oh my goodness, that was so complicated for no reason. And that is a piece of CSS that I am copying and pasting into each page. But this time, there's a reason for that! It's so that I can change the symbol in the middle of the line.
- The @media rules kept breaking on me, who knows why
- Since I worked out most kinks in the design for Sam's character sheet, creating Jay was smooth and quick
- I got my story page set up!
- After learning a bunch of stuff from looking stuff up and since my back was hurting from sitting for too long, I decided to just rest in bed and watch some YouTube. But, I still wanted to be productive, so I watched some stuff to learn better technique for CSS code. That's also where I got the idea of making this page and tracking my progress
- I implemnted some tips from the videos I watched
May 11th, 2023 - 2/3
There is one element I want to be able to carry through multiple pages. Now that I'm moving on to making Jay, I don't want to have to keep copying and pasting the code from place to place for the navigation bar at the top. But like mentioned before, I can't use external stylesheets. What's the net best choice?
let CreateNavbar = () => { document .querySelector('head') .innerHTML += `<style> …
Create my own version of an external stylesheet. Yup. Fun times. I also did this with all the big chuncks of text in the character sheets so they wouldn't clutter the HTML semantics. The only thing that needs to be done in the HTML is for the script to be called.
May 11th, 2023 - 1/3
I found some more tutorials and stuff the the gradients. Woke up and went straight to work on this. I found out a better method for the gradients on all the separate elements: stop trying to figure it out, use blending modes.
background-color: var(--sectionLabelColor);
mix-blend-mode: color-burn;
mix-blend-mode: saturation, luminosity;
It wasn't as dark as I wanted while keeping the saturation, so, I went the other way. The headers are a more pastel version of the background color. The body spans the entire page, the gradient was on that the entire time. It everything else just maintains that hue, the gradient will follow through. It was the same with the text:
color: var(--darkText);
mix-blend-mode: luminosity;
May 10th, 2023 - 3/3
Started the first character sheet for Sam. No clue why, but I decided I wanted to have a dual color scheme, with a main color and a secondary color the the ENTIRE page gradients towards. Why did I do this to myself? Not only do I want the backgrounds to have a gradient throughout the page, I want the text to subtly change too. I found this code snippet and tried to use it:
background-image: linear-gradient(white, black);
background-size: cover;
background-position: center;
background-attachment: fixed;
That had an... Interesting effect.
I later found out this was because of the "background-attachment: fixed;" that caused this to happen, but instead of the gradient filling the entire page, it only covered the current view of the page; the height of the screen, not the page.
May 10th, 2023 - 2/3
I got the first page done! I'm trying my best to use scalable practices so that development doesn't become exponentially harder as time goes on, however, I cannot keep my CSS in external stylesheets. It may just be my computer, but if I upload a CSS file with the same name as another, replacing the old one, the new one seems to take no effect. So, I just keep all the style in the head, which is annoying.
May 10th, 2023 - 1/3