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

ThomasLeigh · 2020-05-31 15:03:05

jakob wrote #323393:

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.

I am in the process of re-writing the whole template, incorporating CSS column layout which I find appealing. I can’t manage to set the desired order for the elements, though. If You’d be willing to help with that, here is the code:

articles container:

	#mainContent
	{
		-webkit-columns: 385px 3;
		-moz-columns: 385px 3;
		columns: 385px 3;
		-webkit-column-gap: 0.5em;
		-moz-column-gap: 0.5em;
		column-gap: 0.5em;
		-webkit-flex-direction: column; 
		flex-direction: column;
	}

A single article is a span with display: block, and one particular span of those has order: 1; added via a CSS class. But it isn’t displayed as the first element within my column layout…

Would You be willing to help with that?

jakob · 2020-06-01 21:59:33

Hi Thomas,

Sorry, I had a day off today (it was a bank holiday). I probably contributed to some confusion by including too much in one post.

To my knowledge, CSS declarations from the display: flex; method are not interchangeable with those from css columns, so using css order: 1; within css columns won’t bring an article to the top.

If you want to feature some articles especially in Textpattern – i.e. make them appear first in the source order of the page – you could make them sticky and then use <txp:article status="sticky"><txp:article status="live"> (plus your other attributes) to output the sticky articles first and then the remaining live articles. The plugin smd_featured also offers a way of featuring certain articles, then outputting the rest later on the page.

What I meant in my post above was:

1. Use flexbox for block items you have on a page that you want to bring forward or push back. In your original layout, your tag cloud was lower down in your source code than the article blocks and you took it out of the flow with position:absolute which resulted in some overlap. You could have made a setup like this:

<main>
    <div class="article-container">
        <article> … </article>
        <article> … </article>
        <article> … </article>
        …
    <div>
    <div class="tag-cloud">
        <ul>
            <li class="tag"><a href="…">tag name</a></li>
            <li class="tag"><a href="…">tag name</a></li>
            <li class="tag"><a href="…">tag name</a></li>
            …
        </ul>
    </div>
</main>

and then done:

main {
    display: flex;
    flex-direction: column;
}
.tag-cloud {
    order: 1;
}
.article-container {
    order: 2;
}

and the tag cloud would appear above the article container and push it down.

But now that you’ve changed the order in your source code, that’s not an issue any more :-)

2. Using css columns for the stream of articles you used to have in separate left and right dis. In your current site, that might be something like:

#survey {
    column-count: 3;
    column-gap: 20px;
    column-fill: initial;
    column-width: 330px;
}
#survey > span {
    break-inside: avoid;
    page-break-inside: avoid;
    background: rgba(255,255,255,.2); /* not necessary: just to see what's happening */
    display: inline-block;
    margin-bottom: 20px;
}

That puts all your articles inside #survey into a three column layout that breaks to 2 columns and then 1 column when the columns become smaller than 330px each ass the viewport gets narrower.

ThomasLeigh · 2020-06-02 12:39:12

jakob wrote #323470:

now that you’ve changed the order in your source code, that’s not an issue any more :-)

Yes, but it still helps me to understand the idea and apply in further cases, thank You for all Your points, thanks to which i.a., I have a clearer picture of CSS columns vs flex layout.

You’ve inspired me to re-write the template and now 1) it incorporates CSS columns and 2) tag cloud pushes other sections down when needed (so it won’t overlap them anymore).

Textpattern CMS

Textpattern CMS support forum

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