Skip to content

Commit

Permalink
use simple flexbox layout for footer cells
Browse files Browse the repository at this point in the history
  • Loading branch information
willnorris committed Oct 22, 2021
1 parent f8ff3d4 commit cd8c2d7
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 25 deletions.
11 changes: 9 additions & 2 deletions assets/css/_main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -184,8 +184,15 @@ span.Icon--caretDown {

/* Footer */

.footer .Grid-cell {
min-width: 180px;
@media (min-width: 800px) {
.footer .container {
display: flex;
flex-wrap: wrap;
}

.footer .footer-cell {
flex: 1 1 25%;
}
}

a.foot-link {
Expand Down
19 changes: 9 additions & 10 deletions layouts/partials/footer.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<!-- Footer -->
<div class="footer">
<div class="Grid container">
<div class="Grid-cell footer-cell u-size1of4 footer-margin">
<div class="container">
<div class="footer-cell footer-margin">
<a href="{{ "projects" | relURL }}" class="Button Button--large">Explore Projects</a>
</div>
<div class="Grid-cell footer-cell u-size1of4 footer-margin">
<div class="footer-cell footer-margin">
<h3 class="xsmall-margin">
<a class="foot-link" target="_blank" href="https://about.twitter.com/">About</a>
</h3>
<a class="foot-link" target="_blank" href="https://about.twitter.com/en/who-we-are/twitter-for-good">Twitter for Good</a>
<a class="foot-link" target="_blank" href="https://careers.twitter.com/">Careers</a>
</div>

<div class="Grid-cell footer-cell u-size1of4 footer-margin">
<div class="footer-cell footer-margin">
<h3 class="xsmall-margin">
<a class="foot-link" target="_blank" href="https://blog.twitter.com/">Blogs</a>
</h3>
Expand All @@ -21,7 +21,7 @@ <h3 class="xsmall-margin">
<a class="foot-link" target="_blank" href="https://blog.twitter.com/developer">Developer</a>
</div>

<div class="Grid-cell footer-cell u-size1of4 footer-margin">
<div class="footer-cell footer-margin">
<h3 class="xsmall-margin">
<a class="foot-link" target="_blank" href="https://developer.twitter.com/">Developers</a>
</h3>
Expand All @@ -30,22 +30,21 @@ <h3 class="xsmall-margin">
<a class="foot-link" target="_blank" href="https://developer.twitter.com/community">Communities</a>
</div>

<div class="Grid-cell footer-cell u-size1of4">
<div class="footer-cell">
<a class="foot-link" href="">© {{ now.Format "2006"}} Twitter, Inc.</a>
</div>

<div class="Grid-cell footer-cell u-size1of4">
<div class="footer-cell">
<a class="foot-link" target="_blank" href="https://help.twitter.com/rules-and-policies/twitter-cookies">Cookies</a>
</div>

<div class="Grid-cell footer-cell u-size1of4">
<div class="footer-cell">
<a class="foot-link" target="_blank" href="https://twitter.com/privacy">Privacy</a>
</div>

<div class="Grid-cell footer-cell u-size1of4">
<div class="footer-cell">
<a class="foot-link" target="_blank" href="https://twitter.com/tos">Terms and Conditions</a>
</div>

</div>
</div> <!-- End of Footer -->

13 changes: 0 additions & 13 deletions static/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,6 @@ if (matchMedia) {
var mediaQuery650 = window.matchMedia("(max-width: 650px)")
lessThan650px(mediaQuery650)
mediaQuery650.addListener(lessThan650px)

var mediaQuery800 = window.matchMedia("(max-width: 800px)")
lessThan800px(mediaQuery800)
mediaQuery800.addListener(lessThan800px)
}

// Breakpoint for mobile navigation
Expand All @@ -69,15 +65,6 @@ function mobileNavigation() {
}
}

// Mobile footer
function lessThan800px(mediaQuery) {
if (mediaQuery.matches) {
removeClassByClass("footer-cell", "u-size1of4")
} else {
addClassByClass("footer-cell", "u-size1of4")
}
}

// set dark theme on twitter timeline widgets and feather components
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.getElementsByTagName('body')[0].classList.add("u-featherBackgroundDark");
Expand Down

0 comments on commit cd8c2d7

Please sign in to comment.