From d5843c5019058b9efd40de3026b2e1bd04562468 Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Fri, 11 Sep 2020 22:39:04 +0100
Subject: [PATCH] Final positioning. Figured out using flexbox ordering would
 allow me to have the error message first in the row, then I only needed to
 shift it downwards.

---
 .../css/style.css                             | 20 +++++++++++--------
 .../work-through/myProcess.md                 |  6 ++++--
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/FrontendMentor/ping-coming-soon-page-master/css/style.css b/FrontendMentor/ping-coming-soon-page-master/css/style.css
index d5e488a..9049219 100644
--- a/FrontendMentor/ping-coming-soon-page-master/css/style.css
+++ b/FrontendMentor/ping-coming-soon-page-master/css/style.css
@@ -80,14 +80,15 @@ body {
 
 .formSection input[type=text] {
     font-family: 'Libre Franklin', sans-serif;
-    width: calc(100% - 44px);
+    width: calc(100% - 47px); /* shrink width by padding left+right + border */
 
     color: black;
     font-size: 12px;
     font-weight: 300;
     border: 1px solid var(--site-paleBlue);
-    padding: 0.55rem 0;
-    padding-left: 20px;
+    padding-top: 0.55rem;
+    padding-bottom: 0.55rem;
+    padding-left: 25px;
     padding-right: 20px;
     text-align: justify;
     text-decoration: none;
@@ -266,12 +267,11 @@ footer {
     .formSection input[type=text] {
         flex-basis: 66%;
 
-        width: calc(100% - 44px);
         font-size: 17px;
         font-weight: 300;
-        padding: 0.85rem 0;
-        padding-left: 20px;
-        padding-right: 20px;
+        padding-top: 0.85rem;
+        padding-bottom: 0.85rem;
+        order: 2;
     }
 
     .formSection button {
@@ -283,6 +283,7 @@ footer {
 
         padding: 0.85rem 0;
         box-shadow: 0px 3px 10px 1px var(--site-paleBlue);
+        order: 3;
     }
 
     .notifyButton.notifyError {
@@ -290,11 +291,12 @@ footer {
     }
     
     .errorSection {
+        order: 1;
         height: 0;
         width: 0;
         padding: 0;
         margin: 0;
-        transform: translate(-21rem, 3.2rem);
+        transform: translate(0, 3.2rem);
     }
 
     .errorMessage {
@@ -302,6 +304,8 @@ footer {
         width: 16rem;
         height: 2rem;
         overflow: auto;
+        text-align: left;
+        padding-left: 1.25rem;
     }
     
 
diff --git a/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md b/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md
index 055635c..d37d9f6 100644
--- a/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md
+++ b/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md
@@ -82,7 +82,7 @@ Swapped method of doing the circles around the social icons. I would have prefer
 BUGS:
 * ~~when screen not tall enough social buttons and copyright pushed up the page because I clamped them to the bottom of the browser window, rather than the page.~~
 * ~~because I used attacked circles I can't just change the background to blue for hover. Need to either sub in a filled circle on hover OR swap to manually creating the circle~~
-* transitions sizes between 600 and about 800 look wrong / bad / odd
+* ~~transitions sizes between 600 and about 800 look wrong / bad / odd~~ (improved but thats it)
 
 The transition thing is really bad
 
@@ -100,4 +100,6 @@ Fixed positioning of the footer section and social buttons. Needed it back in th
 
 Last thing is my hack for the error when email field and button are in a row. How to position the text relative to the input field? Can I hide it behind it and move it down? If its in the same row, then it takes up space which we don't want, hence the 0 width (zero height for when in column)
 
-Ergh. Want to be done with this. Frustrating myself.
\ No newline at end of file
+Ergh. Want to be done with this. Frustrating myself.
+
+MY GAWD. Eureka, just realised that what I want to use is Flexbox ordering. By doing this, the error message is first, and all I need to do is shift it downwards, no horizontal translation needed. PERFECT.
\ No newline at end of file