2020-07-13 21:26:05 +00:00
|
|
|
// 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;
|
|
|
|
}
|
2020-07-14 16:46:08 +00:00
|
|
|
}
|
|
|
|
}
|
2020-08-13 21:02:34 +00:00
|
|
|
#toc {
|
2020-08-16 02:25:17 +00:00
|
|
|
right: -50vw;
|
|
|
|
width: 50vw;
|
2020-08-14 16:23:35 +00:00
|
|
|
}
|
2020-07-14 16:46:08 +00:00
|
|
|
}
|
|
|
|
|
2020-07-13 21:26:05 +00:00
|
|
|
@media only screen and (max-width: $screen-tablet) {
|
2020-08-18 00:59:27 +00:00
|
|
|
header {
|
|
|
|
nav {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
2020-07-13 21:26:05 +00:00
|
|
|
main {
|
|
|
|
align-self: stretch;
|
|
|
|
overflow-x: hidden; // safety for negative figure margin below
|
2020-08-13 21:02:34 +00:00
|
|
|
width: auto !important;
|
2020-07-13 21:26:05 +00:00
|
|
|
|
|
|
|
aside,
|
|
|
|
article h2,
|
2020-07-14 16:46:08 +00:00
|
|
|
article h3,
|
2020-08-13 21:02:34 +00:00
|
|
|
article h4,
|
|
|
|
article p,
|
|
|
|
article blockquote {
|
2020-07-13 21:26:05 +00:00
|
|
|
margin-left: 0;
|
|
|
|
margin-right: 0;
|
|
|
|
max-width: 100%;
|
|
|
|
text-align: left;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
article {
|
|
|
|
ul {
|
2020-08-13 21:02:34 +00:00
|
|
|
align-self: start;
|
2020-07-13 21:26:05 +00:00
|
|
|
padding: 0;
|
2020-08-13 21:02:34 +00:00
|
|
|
width: 100%;
|
2020-07-13 21:26:05 +00:00
|
|
|
}
|
|
|
|
figure {
|
2020-08-14 17:45:07 +00:00
|
|
|
margin: 2vmax -6vmin 1vmax; // move images outward
|
|
|
|
max-width: 100vw;
|
|
|
|
figcaption {
|
|
|
|
margin: 0 12vmin;
|
|
|
|
}
|
2020-07-13 21:26:05 +00:00
|
|
|
}
|
|
|
|
}
|
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;
|
|
|
|
}
|
2020-08-13 21:02:34 +00:00
|
|
|
}
|
|
|
|
}
|
2020-07-13 21:26:05 +00:00
|
|
|
}
|
|
|
|
}
|
2020-08-13 21:02:34 +00:00
|
|
|
#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;
|
|
|
|
}
|
|
|
|
}
|
2020-08-18 14:41:28 +00:00
|
|
|
footer section {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
2020-08-13 21:02:34 +00:00
|
|
|
#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;
|
2020-08-13 21:02:34 +00:00
|
|
|
}
|
2020-07-13 21:26:05 +00:00
|
|
|
}
|
|
|
|
|
2020-08-14 16:23:35 +00:00
|
|
|
@media only screen and (min-width: $screen-tablet) {
|
|
|
|
.show-mobile {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-13 21:26:05 +00:00
|
|
|
@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;
|
|
|
|
}
|
|
|
|
}
|