tarasis
/
old_tarasis.net
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.

This commit is contained in:
Robert McGovern 2020-09-11 22:39:04 +01:00
parent 4971c7c7f9
commit d5843c5019
2 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
FrontendMentor/ping-coming-soon-page-master/css/style.css
View File

@ -80,14 +80,15 @@ body {
.formSection input[type=text] { .formSection input[type=text] {
font-family: 'Libre Franklin', sans-serif; font-family: 'Libre Franklin', sans-serif;
width: calc(100% - 44px); width: calc(100% - 47px); /* shrink width by padding left+right + border */
color: black; color: black;
font-size: 12px; font-size: 12px;
font-weight: 300; font-weight: 300;
border: 1px solid var(--site-paleBlue); border: 1px solid var(--site-paleBlue);
padding: 0.55rem 0; padding-top: 0.55rem;
padding-left: 20px; padding-bottom: 0.55rem;
padding-left: 25px;
padding-right: 20px; padding-right: 20px;
text-align: justify; text-align: justify;
text-decoration: none; text-decoration: none;
@ -266,12 +267,11 @@ footer {
.formSection input[type=text] { .formSection input[type=text] {
flex-basis: 66%; flex-basis: 66%;
width: calc(100% - 44px);
font-size: 17px; font-size: 17px;
font-weight: 300; font-weight: 300;
padding: 0.85rem 0; padding-top: 0.85rem;
padding-left: 20px; padding-bottom: 0.85rem;
padding-right: 20px; order: 2;
} }
.formSection button { .formSection button {
@ -283,6 +283,7 @@ footer {
padding: 0.85rem 0; padding: 0.85rem 0;
box-shadow: 0px 3px 10px 1px var(--site-paleBlue); box-shadow: 0px 3px 10px 1px var(--site-paleBlue);
order: 3;
} }
.notifyButton.notifyError { .notifyButton.notifyError {
@ -290,11 +291,12 @@ footer {
} }
.errorSection { .errorSection {
order: 1;
height: 0; height: 0;
width: 0; width: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
transform: translate(-21rem, 3.2rem); transform: translate(0, 3.2rem);
} }
.errorMessage { .errorMessage {
@ -302,6 +304,8 @@ footer {
width: 16rem; width: 16rem;
height: 2rem; height: 2rem;
overflow: auto; overflow: auto;
text-align: left;
padding-left: 1.25rem;
} }

4
FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md
View File

@ -82,7 +82,7 @@ Swapped method of doing the circles around the social icons. I would have prefer
BUGS: 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.~~ * ~~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~~ * ~~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 The transition thing is really bad
@ -101,3 +101,5 @@ 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) 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. 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.