Kevin Powell - Community•2mo ago

background fontstyle black index number inside flex-col container

So what I'm trying to achieve is aligning an index number with lowered opacity into the center of a flex parent container. This ain't working though properly. Therefore I tried troubleshooting by adding

margin: auto;

margin: auto;

, without any success though. May you please consider helping with this one?

---
import type { GenericItem } from '@models/generic-item'

interface Props {
    feature: GenericItem,
    index?: number
}
const { feature, index } = Astro.props
---

<div class="relative max-w-screen-lg">
    {index && (
        <span class="text-center align-middle absolute size-auto
            top-0 left-0 right-0 bottom-0 leading-none m-auto
            text-12xl font-black font-['Montserrat'] 
            opacity-10 text-gray-800 pointer-events-none"
        >
            {index}
        </span>
    )}
    <div class="z-10 flex flex-col items-center gap-2">
        <h3 class="text-lg font-semibold">{feature.title}</h3>
        <p class="prose row-span-2 col-start-2 text-gray-600" set:html={feature.description}></p>
    </div>
</div>

---
import type { GenericItem } from '@models/generic-item'

interface Props {
    feature: GenericItem,
    index?: number
}
const { feature, index } = Astro.props
---

<div class="relative max-w-screen-lg">
    {index && (
        <span class="text-center align-middle absolute size-auto
            top-0 left-0 right-0 bottom-0 leading-none m-auto
            text-12xl font-black font-['Montserrat'] 
            opacity-10 text-gray-800 pointer-events-none"
        >
            {index}
        </span>
    )}
    <div class="z-10 flex flex-col items-center gap-2">
        <h3 class="text-lg font-semibold">{feature.title}</h3>
        <p class="prose row-span-2 col-start-2 text-gray-600" set:html={feature.description}></p>
    </div>
</div>

41 Replies

ἔρως•2mo ago

have you tried using grid? with grid, this is stupid easy or ::before or ::after with position absolute?

proudyyyy•2mo ago

ah with stuff like spanning rows and columns? yeah I use pseudo elements way to rarely give me a minute to try out both approaches. 😄

ἔρως•2mo ago

if you put position: relative and then you put position: absolute; top: 0; bottom: 0; left: 0; right: 0;, it should work

proudyyyy•2mo ago

not working with spanning into both directions twice

ἔρως•2mo ago

it usually works

proudyyyy•2mo ago

thats what I done and its being positioned below, and line-height (respectively "leading" with :tailwind:), it improved slightly but isn't pitch perfect and too much experimental

ἔρως•2mo ago

did you put line-height: 1?

proudyyyy•2mo ago

yeah thats what I thought of as well. May you further explain other things to apply with grid solution? Im trying out now pseudo element stuff which is basically the same

ἔρως•2mo ago

in the pseudo-element

proudyyyy•2mo ago

yup 😄 also 1px and stuff. tried out a lot not pseudo, just kept it at span, trying out pseudo one now.

ἔρως•2mo ago

try the pseudo-element a span is different, and needs to be inside the paragraph

proudyyyy•2mo ago

what about changing then just the html-tag? I want to prevent using h1-h6 though. SEO things Even if it doesn't affect SEO way too much, just want to remove some side effects which might appear.

ἔρως•2mo ago

what do you mean?

proudyyyy•2mo ago

like would <p> or <div> fit as well for index numbers here to be displayed? I think <span> spans out full width of parent that's what i'm trying to tell Or it was paragraph elements that span out full size of parent, I don't really know. :PES2_Shrug:

ἔρως•2mo ago

no, span is inline paragraph is a paragraph

proudyyyy•2mo ago

ἔρως•2mo ago

and you know how paragraphs work, in text

proudyyyy•2mo ago

Imma try pseudo now.

ἔρως•2mo ago

that might not work try it

proudyyyy•2mo ago

Now astro can inject the classlist from tailwind, however cant be processed here because of SSR I think. Might have to rely on plain css here 😄

import type { GenericItem } from '@models/generic-item'

interface Props {
    feature: GenericItem,
    index?: number
}
const { feature, index } = Astro.props

const showIndex = `before:absolute before:top-0 before:right-0 before:left-0 before:bottom-0 before:size-full before:text-12xl before:content-['${index}'] before:font-black`
---

<div class:list={[
    "relative max-w-screen-lg",
    index ? showIndex : ''
]}>
    <div class="z-10 flex flex-col items-center gap-2">
        <h3 class="text-lg font-semibold">{feature.title}</h3>
        <p class="prose row-span-2 col-start-2 text-gray-600" set:html={feature.description}></p>
    </div>
</div>

import type { GenericItem } from '@models/generic-item'

