Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

ThomasLeigh
Member
Registered: 2020-05-11
Posts: 24

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

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)

Offline

#2 2020-05-29 00:12:34

hilaryaq
Plugin Author
Registered: 2006-08-20
Posts: 335
Website

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

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

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


…………………
I <3 txp
…………………

Offline

#3 2020-05-29 05:12:55

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,071
Website GitHub Mastodon Twitter

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

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


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#4 2020-05-29 08:16:02

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,703
Website

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

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.


TXP Builders – finely-crafted code, design and txp

Offline

#5 2020-05-29 12:58:11

ThomasLeigh
Member
Registered: 2020-05-11
Posts: 24

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

@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.

Offline

#6 2020-05-29 13:09:16

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,419
Website GitHub

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

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


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#7 2020-05-29 13:14:16

ThomasLeigh
Member
Registered: 2020-05-11
Posts: 24

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

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

Offline

#8 2020-05-29 14:24:23

ThomasLeigh
Member
Registered: 2020-05-11
Posts: 24

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

colak, jakob, Bloke

The tag cloud issue should be fine now.

Offline

#9 2020-05-29 14:57:00

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,419
Website GitHub

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

Yep, sorted after a force refresh. Nice one.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#10 2020-05-29 16:04:34

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,071
Website GitHub Mastodon Twitter

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

ThomasLeigh wrote #323399:

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

sure: 1680×1050


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#11 2020-05-30 07:57:26

zero
Member
From: Lancashire
Registered: 2004-04-19
Posts: 1,470
Website

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

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.


BB6 Band My band
Gud One My blog

Offline

#12 2020-05-30 09:47:51

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,071
Website GitHub Mastodon Twitter

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

ThomasLeigh wrote #323403:

colak, jakob, Bloke

The tag cloud issue should be fine now.

Indeed


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

Board footer

Powered by FluxBB