From aac7b0e0dde8c07b3bf04c0bb7150c98e97f41d0 Mon Sep 17 00:00:00 2001 From: gil Date: Wed, 12 Jun 2024 18:35:59 -0500 Subject: [PATCH] Add markup mixin --- README => README.md | 0 src/css/global.css | 129 ++++++++++++++++++++++++++++------------ src/css/global.css.map | 2 +- src/css/landing.css.map | 2 +- src/main.md | 5 ++ src/scss/_mixins.scss | 97 +++++++++++++++++++++++++++++- src/scss/global.scss | 67 ++++----------------- 7 files changed, 204 insertions(+), 98 deletions(-) rename README => README.md (100%) diff --git a/README b/README.md similarity index 100% rename from README rename to README.md diff --git a/src/css/global.css b/src/css/global.css index e1a45ef..9745749 100644 --- 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 */ diff --git a/src/css/global.css.map b/src/css/global.css.map index 49bddeb..221ef5f 100644 --- 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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/src/css/landing.css.map b/src/css/landing.css.map index 4551789..0203d0d 100644 --- 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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/src/main.md b/src/main.md index 1ba1676..9c01f26 100644 --- a/src/main.md +++ b/src/main.md @@ -5,9 +5,14 @@ eleventyNavigation: --- 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. + Buy Me A Coffee diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index f8c1761..c94c717 100644 --- 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}; + } + } } diff --git a/src/scss/global.scss b/src/scss/global.scss index 1189c91..5cb3a10 100644 --- 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}; + } +} \ No newline at end of file