interface Props {
    feature: GenericItem,
    index?: number
}
const { feature, index } = Astro.props

const showIndex = `before:absolute before:top-0 before:right-0 before:left-0 before:bottom-0 before:size-full before:text-12xl before:content-['${index}'] before:font-black`
---

<div class:list={[
    "relative max-w-screen-lg",
    index ? showIndex : ''
]}>
    <div class="z-10 flex flex-col items-center gap-2">
        <h3 class="text-lg font-semibold">{feature.title}</h3>
        <p class="prose row-span-2 col-start-2 text-gray-600" set:html={feature.description}></p>
    </div>
</div>

ἔρως•2mo ago

yeah, doing anything semi-complex in tailwind gets ugly fast by the way, i forgot to say you need to add text-align: center

proudyyyy•2mo ago

Huhm I am assuming i'm still doing something wrong. Before pseudo element ain't even appear inside html tree 😄

---
import type { GenericItem } from '@models/generic-item'

interface Props {
    feature: GenericItem,
    index?: number
}
const { feature, index } = Astro.props
---

<div class="relative max-w-screen-lg">
    {index && <div data-feature-index={index}></div>}
    <div class="z-10 flex flex-col items-center gap-2">
        <h3 class="text-lg font-semibold">{feature.title}</h3>
        <p class="prose row-span-2 col-start-2 text-gray-600" set:html={feature.description}></p>
    </div>
</div>

<style define:vars={{index}}>
    div[data-feature-index] ::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        font-size: 14rem;
        content: var(--index);
        font-weight: 900;
        text-align: center;
    }
</style>

---
import type { GenericItem } from '@models/generic-item'

interface Props {
    feature: GenericItem,
    index?: number
}
const { feature, index } = Astro.props
---

<div class="relative max-w-screen-lg">
    {index && <div data-feature-index={index}></div>}
    <div class="z-10 flex flex-col items-center gap-2">
        <h3 class="text-lg font-semibold">{feature.title}</h3>
        <p class="prose row-span-2 col-start-2 text-gray-600" set:html={feature.description}></p>
    </div>
</div>

<style define:vars={{index}}>
    div[data-feature-index] ::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        font-size: 14rem;
        content: var(--index);
        font-weight: 900;
        text-align: center;
    }
</style>

ἔρως•2mo ago

https://jsfiddle.net/qo8gph2k/ <-- i actually had to make it display grid

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

proudyyyy•2mo ago

looks fire, imma take this one.

ἔρως•2mo ago

the content might be the hardest one

proudyyyy•2mo ago

yeah

ἔρως•2mo ago

also, it's just an example

proudyyyy•2mo ago

yup got it. therefore I prefer relying on entire element cuz it can be conditionally rendered by astro.. 😄 yeah wont follow that approach anymore because taking too long, imma try again grid one with regular element.

ἔρως•2mo ago

i tried it and couldn't get it to work, for some reason

proudyyyy•2mo ago

is it important to keep the pseudo element nested or can it just be attached at the end of the parent selector (paragraph) ?

ἔρως•2mo ago

&::before and p::before are the same, but &::before is for nested selectors

proudyyyy•2mo ago

this does work fine without any pseudo elements. the one ("1") isn't perfect but I am fine with this one. way more suitable and flexible than any other approach so far. Thanks a lot! 🙂 only annoying thing remaining right now is that I have to use a static font size with any unit.. I'd prefer having a negative offset both at bottom and top so that this one would work out of the box adaptive and responsive and not require any unit value. This would laso be great for potential bigger texts, this one wouldn't suit for them right now as it's desired that the index number is being outstanding of title + description 😄

ἔρως•2mo ago

basically, it's the style of the pseudo-element, but applied to a div the 1 looks good enough, but it needs a font where the left side thingy is at an angle but other than that, it looks really good one way to make this work is with svg with svg, the size of the number can be a lot more gradually controlled and even resizes automatically but this looks good like that i would center the text, as the text looks really weird on the right side

proudyyyy•2mo ago

ah yes already done. this was just a sketch

proudyyyy•2mo ago

but yeah I see what you mean, description has to be centered. I just dislike having all the time text-align: center; which is why I try having justify or left align and then centered with margin-inline: auto;

proudyyyy•2mo ago

with justified descriptions:

ἔρως•2mo ago

justified text always looks like absolute ass but it is the best option to fill the space and keep the text aligned on both sides

proudyyyy•2mo ago

there's no other way though with sidely aligned texts. you have to align it center because the hitbox of the element remains full width and ignores white space sadly..

ἔρως•2mo ago

yeah, i know what you mean

Gaming

Programming

background fontstyle black index number inside flex-col container