aboutsummaryrefslogtreecommitdiff
path: root/content/posts
diff options
context:
space:
mode:
authorKaran Jayachandra <karan.jayachandra@nxp.com>2025-10-01 15:22:52 +0200
committerKaran Jayachandra <karan.jayachandra@nxp.com>2025-10-01 15:22:52 +0200
commit57003c34d7a46a43514cb208d3841311ec0cd052 (patch)
treebd612c94b453c41f2caeb641bde1cb4fabac4ef7 /content/posts
parentea38c9a0ec24be3ca510ff17cb063fdc59935e72 (diff)
Finalized the CSS content
Diffstat (limited to 'content/posts')
-rw-r--r--content/posts/p001_css.md6
1 files changed, 4 insertions, 2 deletions
diff --git a/content/posts/p001_css.md b/content/posts/p001_css.md
index 1cce9a3..7ea50f6 100644
--- a/content/posts/p001_css.md
+++ b/content/posts/p001_css.md
@@ -5,7 +5,7 @@ date = 2025-09-26T17:07:57+02:00
CSS (Cascading Style Sheets) is used to create styles for your web pages. This is the story of how I came to appreciate this craft. CSS is one member of the triumvirate of web development along with HTML and Javascript. HTML (Hypertext Markup Language) is how webpages are structured, CSS is used to style it and Javascript is used for more advanced functionality with users. For quite some time, CSS had been my least favourite amongst the three. Although I have been in awe of the power of the internet, I had always delegated the styling of web pages to others. Design mattered less than functionality. This opinion was **wrong**.
-This website was built using [hugo](https://gohugo.io) was originally styled to look like [Bear](https://janraasch.github.io/hugo-bearblog/) blog. The style created by [Herman](https://herman.bearblog.dev) looks great but it felt a bit off. Whenever I came across another site using this theme, I felt that my website was a bit disingenuous to myself. Out of all the [themes](https://themes.gohugo.io) available it felt the most appealing but it was not **perfect** for me. I regularly keep an eye out on [Hacker News](https://news.ycombinator.com) for tech news and innovative open source projects when I came across [Neat](https://neat.joeldare.com), a minimalist CSS framework. I was instantly a fan. It was simple, easy on the eye for reading and was well documented. I was also impressed with how much [Joel](https://joeldare.com) accomplished with just over 150 lines of CSS. The demo site looked great.
+I wanted a website of my own where I could maintain a timeline of both personal and private information. I tried several options before settling on on using [hugo](https://gohugo.io). I wanted something simpl and clean. If you don't believe that simple websites can work, have a look at [these](https://deadsimplesites.com/). I initially it to look like [Bear](https://janraasch.github.io/hugo-bearblog/) blog. The style created by [Herman](https://herman.bearblog.dev) looks great but it felt a bit off. Whenever I came across another site using this theme, I felt that my website was a bit disingenuous to myself. Out of all the [themes](https://themes.gohugo.io) available it felt the most appealing but it was not **perfect** for me. I regularly keep an eye out on [Hacker News](https://news.ycombinator.com) for tech news and innovative open source projects when I came across [Neat](https://neat.joeldare.com), a minimalist CSS framework. I was instantly a fan. It was simple, easy on the eye for reading and was well documented. I was also impressed with how much [Joel](https://joeldare.com) accomplished with just over 150 lines of CSS. The demo site looked great.
Looking at it inspired me to attempt creating a simplistic style sheet of my own. The npm package [Monochrome CSS](https://www.npmjs.com/package/@karanj/monochromecss) was the result. I have also styled this blog using the same CSS. I learnt quite a lot doing this and have a new found respect for front-end work. Another reason I wanted to do this project was because setting up this website was the first **production** project that I did and I wanted to be able to explain how each piece in the project works.
@@ -15,4 +15,6 @@ The project didn't take too long because I was already familiar with HTML, CSS a
- Documentation sites
- CV/profile sites
-The whole of it ended up being less that 100 lines of CSS in 2 kB of data. I am really proud of the results. I went with a bit of color really does makes your website a bit less serious. Red is my second favourite color after black so I went with that. The red color however can modified using variables. I also learnt about the use of HSL instead of RGB to define colors. Sajid on YouTube has created a really good [resource](https://www.youtube.com/watch?v=vvPklRN0Tco) about this. Using just border and a bit of color, I ended up making my website look a bit more personal. I can now explain exactly why things are placed at a certain location or look a certain way.
+The whole of it ended up being less that 100 lines in a 2 kB CSS file. I am really proud of the results. I went with a bit of color really does makes your website a bit less serious. I also added a few borders on the key titles and headings to emphasize them. Red is my second favourite color after black so I went with that. I also learnt about the use of HSL instead of RGB to define colors. Sajid on YouTube has created a really good [resource](https://www.youtube.com/watch?v=vvPklRN0Tco) about this. I also made a dark mode version of the website based on his theory of using lightness of colors. Now I explain exactly why things are placed at a certain location or look a certain way on my website. Although the technical work was completed, I also wanted to be able let others use my work so I added a license file and added it to a [public repository](https://gitlab.com/KaranJayachandra/monochrome-css). You can download the CSS and modify it or fork the repository. I also wanted to provide the ability to quickly test the style out so ended up creating a [demo](https://css.karanj.com) website. I also learnt that delivering CSS via a Content Delivery Network (CDN) helps improve network speeds. Linking to gitlab doesn't seem like a good idea for performance. So I published a simple npm package which you can not using jsDelivr on to get the stylesheet embedded in your own websites.
+
+This was also the second project that I worked on after my website of course that I think is ready for others to consume. It is therefore also documented here if I every decide to come back and change some of the styling. Try CSS yourself, even with just a bit of knowledge, you can transform how things look and will also give you a good idea of one piece of the puzzle in web development.