diff options
1 files changed, 24 insertions, 24 deletions
| -rw-r--r-- | src/blog/2.6-years-of-web-design/index.md | 48 |
diff --git a/src/blog/2.6-years-of-web-design/index.md b/src/blog/2.6-years-of-web-design/index.md index 109d6d7..2f75f91 100644 --- a/src/blog/2.6-years-of-web-design/index.md +++ b/src/blog/2.6-years-of-web-design/index.md @@ -19,11 +19,11 @@ There was no plan and I had never done anything like it, so a shitty website was Looking back at it now, that first design's color palette was comprised of three dull grey colors, which didn't contrast very much on the white font: - + For code blocks, the background was a dark-blue color with a blue-ish font color, absolutely horrible for readability: - + Although I wasn't the one to invent that color scheme, it was *inspired* from [xed](https://github.com/linuxmint/xed)'s Oblivion theme. @@ -31,18 +31,18 @@ It wasn't all completely bonkers, there were some not-so-ugly design decisions. Navigation was done with tabs, which look decently nice on a desktop. On blog posts, and especially on those with multiple pages, you would have the title on the left, and a close button on the right, "mimicking" a browser window. - + As you can imagine, this was a scalability nightmare. If the title was too long or there were too many pages, stuff would overlap in an unreadable manner: - + You know, if this website was published on [neocities](https://neocities.org/), my desktop-oriented unscaleable layout might've been seen as cool and novel... Thankfully (or maybe unfortunately), I didn't go down that road. Finally, tables, like those used in the "Projects" listing, were the absolute dumbest: - + As you can see, the design was overwhelmingly ugly, with many boneheaded decisions behind it. Did I mention every post had to be written entirely by hand in HTML, except for the headers and footers, which were [**generated client-side with JavaScript**](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/v1.0/website/js)? @@ -60,15 +60,15 @@ There, he showed how to setup and use [ssg](https://www.romanzolotarev.com/ssg.h Turning to the actual website itself, now it looked quite pleasant, in the day at least: - + Rather than using multiple colors for different elements, I went for a monochrome "printed on a piece of paper" look. One might call that regression, but I'd like to think of it as minimalism. Looking at those same code blocks and tables: - - + + Ay, that's pretty clean! But it should remind you of something. Before, the only time I would work with Markdown files was in GitHub READMEs. @@ -78,7 +78,7 @@ Though that last part wasn't done by me, but by [sindresorhus](https://github.co As for the overall design, there isn't too much to say. Yes, the original tab idea kinda lived on, as those buttons at the top, and yes, it still wasn't scaleable, but now it didn't even try to be. - + Overall, this made it more "commercialized", soulless (assuming v1.0 had one) and plain old boring. It seems I hit the other end of the spectrum, from ugly but interesting to pleasing but dull. @@ -87,7 +87,7 @@ It seems I hit the other end of the spectrum, from ugly but interesting to pleas Over the following half a year, I wrote a couple more articles, but most importantly the styling was finally made scaleable: - + Ignoring my big fat head taking up 70% of the screen, the index page properly fit on a mobile screen! The navigation tabs weren't very symmetrically organized, but at least nothing was overlapping and overflowing over the screen. @@ -107,21 +107,21 @@ As you might imagine, I was the only one with any idea of web design, meaning I This time, however, I wanted to do it a bit more properly, so I made mockups of the final design. The first was done in [Pencil](https://pencil.evolus.vn/), a somewhat limited application for designing layouts: - + Pretty quickly I turned to actual HTML and CSS, because I needed a more realistic feel of how the actual elements would be laid out. Another idea that came up to mind was using a palette: a certain selection of colors for everything. After talking with the others, I found a decent selection of blue and orange sunset-y colours and got to work. The end result was this beauty: - + Although it looked pretty nice, we decided against it, since the focus was on the back-end, the front-end needed to be simpler. There are also some problems with the color scheme, but more on that later. Then I did what I had already done before: simplified the devil out of it. - + Now this looks way too cartoon-ish, you could make it with a steady hand and a ruler on a sheet of paper. However it made the others happy, so we went along with it. @@ -129,7 +129,7 @@ However it made the others happy, so we went along with it. The overall flatness and emptiness, and general boringness bugged me for a while. Some time later, after messing around for a couple hours, I came up with this: - + A much more modern-looking and feeling concept, completely different from it's comic roots. Unfortunately, we didn't go with it, later we found out it had some issues with certain elements, and the previous idea was already implemented. @@ -150,14 +150,14 @@ I needed something in between the second and third concepts, something which was Coincidentally, at the same time, I was working on a dark colored implementation of my website, using the gruvbox color. Putting two and two together, I came up with this thing; - + Now this looked really nice, somewhat professional even, was very simple and didn't hurt your eyes. Suffice to say, everyone loved it, and we redid everything to look like it. As for my own website, this is what it looked like by the time I made release 2.2: - + There is no point in showing code blocks or other elements, since it was just a change of colors. But boy oh boy how long it took to make such a simple change. @@ -169,27 +169,27 @@ Of course, there were changes, I wrote more posts, tweaked some of the styling, Still, I was yearning for something better. Scalability was continuing to be an issue, outside of the annoying misalignment, navigation buttons in the header or footer would disappear into the void if it's contents were too long: - + This example is unrealistic, but there were times where I wanted to put something longer in the footer button, and this issue arose. Also the whole button idea wasn't very expandable, what if I wanted to have not 6 but more than 20 buttons in the header up top? - + And don't get me started on how comically bad this is on mobile: - + Something needed to change yet again, and something did. A year and a third later, on [3 July 2022](https://gitlab.com/Syndamia/syndamiadotcom/-/commit/bde3ebdea6310c891b7e38185906d1a1e03977e4), I went away with the tabbed-like button layout, and opted for a dead simple sidebar: - + About that useless right border and the weird choice for only left and bottom borders on the sidebar: I wanted some separation for the sidebar and I wanted more "fun" in the overall design. Most of the inspiration for those came from [Julia Evan's blog](https://jvns.ca/), where there is a big orange ribbon running on the sides and across the page. Over time I did more tweaking on the colors and layout of everything, so by the time I created release 3.0, it looked like this: - + A good question you might be asking yourself is "How is this supposed to be scaleable?" The answer is that it kinda of wasn't, at the time. @@ -206,17 +206,17 @@ But that completely when over my head when I initially did that 3.0 redesign. Fortunately, it later came back. It might've been four and a half months later, but I finally [added color separation between the background and article and navbar](https://gitlab.com/Syndamia/syndamiadotcom/-/commit/55afc85bf7da9c0ed5e8859027080aebfa55ec50). - + And about that unfixed scalability? Well, I fixed it, now on a mobile devices, the navbar stays up top, but is shrunk and can be expanded with a button: - + Another notable styling change was in tables. I pretty much stole the design from [LEMMiNO](https://www.lemmi.no/)'s website: - + Finally, probably the most important change of it all, before I used some bash scripts to automate certain actions in the result HTML files, like generating the description automatically. Now, this was all done with [awk](https://www.gnu.org/software/gawk/manual/gawk.html), a programming language specifically designed for making text changes to files. |