tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.

This commit is contained in:
Robert McGovern 2022-02-07 02:14:31 +00:00
parent 82ed1f3d0b
commit d16afd3f03
26 changed files with 548 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.eleventy.js
View File

@ -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
includes: "includes",
layouts: "layouts",
data: "data",
// visible here as a reminder 🤷
includes: "_includes",
// done to shorten the frontmater so layout: base
// rather than layout: layouts/base
layouts: "_includes/layouts",
data: "_data",
},
};
};

7
package.json
View File

@ -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"
}
}
}

13
src/404.njk Normal file
View File

@ -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>

9
src/_data/site.json Normal file
View File

@ -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"
}

121
src/_data/webprojects.json Normal file
View File

@ -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": []
}
]
}
}

21
src/_includes/MD/footer.md Normal file
View File

@ -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 -->

39
src/_includes/components/project.njk Normal file
View File

@ -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 %}

12
src/_includes/global/site-css.njk Normal file
View File

@ -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 %}

9
src/_includes/global/site-favicon.njk Normal file
View File

@ -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"/>

32
src/_includes/global/site-footer.njk Normal file
View File

@ -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>

5
src/_includes/global/site-header.njk Normal file
View File

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

3
src/_includes/global/site-main.njk Normal file
View File

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

4
src/_includes/global/site-meta.njk Normal file
View File

@ -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 }}">

16
src/_includes/layouts/base.njk Normal file
View File

@ -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>

30
src/css/error.css Normal file
View File

@ -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%;
}

19
src/css/footer.css Normal file
View File

@ -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;
}

0
src/data/.forgit → src/css/header.css
View File

21
src/css/style.css
View File

@ -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;

0
src/includes/.forgit
View File

15
src/index.html → src/index.html-old
View File

@ -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="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="mask-icon" href="./safari-pinned-tab.svg" color="#845bd5">
<meta name="msapplication-TileColor" content="#845bd5">
<meta name="theme-color" content="#ffffff">
<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" />
</head>
<body>

8
src/index.md--
View File

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

160
src/index.njk Normal file
View File

@ -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>

23
src/index.old
View File

@ -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>

17
src/layouts/base.njk
View File

@ -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>

46
src/playground.html → src/playground.njk
View File

@ -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>
<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>
<h1>Tricks</h1>
<body>
<h1>Tricks</h1>
<h2>Gradient text with CSS</h2>
<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>
</body>
</html>
<h2>???</h2>

9
src/svgs/purple_fedora.svg
View File

@ -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;"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB