optimized font-size

Author: bennobuilder

src/components/buttons/GithubButton/styles.module.css

@@ -5,7 +5,7 @@
   border-radius: 3px;
   border: none;
 
-  font-size: 18px;
+  font-size: var(--ifm-font-size-18);
   font-weight: bold;
 
   cursor: pointer;

src/components/buttons/PrimaryButton/styles.module.css

@@ -4,7 +4,7 @@
   border-radius: 3px;
   border: none;
 
-  font-size: 18px;
+  font-size: var(--ifm-font-size-18);
   font-weight: bold;
 
   cursor: pointer;

src/css/custom.scss

@@ -34,6 +34,33 @@
   --ifm-color-gray-darkest: #262630;
   --ifm-color-gray-dark: #3c3c4c;
 
+  // ==============================================================================
+  // Font Sizes
+  // ==============================================================================
+
+  --ifm-font-size-12: .75rem;
+  --ifm-font-size-14: .875rem;
+  --ifm-font-size-16: 1rem;
+  --ifm-font-size-18: 1.125rem;
+  --ifm-font-size-20: 1.25rem;
+  --ifm-font-size-24: 1.5rem;
+  --ifm-font-size-28: 1.75rem;
+  --ifm-font-size-30: 1.875rem;
+  --ifm-font-size-32: 2rem;
+  --ifm-font-size-36: 2.25rem;
+  --ifm-font-size-40: 2.5rem;
+  --ifm-font-size-48: 3rem;
+  --ifm-font-size-56: 3.5rem;
+  --ifm-font-size-64: 4rem;
+  --ifm-font-size-72: 4.5rem;
+
+  --ifm-font-size-small: var(--ifm-font-size-14);
+  --ifm-font-size-body: var(--ifm-font-size-16);
+  --ifm-font-size-large: var(--ifm-font-size-20);
+  --ifm-font-size-display: var(--ifm-font-size-48);
+  --ifm-font-size-display-small: var(--ifm-font-size-24);
+  --ifm-font-size-display-large: var(--ifm-font-size-72);
+
   // ==============================================================================
   // Theme Colors
   // ==============================================================================
@@ -107,37 +134,55 @@
   --ifm-navbar-shadow: 0 1px 0 0 var(--ifm-color-primary-lightest);
   --ifm-dropdown-background-color: var(--ifm-color-background-2);
   --ifm-dropdown-hover-background-color: var(--ifm-color-background-3);
+}
 
+// ==============================================================================
+// Global
+// ==============================================================================
 
-  // ==============================================================================
-  // Scrollbar
-  // ==============================================================================
+html,
+body {
+  height: 100%;
+}
 
-  /* Firefox */
-  * {
-    scrollbar-color: var(--ifm-color-primary-lightest)
-      var(--ifm-color-primary-darkest);
-    scrollbar-width: thin;
-  }
+body {
+  margin: 0;
+  transition: var(--ifm-transition-fast) ease color;
+}
 
-  /* WebKit / Blink */
-  ::-webkit-scrollbar {
-    width: 7px !important;
-    height: 7px !important;
-  }
+#__docusaurus {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 
-  ::-webkit-scrollbar-track {
-    background: var(--ifm-color-primary-darkest) !important;
-  }
+// ==============================================================================
+// Scrollbar
+// ==============================================================================
 
-  ::-webkit-scrollbar-thumb {
-    border-radius: 0 !important;
-    background: var(--ifm-color-primary-lightest) !important;
-  }
+/* Firefox */
+* {
+  scrollbar-color: var(--ifm-color-primary-lightest) var(--ifm-color-primary-darkest);
+  scrollbar-width: thin;
+}
 
-  ::-webkit-scrollbar-corner {
-    background: var(--ifm-color-primary-dark) !important;
-  }
+/* WebKit / Blink */
+::-webkit-scrollbar {
+  width: 7px !important;
+  height: 7px !important;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--ifm-color-primary-darkest) !important;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0 !important;
+  background: var(--ifm-color-primary-lightest) !important;
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--ifm-color-primary-dark) !important;
 }
 
 // ==============================================================================
@@ -167,10 +212,10 @@
 
   /* For default Admonition */
   background-color: rgba(
-    121,
-    118,
-    171,
-    0.5
+                  121,
+                  118,
+                  171,
+                  0.5
   ); /* var(--ra-admonition-color) gets somehow overwritten */
   border-left-color: var(--ra-admonition-color-dark);
 

src/pages/LandingPage/components/HeaderView/styles.module.css

@@ -17,7 +17,7 @@
 
 .HeaderTitle {
   color: var(--ifm-navbar-link-color);
-  font-size: 4rem;
+  font-size: var(--ifm-font-size-64);
   font-weight: bold;
 }
 
@@ -35,7 +35,7 @@
 
 .SeparatorText {
   color: var(--ifm-navbar-link-active-color);
-  font-size: 1.25rem;
+  font-size: var(--ifm-font-size-20);
   margin-left: 15px;
   margin-right: 15px;
   margin-bottom: 7px;
@@ -49,7 +49,7 @@
 
 .DescriptionText {
   color: var(--ifm-color-primary-lightest);
-  font-size: 1.5rem;
+  font-size: var(--ifm-font-size-24);
   max-width: 400px;
 }
 
@@ -75,15 +75,15 @@
 
 @media (max-width: 768px) {
   .HeaderTitle {
-    font-size: 2rem;
+    font-size: var(--ifm-font-size-32);
   }
 
   .SeparatorRight {
     width: 150px;
   }
 
   .DescriptionText {
-    font-size: 1.3rem;
+    font-size: var(--ifm-font-size-20);
   }
 
   .ButtonContainer {

src/theme/Footer/styles.module.css

@@ -58,14 +58,14 @@
 .Tagline {
   max-width: 250px;
   margin-bottom: 0;
-  font-size: 16px;
+  font-size: var(--ifm-font-size-16);
   color: var(--ifm-color-on-background-2);
   font-weight: var(--ifm-font-weight-semibold);
 }
 
 .GithubButton {
   justify-self: start !important;
-  font-size: 12px !important;
+  font-size: var(--ifm-font-size-12) !important;
 }
 
 .SectionContainer {
@@ -78,7 +78,7 @@
 .LinkItemTitle {
   margin-bottom: 1.25rem;
   font-weight: var(--ifm-font-weight-bold);
-  font-size: 18px;
+  font-size: var(--ifm-font-size-18);
   list-style: none;
 }