diff --git a/scss/_media.scss b/scss/_media.scss new file mode 100644 index 0000000..e0cbdc9 --- /dev/null +++ b/scss/_media.scss @@ -0,0 +1,18 @@ +@mixin breakpoint($point) { + @if $point == small { + @media only screen and (min-width: 600px) { @content; } + } + @else if $point == medium { + @media only screen and (min-width: 768px) { @content; } + } + @else if $point == large { + @media only screen and (min-width: 992px) { @content; } + } + @else if $point == x-large { + @media only screen and (min-width: 1200px) { @content; } + } + @else { + @error "Unknown breakpoint #{$point}."; + } + } + \ No newline at end of file diff --git a/scss/main.scss b/scss/main.scss index 5450acc..64419d6 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -1,3 +1,4 @@ +@use 'media'; @use 'theme'; body { @@ -5,7 +6,7 @@ body { color: var(--theme-text); } -#skip-navigation { +a#skip-navigation { position: fixed; top: -100%; right: 0; @@ -22,9 +23,19 @@ body { .contentarea { display: flex; - flex-direction: row-reverse; + flex-direction: column; main { width: 100%; } + + @include media.breakpoint(medium) { + flex-direction: row-reverse; + } +} + +ul#updates { + time { + color: rgb(110, 110, 110); // Muted color + } } \ No newline at end of file diff --git a/src/_includes/updates.njk b/src/_includes/updates.njk index 6e71920..81636bc 100644 --- a/src/_includes/updates.njk +++ b/src/_includes/updates.njk @@ -1,3 +1,6 @@ -