Merge pull request #944 from carrythebanner/font-size

Up base font size; use scalable font units

Author: carrythebanner

cal/src/style.css

@@ -70,7 +70,7 @@ html {
 }
 body {
   font-family: roboto, Helvetica, Arial, sans-serif;
-  font-size: 14px;
+  font-size: 1rem;
   line-height: 1.42857143;
   color: var(--page-text);
   background-color: var(--page-bg);

cal/src/tools/SearchTool.vue

@@ -65,7 +65,7 @@ export default {
   gap: 0.5em;
 }
 .c-search__past {
-  font-size: 14px;
+  font-size: 1rem;
   align-self: center;
   white-space: pre;
 }

cal/src/tools/ToolButton.vue

@@ -79,6 +79,6 @@ export default {
   display: flex;
   justify-content: center;
   gap:  0.5em;
-  font-size: 16px;
+  font-size: 1rem;
 }*/
 </style>

cal/src/tools/ToolPanel.vue

@@ -37,6 +37,6 @@ export default {
   display: flex;
   justify-content: center;
   gap:  0.5em;
-  font-size: 16px;
+  font-size: 1rem;
 }
 </style>

site/themes/s2b_hugo_theme/assets/css/cal/main.css

@@ -64,8 +64,8 @@ But if someone is using a high contrast display mode, the border will appear.
 }
 
 svg.icon {
-  width: 22px;
-  height: 22px;
+  width: 1.375rem;
+  height: 1.375rem;
   margin-right: 4px;
   vertical-align: middle;
   fill: currentColor;
@@ -138,7 +138,7 @@ svg.icon {
     width: 100%;
     text-align: left;
     padding: 0;
-    font-size: 1.75rem;
+    font-size: 1.1rem;
     font-weight: 500;
 }
 
@@ -337,6 +337,7 @@ h3 {
 .btn {
     color: #37b;
     background: #efefef;
+    font-size: 0.8125rem;
 }
 
 .btn:focus {
@@ -402,7 +403,7 @@ button.expand-details {
 .pp-banner .pp-headline,
 .promo-banner .pp-headline {
     font-weight: bold;
-    font-size: 24px;
+    font-size: 1.5rem;
     color: #663300;
 }
 

site/themes/s2b_hugo_theme/assets/css/custom.css

@@ -8,6 +8,24 @@
   --carousel-bg-img: url('../img/S2B_photo_grid_2094x796.jpg') center center repeat;
 }
 
+html,
+body {
+  font-size: 1rem;
+}
+
+h1,
+#heading-breadcrumbs h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.875rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
 .box-image-text .image {
   min-height: 200px;
   max-height: 200px;
@@ -62,9 +80,30 @@ header {
 }
 
 .navbar ul.dropdown-menu li a {
+  font-size: 0.75rem;
   color: #555555;
 }
 
+.navbar-nav .open .dropdown-menu > li > a {
+  line-height: 1.25;
+}
+
+.caret {
+  /* override Bootstrap caret styles */
+  border: 0;
+  width: auto;
+  height: auto;
+}
+
+.dropdown-toggle .caret::after {
+  content: "▾" / ""
+}
+
+.dropdown-toggle[aria-expanded="true"] .caret {
+  transform: rotate(180deg);
+}
+
+
 .header-dark-mask {
   background: var(--primary-accent);
   opacity: 0.8;
@@ -93,7 +132,7 @@ main .donate a {
   color: #630;
   border-radius: 12px;
   padding: 0.25em 1em;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .affix {

site/themes/s2b_hugo_theme/layouts/partials/nav.html

@@ -25,7 +25,7 @@
                   {{ range .Site.Menus.main }}
                   <li class="dropdown">
                     {{ if .HasChildren }}
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ .Name }} <span class="caret"></span></a>
+                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ .Name }} <span class="caret" role="img" aria-hidden="true"></span></a>
                     <ul class="dropdown-menu">
                       {{ range .Children }}
                         <li>