My new homepage (software, personal development, spiritual growth).

ThomasLeigh · 2020-05-28 20:36:07

Hello ! :)

I first learned about TextPattern a good while ago, then I had a few year break, and now I am back. And I will tell You this: it has been amazing how designer-friendly this CMS is when it comes to comprehend it “from scratch”. I am aware that surely still there are things I could do better, but on the other hand, I have my website up and running, it looks and acts as I wanted, and I’ve never experienced such friendly learning curve like in TextPattern case. Simply and powerful, how great is that? :)

This particular website is still fresh to me (design-wise), therefore it may still evolve – but I think that it has reached a ‘release candidate’ state to present it to You ;) .

No mobile version yet.

I used smd_tags, all the rest is html/css/jQuery.

Enjoy :)

trailofthelight.xyz

Last edited by ThomasLeigh (2020-05-28 20:36:40)

hilaryaq · 2020-05-29 00:12:34

It’s a good time to come back, welcome!

I love the kind of cascading vertical layout for the articles. 🙂

colak · 2020-05-29 05:12:55

Nice! but it appears that there is a display issue with the tag cloud on ff.

jakob · 2020-05-29 08:16:02

Nice! I see the same overlapping as colak (or maybe you wanted it like that).

If that wasn’t intentional, you might want to look at a different positioning method. Currently you’re using position:absolute to bring the tags from lower down in your code to the top of the page, but absolute positioning (like floats) takes it out of the page flow which is why it overlays the articles. Two (of probably many) possible approaches:

Make the tags appear before the articles in the code :-) and remove the absolute positioning. They’ll then automatically push down the articles.
Have a look at display: flex; for your positioning of the tag and article blocks. You can change the order that elements appear in using a container/wrapper div set to flex-direction: column; and then give the items within in it a different order value. You could use that to make the tags appear before the articles even if they occur after them in the code. There are plenty of tutorials on that… here’s a quick reference.

If you narrow down the padding/margins, your tags will spread out a bit more.

Depending on how exactly you want to control which articles appear where, you might also want to investigate using css columns for your vertical flow of articles that you currently have in a “left” and “right” column. You can use that to automate column layout within a single container without having to break it into two or more parts. There is one proviso: css columns work like a newspaper: they run from top to bottom and then from top to bottom on the next column, not left-right, left-right (that would be a “masonry” layout). You have to say how tall the container is and it breaks the columns automatically. You can make sure it doesn’t break the column in the middle of the article with some break-inside / break-after rules (you can see an example of that here). The nice thing with css columns is that when you narrow down your browser width, it automatically collapses to a single column, or from three to two and then from two to one without any further need for code or styling adjustments.

ThomasLeigh · 2020-05-29 12:58:11

@colak
May I ask what screen resolution and browser You use?

@jakob
Thank You for such a broad insight, I think that in order to tangibly improve the code I need to completely rewrite it. It is tempting, especially due that I haven’t expected any display issues. I am grateful for what and how You’ve shared, thank You.

Bloke · 2020-05-29 13:09:16

That’s a really nice looking site. Very different.

I see the same as colak on the latest Firefox for Mac on a MacBook Pro 13”. Here’s a comparison of what I see in Chrome vs Firefox:

imgur.com/a/hwBweaT

ThomasLeigh · 2020-05-29 13:14:16

@Bloke
Thank You very much. Thanks to Your screenshots I now see that it looks like Firefox does not support ‘zoom’ CSS attribute.

ThomasLeigh · 2020-05-29 14:24:23

colak, jakob, Bloke

The tag cloud issue should be fine now.

Bloke · 2020-05-29 14:57:00

Yep, sorted after a force refresh. Nice one.

colak · 2020-05-29 16:04:34

ThomasLeigh wrote #323399:

@colak
May I ask what screen resolution and browser You use?

sure: 1680×1050

zero · 2020-05-30 07:57:26

Looks very exciting and stimulating. I find it a bit busy for easy reading, but perhaps that’s just me.

If I narrow my desktop screen the columns become hard to read. You haven’t made a mobile site yet, so I would read up about “mobile first design”. The default txp theme is based on that and after a little bit of time getting your head round the concept, it makes design quite straightforward and easy to test. You don’t have to do a separate time-consuming mobile version or tablet version, but all screen widths are catered for as you go along.

colak · 2020-05-30 09:47:51

ThomasLeigh wrote #323403:

colak, jakob, Bloke

The tag cloud issue should be fine now.

Indeed

Textpattern CMS

Textpattern CMS support forum

#1 2020-05-28 20:36:07