blog/assets/scss/_media.scss

182 lines
4.3 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) {
// increase the column and main content widths a bit
2020-08-16 02:25:17 +00:00
main {
article {
p,
ul,
h3,
h4,
section,
blockquote {
width: min(60vmax, 100%);
2020-08-16 02:25:17 +00:00
}
h2 {
margin: 2vmax 5vmin 1vmax;
}
h3 {
margin: 2vmax 0 1vmax;
}
}
}
// make the toc wider
#toc {
2020-08-16 02:25:17 +00:00
right: -50vw;
width: 50vw;
}
}
@media only screen and (max-width: $screen-tablet) {
// hiding the nav until we can make it responsive
header {
nav {
display: none;
}
}
// all content is now full width
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 {
// full width lists
ul {
align-self: start;
padding: 0;
width: 100%;
}
// move images outward
figure {
margin: 2vmax -6vmin 1vmax;
max-width: 100vw;
figcaption {
margin: 0 12vmin;
}
// remove radius on images
picture,
img {
border-radius: 0;
}
}
}
2020-08-19 19:04:04 +00:00
&#home {
// home page posts are vertical now
2020-08-19 19:04:04 +00:00
ul.posts li {
flex-direction: column;
time {
padding: 1vmax 0 0 0;
}
}
// fixing the thoughts side scroller
2020-08-19 19:04:04 +00:00
ul.thoughts {
transform: translateX(-6vmin);
li {
&:first-child {
margin-left: 6vmin;
}
a {
width: 33vmax;
}
}
}
}
}
// make the toc even wider
#toc {
right: -67vw;
width: 67vw;
}
}
2020-08-16 02:25:17 +00:00
@media only screen and (max-width: $screen-mobile) {
// stack the author block vertically now
2020-08-16 02:25:17 +00:00
section#author {
align-items: center;
flex-direction: column;
span {
display: block;
padding-bottom: 0.5vmax;
}
}
// add some padding on list page elements
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;
}
}
// stack footer content vertically
footer section {
flex-direction: column;
}
// just hide the toc here
#toc {
2020-08-16 02:25:17 +00:00
display: none;
}
// other things hard-coded to be hidden on mobile
2020-08-16 02:25:17 +00:00
.hidden-mobile {
display: none;
}
}
@media only screen and (max-width: $screen-narrow) {
// show the banner on phones only
2020-08-16 02:25:17 +00:00
main aside img#banner {
display: block;
}
}
@media only screen and (min-width: $screen-tablet) {
// hide anything that should just be visible on mobile
.show-mobile {
display: none;
}
}
@media only screen and (min-width: $screen-display) {
// padding improvements on big screens
main article h2 {
margin: 2vmax 7vmin 1vmax;
}
ul.list li time {
padding-left: 3rem;
}
}
@media only screen and (min-width: $screen-full) {
// padding improvements on really big screens
main article h2 {
margin: 2vmax 5vmin 1vmax;
}
}