CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Quote Block xl breakpoint

Browse Source
This commit is contained in:
adilallo
2025-08-26 10:08:37 -06:00
parent f1dbfbfdac
commit 7a3947934a
2 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/QuoteBlock.js
+10 -11
View File
@@ -19,29 +19,28 @@ const QuoteBlock = ({ className = "" }) => {
w-full h-full"
/>
<div className="flex flex-col gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-048)] lg:gap-[var(--spacing-scale-064)] relative z-10">
<div className="flex flex-col gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-018)]">
<div className="flex flex-col gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-048)] lg:gap-[var(--spacing-scale-064)] xl:gap-[105px] relative z-10">
<div className="flex flex-col gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-018)] xl:gap-[var(--spacing-scale-032)]">
<Image
src="assets/Quote_Avatar.svg"
alt="Quote Avatar"
width={64}
height={64}
className="filter sepia md:w-[120px] md:h-[120px] lg:w-[150px] lg:h-[150px]"
className="filter sepia md:w-[120px] md:h-[120px] lg:w-[150px] lg:h-[150px] xl:w-[200px] xl:h-[200px]"
/>
<blockquote>
<p className="font-bricolage-grotesque font-normal text-[18px] leading-[120%] tracking-[0px] md:text-[36px] md:leading-[110%] md:tracking-[0px] md:text-[52px] text-[var(--color-content-inverse-primary)] -indent-[0.5em] [&>span]:font-bricolage-grotesque">
<span>"</span>The rules of decision-making must be open and
available to everyone, and this can happen only if they are
formalized.<span>"</span>
<p className="font-bricolage-grotesque font-normal text-[18px] leading-[120%] tracking-[0px] md:text-[36px] md:leading-[110%] md:tracking-[0px] lg:text-[52px] xl:text-[64px] text-[var(--color-content-inverse-primary)] -indent-[0.5em] relative before:content-['\201C'] after:content-['\201D'] before:mr-[0.05em] after:ml-[0.05em] before:[font-family:var(--font-bricolage-grotesque)] after:[font-family:var(--font-bricolage-grotesque)]">
The rules of decision-making must be open and available to
everyone, and this can happen only if they are formalized.
</p>
</blockquote>
</div>
<div className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)]">
<p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] text-[var(--color-content-inverse-primary)] uppercase">
<div className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)] xl:gap-[var(--spacing-scale-020)]">
<p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] xl:text-[32px] text-[var(--color-content-inverse-primary)] uppercase">
Jo Freeman
</p>
<p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] text-[var(--color-content-inverse-primary)] uppercase -indent-[0.5em] [&>span]:font-inter">
<span>"</span>The Tyranny of Structurelessness<span>"</span>
<p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] xl:text-[32px] text-[var(--color-content-inverse-primary)] uppercase -indent-[0.5em] relative before:content-['\201C'] after:content-['\201D'] before:mr-[0.05em] after:ml-[0.05em] before:[font-family:var(--font-inter)] after:[font-family:var(--font-inter)]">
The Tyranny of Structurelessness
</p>
</div>
</div>
app/components/QuoteDecor.js
+1 -1
View File
@@ -3,7 +3,7 @@
const QuoteDecor = ({ className = "" }) => {
return (
<svg
className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 w-full h-full md:max-w-[640px] lg:max-w-[850px] xl:max-w-[850px] ${className}`}
className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 w-full h-full md:max-w-[640px] lg:max-w-[850px] xl:max-w-[1100px] ${className}`}
viewBox="400 0 442 163"
aria-hidden="true"
overflow="visible"