Add media breakpoints

src/css/_mixins.scss

@@ -0,0 +1,19 @@
+$breakpoints: (
+  "sm": 600px,
+  "md": 768px,
+  "lg": 992px,
+  "xl": 1200px,
+);
+
+@mixin breakpoint($mq-breakpoint, $mq-breakpoints: $breakpoints) {
+  // If $mq-breakpoint is a key that exists in $mq-breakpoints, get and use the value
+  @if map-has-key($mq-breakpoints, $mq-breakpoint) {
+    $mq-breakpoint: map-get($mq-breakpoints, $mq-breakpoint);
+  }
+  
+  @media screen and (min-width: #{$mq-breakpoint}) {
+    @content;
+  }
+}
+  
+  

src/css/global.css

@@ -56,9 +56,9 @@ h2 {
   font-size: 2.5rem;
 }
 
-main, article {
+main,
+article {
   padding: 1em;
-  margin: 0 2em;
   color: #802659;
   border: 16px solid;
   border-image: url(../img/nine-patch.png) 32 round;
@@ -66,8 +66,15 @@ main, article {
   background-color: rgb(255, 252, 240);
   box-shadow: 0px 0px 20px rgb(16, 15, 15);
 }
+@media screen and (min-width: 600px) {
+  main,
+  article {
+    margin: 0 2em;
+  }
+}
 
-main :where(ol, ul), article :where(ol, ul) {
+main :where(ol, ul),
+article :where(ol, ul) {
   all: revert;
   margin: 0;
 }
@@ -81,11 +88,14 @@ a {
   border-radius: 10px;
 }
 
-a:hover, a:active {
+a:hover,
+a:active {
   background-color: rgba(135, 154, 57, 0.25);
 }
 
-a.logo, a.logo:hover, a.logo:active {
+a.logo,
+a.logo:hover,
+a.logo:active {
   font-size: 3em;
   color: rgb(160, 47, 111);
   text-decoration: none;
@@ -100,17 +110,40 @@ p {
   margin-bottom: 1em;
 }
 
-ul, ol {
+ul,
+ol {
   margin-bottom: 1em;
 }
 
 footer.footer_main {
-  margin: 2em 0 1em 0;
+  margin: 2em 1em 1em 1em;
   text-align: center;
 }
 
-main > :last-child, header > :last-child {
+main > :last-child,
+header > :last-child {
   margin-bottom: 0px;
 }
 
+.float-right {
+  margin: 0;
+}
+@media screen and (min-width: 600px) {
+  .float-right {
+    float: right;
+    margin-left: 0.5em;
+  }
+}
+
+.float-right > img {
+  display: block;
+  width: 192px;
+  height: auto;
+}
+@media screen and (min-width: 600px) {
+  .float-right > img {
+    margin: auto;
+  }
+}
+
 /*# sourceMappingURL=global.css.map */

src/css/global.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAGA;EACE;EACA;;ACPF;AAAA;AAAA;AAAA;AAWA;EACE,kBFkBS;EEjBT,OFQM;EEPN;EACA;;;AAGF;EACE,YAVa;;;AAaf;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OA5BG;EA6BH;EACA;EACA;EACA,kBFhBM;EEiBN;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE,OFRU;EESV;;;AAGF;EACE,kBAhDS;;;AAmDX;EACE;EACA,OFVY;EEWZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"global.css"}
+{"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.scss","_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAGA;EACE;EACA;;ACLF;AAAA;AAAA;AAAA;AAWA;EACE,kBFgBS;EEfT,OFMM;EELN;EACA;;;AAGF;EACE,YAVa;;;AAaf;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,OA5BG;EA6BH;EACA;EACA;EACA,kBFlBM;EEmBN;;AC9BA;EDsBF;AAAA;IAUI;;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE,OFdU;EEeV;;;AAGF;AAAA;EAEE,kBArDS;;;AAwDX;AAAA;AAAA;EAGE;EACA,OFnBY;EEoBZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;ACzFA;EDwFF;IAGI;IACA;;;;AAIJ;EACE;EACA;EACA;;ACnGA;EDgGF;IAKI","file":"global.css"}

src/css/global.scss

@@ -1,3 +1,5 @@
+@use "mixins" as *;
+
 @use "colors";
 @use "fonts";
 
@@ -31,18 +33,22 @@ h2 {
   font-size: 2.5rem;
 }
 
-main, article {
+main,
+article {
   padding: 1em;
-  margin: 0 2em;
   color: $fg;
   border: 16px solid;
   border-image: url(../img/nine-patch.png) 32 round;
   -webkit-border-image: url(../img/nine-patch.png) 32 round;
   background-color: colors.$paper;
   box-shadow: 0px 0px 20px colors.$black;
+  @include breakpoint("sm") {
+    margin: 0 2em;
+  }
 }
 
-main :where(ol, ul), article :where(ol, ul) {
+main :where(ol, ul),
+article :where(ol, ul) {
   all: revert;
   margin: 0;
 }
@@ -56,11 +62,14 @@ a {
   border-radius: 10px;
 }
 
-a:hover, a:active {
+a:hover,
+a:active {
   background-color: $bg-hover;
 }
 
-a.logo, a.logo:hover, a.logo:active {
+a.logo,
+a.logo:hover,
+a.logo:active {
   font-size: 3em;
   color: $fg-logo;
   text-decoration: none;
@@ -75,15 +84,34 @@ p {
   margin-bottom: 1em;
 }
 
-ul, ol {
+ul,
+ol {
   margin-bottom: 1em;
 }
 
 footer.footer_main {
-  margin: 2em 0 1em 0;
+  margin: 2em 1em 1em 1em;
   text-align: center;
 }
 
-main > :last-child, header > :last-child{
+main > :last-child,
+header > :last-child {
   margin-bottom: 0px;
 }
+
+.float-right {
+  margin: 0;
+  @include breakpoint("sm") {
+    float: right;
+    margin-left: 0.5em;
+  }
+}
+
+.float-right > img {
+  display: block;
+  width: 192px;
+  height: auto;
+  @include breakpoint("sm") {
+    margin: auto;
+  }
+}

src/index.md

@@ -3,12 +3,12 @@ layout: page.njk
 date: Last Modified
 ---
 
-# About Me
+<p class="float-right">
-
-<p style="float: right; margin-left: 0.5em; margin-bottom: 0;">
 <img src="img/gba_gil.png" width="192" height="168" />
 </p>
 
+# About Me
+
 Hello! My name is Gil and my pronouns are he/they. I'm a former electrical engineering student, now working on the side as a hobbyist software & game developer. I also write &ndash; primarily poems and fiction, with some essays here and there. I used to be a community organizer and student activist, but now I mostly work with the Ogra.ph Collective. You can find links to my social media profiles below.
 
 ## Ogra.ph Collective