Move all files to tome/
This commit is contained in:
parent
5675bcfc36
commit
674daab35b
2874 changed files with 0 additions and 0 deletions
84
tome/content/node.10b3608a-50f6-4178-9ae2-d07f353a9c23.yml
Normal file
84
tome/content/node.10b3608a-50f6-4178-9ae2-d07f353a9c23.yml
Normal file
|
@ -0,0 +1,84 @@
|
|||
uuid:
|
||||
- value: 10b3608a-50f6-4178-9ae2-d07f353a9c23
|
||||
langcode:
|
||||
- value: en
|
||||
type:
|
||||
- target_id: daily_email
|
||||
target_type: node_type
|
||||
target_uuid: 8bde1f2f-eef9-4f2d-ae9c-96921f8193d7
|
||||
revision_timestamp:
|
||||
- value: '2025-05-11T09:00:10+00:00'
|
||||
revision_uid:
|
||||
- target_type: user
|
||||
target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
|
||||
revision_log: { }
|
||||
status:
|
||||
- value: true
|
||||
uid:
|
||||
- target_type: user
|
||||
target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
|
||||
title:
|
||||
- value: 'The power of arbitrary classes'
|
||||
created:
|
||||
- value: '2024-07-15T00:00:00+00:00'
|
||||
changed:
|
||||
- value: '2025-05-11T09:00:10+00:00'
|
||||
promote:
|
||||
- value: false
|
||||
sticky:
|
||||
- value: false
|
||||
default_langcode:
|
||||
- value: true
|
||||
revision_translation_affected:
|
||||
- value: true
|
||||
path:
|
||||
- alias: /daily/2024/07/15/the-power-of-arbitrary-classes
|
||||
langcode: en
|
||||
body:
|
||||
- value: |
|
||||
<p><a href="/daily/2023/01/02/dont-use-arbitrary-values-in-tailwind-css">I generally don't use aritrary classes with Tailwind CSS</a>.</p>
|
||||
|
||||
<p>But, they are powerful, and I do use them in some situations.</p>
|
||||
|
||||
<p>A few months ago, <a href="https://x.com/opdavies/status/1755332703308652730">I posted a screenshot of a timeline component</a> I've built for a client project.</p>
|
||||
|
||||
<p>Today, I needed to fix an issue with the first and last "paths" as they were stretching further than they should.</p>
|
||||
|
||||
<p>This is the class I added to fix the problem:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>mr-[calc(50%<em>-_calc(var(--path-width)</em>/_2))]</p>
|
||||
</blockquote>
|
||||
|
||||
<p>It adds an arbitrary amount of right margin, which is 50% of the container minus half of the path width, which is the <code>--path-width</code> variable.</p>
|
||||
|
||||
<p>This class uses the <code>calc</code> function as well as <code>var</code> to determine the correct margin to apply, whilst keeping the code adaptable in case the path width changes.</p>
|
||||
|
||||
<p>And, as this is a value that's only used in this component, there's no benefit to writing this in a stylesheet - making an arbitrary value was a good option.</p>
|
||||
|
||||
|
||||
format: full_html
|
||||
processed: |
|
||||
<p><a href="/daily/2023/01/02/dont-use-arbitrary-values-in-tailwind-css">I generally don't use aritrary classes with Tailwind CSS</a>.</p>
|
||||
|
||||
<p>But, they are powerful, and I do use them in some situations.</p>
|
||||
|
||||
<p>A few months ago, <a href="https://x.com/opdavies/status/1755332703308652730">I posted a screenshot of a timeline component</a> I've built for a client project.</p>
|
||||
|
||||
<p>Today, I needed to fix an issue with the first and last "paths" as they were stretching further than they should.</p>
|
||||
|
||||
<p>This is the class I added to fix the problem:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>mr-[calc(50%<em>-_calc(var(--path-width)</em>/_2))]</p>
|
||||
</blockquote>
|
||||
|
||||
<p>It adds an arbitrary amount of right margin, which is 50% of the container minus half of the path width, which is the <code>--path-width</code> variable.</p>
|
||||
|
||||
<p>This class uses the <code>calc</code> function as well as <code>var</code> to determine the correct margin to apply, whilst keeping the code adaptable in case the path width changes.</p>
|
||||
|
||||
<p>And, as this is a value that's only used in this component, there's no benefit to writing this in a stylesheet - making an arbitrary value was a good option.</p>
|
||||
|
||||
|
||||
summary: null
|
||||
field_daily_email_cta: { }
|
Loading…
Add table
Add a link
Reference in a new issue