src/_includes/footer.njk

@@ -1,4 +1,4 @@
-<footer class="footer-main">
+<footer class="footer_main">
   Made with <a href="https://www.11ty.dev/">11ty</a>.
   {% if page.date %}<i>Last updated on {{ page.date | postDate }}</i>{% endif %}
 </footer>

src/css/global.css

@@ -56,7 +56,7 @@ h5,
 h6 {
   text-align: center;
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 600px) {
   h1,
   h2,
   h3,
@@ -87,30 +87,19 @@ article {
   border-image: url(../img/nine-patch.png) 32 round;
   -webkit-border-image: url(../img/nine-patch.png) 32 round;
   background-color: rgb(255, 252, 240);
-  box-shadow: 0 8px rgb(52, 51, 49);
+  box-shadow: 0px 0px 20px rgb(16, 15, 15);
 }
 @media screen and (min-width: 600px) {
   main,
   article {
     margin: 0 2em;
-    box-shadow: 8px 8px rgb(52, 51, 49);
   }
 }
-main ol,
+
-main ul,
+main :where(ol, ul),
-article ol,
+article :where(ol, ul) {
-article ul {
   all: revert;
-  margin-bottom: 1em;
+  margin: 0;
-}
-main p,
-article p {
-  line-height: 1.5;
-  margin-bottom: 1em;
-}
-main :last-child,
-article :last-child {
-  margin-bottom: 0;
 }
 
 header.header_main {
@@ -135,32 +124,39 @@ a.logo:active {
   text-decoration: none;
 }
 
-nav.navbar {
+.navbar :where(li) {
-  margin-bottom: 1em;
-}
-nav.navbar li {
   display: inline-flex;
 }
 
-footer.footer-main {
+p {
+  line-height: 1.5;
+  margin-bottom: 1em;
+}
+
+ul,
+ol {
+  margin-bottom: 1em;
+}
+
+footer.footer_main {
   margin: 2em 1em 1em 1em;
   text-align: center;
 }
 
-.gba-portrait {
+main > :last-child,
+header > :last-child {
+  margin-bottom: 0px;
+}
+
+.float-right {
   margin: auto;
   margin-bottom: 1em;
-  transform: rotate(2deg);
-  border: 4px solid #e7e2cc;
-  background: white;
-  box-shadow: 4px 4px 0px rgb(183, 181, 172);
-  padding: 8px;
   width: 100%;
   height: auto;
   max-width: 288px;
 }
 @media screen and (min-width: 768px) {
-  .gba-portrait {
+  .float-right {
     float: right;
     margin-left: 1em;
   }
@@ -170,7 +166,6 @@ footer.footer-main {
   display: inline;
   image-rendering: crisp-edges;
   vertical-align: text-bottom;
-  opacity: 0.2;
 }
 
 /*# 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;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;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,OA5CG;EA6CH;EACA;EACA;EACA;EACA;;AC9CA;EDsCF;AAAA;IAUI;;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA,OFnCY;EEoCZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AC7GA;EDwGF;IAOI;IACA;;;;AAIJ;EACE;EACA;EACA","file":"global.css"}

src/css/global.scss

@@ -32,7 +32,7 @@ h4,
 h5,
 h6 {
   text-align: center;
-  @include breakpoint("md") {
+  @include breakpoint("sm") {
     text-align: left;
   }
 }
@@ -57,26 +57,16 @@ article {
   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: 0 8px #{colors.$base-850};
+  box-shadow: 0px 0px 20px #{colors.$black};
   @include breakpoint("sm") {
     margin: 0 2em;
-    box-shadow: 8px 8px #{colors.$base-850};
   }
+}
 
-  ol,
+main :where(ol, ul),
-  ul {
+article :where(ol, ul) {
-    all: revert;
+  all: revert;
-    margin-bottom: 1em;
+  margin: 0;
-  }
-
-  p {
-    line-height: 1.5;
-    margin-bottom: 1em;
-  }
-
-  :last-child {
-    margin-bottom: 0;
-  }
 }
 
 header.header_main {
@@ -97,31 +87,37 @@ a.logo,
 a.logo:hover,
 a.logo:active {
   font-size: 3em;
-  color: #{$fg-logo};
+  color: $fg-logo;
   text-decoration: none;
 }
 
-nav.navbar {
+.navbar :where(li) {
-  margin-bottom: 1em;
+  display: inline-flex;
-
-  li {
-    display: inline-flex;
-  }
 }
 
-footer.footer-main {
+p {
+  line-height: 1.5;
+  margin-bottom: 1em;
+}
+
+ul,
+ol {
+  margin-bottom: 1em;
+}
+
+footer.footer_main {
   margin: 2em 1em 1em 1em;
   text-align: center;
 }
 
-.gba-portrait {
+main > :last-child,
+header > :last-child {
+  margin-bottom: 0px;
+}
+
+.float-right {
   margin: auto;
   margin-bottom: 1em;
-  transform: rotate(2deg);
-  border: 4px solid #e7e2cc;
-  background: white;
-  box-shadow: 4px 4px 0px #{colors.$base-300};
-  padding: 8px;
   width: 100%;
   height: auto;
   max-width: 288px;
@@ -135,5 +131,4 @@ footer.footer-main {
   display: inline;
   image-rendering: crisp-edges;
   vertical-align: text-bottom;
-  opacity: 0.2;
 }

src/index.md

@@ -3,7 +3,7 @@ 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="float-right" 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