From 4092558872908d3d42caece24a6f7afd6566b9ac Mon Sep 17 00:00:00 2001 From: Jonah Aragon Date: Sat, 27 May 2023 22:40:36 -0500 Subject: [PATCH] Add page footer --- common/common.scss | 161 +++++++++++++++++++++++++++++++ common/footer.html | 230 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 391 insertions(+) create mode 100644 common/footer.html diff --git a/common/common.scss b/common/common.scss index 7da5665..bb1cbc9 100644 --- a/common/common.scss +++ b/common/common.scss @@ -88,3 +88,164 @@ body:not(.category-announcements-blog) .forum-custom-header-links > a { .category-team .topic-post.group-team { border-top: none; } + +// From discourse-easy-footer component: + +.custom-footer { + display: flex; + flex-wrap: wrap; + background: var(--primary); + .wrap { + box-sizing: border-box; + } + .flexbox { + width: 100%; + display: flex; + flex-wrap: wrap; + color: var(--secondary); + padding: 2em 0 1em 0; + } + .first-box { + max-width: 20%; + .heading { + font-size: $font-up-2; + font-weight: bold; + margin-bottom: 0.5em; + display: block; + } + .blurb { + color: var(--secondary-high); + } + } + .second-box { + flex: 1; + .links { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + ul { + list-style: none; + margin: 0; + min-width: 100px; + } + li { + margin: 0.5em 0; + } + } + } + .third-box { + width: 100%; + display: flex; + align-items: center; + border-top: 1px solid rgba(var(--primary-low-rgb), 0.05); + .social { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-end; + .social-link { + margin: 20px 10px; + display: flex; + align-items: center; + justify-content: center; + + .d-icon { + color: var(--secondary); + min-width: unset; + margin: 0; + font-size: $font-up-2; + opacity: 1; + } + } + } + .small-link { + color: var(--secondary-high); + margin: 0 0.25em; + font-size: $font-down-2; + } + } + .footer-links { + flex: 1; + } + .list span { + font-weight: bold; + } + .footer-section-link-wrapper a { + color: var(--secondary-high); + } + .list { + margin: 1em; + margin-top: 0; + } + .d-icon { + margin-right: 5px; + opacity: 0.7; + min-width: 16px; + text-align: center; + &.fa-none { + min-width: unset; + } + .rtl & { + margin-right: 0; + margin-left: 5px; + } + } +} + +#main-outlet { + // stick footer to bottom of short pages + min-height: 85vh; +} + +@media screen and (max-width: $large-width) { + .custom-footer { + .first-box { + max-width: 100%; + border-bottom: 1px solid rgba(var(--primary-low-rgb), 0.05); + margin-bottom: 1em; + padding-bottom: 1em; + + .blurb { + display: flex; + align-items: center; + } + } + .third-box { + margin-top: 0.5em; + } + .second-box .links { + justify-content: space-between; + } + .list { + margin: 0; + margin-top: 1em; + } + .first-box, + .second-box, + .third-box { + flex: 1 1 100%; + } + } +} + +@media screen and (max-width: 700px) { + .custom-footer { + .first-box { + width: 100%; + } + .list { + margin-top: 1em; + display: inline-block; + vertical-align: top; + min-width: 50%; + font-size: $font-up-1; + } + .links { + display: inline-block; + } + } +} + +.static-login .custom-footer { + margin-top: 3em; +} diff --git a/common/footer.html b/common/footer.html new file mode 100644 index 0000000..50086a9 --- /dev/null +++ b/common/footer.html @@ -0,0 +1,230 @@ +
+
+
+
+
+ Privacy Guides +
+
+ Massive organizations are monitoring your online activities. Privacy Guides is your central privacy and security resource to protect yourself online. +
+
+
+
+
+ + Knowledge Base + + + +
+
+ + Browsers + + + +
+
+ + Operating Systems + + + +
+
+ + VPN Providers + + + +
+
+ + Services + + + +
+
+ + Software + + + +
+
+
+
+
+ + Privacy + + + Terms of service + + + Posting guidelines + + + About us + + + Forum design by Jonah + +
+ + +
+
+
+