diff --git a/assets/scss/_media.scss b/assets/scss/_media.scss index cdddb26..783993b 100644 --- a/assets/scss/_media.scss +++ b/assets/scss/_media.scss @@ -11,6 +11,7 @@ } @media only screen and (max-width: $screen-laptop) { + // increase the column and main content widths a bit main { article { p, @@ -19,7 +20,7 @@ h4, section, blockquote { - width: min(60vmax, 100%); // increase the column width a bit + width: min(60vmax, 100%); } h2 { margin: 2vmax 5vmin 1vmax; @@ -29,6 +30,7 @@ } } } + // make the toc wider #toc { right: -50vw; width: 50vw; @@ -36,11 +38,13 @@ } @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 @@ -59,26 +63,35 @@ width: 100%; } article { + // full width lists ul { align-self: start; padding: 0; width: 100%; } + // move images outward figure { - margin: 2vmax -6vmin 1vmax; // move images outward + margin: 2vmax -6vmin 1vmax; max-width: 100vw; figcaption { margin: 0 12vmin; } + // remove radius on images + picture, + img { + border-radius: 0; + } } } &#home { + // home page posts are vertical now ul.posts li { flex-direction: column; time { padding: 1vmax 0 0 0; } } + // fixing the thoughts side scroller ul.thoughts { transform: translateX(-6vmin); li { @@ -92,6 +105,7 @@ } } } + // make the toc even wider #toc { right: -67vw; width: 67vw; @@ -99,6 +113,7 @@ } @media only screen and (max-width: $screen-mobile) { + // stack the author block vertically now section#author { align-items: center; flex-direction: column; @@ -107,6 +122,7 @@ padding-bottom: 0.5vmax; } } + // add some padding on list page elements main#list section { time { color: var(--border-accent); @@ -120,30 +136,36 @@ padding-top: 1.375rem; } } + // stack footer content vertically footer section { flex-direction: column; } + // just hide the toc here #toc { display: none; } + // other things hard-coded to be hidden on mobile .hidden-mobile { display: none; } } @media only screen and (max-width: $screen-narrow) { + // show the banner on phones only 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; } @@ -153,6 +175,7 @@ } @media only screen and (min-width: $screen-full) { + // padding improvements on really big screens main article h2 { margin: 2vmax 5vmin 1vmax; } diff --git a/assets/scss/main.scss b/assets/scss/main.scss index cabd957..13075b4 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -351,6 +351,15 @@ main { top: -0.5vmax; } } + + // add some buffer to the last one in the list + &:last-child::after { + content: ''; + display: block; + width: 6vmin; + height: 100%; + right: 0; + } } } } @@ -369,14 +378,6 @@ main { color: var(--text-color-take); font-size: max(2.5vmax, 2rem); // slightly smaller } - - article { - align-items: center; - border-radius: max(2vmax, 1rem); - display: flex; - flex-direction: column; - width: min(50vmax, 100%); - } } // list pages diff --git a/layouts/taxonomy/tag.html b/layouts/taxonomy/tag.html index ff91d9f..2fa808f 100644 --- a/layouts/taxonomy/tag.html +++ b/layouts/taxonomy/tag.html @@ -8,6 +8,9 @@ {{ range .Data.Pages }}
+