diff --git a/projects/devchallenges/404-not-found/README.md b/projects/devchallenges/404-not-found/README.md
index 152f972..58d6a6c 100644
--- a/projects/devchallenges/404-not-found/README.md
+++ b/projects/devchallenges/404-not-found/README.md
@@ -8,11 +8,11 @@
-
+
Demo
|
-
+
Solution
|
@@ -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
-
+
-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
-
-
-- [React](https://reactjs.org/)
-- [Vue.js](https://vuejs.org/)
-- [Tailwind](https://tailwindcss.com/)
-
-## Features
-
-
-
-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.
-
+Pure HTML & CSS, although making heavy use of CSS Properties and dynamic sizing.
## Acknowledgements
-
-
-- [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)
+- [Fluid-responsive font-size calculator](https://websemantics.uk/tools/responsive-font-calculator/) by Mike Foskett for building this useful calculator.
## 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)
diff --git a/projects/devchallenges/404-not-found/index.html b/projects/devchallenges/404-not-found/index.html
index 3164265..da54182 100644
--- a/projects/devchallenges/404-not-found/index.html
+++ b/projects/devchallenges/404-not-found/index.html
@@ -25,11 +25,10 @@
Back to homepage
-
diff --git a/projects/devchallenges/404-not-found/screenshot.png b/projects/devchallenges/404-not-found/screenshot.png
new file mode 100644
index 0000000..f4dc111
Binary files /dev/null and b/projects/devchallenges/404-not-found/screenshot.png differ
diff --git a/projects/devchallenges/404-not-found/style.css b/projects/devchallenges/404-not-found/style.css
index d2a3c3b..83f1c2c 100644
--- a/projects/devchallenges/404-not-found/style.css
+++ b/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;
- /* color: var(--col-test-white);
- 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; */
+ bottom: 1.5rem;
+ width: 100%;
}
-@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%;
}
}