Add markup mixin

2024-06-12 18:35:59 -05:00 · 2024-06-12 18:35:59 -05:00 · aac7b0e0dd
parent fc9a2e125b
commit aac7b0e0dd
7 changed files with 204 additions and 98 deletions
--- a/README.md
+++ b/README.md
--- a/src/css/global.css
+++ b/src/css/global.css
@ -102,6 +102,9 @@ body {
 main,
 article {
  font-size: 1rem;
+  word-wrap: break-word;
+  line-height: 1.5;
+  padding: 0 1em;
 }
 main.page,
 article.page {
@ -111,7 +114,6 @@ article.page {
  background-color: rgb(255, 252, 240);
  color: #802659;
  box-shadow: 0 8px rgb(52, 51, 49);
-  padding: 1em;
 }
@media screen and (min-width: 600px) {
  main,
@ -122,17 +124,52 @@ article.page {
    box-shadow: 8px 8px rgb(52, 51, 49);
  }
 }
-main ol,
+main p,
+main blockquote,
 main ul,
+main ol,
+main dl,
+main table,
+main pre,
+article p,
+article blockquote,
+article ul,
 article ol,
-article ul {
-  all: revert;
+article dl,
+article table,
+article pre {
  margin: 1em 0;
 }
-main p,
-article p {
-  line-height: 1.5;
-  margin-bottom: 1em;
+main ul,
+main ol,
+article ul,
+article ol {
+  all: revert;
+  padding-left: 30px;
+}
+main h1,
+article h1 {
+  font-size: 2.5em;
+}
+main h2,
+article h2 {
+  font-size: 2em;
+}
+main h3,
+article h3 {
+  font-size: 1.5em;
+}
+main h4,
+article h4 {
+  font-size: 1.2em;
+}
+main h5,
+article h5 {
+  font-size: 1em;
+}
+main h6,
+article h6 {
+  font-size: 1em;
 }
 main h1,
 main h2,
@ -146,6 +183,7 @@ article h3,
 article h4,
 article h5,
 article h6 {
+  margin: 0.5em 0 0.25em 0;
  text-align: center;
 }
@media screen and (min-width: 768px) {
@ -164,45 +202,52 @@ article h6 {
    text-align: left;
  }
 }
-main h1,
-article h1 {
-  font-size: 2em;
+main h1 + p,
+main h2 + p,
+main h3 + p,
+article h1 + p,
+article h2 + p,
+article h3 + p {
+  margin-top: 0.5em;
 }
-main h2,
-article h2 {
-  font-size: 1.5em;
+main img,
+article img {
+  max-width: 100%;
 }
-main h3,
-article h3 {
-  font-size: 1em;
+main code,
+main pre,
+article code,
+article pre {
+  background-color: #f8f8f8;
+  border-radius: 3px;
+  border: 1px solid #ddd;
+  font-family: monospace;
+  font-size: 12px;
+  margin: 0 2px;
+  padding: 0 5px;
+  white-space: pre;
 }
-main :last-child,
-article :last-child {
-  margin-bottom: 0;
+main pre code,
+article pre code {
+  border: none;
+  margin: 0;
+  padding: 0;
+  white-space: pre;
+}
+main a,
+article a {
+  color: #9ec611;
+  text-decoration: underline #9ec611 2px;
+}
+main a:hover,
+article a:hover {
+  color: #beec1f;
 }

 header.banner {
  text-align: center;
 }

-a {
-  color: rgb(102, 128, 11);
-  border-radius: 10px;
-}
-
-a:hover,
-a:active {
-  background-color: rgba(135, 154, 57, 0.25);
-}
-
-a.logo,
-a.logo:hover,
-a.logo:active {
-  font-size: 3em;
-  color: rgb(160, 47, 111);
-  text-decoration: none;
-}
-
 nav.navbar {
  margin-bottom: 1em;
 }
@ -232,4 +277,12 @@ footer.footer-main {
  }
 }

+a {
+  color: #9ec611;
+  text-decoration: underline #9ec611 2px;
+}
+a:hover {
+  color: #beec1f;
+}
+
 /*# sourceMappingURL=global.css.map */
--- a/src/css/global.css.map
+++ b/src/css/global.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/global.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACpDF;;AAAA;AAAA;;AAAA;AASA;;AAAA;AAAA;;AAAA;AAYA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA,OA7BC;EA8BD;EACA;;ACpCF;EDyBF;AAAA;IAeI;IACA;IACA;IACA;;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AC/DF;EDyDA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAQI;;;AAIJ;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;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;;ACjIA;EDyHF;IAUI;IACA","file":"global.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/global.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACpDF;;AAAA;AAAA;;AAAA;AASA;;AAAA;AAAA;;AAAA;AAYA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;ECnBD;EACA;EACA;;ADmBC;AAAA;EACE;EACA;EACA;EACA;EACA,OA7BC;EA8BD;;ACjCF;EDuBF;AAAA;IAcI;IACA;IACA;IACA;;;AC9BF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAzDF;EAkDA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IASI;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAEA;AAAA;EACE;;;ADnDN;EACE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACvEA;ED+DF;IAUI;IACA;;;;AAIJ;EACE;EACA;;AAEA;EACE","file":"global.css"}
--- a/src/css/landing.css.map
+++ b/src/css/landing.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACnDF;;AAAA;AAAA;;AAAA;AAWA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA,KAjBO;EAkBP;;ACfA;EDUF;IAQI;IACA;IACA;;;;AAIJ;EACE;EACA,KA7BO;EA8BP;EACA;EACA;;AC7BA;EDwBF;IAQI,WAlCQ;;;AAqCV;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AC3CJ;EDmCA;IAYI;IACA,YAjDO;IAkDP;IACA;IACA;;;AAGF;EACE;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AC1FA;EDuFF;IAMI,QA9FS;IA+FT;IACA;;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AC1HF;EDyGF;IAqBI","file":"landing.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACnDF;;AAAA;AAAA;;AAAA;AAWA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA,KAjBO;EAkBP;;ACbA;EDQF;IAQI;IACA;IACA;;;;AAIJ;EACE;EACA,KA7BO;EA8BP;EACA;EACA;;AC3BA;EDsBF;IAQI,WAlCQ;;;AAqCV;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;ACzCJ;EDiCA;IAYI;IACA,YAjDO;IAkDP;IACA;IACA;;;AAGF;EACE;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;ACxFA;EDqFF;IAMI,QA9FS;IA+FT;IACA;;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;ACxHF;EDuGF;IAqBI","file":"landing.css"}
--- a/src/main.md
+++ b/src/main.md
@ -5,9 +5,14 @@ eleventyNavigation:
 ---

 <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." />
+Test

 # Home

+Another test
+
 ## Support me

+Let's give this one more go.
+
 <a href="https://www.buymeacoffee.com/gilcaley" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-violet.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important; display: inline;"></a>
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@ -1,3 +1,5 @@
+@use "colors";
+
 $breakpoints: (
  "sm": 600px,
  "md": 768px,
@ -17,6 +19,99 @@ $breakpoints: (
  }
 }

-@mixin markdown {
+@mixin markup {
+	word-wrap: break-word;
+	line-height: 1.5;
+	padding: 0 1em;

+  p,
+  blockquote,
+  ul,
+  ol,
+  dl,
+  table,
+  pre {
+    margin: 1em 0;
+  }
+
+  ul,
+  ol {
+    all: revert;
+    padding-left: 30px;
+  }
+
+  h1 {
+    font-size: 2.5em;
+  }
+
+  h2 {
+    font-size: 2em;
+  }
+
+  h3 {
+    font-size: 1.5em;
+  }
+
+  h4 {
+    font-size: 1.2em;
+  }
+
+  h5 {
+    font-size: 1em;
+  }
+
+  h6 {
+    font-size: 1em;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0.5em 0 0.25em 0;
+    text-align: center;
+    @include breakpoint("md") {
+      text-align: left;
+    }
+  }
+
+  h1 + p,
+  h2 + p,
+  h3 + p {
+    margin-top: 0.5em;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  code,
+  pre {
+    background-color: #f8f8f8;
+    border-radius: 3px;
+    border: 1px solid #ddd;
+    font-family: monospace;
+    font-size: 12px;
+    margin: 0 2px;
+    padding: 0 5px;
+    white-space: pre;
+  }
+
+  pre code {
+    border: none;
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+  }
+
+  a {
+    color: #{colors.$link};
+    text-decoration: underline #{colors.$link} 2px;
+
+    &:hover {
+      color: #{colors.$link-hover};
+    }
+  }
 }
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@ -48,7 +48,6 @@ article {
    background-color: #{colors.$paper};
    color: $fg;
    box-shadow: 0 8px #{colors.$base-850};
-    padding: 1em;
  }

  @include breakpoint("sm") {
@ -58,68 +57,13 @@ article {
    box-shadow: 8px 8px #{colors.$base-850};
  }

-  ol,
-  ul {
-    all: revert;
-    margin: 1em 0;
-  }
-
-  p {
-    line-height: 1.5;
-    margin-bottom: 1em;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    text-align: center;
-    @include breakpoint("md") {
-      text-align: left;
-    }
-  }
-
-  h1 {
-    font-size: 2em;
-  }
-
-  h2 {
-    font-size: 1.5em;
-  }
-
-  h3 {
-    font-size: 1em;
-  }
-
-  :last-child {
-    margin-bottom: 0;
-  }
+  @include markup;
 }

 header.banner {
  text-align: center;
 }

-a {
-  color: #{$link};
-  border-radius: 10px;
-}
-
-a:hover,
-a:active {
-  background-color: #{$bg-hover};
-}
-
-a.logo,
-a.logo:hover,
-a.logo:active {
-  font-size: 3em;
-  color: #{$fg-logo};
-  text-decoration: none;
-}
-
 nav.navbar {
  margin-bottom: 1em;

@ -147,3 +91,12 @@ footer.footer-main {
    margin: 1em;
  }
 }
+
+a {
+  color: #{colors.$link};
+  text-decoration: underline #{colors.$link} 2px;
+
+  &:hover {
+    color: #{colors.$link-hover};
+  }
+}