finished the 404 challenge

projects/devchallenges/404-not-found/README.md

@@ -8,11 +8,11 @@
 
 <div align="center">
   <h3>
-    <a href="https://{your-demo-link.your-domain}">
+    <a href="https://tarasis.github.io/devchallenges/404-not-found/">
       Demo
     </a>
     <span> | </span>
-    <a href="https://{your-url-to-the-solution}">
+    <a href="https://github.com/tarasis/tarasis.github.io/tree/main/projects/devchallenges/404-not-found/">
       Solution
     </a>
     <span> | </span>
@@ -29,7 +29,6 @@
 - [Table of Contents](#table-of-contents)
 - [Overview](#overview)
   - [Built With](#built-with)
-- [Features](#features)
 - [Acknowledgements](#acknowledgements)
 - [Contact](#contact)
 
@@ -37,40 +36,28 @@
 
 ## Overview
 
-![screenshot](https://user-images.githubusercontent.com/16707738/92399059-5716eb00-f132-11ea-8b14-bcacdc8ec97b.png)
+![screenshot](./screenshot.png)
 
-Introduce your projects by taking a screenshot or a gif. Try to tell visitors a story about your project by answering:
+Fairly responsive build of this error page. Most font sizes and line heights have been scaled using the [responsive font calculator](https://websemantics.uk/tools/responsive-font-calculator/).
+
+At 800px `min-width` a number of CSS properties are updating for the larger screen layout.
+
+Took a different approach than normal with splitting CSS between font settings and then positional settings. Honestly I find the approach both easier but also increased cognitive load a little. As I'm needing to think about where things are.
+
+I should have used more classes rather than class + html attribute (i.e. `.text-container p`)
 
-- Where can I see your demo?
-- What was your experience?
-- What have you learned/improved?
-- Your wisdom? :)
 
 ### Built With
 
-<!-- This section should list any major frameworks that you built your project using. Here are a few examples.-->
+Pure HTML & CSS, although making heavy use of CSS Properties and dynamic sizing.
-
-- [React](https://reactjs.org/)
-- [Vue.js](https://vuejs.org/)
-- [Tailwind](https://tailwindcss.com/)
-
-## Features
-
-<!-- List the features of your application or follow the template. Don't share the figma file here :) -->
-
-This application/site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges) challenge. The [challenge](https://devchallenges.io/challenges/wBunSb7FPrIepJZAg0sY) was to build an application to complete the given user stories.
-
 
 ## Acknowledgements
 
-<!-- This section should list any articles or add-ons/plugins that helps you to complete the project. This is optional but it will help you in the future. For exmpale -->
+- [Fluid-responsive font-size calculator](https://websemantics.uk/tools/responsive-font-calculator/) by Mike Foskett for building this useful calculator.
-
-- [Steps to replicate a design with only HTML and CSS](https://devchallenges-blogs.web.app/how-to-replicate-design/)
-- [Node.js](https://nodejs.org/)
-- [Marked - a markdown parser](https://github.com/chjj/marked)
 
 ## Contact
 
-- Website [tarasis.net](https://tarasis.net)
+- Website - Blog [tarasis.net](https://tarasis.net)
+- Website - Portfolio [rmcg.dev](https://rmcg.dev)
 - GitHub [@tarasis](https://github.com/tarasis)
 - Twitter [@tarasis](https://twitter.com/tarasis)

projects/devchallenges/404-not-found/index.html

@@ -25,11 +25,10 @@
                 <a href="#">Back to homepage</a>
             </div>
         </div>
-
     </main>
 
     <footer>
-        <p>created by tarasis - devChallenges.io</p>
+        <p>created by <a href="https://devchallenges.io/portfolio/tarasis">tarasis</a> - devChallenges.io</p>
     </footer>
 
 </body>

projects/devchallenges/404-not-found/style.css

@@ -13,33 +13,66 @@
     --col-secondary: hsla(0, 0%, 31%, 1);
     --col-tertiary: hsla(0, 0%, 74%, 1);
     --col-white: hsla(0, 0%, 100%, 1);
-    /* --col-test-white: hsl(0, 0%, 100%);
-    --col-test-hsl-with-alpha: hsl(0, 0%, 100%, 1);
-    --col-test-hsla: hsla(0, 0%, 100%, 1);
-    --col-test-rbg-with-alpha: rgb(255, 255, 255, 1);
-    --col-test-rgba: rgba(255, 255, 255, 1);
-    --col-test-rgb-no-alpha: rgb(255, 255, 255); */
 
     --ff-inconsolata: "Inconsolata", monospace;
     --ff-space-mono: "Space Mono", monospace;
     --ff-montserrat: "Montserrat", sans-serif;
 
-    /* * 24px mobile and desktop */
+    /* * mobile and desktop
+        24px font size
+        25px line height
+        -8& letter spacing
+    */
     --fs-h1: 1.5rem;
-    /* * 48px mobile to 64px mobile */
+    --lh-h1: 1.5625rem;
+    --ls-h1: -0.08em;
+
+    /*
+        * 48px mobile to 64px desktop
+        * line height 71px mobile to 95px desktop
+    */
     --fs-h2: clamp(3rem, 5vw + 1rem, 4rem);
-    /* * 18px mobile to 24px mobile */
+
+    /* min-height: 0vw; */
+    --lh-h2: clamp(71px, calc(4.4375rem + ((1vw - 3.75px) * 2.2535)), 95px);
+    --ls-h2: -0.035em;
+    /*
+        * 18px mobile to 24px desktop
+        * line height 27px mobile to 36 desktop
+    */
     --fs-error-message: clamp(1.125rem, 0.993rem + 0.5634vw, 1.5rem);
+    --lh-error-message: clamp(
+        27px,
+        calc(1.6875rem + ((1vw - 3.75px) * 0.8451)),
+        36px
+    );
+
     /* * 14px mobile & desktop */
     --fs-back-link: 0.875rem;
 
     /* * Margins */
     --mar-24px: 1.5rem;
     --mar-77px: 4.8125rem;
-    --margin-default: var(--mar-24px);
+    --margin-default-sides: var(--mar-24px);
+    --margin-default-top: 0px;
+
+    --header-margin-top: clamp(
+        20px,
+        calc(1.25rem + ((1vw - 3.75px) * 1.8779)),
+        40px
+    );
+
+    --image-margin-top: 4rem;
+    --image-margin-bottom: 3.75rem;
+    --image-margin-left: 1.25rem;
+    --image-margin-right: 1.25rem;
 
     /* * Flex */
     --flex-direction: column;
+
+    --error-text-box-width: auto;
+
+    --image-container-width: 100%;
 }
 
 body {
@@ -51,26 +84,34 @@ h1 {
     font-family: var(--ff-inconsolata);
     font-weight: 700;
     font-size: var(--fs-h1);
+
+    line-height: var(--lh-h1);
+    letter-spacing: var(--ls-h1);
 }
 
 .container {
     font-family: var(--ff-space-mono);
     font-weight: 700;
     color: var(--col-primary);
+    letter-spacing: var(--ls-h2);
 }
 
 .container h2 {
     font-size: var(--fs-h2);
+    line-height: var(--lh-h2);
+    letter-spacing: var(--ls-h2);
 }
 
 .container p {
     font-weight: 400;
     font-size: var(--fs-error-message);
     color: var(--col-secondary);
+    line-height: var(--lh-error-message);
 }
 
 .container a {
     font-size: var(--fs-back-link);
+    text-transform: uppercase;
 }
 
 footer {
@@ -83,21 +124,23 @@ footer {
 /* ? Positioning & sizing */
 
 h1 {
-    margin-left: var(--margin-default);
+    margin-left: var(--margin-default-sides);
+    margin-top: var(--header-margin-top);
 }
 
 .container {
     display: flex;
     flex-direction: var(--flex-direction);
-    margin: 0 var(--margin-default);
+    margin: var(--margin-default-top) var(--margin-default-sides);
 }
 
 .img_container {
-    margin: 4rem 1.25rem 3.75rem 1.25rem;
+    margin: var(--image-margin-top) var(--image-margin-right)
+        var(--image-margin-bottom) var(--image-margin-left);
 }
 
 .container img {
-    width: 100%;
+    width: var(--image-container-width);
 }
 
 .text_container h2 {
@@ -106,6 +149,7 @@ h1 {
 
 .text_container p {
     margin-bottom: 4.125rem;
+    width: var(--error-text-box-width);
 }
 
 .text_container a {
@@ -116,19 +160,22 @@ h1 {
 
 footer {
     position: fixed;
-    bottom: 1rem;
+    bottom: 1.5rem;
-    /* color: var(--col-test-white);
+    width: 100%;
-    color: var(--col-test-hsl-with-alpha);
-    color: var(--col-test-hsla);
-    color: var(--col-test-rbg-with-alpha);
-    color: var(--col-test-rgba);
-    color: var(--col-test-rgb-no-alpha);
-    color: --col-test; */
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 800px) {
     :root {
-        --margin-default: var(--mar-77px);
+        --margin-default-sides: var(--mar-77px);
+        --margin-default-top: 12.5rem;
         --flex-direction: row;
+        --error-text-box-width: 26ch;
+
+        --image-margin-top: 0px;
+        --image-margin-bottom: 0px;
+        --image-margin-left: 0px;
+        --image-margin-right: 0px;
+
+        --image-container-width: 75%;
     }
 }