standardize component structure more

2 files changed, 32 insertions, 25 deletions

diff --git a/styles/layout.css b/styles/layout.css
index f2b2dba..4a64adb 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -1,6 +1,7 @@
 :root {
   --header-height: 400px;
   --header-overlap: 150px;
+  --min-main-overhang: 100px;
   --header-bar-height: 48px;
   --main-width: 600px;
   --footer-spacing: 8px;
@@ -95,7 +96,7 @@ header .headerBackground {
   top: 0;
   left: 0;
   right: 0;
-  height: 400px;
+  height: var(--header-height);
   z-index: -1;
   user-select: none;
 }
@@ -114,7 +115,7 @@ header .headerBackground::after {
   background: rgba(0,0,0,.35);
 }
 
-header:not(.homepage) + h1 {
+header:not(.homepage) ~ h1.pageTitle {
   width: var(--main-width);
   margin: 0 auto;
   padding: var(--text-padding);
@@ -123,40 +124,21 @@ header:not(.homepage) + h1 {
   margin-top: -80px;
 }
 
-main {
-  font-family: Arial, sans-serif;
-}
-
 main.mainColumn {
   width: var(--main-width);
   box-sizing: border-box;
   padding: var(--text-padding);
   margin: 0 auto;
   background: var(--main-background);
-  min-height: calc(var(--header-overlap) + 100px);
+  min-height: calc(var(--header-overlap) + var(--min-main-overhang));
   box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
 }
 
-header.homepage + main.mainColumn {
-  min-height: calc(var(--header-overlap) + 100px - var(--header-bar-height));
-}
-
-main.mainColumn aside.infobar {
-  margin: calc(-1 * var(--text-padding));
-  margin-bottom: var(--text-padding);
-  padding: var(--text-padding);
-  background: var(--main-background);
-  height: var(--header-bar-height);
-  width: var(--main-width);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  border-bottom: solid 1px var(--text-dimmed);
+header.homepage ~ .mainColumn {
+  min-height: calc(var(--header-overlap) + var(--min-main-overhang) - var(--header-bar-height));
 }
 
-main.mainColumn > p:first-child,
-main.mainColumn .infobar + p {
+main.mainColumn > p:first-child {
   margin-top: 0;
 }
 
diff --git a/styles/pay-transparency.module.css b/styles/pay-transparency.module.css
new file mode 100644
index 0000000..8df22bd
--- /dev/null
+++ b/styles/pay-transparency.module.css
@@ -0,0 +1,25 @@
+.horizOverflow {
+  margin: 0 calc(-1 * var(--text-padding));
+  width: calc(100% + 2 * var(--text-padding));
+  overflow-x: auto;
+}
+
+.table {
+  position: relative;
+  font-size: .9em;
+  padding: 0 var(--text-padding);
+
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  column-gap: calc(.5 * var(--text-padding));
+}
+
+.table .heading {
+  color: var(--text-bright);
+  font-weight: bolder;
+  text-decoration: underline;
+}
+
+.table > span:not(.position):not(.heading) {
+  color: var(--text-dimmed);
+}