full bleed divider on about page

Author: outofambit

src/content/text-detail/en/about.mdx

@@ -13,7 +13,7 @@ p5.js prioritizes accessibility, inclusivity, community, and joy. It makes sketc
 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/>
+<hr class='full-bleed'/>
 
 ## Community Statement
 

src/content/text-detail/es/about.mdx

@@ -13,6 +13,8 @@ p5.js prioriza la accesibilidad, la inclusión, la comunidad y la alegría. Hace
 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>
 
+<hr class='full-bleed'/>
+
 ## Declaración de la comunidad
 
 <div class='text-body-large'>

src/content/text-detail/hi/about.mdx

@@ -13,6 +13,8 @@ p5.js अभिगम्यता, समावेशिता, समुदा
 p5.js रचनात्मक अभिव्यक्ति के लिए पुनरावृत्त कोडिंग को प्रोत्साहित करता है। हम सभी के लिए ओपन-सोर्स और पहुंच को महत्व देते हैं। हमारा समुदाय स्वतंत्र रूप से सीखने, बनाने, कल्पना करने, डिज़ाइन करने, साझा करने और कोड करने के लिए प्रेरणा और नि:शुल्क सहायता प्रदान करता है।
 </div>
 
+<hr class='full-bleed'/>
+
 ## सामुदायिक वक्तव्य
 
 <div class='text-body-large'>

src/content/text-detail/ko/about.mdx

@@ -13,6 +13,8 @@ p5.js는 접근성, 포용성, 커뮤니티 및 즐거움을 추구합니다. 
 p5.js는 창의적 표현을 위한 반복적인 코딩을 장려합니다. 우리는 오픈소스와 모든 이의 접근성을 중요시합니다. 우리 커뮤니티는 자유롭게 배우고, 만들고, 상상하고, 디자인하고, 공유하고, 코딩할 수 있는 영감과 지원을 제공합니다.
 </div>
 
+<hr class='full-bleed'/>
+
 ## 커뮤니티 성명서
 
 <div class='text-body-large'>

src/content/text-detail/zh-Hans/about.mdx

@@ -13,6 +13,8 @@ p5.js 非常重视无障碍性、包容性、社区共享和传递快乐。它
 p5.js 鼓励通过迭代编码来实现创意表达。我们重视代码开源以及无障碍性。我们的社区为学习、创造、想象、设计、分享和自由编码提供灵感和支持。
 </div>
 
+<hr class='full-bleed'/>
+
 ## 社区声明
 
 <div class='text-body-large'>

styles/global.scss

@@ -364,6 +364,18 @@ th {
   }
 }
 
+hr.full-bleed {
+  position: relative;
+  left: -2.5rem;
+  width: calc(100% + 5rem);
+  max-width: calc(100% + 5rem);
+  @media (min-width: $breakpoint-tablet) {
+    left: calc(-1 * var(--spacing-lg));
+    width: calc(100% + var(--spacing-lg) * 2);
+    max-width: calc(100% + var(--spacing-lg) * 2);
+  }
+}
+
 // Hide default webkit search input decoration
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,