proudyyyy Comments - Answer Overflow

proudyyyy

Explore posts from servers

KPCKevin Powell - Community CDCloudflare Developers

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

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

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

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;

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

but yeah I see what you mean, description has to be centered.

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

ah yes already done. this was just a sketch

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

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 😄

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

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.

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

Thanks a lot! 🙂

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

the one ("1") isn't perfect but I am fine with this one. way more suitable and flexible than any other approach so far.

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

this does work fine without any pseudo elements.

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

yeah wont follow that approach anymore because taking too long, imma try again grid one with regular element.

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

therefore I prefer relying on entire element cuz it can be conditionally rendered by astro.. 😄

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

yup got it.

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

yeah

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

looks fire, imma take this one.

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

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>

70 replies

KPCKevin Powell - Community

•Created by proudyyyy on 9/21/2024 in #front-end

background fontstyle black index number inside flex-col container

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>

70 replies

Gaming

Programming