Good morning my techies and pilgrims on this journey, I am writing this in the late morning today on Sunday. This morning I was struggling to think of what features I wanted to discuss and cover in the blog this week. It’s been several bouts and iterations of the Batman memorial page. And I think I can say confidently that the assignment and the project are complete. Let’s dive into some of the changes that took place.
Changing HTML
So the first item to address are some changes that I had Copilot help me with some changes that were important for the format and layout of the page itself. The biggest thing that I wanted to do was to make sure that I can have the page be accessible on other browser formats besides computers. I should start off also by prefacing that the LLM made several grammar and punctuation corrections in the index file. This was the checklist that I wanted to achieve:
- Have LLM help me with spelling
- Optimize the HTML index file for other browsers.
It altered the time format in the time <small> element the other big improvement that it made was for it to add additional controls to the looping animation.
The last change that it made was to adjust the comment that I had, I had experimented a little bit with tweaking the speed of the video animation. Granted it’s not a long video animation but I wanted it to play at a good enough speed to have it be fluid but also ‘heroic’ in a sense. That’s probably something I mentioned in my last post. But this is what the difference was in the commits I pushed to Github.
That’s pretty much all of the changes that I wanted to make to this, now onto the style-sheet…
Changing CSS
Perhaps the first change I had to do was to make sure that the text was showing up correctly. When first launching the text in Github pages it wasn’t using the custom font that I had committed to the repository project folder. I was able to learn, at least for Github pages that it is somewhat case-sensitive with how relative file paths are declared. And since I’m copying and pasting from my private repository to a public one that I use I was getting the file paths mixed up. The other thing was to make sure that it had a “.” prefix stating to recursively look in the current file directory.
Onto the next one, in the body class the line-height property was added and set in the body class:
One of the things that I prompted Copilot to do was to optimize the website for mobile devices and using that prompt it was able to add the following property to the .animation class. This helped to give a radius border of about 10 pixels and make sure that was a slight shadow that surrounded the animation.
Next class that is decided to work on was the .headshot class and in there it made the following optimization for small phones. And it turned out that this wasn’t a class at all that it was working on it is a media query. I guess they make changes based on specific device conditions, especially with other devices being involved.
This media query was also used to give some padding to the body class and make it applicable to tablets and desktop browsers.
Wrapping up
Other than that my pilgrims, that’s all I have to wrap up with for the batman project but I’m super glad it’s ready and live. The other thing I forgot to mention that the LLM added a universal selector to have all elements calculate there dimensions according to the same styling rule guidelines of border-box.
Other than that things should be good to wrap up for this week at least. I’m going to be taking a moment to plan what I’ll discuss next week and get some good topics going. My next aim is to get some tools up and running to keep pushing my code to these tools and repositories that are self hosted. But I also want to make more content that is centered around system admin workflows and bridging topics that will help others learn about system administration and network engineering topics either for work or home-lab purposes. Have a safe weekend ahead.