Merge branch 'main' into frontendmentor

.eleventy.js

@@ -13,6 +13,12 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy({
         "./projects/FrontendMentor": "FrontendMentor",
     });
+    eleventyConfig.addPassthroughCopy({
+        "./projects/random": "others",
+    });
+    eleventyConfig.addPassthroughCopy({
+        "./projects/devchallenges": "devchallenges",
+    });
     eleventyConfig.addPassthroughCopy({
         "./src/assets/faviconstuff": "/",
     });

package.json

@@ -20,6 +20,9 @@
     "@11ty/eleventy": "^1.0.0"
   },
   "dependencies": {
+    "@11ty/eleventy-img": "^2.0.1",
+    "@fontsource/black-ops-one": "^4.5.7",
+    "@fontsource/source-sans-pro": "^4.5.10",
     "open-props": "^1.3.9"
   }
 }

projects/FrontendMentor/newbie/four-card-feature-section/css/style.css

@@ -1,8 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
 
-/* 
+/*
  * Challenge colors, font
- * 
+ *
  * The font-size for 20px is to make rem clearer for increments
  *
  * Mobile: 375px (375x1360)
@@ -10,7 +10,7 @@
 */
 
 :root {
-    font-family: 'Poppins', sans-serif;
+    font-family: "Poppins", sans-serif;
     font-size: 20px;
 
     /* Primary Colors */
@@ -77,7 +77,6 @@ body {
     font-size: 16px;
 }
 
-
 .middleSection {
     margin-top: 2.5rem;
 }
@@ -105,7 +104,6 @@ body {
     margin-top: 1.8rem;
     margin-left: auto;
     width: 22%;
-
 }
 
 .column1 {
@@ -137,7 +135,6 @@ body {
 } */
 
 @media screen and (min-width: 1000px) {
-
     .flexContainer {
         max-width: 1440px;
     }
@@ -152,7 +149,7 @@ body {
         margin-right: auto;
         font-size: 15px;
     }
-    
+
     .flexContainer {
         width: 78%;
     }
@@ -172,12 +169,12 @@ body {
     .card-image {
         margin-top: 2rem;
     }
-    
+
     .column {
         display: flex;
         flex-direction: column;
         margin: auto;
-        max-width: calc((100% /3) - 1.5rem);
+        max-width: calc((100% / 3) - 1.5rem);
     }
 
     .karma {

projects/random/intersectional-observation/style.css

@@ -38,7 +38,7 @@ nav.active {
 .nav-link[aria-current="page"] {
     text-decoration: underline wavy #f8c348 0.15rem;
     text-underline-offset: 0.5rem;
-  }
+}
 
 .nav-container {
     display: flex;

src/404.njk

@@ -6,7 +6,7 @@ css: ["/css/error.css"]
 ---
 
 <div class="error404">
-    <img class="logo" src="./svgs/purple_fedora.svg" alt="Image of a Purple Fedora" aria-hidden="true">
+    <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>

src/css/style.css

@@ -1,13 +1,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
 
-/* 
+/* @import "@fontsource/black-ops-one/index.css";
+@import "@fontsource/source-sans-pro";
+ */
+/*
 * Hi, thank you for checking out my CSS. Layout is currently Rev 2.
 * Plan is to do more interesting ones as I feel more comfortable doing things.
 *
 * For instance was thinking of swapping to a 3 column affair, with the title running
 * vertically in the first column. Second column is the projects, third the blurb
 *
-* I'd like to add some animations and transitions, and a light and dark theme.
 */
 
 :root {
@@ -126,8 +128,8 @@ body {
 .card__content {
     z-index: 10;
     background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(100px);
     -webkit-backdrop-filter: blur(100px);
+    backdrop-filter: blur(100px);
     align-self: end;
     margin: 0.5rem; /*.5rem 2rem;*/
     padding: 0.5rem;