finally a handle on how I want to work with the data. Frontend Mentor projects are now pulled from a json data file. Need to add the FreeCodeCamp projects to it next. Probably better to rearrange a bit and have seperate md files for each project/challenge that pulls in whatever readme there is for each project. Will see. Considering tracking date too. Issue with how project cards look in Safari compared to Firefox or Chrome.

.eleventy.js

@@ -1,3 +1,5 @@
+const { EleventyRenderPlugin } = require("@11ty/eleventy");
+
 module.exports = function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy("./src/css");
     eleventyConfig.addPassthroughCopy("./src/fonts");
@@ -19,21 +21,27 @@ module.exports = function (eleventyConfig) {
     //    "./src/assets/images": "img",
     //});
 
+    // PLUGINS
+    eleventyConfig.addPlugin(EleventyRenderPlugin);
+
     // WATCH Targets
     eleventyConfig.addWatchTarget("./src/css/");
     eleventyConfig.addWatchTarget("./src/js/");
 
     // Return your Object options:
     return {
+        // markdownTemplateEngine: "njk",
         dir: {
             input: "src",
             output: "www",
-            // ⚠️ These values are both relative to the input directory.
+            // ⚠️ These values are relative to the input directory.
             // 📝 _includes is a default value, as is _data but I like them
-            //      visible here as a reminder
+            //      visible here as a reminder 🤷
-            includes: "includes",
+            includes: "_includes",
-            layouts: "layouts",
+            // done to shorten the frontmater so layout: base
-            data: "data",
+            // rather than layout: layouts/base
+            layouts: "_includes/layouts",
+            data: "_data",
         },
     };
 };

package.json

