blog/assets/scss/_media.scss

159 lines
3.4 KiB
SCSS
Raw Normal View History

// media queries
2020-08-19 19:04:04 +00:00
@media only screen and (max-width: $screen-display) {
// this is the max-width on content, after this we start using 80% of the width for many things
main#home ul.thoughts {
transform: translateX(-10%);
li:first-child {
margin-left: 10%;
}
}
}
2020-08-16 02:25:17 +00:00
@media only screen and (max-width: $screen-laptop) {
main {
article {
p,
ul,
h3,
h4,
section,
blockquote {
width: min(60vmax, 100%); // increase the column width a bit
}
h2 {
margin: 2vmax 5vmin 1vmax;
}
h3 {
margin: 2vmax 0 1vmax;
}
}
}
#toc {
2020-08-16 02:25:17 +00:00
right: -50vw;
width: 50vw;
}
}
@media only screen and (max-width: $screen-tablet) {
header {
nav {
display: none;
}
}
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;
}
}
}
2020-08-19 19:04:04 +00:00
&#home {
ul.posts li {
flex-direction: column;
time {
padding: 1vmax 0 0 0;
}
}
ul.thoughts {
transform: translateX(-6vmin);
li {
&:first-child {
margin-left: 6vmin;
}
a {
width: 33vmax;
}
}
}
}
}
#toc {
right: -67vw;
width: 67vw;
}
}
2020-08-16 02:25:17 +00:00
@media only screen and (max-width: $screen-mobile) {
section#author {
align-items: center;
flex-direction: column;
span {
display: block;
padding-bottom: 0.5vmax;
}
}
2020-08-19 19:04:04 +00:00
main#list section {
time {
color: var(--border-accent);
opacity: 1;
right: 1.5rem;
top: 0.85rem;
}
h2 {
border-top: 0.75vmax solid var(--border-accent);
margin-top: 1.5rem;
padding-top: 1.375rem;
}
}
footer section {
flex-direction: column;
}
#toc {
2020-08-16 02:25:17 +00:00
display: none;
}
.hidden-mobile {
display: none;
}
}
@media only screen and (max-width: $screen-narrow) {
main aside img#banner {
display: block;
}
}
@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;
}
}