Add ograph page and better page width behavior

src/css/global.css

@@ -72,11 +72,12 @@ h1 {
 }
 
 h2 {
-  font-size: 2.5rem;
+  margin-top: 1rem;
+  font-size: 2rem;
 }
 
 h3 {
-  font-size: 2rem;
+  font-size: 1.5rem;
 }
 
 main,
@@ -92,7 +93,9 @@ article {
 @media screen and (min-width: 600px) {
   main,
   article {
-    margin: 0 2em;
+    max-width: 900px;
+    width: 90%;
+    margin: 0 auto;
     box-shadow: 8px 8px rgb(52, 51, 49);
   }
 }
@@ -101,12 +104,12 @@ main ul,
 article ol,
 article ul {
   all: revert;
-  margin-bottom: 1em;
+  margin: 1rem 0;
 }
 main p,
 article p {
   line-height: 1.5;
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
 }
 main :last-child,
 article :last-child {
@@ -130,20 +133,20 @@ a:active {
 a.logo,
 a.logo:hover,
 a.logo:active {
-  font-size: 3em;
+  font-size: 3rem;
   color: rgb(160, 47, 111);
   text-decoration: none;
 }
 
 nav.navbar {
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
 }
 nav.navbar li {
   display: inline-flex;
 }
 
 footer.footer-main {
-  margin: 2em 1em 1em 1em;
+  margin: 2rem 1rem 1rem 1rem;
   text-align: center;
 }
 
@@ -162,7 +165,7 @@ footer.footer-main {
 @media screen and (min-width: 768px) {
   .gba-portrait {
     float: right;
-    margin-left: 1em;
+    margin-left: 1rem;
   }
 }
 

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;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;ACpBA;EDcF;AAAA;AAAA;AAAA;AAAA;AAAA;IAQI;;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,OA5CG;EA6CH;EACA;EACA;EACA;EACA;;AC9CA;EDsCF;AAAA;IAUI;IACA;;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACjHA;EDuGF;IAYI;IACA;;;;AAIJ;EACE;EACA;EACA;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;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;ACpBA;EDcF;AAAA;AAAA;AAAA;AAAA;AAAA;IAQI;;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,OA7CG;EA8CH;EACA;EACA;EACA;EACA;;AC/CA;EDuCF;AAAA;IAUI;IACA;IACA;IACA;;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACpHA;ED0GF;IAYI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA","file":"global.css"}

src/css/global.scss

@@ -42,11 +42,12 @@ h1 {
 }
 
 h2 {
-  font-size: 2.5rem;
+  margin-top: 1rem;
+  font-size: 2rem;
 }
 
 h3 {
-  font-size: 2rem;
+  font-size: 1.5rem;
 }
 
 main,
@@ -59,19 +60,21 @@ article {
   background-color: #{colors.$paper};
   box-shadow: 0 8px #{colors.$base-850};
   @include breakpoint("sm") {
-    margin: 0 2em;
+    max-width: 900px;
+    width: 90%;
+    margin: 0 auto;
     box-shadow: 8px 8px #{colors.$base-850};
   }
 
   ol,
   ul {
     all: revert;
-    margin-bottom: 1em;
+    margin: 1rem 0;
   }
 
   p {
     line-height: 1.5;
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
   }
 
   :last-child {
@@ -96,13 +99,13 @@ a:active {
 a.logo,
 a.logo:hover,
 a.logo:active {
-  font-size: 3em;
+  font-size: 3rem;
   color: #{$fg-logo};
   text-decoration: none;
 }
 
 nav.navbar {
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
 
   li {
     display: inline-flex;
@@ -110,7 +113,7 @@ nav.navbar {
 }
 
 footer.footer-main {
-  margin: 2em 1em 1em 1em;
+  margin: 2rem 1rem 1rem 1rem;
   text-align: center;
 }
 
@@ -127,7 +130,7 @@ footer.footer-main {
   max-width: 288px;
   @include breakpoint("md") {
     float: right;
-    margin-left: 1em;
+    margin-left: 1rem;
   }
 }
 

src/index.md

@@ -3,30 +3,25 @@ layout: page.njk
 date: Last Modified
 ---
 
-<img class="gba-portrait" src="img/gba_gil.png" alt="Me, a brown-haired, brown-eyed man with round glasses, smiling. The picture is filtered to mimic the Game Boy Camera and create a retro vibe." />
+<img class="gba-portrait" src="img/gba-gil.png" alt="Me, a brown-haired, brown-eyed man with round glasses, smiling. The picture is filtered to mimic the Game Boy Camera and create a retro vibe." />
 
 # About me
 
+## The basics
+
 <img src="img/sigil-nga.png" class="sigil" alt="Sigil Nga" /> Name: Gil  
 <img src="img/sigil-pa.png" class="sigil" alt="Sigil Pa" /> Pronouns: he, they  
 <img src="img/sigil-ta.png" class="sigil" alt="Sigil Ta" /> Age: 25  
 <img src="img/sigil-la.png" class="sigil" alt="Sigil La" /> Creating: Software & games  
 <img src="img/sigil-sa.png" class="sigil" alt="Sigil Sa" /> Writing: Poems, fiction, essays  
 <img src="img/sigil-da.png" class="sigil" alt="Sigil Da" /> Formerly: Electrical engineering student, student activist  
-<img src="img/sigil-a.png" class="sigil" alt="Sigil A" /> Building: Ogra.ph Collective
+<img src="img/sigil-a.png" class="sigil" alt="Sigil A" /> Building: [Ograph Collective](./ograph)
 
-## Ogra.ph Collective
+## My links
-
-The Ogra.ph Collective aims to build an online community focused on digital liberation, through the use of free, libre, and open-source software. I co-manage the Ogra.ph Collective with [Kersed](https://kersed.net/), and together we operate three projects: a federated microblogging platform, a Git repository service, and a Keyoxide instance; however, we plan to offer other services in the future.
-
-You can find my Ogra.ph Collective profiles here.
 
 - Microblog on [hol.ogra.ph](https://hol.ogra.ph/@gil)
 - Git projects hosted on [ide.ogra.ph](https://ide.ogra.ph/gil)
 - Keyoxide profile on [aut.ogra.ph](https://aut.ogra.ph/aspe:keyoxide.org:7IW4QEA4DIBL3YORQH3HTEGDKM)
-
-## Other links
-
 - View my photos/pictures on [pixelfed.social](https://pixelfed.social/kalanggam)
 - See what I'm reading on [bookwyrm.social](https://bookwyrm.social/user/kalanggam)
 

src/ograph.md

@@ -0,0 +1,13 @@
+---
+title: Ograph Collective
+layout: page.njk
+date: Last Modified
+eleventyNavigation:
+  key: Ograph
+---
+
+The Ograph Collective aims to build an online community focused on digital liberation, through the use of free, libre, and open-source software. I co-manage the Ograph Collective with [Kersed](https://kersed.net/), and together we operate three projects: a federated microblogging platform, a Git repository service, and a Keyoxide instance; however, we plan to offer other services in the future.
+
+- Microblog on [hol.ogra.ph](https://hol.ogra.ph/@gil)
+- Git projects hosted on [ide.ogra.ph](https://ide.ogra.ph/gil)
+- Keyoxide profile on [aut.ogra.ph](https://aut.ogra.ph/aspe:keyoxide.org:7IW4QEA4DIBL3YORQH3HTEGDKM)