Use rem for fonts, margins, and padding (#561)

* Use rem for font-size

* Use rem for padding

* Use rem for margins

Author: jarrodmillman

assets/theme-css/backtotop.css

@@ -4,7 +4,7 @@
   opacity: 0;
   visibility: hidden;
   bottom: 25px;
-  margin: 0 25px 0 0;
+  margin: 0 1.563rem 0 0;
   z-index: 9999;
   transition: 0.35s;
   transform: scale(0.7);
@@ -34,7 +34,7 @@
   transition: all 0.3s;
   border-radius: 50%;
   text-align: center;
-  font-size: 26px;
+  font-size: 1.625rem;
 }
 body #backtotop a {
   outline: none;

assets/theme-css/content.css

@@ -9,7 +9,7 @@
   flex-basis: 70em;
   flex-shrink: 1;
   flex-direction: column;
-  margin: 0 30px;
+  margin: 0 1.875rem;
   padding: 1rem;
 
   /* Handle code cells overflowing */

assets/theme-css/footer.css

@@ -10,7 +10,7 @@
 }
 
 #footer-logo-column {
-  padding: 20px 5vw;
+  padding: 1.25rem 5vw;
   font-size: 1rem;
 }
 
@@ -23,8 +23,8 @@
 }
 
 .footer-column {
-  padding-left: 0px;
-  margin-top: 20px;
+  padding-left: 0;
+  margin-top: 1.25rem;
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
@@ -40,7 +40,7 @@
 
 .footer-actions {
   max-width: 25vw;
-  margin: 20px 25px;
+  margin: 1.25rem 1.563rem;
 }
 
 .footer-actions > p {
@@ -104,6 +104,6 @@
 }
 
 .copyright {
-  font-size: 12px;
+  font-size: 0.75rem;
   color: var(--colorSecondary);
 }

assets/theme-css/lists.css

@@ -6,13 +6,13 @@ dl.field-list {
 dl.field-list > dt {
   font-weight: bold;
   word-break: break-word;
-  padding-left: 0.5em;
-  padding-right: 5px;
+  padding-left: 0.5rem;
+  padding-right: 0.313rem;
 }
 
 dl.field-list > dd {
-  padding-left: 0.5em;
-  margin-top: 0em;
-  margin-left: 0em;
-  margin-bottom: 0em;
+  padding-left: 0.5rem;
+  margin-top: 0;
+  margin-left: 0;
+  margin-bottom: 0;
 }

assets/theme-css/news.css

@@ -20,10 +20,10 @@
 .news-title {
   display: flex;
   letter-spacing: 1.5px;
-  font-size: 27px;
+  font-size: 1.688rem;
   font-weight: bold;
-  margin: 10px;
-  margin-right: 20px;
+  margin: 0.625rem;
+  margin-right: 1.25rem;
 }
 
 @media only screen and (max-width: 1300px) {
@@ -39,7 +39,7 @@
 @media only screen and (max-width: 1090px) {
   .news-container {
     flex-direction: column;
-    padding: 30px;
+    padding: 1.875rem;
   }
 
   .news-date {

assets/theme-css/posts.css

@@ -99,7 +99,7 @@
 }
 
 .tag-cloud-title {
-  font-size: 32px;
-  margin-top: 60px;
-  padding-bottom: 10px;
+  font-size: 2rem;
+  margin-top: 3.75rem;
+  padding-bottom: 0.625rem;
 }

assets/theme-css/shortcuts.css

@@ -10,7 +10,7 @@
 }
 
 #shortcuts {
-  margin-top: 10px;
+  margin-top: 0.625rem;
   font-size: 0.9rem;
 }
 
@@ -20,7 +20,7 @@
 }
 
 #shortcuts > div:not(.active) {
-  margin-left: 2px;
+  margin-left: 0.125rem;
   border-left: 1px solid var(--pst-color-text-base);
   opacity: 0.75;
 }
@@ -32,19 +32,19 @@
 }
 
 .shortcuts-H2 {
-  padding: 5px 5px 0 15px;
+  padding: 0.313rem 0.313rem 0 0.938rem;
   font-size: 95%;
   cursor: pointer;
 }
 
 .shortcuts-H3 {
-  padding: 5px 5px 0 25px;
+  padding: 0.313rem 0.313rem 0 1.563rem;
   font-size: 90%;
   cursor: pointer;
 }
 
 .shortcuts-H4 {
-  padding: 5px 5px 0 35px;
+  padding: 0.313rem 0.313rem 0 2.188rem;
   font-size: 85%;
   cursor: pointer;
 }

assets/theme-css/styles.css

@@ -109,7 +109,7 @@ a > code {
 
 @media only screen and (max-width: 600px) {
   .flex-column {
-    margin: 0 30px;
+    margin: 0 1.875rem;
   }
 }
 
@@ -130,7 +130,7 @@ svg.icon {
 }
 
 .chroma {
-  padding: 10px;
+  padding: 0.625rem;
 }
 
 /* reboot stuff needed for pydata-sphinx-theme */

assets/theme-css/tabs.css

@@ -7,8 +7,8 @@
   display: flex;
   flex-flow: row wrap;
   row-gap: 0.25rem;
-  margin-bottom: 0px;
-  padding-bottom: 0px;
+  margin-bottom: 0;
+  padding-bottom: 0;
 }
 
 /* The tab is the clickable element that selects between tabpanels (see below) */
@@ -48,7 +48,7 @@
 [role="tabpanel"] {
   border-top: 1px solid var(--pst-color-border);
   border-bottom: 1px solid var(--pst-color-border);
-  margin-top: 1px;
+  margin-top: 0.063rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   width: 100%;

assets/theme-css/videos.css

@@ -13,7 +13,7 @@ iframe {
   max-width: 100%;
   height: 360px;
   margin-top: 1rem;
-  margin-bottom: 0rem;
+  margin-bottom: 0;
 }
 
 .youtube .video-meta {