Stretch top-level tabbed labels to viewport on mobile

This commit is contained in:
squidfunk 2021-08-10 15:24:46 +02:00
parent 4f2f4b672c
commit e37223f0aa
4 changed files with 13 additions and 5 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -39,7 +39,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.163bcbda.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.ce6831e8.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">

View File

@ -162,7 +162,7 @@
// Tab labels container
.tabbed-labels {
display: flex;
width: 100%;
max-width: 100vw; // TODO: see if we can use something else
overflow: auto;
box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest) inset;
scroll-snap-type: x proximity;
@ -215,6 +215,17 @@
}
}
// [mobile -]: Align with body copy
@include break-to-device(mobile) {
// Top-level tab label containers
> .tabbed-alternate .tabbed-labels {
margin: 1em px2rem(-16px);
padding: 0 px2rem(16px);
scroll-padding: 0 px2rem(16px);
}
}
// Tab block container
.tabbed-alternate {
flex-direction: column;