HummingBirdAnimeClient/public/css/responsive.css
Timothy J Warren 24edf55f44
All checks were successful
timw4mail/HummingBirdAnimeClient/PR-12 This commit looks good
Responsive updates for smaller screen sizes
2018-11-05 09:47:05 -05:00

99 lines
1.5 KiB
CSS

/* ----------------------------------------------------------------------------
Viewport-based styles
-----------------------------------------------------------------------------*/
@media screen and (max-width: 1100px) {
.flex {
flex-wrap: wrap;
}
aside.info,
aside.info + article,
.fixed aside.info,
.fixed aside.info + article {
max-width: none;
width: 100%;
}
/* aside.info {
order: 1;
} */
}
@media screen and (max-width: 800px) {
* {
max-width: none !important;
}
table {
box-shadow: none;
}
body,
.details .flex > * {
margin: 0;
}
}
@media screen and (max-width: 40em) {
nav a {
line-height: 4em;
line-height: 4rem;
}
img,
picture {
width: 100%;
}
main {
padding: 0 0, 5em 0.5em;
padding: 0 0.5rem 0.5rem;
}
table {
display: block;
}
.media {
margin: 2px 0;
}
.details {
padding: 0.5em;
padding: 0.5rem;
}
/* Expand tabs */
.tabs > [type="radio"]:checked + label {
background: #fff;
}
/* Expand vertical tabs */
.vertical-tabs .tab {
flex-wrap: wrap;
}
.tabs .content,
.tabs > [type="radio"]:checked + label + .content,
.vertical-tabs .tab .content {
display: block;
border: 0;
max-height: none;
}
.tabs > label,
.tabs > label:active,
.tabs > label:hover,
.tabs > [type="radio"]:checked + label,
.vertical-tabs .tab label,
.vertical-tabs .tab label:active,
.vertical-tabs .tab label:hover,
.vertical-tabs [type=radio]:focus + label,
.vertical-tabs [type=radio]:checked + label {
background: #fff;
border: 0;
width: 100%;
cursor: default;
color: #000;
}
}