Change bootstrap helpers and variables

client/src/app/+about/about-instance/about-instance.component.html

@@ -2,7 +2,7 @@
   <div class="col-md-12 col-xl-6">
 
     <div class="d-flex justify-content-between">
-      <h1 i18n class="fw-semibold pt-fs-5">About {{ instanceName }}</h1>
+      <h1 i18n class="fw-semibold fs-5">About {{ instanceName }}</h1>
 
       <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="peertube-button-link orange-button h-100 d-flex align-items-center">Contact us</a>
     </div>

client/src/app/+about/about-peertube/about-peertube.component.html

@@ -1,5 +1,5 @@
 <div class="root">
-  <h1 i18n class="pt-fs-3 text-center fw-semibold mb-3">
+  <h1 i18n class="fs-3 text-center fw-semibold mb-3">
     This website is powered by PeerTube
   </h1>
 
@@ -60,7 +60,7 @@
   </div>
 
   <div class="d-flex flex-column">
-    <h2 class="mb-4 mt-5 text-center pt-fs-5 fw-semibold">
+    <h2 class="mb-4 mt-5 text-center fs-5 fw-semibold">
       <div class="anchor" id="privacy"></div> <!-- privacy anchor -->
       <ng-container i18n>P2P & Privacy</ng-container>
     </h2>
@@ -76,7 +76,7 @@
       tracker as long as you download or watch the video.
     </p>
 
-    <h3 i18n class="pt-fs-5">What are the consequences?</h3>
+    <h3 i18n class="fs-5">What are the consequences?</h3>
 
     <p i18n>
       In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video.

client/src/sass/class-helpers/_common.scss

@@ -1,7 +1,7 @@
-@use '_variables' as *;
-@use '_mixins' as *;
 @use '_badges' as *;
 @use '_icons' as *;
+@use '_mixins' as *;
+@use '_variables' as *;
 
 .link-orange {
   color: pvar(--mainForegroundColor);

client/src/sass/class-helpers/_custom-bootstrap-helpers.scss

@@ -3,34 +3,6 @@
 
 // Font sizes
 
-.pt-fs-1 {
-  @include font-size(2.5rem);
-}
-
-.pt-fs-2 {
-  @include font-size(2rem);
-}
-
-.pt-fs-3 {
-  @include font-size(1.75rem);
-}
-
-.pt-fs-4 {
-  @include font-size(1.5rem);
-}
-
-.pt-fs-5 {
-  @include font-size(1.25rem);
-}
-
-.pt-fs-5-5 {
+.fs-5-5 {
   @include font-size(1.125rem);
-}
-
-.pt-fs-6 {
-  @include font-size(1rem);
-}
-
-.pt-fs-7 {
-  @include font-size(0.875rem);
 }

client/src/sass/class-helpers/index.scss

@@ -1,10 +1,5 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-@use '_badges' as *;
-@use '_icons' as *;
-@use '_fonts' as *;
-@use '_menu' as *;
 @use '_buttons' as *;
-@use '_forms' as *;
 @use '_common' as *;
-@use '_custom-bootstrap-helpers' as *;
+@use '_custom-bootstrap-helpers' as *;
+@use '_forms' as *;
+@use '_menu' as *;

client/src/sass/include/_bootstrap-variables.scss

@@ -8,9 +8,9 @@ $grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,
   // Small screen / phone
-  sm: 576px,
+  sm: $mobile-view,
   // Medium screen / tablet
-  md: 768px,
+  md: $small-view,
   // Large screen / desktop
   lg: 900px,
   // Extra large screens / wide desktops

client/src/sass/include/_variables.scss

@@ -10,6 +10,9 @@ $font-semibold: 600;
 $font-bold: 700;
 $line-height-normal: 1.2;
 
+$font-size-rem-13px: 0.8125rem;
+$font-size-rem-14px: 0.875rem;
+
 $grey-background-color: #E5E5E5;
 $grey-background-hover-color: #EFEFEF;
 $grey-foreground-color: #585858;