From 364540e9af4cca327fd54e9782d95bd85015e245 Mon Sep 17 00:00:00 2001
From: Steven Haskell <stevenwhaskell@gmail.com>
Date: Wed, 10 Oct 2018 23:35:56 -0400
Subject: [PATCH] Further updated sizing of blocks

Further updated sizing of calculator blocks. Now they will fill any screen size perfectly. NOTE: Works well for everything but mobile landscape. Still need a solution to it.
---
 css/appstyling-v2.css        | 59 ++++++++++++++++++++++++++--------
 css/main.css                 | 19 ++++++-----
 whatareyouliftingapp-V5.html | 62 +++++++++++++++++++-----------------
 3 files changed, 88 insertions(+), 52 deletions(-)

diff --git a/css/appstyling-v2.css b/css/appstyling-v2.css
index e7afa60..def0172 100644
--- a/css/appstyling-v2.css
+++ b/css/appstyling-v2.css
@@ -1,7 +1,7 @@
 /*
 * What are you lifting V1
 * Copyright 2018, stevenhaskell
-* 12/29/2014
+* 10/10/2018
 */
 
 
@@ -22,6 +22,10 @@
 - Media Queries
 */
 
+p {
+	margin-bottom: 0px;
+	margin-top: 0px;
+}
 
 h2 {
 	font-family: Roboto;
@@ -34,12 +38,13 @@ h2 {
 
 
 .b-header{
-	height: 18vh;
+	height: 24vh;
 	background-color: #48484A;
-	padding: 24px 16px;
 	text-align: center;
 	color: #FFFFFF;
 	position: relative;
+	box-shadow: 0 3px 6px 0 rgba(0,0,0,0.23), 0 3px 6px 0 rgba(0,0,0,0.16);
+	z-index: 1000;
 }
 
 .b-header__heading{
@@ -49,6 +54,7 @@ h2 {
 	font-weight: 400;
 	line-height: 48px;
 	letter-spacing: .025em;
+	margin: 0px;
 }
 
 .b-header__container {
@@ -71,12 +77,12 @@ p.subheading {
 }
 
 .b-platevisual{
-	height: 28vh;
+	height: 36vh;
 	background-color: #FFFFFF;
-	padding: 24px 16px;
 	text-align: center;
 	color: #48484A;
 	position: relative;
+	z-index: 100;
 }
 
 
@@ -107,21 +113,25 @@ p.subheading {
 }
 
 .b-calulatorinputs {
-	height: 28vh;
+	height: 40vh;
 	width: auto;
 	background-color: #8C8E90;
 	text-align: left;
 	color: #FFFFFF;
 	position: relative;
+	box-shadow: 0 6px 6px 0 rgba(0,0,0,0.26), 0 10px 20px 0 rgba(0,0,0,0.19);
+	z-index: 500;
 }
 
+
 .b-calulatorinputs__platerequirements{
-	height: auto;
+	height: 50%;
 	text-align: center;
 	background-color: #8C8E90;
 	border-bottom: 16px solid #FF6600;
 	overflow:auto;
-	padding: 0px 10px;
+	box-sizing: border-box;
+	padding-top: 2%
 }
 
 .b-calulatorinputs__inputcontainer{
@@ -133,8 +143,9 @@ p.subheading {
 	line-height: 14px;
 	letter-spacing: 1.5px;
 	height: auto;
-	overflow: auto;
+	overflow: visible;
 	text-align: center;
+	padding-top: 2%
 }
 
 
@@ -151,6 +162,12 @@ p.subheading {
 
 }
 
+.b-calulatorinputs__weightinput{
+	display: inline-block;
+	text-align: center;
+
+}
+
 input.input-weightsneeded{
 	width: 100%;
 	font-family: "Zilla Slab";
@@ -169,12 +186,10 @@ input.input-weightsneeded{
 
 .b-calulatorinputs__infoentry{
 	background-color: #48484A;
-	padding: 8px 10px;
+	height: 50%;
+	position:relative;
 }
 
-.b-calulatorinputs__inputcontainer{
-	text-align: center;
-}
 
 .b-calulatorinputs__infoentry label{
 	text-align: left;
@@ -220,6 +235,24 @@ label {
 	text-align: center;
 }
 
+.b-infoentry__dividerheading{
+	display: block;
+    margin: 16px auto;
+    position: relative;
+	border-bottom: 1px solid #979797;
+	max-width: 288px;
+}
+
+.b-infoentry__heading{
+	background: #48484A;
+    white-space: nowrap;
+    padding: 0 32px;
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    transform: translate(-50%, -100%);
+}
+
 /*
 .b-container {
 
diff --git a/css/main.css b/css/main.css
index 6e195c5..32803b7 100644
--- a/css/main.css
+++ b/css/main.css
@@ -130,19 +130,19 @@ body {
 
 /* Typography
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 2rem;
-  font-weight: 300; }
+/* h1, h2, h3, h4, h5, h6 {*/
+  /*margin-top: 0;*/
+  /*margin-bottom: 2rem;*/
+ /* font-weight: 300; }
 h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
 h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
 h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
 h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
 h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
 h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
-
+*/
 /* Larger than phablet */
-@media (min-width: 550px) {
+/*@media (min-width: 550px) {
   h1 { font-size: 5.0rem; }
   h2 { font-size: 4.2rem; }
   h3 { font-size: 3.6rem; }
@@ -153,14 +153,13 @@ h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
 
 p {
   margin-top: 0; }
-
-
+*/
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-a {
+/*a {
   color: #1EAEDB; }
 a:hover {
-  color: #0FA0CE; }
+  color: #0FA0CE; }*/
 
 
 /* Buttons
diff --git a/whatareyouliftingapp-V5.html b/whatareyouliftingapp-V5.html
index e41f9a0..1317c9c 100644
--- a/whatareyouliftingapp-V5.html
+++ b/whatareyouliftingapp-V5.html
@@ -37,7 +37,7 @@
                 <div class="b-platevisual__container">
                     <p class="b-platevisual__weightfinal"><span class="input-element input-final">0</span> LBS</p>
                     <div class="b-platevisual__barbell">
-                        <img src="https://qph.fs.quoracdn.net/main-qimg-377c39d784e8860d4ce6142fba0e09e0-c" style="width: 50%">
+                        <img src="https://qph.fs.quoracdn.net/main-qimg-377c39d784e8860d4ce6142fba0e09e0-c" style="width: 50%;max-width: 300px;">
                     </div>
                     <p class="subheading">Offset: <span class="input-difference">0</span> LBS</p>
                 </div>
@@ -46,44 +46,48 @@
             <div class="b-calulatorinputs">
                 <!-- Plate Requirements -->
                 <div class="b-calulatorinputs__platerequirements">
-                	<p class="b-calulatorinputs__subheading subheading">Plates Needed on Each Side</p>
-                    <div class="b-calulatorinputs__inputcontainer">
-                        <div class="b-calulatorinputs__input">
-                            <label for="req45">45 LBS</label>
-                            <input type="number" name="N45" class="input-element input-weightsneeded input-needed45"  min="0" step="1" placeholder="0" readonly="readonly" id="req45">
+                    	<p class="b-calulatorinputs__subheading subheading">Plates Needed on Each Side</p>
+                        <div class="b-calulatorinputs__inputcontainer">
+                            <div class="b-calulatorinputs__input">
+                                <label for="req45">45 LBS</label>
+                                <input type="number" name="N45" class="input-element input-weightsneeded input-needed45"  min="0" step="1" placeholder="0" readonly="readonly" id="req45">
+                            </div>
+                            <div class="b-calulatorinputs__input">
+                                <label for="req35">35 LBS</label>
+                                <input type="number" name="N35" class="input-element input-weightsneeded input-needed35" min="0" step="1" placeholder="0" readonly="readonly" id="req35">
+                            </div>
+                            <div class="b-calulatorinputs__input">
+                                <label for="req25">25 LBS</label>
+                                <input type="number" name="N25" class="input-element input-weightsneeded input-needed25" min="0" step="1" placeholder="0" readonly="readonly" id="req25">
+                            </div>
+                            <div class="b-calulatorinputs__input">
+                                <label for="req10">10 LBS</label>
+                                <input type="number" name="N10" class="input-element input-weightsneeded input-needed10" min="0" step="1" placeholder="0" readonly="readonly" id="req10">
+                            </div>
+                            <div class="b-calulatorinputs__input">
+                                <label for="req5">5 LBS</label>
+                                <input type="number"name="N5" class="input-element input-weightsneeded input-needed5" min="0" step="1" placeholder="0" readonly="readonly" id="req5">
+                            </div>
+                            <div class="b-calulatorinputs__input">
+                                <label for="req2">2.5 LBS</label>
+                                <input type="number" name="N2half" class="input-element input-weightsneeded input-needed2" min="0" step="1" placeholder="0" readonly="readonly" id="req2">
+                            </div>
                         </div>
-                        <div class="b-calulatorinputs__input">
-                            <label for="req35">35 LBS</label>
-                            <input type="number" name="N35" class="input-element input-weightsneeded input-needed35" min="0" step="1" placeholder="0" readonly="readonly" id="req35">
-                        </div>
-                        <div class="b-calulatorinputs__input">
-                            <label for="req25">25 LBS</label>
-                            <input type="number" name="N25" class="input-element input-weightsneeded input-needed25" min="0" step="1" placeholder="0" readonly="readonly" id="req25">
-                        </div>
-                        <div class="b-calulatorinputs__input">
-                            <label for="req10">10 LBS</label>
-                            <input type="number" name="N10" class="input-element input-weightsneeded input-needed10" min="0" step="1" placeholder="0" readonly="readonly" id="req10">
-                        </div>
-                        <div class="b-calulatorinputs__input">
-                            <label for="req5">5 LBS</label>
-                            <input type="number"name="N5" class="input-element input-weightsneeded input-needed5" min="0" step="1" placeholder="0" readonly="readonly" id="req5">
-                        </div>
-                        <div class="b-calulatorinputs__input">
-                            <label for="req2">2.5 LBS</label>
-                            <input type="number" name="N2half" class="input-element input-weightsneeded input-needed2" min="0" step="1" placeholder="0" readonly="readonly" id="req2">
-                        </div>
-                    </div>
                 </div>
 
                 <!-- Weight Entry -->
                 <div class="b-calulatorinputs__infoentry">
                     <div class="b-calulatorinputs__inputcontainer">
-                        <div class="b-calulatorinputs__input">
+                        <div class="b-calulatorinputs__weightinput">
                         	<label for="Weight">WEIGHT</label>
                         	<input type="text" class="b-infoentry__input input-element input-weight" name="Weight" placeholder="What are you lifting? (LBS)" id="Weight">
                         	<input type="button" class="b-infoentry__button submit-element input-calculate" name="Calculate" value="LIFT" onclick="startcalc()">
                         </div>
-                    	<a href="#options"><h2 class="b-infoentry__heading">Options</h2></a>
+                    	<a href="#options">
+                            <div class="b-infoentry__dividerheading">
+                                <h2 class="b-infoentry__heading">Options</h2>
+                            </div>
+                        </a>
                     </div>
                 </div>
             </div>