scribd
/
scribd.github.io
mirror of https://github.com/scribd/scribd.github.io
1
0
Fork 0
Code Issues Releases Wiki Activity

Make visibility utility classes more robust, fix max-width calculation bug

This commit is contained in:
Kyle Gordy 2019-11-24 12:21:59 -05:00
parent 2b9032ed69
commit 257761c7ea
4 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_includes/header.html
View File

@ -14,7 +14,7 @@
</a>
<!-- Mobile menu button -->
<button class="nav__menu-trigger hidden-md" type="button" aria-label="Navigation Menu" aria-expanded="false">
<button class="nav__menu-trigger hidden-md-up" type="button" aria-label="Navigation Menu" aria-expanded="false">
<span class="visually-hidden">Menu</span>
<span class="hamburger">
<span class="hamburger__inner"></span>
@ -35,7 +35,7 @@
{% endfor %}
<!-- Social icons (mobile only) -->
<li class="nav-social-list hidden-md">
<li class="nav-social-list hidden-md-up">
<a class="nav-social-list__item text-white no-underline" href="https://www.twitter.com/{{ site.twitter_username| cgi_escape | escape }}">
<svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#twitter' | relative_url }}"></use></svg>
<span class="visually-hidden">Scribd on Twitter</span>
@ -55,7 +55,7 @@
</li>
<!-- Github links (mobile only) -->
<li class="hidden-md monospace fs-md">
<li class="hidden-md-up monospace fs-md">
<a class="nav-github-link text-white" href="{{site.github.repository_url}}/edit/{{ site.branch }}/{{page.path}}">Improve this Page</a><a class="nav-github-link text-white" href="{{site.github.repository_url}}/commits/{{ site.branch }}/{{page.path}}">Page History</a>
</li>
</ul>

2
assets/_sass/component/_footer.scss
View File

@ -35,7 +35,7 @@ main { flex: 1; }
}
.footer .logo {
@media(max-width: $bp-md) {
@media (max-width: $bp-md - 1px) {
margin-bottom: rem-calc(10px);
max-width: rem-calc(110px);
}

4
assets/_sass/component/_navigation.scss
View File

@ -32,7 +32,7 @@ $nav-zindex: 10;
}
.nav .logo {
@media(max-width: $bp-md) {
@media(max-width: $bp-md - 1px) {
max-width: rem-calc(105px);
}
}
@ -54,7 +54,7 @@ $nav-zindex: 10;
}
.nav-list {
@media (max-width: $bp-md) {
@media (max-width: $bp-md - 1px) {
position: fixed;
top: 0;
right: 0;

32
assets/_sass/utilities/_visibility.scss
View File

@ -7,24 +7,50 @@
display: none !important;
}
.hidden-sm {
// Hide at breakpoint size upward
.hidden-sm-up {
@media (min-width: $bp-sm) {
display: none !important;
}
}
.hidden-md {
.hidden-md-up {
@media (min-width: $bp-md) {
display: none !important;
}
}
.hidden-lg {
.hidden-lg-up {
@media (min-width: $bp-lg) {
display: none !important;
}
}
// Hide at breakpoint size downward
.hidden-sm-down {
display: none !important;
@media (min-width: $bp-md) {
display: inherit !important;
}
}
.hidden-md-down {
display: none !important;
@media (min-width: $bp-lg) {
display: inherit !important;
}
}
.hidden-lg-down {
display: none !important;
@media (min-width: $bp-xl) {
display: inherit !important;
}
}
// Hide only visually, but have it available for screen readers:
// https://a11yproject.com/posts/how-to-hide-content/
.visually-hidden:not(:focus):not(:active) {