blog/assets/scss/_media.scss

101 lines
2.1 KiB
SCSS

// media queries
@media only screen and (max-width: $screen-mobile) {
section#author {
align-items: center;
flex-direction: column;
span {
display: block;
padding-bottom: 0.5vmax;
}
}
#toc {
display: none;
}
.hidden-mobile {
display: none;
}
}
@media only screen and (max-width: $screen-tablet) {
main {
align-self: stretch;
overflow-x: hidden; // safety for negative figure margin below
width: auto !important;
aside,
article h2,
article h3,
article h4,
article p,
article blockquote {
margin-left: 0;
margin-right: 0;
max-width: 100%;
text-align: left;
width: 100%;
}
article {
ul {
align-self: start;
padding: 0;
width: 100%;
}
figure {
margin: 2vmax -6vmin 1vmax; // move images outward
max-width: 100vw;
figcaption {
margin: 0 12vmin;
}
}
}
&#list {
// move the numbers to the top
section {
list-style-position: inside;
h2 {
margin-top: 1vmax;
}
}
}
}
ul.list li {
flex-direction: column;
time {
padding: 1vmax 0 0 0;
}
}
#toc {
right: -67vw;
width: 67vw;
}
}
@media only screen and (max-width: $screen-laptop) {
#toc {
right: -50vw;
width: 50vw;
}
}
@media only screen and (min-width: $screen-tablet) {
.show-mobile {
display: none;
}
}
@media only screen and (min-width: $screen-display) {
main article h2 {
margin: 2vmax 7vmin 1vmax;
}
ul.list li time {
padding-left: 3rem;
}
}
@media only screen and (min-width: $screen-full) {
main article h2 {
margin: 2vmax 5vmin 1vmax;
}
}