From 040f347f389f4f167a46196f42e79f44d0aa220a Mon Sep 17 00:00:00 2001 From: Josh Date: Mon, 2 Jun 2025 19:55:56 -0700 Subject: [PATCH 1/3] up base font size; use scalable font units --- .../s2b_hugo_theme/assets/css/cal/main.css | 9 +++--- .../s2b_hugo_theme/assets/css/custom.css | 28 ++++++++++++++++++- .../s2b_hugo_theme/layouts/partials/nav.html | 2 +- 3 files changed, 33 insertions(+), 6 deletions(-) diff --git a/site/themes/s2b_hugo_theme/assets/css/cal/main.css b/site/themes/s2b_hugo_theme/assets/css/cal/main.css index 72e935d2..c3993377 100644 --- a/site/themes/s2b_hugo_theme/assets/css/cal/main.css +++ b/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; } diff --git a/site/themes/s2b_hugo_theme/assets/css/custom.css b/site/themes/s2b_hugo_theme/assets/css/custom.css index 959d28bc..d4cf4d44 100644 --- a/site/themes/s2b_hugo_theme/assets/css/custom.css +++ b/site/themes/s2b_hugo_theme/assets/css/custom.css @@ -8,6 +8,11 @@ --carousel-bg-img: url('../img/S2B_photo_grid_2094x796.jpg') center center repeat; } +html, +body { + font-size: 1rem; +} + .box-image-text .image { min-height: 200px; max-height: 200px; @@ -62,9 +67,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 +119,7 @@ main .donate a { color: #630; border-radius: 12px; padding: 0.25em 1em; - font-size: 16px; + font-size: 1rem; } .affix { diff --git a/site/themes/s2b_hugo_theme/layouts/partials/nav.html b/site/themes/s2b_hugo_theme/layouts/partials/nav.html index e8b13b13..435c5b24 100644 --- a/site/themes/s2b_hugo_theme/layouts/partials/nav.html +++ b/site/themes/s2b_hugo_theme/layouts/partials/nav.html @@ -25,7 +25,7 @@ {{ range .Site.Menus.main }}