Website redesign is hard!

Some bits are easy enough: I’ve got a photo now, and there’s a section about me in which one can take a look at my medium, what I like to do in my free time, and how I got to UX (this is too long and I need to cut stuff).

My main page

Tabs, though. Tabs are _hard_.

Why are Tabs hard?

As I mentioned in my last post, I’m using Pelican to generate my site. I’m using restructured text plus CSS to write most of my content.

Responsive?

I first tried to use responsive tabbed navigation from Codyhouse because it looks really nice. Unfortunately, CSS is _extremely_ picky about order and I don’t even entirely follow what’s happening. Between the responsive Pelican theme pelican-blue I’ve modified (and which apparently is no longer… responsive? I broke something somewhere), and the figures and button code bits that I added, I get really confused as to what’s going on.

I pulled the CSS and HTML into notepad++ to get things lined up nicely and in a larger visible space than in the relevant codepen, which meant that I was more able to figure out what was going on and learned a whole lot about CSS. Unfortunately, although in that instance I got the base theme’s responsiveness working again, it collides with the responsive tabbed navigation.

In addition to this, I cannot figure out how to make the tabs actually _change_ what I’m seeing. I strongly suspect something is broken in the javascript that goes along with that code, but I have a lot of trouble understanding javascript at least thus far. This is not helped by trying to learn responsive text, css, pelican (and random bits of python) at the same time. I’m also not entirely sure that I managed to make the links in the tabs go to the right place: I tried using ids to label the content, and have the references go to those places, but ¯\_(ツ)_/¯.

I’m wondering if I can do something with Pelican’s jinja2 template engine to get tabs to work, as I strongly suspect that my problem is something to do with javascript and it looks like a lot of the plugins in Pelican that use javascript also use these templates. But, that does mean learning jinja2 as well!

Can I not use javascript?

Right, so the pretty but frustrating responsive tabs took up most of my time yesterday. I looked a few other links which talked about pure CSS tabs, but they looked like they would break if I breathed at them wrong. I did try one of them, and my suspicion seemed accurate in that case, which meant that when I tried to add it to my existing site it basically did nothing at all.

I was trying to figure out how to use bootstrap today, as I noticed that it was somewhat implemented in pelican through restructured text. Unfortunately, tabs are not yet supported by the bootstrap-rst plugin (which does support buttons, but I like my button and I did it already). I then decided to poke around the bootstrap tab code, which then proceeded to say that I needed to use javascript. As far as I could tell, not using javascript meant they wouldn’t actually work: why would you have tabs that don’t work? I stopped because I was no longer able to figure out what they were talking about anymore.

No, I need javascript!

Seems like tabs (and pills) require javascript, and I do not really understand javascript well enough to be sure why it might not be working when it fails to work.

Meanwhile…

In the meantime, I’ll just make separate pages for my “Completed Projects”, “Design Artifacts”, and “Current Projects” portfolio views. I think I may be able to nest them under ‘portfolio’ in my navigation menu, but I’ll have to poke at Pelican and how it works again to be sure about that one.

After all this, though, I think I know how to make a horizontal TOC for my regional hubs portfolio. Which I need to do.