@@ -1,12 +1,12 @@
 {
   "name": "rmcg.dev",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Projects completed while working through various HTML/CSS/JavaScript things. Primarily focused on Frontend Mentor. Ultimately it will aim to be a portfolio site.",
   "main": "index.js",
   "scripts": {
     "start": "npx @11ty/eleventy --serve",
     "build": "npx @11ty/eleventy",
-    "build-inc": "npx @11ty/eleventy --incremental",
+    "serve-inc": "npx @11ty/eleventy --serve --incremental",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -19,5 +19,4 @@
   "devDependencies": {
     "@11ty/eleventy": "^1.0.0"
   }
-  
 }

src/404.njk

@@ -0,0 +1,13 @@
+---
+title: Oops! Page Not Found
+layout: base
+permalink: /404.html
+css: ["/css/error.css"]
+---
+
+<div class="error404">
+    <img class="logo" src="./svgs/purple_fedora.svg" alt="Image of a Purple Fedora" aria-hidden="true">
+    <p>
+        Apologies, nothing to see here. Maybe try the <a href="/">main page</a>
+    </p>
+</div>

src/_data/site.json

@@ -0,0 +1,9 @@
+{
+    "name": "Robert McGovern's Practice Projects",
+    "url": "https://rmcg.dev",
+    "authorName": "Robert McGovern",
+    "authorUrl": "https://tarasis.net",
+    "authorEmail": "work@tarasis.net",
+    "description": "Projects from Frontend Mentor, FreeCodeCamp and more. Playground for learning.",
+    "favicon": "./svgs/purple_fedora.svg"
+}

src/_data/webprojects.json

@@ -0,0 +1,121 @@
+{
+    "frontendMentor": {
+        "serviceName": "Frontend Mentor",
+        "svgSource": "/svgs/frontendmentor.svg",
+        "svgAltText": "Frontend Mentor Logo",
+        "description": "Collection of challenges I completed for Frontend Mentor",
+        "difficulty": [
+            {
+                "title": "Newbie",
+                "challenges": [
+                    {
+                        "title": "Order Summary Card Component",
+                        "url": "/FrontendMentor/newbie/order-summary-component/",
+                        "description": "Test",
+                        "techUsed": [
+                            "html5",
+                            "css3"
+                        ],
+                        "screenshotURL": "/screenshots/fem-newbie-order-summary-component.png",
+                        "screenshotAltText": "Order Summary Component Challenge from FrontendMentor"
+                    },
+                    {
+                        "title": "Profile Card Component",
+                        "url": "/FrontendMentor/newbie/profile-card-component/",
+                        "description": "",
+                        "techUsed": [
+                            "html5",
+                            "css3"
+                        ],
+                        "screenshotURL": "/screenshots/fem-newbie-profile-card-component.jpeg",
+                        "screenshotAltText": "Profile Card Component Challenge from FrontendMentor"
+                    },
+                    {
+                        "title": "Stats Preview Card Component",
+                        "url": "/FrontendMentor/newbie/stats-preview-card-component/",
+                        "description": "",
+                        "techUsed": [
+                            "html5",
+                            "css3"
+                        ],
+                        "screenshotURL": "/screenshots/fem-newbie-stats-preview-card-component.jpeg",
+                        "screenshotAltText": "Stats Preview Card Component Challenge from FrontendMentor"
+                    },
+                    {
+                        "title": "Article Preview Component",
+                        "url": "/FrontendMentor/newbie/article-preview-component/",
+                        "description": "",
+                        "techUsed": [
+                            "html5",
+                            "css3"
+                        ],
+                        "screenshotURL": "/screenshots/fem-newbie-article-preview-component.jpeg",
+                        "screenshotAltText": "Article Preview Component Challenge from FrontendMentor"
+                    },
+                    {
+                        "title": "Four Card Feature Section",
+                        "url": "/FrontendMentor/newbie/four-card-feature-section/",
+                        "description": "",
+                        "techUsed": [
+                            "html5",
+                            "css3"
+                        ],
+                        "screenshotURL": "/screenshots/fem-newbie-four-card-feature-section.jpeg",
+                        "screenshotAltText": "Four Card Feature Section Challenge from FrontendMentor"
+                    },
+                    {
+                        "title": "Single Price Grid Component",
+                        "url": "/FrontendMentor/newbie/single-price-grid-component-master/",
+                        "description": "",
+                        "techUsed": [
+                            "html5",
+                            "css3"
+                        ],
+                        "screenshotURL": "/screenshots/fem-newbie-single-price-grid-component.jpeg",
+                        "screenshotAltText": "Single Price Grid Component Challenge from FrontendMentor"
+                    },
+                    {
+                        "title": "Ping Coming-Soon",
+                        "url": "/FrontendMentor/newbie/ping-coming-soon-page-master/",
+                        "description": "",
+                        "techUsed": [
+                            "html5",
+                            "css3",
+                            "js"
+                        ],
+                        "screenshotURL": "/screenshots/fem-newbie-ping-coming-soon-page.jpeg",
+                        "screenshotAltText": "Ping Coming-Soon Challenge from FrontendMentor"
+                    },
+                    {
+                        "title": "The Huddle Landing Page",
+                        "url": "/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/",
+                        "description": "",
+                        "techUsed": [
+                            "html5",
+                            "css3",
+                            "js"
+                        ],
+                        "screenshotURL": "/screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png",
+                        "screenshotAltText": "The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section."
+                    }
+                ]
+            },
+            {
+                "title": "Junior",
+                "challenges": []
+            },
+            {
+                "title": "Intermediate",
+                "challenges": []
+            },
+            {
+                "title": "Advanced",
+                "challenges": []
+            },
+            {
+                "title": "Guru",
+                "challenges": []
+            }
+        ]
+    }
+}

src/_includes/MD/footer.md

@@ -0,0 +1,21 @@
+<!-- NOT USED -->
+<!-- Can't use variables due to the way I'm access it. Bug? -->
+
+{% set projectPrefix = project %}
+
+{% if projectContent %}
+{% set projectPrefix = projectContent %}
+{% endif %}
+
+{{projectPrefix.name}}
+
+    {% renderTemplate "md",
+    "nkj" %}
+
+All projects are the work of Robert McGovern, 2020-2022. Site V3  
+[Email](emailto:{{projectPrefix.name}}), [Website/Blog]({{projectPrefix.name}})
+
+[Background SVG provided by Steve Schoger @ Hero Patterns](http://www.heropatterns.com/)
+{% endrenderTemplate %}
+
+<!-- NOT USED -->

src/_includes/components/project.njk

@@ -0,0 +1,39 @@
+{# {% set projectPrefix = project %} #}
+
+{% if projectContent %}
+    <div class="project-card stacked">
+        <a href="{{projectContent.url}}">
+            <img class="card__img" src="{{projectContent.screenshotURL}}"
+                        alt="{{projectContent.AltText}}"/>
+        </a>
+        <div class="card__content">
+            <h3 class="card__title">
+                {{projectContent.title}}
+            </h3>
+            {% if projectContent.description | length %}
+                <p class="card__description">
+                    {{projectContent.description}}
+                </p>
+            {% endif %}
+            <ul class="card__techUsed">
+                {% for tech in projectContent.techUsed %}
+                    {% if tech === "html5" %}
+                        <li>
+                            <img src="/svgs/html5.svg" alt="HTML5"/>
+                        </li>
+                    {% endif %}
+                    {% if tech === "css3" %}
+                        <li>
+                            <img src="/svgs/css3.svg" alt="CSS3"/>
+                        </li>
+                    {% endif %}
+                    {% if tech === "js" %}
+                        <li>
+                            <img src="/svgs/javascript.svg" alt="JavaScript"/>
+                        </li>
+                    {% endif %}
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
+{% endif %}

src/_includes/global/site-css.njk

@@ -0,0 +1,12 @@
+{% if cssReset %}
+    <link rel="stylesheet" href="/FrontendMentor/reset.css"/>
+{% endif %}
+
+<link rel="stylesheet" href="/css/header.css"/>
+<link rel="stylesheet" href="/css/footer.css"/>
+
+{% if css %}
+    {% for link in css %}
+        <link rel="stylesheet" href="{{link}}"/>
+    {% endfor %}
+{% endif %}

src/_includes/global/site-favicon.njk

@@ -0,0 +1,9 @@
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
+<link
+        rel="manifest" href="/site.webmanifest"/>
+<!-- <link rel="icon" href="/safari-pinned-tab.svg" color="#845bd5" type="image/svg+xml" /> -->
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#845bd5"/>
+<meta name="msapplication-TileColor" content="#845bd5"/>
+<meta name="theme-color" content="#ffffff"/>

src/_includes/global/site-footer.njk

@@ -0,0 +1,32 @@
+<footer>
+    <!-- some blurb here -->
+    {# Want the below but it doesnt work #}
+    {# {% set currentUrl = page.url %}
+    {% set testURL = test.url %}
+    {% renderFile "./src/_includes/MD/footer.md",
+    test %}
+
+    <h3>Alt Idea</h3>
+    {% renderTemplate "md",
+    test %}
+All projects are the work of Robert McGovern,
+2020 - 2022. Site V4  
+[Email](emailto: {{ test.url }}),
+[Website / Blog]({{ testURL }})
+
+[Background SVG provided by Steve Schoger @ Hero Patterns](http : //www.heropatterns.com/)
+        {% endrenderTemplate %} #}
+
+    <p>
+        All projects are the work of Robert McGovern, 2020-2022.
+    </p>
+    <div>
+        <img style="display: inline; width: 2rem;" src="/svgs/purple_fedora.svg" alt="A Purple Fedora" aria-hidden="true">
+        <a href="emailto:{{site.authorEmail}}">Email</a>
+        <a href="{{site.authorUrl}}">Website/Blog</a>
+        <img style="display: inline; width: 2rem;" src="/svgs/purple_fedora.svg" alt="A Purple Fedora" aria-hidden="true">
+    </div>
+    <p>
+        <a href="http://www.heropatterns.com/">Background SVG provided by Steve Schoger @ Hero Patterns</a>
+    </p>
+</footer>

src/_includes/global/site-header.njk

@@ -0,0 +1,5 @@
+<header>
+    <div class="header">
+        <h1>{{ title }}</h1>
+    </div>
+</header>

src/_includes/global/site-main.njk

@@ -0,0 +1,3 @@
+<main>
+    {{ content | safe }}
+</main>

src/_includes/global/site-meta.njk

@@ -0,0 +1,4 @@
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<meta name="author" content="{{ site.authorName }}">
+<meta name="description" content="{{ site.description }}">

src/_includes/layouts/base.njk

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>
+            {{ title }} - {{ site.url }}
+        </title>
+        {% include "global/site-meta.njk" %}
+        {% include "global/site-css.njk" %}
+        {% include "global/site-favicon.njk" %}
+    </head>
+    <body>
+        {% include "global/site-header.njk" %}
+        {% include "global/site-main.njk" %}
+        {% include "global/site-footer.njk" %}
+    </body>
+</html>

src/css/error.css

@@ -0,0 +1,30 @@
+*,
+::before,
+::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    min-height: 100vh;
+    width: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+main {
+    margin: auto 0;
+}
+
+.error404 p {
+    font-size: 2rem;
+}
+
+.error404 img {
+    width: 25%;
+}

src/css/footer.css

@@ -0,0 +1,19 @@
+footer {
+    margin-top: 2rem;
+    text-align: center;
+    font-size: 0.9rem;
+    margin-left: auto;
+    margin-right: auto;
+    width: 85%;
+}
+
+footer > * {
+    margin-top: 0.5rem;
+}
+
+footer div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}

src/css/style.css

@@ -84,11 +84,11 @@ body {
 
 /* .frontEndMentorChallenges {} */
 
-.frontEndMentorChallenges .newbieChallenges {
+.frontEndMentorChallenges {
     margin-left: 1rem;
 }
 
-.newbieChallenges > h3,
+.frontEndMentorChallenges > h3,
 .responsiveProjects > h3 {
     font-weight: 600;
     font-size: 1.3rem;
@@ -98,23 +98,6 @@ body {
 /* .completeWebDev2020Projects {} */
 /* .vanillaJSProjects {} */
 
-footer {
-    margin-top: 3rem;
-    text-align: center;
-    font-size: 0.9rem;
-    margin-left: auto;
-    margin-right: auto;
-    width: 85%;
-}
-
-footer * {
-    margin-top: 1rem;
-}
-
-footer > a {
-    display: block;
-}
-
 .alignedHeader {
     display: flex;
     flex-wrap: wrap;

src/index.html-old

@@ -8,13 +8,14 @@
     <link rel="stylesheet" href="./FrontendMentor/reset.css" />
     <link rel="stylesheet" href="./css/style.css" />
 
-    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png" />
-    <link rel="manifest" href="./site.webmanifest">
+    <link rel="manifest" href="./site.webmanifest" />
-    <link rel="mask-icon" href="./safari-pinned-tab.svg" color="#845bd5">
+    <!-- <link rel="icon" href="./safari-pinned-tab.svg" color="#845bd5" type="image/svg+xml" /> -->
-    <meta name="msapplication-TileColor" content="#845bd5">
+    <link rel="mask-icon" href="./safari-pinned-tab.svg" color="#845bd5" />
-    <meta name="theme-color" content="#ffffff">
+    <meta name="msapplication-TileColor" content="#845bd5" />
+    <meta name="theme-color" content="#ffffff" />
 </head>
 
 <body>

src/index.md--

@@ -1,8 +0,0 @@
----
-title: Hello World
-layout: "base.njk"
----
-
-## In the House!
-
-Hello Jamstack fam!

src/index.njk

@@ -0,0 +1,160 @@
+---
+title: Practice Projects
+layout: base.njk
+css: ["/css/style.css"]
+cssReset: true
+---
+
+<div class="blurb">
+    <p>
+        These are completed projects done to practice using HTML,
+        CSS & Javascript. They come from different sources, and
+        most are freely available for anyone to practice with.
+        Where not, I'll indicate if it is from a premium source.
+    </p>
+    &nbsp;
+    <p>
+        I've put them all into a single GIT repository rather than
+        litter my git service with many different projects. This may
+        change in future depending on how many of these that I do.
+    </p>
+    &nbsp;
+    <p>Robert McGovern</p>
+</div>
+
+<div class="projectsDiv">
+    <div class="alignedHeader">
+        <h2 class="projectsSection__title">{{webprojects.frontendMentor.serviceName}}</h2>
+        <img src="{{webprojects.frontendMentor.svgSource}}" alt="{{webprojects.frontendMentor.svgAltText}}"/>
+    </div>
+    <p>{{webprojects.frontendMentor.description}}</p>
+
+    {% for difficultyLevel in webprojects.frontendMentor.difficulty %}
+        {% if difficultyLevel.challenges | length %}
+            <div class="frontEndMentorChallenges">
+                <h3>{{difficultyLevel.title}} Challenges</h3>
+
+                <div class="projects-grid">
+
+                    {% for challenge in difficultyLevel.challenges %}
+
+                        {% set projectContent = challenge %}
+                        {% include "components/project.njk" %}
+                    {% endfor %}
+                </div>
+            </div>
+
+        {% endif %}
+    {% endfor %}
+</div>
+
+<div class="projectsDiv">
+    <div class="alignedHeader">
+        <h2 class="projectsSection__title">Freecodecamp</h2>
+        <img src="/svgs/freecodecamp.svg" alt="Freecodecamp"/>
+    </div>
+    <div class="responsiveProjects">
+        <h3>Responsive Web Design Projects</h3>
+        <p>
+            Note: As of 11 Oct 2020, these require a partial rework
+            to look good on mobile. 1-3 where written much earlier
+            in my learning, so while they fufill all the
+            requirements, they don't look great on mobile.
+        </p>
+        <div class="projects-grid">
+            <div class="project-card stacked">
+                <a href="./freeCodeCamp/responsive-web-design-projects/Project1-TributePage/">
+                    <img class="card__img" src="/screenshots/fcc-web-Project1-TributePage.jpeg"
+                        alt="Project 1 - Tribute Page"/>
+                </a>
+                <div class="card__content">
+                    <h3 class="card__title">
+                        Project 1 - Tribute Page
+                    </h3>
+                    <!-- <p class="card__description">
+                        Lorem ipsum dolor sit amet consectetur
+                        adipisicing elit.
+                    </p> -->
+                    <ul class="card__techUsed">
+                        <li>
+                            <img src="/svgs/html5.svg" alt="HTML5"/>
+                        </li>
+                        <li>
+                            <img src="/svgs/css3.svg" alt="CSS3"/>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="project-card stacked">
+                <a href="/freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/">
+                    <img class="card__img" src="/screenshots/fcc-web-Project2-BuildaSurveyForm.jpeg"
+                        alt="Project 2 - Build A Survey Form"/>
+                </a>
+                <div class="card__content">
+                    <h3 class="card__title">
+                        Project 2 - Build A Survey Form
+                    </h3>
+                    <!-- <p class="card__description">
+                        Lorem ipsum dolor sit amet consectetur
+                        adipisicing elit.
+                    </p> -->
+                    <ul class="card__techUsed">
+                        <li>
+                            <img src="/svgs/html5.svg" alt="HTML5"/>
+                        </li>
+                        <li>
+                            <img src="/svgs/css3.svg" alt="CSS3"/>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="project-card stacked">
+                <a href="/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/">
+                    <img class="card__img" src="/screenshots/fcc-web-Project3-ProductLandingPage.jpeg"
+                        alt="Project 3 - Product Landing Page"/>
+                </a>
+                <div class="card__content">
+                    <h3 class="card__title">
+                        Project 3 - Product Landing Page
+                    </h3>
+                    <!-- <p class="card__description">
+                        Lorem ipsum dolor sit amet consectetur
+                        adipisicing elit.
+                    </p> -->
+                    <ul class="card__techUsed">
+                        <li>
+                            <img src="/svgs/html5.svg" alt="HTML5"/>
+                        </li>
+                        <li>
+                            <img src="/svgs/css3.svg" alt="CSS3"/>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="projectsDiv">
+
+    <div class="alignedHeader">
+        <h2 class="projectsSection__title">
+            The Complete 2022 Web Development Bootcamp
+        </h2>
+        <img src="/svgs/udemy.svg" alt="The Complete 2022 Web Development Bootcamp Udemy Course"/>
+    </div>
+    <p>coming soon</p>
+</div>
+
+<div class="projectsDiv">
+    <h2 class="projectsSection__title">Vanilla JS Projects</h2>
+    <p>coming soon</p>
+</div>
+
+<div class="projectsDiv">
+    <h2 class="projectsSection__title">Playground</h2>
+    <p>
+        Intended for just little snippets of code that look useful
+    </p>
+    <a href="/playground">The Playground</a>
+</div>

src/index.old

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./css/style.css">
-    <script src="./js/script.js" defer></script>
-    <title>rmcg.dev</title>
-</head>
-
-<body>
-    <header>
-        <div>
-            <img class="logo" src="./svgs/purple_fedora.svg" alt="Image of a Purple Fedora">
-            <h2>Coming Soon™</h2>
-            <p>Projects from Frontend Mentor and more. Playground for learning.</p>
-        </div>
-    </header>
-</body>
-
-</html>

src/layouts/base.njk

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-        <title>Going Beyond Static Sites With Eleventy</title>
-        <link rel="stylesheet" href="style.css">
-    </head>
-    <body>
-        <header>
-            <h1>Going Beyond Static Sites With Eleventy</h1>
-        </header>
-        <main>
-            {{ content | safe }}
-        </main>
-    </body>
-</html>

src/playground.njk

@@ -1,19 +1,16 @@
-<!DOCTYPE html>
+---
-<html lang="en">
+layout: base.njk
+title: Playground
+css: ["/css/playground.css"]
+---
+{# css: ["/css/reset.css", "/css/playground.css"]
+ #}
+{# <link rel="stylesheet" href="./css/reset.css"> #}
+{# <link rel="stylesheet" href="./css/playground.css"> #}
 
-<head>
+<h1>Tricks</h1>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Playground</title>
-    <link rel="stylesheet" href="./css/reset.css">
-    <link rel="stylesheet" href="./css/playground.css">
-</head>
 
-<body>
+<h2>Gradient text with CSS</h2>
-    <h1>Tricks</h1>
-
-    <h2>Gradient text with CSS</h2>
     This one comes from Kevin Powell, on a YouTube video short <a
         href="https://www.youtube.com/watch?v=IQT4aI_Iup4">"Gradient text with CSS | CSS Tip of the Day"</a>. It applies
     a colored gradient to text.
@@ -22,14 +19,14 @@
 
     <h1 class="gradient-text">Thingy Text thats with a gradient</h1>
 
-    <h2>Tip for screen sized approriate images</h2>
+<h2>Tip for screen sized approriate images</h2>
 
-    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-480.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-960.jpg  2x, 
+<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-480.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-960.jpg  2x, 
 	   	  	   https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1440.jpg 3x, 
 		 				 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1920.jpg 4x" alt="shiny black dog looking pensive"
         width="480" height="360">
 
-    <pre>
+<pre>
 &ltimg src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-480.jpg" 
 srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-960.jpg  2x, 
             https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1440.jpg 3x, 
@@ -41,21 +38,21 @@ width="480" height="360"&gt
     Better though is
 
     <picture>
-        <source media="(min-width:600px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-320.jpg  320w,
+    <source media="(min-width:600px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-320.jpg  320w,
                         https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg  480w, 
                         https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-720.jpg  720w,
                         https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-960.jpg  960w, 
                         https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1440.jpg 1440w, 
                         https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1920.jpg 1920w">
-        <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-320.jpg 320w,
+    <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-320.jpg 320w,
                         https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-480.jpg 480w, 
                         https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-720.jpg 720w,
                         https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-960.jpg 960w">
-        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg" alt="smiling black dog"
+    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg" alt="smiling black dog"
             height="360px" width="480px">
-    </picture>
+</picture>
 
-    <pre>
+<pre>
 &ltpicture&gt
     &ltsource media="(min-width:600px)"
             srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-320.jpg  320w,
@@ -74,7 +71,4 @@ width="480" height="360"&gt
 &lt/picture&gt
     </pre>
 
-    <h2>???</h2>
+<h2>???</h2>
-</body>
-
-</html>

src/svgs/purple_fedora.svg

@@ -1,6 +1,15 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="100%" height="100%" viewBox="0 0 399 309" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <!-- <style>
+svg {
+      background: white;
+      border-radius: 50%;
+    }    @media (prefers-color-scheme: dark) {
+      :root {
+        filter: brightness(2);      }
+    }
+  </style> -->
     <g id="Layer-1" serif:id="Layer 1" transform="matrix(1,0,0,1,-98.0058,-219.292)">
         <path id="path4154" d="M205.309,351.538C207.054,343.768 208.799,290.237 224.509,291.1C280.358,292.825 337.141,231.711 379.026,360.363C401.741,365.091 418.65,378.439 427.458,387.959C469.652,433.557 371.163,471.89 286.577,468.322C185.543,464.06 99.279,391.254 205.31,351.538L205.309,351.538Z" style="fill:rgb(78,36,124);fill-opacity:0.99;"/>
         <path id="path4248" d="M204.69,351.776C158.987,369.077 149.462,392.575 161.593,413.957C169.032,396.938 187.063,382.481 213.201,373.367C207.749,366.926 204.679,359.689 204.679,352.032C204.679,351.946 204.689,351.862 204.691,351.776L204.69,351.776ZM378.035,357.407C376.852,363.727 373.229,369.646 367.781,374.959C402.215,384.899 428.932,400.432 435.595,419.178C439.607,409.516 437.63,398.951 427.459,387.96C418.651,378.44 401.741,365.091 379.027,360.363C378.698,359.354 378.366,358.39 378.035,357.407Z" style="fill:rgb(64,38,93);fill-opacity:0.99;"/>