Merge pull request #351 from processing/text-styles

outofambit · web-flow · commit 8261feda9877 · 2024-05-14T09:25:05.000-07:00
Text style fixes
diff --git a/src/components/Footer/index.astro b/src/components/Footer/index.astro
@@ -7,7 +7,7 @@ const t = await getUiTranslator(currentLocale);
 ---
 
 <footer
-  class="border-t border-black grid-cols-3 lg:grid-cols-4 grid gap-x-[40px] text-xl lg:text-xl pt-md pb-5 px-lg bg-accent-color text-accent-type-color content-start"
+  class="text-body border-t border-black grid-cols-3 lg:grid-cols-4 grid gap-x-[40px] pt-md pb-5 px-lg bg-accent-color text-accent-type-color content-start"
 >
   <div class="grid lg:row-span-2 grid-rows-subgrid">
     <div>
diff --git a/src/components/Nav/JumpToLinks.tsx b/src/components/Nav/JumpToLinks.tsx
@@ -26,7 +26,7 @@ export const JumpToLinks = ({
         tabIndex={-1}
       >
         <span>{heading}</span>
-        <div class="pt-xs">
+        <div class="pt-[6px]">
           <Icon kind={isOpen ? "chevron-up" : "chevron-down"} />
         </div>
       </button>
@@ -35,10 +35,7 @@ export const JumpToLinks = ({
           {links?.map((link) => (
             <li
               key={link.label}
-              class={`
-              ${link.size === "small" ? "text-body-caption" : "text-body capitalize"}
-                ${link.current ? "underline" : ""}
-                `}
+              class={`${styles.linklabel} ${link.size ?? ""} ${link.current ? "current" : ""}`}
             >
               <a href={link.url}>{link.label}</a>
             </li>
diff --git a/src/components/Nav/MainNavLinks.tsx b/src/components/Nav/MainNavLinks.tsx
@@ -42,12 +42,7 @@ export const MainNavLinks = ({
         <Logo />
       </a>
 
-      <button
-        class={styles.toggle}
-        onClick={handleToggle}
-        aria-hidden="true"
-        tabIndex={-1}
-      >
+      <button onClick={handleToggle} aria-hidden="true" tabIndex={-1}>
         <div class={styles.mobileMenuLabel}>
           {isOpen ? (
             <Icon kind="close" />
diff --git a/src/components/Nav/styles.module.scss b/src/components/Nav/styles.module.scss
@@ -1,4 +1,5 @@
 @import "/styles/variables.scss";
+@import "/styles/global.scss";
 
 .container {
   height: fit-content;
@@ -39,6 +40,13 @@
     height: unset;
   }
 
+  ul {
+    font-size: 1.5rem;
+    line-height: 1.167;
+    -webkit-text-stroke-width: 0.15px;
+    margin-bottom: var(--spacing-xs);
+  }
+
   @media (min-width: $breakpoint-tablet) {
     display: grid;
     grid-auto-flow: column;
@@ -58,11 +66,14 @@
       display: flex;
       gap: var(--spacing-xs);
       padding: 0;
-      margin-bottom: var(--spacing-xs);
+      margin-bottom: 10px;
     }
 
     ul {
       grid-column: 1 / 2;
+      font-size: 1.25rem;
+      line-height: 1.2;
+      -webkit-text-stroke-width: 0.15px;
     }
 
     &:global(.open),
@@ -81,13 +92,14 @@
     top: -0.25rem;
 
     svg {
-      height: 1.25rem;
-      width: 1.25rem;
+      height: 1rem;
+      width: 1rem;
     }
     @media (min-width: $breakpoint-tablet) {
       display: none !important;
     }
   }
+
   .desktopMenuLabel {
     display: none;
     @media (min-width: $breakpoint-tablet) {
@@ -130,6 +142,10 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     padding: var(--spacing-sm) 1.25rem;
+    font-size: 1.5rem;
+    line-height: 1.167;
+    -webkit-text-stroke-width: 0.15px;
+    max-height: 300px;
 
     /* Hide scrollbar */
     // Chrome, Safari, Edge, Opera
@@ -165,10 +181,17 @@
     ul {
       padding-bottom: var(--spacing-md);
       display: inline-block;
+      font-size: 1rem;
+      line-height: 1.25;
+      -webkit-text-stroke-width: 0.05px;
     }
   }
 }
 
+:global(.reference-item) .jumpto ul {
+  grid-template-columns: 1fr;
+}
+
 .buttonlink {
   display: flex;
   width: 100%;
@@ -182,6 +205,38 @@
     color: var(--sidebar-bg-color);
     text-decoration: none;
   }
+  font-size: 1.5rem;
+  line-height: 1.167;
+  -webkit-text-stroke-width: 0.15px;
+
+  @media (min-width: $breakpoint-tablet) {
+    font-size: 1.25rem;
+    line-height: 1.2;
+    -webkit-text-stroke-width: 0.15px;
+  }
+}
+
+.linklabel {
+  &:global(.current) {
+    text-decoration-line: underline;
+  }
+
+  &:not(:global(.small)) {
+    font-size: 1.5rem;
+    line-height: 1.167;
+    -webkit-text-stroke-width: 0.15px;
+  }
+  &:global(.small) {
+    @extend .text-body;
+  }
+
+  @media (min-width: $breakpoint-tablet) {
+    &:not(&:global(.small)) {
+      font-size: 1.25rem;
+      line-height: 1.2;
+      -webkit-text-stroke-width: 0.15px;
+    }
+  }
 }
 
 /* Interaction */
diff --git a/src/components/PageHeader/ItemPage.astro b/src/components/PageHeader/ItemPage.astro
@@ -25,5 +25,5 @@ const { title, topic, subtitle } = Astro.props;
     <span>{title}</span>
   </div>
   <h1 class="whitespace-pre-line my-sm">{title}</h1>
-  {subtitle && <p class="text-2xl">{subtitle}</p>}
+  {subtitle && <p class="text-h3">{subtitle}</p>}
 </div>
diff --git a/src/components/PageHeader/RootPage.astro b/src/components/PageHeader/RootPage.astro
@@ -15,5 +15,5 @@ const borderStyle = isFilterRoute ? "" : "border-b border-sidebar-type-color";
   class=`min-h-[350px] h-[50vh] pt-5xl lg:pt-4xl bg-accent-color text-accent-type-color pb-md px-5 md:px-lg ${borderStyle}`
 >
   <h1 class="whitespace-pre-line">{title}</h1>
-  <p class="text-xl md:text-2xl mb-3xl">{subtitle}</p>
+  <p class="text-h3 mt-0 mb-3xl">{subtitle}</p>
 </div>
diff --git a/src/content/text-detail/en/about.mdx b/src/content/text-detail/en/about.mdx
@@ -5,16 +5,19 @@ import LinkButton from '../../../components/LinkButton/index.astro'
 
 ## What is p5.js
 
+<div class='text-body-large'>
 p5.js is a friendly tool for learning to code and make art. It is a free and open-source JavaScript library built by an inclusive, nurturing community. p5.js welcomes artists, designers, beginners, educators, and anyone else!
 
 p5.js prioritizes accessibility, inclusivity, community, and joy. It makes sketching with code as intuitive as sketching in a notebook. p5.js supports audio-visual, interactive, and experimental works for the web. It is accessible in many languages and has expansive documentation with visual examples. You can start coding right now in the web editor, and there are lots of tutorials to help. You can also expand p5.js with many community-created libraries. p5.js is always looking for contributors and appreciates involvement in all forms.
 
 p5.js encourages iterative coding for creative expression. We value open source and access for all. Our community provides inspiration and support to learn, create, imagine, design, share, and code freely.
+</div>
 
 <hr/>
 
 ## Community Statement
 
+<div class='text-body-large'>
 The p5.js community shares an interest in exploring the creation of art and design with technology. We are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, disability, class, caste, religion, culture, subculture, immigration status, age, skill level, occupation, and background. We stand in solidarity with justice and liberation movements. We work to acknowledge, dismantle, and prevent barriers to access p5.js code and the p5.js community. 
 
 Community values:
@@ -23,7 +26,7 @@ Community values:
 - We always try to offer help or guidance when we can, and we engage actively with feedback. 
 - We acknowledge that not everyone has the time, financial means, or capacity to participate actively, but we recognize and encourage contributions of all kinds. 
 - We approach conflict as a natural part of community and an invitation to re-align with our values. We collectively uphold and follow our Code of Conduct to ensure accountability in our community.
-
+</div>
 
 <div class='mt-xl'>
 <LinkButton variant='link' url='/access'>Access Statement</LinkButton>
diff --git a/src/content/text-detail/es/about.mdx b/src/content/text-detail/es/about.mdx
@@ -5,14 +5,17 @@ import LinkButton from '../../../components/LinkButton/index.astro'
 
 ## ¿Qué es p5.js?
 
+<div class='text-body-large'>
 p5.js es una herramienta amigable para aprender a programar y hacer arte. Es una biblioteca de JavaScript libre y de código abierto construida por una comunidad inclusiva y solidaria. ¡p5.js da la bienvenida a artistas, diseñadores, principiantes, educadores y cualquier otra persona!
 
 p5.js prioriza la accesibilidad, la inclusión, la comunidad y la alegría. Hace que dibujar con código sea tan intuitivo como dibujar en un cuaderno. p5.js admite obras audiovisuales, interactivas y experimentales para la web. Es accesible en muchos idiomas y tiene una documentación expansiva con ejemplos visuales. Puedes comenzar a programar ahora mismo en el editor web, ahí encontrarás muchos tutoriales para ayudarte. También puedes ampliar p5.js con muchas bibliotecas creadas por la comunidad. p5.js siempre está buscando colaboradores y aprecia la participación en todas sus formas.
 
 p5.js fomenta la programación iterativa para la expresión creativa. Valoramos el código abierto y el acceso para todos. Nuestra comunidad proporciona inspiración y apoyo para aprender, crear, imaginar, diseñar, compartir y programar libremente.
+</div>
 
 ## Declaración de la comunidad
 
+<div class='text-body-large'>
 La comunidad de p5.js comparte un interés en explorar la creación de arte y diseño con tecnología. Somos una comunidad de, y en solidaridad con, personas de todas las identidades y expresiones de género, orientaciones sexuales, razas, etnias, idiomas, neurotipos, tamaños, discapacidades, clases, castas, religiones, culturas, subculturas, estatus migratorio, edades, niveles de habilidad, ocupaciones y antecedentes. Nos solidarizamos con los movimientos de justicia y liberación. Trabajamos para reconocer, desmantelar y prevenir barreras de acceso al código de p5.js y a la comunidad de p5.js.
 
 Valores de la comunidad:
@@ -21,6 +24,7 @@ Valores de la comunidad:
 - Siempre intentamos ofrecer ayuda o orientación cuando podemos, y nos comprometemos activamente con los comentarios.
 - Reconocemos que no todos tienen el tiempo, los medios financieros o la capacidad para participar activamente, pero reconocemos y alentamos contribuciones de todo tipo.
 - Abordamos el conflicto como una parte natural de la comunidad y una invitación a realinearnos con nuestros valores. Colectivamente mantenemos y seguimos nuestro Código de Conducta para garantizar la rendición de cuentas en nuestra comunidad.
+</div>
 
 <div class='mt-xl'>
 <LinkButton variant='link' url='/access'>Access Statement</LinkButton>
diff --git a/src/content/text-detail/hi/about.mdx b/src/content/text-detail/hi/about.mdx
@@ -5,14 +5,17 @@ import LinkButton from '../../../components/LinkButton/index.astro'
 
 ## p5.js क्या है
 
+<div class='text-body-large'>
 p5.js कोड करना और कला बनाना सीखने के लिए एक अनुकूल उपकरण है। यह एक नि:शुल्क और ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है जो एक समावेशी, पोषित समुदाय द्वारा बनाई गई है। p5.js कलाकारों, डिज़ाइनरों, नौसिखिया, शिक्षकों और किसी अन्य का भी स्वागत करता है!
 
 p5.js अभिगम्यता, समावेशिता, समुदाय और आनंद को प्राथमिकता देता है। यह कोड के साथ स्केचिंग को नोटबुक में स्केचिंग के समान सहज बनाता है। p5.js वेब के लिए ऑडियो-विज़ुअल, इंटरैक्टिव और प्रयोगात्मक कार्यों का समर्थन करता है। यह कई भाषाओं में उपलब्ध है और इसमें दृश्य उदाहरणों के साथ विस्तृत दस्तावेज़ीकरण है। आप अभी वेब संपादक में कोडिंग शुरू कर सकते हैं, और मदद के लिए बहुत सारे ट्यूटोरियल हैं। आप कई समुदाय-निर्मित पुस्तकालयों के साथ p5.js का विस्तार भी कर सकते हैं। p5.js हमेशा योगदानकर्ताओं की तलाश में रहता है और सभी रूपों में भागीदारी की सराहना करता है।
 
 p5.js रचनात्मक अभिव्यक्ति के लिए पुनरावृत्त कोडिंग को प्रोत्साहित करता है। हम सभी के लिए ओपन-सोर्स और पहुंच को महत्व देते हैं। हमारा समुदाय स्वतंत्र रूप से सीखने, बनाने, कल्पना करने, डिज़ाइन करने, साझा करने और कोड करने के लिए प्रेरणा और नि:शुल्क सहायता प्रदान करता है।
+</div>
 
 ## सामुदायिक वक्तव्य
 
+<div class='text-body-large'>
 P5.js समुदाय प्रौद्योगिकी के साथ कला और डिज़ाइन के निर्माण की खोज में रुचि रखता है। हम हर लिंग पहचान और अभिव्यक्ति, यौन अभिविन्यास, नस्ल, जातीयता, भाषा, न्यूरो-प्रकार, आकार, विकलांगता, वर्ग, जाति, धर्म, संस्कृति, उपसंस्कृति, आप्रवास स्थिति, उम्र, कौशल स्तर, पेशा और पृष्ठभूमि के लोगों का एक समुदाय हैं और उनके साथ एकजुटता रखते हैं। हम न्याय और मुक्ति आंदोलनों के साथ एकजुटता से खड़े हैं। हम p5.js कोड और p5.js समुदाय तक पहुँचने में आने वाली बाधाओं को स्वीकार करने, ख़त्म करने और रोकने के लिए काम करते हैं। 
 
 सामुदायिक मूल्य:
@@ -21,6 +24,7 @@ P5.js समुदाय प्रौद्योगिकी के साथ 
 - जब भी संभव हो हम सहायता या मार्गदर्शन देने का प्रयास करते हैं और हम प्रतिक्रिया के साथ सक्रिय रूप से जुड़े रहते हैं।
 - हम स्वीकार करते हैं कि हर किसी के पास सक्रिय रूप से भाग लेने के लिए समय, वित्तीय साधन या क्षमता नहीं है, लेकिन हम सभी प्रकार के योगदानों को पहचानते हैं और प्रोत्साहित करते हैं।
 - हम संघर्ष को समुदाय का एक स्वाभाविक हिस्सा मानते हैं और इसे अपने मूल्यों के साथ फिर से जुड़ने का निमंत्रण मानते हैं। हम अपने समुदाय में जवाबदेही सुनिश्चित करने के लिए सामूहिक रूप से अपनी आचार संहिता का पालन करते हैं।
+</div>
 
 <div class='mt-xl'>
 <LinkButton variant='link' url='/access'>प्रवेश विवरण</LinkButton>
diff --git a/src/content/text-detail/ko/about.mdx b/src/content/text-detail/ko/about.mdx
@@ -5,14 +5,17 @@ import LinkButton from '../../../components/LinkButton/index.astro'
 
 ## p5.js란
 
+<div class='text-body-large'>
 p5.js는 코딩을 배우고 예술을 만드는 친근한 도구입니다. 이는 포용적이고 육성적인 커뮤니티에 의해 만들어진 무료 오픈소스 자바스크립트 라이브러리입니다. p5.js는 예술가, 디자이너, 초심자, 교육자 및 여러분 모두를 환영합니다!
 
 p5.js는 접근성, 포용성, 커뮤니티 및 즐거움을 추구합니다. 이것은 코드로 스케치하는 것을 노트에 스케치하는 것과 같이 직관적으로 만들어줍니다. p5.js는 웹을 위한 오디오-비주얼, 대화형 및 실험적 작업을 지원합니다. 많은 언어권에서 접근 가능한 풍부한 시각적 예제 문서를 제공합니다. 웹 에디터에서 지금 코딩을 시작할 수 있으며 도움이 필요한 경우 많은 튜토리얼을 참조할 수 있습니다. 또한 많은 커뮤니티에서 만든 라이브러리로 p5.js를 확장할 수 있습니다. p5.js는 언제나 기여자를 찾고 모든 형태의 참여를 환영합니다.
 
 p5.js는 창의적 표현을 위한 반복적인 코딩을 장려합니다. 우리는 오픈소스와 모든 이의 접근성을 중요시합니다. 우리 커뮤니티는 자유롭게 배우고, 만들고, 상상하고, 디자인하고, 공유하고, 코딩할 수 있는 영감과 지원을 제공합니다.
+</div>
 
 ## 커뮤니티 성명서
 
+<div class='text-body-large'>
 p5.js 커뮤니티는 기술을 통해 예술과 디자인에 관련된 탐구와 관심을 공유합니다. 우리는 성 정체성과 표현, 성적 지향, 인종, 민족, 언어, 신경 유형, 체형, 장애, 계급, 카스트, 종교, 문화, 하위 문화, 이민자, 연령, 기술 수준, 직업 및 다양한 배경의 사람들로 이루어진 커뮤니티이며, 정의와 해방에 연대합니다. 우리는 p5.js 코드 및 p5.js 커뮤니티에 대한 진입 장벽을 인지하고 있으며 접근성 향상을 위해 노력합니다.
 
 커뮤니티 가치:
@@ -21,6 +24,7 @@ p5.js 커뮤니티는 기술을 통해 예술과 디자인에 관련된 탐구
 - 우리는 가능한한 언제나 도움이나 지침을 제공하려 노력하고, 피드백에 적극적으로 응합니다.
 - 우리는 모든 사람들이 적극적으로 참여할 시간, 재정적 수단 또는 능력을 가지고 있지 않을 수 있음을 인정하고, 모든 기여를 인정하며 격려합니다.
 - 우리는 갈등을 커뮤니티의 자연스러운 부분으로 생각하며 우리의 가치를 재조정할 수 있는 기회로 생각합니다. 우리의 행동 강령을 준수하여 공동 커뮤니티에서 책임을 보장합니다.
+</div>
 
 <div class='mt-xl'>
 <LinkButton variant='link' url='/access'>접근성 성명서</LinkButton>
diff --git a/src/content/text-detail/zh-Hans/about.mdx b/src/content/text-detail/zh-Hans/about.mdx
diff --git a/src/layouts/CommunityLayout.astro b/src/layouts/CommunityLayout.astro
diff --git a/src/layouts/ReferenceItemLayout.astro b/src/layouts/ReferenceItemLayout.astro
diff --git a/styles/markdown.scss b/styles/markdown.scss
diff --git a/styles/variables.scss b/styles/variables.scss

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ const t = await getUiTranslator(currentLocale);`
`7`	`7`	`---`
`8`	`8`
`9`	`9`	`<footer`
`10`		`- class="border-t border-black grid-cols-3 lg:grid-cols-4 grid gap-x-[40px] text-xl lg:text-xl pt-md pb-5 px-lg bg-accent-color text-accent-type-color content-start"`
	`10`	`+ class="text-body border-t border-black grid-cols-3 lg:grid-cols-4 grid gap-x-[40px] pt-md pb-5 px-lg bg-accent-color text-accent-type-color content-start"`
`11`	`11`	`>`
`12`	`12`	`<div class="grid lg:row-span-2 grid-rows-subgrid">`
`13`	`13`	`<div>`
Original file line number	Diff line number	Diff line change
`@@ -15,5 +15,5 @@ const borderStyle = isFilterRoute ? "" : "border-b border-sidebar-type-color";`
`15`	`15`	class=`min-h-[350px] h-[50vh] pt-5xl lg:pt-4xl bg-accent-color text-accent-type-color pb-md px-5 md:px-lg ${borderStyle}`
`16`	`16`	`>`
`17`	`17`	`<h1 class="whitespace-pre-line">{title}</h1>`
`18`		`- <p class="text-xl md:text-2xl mb-3xl">{subtitle}</p>`
	`18`	`+ <p class="text-h3 mt-0 mb-3xl">{subtitle}</p>`
`19`	`19`	`</div>`