@font-face { src: url($Bagnard); font-family: 'Bagnard'; } @font-face { src: url($PublicSans-Regular) format('woff2'); font-family: 'Public Sans'; font-weight: normal; font-style: normal; } @font-face { src: url($PublicSans-Bold) format('woff2'); font-family: 'Public Sans'; font-weight: bold; font-style: normal; } @font-face { src: url($PublicSans-Italic) format('woff2'); font-family: 'Public Sans'; font-weight: normal; font-style: italic; } @font-face { src: url($PublicSans-BoldItalic) format('woff2'); font-family: 'Public Sans'; font-weight: bold; font-style: italic; } @font-face { src: url($PublicSans-Light) format('woff2'); font-family: 'Public Sans'; font-weight: 300; font-style: normal; } :root { --font-family: 'Public Sans',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif } #site-text-logo, div[class^="category-title-header"] .category-title-contents .category-title, .custom-footer .first-box .heading { font-family: 'Bagnard', serif; } .d-header { box-shadow: none; border-bottom: 1px solid var(--primary-low); } .custom-header-links .headerLink { font-size: .85rem; opacity: 0.6; padding: 6px 10px; } .custom-header-links .headerLink a { padding: 0; } body:not(.category-announcements-blog) .forum-custom-header-links > a { background: radial-gradient(farthest-side, #FFD06F 98%,transparent 100%) bottom right/2px 2px, radial-gradient(farthest-side, #FFD06F 98%,transparent 100%) bottom left /2px 2px, linear-gradient(#FFD06F,#FFD06F) bottom/calc(100% - 2px) 2px; background-repeat:no-repeat; background-origin: padding-box; padding-bottom: 2px; } .category-announcements-blog .blog-custom-header-links > a { background: radial-gradient(farthest-side, #FFD06F 98%,transparent 100%) bottom right/2px 2px, radial-gradient(farthest-side, #FFD06F 98%,transparent 100%) bottom left /2px 2px, linear-gradient(#FFD06F,#FFD06F) bottom/calc(100% - 2px) 2px; background-repeat:no-repeat; background-origin: padding-box; padding-bottom: 2px; } .sidebar-wrapper, .sidebar-footer-wrapper .sidebar-footer-container:before, .sidebar-footer-wrapper .sidebar-footer-container { background: inherit; } .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; } } } body.crawler { .custom-footer { .footer-section-link-wrapper a { color: var(--secondary-high)!important; } .small-link { color: var(--secondary-high)!important; } } } #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; }