Idk

.eleventy.js

@@ -13,6 +13,12 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("./src/img");
   eleventyConfig.addWatchTarget("./src/css");
 
+  eleventyConfig.addShortcode("sigil", function (name, label) {
+    return `<h3 class="sigil">
+    ${label}<img src="img/sigil-${name}.png" />
+    </h3>`;
+  });
+
   return {
     dir: {
       input: "src",

src/css/global.css

@@ -48,6 +48,15 @@ body {
   background: rgba(160, 47, 111, 0.25);
 }
 
+h1, h2, h3, h4, h5, h6 {
+  text-align: center;
+}
+@media screen and (min-width: 600px) {
+  h1, h2, h3, h4, h5, h6 {
+    text-align: left;
+  }
+}
+
 h1 {
   font-size: 3rem;
 }
@@ -56,6 +65,10 @@ h2 {
   font-size: 2.5rem;
 }
 
+h3 {
+  font-size: 2rem;
+}
+
 main,
 article {
   padding: 1em;
@@ -139,13 +152,14 @@ header > :last-child {
   }
 }
 
-img {
+.sigil {
-  image-rendering: crisp-edges;
+  display: block;
 }
-
+@media screen and (min-width: 600px) {
-img.sigil {
+  .sigil {
     display: inline;
-  vertical-align: sub;
+    vertical-align: text-bottom;
+  }
 }
 
 /*# sourceMappingURL=global.css.map */

src/css/global.css.map

@@ -1 +1 @@
-{"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;EACA;EACA;EACA;EACA;;AC7FA;EDwFF;IAOI;IACA;;;;AAIJ;EACE;;;AAGF;EACE;EACA","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;;ACfA;EDcF;IAGI;;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,OAvCG;EAwCH;EACA;EACA;EACA,kBF7BM;EE8BN;;ACzCA;EDiCF;AAAA;IAUI;;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE,OFzBU;EE0BV;;;AAGF;AAAA;EAEE,kBAhES;;;AAmEX;AAAA;AAAA;EAGE;EACA,OF9BY;EE+BZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;ACxGA;EDmGF;IAOI;IACA;;;;AAIJ;EACE;;AChHA;ED+GF;IAGI;IACA","file":"global.css"}

src/css/global.scss

@@ -25,6 +25,13 @@ body {
   background: $bg-highlight;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  text-align: center;
+  @include breakpoint("sm") {
+    text-align: left;
+  }
+}
+
 h1 {
   font-size: 3rem;
 }
@@ -33,6 +40,10 @@ h2 {
   font-size: 2.5rem;
 }
 
+h3 {
+  font-size: 2rem;
+}
+
 main,
 article {
   padding: 1em;
@@ -111,11 +122,10 @@ header > :last-child {
   }
 }
 
-img {
+.sigil {
-  image-rendering: crisp-edges;
+  display: block;
-}
+  @include breakpoint("sm") {
-
-img.sigil {
     display: inline;
-  vertical-align: sub;
+    vertical-align: text-bottom;
+  }
 }

src/index.md

@@ -7,12 +7,12 @@ date: Last Modified
 
 # About me
 
-<img src="img/sigil-ngalan.png" class="sigil" /> Name: Gil (he/they)  
+- <img src="img/sigil-ngalan.png" class="sigil" /> Name: Gil (he/they)  
-<img src="img/sigil-taon.png" class="sigil" /> Age: 25  
+- <img src="img/sigil-taon.png" class="sigil" /> Age: 25  
-<img src="img/sigil-likhain.png" class="sigil" /> Creating: Software & games  
+- <img src="img/sigil-likhain.png" class="sigil" /> Creating: Software & games  
-<img src="img/sigil-sulatin.png" class="sigil" /> Writing: Poems, fiction, essays  
+- <img src="img/sigil-sulatin.png" class="sigil" /> Writing: Poems, fiction, essays  
-<img src="img/sigil-datirati.png" class="sigil" /> Previously: Studying electrical engineering, community organizing, student activism  
+- <img src="img/sigil-datirati.png" class="sigil" /> Previously: Studying electrical engineering, community organizing, student activism  
-<img src="img/sigil-itayo.png" class="sigil" /> Building: Ogra.ph Collective
+- <img src="img/sigil-itayo.png" class="sigil" /> Building: Ogra.ph Collective
 
 ## Ogra.ph Collective