diff --git a/web/themes/interledger/css/components/footer-notes.css b/web/themes/interledger/css/components/footer-notes.css new file mode 100644 index 000000000..107dea6b7 --- /dev/null +++ b/web/themes/interledger/css/components/footer-notes.css @@ -0,0 +1,24 @@ +.footer-notes { + padding-inline: 5%; + font-size: var(--step--1); +} + +.footer-notes .content-wrapper::before { + content: ""; + display: block; + height: 1px; + width: 30%; + top: 0; + left: 0; + margin-bottom: var(--space-2xs); + background-color: black; +} + +.footer-notes ol { + list-style: none; + padding: 0; +} + +.footnote-backlink { + font-size: var(--step--2); +} diff --git a/web/themes/interledger/css/components/table.css b/web/themes/interledger/css/components/table.css index b314bdfc7..b1b1f853d 100644 --- a/web/themes/interledger/css/components/table.css +++ b/web/themes/interledger/css/components/table.css @@ -68,24 +68,25 @@ } /* Responsive card layout for medium screens and below */ +/* except for tables on Policy pages */ @media (max-width: 1024px) { - .table-wrapper table thead { + .table-wrapper table:not(.policy-table) thead { display: none; } - .table-wrapper table, - .table-wrapper table tbody { + .table-wrapper table:not(.policy-table), + .table-wrapper table:not(.policy-table) tbody { display: block; } .table-wrapper table tbody { - border: 1px solid var(---table-border-color-sm); + border: 1px solid var(--table-border-color-sm); border-radius: var(--border-radius); overflow: hidden; background: var(--table-bg-sm); } - .table-wrapper table tr { + .table-wrapper table:not(.policy-table) tr { display: block; } @@ -101,8 +102,11 @@ color: var(--table-fg-sm); } - .table-wrapper table td { + .table-wrapper table:not(.policy-table) td { display: block; + } + + .table-wrapper table td { padding: var(--space-2xs) var(--space-xs); position: relative; color: var(--table-fg-sm); @@ -144,3 +148,17 @@ padding-bottom: var(--space-2xs); } } + +/* Policy Briefs page table styling */ +.table-wrapper table.policy-table { + min-width: 600px; + max-width: none; +} + +.table-wrapper table.policy-table td:first-child { + white-space: normal; +} + +.table-wrapper:has(table.policy-table) { + overflow-x: auto; +} diff --git a/web/themes/interledger/interledger.libraries.yml b/web/themes/interledger/interledger.libraries.yml index 38b4d4cc4..2f3363364 100644 --- a/web/themes/interledger/interledger.libraries.yml +++ b/web/themes/interledger/interledger.libraries.yml @@ -1,5 +1,5 @@ global-styling: - version: 1.7.3 + version: 1.7.4 css: theme: css/fonts.css: {} @@ -31,6 +31,7 @@ global-styling: css/components/cta-button.css: {} css/components/event-card.css: {} css/components/faq.css: {} + css/components/footer-notes.css: {} css/components/hero.css: {} css/components/highlight-text.css: {} css/components/podcast.css: {} diff --git a/web/themes/interledger/templates/field--node--field-footer-notes.html.twig b/web/themes/interledger/templates/field--node--field-footer-notes.html.twig new file mode 100644 index 000000000..b13f02886 --- /dev/null +++ b/web/themes/interledger/templates/field--node--field-footer-notes.html.twig @@ -0,0 +1,13 @@ +